amis 1.5.6-beta.4 → 1.5.8-beta.2

package/src/components/TransferPicker.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import ResultBox from './ResultBox';
 import {Icon} from './icons';
 import PickerContainer from './PickerContainer';
-import {autobind} from '../utils/helper';
+import {autobind, mapTree} from '../utils/helper';
 
 export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
   // 新的属性？
@@ -19,18 +19,11 @@ export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
 }
 
 export class TransferPicker extends React.Component<TransferPickerProps> {
-  @autobind
-  handleClose() {
-    this.setState({
-      inputValue: '',
-      searchResult: null
-    });
-  }
-
+  optionModified = false;
   @autobind
   handleConfirm(value: any) {
-    this.props.onChange?.(value);
-    this.handleClose();
+    this.props.onChange?.(value, this.optionModified);
+    this.optionModified = false;
   }
 
   render() {
@@ -49,12 +42,30 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
     return (
       <PickerContainer
         title={__('Select.placeholder')}
-        popOverRender={({onClose, value, onChange}) => {
-          return <Transfer {...rest} value={value} onChange={onChange} />;
+        bodyRender={({onClose, value, onChange, setState, ...states}) => {
+          return (
+            <Transfer
+              {...rest}
+              {...states}
+              value={value}
+              onChange={(value: any, optionModified) => {
+                if (optionModified) {
+                  let options = mapTree(rest.options, item => {
+                    return (
+                      value.find((a: any) => a.value === item.value) || item
+                    );
+                  });
+                  this.optionModified = true;
+                  setState({options, value});
+                } else {
+                  onChange(value);
+                }
+              }}
+            />
+          );
         }}
         value={value}
         onConfirm={this.handleConfirm}
-        onCancel={this.handleClose}
         size={size}
       >
         {({onClick, isOpened}) => (

package/src/components/TreeSelection.tsx

@@ -239,7 +239,13 @@ export class TreeSelection extends BaseSelection<
           ) : null}
 
           <div className={cx('TreeSelection-itemLabel')}>
-            {itemRender(option)}
+            {itemRender(option, {
+              index: index,
+              multiple: multiple,
+              checked: checked,
+              onChange: () => this.toggleOption(option),
+              disabled: disabled || option.disabled
+            })}
           </div>
 
           {option.defer && option.loading ? <Spinner show size="sm" /> : null}

package/src/components/calendar/Calendar.tsx

@@ -7,7 +7,7 @@ import CustomCalendarContainer from './CalendarContainer';
 import cx from 'classnames';
 import moment from 'moment';
 import {themeable, ThemeOutterProps, ThemeProps} from '../../theme';
-import {convertDateArrayToDate} from "../../utils/helper";
+import {convertDateArrayToDate} from '../../utils/helper';
 
 interface BaseDatePickerProps
   extends Omit<ReactDatePicker.DatetimepickerProps, 'viewMode'> {
@@ -18,6 +18,7 @@ interface BaseDatePickerProps
   onClose?: () => void;
   isEndDate?: boolean;
   minDate?: moment.Moment;
+  maxDate?: moment.Moment;
   renderDay?: (
     props: any,
     currentDate: moment.Moment,
@@ -37,6 +38,10 @@ interface BaseDatePickerProps
   }>;
   largeMode?: boolean;
   onScheduleClick?: (scheduleData: any) => void;
+  hideHeader?: boolean;
+  updateOn?: string;
+  useMobileUI?: boolean;
+  showToolbar?: boolean;
 }
 
 class BaseDatePicker extends ReactDatePicker {
@@ -92,9 +97,14 @@ class BaseDatePicker extends ReactDatePicker {
         'isEndDate',
         'classnames',
         'minDate',
+        'maxDate',
         'schedules',
         'largeMode',
-        'onScheduleClick'
+        'onScheduleClick',
+        'hideHeader',
+        'updateOn',
+        'useMobileUI',
+        'showToolbar'
       ].forEach(key => (props[key] = (this.props as any)[key]));
 
       return props;
@@ -193,8 +203,12 @@ class BaseDatePicker extends ReactDatePicker {
   };
 
   onConfirm = (value: number[], types: string[]) => {
-    const currentDate = (this.state.selectedDate || this.state.viewDate || moment()).clone();
-    
+    const currentDate = (
+      this.state.selectedDate ||
+      this.state.viewDate ||
+      moment()
+    ).clone();
+
     const date = convertDateArrayToDate(value, types, currentDate);
 
     if (!this.props.value) {
@@ -205,9 +219,8 @@ class BaseDatePicker extends ReactDatePicker {
     }
     this.props.onChange && this.props.onChange(date);
     this.props.onClose && this.props.onClose();
-  }
+  };
 
-  
   render() {
     const Component = CustomCalendarContainer as any;
     const viewProps = this.getComponentProps();
@@ -218,8 +231,15 @@ class BaseDatePicker extends ReactDatePicker {
         this.props.renderQuarter
       ];
     }
+    else if (this.props.viewMode === 'years') {
+      viewProps.updateOn = 'years';
+    }
+    else if (this.props.viewMode === 'months') {
+      viewProps.updateOn = 'months';
+    }
 
     viewProps.onConfirm = this.onConfirm;
+
     return (
       <div className={cx('rdt rdtStatic rdtOpen', this.props.className)}>
         <div key="dt" className="rdtPicker">

package/src/components/calendar/DaysView.tsx

@@ -41,13 +41,14 @@ 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;
 }
 
 export class CustomDaysView extends DaysView {
@@ -129,7 +130,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 +147,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 +165,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 +174,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>;
@@ -364,7 +412,7 @@ export class CustomDaysView extends DaysView {
     const __ = this.props.translate;
 
     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,18 @@ 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 {convertDateToObject, getRange, isMobile} from '../../utils/helper';
 
 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 +26,59 @@ 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;
+    useMobileUI: boolean;
   } & LocaleProps &
     OtherProps;
+  maxDateObject: {year: number; month: number; day?: number};
+  minDateObject: {year: number; month: number; day?: number};
+  state: {columns: {options: 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)
+      };
+    });
+
+    this.state = {
+      columns
+    };
+  }
+
   renderMonth = (props: any, month: number) => {
     var localMoment = this.props.viewDate;
     var monthStr = localMoment
@@ -40,11 +94,71 @@ export class CustomMonthsView extends MonthsView {
       </td>
     );
   };
+
+  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 columns = [...this.state.columns];
+    // 选择年份是最大值的年或者最小值的月时，需要重新计算月分选择的cloumn
+    if (index === 0) {
+      if (
+        value[0] === this.minDateObject.year &&
+        value[0] === this.maxDateObject.year
+      ) {
+        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)
+        };
+      }
+      this.setState({columns});
+    }
+  };
+
+  renderPicker = () => {
+    const {selectedDate, viewDate} = this.props;
+    const currentDate = selectedDate || viewDate || moment();
+    const year = currentDate.year();
+    const month = parseInt(currentDate.format('MM'), 10);
+
+    return (
+      <Picker
+        translate={this.props.translate}
+        locale={this.props.locale}
+        columns={this.state.columns}
+        value={[year, month]}
+        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,7 +7,7 @@ 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';
 
 export class CustomTimeView extends TimeView {
   props: {
@@ -29,6 +29,8 @@ export class CustomTimeView extends TimeView {
     onClose?: () => void;
     onConfirm?: (value: number[], types: string[]) => void;
     useMobileUI: boolean;
+    showToolbar?: boolean;
+    onChange?: (value: any) => void;
   } & LocaleProps;
   onStartClicking: any;
   disableContextMenu: any;
@@ -44,6 +46,10 @@ export class CustomTimeView extends TimeView {
     milliseconds: 3
   };
 
+  static defaultProps = {
+    showToolbar: true
+  };
+
   renderDayPart = () => {
     const {translate: __, classnames: cx} = this.props;
     return (
@@ -90,7 +96,7 @@ export class CustomTimeView extends TimeView {
       return parseInt(value);
     }
     return 0;
-  }
+  };
 
   renderCounter = (type: string) => {
     const cx = this.props.classnames;
@@ -150,12 +156,12 @@ export class CustomTimeView extends TimeView {
 
   onConfirm = (value: number[]) => {
     this.props.onConfirm && this.props.onConfirm(value, 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,7 +169,7 @@ export class CustomTimeView extends TimeView {
       text: __(daypart),
       value: daypart
     }));
-  }
+  };
 
   renderTimeViewPicker = () => {
     const columns: PickerColumnItem[] = [];
@@ -174,10 +180,12 @@ export class CustomTimeView extends TimeView {
         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)
@@ -189,7 +197,7 @@ export class CustomTimeView extends TimeView {
       columns.push({
         options: this.getDayPartOptions()
       });
-      values.push(this.state.daypart)
+      values.push(this.state.daypart);
     }
 
     return (
@@ -197,21 +205,23 @@ export class CustomTimeView extends TimeView {
         translate={this.props.translate}
         locale={this.props.locale}
         columns={columns}
-        value={values} 
+        value={values}
         onConfirm={this.onConfirm}
         onClose={this.props.onClose}
+        showToolbar={this.props.showToolbar}
+        onChange={this.props.onChange}
         />
     );
-  }
+  };
 
   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) {