Skip to content

Commit

Permalink
fix: to #1 (#2)
Browse files Browse the repository at this point in the history 
* fix: to #1

* remove aito
  • Loading branch information
@buzhou
buzhou authored Sep 7, 2018
1 parent c472dae commit cdc1a71
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 92 deletions.
36 changes: 18 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,26 @@ React user guide

[![Sauce Test Status][sauce-image]][sauce-url]

[npm-image]: http://img.shields.io/npm/v/uxcore-aito-user-guide.svg?style=flat-square
[npm-url]: http://npmjs.org/package/uxcore-aito-user-guide
[travis-image]: https://img.shields.io/travis/uxcore/uxcore-aito-user-guide.svg?style=flat-square
[travis-url]: https://travis-ci.org/uxcore/uxcore-aito-user-guide
[coveralls-image]: https://img.shields.io/coveralls/uxcore/uxcore-aito-user-guide.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/uxcore/uxcore-aito-user-guide?branch=master
[dep-image]: http://img.shields.io/david/uxcore/uxcore-aito-user-guide.svg?style=flat-square
[dep-url]: https://david-dm.org/uxcore/uxcore-aito-user-guide
[devdep-image]: http://img.shields.io/david/dev/uxcore/uxcore-aito-user-guide.svg?style=flat-square
[devdep-url]: https://david-dm.org/uxcore/uxcore-aito-user-guide#info=devDependencies
[downloads-image]: https://img.shields.io/npm/dm/uxcore-aito-user-guide.svg
[sauce-image]: https://saucelabs.com/browser-matrix/uxcore-aito-user-guide.svg
[sauce-url]: https://saucelabs.com/u/uxcore-aito-user-guide
[npm-image]: http://img.shields.io/npm/v/uxcore-user-guide.svg?style=flat-square
[npm-url]: http://npmjs.org/package/uxcore-user-guide
[travis-image]: https://img.shields.io/travis/uxcore/uxcore-user-guide.svg?style=flat-square
[travis-url]: https://travis-ci.org/uxcore/uxcore-user-guide
[coveralls-image]: https://img.shields.io/coveralls/uxcore/uxcore-user-guide.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/uxcore/uxcore-user-guide?branch=master
[dep-image]: http://img.shields.io/david/uxcore/uxcore-user-guide.svg?style=flat-square
[dep-url]: https://david-dm.org/uxcore/uxcore-user-guide
[devdep-image]: http://img.shields.io/david/dev/uxcore/uxcore-user-guide.svg?style=flat-square
[devdep-url]: https://david-dm.org/uxcore/uxcore-user-guide#info=devDependencies
[downloads-image]: https://img.shields.io/npm/dm/uxcore-user-guide.svg
[sauce-image]: https://saucelabs.com/browser-matrix/uxcore-user-guide.svg
[sauce-url]: https://saucelabs.com/u/uxcore-user-guide


### Development

```sh
git clone https://github.com/uxcore/uxcore-aito-user-guide
cd uxcore-aito-user-guide
git clone https://github.com/uxcore/uxcore-user-guide
cd uxcore-user-guide
npm install
npm run server
```
Expand All @@ -39,8 +39,8 @@ if you'd like to save your install time，you can use uxcore-tools globally.

```sh
npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-aito-user-guide
cd uxcore-aito-user-guide
git clone https://github.com/uxcore/uxcore-user-guide
cd uxcore-user-guide
npm install
npm run dep
npm run start
Expand All @@ -60,7 +60,7 @@ npm run coverage

## Demo

http://uxcore.alibaba.net/components/uxcore-aito-user-guide?type=others
http://uxcore.alibaba.net/components/uxcore-user-guide?type=others

## Contribute

Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"component"
],
"publishConfig": {
"registry": "http://registry.npm.alibaba-inc.com"
"registry": "https://registry.npmjs.org/"
},
"devDependencies": {
"console-polyfill": "^0.2.2",
Expand All @@ -50,8 +50,9 @@
"dependencies": {
"classnames": "^2.1.2",
"prop-types": "15.x",
"uxcore": "^0.21.4"
"uxcore-button": "^0.4.19",
"uxcore-tooltip": "^0.4.11"
},
"contributors": [],
"license": "MIT"
}
}
3 changes: 2 additions & 1 deletion src/UserGuide.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,15 @@ export default class UserGuide {
// key must specified
const steps = (this.steps || []).filter(i => i);
const dom = document.createElement('div');
dom.className = `${this.prefixCls}-stage${designMode ? ' design-mode' : ''}${this.className?` ${this.className}`:''}`;
dom.className = `${this.prefixCls}-stage${designMode ? ' design-mode' : ''}${this.className ? ` ${this.className}` : ''}`;
document.body.appendChild(dom);
const overflow = document.body.style.overflowY;
document.body.style.overflowY = 'hidden';
scrollToTop(0);
ReactDOM.render(<UserGuideStage
steps={steps}
locale={this.locale}
prefixCls={this.prefixCls}
done={() => {
document.body.removeChild(dom);
document.body.style.overflowY = overflow;
Expand Down
104 changes: 53 additions & 51 deletions src/UserGuide.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
* All rights reserved.
*/

@__popoverPrefixCls: kuma-user-guide;
@__userGuidePrefixCls: kuma-user-guide;

@keyframes breathing {
@keyframes kumaUserGuideBreathing {
0%, 100% {
animation-timing-function: spring(1 90 11 -0.2);
}
Expand All @@ -20,64 +20,73 @@
}


.@{__popoverPrefixCls}-stage {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 100;
background: @normal-alpha-9;
.breathing-point {
.@{__userGuidePrefixCls}{
&-stage {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 100;
background: @normal-alpha-9;
}
&-breathing-point {
position: absolute;
height: 20px;
width: 20px;
&.hidden {
display: none;
}
.big {
height: 10px;
width: 10px;
top: 5px;
left: 5px;
position: absolute;
border-radius: 50%;
background: @brand-primary-alpha-6;
animation: breathing;
animation-duration: 2s;
animation-iteration-count: infinite;
}
&-hidden {
display: none;
}
&-big {
height: 10px;
width: 10px;
top: 5px;
left: 5px;
position: absolute;
border-radius: 50%;
background: @brand-primary-alpha-6;
animation: kumaUserGuideBreathing;
animation-duration: 2s;
animation-iteration-count: infinite;
}
&-small {
height: 10px;
width: 10px;
position: absolute;
top: 5px;
left: 5px;
background: @brand-primary;
border-radius: 50%;
}
&-stage-step-hint {
width: 300px;
.kuma-tooltip-inner {
text-align: left;
padding: 20px 24px;
}
.small {
height: 10px;
width: 10px;
position: absolute;
top: 5px;
left: 5px;
background: @brand-primary;
border-radius: 50%;
&.kuma-tooltip-placement-bottomRight,
&.kuma-tooltip-placement-topRight {
.kuma-tooltip-arrow {
right: 5px;
left: auto;
}
}
}
}
.@{__popoverPrefixCls}-stage-step-hint {
width: 300px;
.step-hint-title {
&-step-hint-title {
font-size: 16px;
color: @dark-alpha-2;
margin-bottom: 12px;
}
.step-hint-desc {
&-step-hint-desc {
font-size: 12px;
color: @dark-alpha-3;
img,
video {
width: 250px;
}
}
.kuma-tooltip-inner {
text-align: left;
padding: 20px 24px;
}
.hint-bottom {
&-hint-bottom {
margin-top: 20px;
overflow: auto;
line-height: 28px;
Expand All @@ -89,16 +98,9 @@
margin-right: 8px;
}
}
.skip-text {
&-skip-text {
font-size: 12px;
color: @normal-alpha-4;
cursor: pointer;
}
&.kuma-tooltip-placement-bottomRight,
&.kuma-tooltip-placement-topRight {
.kuma-tooltip-arrow {
right: 5px;
left: auto;
}
}
}
43 changes: 24 additions & 19 deletions src/UserGuideStage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
const React = require('react');
const PropTypes = require('prop-types');
const scrollToTop = require('./scrollToTop');
import Tooltip from 'uxcore/lib/Tooltip';
import Tooltip from 'uxcore-tooltip';
import Button from 'uxcore-button';

const texts = {
'zh-cn': {
Expand Down Expand Up @@ -118,24 +119,24 @@ class UserGuideStage extends React.Component {
const multple = this.props.steps.length > 0;
const finalText = this.props.finalText || (multple ?
texts[this.props.locale].final : texts[this.props.locale].done);
return (<div className="guide-holder">
return (<div className={`${this.props.prefixCls}-holder`}>
{this.props.steps.map((s, index) => {
const center = this.getCenter(s);
const visible = (this.state.currentStep === index) || this.props.designMode;
const hint = (
<div
className="step-hint"
className={`${this.props.prefixCls}-step-hint`}
>
<div className="step-hint-title">
<div className={`${this.props.prefixCls}-step-hint-title`}>
{s.title}
</div>
{!s.contentType || s.contentType === 'TEXT' &&
<div className="step-hint-desc">{s.content}</div>}
<div className={`${this.props.prefixCls}-step-hint-desc`}>{s.content}</div>}
{s.contentType === 'IMAGE' &&
<div className="step-hint-desc"><img role="presentation" src={s.content} /></div>
<div className={`${this.props.prefixCls}-step-hint-desc`}><img role="presentation" src={s.content} /></div>
}
{s.contentType === 'VIDEO' &&
<div className="step-hint-desc">
<div className={`${this.props.prefixCls}-step-hint-desc`}>
<video
controls="true"
src={s.content}
Expand All @@ -144,28 +145,30 @@ class UserGuideStage extends React.Component {
/>
</div>
}
<div className="hint-bottom">
<div className={`${this.props.prefixCls}-hint-bottom`}>
<span
role="button"
className="skip-text"
className={`${this.props.prefixCls}-skip-text`}
onClick={() => this.nextStep(this.props.steps.length - 1)}
>
{texts[this.props.locale].skip}
</span>
<button
className="kuma-button-sm kuma-button-primary"
<Button
type="primary"
size="small"
onClick={() => { this.nextStep(index); }}
>
{index === last ? finalText : texts[this.props.locale].next}
</button>
</Button>
{
index > 0 &&
(<button
className="kuma-button-sm kuma-button-secondary"
(<Button
type="secondary"
size="small"
onClick={() => { this.nextStep(index - 2); }}
>
{texts[this.props.locale].prev}
</button>)
</Button>)
}
</div>
</div>);
Expand All @@ -174,19 +177,19 @@ class UserGuideStage extends React.Component {
placement="bottomRight"
trigger={['click']}
visible={visible}
overlayClassName="kuma-user-guide-stage-step-hint"
overlayClassName={`${this.props.prefixCls}-stage-step-hint`}
key={s.step}
>
<div
key={s.step}
className={`breathing-point${visible ? '' : ' hidden'}`}
className={`${this.props.prefixCls}-breathing-point${visible ? '' : ` ${this.props.prefixCls}-hidden`}`}
style={{
top: (center.y + center.h / 2 - 20) || 0,
left: (center.x + center.w / 2 - 20) || 0,
}}
>
<div className="big"></div>
<div className="small"></div>
<div className={`${this.props.prefixCls}-big`}></div>
<div className={`${this.props.prefixCls}-small`}></div>
</div>
</Tooltip>);
})}
Expand All @@ -199,6 +202,7 @@ UserGuideStage.defaultProps = {
done: () => {},
locale: 'zh-cn',
designMode: false,
prefixCls: 'kuma-user-guide',
};

UserGuideStage.propTypes = {
Expand All @@ -207,6 +211,7 @@ UserGuideStage.propTypes = {
locale: PropTypes.string,
finalText: PropTypes.string,
designMode: PropTypes.bool,
prefixCls: PropTypes.string,
};

UserGuideStage.displayName = 'UserGuideStage';
Expand Down

0 comments on commit cdc1a71

Please sign in to comment.