amis 1.5.8-beta.2 → 1.6.0

package/src/components/calendar/Calendar.tsx

@@ -7,7 +7,23 @@ import CustomCalendarContainer from './CalendarContainer';
 import cx from 'classnames';
 import moment from 'moment';
 import {themeable, ThemeOutterProps, ThemeProps} from '../../theme';
-import {convertDateArrayToDate} from '../../utils/helper';
+import {convertArrayValueToMoment, getRange} from "../../utils/helper";
+import {PickerOption} from '../PickerColumn';
+
+export type DateType = 'year' | 'month' | 'date' | 'hours' | 'minutes' | 'seconds';
+export interface BoundaryObject {
+  max: number;
+  min: number;
+}
+
+export interface DateBoundary {
+  year: BoundaryObject;
+  month: BoundaryObject;
+  date: BoundaryObject;
+  hours: BoundaryObject;
+  minutes: BoundaryObject;
+  seconds: BoundaryObject;
+}
 
 interface BaseDatePickerProps
   extends Omit<ReactDatePicker.DatetimepickerProps, 'viewMode'> {
@@ -41,6 +57,7 @@ interface BaseDatePickerProps
   hideHeader?: boolean;
   updateOn?: string;
   useMobileUI?: boolean;
+  embed?: boolean;
   showToolbar?: boolean;
 }
 
@@ -50,6 +67,16 @@ class BaseDatePicker extends ReactDatePicker {
   setState: (state: any) => void;
   getStateFromProps: any;
 
+  timeCellLength = {
+    year: 4,
+    month: 2,
+    date: 2,
+    hours: 2,
+    minutes: 2,
+    seconds: 2,
+    milliseconds: 3
+  };
+
   constructor(props: any) {
     super(props);
     const state = this.getStateFromProps(this.props);
@@ -104,7 +131,9 @@ class BaseDatePicker extends ReactDatePicker {
         'hideHeader',
         'updateOn',
         'useMobileUI',
-        'showToolbar'
+        'showToolbar',
+        'embed',
+        'onScheduleClick'
       ].forEach(key => (props[key] = (this.props as any)[key]));
 
       return props;
@@ -202,14 +231,58 @@ class BaseDatePicker extends ReactDatePicker {
     that.props.onChange(date);
   };
 
-  onConfirm = (value: number[], types: string[]) => {
-    const currentDate = (
-      this.state.selectedDate ||
-      this.state.viewDate ||
-      moment()
-    ).clone();
+  getDateBoundary = (currentDate: moment.Moment) => {
+    const {years, months} = currentDate.toObject();
+    const maxDateObject = this.props.maxDate?.toObject();
+    const minDateObject = this.props.minDate?.toObject();
 
-    const date = convertDateArrayToDate(value, types, currentDate);
+    const yearBoundary = {
+      max: maxDateObject ? maxDateObject.years : years + 100,
+      min: minDateObject ? minDateObject.years : years - 100,
+    };
+    const monthBoundary = {
+      max: years === maxDateObject?.years ? maxDateObject.months : 11,
+      min: years === minDateObject?.years ? minDateObject.months : 0
+    };
+    const dateBoundary  = {
+      max: years === maxDateObject?.years && months === maxDateObject?.months ? maxDateObject.date : currentDate.daysInMonth(),
+      min: years === minDateObject?.years && months === minDateObject?.months ? minDateObject.date : 1
+    }
+    return {
+      year: yearBoundary,
+      month: monthBoundary,
+      date: dateBoundary,
+      hours: {max: 23, min: 0},
+      minutes: {max: 59, min: 0},
+      seconds: {max: 59, min: 0}
+    };
+  };
+
+  timeCell = (value: number, type: DateType) => {
+		let str = value + '';
+		while (str.length < this.timeCellLength[type])
+			str = '0' + str;
+		return str;
+	};
+
+  getColumns = (types: DateType[], dateBoundary: DateBoundary) => {
+    const columns: { options: PickerOption[] }[] = [];
+    types.map((type: DateType) => {
+      const options = getRange(dateBoundary[type].min, dateBoundary[type].max, 1).map(item => {
+
+        return {
+          text: type === 'month' ? this.timeCell(item+1, type) : this.timeCell(item, type),
+          value: item
+        };
+      });
+      columns.push({options})
+    });
+    return columns;
+  };
+
+  onConfirm = (value: number[], types: string[]) => {
+    const currentDate = (this.state.selectedDate || this.state.viewDate || moment()).clone();
+    const date = convertArrayValueToMoment(value, types, currentDate);
 
     if (!this.props.value) {
       this.setState({
@@ -221,6 +294,7 @@ class BaseDatePicker extends ReactDatePicker {
     this.props.onClose && this.props.onClose();
   };
 
+  
   render() {
     const Component = CustomCalendarContainer as any;
     const viewProps = this.getComponentProps();
@@ -239,6 +313,9 @@ class BaseDatePicker extends ReactDatePicker {
     }
 
     viewProps.onConfirm = this.onConfirm;
+    viewProps.getDateBoundary = this.getDateBoundary;
+    viewProps.getColumns = this.getColumns;
+    viewProps.timeCell = this.timeCell;
 
     return (
       <div className={cx('rdt rdtStatic rdtOpen', this.props.className)}>

package/src/components/calendar/DaysView.tsx

@@ -3,9 +3,13 @@ import moment from 'moment';
 import DaysView from 'react-datetime/src/DaysView';
 import React from 'react';
 import Downshift from 'downshift';
+import find from 'lodash/find';
 import {LocaleProps, localeable} from '../../locale';
 import {ClassNamesFn} from '../../theme';
-import find from 'lodash/find';
+import {isMobile, convertArrayValueToMoment} from "../../utils/helper";
+import Picker from '../Picker';
+import {PickerOption} from '../PickerColumn';
+import {DateType} from './Calendar';
 
 interface CustomDaysViewProps extends LocaleProps {
   classPrefix?: string;
@@ -14,12 +18,16 @@ interface CustomDaysViewProps extends LocaleProps {
   viewDate: moment.Moment;
   selectedDate: moment.Moment;
   minDate: moment.Moment;
+  maxDate: moment.Moment;
+  useMobileUI: boolean;
+  embed: boolean;
   timeFormat: string;
   requiredConfirm?: boolean;
   isEndDate?: boolean;
   renderDay?: Function;
   onClose?: () => void;
   onChange: (value: moment.Moment) => void;
+  onConfirm?: (value: number[], types: DateType[]) => void;
   setDateTimeState: (state: any) => void;
   setTime: (type: string, amount: number) => void;
   subtractTime: (
@@ -49,13 +57,44 @@ interface CustomDaysViewProps extends LocaleProps {
   largeMode?: boolean;
   onScheduleClick?: (scheduleData: any) => void;
   hideHeader?: boolean;
+  getColumns: (types: DateType[], dateBoundary: void) => any;
+  getDateBoundary: (currentDate: moment.Moment) => any;
 }
 
 export class CustomDaysView extends DaysView {
   props: CustomDaysViewProps;
+  state: { columns: { options: PickerOption[] }[]; types: DateType[]; pickerValue: number[]};
+  setState: (arg0: any) => () => any;
   getDaysOfWeek: (locale: any) => any;
   renderDays: () => JSX.Element;
 
+  constructor(props: any) {
+    super(props);
+
+    const {selectedDate, viewDate, timeFormat} =  props;
+    const currentDate = (selectedDate || viewDate || moment());
+
+    const types: DateType[] = ['year', 'month', 'date'];
+    timeFormat.split(':').forEach((format: string) => {
+      const type: DateType | '' = /h/i.test(format)
+        ? 'hours'
+        : /m/.test(format)
+        ? 'minutes'
+        : /s/.test(format)
+        ? 'seconds'
+        : '';
+      type && types.push(type)
+    });
+
+    const dateBoundary = this.props.getDateBoundary(currentDate);
+    const columns = this.props.getColumns(types, dateBoundary);
+    this.state = {
+      columns,
+      types,
+      pickerValue: currentDate.toArray()
+    }
+  }
+
   updateSelectedDate = (event: React.MouseEvent<any>) => {
     // need confirm
     if (this.props.requiredConfirm) {
@@ -405,11 +444,56 @@ export class CustomDaysView extends DaysView {
     );
   };
 
+  onPickerConfirm = (value: number[]) => {
+    this.props.onConfirm && this.props.onConfirm(value, this.state.types);
+  }
+
+  onPickerChange = (value: number[], index: number) => {
+    const {selectedDate, viewDate} = this.props;
+
+    // 变更年份、月份的时候，需要更新columns
+    if (index === 1 || index === 0) {
+      const currentDate = (selectedDate || viewDate || moment()).clone();
+  
+      // 只需计算year 、month
+      const selectDate = convertArrayValueToMoment(value, ['year', 'month'], currentDate);
+      const dateBoundary = this.props.getDateBoundary(selectDate);
+      this.setState({
+        columns: this.props.getColumns(this.state.types, dateBoundary),
+        pickerValue: value
+      });
+    }
+  }
+
+  renderPicker = () => {
+    const {translate: __} =  this.props;
+    const title = this.state.types.length > 3 ? __('Date.titleTime') : __('Date.titleDate');
+    return (
+      <Picker
+        translate={this.props.translate}
+        locale={this.props.locale}
+        title={title}
+        columns={this.state.columns}
+        value={this.state.pickerValue}
+        onChange={this.onPickerChange}
+        onConfirm={this.onPickerConfirm}
+        onClose={this.cancel}
+        />
+    );
+  };
+
   render() {
+    const {viewDate: date, useMobileUI, embed} = this.props;
     const footer = this.renderFooter();
-    const date = this.props.viewDate;
     const locale = date.localeData();
     const __ = this.props.translate;
+    if (isMobile() && useMobileUI && !embed) {
+      return (
+        <div className="rdtYears">
+          {this.renderPicker()}
+        </div>
+      );
+    }
 
     const tableChildren = [
       this.props.hideHeader ? null : <thead key="th">

package/src/components/calendar/MonthsView.tsx

@@ -4,7 +4,9 @@ import moment from 'moment';
 import React from 'react';
 import {LocaleProps, localeable, TranslateFn} from '../../locale';
 import Picker from '../Picker';
-import {convertDateToObject, getRange, isMobile} from '../../utils/helper';
+import {PickerOption} from '../PickerColumn';
+import {getRange, isMobile} from '../../utils/helper';
+import {DateType} from './Calendar';
 
 export interface OtherProps {
   inputFormat?: string;
@@ -31,52 +33,31 @@ export class CustomMonthsView extends MonthsView {
     onChange?: () => void;
     onClose?: () => void;
     onConfirm?: (value: number[], types: string[]) => void;
+    getColumns: (types: DateType[], dateBoundary: void) => any;
+    timeCell: (value: number, type: DateType) => string;
+    getDateBoundary: (currentDate: moment.Moment) => any;
     useMobileUI: boolean;
   } & LocaleProps &
     OtherProps;
   maxDateObject: {year: number; month: number; day?: number};
   minDateObject: {year: number; month: number; day?: number};
-  state: {columns: {options: number[]}[]};
+  state: { columns: { options: PickerOption[] }[]; pickerValue: number[]};
   setState: (arg0: any) => () => any;
   renderMonths: () => JSX.Element;
 
+
   constructor(props: any) {
     super(props);
 
-    const {minDate, maxDate, selectedDate, viewDate} = props;
-    const currentDate = selectedDate || viewDate || moment();
-    const year = currentDate.year();
-    this.maxDateObject = maxDate
-      ? convertDateToObject(maxDate)
-      : {
-          year: year + 100,
-          month: 12
-        };
-    this.minDateObject = minDate
-      ? convertDateToObject(minDate)
-      : {
-          year: year - 100,
-          month: 1
-        };
-
-    const columns = ['year', 'month'].map((type: 'year' | 'month') => {
-      if (type === 'month') {
-        const minMonth =
-          year === this.minDateObject.year ? this.minDateObject.month : 1;
-        const maxMonth =
-          year === this.maxDateObject.year ? this.maxDateObject.month : 12;
-        return {
-          options: getRange(minMonth, maxMonth, 1)
-        };
-      }
-      return {
-        options: getRange(this.minDateObject[type], this.maxDateObject[type], 1)
-      };
-    });
+    const {selectedDate, viewDate} =  props;
+    const currentDate = (selectedDate || viewDate || moment());
 
+    const dateBoundary = this.props.getDateBoundary(currentDate);
+    const columns = this.props.getColumns(['year', 'month'], dateBoundary);
     this.state = {
-      columns
-    };
+      columns,
+      pickerValue: currentDate.toArray()
+    }
   }
 
   renderMonth = (props: any, month: number) => {
@@ -96,55 +77,66 @@ export class CustomMonthsView extends MonthsView {
   };
 
   onConfirm = (value: number[]) => {
-    // 将月份的值减1 ，月份是0-11
-    value[1] && --value[1];
     this.props.onConfirm && this.props.onConfirm(value, ['year', 'month']);
   };
 
   onPickerChange = (value: number[], index: number) => {
+    const {maxDate, minDate} =  this.props;
+    const year = moment().year();
     const columns = [...this.state.columns];
+    const maxDateObject = maxDate
+      ? maxDate.toObject()
+      : {
+          years: year + 100,
+          months: 11
+        };
+    const minDateObject = minDate
+      ? minDate.toObject()
+      : {
+          years: year - 100,
+          months: 0
+        };
+    let range = [];
     // 选择年份是最大值的年或者最小值的月时，需要重新计算月分选择的cloumn
     if (index === 0) {
       if (
-        value[0] === this.minDateObject.year &&
-        value[0] === this.maxDateObject.year
+        value[0] === minDateObject.years &&
+        value[0] === maxDateObject.years
       ) {
-        columns[1] = {
-          options: getRange(
-            this.minDateObject.month,
-            this.maxDateObject.month,
-            1
-          )
-        };
-      } else if (value[0] === this.minDateObject.year) {
-        columns[1] = {
-          options: getRange(this.minDateObject.month, 12, 1)
-        };
-      } else if (value[0] === this.maxDateObject.year) {
-        columns[1] = {
-          options: getRange(1, this.maxDateObject.month, 1)
-        };
-      } else {
-        columns[1] = {
-          options: getRange(1, 12, 1)
-        };
+        range = getRange(minDateObject.months, maxDateObject.months, 1);
       }
-      this.setState({columns});
+      else if (value[0] === minDateObject.years) {
+        range = getRange(minDateObject.months, 11, 1);
+      }
+      else if (value[0] === maxDateObject.years) {
+        range = getRange(0, maxDateObject.months, 1);
+      }
+      else {
+        range = getRange(0, 11, 1);
+      }
+      columns[1] = {
+        options: range.map(i => {
+          return {
+            text: this.props.timeCell(i+1, 'month'),
+            value: i
+          };
+        })
+      };
+      this.setState({columns, pickerValue: value});
     }
   };
 
   renderPicker = () => {
-    const {selectedDate, viewDate} = this.props;
-    const currentDate = selectedDate || viewDate || moment();
-    const year = currentDate.year();
-    const month = parseInt(currentDate.format('MM'), 10);
+    const {translate: __} =  this.props;
+    const title = __('Date.titleMonth');
 
     return (
       <Picker
         translate={this.props.translate}
         locale={this.props.locale}
+        title={title}
         columns={this.state.columns}
-        value={[year, month]}
+        value={this.state.pickerValue}
         onChange={this.onPickerChange}
         onConfirm={this.onConfirm}
         onClose={this.props.onClose}
@@ -156,6 +148,7 @@ export class CustomMonthsView extends MonthsView {
     const __ = this.props.translate;
     const showYearHead = !/^mm$/i.test(this.props.inputFormat || '') && !this.props.hideHeader;
     const canClick = /yy/i.test(this.props.inputFormat || '');
+
     if (isMobile() && this.props.useMobileUI) {
       return <div className="rdtYears">{this.renderPicker()}</div>;
     }

package/src/components/calendar/TimeView.tsx

@@ -9,35 +9,44 @@ import Picker from '../Picker';
 import {PickerColumnItem} from '../PickerColumn';
 import {getRange, isMobile} from '../../utils/helper';
 
+interface State {
+  daypart: any;
+  counters: Array<string>;
+  [propName: string]: any;
+}
+
+interface CustomTimeViewProps {
+  viewDate: moment.Moment;
+  selectedDate: moment.Moment;
+  subtractTime: (
+    amount: number,
+    type: string,
+    toSelected?: moment.Moment
+  ) => () => void;
+  addTime: (
+    amount: number,
+    type: string,
+    toSelected?: moment.Moment
+  ) => () => void;
+  showView: (view: string) => () => void;
+  timeFormat: string;
+  classnames: ClassNamesFn;
+  setTime: (type: string, value: any) => void;
+  onClose?: () => void;
+  onConfirm?: (value: number[], types: string[]) => void;
+  useMobileUI: boolean;
+  showToolbar?: boolean;
+  onChange?: (value: any) => void;
+};
+
 export class CustomTimeView extends TimeView {
-  props: {
-    viewDate: moment.Moment;
-    subtractTime: (
-      amount: number,
-      type: string,
-      toSelected?: moment.Moment
-    ) => () => void;
-    addTime: (
-      amount: number,
-      type: string,
-      toSelected?: moment.Moment
-    ) => () => void;
-    showView: (view: string) => () => void;
-    timeFormat: string;
-    classnames: ClassNamesFn;
-    setTime: (type: string, value: any) => void;
-    onClose?: () => void;
-    onConfirm?: (value: number[], types: string[]) => void;
-    useMobileUI: boolean;
-    showToolbar?: boolean;
-    onChange?: (value: any) => void;
-  } & LocaleProps;
+  props: CustomTimeViewProps & LocaleProps;
   onStartClicking: any;
   disableContextMenu: any;
   updateMilli: any;
   renderHeader: any;
   pad: any;
-  state: {daypart: any; counters: Array<string>; [propName: string]: any};
+  state: State;
   timeConstraints: any;
   padValues = {
     hours: 2,
@@ -45,11 +54,22 @@ export class CustomTimeView extends TimeView {
     seconds: 2,
     milliseconds: 3
   };
+  setState: (arg0: any) => () => any;
+  calculateState: (props: CustomTimeViewProps) => () => any;
 
   static defaultProps = {
     showToolbar: true
   };
 
+  
+  componentWillReceiveProps(nextProps: CustomTimeViewProps) {
+    if (nextProps.viewDate !== this.props.viewDate
+      || nextProps.selectedDate !== this.props.selectedDate
+      || nextProps.timeFormat !== this.props.timeFormat) {
+      this.setState(this.calculateState(nextProps));
+      }
+  }
+  
   renderDayPart = () => {
     const {translate: __, classnames: cx} = this.props;
     return (
@@ -154,8 +174,22 @@ export class CustomTimeView extends TimeView {
     return null;
   };
 
-  onConfirm = (value: number[]) => {
-    this.props.onConfirm && this.props.onConfirm(value, this.state.counters);
+  onConfirm = (value: (number | string)[]) => {
+    // 修正am、pm
+    const hourIndex = this.state.counters.indexOf('hours');
+    if (
+      hourIndex !== -1 &&
+      this.state.daypart !== false &&
+      this.props.timeFormat.toLowerCase().indexOf(' a') !== -1 
+    ) {
+      const amMode: string = value.splice(-1, 1)[0] as string;
+      let hour = (value[hourIndex] as number) % 12;
+      // 修正pm
+      amMode.toLowerCase().indexOf('p') !== -1 && (hour = hour + 12);
+      value[hourIndex] = hour;
+    }
+
+    this.props.onConfirm && this.props.onConfirm(value as number[], this.state.counters);
   };
 
   getDayPartOptions = () => {
@@ -171,13 +205,26 @@ export class CustomTimeView extends TimeView {
     }));
   };
 
+  onPickerChange = (value: (number | string)[], index: number) => {
+    const time: {[prop:string]: any} = {};
+    this.state.counters.forEach((type, i) => time[type] = value[i]);
+    if (this.state.daypart !== false && index > this.state.counters.length -1) {
+      time.daypart = value[value.length -1];
+    }
+    this.setState((prevState: State) => {
+      return {...prevState, ...time}
+    });
+    this.props.onChange && this.props.onChange(value);
+  }
+
   renderTimeViewPicker = () => {
+    const {translate: __} =  this.props;
+    const title = __('Date.titleTime');
     const columns: PickerColumnItem[] = [];
     const values = [];
 
     this.state.counters.forEach(type => {
       if (type !== 'daypart') {
-        const counterValue: number = this.getCounterValue(type);
         let {min, max, step} = this.timeConstraints[type];
         // 修正am pm时hours可选最大值
         if (
@@ -188,9 +235,14 @@ export class CustomTimeView extends TimeView {
           max = max > 12 ? 12 : max;
         }
         columns.push({
-          options: getRange(min, max, step)
+          options: getRange(min, max, step).map(item => {
+            return {
+              text: this.pad(type, item),
+              value: item
+            }
+          })
         });
-        values.push(counterValue);
+        values.push(parseInt(this.state[type], 10));
       }
     });
     if (this.state.daypart !== false) {
@@ -204,12 +256,13 @@ export class CustomTimeView extends TimeView {
       <Picker
         translate={this.props.translate}
         locale={this.props.locale}
+        title={title}
         columns={columns}
         value={values}
         onConfirm={this.onConfirm}
         onClose={this.props.onClose}
         showToolbar={this.props.showToolbar}
-        onChange={this.props.onChange}
+        onChange={this.onPickerChange}
         />
     );
   };

package/src/components/calendar/YearsView.tsx

@@ -4,7 +4,7 @@ import moment from 'moment';
 import React from 'react';
 import {LocaleProps, localeable} from '../../locale';
 import Picker from '../Picker';
-import {convertDateToObject, getRange, isMobile} from '../../utils/helper';
+import {getRange, isMobile} from '../../utils/helper';
 
 export class CustomYearsView extends YearsView {
   props: {
@@ -28,6 +28,8 @@ export class CustomYearsView extends YearsView {
     onConfirm?: (value: number[], types: string[]) => void;
     useMobileUI: boolean;
   } & LocaleProps;
+  state: {pickerValue: number[]};
+  setState: (arg0: any) => () => any;
   renderYears: (year: number) => JSX.Element;
   renderYear = (props: any, year: number) => {
     return (
@@ -37,15 +39,31 @@ export class CustomYearsView extends YearsView {
     );
   };
 
+  constructor(props: any) {
+    super(props);
+
+    const {selectedDate, viewDate} =  props;
+    const currentDate = (selectedDate || viewDate || moment());
+
+    this.state = {
+      pickerValue: currentDate.toObject().years
+    }
+  }
+
   onConfirm = (value: number[]) => {
     this.props.onConfirm && this.props.onConfirm(value, ['year']);
   };
 
+  onPickerChange = (value: number[]) => {
+    this.setState({pickerValue: value[0]});
+  }
+
   renderYearPicker = () => {
-    const {minDate, maxDate, selectedDate, viewDate} = this.props;
+    const {translate: __, minDate, maxDate, selectedDate, viewDate} = this.props;
     const year = (selectedDate || viewDate || moment()).year();
-    const maxYear = maxDate ? convertDateToObject(maxDate)!.year : year + 100;
-    const minYear = minDate ? convertDateToObject(minDate)!.year : year - 100;
+    const maxYear = maxDate ? maxDate.toObject().years : year + 100;
+    const minYear = minDate ? minDate.toObject().years : year - 100;
+    const title = __('Date.titleYear');
 
     const columns = [
       {
@@ -57,9 +75,11 @@ export class CustomYearsView extends YearsView {
       <Picker
         translate={this.props.translate}
         locale={this.props.locale}
+        title={title}
         columns={columns}
-        value={[year]}
+        value={this.state.pickerValue}
         onConfirm={this.onConfirm}
+        onChange={this.onPickerChange}
         onClose={this.props.onClose}
       />
     );
@@ -69,7 +89,6 @@ export class CustomYearsView extends YearsView {
     let year = this.props.viewDate.year();
     year = year - (year % 10);
     const __ = this.props.translate;
-
     if (isMobile() && this.props.useMobileUI) {
       return <div className="rdtYears">{this.renderYearPicker()}</div>;
     }