dragon-ui - npm Package Compare versions

Comparing version 0.0.27 to 0.0.28

components/Alert/index.jsx

@@ -0,0 +0,0 @@

components/Breadcrumb/Breadcrumb.jsx

@@ -0,0 +0,0 @@

components/Breadcrumb/BreadcrumbItem.jsx

@@ -0,0 +0,0 @@

components/Breadcrumb/index.js

@@ -0,0 +0,0 @@

components/Button/index.jsx

@@ -0,0 +0,0 @@

components/Calendar/Calendar.jsx

@@ -1,6 +0,8 @@
-
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
+import Format from '../utils/Format';
 import CalendarHeader from './CalendarHeader';
 import CalendarDateTable from './CalendarDateTable';
+import CalendarMonthTable from './CalendarMonthTable';
+import CalendarYearTable from './CalendarYearTable';
 
@@ -12,4 +14,4 @@ class Calendar extends Component {
     this.state = {
-      current: props.value || props.defaultValue || new Date(),
-      value  : props.value || props.defaultValue,
+      current: Format.date(props.value, 'yyyy/M/d') || Format.date(props.defaultValue, 'yyyy/M/d') || new Date(),
+      value  : Format.date(props.value, 'yyyy/M/d') || Format.date(props.defaultValue, 'yyyy/M/d'),
       panel  : 'date',
@@ -22,3 +24,4 @@ };
       this.setState({
-        value: nextProps.value,
+        value  : Format.date(nextProps.value, 'yyyy/M/d'),
+        current: Format.date(nextProps.value, 'yyyy/M/d'),
       });
@@ -30,4 +33,5 @@ }
     const props = this.props;
-    const { className, onDateClick, ...others } = props;
+    const { className, onChange, ...others } = props;
     const { current, value, panel } = this.state;
+
     const cls = classnames({
@@ -38,15 +42,6 @@ 'ui-calendar': true,
 
-    let body;
-    switch(panel) {
-      case 'year':
-        body = <CalendarDateTable value={value} current={current} onDateClick={(value) => onDateClick && this.onDateClick(value)} />;
-        break;
-
-      default:
-        body = <CalendarDateTable value={value} current={current} onDateClick={(value) => onDateClick && this.onDateClick(value)} />;
-    }
-
     return (
       <div className={cls} {...others}>
         <CalendarHeader
+          panel={panel}
           current={current}
@@ -57,3 +52,5 @@ onChange={(current) => this.setState({current})}
         <div className="ui-calendar-body">
-          {body}
+          <CalendarYearTable visible={panel !== 'year'} value={value} current={current} onYearClick={(value) => this.onYearClick(value)} />
+          <CalendarMonthTable visible={panel !== 'month'} value={value} current={current} onMonthClick={(value) => this.onMonthClick(value)} />
+          <CalendarDateTable visible={panel !== 'date'} value={value} current={current} onDateClick={(value) => this.onDateClick(value)} />
         </div>
@@ -64,8 +61,23 @@ </div>
 
+  onYearClick(value) {
+    this.setState({
+      current: value,
+      panel  : 'date'
+    });
+  }
+
+  onMonthClick(value) {
+    this.setState({
+      current: value,
+      panel  : 'date'
+    });
+  }
+
   onDateClick(value) {
     this.setState({
       value  : value,
-      current: value,
+      current: value
     });
-    this.props.onDateClick(value);
+    const { format, onChange } = this.props;
+    onChange && onChange(Format.date(value, format));
   }
@@ -75,9 +87,11 @@ }
 Calendar.propTypes = {
-  onDateClick: PropTypes.func,
+  format  : PropTypes.string,
+  onChange: PropTypes.func,
 };
 
 Calendar.defaultProps = {
-  onDateClick: function () {},
+  format  : 'yyyy-MM-dd',
+  onChange: function () {},
 };
 
 export default Calendar;

components/Calendar/CalendarDateTable.jsx

 
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
+import Format from '../utils/Format';
 
 const CALENDAR_ROW_COUNT = 6,
       CALENDAR_COL_COUNT = 7,
-      CALENDAR_SHORT_WEEK_DAYS = ['一', '二', '三', '四', '五', '六', '日'];
+      CALENDAR_WEEK_DAYS = ['一', '二', '三', '四', '五', '六', '日'];
 
@@ -15,3 +16,2 @@ class CalendarDateTable extends Component {
       current: props.value || new Date(),
-      value  : props.value
     };
@@ -29,7 +29,14 @@ }
   render() {
+    const { visible } = this.props;
+    const style = {
+      display: visible ? 'none' : 'block'
+    }
+
     return (
-      <table>
-        {this.renderWeek()}
-        {this.renderDate()}
-      </table>
+      <div style={style}>
+        <table className="ui-calendar-table">
+          {this.renderWeek()}
+          {this.renderDate()}
+        </table>
+      </div>
     );
@@ -43,3 +50,3 @@ }
     for (let i = 0; i < CALENDAR_COL_COUNT; i++) {
-      weekDays[i] = CALENDAR_SHORT_WEEK_DAYS[i];
+      weekDays[i] = CALENDAR_WEEK_DAYS[i];
     }
@@ -52,3 +59,3 @@
             weekDays.map((week, index) => {
-              return <th key={`weekdays-${index}`} className="ui-calendar-week" title={`星期${week}`}>{week}</th>;
+              return <th key={`weekdays-${index}`} className="ui-calendar-column" title={`星期${week}`}>{week}</th>;
             })
@@ -83,3 +90,3 @@ }
         date : i
-      }, 'othermonth'));
+      }, 'others'));
     }
@@ -102,3 +109,3 @@
         date : k
-      }, 'othermonth'));
+      }, 'others'));
     }
@@ -129,11 +136,14 @@
   renderDateCell(day, type) {
-    const { value, onDateClick } = this.props;
-    const fullDay = `${day.year}-${day.month}-${day.date}`;
+    const { value, onDateClick} = this.props,
+          fullDay = `${day.year}/${day.month}/${day.date}`,
+          displayDay = `${day.year}-${day.month}-${day.date}`;
+
     const cls = classnames({
-      'ui-calendar-date'           : true,
-      'ui-calendar-date-othermonth': type === 'othermonth',
-      'ui-calendar-date-selected'  : value === fullDay,
-      'ui-calendar-date-today'     : new Date().toLocaleDateString() === new Date(fullDay).toLocaleDateString(),
+      'ui-calendar-text'           : true,
+      'ui-calendar-text-others'    : type === 'others',
+      'ui-calendar-text-selected'  : value === fullDay,
+      'ui-calendar-text-today'     : new Date().toLocaleDateString() === new Date(fullDay).toLocaleDateString(),
     });
-    return <span className={cls} title={fullDay} onClick={() => onDateClick(fullDay)}>{day.date}</span>;
+    
+    return <span className={cls} title={displayDay} onClick={() => onDateClick(fullDay)}>{day.date}</span>;
   }
@@ -143,3 +153,3 @@
   getFirstDayOfWeek(current) {
-    let date = new Date(`${current.year}-${current.month}-1`);
+    let date = new Date(`${current.year}/${current.month}/1`);
     return date.getDay();
@@ -176,5 +186,5 @@ }
   getDays(current) {
-    const number = new Date(current.year, current.month, 0).getDate();
-    return number;
+    return new Date(current.year, current.month, 0).getDate();
   }
+
 }
@@ -181,0 +191,0 @@

components/Calendar/CalendarHeader.jsx

@@ -24,45 +24,38 @@
   render() { 
-    const { current } = this.props;
-    const { panel } = this.state;
-    const dd = new Date(current),
-          currentMonth = {
+    const dd = new Date(this.props.current),
+          current = {
             year : dd.getFullYear(),
-            month: dd.getMonth() + 1
-          };
+            month: dd.getMonth() + 1,
+            date : dd.getDate(),
+          },
+          beforeYear = parseInt(current.year / 10) * 10;
 
-    switch (panel) {
-      case 'year':
-        return this.renderYearSelect(currentMonth);
+    return (
+      <div className="ui-calendar-header">
 
-      case 'month':
-        return this.renderDateSelect(currentMonth);
+        <div style={{display: (this.state.panel !== 'date') ? 'none' : 'block'}}>
+          <a href="javascript:;" onClick={() => this.onMonthClick(current, 'pre')} className="ui-calendar-header-pre-btn" title="上个月"><Icon type="back" /></a>
+          <span>
+            <a href="javascript:;" className="ui-calendar-header-btn" onClick={() => this.onChangePanel('year')}>{current.year}年</a>
+            <a href="javascript:;" className="ui-calendar-header-btn" onClick={() => this.onChangePanel('month')}>{current.month}月</a>
+          </span>
+          <a href="javascript:;" onClick={() => this.onMonthClick(current, 'next')} className="ui-calendar-header-next-btn" title="下个月"><Icon type="right" /></a>
+        </div>
 
-      default:
-        return this.renderDateSelect(currentMonth);
-    }
-  }
+        <div style={{display: (this.state.panel !== 'month') ? 'none' : 'block'}}>
+          <a href="javascript:;" onClick={() => this.onYearClick(current, 'pre')} className="ui-calendar-header-pre-btn" title="去年"><Icon type="back" /></a>
+          <span>
+            <a href="javascript:;" className="ui-calendar-header-year-btn" onClick={() => this.onChangePanel('date')}>{current.year}年</a>
+          </span>
+          <a href="javascript:;" onClick={() => this.onYearClick(current, 'next')} className="ui-calendar-header-next-btn" title="明年"><Icon type="right" /></a>
+        </div>
 
-  renderDateSelect(current) {
-    return (
-      <div className="ui-calendar-header">
-        <a href="javascript:;" onClick={() => this.onMonthClick(current, 'pre')} className="ui-calendar-header-pre-btn" title="上个月"><Icon type="back" /></a>
-        <span>
-          <a href="javascript:;" className="ui-calendar-header-btn" onClick={() => this.onChangePanel('year')}>{current.year}年</a>
-          <a href="javascript:;" className="ui-calendar-header-btn">{current.month}月</a>
-        </span>
-        <a href="javascript:;" onClick={() => this.onMonthClick(current, 'next')} className="ui-calendar-header-next-btn" title="下个月"><Icon type="right" /></a>
-      </div>
-    )
-  }
+        <div style={{display: (this.state.panel !== 'year') ? 'none' : 'block'}}>
+          <a href="javascript:;" onClick={() => this.onCenturyClick(current, 'pre')} className="ui-calendar-header-pre-btn" title="上个年代"><Icon type="back" /></a>
+          <span>
+            <a href="javascript:;" className="ui-calendar-header-year-btn" onClick={() => this.onChangePanel('date')}>{beforeYear} - {beforeYear + 9} 年</a>
+          </span>
+          <a href="javascript:;" onClick={() => this.onCenturyClick(current, 'next')} className="ui-calendar-header-next-btn" title="下个年代"><Icon type="right" /></a>
+        </div>
 
-  renderYearSelect(current) {
-    const beforeYear = parseInt(current.year / 10) * 10;
-
-    return (
-      <div className="ui-calendar-header">
-        <a href="javascript:;" onClick={() => this.onYearClick(current, 'pre')} className="ui-calendar-header-pre-btn" title="上个年代"><Icon type="back" /></a>
-        <span>
-          <a href="javascript:;" className="ui-calendar-header-year-btn">{beforeYear} - {beforeYear + 9}</a>
-        </span>
-        <a href="javascript:;" onClick={() => this.onYearClick(current, 'next')} className="ui-calendar-header-next-btn" title="下个年代"><Icon type="right" /></a>
       </div>
@@ -74,8 +67,7 @@ )
   onChangePanel(panel) {
-    return; //没做好，先隐藏此功能
     this.setState({panel}, this.props.onChangePanel(panel));
   }
 
-  // 切换年代
-  onYearClick(current, type) {
+  // 切换世纪
+  onCenturyClick(current, type) {
     let newYear = current;
@@ -87,3 +79,3 @@ if (type === 'pre') {
     }
-    const currentString = `${newYear.year}-${newYear.month}-1`;
+    const currentString = `${newYear.year}/${newYear.month}/${newYear.date}`;
 
@@ -93,2 +85,15 @@ this.props.onChange(currentString);
 
+  // 切换年份
+  onYearClick(current, type) {
+    let newYear = current;
+    if (type === 'pre') {
+      newYear.year = current.year - 1;
+    } else {
+      newYear.year = current.year + 1;
+    }
+    const currentString = `${newYear.year}/${newYear.month}/${newYear.date}`;
+
+    this.props.onChange(currentString);
+  }
+
   // 切换月份
@@ -99,3 +104,3 @@ onMonthClick(current, type) {
                  : this.getNextMonth(current);
-    const currentString = `${newMonth.year}-${newMonth.month}-1`;
+    const currentString = `${newMonth.year}/${newMonth.month}/${newMonth.date}`;
 
@@ -107,9 +112,9 @@ this.props.onChange(currentString);
   getNextMonth(current) {
-    let result = {};
-    if (current.month == 12) {
-      result.year = current.year + 1;
+    let result = current;
+    if (result.month == 12) {
+      result.year = result.year + 1;
       result.month = 1;
     } else {
-      result.year = current.year;
-      result.month = current.month + 1;
+      result.year = result.year;
+      result.month = result.month + 1;
     }
@@ -121,9 +126,9 @@ return result;
   getPreMonth(current) {
-    let result = {};
-    if (current.month == 1) {
-      result.year = current.year - 1;
+    let result = current;
+    if (result.month == 1) {
+      result.year = result.year - 1;
       result.month = 12;
     } else {
-      result.year = current.year;
-      result.month = current.month - 1;
+      result.year = result.year;
+      result.month = result.month - 1;
     }
@@ -130,0 +135,0 @@ return result;

components/Calendar/index.js

 
 import Calendar from './Calendar';
 export default Calendar;

components/Checkbox/Checkbox.jsx

@@ -0,0 +0,0 @@

components/Checkbox/CheckboxGroup.jsx

@@ -0,0 +0,0 @@

components/Checkbox/index.js

@@ -0,0 +0,0 @@

components/Confirm/index.jsx

@@ -0,0 +0,0 @@

components/DatePicker/DatePicker.jsx

@@ -7,2 +7,3 @@
 import isNodeInTree from '../utils/isNodeInTree';
+import Format from '../utils/Format';
 import Dropdown from '../Dropdown';
@@ -16,4 +17,5 @@ import Calendar from '../Calendar';
     super(props);
+    this.unmounted = false;
     this.state = {
-      value   : props.value || props.defaultValue,
+      value   : Format.date(props.value, props.format) || Format.date(props.defaultValue, props.format),
       dropdown: false,
@@ -23,7 +25,8 @@ };
 
-  componentWillMount() {
-    this.unbindOuterHandlers();
+  componentDidMount() {
+    this.unmounted = true;
   }
 
   componentWillUnmount() {
+    this.unmounted = false;
     this.unbindOuterHandlers();
@@ -35,3 +38,3 @@ }
       this.setState({
-        value: nextProps.value
+        value: Format.date(nextProps.value, this.props.format),
       });
@@ -43,3 +46,4 @@ }
     const props = this.props;
-    const { placeholder, isDisabled, size, ...others } = props;
+    const { defaultValue, placeholder, isDisabled, size, format, ...others } = props;
+    const { value, dropdown } = this.state;
     const disabled = 'disabled' in props || isDisabled;
@@ -50,4 +54,4 @@
 
-    if (this.state.value) {
-      valueText = this.state.value;
+    if (value) {
+      valueText = value;
       hasValue = true;
@@ -58,3 +62,3 @@ }
       'ui-select'         : true,
-      'ui-select-open'    : this.state.dropdown,
+      'ui-select-open'    : dropdown,
       'ui-select-disabled': disabled,
@@ -71,3 +75,3 @@ [`size-${size}`]    : !!size,
       <span className={cls} {...others}>
-        <span className="ui-select-selection" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" onClick={(e) => !disabled && this.onSelectClick(e)}>
+        <span className="ui-select-selection" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" onClick={(e) => this.onSelectClick(e)}>
           <span className={textCls}>{valueText}</span>
@@ -78,4 +82,4 @@ <span className="ui-select-icon">
         </span>
-        <Dropdown visible={this.state.dropdown}>
-          <Calendar onDateClick={(value) => this.onDateClick(value)} />
+        <Dropdown visible={dropdown}>
+          <Calendar defaultValue={defaultValue} value={value} format={format} onChange={(value) => this.onDateChange(value)} />
         </Dropdown>
@@ -88,10 +92,11 @@ </span>
     e.preventDefault();
-    this.setDropdown(!this.state.dropdown);
+    const disabled = 'disabled' in this.props || this.props.isDisabled;
+    !disabled && this.setDropdown(!this.state.dropdown);
   }
 
-  onDateClick(value) {
+  onDateChange(value) {
     this.setState({
       value: value,
     }, () => {
-      this.setDropdown(false, this.props.onDateClick(value));
+      this.setDropdown(false, this.props.onChange(value));
     });
@@ -101,2 +106,4 @@ }
   setDropdown(isOpen, callback) {
+    if (!this.unmounted) return;
+    
     if (isOpen) {
@@ -120,3 +127,3 @@ this.bindOuterHandlers();
   handleOuterClick(e) {
-    if (isNodeInTree(e.target, ReactDOM.findDOMNode(this))) {
+    if (!this.unmounted || isNodeInTree(e.target, ReactDOM.findDOMNode(this))) {
       return false;
@@ -139,4 +146,4 @@ }
 DatePicker.propTypes = {
-  defaultChecked: PropTypes.bool,
   isDisabled    : PropTypes.bool,
+  format        : PropTypes.string,
   onChange      : PropTypes.func,
@@ -146,4 +153,4 @@ };
 DatePicker.defaultProps = {
-  defaultChecked: false,
   isDisabled    : false,
+  format        : 'yyyy-MM-dd',
   onChange      : function () {},
@@ -150,0 +157,0 @@ };

components/DatePicker/index.js

 
 import DatePicker from './DatePicker';
 export default DatePicker;

components/Dropdown/Dropdown.jsx

@@ -0,0 +0,0 @@

components/Dropdown/index.jsx

 
 import Dropdown from './Dropdown';
 export default Dropdown;

components/Form/Form.jsx

@@ -0,0 +0,0 @@

components/Form/FormItem.jsx

@@ -0,0 +0,0 @@

components/Form/index.js

@@ -0,0 +0,0 @@

components/higherorder/clickaway.js

@@ -0,0 +0,0 @@ 'use strict';

components/Icon/index.jsx

@@ -0,0 +0,0 @@

components/index.js

@@ -0,0 +0,0 @@

components/Input/index.jsx

@@ -0,0 +0,0 @@

components/Loading/index.jsx

@@ -0,0 +0,0 @@

components/Mask/index.jsx

@@ -0,0 +0,0 @@

components/Menu/index.js

@@ -0,0 +0,0 @@

components/Menu/Menu.jsx

@@ -8,7 +8,8 @@
   render () { 
-    const { className, children, ...others } = this.props;
+    const { size, className, children, ...others } = this.props;
 
     const cls = classnames({
-      'ui-menu'          : true,
-      [className]        : !!className,
+      'ui-menu'       : true,
+      [`size-${size}`]: !!size,
+      [className]     : !!className,
     });
@@ -15,0 +16,0 @@

components/Menu/MenuItem.jsx

@@ -0,0 +0,0 @@

components/Modal/index.js

@@ -0,0 +0,0 @@

components/Modal/index.md

@@ -0,0 +0,0 @@ # Modal

components/Modal/Modal.jsx

@@ -0,0 +0,0 @@

components/Modal/ModalBody.jsx

@@ -0,0 +0,0 @@

components/Modal/ModalFooter.jsx

@@ -0,0 +0,0 @@

components/Modal/ModalHeader.jsx

@@ -0,0 +0,0 @@

components/Pagination/index.jsx

@@ -0,0 +0,0 @@

components/Panel/index.js

@@ -5,6 +5,12 @@
 import PanelBody from './PanelBody';
+import PanelFooter from './PanelFooter';
+import PanelTitle from './PanelTitle';
+import PanelMore from './PanelMore';
 
 Panel.Header = PanelHeader;
 Panel.Body = PanelBody;
+Panel.Footer = PanelFooter;
+Panel.Title = PanelTitle;
+Panel.More = PanelMore;
 
 export default Panel;

components/Panel/Panel.jsx

@@ -0,0 +0,0 @@

components/Panel/PanelBody.jsx

@@ -11,4 +11,4 @@
     const cls = classnames({
-      'ui-panel-body' : true,
-      [className]       : !!className
+      'ui-panel-body': true,
+      [className]    : !!className
     });
@@ -15,0 +15,0 @@

components/Panel/PanelHeader.jsx

@@ -11,4 +11,4 @@
     const cls = classnames({
-      'ui-panel-header' : true,
-      [className]       : !!className
+      'ui-panel-header': true,
+      [className]      : !!className
     });
@@ -15,0 +15,0 @@

components/Radio/index.js

@@ -0,0 +0,0 @@

components/Radio/Radio.jsx

@@ -0,0 +0,0 @@

components/Radio/RadioGroup.jsx

@@ -0,0 +0,0 @@

components/Select/index.js

@@ -0,0 +0,0 @@

components/Select/Option.jsx

@@ -0,0 +0,0 @@

components/Select/Select.jsx

@@ -11,2 +11,3 @@
 import Icon from '../Icon';
+import Mask from '../Mask';
 
@@ -17,2 +18,3 @@ class Select extends Component {
     super(props);
+    this.unmounted = false;
     this.state = {
@@ -24,2 +26,6 @@ value   : props.value || props.defaultValue || this.getCheckedValue(props.children),
 
+  componentDidMount() {
+    this.unmounted = true;
+  }
+
   componentWillReceiveProps(nextProps) {
@@ -33,7 +39,4 @@ if ('value' in nextProps || this.getCheckedValue(nextProps.children)) {
 
-  componentWillMount() {
-    this.unbindOuterHandlers();
-  }
-
   componentWillUnmount() {
+    this.unmounted = false;
     this.unbindOuterHandlers();
@@ -85,3 +88,3 @@ }
         <Dropdown visible={this.state.dropdown}>
-          <Menu>
+          <Menu size={size}>
             {children}
@@ -116,13 +119,15 @@ </Menu>
       value: props.value,
-    }, () => {
-      const selected = {
-        index: index,
-        value: props.value,
-        text : props.children,
-      }
-      this.setDropdown(false, this.props.onChange(selected));
     });
+
+    const selected = {
+      index: index,
+      value: props.value,
+      text : props.children,
+    };
+    this.setDropdown(false, this.props.onChange(selected));
   }
 
   setDropdown(isOpen, callback) {
+    if (!this.unmounted) return;
+
     if (isOpen) {
@@ -146,4 +151,4 @@ this.bindOuterHandlers();
   handleOuterClick(e) {
-    if (isNodeInTree(e.target, ReactDOM.findDOMNode(this))) {
-      return false;
+    if (!this.unmounted || isNodeInTree(e.target, ReactDOM.findDOMNode(this))) {
+      return;
     }
@@ -150,0 +155,0 @@ this.setDropdown(false);

components/Step/index.js

@@ -0,0 +0,0 @@

components/Step/Step.jsx

@@ -0,0 +0,0 @@

components/Step/StepItem.jsx

@@ -0,0 +0,0 @@

components/Swipe/index.jsx

@@ -0,0 +0,0 @@

components/Switch/index.jsx

@@ -0,0 +0,0 @@

components/Table/_TableSorter.jsx

@@ -0,0 +0,0 @@

components/Table/index.js

@@ -0,0 +0,0 @@

components/Table/Table.jsx

@@ -0,0 +0,0 @@

components/Tag/index.jsx

@@ -0,0 +0,0 @@

components/Toast/index.jsx

@@ -0,0 +0,0 @@

components/utils/animationEvents.js

@@ -0,0 +0,0 @@

components/utils/events.js

@@ -31,5 +31,5 @@ "use strict";
     for (let i = typeArray.length - 1; i >= 0; i--) {
-      on(el, typeArray[i], recursiveFunction);
+      this.on(el, typeArray[i], recursiveFunction);
     }
   }
 }

components/utils/isNodeInTree.js

@@ -0,0 +0,0 @@ 'use strict';

components/utils/transitionEvents.js

@@ -0,0 +0,0 @@

examples/components/Document.jsx

@@ -0,0 +0,0 @@

examples/components/Footer.jsx

@@ -0,0 +0,0 @@

examples/components/Header.jsx

@@ -0,0 +0,0 @@

examples/decorators/withContext.js

@@ -0,0 +0,0 @@

examples/devServer.js

@@ -0,0 +0,0 @@ var express = require('express');

examples/index.js

@@ -0,0 +0,0 @@

examples/pages/App.jsx

@@ -0,0 +0,0 @@

examples/pages/ButtonPage.jsx

@@ -0,0 +0,0 @@

examples/pages/ModalPage.jsx

@@ -0,0 +0,0 @@

examples/pages/NotFoundPage.jsx

@@ -0,0 +0,0 @@

examples/pages/Page1.jsx

@@ -75,3 +75,3 @@
 
-      date  : '',
+      date  : '2015-12-1',
     };
@@ -239,3 +239,3 @@ }
                 <Breadcrumb.Item>首页</Breadcrumb.Item>
-                <Breadcrumb.Item href="">模块</Breadcrumb.Item>
+                <Breadcrumb.Item><Link to="/page2">模块</Link></Breadcrumb.Item>
                 <Breadcrumb.Item>应用</Breadcrumb.Item>
@@ -251,6 +251,6 @@ </Breadcrumb>
             <Form.Item
-              label="面包屑" 
+              label="步骤条" 
               labelCol="col-sm-2"
               controlCol="col-sm-10">
-                <Step current={6}>
+                <Step current={3}>
                   <Step.Item>投保单基本信息</Step.Item>
@@ -267,3 +267,3 @@ <Step.Item>投保单位录入</Step.Item>
             <Form.Item
-              label="输入框"
+              label="普通输入框"
               labelCol="col-sm-2"
@@ -276,6 +276,6 @@ controlCol="col-sm-10"
             <Form.Item
-              label="密码"
+              label="错误提示的输入框"
               labelCol="col-sm-2"
               controlCol="col-sm-10"
-              help="请输入密码"
+              help="我是错误信息"
               theme="error">
@@ -286,6 +286,6 @@ <Input type="password" placeholder="请输入..." id="password" />
             <Form.Item
-              label="警告样式的表单"
+              label="警告样式的输入框"
               labelCol="col-sm-2"
               controlCol="col-sm-10"
-              help="我是警告内容"
+              help="我是警告信息"
               theme="warning">
@@ -299,3 +299,3 @@ <Input type="email" placeholder="请输入..." />
               controlCol="col-sm-10"
-              help="请输入密码">
+              help="请输入内容">
               <Input type="textarea" rows="3" placeholder="请输入..." id="remark" />
@@ -406,5 +406,9 @@ </Form.Item>
               controlCol="col-sm-10">
-              <Calendar style={{display: 'inline-block'}} onDateClick={(date) => {
-                console.log(date)
-              }} />（未完待续）
+              <Calendar
+                style={{display: 'inline-block'}}
+                value={this.state.date}
+                onChange={(date) => {
+                  this.setState({date});
+                }}
+              />
             </Form.Item>
@@ -418,9 +422,9 @@
                 style={{width: 120}}
-                defaultValue={this.state.date}
                 value={this.state.date}
                 placeholder="请选择日期"
-                onDateClick={(date) => {
+                format="yyyy/M/d"
+                onChange={(date) => {
                   this.setState({date});
                 }}
-              />（未完待续）
+              />
             </Form.Item>
@@ -499,4 +503,17 @@
               <Panel>
-                <Panel.Header>面板</Panel.Header>
-                <Panel.Body>内容</Panel.Body>
+                <Panel.Header>
+                  <Panel.Title>头部左侧</Panel.Title>
+                  <Panel.More>
+                    头部右侧
+                  </Panel.More>
+                </Panel.Header>
+                <Panel.Body>
+                  内容
+                </Panel.Body>
+                <Panel.Footer>
+                  <Panel.Title>底部左侧</Panel.Title>
+                  <Panel.More>
+                    底部右侧
+                  </Panel.More>
+                </Panel.Footer>
               </Panel>
@@ -518,159 +535,167 @@ </Form.Item>
             <Panel.Header>
-              切换Loading状态：
-              <Switch size="sm" value={this.state.tableLoading} onChange={(value) => {
-                this.setState({
-                  tableLoading: value
-                });
-              }} />
+              <Panel.Title>表格</Panel.Title>
+              <Panel.More>
+                切换Loading状态：
+                <Switch size="sm" value={this.state.tableLoading} onChange={(value) => {
+                  this.setState({
+                    tableLoading: value
+                  });
+                }} />
+              </Panel.More>
             </Panel.Header>
-            <Table
-              striped
-              radius
-              isLoading={this.state.tableLoading}
-              dataSource={this.state.dataSource}
-              columns={[{
-                dataIndex: 'id',
-                width: 50,
-                render: (value, row, index) => {
-                  return index + 1;
-                }
-              },{
-                title: '姓名',
-                dataIndex: 'name',
-                width: 100,
-                render: (value, row, index) => {
-                  return <a href="javascript:;">{value}</a>;
-                },
-                sorter: (a, b) => {
-                  return a.name.localeCompare(b.name);
-                }
-              },{
-                title: '部门',
-                dataIndex: 'dept',
-                width: 140,
-                render: (value, row, index) => {
-                  return (
-                    <Select size="sm" value={value} style={{width: 120}}>
-                      <Select.Option value="直营部">直营部</Select.Option>
-                      <Select.Option value="健康险事业部">健康险事业部</Select.Option>
-                      <Select.Option value="金融信保部">金融信保部</Select.Option>
-                      <Select.Option value="人力资源部">人力资源部</Select.Option>
-                    </Select>
-                  );
-                },
-                sorter: (a, b) => {
-                  return a.dept.localeCompare(b.dept);
-                }
-              },{
-                title: '年龄',
-                dataIndex: 'age',
-                width: 80,
-                render: (value, row, index) => {
-                  return <Input size="sm" style={{width: 40}} defaultValue={value} value={value} maxLength="3" onChange={(e) => {
-                    let dataSource = this.state.dataSource;
-                    dataSource[index].age = e.target.value;
-                    this.setState({dataSource});
-                  }}/>;
-                },
-                sorter: (a, b) => {
-                  return a.age - b.age;
-                }
-              },{
-                title: '住址',
-                dataIndex: 'address'
-              },{
-                title: '状态',
-                dataIndex: 'state',
-                width: 100,
-                render: (value, row, index) => {
-                  return <Switch size="sm" value={value} />;
-                },
-                sorter: (a, b) => {
-                  return a.state - b.state;
-                }
-              },{
-                title: '操作',
-                dataIndex: 'op',
-                width: 120,
-                render: (value, row, index) => {
-                  return (
-                    <div style={{color: '#ccc'}}>
-                      <a href="javascript:;" onClick={() => this._onClickOpen('modal')}>编辑</a>
-                      &nbsp;&nbsp;|&nbsp;&nbsp;
-                      <a href="javascript:;" onClick={() => this._onClickOpen('confirm')}>删除</a>
-                    </div>
-                  );
-                }
-              }]}
-              rowSelection={{
-                onSelect: (selected, row, selectedRows) => {
-                  console.log(selected, row, selectedRows);
+            <Panel.Body style={{padding: 0}}>
+              <Table
+                striped
+                radius
+                isLoading={this.state.tableLoading}
+                dataSource={this.state.dataSource}
+                columns={[{
+                  dataIndex: 'id',
+                  width: 50,
+                  render: (value, row, index) => {
+                    return index + 1;
+                  }
+                },{
+                  title: '姓名',
+                  dataIndex: 'name',
+                  width: 100,
+                  render: (value, row, index) => {
+                    return <a href="javascript:;">{value}</a>;
+                  },
+                  sorter: (a, b) => {
+                    return a.name.localeCompare(b.name);
+                  }
+                },{
+                  title: '部门',
+                  dataIndex: 'dept',
+                  width: 140,
+                  render: (value, row, index) => {
+                    return (
+                      <Select size="sm" value={value} style={{width: 120}}>
+                        <Select.Option value="直营部">直营部</Select.Option>
+                        <Select.Option value="健康险事业部">健康险事业部</Select.Option>
+                        <Select.Option value="金融信保部">金融信保部</Select.Option>
+                        <Select.Option value="人力资源部">人力资源部</Select.Option>
+                      </Select>
+                    );
+                  },
+                  sorter: (a, b) => {
+                    return a.dept.localeCompare(b.dept);
+                  }
+                },{
+                  title: '年龄',
+                  dataIndex: 'age',
+                  width: 80,
+                  render: (value, row, index) => {
+                    return <Input size="sm" style={{width: 40}} defaultValue={value} value={value} maxLength="3" onChange={(e) => {
+                      let dataSource = this.state.dataSource;
+                      dataSource[index].age = e.target.value;
+                      this.setState({dataSource});
+                    }}/>;
+                  },
+                  sorter: (a, b) => {
+                    return a.age - b.age;
+                  }
+                },{
+                  title: '住址',
+                  dataIndex: 'address'
+                },{
+                  title: '状态',
+                  dataIndex: 'state',
+                  width: 100,
+                  render: (value, row, index) => {
+                    return <Switch size="sm" value={value} />;
+                  },
+                  sorter: (a, b) => {
+                    return a.state - b.state;
+                  }
+                },{
+                  title: '操作',
+                  dataIndex: 'op',
+                  width: 120,
+                  render: (value, row, index) => {
+                    return (
+                      <div style={{color: '#ccc'}}>
+                        <a href="javascript:;" onClick={() => this._onClickOpen('modal')}>编辑</a>
+                        &nbsp;&nbsp;|&nbsp;&nbsp;
+                        <a href="javascript:;" onClick={() => this._onClickOpen('confirm')}>删除</a>
+                      </div>
+                    );
+                  }
+                }]}
+                rowSelection={{
+                  onSelect: (selected, row, selectedRows) => {
+                    console.log(selected, row, selectedRows);
 
-                },
-                onSelectAll: (selected, selectedRows) => {
-                  console.log(selected, selectedRows)
-                }
-              }}>
-            </Table>
-          </Panel>
+                  },
+                  onSelectAll: (selected, selectedRows) => {
+                    console.log(selected, selectedRows)
+                  }
+                }}>
+              </Table>
+            </Panel.Body>
+            <Panel.Footer>
+              <Panel.More>
+                <Pagination
+                  bordered
+                  value={this.state.currentPage}
+                  pageSize={this.state.pageSize}
+                  total={324}
+                  style={{marginTop: 10}}
+                  addonBefore={`共有324条记录 第${this.state.currentPage}/${Math.ceil(324/this.state.pageSize)}页`}
+                  addonAfter={
+                    <div>
+                      <Select
+                        size="sm"
+                        defaultValue={10}
+                        onChange={(data) => {
+                          this.setState({
+                            currentPage: 1,
+                            pageSize   : data.value,
+                          });
+                        }}>
+                        <Select.Option value={10}>每页 10 条</Select.Option>
+                        <Select.Option value={20}>每页 20 条</Select.Option>
+                        <Select.Option value={30}>每页 30 条</Select.Option>
+                        <Select.Option value={40}>每页 40 条</Select.Option>
+                      </Select>
+                      <span style={{display: 'inline-block', marginLeft: 15}}>
+                        跳至<span style={{display: 'inline-block', width: 50, marginLeft: 5, marginRight: 5}}>
+                        <Input size="sm" value={this.state.inputPage}
+                          onChange={(e) => {
+                            let value = e.target.value;
 
-          <Pagination
-            bordered
-            value={this.state.currentPage}
-            pageSize={this.state.pageSize}
-            total={324}
-            style={{fontSize: 14}}
-            addonBefore={`共有324条记录 第${this.state.currentPage}/${Math.ceil(324/this.state.pageSize)}页`}
-            addonAfter={
-              <div>
-                <Select
-                  size="sm"
-                  defaultValue={10}
-                  onChange={(data) => {
-                    this.setState({
-                      currentPage: 1,
-                      pageSize   : data.value,
-                    });
-                  }}>
-                  <Select.Option value={10}>每页 10 条</Select.Option>
-                  <Select.Option value={20}>每页 20 条</Select.Option>
-                  <Select.Option value={30}>每页 30 条</Select.Option>
-                  <Select.Option value={40}>每页 40 条</Select.Option>
-                </Select>
-                <span style={{display: 'inline-block', marginLeft: 15}}>
-                  跳至<span style={{display: 'inline-block', width: 50, marginLeft: 5, marginRight: 5}}>
-                  <Input size="sm" value={this.state.inputPage}
-                    onChange={(e) => {
-                      let value = e.target.value;
+                            this.setState({
+                              inputPage: value,
+                            });
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.keyCode === 13) {
+                              let value = parseInt(this.state.inputPage);
+                              if (!value) return;
 
-                      this.setState({
-                        inputPage: value,
-                      });
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.keyCode === 13) {
-                        let value = parseInt(this.state.inputPage);
-                        if (!value) return;
+                              const pageCount = Math.ceil(324/this.state.pageSize);
+                              value = (value < 1) ? 1 : value;
+                              value = (value > pageCount) ? pageCount : value;
 
-                        const pageCount = Math.ceil(324/this.state.pageSize);
-                        value = (value < 1) ? 1 : value;
-                        value = (value > pageCount) ? pageCount : value;
+                              this.setState({
+                                currentPage: value,
+                                inputPage  : value,
+                              });
+                            }
+                          }} />
+                        </span>页
+                      </span>
+                    </div>
+                  }
+                  onPageChange={(value) => {
+                    this.setState({
+                      currentPage : value,
+                      inputPage   : value,
+                    })
+                  }} />
+              </Panel.More>
+            </Panel.Footer>
+          </Panel>
 
-                        this.setState({
-                          currentPage: value,
-                          inputPage  : value,
-                        });
-                      }
-                    }} />
-                  </span>页
-                </span>
-              </div>
-            }
-            onPageChange={(value) => {
-              this.setState({
-                currentPage : value,
-                inputPage   : value,
-              })
-            }} />
-
           <Modal visible={this.state.modal} width="600" onMaskClick={() => this._onClickClose('modal')}>
@@ -677,0 +702,0 @@ <Modal.Header title="标题" onClose={() => this._onClickClose('modal')}></Modal.Header>

examples/pages/Page2.jsx

@@ -0,0 +0,0 @@

lib/Calendar/Calendar.js

@@ -31,2 +31,6 @@ 'use strict';
 
+var _utilsFormat = require('../utils/Format');
+
+var _utilsFormat2 = _interopRequireDefault(_utilsFormat);
+
 var _CalendarHeader = require('./CalendarHeader');
@@ -40,2 +44,10 @@
 
+var _CalendarMonthTable = require('./CalendarMonthTable');
+
+var _CalendarMonthTable2 = _interopRequireDefault(_CalendarMonthTable);
+
+var _CalendarYearTable = require('./CalendarYearTable');
+
+var _CalendarYearTable2 = _interopRequireDefault(_CalendarYearTable);
+
 var Calendar = (function (_Component) {
@@ -49,4 +61,4 @@ _inherits(Calendar, _Component);
     this.state = {
-      current: props.value || props.defaultValue || new Date(),
-      value: props.value || props.defaultValue,
+      current: _utilsFormat2['default'].date(props.value, 'yyyy/M/d') || _utilsFormat2['default'].date(props.defaultValue, 'yyyy/M/d') || new Date(),
+      value: _utilsFormat2['default'].date(props.value, 'yyyy/M/d') || _utilsFormat2['default'].date(props.defaultValue, 'yyyy/M/d'),
       panel: 'date'
@@ -61,3 +73,4 @@ };
         this.setState({
-          value: nextProps.value
+          value: _utilsFormat2['default'].date(nextProps.value, 'yyyy/M/d'),
+          current: _utilsFormat2['default'].date(nextProps.value, 'yyyy/M/d')
         });
@@ -73,5 +86,5 @@ }
       var className = props.className;
-      var onDateClick = props.onDateClick;
+      var onChange = props.onChange;
 
-      var others = _objectWithoutProperties(props, ['className', 'onDateClick']);
+      var others = _objectWithoutProperties(props, ['className', 'onChange']);
 
@@ -87,16 +100,2 @@ var _state = this.state;
 
-      var body = undefined;
-      switch (panel) {
-        case 'year':
-          body = _react2['default'].createElement(_CalendarDateTable2['default'], { value: value, current: current, onDateClick: function (value) {
-              return onDateClick && _this.onDateClick(value);
-            } });
-          break;
-
-        default:
-          body = _react2['default'].createElement(_CalendarDateTable2['default'], { value: value, current: current, onDateClick: function (value) {
-              return onDateClick && _this.onDateClick(value);
-            } });
-      }
-
       return _react2['default'].createElement(
@@ -106,2 +105,3 @@ 'div',
         _react2['default'].createElement(_CalendarHeader2['default'], {
+          panel: panel,
           current: current,
@@ -118,3 +118,11 @@ onChange: function (current) {
           { className: 'ui-calendar-body' },
-          body
+          _react2['default'].createElement(_CalendarYearTable2['default'], { visible: panel !== 'year', value: value, current: current, onYearClick: function (value) {
+              return _this.onYearClick(value);
+            } }),
+          _react2['default'].createElement(_CalendarMonthTable2['default'], { visible: panel !== 'month', value: value, current: current, onMonthClick: function (value) {
+              return _this.onMonthClick(value);
+            } }),
+          _react2['default'].createElement(_CalendarDateTable2['default'], { visible: panel !== 'date', value: value, current: current, onDateClick: function (value) {
+              return _this.onDateClick(value);
+            } })
         )
@@ -124,2 +132,18 @@ );
   }, {
+    key: 'onYearClick',
+    value: function onYearClick(value) {
+      this.setState({
+        current: value,
+        panel: 'date'
+      });
+    }
+  }, {
+    key: 'onMonthClick',
+    value: function onMonthClick(value) {
+      this.setState({
+        current: value,
+        panel: 'date'
+      });
+    }
+  }, {
     key: 'onDateClick',
@@ -131,3 +155,7 @@ value: function onDateClick(value) {
       });
-      this.props.onDateClick(value);
+      var _props = this.props;
+      var format = _props.format;
+      var onChange = _props.onChange;
+
+      onChange && onChange(_utilsFormat2['default'].date(value, format));
     }
@@ -140,7 +168,9 @@ }]);
 Calendar.propTypes = {
-  onDateClick: _react.PropTypes.func
+  format: _react.PropTypes.string,
+  onChange: _react.PropTypes.func
 };
 
 Calendar.defaultProps = {
-  onDateClick: function onDateClick() {}
+  format: 'yyyy-MM-dd',
+  onChange: function onChange() {}
 };
@@ -147,0 +177,0 @@

lib/Calendar/CalendarDateTable.js

@@ -25,5 +25,9 @@ 'use strict';
 
+var _utilsFormat = require('../utils/Format');
+
+var _utilsFormat2 = _interopRequireDefault(_utilsFormat);
+
 var CALENDAR_ROW_COUNT = 6,
     CALENDAR_COL_COUNT = 7,
-    CALENDAR_SHORT_WEEK_DAYS = ['一', '二', '三', '四', '五', '六', '日'];
+    CALENDAR_WEEK_DAYS = ['一', '二', '三', '四', '五', '六', '日'];
 
@@ -38,4 +42,3 @@ var CalendarDateTable = (function (_Component) {
     this.state = {
-      current: props.value || new Date(),
-      value: props.value
+      current: props.value || new Date()
     };
@@ -56,7 +59,17 @@ }
     value: function render() {
+      var visible = this.props.visible;
+
+      var style = {
+        display: visible ? 'none' : 'block'
+      };
+
       return _react2['default'].createElement(
-        'table',
-        null,
-        this.renderWeek(),
-        this.renderDate()
+        'div',
+        { style: style },
+        _react2['default'].createElement(
+          'table',
+          { className: 'ui-calendar-table' },
+          this.renderWeek(),
+          this.renderDate()
+        )
       );
@@ -72,3 +85,3 @@ }
       for (var i = 0; i < CALENDAR_COL_COUNT; i++) {
-        weekDays[i] = CALENDAR_SHORT_WEEK_DAYS[i];
+        weekDays[i] = CALENDAR_WEEK_DAYS[i];
       }
@@ -85,3 +98,3 @@
               'th',
-              { key: 'weekdays-' + index, className: 'ui-calendar-week', title: '星期' + week },
+              { key: 'weekdays-' + index, className: 'ui-calendar-column', title: '星期' + week },
               week
@@ -118,3 +131,3 @@ );
           date: i
-        }, 'othermonth'));
+        }, 'others'));
       }
@@ -137,3 +150,3 @@
           date: k
-        }, 'othermonth'));
+        }, 'others'));
       }
@@ -173,13 +186,15 @@
       var onDateClick = _props.onDateClick;
+      var fullDay = day.year + '/' + day.month + '/' + day.date;
+      var displayDay = day.year + '-' + day.month + '-' + day.date;
 
-      var fullDay = day.year + '-' + day.month + '-' + day.date;
       var cls = (0, _classnames2['default'])({
-        'ui-calendar-date': true,
-        'ui-calendar-date-othermonth': type === 'othermonth',
-        'ui-calendar-date-selected': value === fullDay,
-        'ui-calendar-date-today': new Date().toLocaleDateString() === new Date(fullDay).toLocaleDateString()
+        'ui-calendar-text': true,
+        'ui-calendar-text-others': type === 'others',
+        'ui-calendar-text-selected': value === fullDay,
+        'ui-calendar-text-today': new Date().toLocaleDateString() === new Date(fullDay).toLocaleDateString()
       });
+
       return _react2['default'].createElement(
         'span',
-        { className: cls, title: fullDay, onClick: function () {
+        { className: cls, title: displayDay, onClick: function () {
             return onDateClick(fullDay);
@@ -195,3 +210,3 @@ } },
     value: function getFirstDayOfWeek(current) {
-      var date = new Date(current.year + '-' + current.month + '-1');
+      var date = new Date(current.year + '/' + current.month + '/1');
       return date.getDay();
@@ -234,4 +249,3 @@ }
     value: function getDays(current) {
-      var number = new Date(current.year, current.month, 0).getDate();
-      return number;
+      return new Date(current.year, current.month, 0).getDate();
     }
@@ -238,0 +252,0 @@ }]);

lib/Calendar/CalendarHeader.js

@@ -53,27 +53,12 @@ 'use strict';
     value: function render() {
-      var current = this.props.current;
-      var panel = this.state.panel;
+      var _this = this;
 
-      var dd = new Date(current),
-          currentMonth = {
+      var dd = new Date(this.props.current),
+          current = {
         year: dd.getFullYear(),
-        month: dd.getMonth() + 1
-      };
+        month: dd.getMonth() + 1,
+        date: dd.getDate()
+      },
+          beforeYear = parseInt(current.year / 10) * 10;
 
-      switch (panel) {
-        case 'year':
-          return this.renderYearSelect(currentMonth);
-
-        case 'month':
-          return this.renderDateSelect(currentMonth);
-
-        default:
-          return this.renderDateSelect(currentMonth);
-      }
-    }
-  }, {
-    key: 'renderDateSelect',
-    value: function renderDateSelect(current) {
-      var _this = this;
-
       return _react2['default'].createElement(
@@ -83,69 +68,100 @@ 'div',
         _react2['default'].createElement(
-          'a',
-          { href: 'javascript:;', onClick: function () {
-              return _this.onMonthClick(current, 'pre');
-            }, className: 'ui-calendar-header-pre-btn', title: '上个月' },
-          _react2['default'].createElement(_Icon2['default'], { type: 'back' })
+          'div',
+          { style: { display: this.state.panel !== 'date' ? 'none' : 'block' } },
+          _react2['default'].createElement(
+            'a',
+            { href: 'javascript:;', onClick: function () {
+                return _this.onMonthClick(current, 'pre');
+              }, className: 'ui-calendar-header-pre-btn', title: '上个月' },
+            _react2['default'].createElement(_Icon2['default'], { type: 'back' })
+          ),
+          _react2['default'].createElement(
+            'span',
+            null,
+            _react2['default'].createElement(
+              'a',
+              { href: 'javascript:;', className: 'ui-calendar-header-btn', onClick: function () {
+                  return _this.onChangePanel('year');
+                } },
+              current.year,
+              '年'
+            ),
+            _react2['default'].createElement(
+              'a',
+              { href: 'javascript:;', className: 'ui-calendar-header-btn', onClick: function () {
+                  return _this.onChangePanel('month');
+                } },
+              current.month,
+              '月'
+            )
+          ),
+          _react2['default'].createElement(
+            'a',
+            { href: 'javascript:;', onClick: function () {
+                return _this.onMonthClick(current, 'next');
+              }, className: 'ui-calendar-header-next-btn', title: '下个月' },
+            _react2['default'].createElement(_Icon2['default'], { type: 'right' })
+          )
         ),
         _react2['default'].createElement(
-          'span',
-          null,
+          'div',
+          { style: { display: this.state.panel !== 'month' ? 'none' : 'block' } },
           _react2['default'].createElement(
             'a',
-            { href: 'javascript:;', className: 'ui-calendar-header-btn', onClick: function () {
-                return _this.onChangePanel('year');
-              } },
-            current.year,
-            '年'
+            { href: 'javascript:;', onClick: function () {
+                return _this.onYearClick(current, 'pre');
+              }, className: 'ui-calendar-header-pre-btn', title: '去年' },
+            _react2['default'].createElement(_Icon2['default'], { type: 'back' })
           ),
           _react2['default'].createElement(
+            'span',
+            null,
+            _react2['default'].createElement(
+              'a',
+              { href: 'javascript:;', className: 'ui-calendar-header-year-btn', onClick: function () {
+                  return _this.onChangePanel('date');
+                } },
+              current.year,
+              '年'
+            )
+          ),
+          _react2['default'].createElement(
             'a',
-            { href: 'javascript:;', className: 'ui-calendar-header-btn' },
-            current.month,
-            '月'
+            { href: 'javascript:;', onClick: function () {
+                return _this.onYearClick(current, 'next');
+              }, className: 'ui-calendar-header-next-btn', title: '明年' },
+            _react2['default'].createElement(_Icon2['default'], { type: 'right' })
           )
         ),
         _react2['default'].createElement(
-          'a',
-          { href: 'javascript:;', onClick: function () {
-              return _this.onMonthClick(current, 'next');
-            }, className: 'ui-calendar-header-next-btn', title: '下个月' },
-          _react2['default'].createElement(_Icon2['default'], { type: 'right' })
-        )
-      );
-    }
-  }, {
-    key: 'renderYearSelect',
-    value: function renderYearSelect(current) {
-      var _this2 = this;
-
-      var beforeYear = parseInt(current.year / 10) * 10;
-
-      return _react2['default'].createElement(
-        'div',
-        { className: 'ui-calendar-header' },
-        _react2['default'].createElement(
-          'a',
-          { href: 'javascript:;', onClick: function () {
-              return _this2.onYearClick(current, 'pre');
-            }, className: 'ui-calendar-header-pre-btn', title: '上个年代' },
-          _react2['default'].createElement(_Icon2['default'], { type: 'back' })
-        ),
-        _react2['default'].createElement(
-          'span',
-          null,
+          'div',
+          { style: { display: this.state.panel !== 'year' ? 'none' : 'block' } },
           _react2['default'].createElement(
             'a',
-            { href: 'javascript:;', className: 'ui-calendar-header-year-btn' },
-            beforeYear,
-            ' - ',
-            beforeYear + 9
+            { href: 'javascript:;', onClick: function () {
+                return _this.onCenturyClick(current, 'pre');
+              }, className: 'ui-calendar-header-pre-btn', title: '上个年代' },
+            _react2['default'].createElement(_Icon2['default'], { type: 'back' })
+          ),
+          _react2['default'].createElement(
+            'span',
+            null,
+            _react2['default'].createElement(
+              'a',
+              { href: 'javascript:;', className: 'ui-calendar-header-year-btn', onClick: function () {
+                  return _this.onChangePanel('date');
+                } },
+              beforeYear,
+              ' - ',
+              beforeYear + 9,
+              ' 年'
+            )
+          ),
+          _react2['default'].createElement(
+            'a',
+            { href: 'javascript:;', onClick: function () {
+                return _this.onCenturyClick(current, 'next');
+              }, className: 'ui-calendar-header-next-btn', title: '下个年代' },
+            _react2['default'].createElement(_Icon2['default'], { type: 'right' })
           )
-        ),
-        _react2['default'].createElement(
-          'a',
-          { href: 'javascript:;', onClick: function () {
-              return _this2.onYearClick(current, 'next');
-            }, className: 'ui-calendar-header-next-btn', title: '下个年代' },
-          _react2['default'].createElement(_Icon2['default'], { type: 'right' })
         )
@@ -159,10 +175,9 @@ );
     value: function onChangePanel(panel) {
-      return; //没做好，先隐藏此功能
       this.setState({ panel: panel }, this.props.onChangePanel(panel));
     }
 
-    // 切换年代
+    // 切换世纪
   }, {
-    key: 'onYearClick',
-    value: function onYearClick(current, type) {
+    key: 'onCenturyClick',
+    value: function onCenturyClick(current, type) {
       var newYear = current;
@@ -174,3 +189,3 @@ if (type === 'pre') {
       }
-      var currentString = newYear.year + '-' + newYear.month + '-1';
+      var currentString = newYear.year + '/' + newYear.month + '/' + newYear.date;
 
@@ -180,2 +195,17 @@ this.props.onChange(currentString);
 
+    // 切换年份
+  }, {
+    key: 'onYearClick',
+    value: function onYearClick(current, type) {
+      var newYear = current;
+      if (type === 'pre') {
+        newYear.year = current.year - 1;
+      } else {
+        newYear.year = current.year + 1;
+      }
+      var currentString = newYear.year + '/' + newYear.month + '/' + newYear.date;
+
+      this.props.onChange(currentString);
+    }
+
     // 切换月份
@@ -186,3 +216,3 @@ }, {
       var newMonth = type === 'pre' ? this.getPreMonth(current) : this.getNextMonth(current);
-      var currentString = newMonth.year + '-' + newMonth.month + '-1';
+      var currentString = newMonth.year + '/' + newMonth.month + '/' + newMonth.date;
 
@@ -196,9 +226,9 @@ this.props.onChange(currentString);
     value: function getNextMonth(current) {
-      var result = {};
-      if (current.month == 12) {
-        result.year = current.year + 1;
+      var result = current;
+      if (result.month == 12) {
+        result.year = result.year + 1;
         result.month = 1;
       } else {
-        result.year = current.year;
-        result.month = current.month + 1;
+        result.year = result.year;
+        result.month = result.month + 1;
       }
@@ -212,9 +242,9 @@ return result;
     value: function getPreMonth(current) {
-      var result = {};
-      if (current.month == 1) {
-        result.year = current.year - 1;
+      var result = current;
+      if (result.month == 1) {
+        result.year = result.year - 1;
         result.month = 12;
       } else {
-        result.year = current.year;
-        result.month = current.month - 1;
+        result.year = result.year;
+        result.month = result.month - 1;
       }
@@ -221,0 +251,0 @@ return result;

lib/DatePicker/DatePicker.js

@@ -43,2 +43,6 @@ 'use strict';
 
+var _utilsFormat = require('../utils/Format');
+
+var _utilsFormat2 = _interopRequireDefault(_utilsFormat);
+
 var _Dropdown = require('../Dropdown');
@@ -63,4 +67,5 @@
     _get(Object.getPrototypeOf(DatePicker.prototype), 'constructor', this).call(this, props);
+    this.unmounted = false;
     this.state = {
-      value: props.value || props.defaultValue,
+      value: _utilsFormat2['default'].date(props.value, props.format) || _utilsFormat2['default'].date(props.defaultValue, props.format),
       dropdown: false
@@ -71,5 +76,5 @@ };
   _createClass(DatePicker, [{
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      this.unbindOuterHandlers();
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.unmounted = true;
     }
@@ -79,2 +84,3 @@ }, {
     value: function componentWillUnmount() {
+      this.unmounted = false;
       this.unbindOuterHandlers();
@@ -87,3 +93,3 @@ }
         this.setState({
-          value: nextProps.value
+          value: _utilsFormat2['default'].date(nextProps.value, this.props.format)
         });
@@ -98,8 +104,14 @@ }
       var props = this.props;
+      var defaultValue = props.defaultValue;
       var placeholder = props.placeholder;
       var isDisabled = props.isDisabled;
       var size = props.size;
+      var format = props.format;
 
-      var others = _objectWithoutProperties(props, ['placeholder', 'isDisabled', 'size']);
+      var others = _objectWithoutProperties(props, ['defaultValue', 'placeholder', 'isDisabled', 'size', 'format']);
 
+      var _state = this.state;
+      var value = _state.value;
+      var dropdown = _state.dropdown;
+
       var disabled = 'disabled' in props || isDisabled;
@@ -110,4 +122,4 @@
 
-      if (this.state.value) {
-        valueText = this.state.value;
+      if (value) {
+        valueText = value;
         hasValue = true;
@@ -118,3 +130,3 @@ }
         'ui-select': true,
-        'ui-select-open': this.state.dropdown,
+        'ui-select-open': dropdown,
         'ui-select-disabled': disabled
@@ -134,3 +146,3 @@ }, 'size-' + size, !!size));
           { className: 'ui-select-selection', role: 'combobox', 'aria-autocomplete': 'list', 'aria-haspopup': 'true', 'aria-expanded': 'false', onClick: function (e) {
-              return !disabled && _this.onSelectClick(e);
+              return _this.onSelectClick(e);
             } },
@@ -150,5 +162,5 @@ _react2['default'].createElement(
           _Dropdown2['default'],
-          { visible: this.state.dropdown },
-          _react2['default'].createElement(_Calendar2['default'], { onDateClick: function (value) {
-              return _this.onDateClick(value);
+          { visible: dropdown },
+          _react2['default'].createElement(_Calendar2['default'], { defaultValue: defaultValue, value: value, format: format, onChange: function (value) {
+              return _this.onDateChange(value);
             } })
@@ -162,7 +174,8 @@ )
       e.preventDefault();
-      this.setDropdown(!this.state.dropdown);
+      var disabled = 'disabled' in this.props || this.props.isDisabled;
+      !disabled && this.setDropdown(!this.state.dropdown);
     }
   }, {
-    key: 'onDateClick',
-    value: function onDateClick(value) {
+    key: 'onDateChange',
+    value: function onDateChange(value) {
       var _this2 = this;
@@ -173,3 +186,3 @@
       }, function () {
-        _this2.setDropdown(false, _this2.props.onDateClick(value));
+        _this2.setDropdown(false, _this2.props.onChange(value));
       });
@@ -180,2 +193,4 @@ }
     value: function setDropdown(isOpen, callback) {
+      if (!this.unmounted) return;
+
       if (isOpen) {
@@ -201,3 +216,3 @@ this.bindOuterHandlers();
     value: function handleOuterClick(e) {
-      if ((0, _utilsIsNodeInTree2['default'])(e.target, _reactDom2['default'].findDOMNode(this))) {
+      if (!this.unmounted || (0, _utilsIsNodeInTree2['default'])(e.target, _reactDom2['default'].findDOMNode(this))) {
         return false;
@@ -237,4 +252,4 @@ }
 DatePicker.propTypes = {
-  defaultChecked: _react.PropTypes.bool,
   isDisabled: _react.PropTypes.bool,
+  format: _react.PropTypes.string,
   onChange: _react.PropTypes.func
@@ -244,4 +259,4 @@ };
 DatePicker.defaultProps = {
-  defaultChecked: false,
   isDisabled: false,
+  format: 'yyyy-MM-dd',
   onChange: function onChange() {}
@@ -248,0 +263,0 @@ };

lib/Menu/Menu.js

@@ -43,11 +43,14 @@ 'use strict';
     value: function render() {
+      var _classnames;
+
       var _props = this.props;
+      var size = _props.size;
       var className = _props.className;
       var children = _props.children;
 
-      var others = _objectWithoutProperties(_props, ['className', 'children']);
+      var others = _objectWithoutProperties(_props, ['size', 'className', 'children']);
 
-      var cls = (0, _classnames3['default'])(_defineProperty({
+      var cls = (0, _classnames3['default'])((_classnames = {
         'ui-menu': true
-      }, className, !!className));
+      }, _defineProperty(_classnames, 'size-' + size, !!size), _defineProperty(_classnames, className, !!className), _classnames));
 
@@ -54,0 +57,0 @@ return _react2['default'].createElement(

lib/Panel/index.js

@@ -21,6 +21,21 @@ 'use strict';
 
+var _PanelFooter = require('./PanelFooter');
+
+var _PanelFooter2 = _interopRequireDefault(_PanelFooter);
+
+var _PanelTitle = require('./PanelTitle');
+
+var _PanelTitle2 = _interopRequireDefault(_PanelTitle);
+
+var _PanelMore = require('./PanelMore');
+
+var _PanelMore2 = _interopRequireDefault(_PanelMore);
+
 _Panel2['default'].Header = _PanelHeader2['default'];
 _Panel2['default'].Body = _PanelBody2['default'];
+_Panel2['default'].Footer = _PanelFooter2['default'];
+_Panel2['default'].Title = _PanelTitle2['default'];
+_Panel2['default'].More = _PanelMore2['default'];
 
 exports['default'] = _Panel2['default'];
 module.exports = exports['default'];

lib/Select/Select.js

@@ -59,2 +59,6 @@ 'use strict';
 
+var _Mask = require('../Mask');
+
+var _Mask2 = _interopRequireDefault(_Mask);
+
 var Select = (function (_Component) {
@@ -67,2 +71,3 @@ _inherits(Select, _Component);
     _get(Object.getPrototypeOf(Select.prototype), 'constructor', this).call(this, props);
+    this.unmounted = false;
     this.state = {
@@ -75,2 +80,7 @@ value: props.value || props.defaultValue || this.getCheckedValue(props.children),
   _createClass(Select, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.unmounted = true;
+    }
+  }, {
     key: 'componentWillReceiveProps',
@@ -85,9 +95,5 @@ value: function componentWillReceiveProps(nextProps) {
   }, {
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      this.unbindOuterHandlers();
-    }
-  }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
+      this.unmounted = false;
       this.unbindOuterHandlers();
@@ -160,3 +166,3 @@ }
             _Menu2['default'],
-            null,
+            { size: size },
             children
@@ -187,4 +193,2 @@ )
     value: function onOptionChange(e, props, index) {
-      var _this2 = this;
-
       if ('disabled' in props) {
@@ -196,10 +200,10 @@ return;
         value: props.value
-      }, function () {
-        var selected = {
-          index: index,
-          value: props.value,
-          text: props.children
-        };
-        _this2.setDropdown(false, _this2.props.onChange(selected));
       });
+
+      var selected = {
+        index: index,
+        value: props.value,
+        text: props.children
+      };
+      this.setDropdown(false, this.props.onChange(selected));
     }
@@ -209,2 +213,4 @@ }, {
     value: function setDropdown(isOpen, callback) {
+      if (!this.unmounted) return;
+
       if (isOpen) {
@@ -230,4 +236,4 @@ this.bindOuterHandlers();
     value: function handleOuterClick(e) {
-      if ((0, _utilsIsNodeInTree2['default'])(e.target, _reactDom2['default'].findDOMNode(this))) {
-        return false;
+      if (!this.unmounted || (0, _utilsIsNodeInTree2['default'])(e.target, _reactDom2['default'].findDOMNode(this))) {
+        return;
       }
@@ -239,9 +245,9 @@ this.setDropdown(false);
     value: function bindOuterHandlers() {
-      var _this3 = this;
+      var _this2 = this;
 
       _utilsEvents2['default'].on(document, 'click', function (e) {
-        return _this3.handleOuterClick(e);
+        return _this2.handleOuterClick(e);
       });
       _utilsEvents2['default'].on(document, 'keyup', function (e) {
-        return _this3.handleKeyup(e);
+        return _this2.handleKeyup(e);
       });
@@ -252,9 +258,9 @@ }
     value: function unbindOuterHandlers() {
-      var _this4 = this;
+      var _this3 = this;
 
       _utilsEvents2['default'].off(document, 'click', function (e) {
-        return _this4.handleOuterClick(e);
+        return _this3.handleOuterClick(e);
       });
       _utilsEvents2['default'].off(document, 'keyup', function (e) {
-        return _this4.handleKeyup(e);
+        return _this3.handleKeyup(e);
       });
@@ -261,0 +267,0 @@ }

lib/utils/events.js

@@ -31,5 +31,5 @@ "use strict";
     for (var i = typeArray.length - 1; i >= 0; i--) {
-      on(el, typeArray[i], recursiveFunction);
+      this.on(el, typeArray[i], recursiveFunction);
     }
   }
 };

package.json

 {
   "name": "dragon-ui",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "main": "lib/index.js",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -32,12 +32,13 @@ # dragon-ui
 - Panel 面版
+- Step 步骤条
+- Tooltip 文字提示
+- Calendar 日历
+- DatePicker 日期选择器
 
 ## 待开发组件
 - Message 全局提示
-- DatePicker 日期选择器
 - Tab 内容切换
 - Upload 上传
-- Steps 步骤条
-- Tooltip 文字提示
+- Transfer 穿梭框
 - Progress 进度条
-- Transfer 穿梭框
 - Slider 滑动输入条
@@ -44,0 +45,0 @@ - TimePicker 时间选择器

webpack.config.base.js

@@ -0,0 +0,0 @@ var webpack = require('webpack');

webpack.config.dev.js

@@ -0,0 +0,0 @@

webpack.config.style.js

@@ -0,0 +0,0 @@

webpack.config.umd.js

@@ -0,0 +0,0 @@ var webpack = require('webpack');

No alert changes

Improved metrics

Total package byte prevSize

1823938

10.98%

Number of package files

215

4.37%

Lines of code

15561

8.28%

Number of lines in readme file

50

2.04%

No dependency changes