✨ [feature] Add characteristics of set a time step

mtblc · Apr 10, 2018 · 34ff8c6 · 34ff8c6
1 parent 5d5555c
commit 34ff8c6
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 5 deletions.
diff --git a/examples/basic/index.js b/examples/basic/index.js
@@ -60,6 +60,7 @@ import DatePicker from '../../lib/index';
                     <DatePicker
                         value={this.state.time}
                         min={new Date(2017, 2, 2)}
+                        dateSteps={[1, 1, 5]}
                         theme={this.state.theme}
                         isOpen={this.state.isOpen}
                         onSelect={this.handleSelect}

diff --git a/lib/DatePicker.js b/lib/DatePicker.js
@@ -15,6 +15,7 @@ type Props = {
     customHeader?: React.Element<*>,
     showHeader: boolean,
     dateFormat: Array<*>,
+    dateSteps: Array<*>,
     showFormat: string,
     confirmText: string,
     cancelText: string,
@@ -84,12 +85,12 @@ class DatePicker extends Component<void, Props, State> {
      * @return {Object} JSX对象
      */
     render() {
-        const { min, max, theme, dateFormat, confirmText, cancelText, showFormat, showHeader, customHeader } = this.props;
+        const { min, max, theme, dateFormat, confirmText, cancelText, showFormat, showHeader, customHeader, dateSteps } = this.props;
         const value = this.state.value;
         const themeClassName =
             ['default', 'dark', 'ios', 'android', 'android-dark'].indexOf(theme) === -1 ?
             'default' : theme;
-
+     
         return (
             <div
                 className={`datepicker ${themeClassName}`}>
@@ -99,6 +100,7 @@ class DatePicker extends Component<void, Props, State> {
                     {dateFormat.map((format, index) => (
                         <DatePickerItem
                             key={index}
+                            step={dateSteps[index] || 1}
                             value={value}
                             min={min}
                             max={max}

diff --git a/lib/DatePickerItem.js b/lib/DatePickerItem.js
@@ -45,6 +45,7 @@ type Props = {
     min: Object,
     max: Object,
     format: string,
+    step: number,
     onSelect: Function,
 }
 
@@ -128,7 +129,7 @@ class DatePickerItem extends Component<void, Props, State> {
         const typeName = this.typeName;
         const dates = Array(...Array(DATE_LENGTH))
             .map((value, index) =>
-                TimeUtil[`next${typeName}`](date, index - MIDDLE_INDEX));
+                TimeUtil[`next${typeName}`](date, (index - MIDDLE_INDEX) * this.props.step));
         this.setState({ dates });
     }
 
@@ -140,15 +141,15 @@ class DatePickerItem extends Component<void, Props, State> {
             this.setState({
                 dates: [
                     ...dates.slice(1),
-                    TimeUtil[`next${typeName}`](dates[dates.length - 1], 1),
+                    TimeUtil[`next${typeName}`](dates[dates.length - 1], this.props.step),
                 ],
                 marginTop: (this.currentIndex - MIDDLE_INDEX) * DATE_HEIGHT,
             });
         } else {
             this.currentIndex --;
             this.setState({
                 dates: [
-                    TimeUtil[`next${typeName}`](dates[0], -1),
+                    TimeUtil[`next${typeName}`](dates[0], -this.props.step),
                     ...dates.slice(0, dates.length - 1),
                 ],
                 marginTop: (this.currentIndex - MIDDLE_INDEX) * DATE_HEIGHT,

diff --git a/lib/index.js b/lib/index.js
@@ -49,6 +49,7 @@ ModalDatePicker.defaultProps = {
     max: new Date(2050, 0, 1),
     showHeader: true,
     dateFormat: ['YYYY', 'M', 'D'],
+    dateSteps: [1, 1, 1],
     showFormat: 'YYYY/MM/DD',
     confirmText: '完成',
     cancelText: '取消',

diff --git a/test/functional/DatePickerItem_spec.js b/test/functional/DatePickerItem_spec.js
@@ -14,6 +14,7 @@ const DEFAULT_PROPS = {
     value: new Date(2010, 3, 7),
     min: new Date(2010, 2, 6),
     max: new Date(2010, 4, 8),
+    step: 1,
     onSelect: () => {},
 }
 

diff --git a/test/functional/DatePicker_spec.js b/test/functional/DatePicker_spec.js
@@ -16,6 +16,7 @@ const DEFAULT_PROPS = {
     min: new Date(2015, 10, 1),
     max: new Date(2020, 10, 1),
     dateFormat: ['YYYY', 'M', 'D'],
+    dateSteps: [1, 1, 1],
     isOpen: true,
 }
 
@@ -286,6 +287,7 @@ describe('渲染正确的DatepicketItem子组件', () => {
     beforeEach(() => {
         props = {
             value: new Date(2016, 8, 16),
+            dateSteps: [1, 1, 1]
         };
         mountedDatepicker = undefined;
     });