amis 1.5.6 → 1.6.1-beta.0

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: (
@@ -41,20 +49,52 @@ interface CustomDaysViewProps extends LocaleProps {
   handleClickOutside: () => void;
   classnames: ClassNamesFn;
   schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
+    startTime: Date;
+    endTime: Date;
+    content: any;
+    className?: string;
   }>;
   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) {
@@ -129,7 +169,12 @@ export class CustomDaysView extends DaysView {
     if (this.props.schedules) {
       let schedule: any[] = [];
       this.props.schedules.forEach((item: any) => {
-        if (currentDate.isSameOrAfter(moment(item.startTime).subtract(1, 'days')) && currentDate.isSameOrBefore(item.endTime)) {
+        if (
+          currentDate.isSameOrAfter(
+            moment(item.startTime).subtract(1, 'days')
+          ) &&
+          currentDate.isSameOrBefore(item.endTime)
+        ) {
           schedule.push(item);
         }
       });
@@ -141,8 +186,11 @@ export class CustomDaysView extends DaysView {
           scheduleData: schedule.map((item: any) => {
             return {
               ...item,
-              time: moment(item.startTime).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment(item.endTime).format('YYYY-MM-DD HH:mm:ss'),
-            }
+              time:
+                moment(item.startTime).format('YYYY-MM-DD HH:mm:ss') +
+                ' - ' +
+                moment(item.endTime).format('YYYY-MM-DD HH:mm:ss')
+            };
           }),
           currentDate
         };
@@ -156,8 +204,7 @@ export class CustomDaysView extends DaysView {
             }
             if (moment(schedule[i].startTime).isSame(currentDate, 'day')) {
               showSchedule.push(schedule[i]);
-            }
-            else if (currentDate.weekday() === 0) {
+            } else if (currentDate.weekday() === 0) {
               // 周一重新设置日程
               showSchedule.push({
                 ...schedule[i],
@@ -166,46 +213,86 @@ export class CustomDaysView extends DaysView {
             }
           }
           [0, 1, 2].forEach((i: number) => {
-            const findSchedule = find(schedule, (item: any) => item.height === i);
-            if (findSchedule && findSchedule !== showSchedule[i] && currentDate.weekday() !== 0) {
+            const findSchedule = find(
+              schedule,
+              (item: any) => item.height === i
+            );
+            if (
+              findSchedule &&
+              findSchedule !== showSchedule[i] &&
+              currentDate.weekday() !== 0
+            ) {
               // 生成一个空白格占位
               showSchedule.splice(i, 0, {
                 width: 1,
                 className: 'bg-transparent',
                 content: ''
               });
-            }
-            else {
+            } else {
               showSchedule[i] && (showSchedule[i].height = i);
             }
           });
           // 最多展示3个
           showSchedule = showSchedule.slice(0, 3);
           const scheduleDiv = showSchedule.map((item: any, index: number) => {
-            const width = item.width || Math.min(moment(item.endTime).diff(moment(item.startTime), 'days') + 1, 7 - moment(item.startTime).weekday());
-            return <div key={props.key + 'content' + index}
-              className={cx('ScheduleCalendar-large-schedule-content', item.className)}
-              style={{width: width + '00%'}}
-              onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}>
-                <div className={cx('ScheduleCalendar-text-overflow')}>{item.content}</div>
-            </div>;
+            const width =
+              item.width ||
+              Math.min(
+                moment(item.endTime).diff(moment(item.startTime), 'days') + 1,
+                7 - moment(item.startTime).weekday()
+              );
+            return (
+              <div
+                key={props.key + 'content' + index}
+                className={cx(
+                  'ScheduleCalendar-large-schedule-content',
+                  item.className
+                )}
+                style={{width: width + '00%'}}
+                onClick={() =>
+                  this.props.onScheduleClick &&
+                  this.props.onScheduleClick(scheduleData)
+                }
+              >
+                <div className={cx('ScheduleCalendar-text-overflow')}>
+                  {item.content}
+                </div>
+              </div>
+            );
           });
-          return <td {...props}>
+          return (
+            <td {...props}>
               <div className={cx('ScheduleCalendar-large-day-wrap')}>
-                <div className={cx('ScheduleCalendar-large-schedule-header')}>{currentDate.date()}</div>
+                <div className={cx('ScheduleCalendar-large-schedule-header')}>
+                  {currentDate.date()}
+                </div>
                 {scheduleDiv}
-                {schedule.length > 3 && <div className={cx('ScheduleCalendar-large-schedule-footer')}>{schedule.length - 3} {__('more')}</div>}
+                {schedule.length > 3 && (
+                  <div className={cx('ScheduleCalendar-large-schedule-footer')}>
+                    {schedule.length - 3} {__('more')}
+                  </div>
+                )}
               </div>
-          </td>
+            </td>
+          );
         }
 
         // 正常模式
-        const ScheduleIcon = <span className={cx('ScheduleCalendar-icon', schedule[0].className)}
-           onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}></span>;
-        return <td {...props}>
-          {currentDate.date()}
-          {ScheduleIcon}
-        </td>;
+        const ScheduleIcon = (
+          <span
+            className={cx('ScheduleCalendar-icon', schedule[0].className)}
+            onClick={() =>
+              this.props.onScheduleClick &&
+              this.props.onScheduleClick(scheduleData)
+            }
+          ></span>
+        );
+        return (
+          <td {...props}>
+            {currentDate.date()}
+            {ScheduleIcon}
+          </td>
+        );
       }
     }
     return <td {...props}>{currentDate.date()}</td>;
@@ -357,14 +444,59 @@ 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 = [
-      <thead key="th">
+      this.props.hideHeader ? null : <thead key="th">
         <tr>
           <th colSpan={7}>
             <div className="rdtHeader">

package/src/components/calendar/MonthsView.tsx

@@ -3,14 +3,20 @@ import MonthsView from 'react-datetime/src/MonthsView';
 import moment from 'moment';
 import React from 'react';
 import {LocaleProps, localeable, TranslateFn} from '../../locale';
+import Picker from '../Picker';
+import {PickerOption} from '../PickerColumn';
+import {getRange, isMobile} from '../../utils/helper';
+import {DateType} from './Calendar';
 
 export interface OtherProps {
   inputFormat?: string;
+  hideHeader?: boolean;
 }
 
 export class CustomMonthsView extends MonthsView {
   props: {
     viewDate: moment.Moment;
+    selectedDate: moment.Moment;
     subtractTime: (
       amount: number,
       type: string,
@@ -22,9 +28,38 @@ export class CustomMonthsView extends MonthsView {
       toSelected?: moment.Moment
     ) => () => void;
     showView: (view: string) => () => void;
+    minDate?: moment.Moment;
+    maxDate?: moment.Moment;
+    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: PickerOption[] }[]; pickerValue: number[]};
+  setState: (arg0: any) => () => any;
   renderMonths: () => JSX.Element;
+
+
+  constructor(props: any) {
+    super(props);
+
+    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,
+      pickerValue: currentDate.toArray()
+    }
+  }
+
   renderMonth = (props: any, month: number) => {
     var localMoment = this.props.viewDate;
     var monthStr = localMoment
@@ -40,11 +75,83 @@ export class CustomMonthsView extends MonthsView {
       </td>
     );
   };
+
+  onConfirm = (value: number[]) => {
+    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] === minDateObject.years &&
+        value[0] === maxDateObject.years
+      ) {
+        range = getRange(minDateObject.months, maxDateObject.months, 1);
+      }
+      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 {translate: __} =  this.props;
+    const title = __('Date.titleMonth');
+
+    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.onConfirm}
+        onClose={this.props.onClose}
+      />
+    );
+  };
+
   render() {
     const __ = this.props.translate;
-    const showYearHead = !/^mm$/i.test(this.props.inputFormat || '');
+    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>;
+    }
     return (
       <div className="rdtMonths">
         {showYearHead && (

package/src/components/calendar/QuartersView.tsx

@@ -23,6 +23,7 @@ export interface QuarterViewProps extends LocaleProps, ThemeProps {
   updateSelectedDate: (e: any, close?: boolean) => void;
   renderQuarter: any;
   isValidDate: (date: moment.Moment) => boolean;
+  hideHeader?: boolean;
 }
 
 export class QuarterView extends React.Component<QuarterViewProps> {
@@ -140,11 +141,11 @@ export class QuarterView extends React.Component<QuarterViewProps> {
   }
 
   render() {
-    const {classnames: cx} = this.props;
+    const {classnames: cx, hideHeader} = this.props;
 
     return (
       <div className={cx('ClalendarQuarter')}>
-        {this.renderYear()}
+        {hideHeader ? null : this.renderYear()}
         <table>
           <tbody>{this.renderQuarters()}</tbody>
         </table>

package/src/components/calendar/TimeView.tsx

@@ -7,35 +7,46 @@ import {Icon} from '../icons';
 import {ClassNamesFn} from '../../theme';
 import Picker from '../Picker';
 import {PickerColumnItem} from '../PickerColumn';
-import {getRange, isMobile} from "../../utils/helper";
+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;
-  } & 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,
@@ -43,7 +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 (
@@ -90,7 +116,7 @@ export class CustomTimeView extends TimeView {
       return parseInt(value);
     }
     return 0;
-  }
+  };
 
   renderCounter = (type: string) => {
     const cx = this.props.classnames;
@@ -148,14 +174,28 @@ 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 = () => {
     const {translate: __} = this.props;
     let options = ['am', 'pm'];
-    if ( this.props.timeFormat.indexOf( ' A' ) !== -1 ) {
+    if (this.props.timeFormat.indexOf(' A') !== -1) {
       options = ['AM', 'PM'];
     }
 
@@ -163,55 +203,78 @@ export class CustomTimeView extends TimeView {
       text: __(daypart),
       value: daypart
     }));
+  };
+
+  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 (type === 'hours'
-          && this.state.daypart !== false
-          && this.props.timeFormat.toLowerCase().indexOf(' a') !== -1) {
-            max = max > 12 ? 12 : max;
+        if (
+          type === 'hours' &&
+          this.state.daypart !== false &&
+          this.props.timeFormat.toLowerCase().indexOf(' a') !== -1
+        ) {
+          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) {
       columns.push({
         options: this.getDayPartOptions()
       });
-      values.push(this.state.daypart)
+      values.push(this.state.daypart);
     }
 
     return (
       <Picker
         translate={this.props.translate}
         locale={this.props.locale}
+        title={title}
         columns={columns}
-        value={values} 
+        value={values}
         onConfirm={this.onConfirm}
         onClose={this.props.onClose}
+        showToolbar={this.props.showToolbar}
+        onChange={this.onPickerChange}
         />
     );
-  }
+  };
 
   render() {
     let counters: Array<JSX.Element | null> = [];
     const cx = this.props.classnames;
-    
+
     if (isMobile() && this.props.useMobileUI) {
-      return <div className={cx('CalendarTime')}>
-          {this.renderTimeViewPicker()}
-        </div>
+      return (
+        <div className={cx('CalendarTime')}>{this.renderTimeViewPicker()}</div>
+      );
     }
     this.state.counters.forEach(c => {
       if (counters.length) {