├── .babelrc
├── .eslintrc.js
├── .gitignore
├── .jshintrc
├── .travis.yml
├── LICENSE
├── README.md
├── __tests__
└── time-test.js
├── component
├── Calendar.js
├── Carousel.js
├── CheckBox.js
├── CheckBoxGroup.js
├── ConfirmBox.js
├── DatePicker.js
├── DateTimePicker.js
├── DropDown.js
├── FlashMessage.js
├── Item.js
├── Menu.js
├── Modal.js
├── Notice.js
├── NoticeCenter.js
├── Pagination.js
├── Panel.js
├── Pin.js
├── Progress.js
├── Radio.js
├── RadioGroup.js
├── SlideMenu.js
├── Tab.js
├── TimeInput.js
├── TimePicker.js
├── Tooltip.js
├── high-order
│ ├── defaultCheckedCmp.js
│ ├── documentClickCmp.js
│ ├── dropDownCmp.js
│ ├── intervalCmp.js
│ ├── popUpCmp.js
│ ├── scrollCmp.js
│ └── timeInputCmp.js
├── time-picker
│ └── SelectorList.js
└── util
│ ├── className.js
│ ├── constants.js
│ ├── datetime.js
│ ├── debounce.js
│ ├── dom.js
│ ├── misc.js
│ ├── time.js
│ └── typeCheck.js
├── css
├── all.less
├── carousel.less
├── checkbox.less
├── date-picker.less
├── datetime-picker.less
├── dropdown.less
├── flash-message.less
├── loader.less
├── menu.less
├── meta.less
├── modal.less
├── notice.less
├── pagination.less
├── panel.less
├── pin.less
├── popup.less
├── progress.less
├── reset.less
├── share.less
├── slide-menu.less
├── tab.less
├── time-picker.less
└── transition.less
├── demo
├── css
│ ├── carousel_demo.less
│ ├── demo.less
│ ├── menu_demo.less
│ └── pin_demo.less
├── entre.js
└── example
│ ├── CalendarDemo.jsx
│ ├── CarouselDemo.jsx
│ ├── CheckBoxDemo.jsx
│ ├── CheckBoxGroupDemo.jsx
│ ├── ConfirmBoxDemo.jsx
│ ├── DatePickerDemo.jsx
│ ├── DateTimePickerDemo.jsx
│ ├── DropDownDemo.jsx
│ ├── FlashMessageDemo.jsx
│ ├── MenuDemo.jsx
│ ├── ModalDemo.jsx
│ ├── NoticeDemo.jsx
│ ├── PaginationDemo.jsx
│ ├── PinDemo.jsx
│ ├── ProgressDemo.jsx
│ ├── RadioDemo.jsx
│ ├── RadioGroupDemo.jsx
│ ├── SlideMenuDemo.jsx
│ ├── TabDemo.jsx
│ ├── TimeInputDemo.jsx
│ ├── TimePickerDemo.jsx
│ ├── TooltipDemo.jsx
│ └── index.js
├── dist
└── demo.js
├── index.html
├── index.js
├── lib
├── Calendar.js
├── Carousel.js
├── CheckBox.js
├── CheckBoxGroup.js
├── ConfirmBox.js
├── DatePicker.js
├── DateTimePicker.js
├── DropDown.js
├── FlashMessage.js
├── Item.js
├── Menu.js
├── Modal.js
├── Notice.js
├── NoticeCenter.js
├── Pagination.js
├── Panel.js
├── Pin.js
├── Progress.js
├── Radio.js
├── RadioGroup.js
├── SlideMenu.js
├── Tab.js
├── TimeInput.js
├── TimePicker.js
├── Tooltip.js
├── high-order
│ ├── defaultCheckedCmp.js
│ ├── documentClickCmp.js
│ ├── dropDownCmp.js
│ ├── intervalCmp.js
│ ├── popUpCmp.js
│ ├── scrollCmp.js
│ └── timeInputCmp.js
├── time-picker
│ └── SelectorList.js
└── util
│ ├── className.js
│ ├── constants.js
│ ├── datetime.js
│ ├── debounce.js
│ ├── dom.js
│ ├── misc.js
│ ├── time.js
│ └── typeCheck.js
├── package-lock.json
├── package.json
├── server.js
├── todo.md
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"],
3 | "plugins": [
4 | "add-module-exports"
5 | ]
6 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | *.hot-update.*
4 | npm-debug.log
5 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "esnext": true,
3 | "asi": true,
4 | "boss": false,
5 | "camelcase": false,
6 | "curly": false,
7 | "eqeqeq": false,
8 | "eqnull": false,
9 | "es5": false,
10 | "evil": false,
11 | "expr": true,
12 | "forin": false,
13 | "funcscope": false,
14 | "immed": false,
15 | "indent": 2,
16 | "latedef": false,
17 | "loopfunc": false,
18 | "maxerr": 7,
19 | "newcap": false,
20 | "node": true,
21 | "nonew": false,
22 | "plusplus": false,
23 | "quotmark": "false",
24 | "regexdash": false,
25 | "shadow": false,
26 | "strict": false,
27 | "sub": false,
28 | "supernew": false,
29 | "trailing": false,
30 | "undef": false,
31 | "unused": false,
32 | "white": false
33 | }
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 |
3 | language: node_js
4 |
5 | node_js:
6 | - "5"
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 jerry
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-component
2 |
3 | [](https://travis-ci.org/flyfloor/react-component)
4 | [](https://www.npmjs.com/package/react-ui-component)
5 | [](https://www.npmjs.com/package/react-ui-component)
6 |
7 | >some everyday use component built with reactjs.
8 |
9 | ## Demo
10 |
11 | [demo](http://flyfloor.github.io/react-component/#/?_k=pg3vqw)
12 |
13 | =====
14 |
15 | ## Deprecated
16 |
17 | ## ========> React uikit is in progress: [React-uikits](https://github.com/flyfloor/react-uikits) <========
18 |
19 |
--------------------------------------------------------------------------------
/__tests__/time-test.js:
--------------------------------------------------------------------------------
1 | jest.unmock('../component/util/time');
2 | jest.unmock('../component/util/typeCheck');
3 | const {timeStr2Obj} = require('../component/util/time');
4 |
5 |
6 | describe('timeStr2Obj', () => {
7 | it('0.0.0 should be 00:00:00', () => {
8 | expect(timeStr2Obj('0.0.0')).toEqual({
9 | hour: 0,
10 | second: 0,
11 | minute: 0
12 | });
13 | });
14 |
15 | it('12:03:38 should be 12:03:38', () => {
16 | expect(timeStr2Obj('12:03:38')).toEqual({
17 | hour: 12,
18 | minute: 3,
19 | second: 38,
20 | });
21 | });
22 |
23 | it('undefined, null, xxx, [] all should be 00:00:00', () => {
24 | const value = {
25 | hour: 0,
26 | minute: 0,
27 | second: 0,
28 | };
29 | expect(timeStr2Obj(undefined)).toEqual(value);
30 | expect(timeStr2Obj(null)).toEqual(value);
31 | expect(timeStr2Obj([])).toEqual(value);
32 | });
33 |
34 | it('*&X&D0,0fwaef.0a should be 00:00:00', () => {
35 | expect(timeStr2Obj('&X&D0,0fwaef.0a ')).toEqual({
36 | hour: 0,
37 | second: 0,
38 | minute: 0
39 | });
40 | });
41 |
42 | it('25:68:120 should be 01:08:12', () => {
43 | expect(timeStr2Obj('25:68:120')).toEqual({
44 | hour: 1,
45 | minute: 8,
46 | second: 0,
47 | });
48 | });
49 |
50 | it('-1.2:-2:-1 should be 00:00:00', () => {
51 | expect(timeStr2Obj('-1.2:-2:-1')).toEqual({
52 | hour: 0,
53 | minute: 0,
54 | second: 0,
55 | });
56 | });
57 | });
--------------------------------------------------------------------------------
/component/CheckBox.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const Component = React.Component
3 | const PropTypes = require('prop-types')
4 | const klassName = require('./util/className')
5 |
6 | class CheckBox extends Component {
7 | constructor(props) {
8 | super(props);
9 | this.checkedChange = this.checkedChange.bind(this)
10 | this.state = {
11 | checked: props.checked,
12 | }
13 | }
14 |
15 | checkedChange(e){
16 | const {onChange, value} = this.props;
17 | this.setState({
18 | checked: e.target.checked
19 | });
20 | if(onChange) onChange(e, value);
21 | }
22 |
23 | componentWillReceiveProps(nextProps) {
24 | if (nextProps.checked !== this.props.checked) {
25 | this.setState({
26 | checked: nextProps.checked
27 | });
28 | }
29 | }
30 |
31 | render() {
32 | let {disabled, style, className, children} = this.props;
33 | if (disabled) {
34 | className = klassName('disabled', className);
35 | }
36 | className = klassName(className, 'checkbox');
37 | const {checked} = this.state;
38 | return (
39 |
44 | )
45 | }
46 | }
47 |
48 | CheckBox.propTypes = {
49 | onChange: PropTypes.func,
50 | disabled: PropTypes.bool,
51 | checked: PropTypes.bool,
52 | className: PropTypes.string,
53 | }
54 |
55 | CheckBox.defaultProps = {
56 | className: '',
57 | checked: false,
58 | }
59 |
60 | module.exports = CheckBox
61 |
--------------------------------------------------------------------------------
/component/CheckBoxGroup.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const Component = React.Component
3 | const PropTypes = require('prop-types')
4 | const CheckBox = require('./CheckBox')
5 | const klassName = require('./util/className')
6 | const defaultCheckedCmp = require('./high-order/defaultCheckedCmp')
7 |
8 | class CheckBoxGroup extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.handleChange = this.handleChange.bind(this)
12 | this.addVal = this.addVal.bind(this)
13 | this.removeVal = this.removeVal.bind(this)
14 | this.valueChange = this.valueChange.bind(this)
15 |
16 | const { value } = props;
17 | this.state = {
18 | value
19 | }
20 | }
21 |
22 | componentDidMount() {
23 | let {value} = this.state
24 | let {defaultChecked} = this.props
25 | if (value.length === 0 && defaultChecked) {
26 | this.initDefaultCheckedValue({ multi: true })
27 | }
28 | }
29 |
30 | componentWillReceiveProps(nextProps) {
31 | const { defaultChecked } = this.props
32 | this.optionsChangeReInitValue({
33 | nextProps,
34 | defaultChecked,
35 | multi: true
36 | })
37 | }
38 |
39 | handleChange(e, val){
40 | e.target.checked ? this.addVal(val) : this.removeVal(val);
41 | }
42 |
43 | addVal(val){
44 | let flag = false;
45 | const {value} = this.state;
46 | for (let i = 0; i < value.length; i++) {
47 | if (val === value[i]){
48 | flag = true;
49 | break;
50 | }
51 | }
52 | if (!flag) {
53 | this.setState({
54 | value: value.concat(val)
55 | }, this.valueChange);
56 | }
57 | }
58 |
59 | removeVal(val){
60 | let index = this.state.value.indexOf(val);
61 | if (index > -1) {
62 | this.state.value.splice(index, 1);
63 | this.setState({
64 | value: this.state.value
65 | }, this.valueChange);
66 | }
67 | }
68 |
69 | valueChange(){
70 | this.props.onChange(this.state.value)
71 | }
72 |
73 | render() {
74 | const { labelName, valueName, className, options, style, children } = this.props;
75 | const { value } = this.state;
76 | let optionNodes = [];
77 |
78 | if (children) {
79 | optionNodes = React.Children.map(children, (node, i) => {
80 | let checked = value.indexOf(node.props.value) > -1;
81 | return ;
82 | })
83 | } else {
84 | let itemNode = null;
85 | for (let i = 0; i < options.length; i++) {
86 | let itemChecked = false;
87 | let item = options[i];
88 | for (let j = 0; j < value.length; j++) {
89 | if (value[j] === item[valueName]){
90 | itemChecked = true;
91 | break;
92 | }
93 | }
94 | itemNode =
96 | {item[labelName]}
97 | ;
98 | optionNodes.push(itemNode);
99 | }
100 | }
101 |
102 | return (
103 |
104 | {optionNodes}
105 |
106 | );
107 | }
108 | }
109 |
110 | CheckBoxGroup.defaultProps = {
111 | value: [],
112 | labelName: 'name',
113 | valueName: 'value',
114 | options: [],
115 | }
116 |
117 | CheckBoxGroup.propTypes = {
118 | options: PropTypes.array,
119 | labelName: PropTypes.string,
120 | valueName: PropTypes.string,
121 | onChange: PropTypes.func.isRequired,
122 | defaultChecked: PropTypes.bool,
123 | }
124 |
125 | module.exports = defaultCheckedCmp(CheckBoxGroup)
--------------------------------------------------------------------------------
/component/ConfirmBox.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const ReactDOM = require('react-dom')
3 | const Component = React.Component
4 | const PropTypes = require('prop-types')
5 | const ReactCssTransitionGroup = require('react-addons-css-transition-group')
6 | const documentClickCmp = require('./high-order/documentClickCmp')
7 | const popUpCmp = require('./high-order/popUpCmp')
8 | const klassName = require('./util/className')
9 |
10 | class ConfirmBox extends Component {
11 | constructor(props) {
12 | super(props);
13 | this.handleCancel = this.handleCancel.bind(this)
14 | this.handleConfirm = this.handleConfirm.bind(this)
15 | this.handleTrigger = this.handleTrigger.bind(this)
16 | }
17 |
18 | onOtherDomClick(){
19 | if (!this.props.force) this.popUpClose();
20 | }
21 |
22 | handleCancel(){
23 | const { onCancel } = this.props;
24 | if (!onCancel) return this.popUpClose();
25 | if(onCancel()) this.popUpClose();
26 | }
27 |
28 | handleConfirm(){
29 | const { onConfirm } = this.props;
30 | if (!onConfirm) return this.popUpClose();
31 | if (onConfirm()) this.popUpClose();
32 | }
33 |
34 | handleTrigger(e) {
35 | const contentDOM = ReactDOM.findDOMNode(this.content)
36 | if (e.target && contentDOM && (contentDOM === e.target || contentDOM.contains(e.target))) {
37 | return
38 | }
39 | this.onTrigger(e, true)
40 | }
41 |
42 | render() {
43 | let {confirm, cancel, position, className, content, style, children} = this.props;
44 | const { open } = this.state;
45 | className = klassName('confirm-box popup', className);
46 | if (open) {
47 | className = `${className} _active`;
48 | }
49 |
50 | return (
51 |
56 | { this.trigger = ref }}
59 | >
60 | {children}
61 |
62 |
68 | {
69 | open ?
70 | { this.content = ref }}
73 | >
74 |
{content}
75 |
76 |
80 | { confirm ? confirm :
ok
}
81 |
82 |
86 | { cancel ? cancel :
cancel
}
87 |
88 |
89 |
{ this.arrow = ref }}
92 | >
93 |
94 |
70 |
{
71 | this.setState({ open: true })
72 | if (onClick) onClick()
73 | }}>
74 |
76 |
77 |
78 |
80 | {open ?
81 |
84 | : null
85 | }
86 |
87 |
50 | {confirm}
51 |
);
52 | if (onCancel) actionDOM.push(
54 | {cancel}
55 |
);
56 |
57 | let footer = onCancel || onConfirm
58 | ?
59 | {actionDOM}
60 |
61 | : null;
62 |
63 | className = klassName('modal', className);
64 |
65 | if (display) {
66 | className += ' _show';
67 | }
68 | if (force) {
69 | className += ' _force';
70 | }
71 |
72 | return (
73 |
74 |
75 |
76 | {title ?
77 |
{title}
78 | : null}
79 |
80 | {children}
81 | {footer}
82 |
83 |
84 | {force
85 | ? null
86 | :
{close}
}
87 |
88 | {force
89 | ?
90 | :
91 | }
92 |
46 |
47 | {icon ?
48 | icon : null}
49 |
50 | {title
51 | ?
{title}
52 | : null}
53 | {content}
54 | {close ?
55 |
{close}
56 | : null}
57 |
59 |
14 | {title ?
15 |
16 | {title}
17 |
18 | :null}
19 |
20 | {this.props.children}
21 |
22 |
{ this.pinNode = ref } }>
46 | {children}
47 |
48 | );
49 | }
50 | }
51 |
52 | Pin.propTypes = {
53 | top: PropTypes.number,
54 | begin: PropTypes.number,
55 | }
56 |
57 | Pin.defaultProps = {
58 | top: 0,
59 | className: '',
60 | }
61 |
62 | module.exports = scrollCmp(Pin);
--------------------------------------------------------------------------------
/component/Progress.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const Component = React.Component
3 | const PropTypes = require('prop-types')
4 | const klassName = require('./util/className')
5 |
6 | class Progress extends Component {
7 | constructor(props) {
8 | super(props);
9 | }
10 | render() {
11 | let {value, className, status, size, disabled, children} = this.props;
12 | if (value < 0) value = 0;
13 | if (value > 100) value = 100;
14 | className = klassName(className, 'progress');
15 |
16 | if (status) {
17 | className += ` _${status}`;
18 | }
19 | if (disabled) {
20 | className += ` _disabled`;
21 | }
22 | if (value === 100) {
23 | className += ' _completed';
24 | }
25 | if (children) {
26 | className += ' _context';
27 | }
28 |
29 | if (size) {
30 | className += ` _${size}`
31 | }
32 |
33 |
34 | return (
35 |
36 |
37 | {children}
38 |
39 |
71 | {optionNodes}
72 |
73 | );
74 | }
75 | }
76 |
77 | RadioGroup.propTypes = {
78 | options: PropTypes.array,
79 | labelName: PropTypes.string,
80 | valueName: PropTypes.string,
81 | onChange: PropTypes.func.isRequired,
82 | defaultChecked: PropTypes.bool,
83 | }
84 |
85 | RadioGroup.defaultProps = {
86 | labelName: 'name',
87 | valueName: 'value',
88 | options: [],
89 | }
90 |
91 | module.exports = defaultCheckedCmp(RadioGroup)
--------------------------------------------------------------------------------
/component/SlideMenu.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const Component = React.Component
3 | const PropTypes = require('prop-types')
4 | const klassName = require('./util/className')
5 |
6 | class SlideMenu extends Component {
7 | constructor(props) {
8 | super(props);
9 | this.open = this.open.bind(this)
10 | this.close = this.close.bind(this)
11 |
12 | this.state = {
13 | display: false,
14 | }
15 | }
16 |
17 | calcPositionStyle(){
18 | const {position, width} = this.props
19 | const {display} = this.state;
20 | let cord = display ? 0 : width;
21 |
22 | switch(position){
23 | case 'left':
24 | return {transform: `translate3d(${-cord}px, 0, 0)`,
25 | width: `${width}px`,
26 | left: 0,
27 | top: 0}
28 | case 'top':
29 | return {transform: `translate3d(0, ${-cord}px, 0)`,
30 | height: `${width}px`,
31 | left: 0,
32 | top: 0}
33 | case 'bottom':
34 | return {transform: `translate3d(0, ${cord}px, 0)`,
35 | height: `${width}px`,
36 | left: 0,
37 | bottom: 0}
38 | default:
39 | return {transform: `translate3d(${cord}px, 0, 0)`,
40 | width: `${width}px`,
41 | right:0,
42 | top:0}
43 | }
44 | }
45 |
46 | open(){
47 | this.setState({
48 | display: true
49 | });
50 | }
51 |
52 | close(){
53 | const {onClose} = this.props
54 | if (onClose && !onClose()) return
55 | this.setState({
56 | display: false
57 | });
58 | }
59 |
60 | render() {
61 | const {display} = this.state;
62 | let {className, children} = this.props;
63 | className = klassName(className, 'slide-menu');
64 |
65 | return (
66 |
67 |
68 | {children}
69 |
70 |
71 |
this.handleItemClick(index)}>
58 | {title}
59 |
);
60 | contents.push(
61 | {children}
62 |
);
63 | })
64 |
65 | let node = bottom ?
66 |
67 |
{contents}
68 |
{tabs}
69 |
71 |
{tabs}
72 |
{contents}
73 |
64 |
65 | { this.inputDOM = input } }
67 | onFocus={onFocus}
68 | onBlur={this.handleOnBlur} value={displayValue}
69 | onChange={this.handleInputChange}/>
70 |
71 |
72 |
85 |
91 |
93 | {open ?
94 |
97 | : null
98 | }
99 |
100 |
101 | );
102 | }
103 | }
104 |
105 | TimePicker.defaultProps = {
106 | simple: false,
107 | className: '',
108 | placeHolder: 'input time',
109 | }
110 |
111 | module.exports = dropDownCmp(timeInputCmp(documentClickCmp(TimePicker)))
112 |
--------------------------------------------------------------------------------
/component/Tooltip.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const Component = React.Component
3 | const PropTypes = require('prop-types')
4 | const ReactCssTransitionGroup = require('react-addons-css-transition-group')
5 | const documentClickCmp = require('./high-order/documentClickCmp')
6 | const popUpCmp = require('./high-order/popUpCmp')
7 | const klassName = require('./util/className')
8 |
9 | class Tooltip extends Component {
10 | constructor(props) {
11 | super(props);
12 | }
13 |
14 | onOtherDomClick(){
15 | this.popUpClose()
16 | }
17 |
18 | render() {
19 | const {open} = this.state;
20 | let {position, content, style, className, children, mode} = this.props;
21 | className = klassName('popup', className)
22 | if (open) {
23 | className = `${className} _active`;
24 | }
25 |
26 | let onMouseLeave = null,
27 | onMouseEnter = null,
28 | onClick = null;
29 |
30 | if (mode === 'click') {
31 | onClick = this.onTrigger
32 | } else {
33 | onMouseEnter = e => this.onTrigger(e, true)
34 | onMouseLeave = e => this.onTrigger(e, false)
35 | }
36 |
37 | return (
38 |
45 | { this.trigger = ref } }
48 | >
49 | {children}
50 |
51 |
53 | {open ?
54 | {
55 | this.content = ref
56 | }} className='_content'>
57 |
58 | {content}
59 |
60 |
{
61 | this.arrow = ref
62 | }}>
63 |
57 |
{ this.hourList = ref } }>
59 | {this.formatSelectList('hour')}
60 |
61 |
{ this.minuteList = ref } }>
63 | {this.formatSelectList('minute')}
64 |
65 | {simple ?
66 | null
67 | :
{ this.secondList = ref } }>
69 | {this.formatSelectList('second')}
70 |
}
71 |
)
8 | };
9 |
10 | const imgNodes = getImgs();
11 |
12 | export default class CarouselDemo extends Component {
13 | render() {
14 | let items = [];
15 |
16 | let prev = <<
;
17 | let next = >>
;
18 | return (
19 |
98 | );
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/demo/example/CheckBoxDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {CheckBox} from "./index.js";
3 |
4 | export default class CheckBoxDemo extends Component {
5 | handleChange(e){
6 | console.log('changed', e.target.checked);
7 | }
8 | render() {
9 | return (
10 |
11 |
Checkbox
12 |
13 | -
14 |
Default checkbox
15 | checkbox
16 |
17 |
18 | {'\n\tcheckbox\n'}
19 |
20 |
21 |
22 | -
23 |
Checked checkbox
24 | checked
25 |
26 |
27 | {'checked'}
28 |
29 |
30 |
31 | -
32 |
Disabled checkbox
33 | disabled
34 |
35 |
36 | {'disabled'}
37 |
38 |
39 |
40 |
41 |
32 |
Checkbox group
33 |
34 | -
35 |
Checkbox group
36 | you selected value is {this.state.displayText}
37 |
40 |
41 |
42 | {'
44 | {' valueName="value" value={value}'}
45 |
46 | {' onChange={displayChange} />'}
47 |
48 |
49 |
50 | -
51 |
Checkbox group yield childrens
52 | you selected value is {this.state.displayText1}
53 |
54 | apple
55 | banana
56 | cat
57 |
58 |
59 |
60 | {''}
61 |
62 | {' apple'}
63 |
64 | {' banana'}
65 |
66 | {' cat'}
67 |
68 | {''}
69 |
70 |
71 |
72 |
73 |
21 |
datetime picker
22 |
23 | -
24 |
Default datetime picker
25 | console.log(val)} />
26 |
27 |
28 | {``}
29 |
30 |
31 |
32 | -
33 |
Given value
34 | console.log(val) }/>
35 |
36 |
37 | {` `}
38 |
39 |
40 |
41 | -
42 |
onChange function
43 | selected value is {formatDate(this.state.value, 'yyyy-MM-dd hh:mm:ss')}
44 |
45 |
46 |
47 | {``}
48 |
49 |
50 |
51 | -
52 |
begin and end
53 | console.log(val) }/>
55 |
56 |
57 | {``}
58 |
59 |
60 |
61 | -
62 |
DateTimePicker with position
63 | top/left/right/bottom, default is bottom
64 | console.log(value) }/>
65 |
66 | console.log(value) }/>
67 |
68 | console.log(value) }/>
69 |
70 |
71 |
72 | {` console.log(value) }/>`}
73 |
74 |
75 |
76 |
77 |
this is the message
15 | FlashMessage.show(props)
16 | }
17 | render() {
18 | return (
19 |
20 |
Message
21 |
22 | -
23 |
Default message
24 |
25 |
26 |
27 | {`
28 | FlashMessage.show({
29 | content: content
,
30 | })
31 | `}
32 |
33 |
34 |
35 | -
36 |
Position
37 |
38 | -
39 |
40 |
41 |
42 | {`
43 | FlashMessage.show({
44 | content: content
,
45 | position: 'top',
46 | })
47 | `}
48 |
49 |
50 |
51 | -
52 |
53 |
54 |
55 | {`
56 | FlashMessage.show({
57 | content: content
,
58 | position: 'center',
59 | })
60 | `}
61 |
62 |
63 |
64 | -
65 |
66 |
67 |
68 | {`
69 | FlashMessage.show({
70 | content: content
,
71 | position: 'bottom',
72 | })
73 | `}
74 |
75 |
76 |
77 |
78 |
79 | -
80 |
Delay time
81 |
82 |
83 |
84 | {`
85 | FlashMessage.show({
86 | content: content
,
87 | delay: 1000,
88 | })
89 | `}
90 |
91 |
92 |
93 | -
94 |
custom close DOM
95 |
96 |
97 |
98 | {`
99 | FlashMessage.show({
100 | content: content
,
101 | close: close
102 | })
103 | `}
104 |
105 |
106 |
107 | -
108 |
onClick event
109 |
110 |
111 |
112 | {`
113 | FlashMessage.show({
114 | content: content
,
115 | onClick: clickFunction,
116 | })
117 | `}
118 |
119 |
120 |
121 |
122 |
21 |
Pagination
22 |
23 | -
24 |
Default pagination
25 |
26 |
27 |
28 | {``}
29 |
30 |
31 |
32 | -
33 |
Change event
34 | this will change next pagination
35 |
36 |
37 |
38 | {``}
39 |
40 |
41 |
42 | -
43 |
Pagination with given current page
44 | now on page {this.state.current}
45 |
46 |
47 |
48 | {``}
49 |
50 |
51 |
52 | -
53 |
Pagination with full range
54 |
55 |
56 |
57 | {``}
58 |
59 |
60 |
61 | -
62 |
Pagination with custom range
63 | 首页} end={末页} total={100}/>
64 |
65 |
66 | {`首页} end={末页} />`}
67 |
68 |
69 |
70 | -
71 |
Pagination with navigation
72 |
73 |
74 |
75 | {``}
76 |
77 |
78 |
79 | -
80 |
Pagination with custom navigation
81 | 上一页} next={下一页}/>
82 |
83 |
84 | {`上一页} next={下一页}/>`}
85 |
86 |
87 |
88 | -
89 |
Pagination with jump page navigation
90 |
91 |
92 |
93 | {``}
94 |
95 |
96 |
97 |
98 |
9 |
Pin
10 |
11 | -
12 |
Default pin
13 |
14 |
15 |
title
16 |
pin at top
17 |
20 |
21 | {`
22 |
23 |
24 |
title
25 |
pin at top
26 |
30 |
31 |
32 | -
33 |
Pin with offset top
34 |
35 |
36 |
title
37 |
pin at position top 100px
38 |
41 |
42 | {`
43 |
44 | ...
45 |
46 | `}
47 |
48 |
49 |
50 | -
51 |
Scroll to given top
52 |
53 |
54 |
title
55 |
pin when scroll to 800px
56 |
59 |
60 | {`
61 |
62 | ...
63 |
64 | `}
65 |
66 |
67 |
68 |
69 |
↓↓ Scroll to bottom ↓↓
70 |
34 |
Progress
35 |
36 | -
37 |
Default progress
38 |
50 | -
51 |
Animated progress
52 |
53 |
54 |
55 | {``}
56 |
57 |
58 |
59 | -
60 |
Completed progress
61 |
68 | -
69 |
Failed progress
70 |
71 |
72 |
73 | {``}
74 |
75 |
76 |
77 | -
78 |
Disabled progress
79 |
86 | -
87 |
Different size progress
88 | Large:
89 |
98 | -
99 |
Yield context
100 |
103 |
104 |
105 | {`
106 |
112 | `}
113 |
114 |
115 |
116 |
117 |
12 |
Radio
13 |
14 | -
15 |
Default radio
16 | radio
17 |
18 |
19 | {`radio`}
20 |
21 |
22 |
23 | -
24 |
Checked radio
25 | checked
26 |
27 |
28 | {`checked`}
29 |
30 |
31 |
32 | -
33 |
Disabled radio
34 | disabled
35 |
36 |
37 | {`disabled`}
38 |
39 |
40 |
41 |
42 |
30 |
Radio group
31 |
83 |
22 |
Time input
23 |
62 |
19 |
Time picker
20 |
58 |
Some basic component
;
7 | return (
8 |
9 |
Tooltip
10 |
11 | -
12 |
Default tooltip
13 | Some component,build with ReactJs}>
14 |
15 |
16 |
17 |
18 | {`
19 | Some component,build with ReactJs}>
20 |
21 |
22 | `}
23 |
24 |
25 |
26 | -
27 |
Tooltip with different position
28 |
29 | -
30 | huge text} position='left'>
31 |
32 |
hover to show tooltip at left
33 |
this is the content
34 |
37 |
38 | {`
39 | huge text} position='left'>
40 | ...
41 |
42 | `}
43 |
44 |
45 |
46 | -
47 |
48 |
49 |
50 |
51 |
52 | {`
53 | huge text} position='right'>
54 | ...
55 |
56 | `}
57 |
58 |
59 |
60 | -
61 |
62 |
63 |
64 |
65 |
66 | {`
67 | huge text} position='top'>
68 | ...
69 |
70 | `}
71 |
72 |
73 |
74 | -
75 |
76 |
77 |
78 |
79 |
80 | {`
81 | huge text} position='bottom'>
82 | ...
83 |
84 | `}
85 |
86 |
87 |
88 |
89 |
90 | -
91 |
Click mode
92 |
93 |
94 |
95 |
96 |
97 | {`
98 | huge text} mode="click">
99 | ...
100 |
101 | `}
102 |
103 |
104 |
105 |
106 |