amis 1.5.3 → 1.5.4

package/src/components/Select.tsx

@@ -36,7 +36,7 @@ import {LocaleProps, localeable} from '../locale';
 import Spinner from './Spinner';
 import {Option, Options} from '../Schema';
 import {RemoteOptionsProps, withRemoteConfig} from './WithRemoteConfig';
-import PickerColumn from './PickerColumn';
+import Picker from './Picker';
 
 export {Option, Options};
 
@@ -569,7 +569,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
     );
   }
 
-  handlePickerChange(selectItem: any, index: number, confirm: boolean) {
+  handlePickerChange(selectItem: any, index: number, confirm?: boolean) {
+    if (!this.props.multiple) {
+      selectItem = selectItem[0];
+    }
     this.setState({
       pickerSelectItem: selectItem
     });
@@ -916,20 +919,22 @@ export class Select extends React.Component<SelectProps, SelectState> {
     };
 
     const mobileUI = isMobile() && useMobileUI;
+    const column = {
+      labelField: 'label',
+      options: filtedOptions
+    };
     const menu = mobileUI ? (
-      <PickerColumn
-        mobileClassName={mobileClassName}
-        labelField={'label'}
-        readonly={false}
-        className={'PickerColumns-column'}
-        value={value && value[0]}
-        swipeDuration={1000}
-        visibleItemCount={5}
-        options={filtedOptions}
+      <Picker
+        className={cx('PickerColumns-column', mobileClassName)}
+        labelField='label'
+        value={value[0]}
+        translate={this.props.translate}
+        locale={this.props.locale}
+        columns={[column]}
         onChange={checkAll ? noop : this.handlePickerChange}
         onClose={this.close}
         onConfirm={this.confirm}
-      ></PickerColumn>
+      />
     ) : (
       <div
         ref={this.menu}

package/src/components/Selection.tsx

@@ -126,10 +126,7 @@ export class BaseSelection<
 
   @autobind
   toggleAll() {
-    const {value, onChange, option2value, options, multiple} = this.props;
-    if (multiple) {
-      return;
-    }
+    const {value, onChange, option2value, options} = this.props;
 
     let valueArray: Array<Option> = [];
 

package/src/components/Switch.tsx

@@ -28,15 +28,15 @@ interface SwitchProps {
   className?: string;
   classPrefix: string;
   classnames: ClassNamesFn;
-  onChange?: (checked: boolean) => void;
-  value?: any;
+  onChange?: (checked: boolean | string | number) => void;
+  value?: boolean | string | number;
   inline?: boolean;
-  trueValue?: any;
-  falseValue?: any;
+  trueValue?: boolean | string | number;
+  falseValue?: boolean | string | number;
   disabled?: boolean;
   readOnly?: boolean;
-  onText?: string;
-  offText?: string;
+  onText?: React.ReactNode;
+  offText?: React.ReactNode;
   checked?: boolean;
 }
 
@@ -59,7 +59,7 @@ export class Switch extends React.PureComponent<SwitchProps, any> {
       return;
     }
 
-    onChange(e.currentTarget.checked ? trueValue : falseValue);
+    onChange(e.currentTarget.checked ? trueValue! : falseValue!);
   }
 
   render() {

package/src/components/calendar/Calendar.tsx

@@ -7,6 +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";
 
 interface BaseDatePickerProps
   extends Omit<ReactDatePicker.DatetimepickerProps, 'viewMode'> {
@@ -191,6 +192,22 @@ class BaseDatePicker extends ReactDatePicker {
     that.props.onChange(date);
   };
 
+  onConfirm = (value: number[], types: string[]) => {
+    const currentDate = (this.state.selectedDate || this.state.viewDate || moment()).clone();
+    
+    const date = convertDateArrayToDate(value, types, currentDate);
+
+    if (!this.props.value) {
+      this.setState({
+        selectedDate: date,
+        inputValue: date!.format(this.state.inputFormat)
+      });
+    }
+    this.props.onChange && this.props.onChange(date);
+    this.props.onClose && this.props.onClose();
+  }
+
+  
   render() {
     const Component = CustomCalendarContainer as any;
     const viewProps = this.getComponentProps();
@@ -202,6 +219,7 @@ class BaseDatePicker extends ReactDatePicker {
       ];
     }
 
+    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

@@ -185,11 +185,12 @@ export class CustomDaysView extends DaysView {
             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%'}}>
+              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} onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}>
+          return <td {...props}>
               <div className={cx('ScheduleCalendar-large-day-wrap')}>
                 <div className={cx('ScheduleCalendar-large-schedule-header')}>{currentDate.date()}</div>
                 {scheduleDiv}
@@ -199,8 +200,9 @@ export class CustomDaysView extends DaysView {
         }
 
         // 正常模式
-        const ScheduleIcon = <span className={cx('ScheduleCalendar-icon', schedule[0].className)}></span>;
-        return <td {...props} onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}>
+        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>;

package/src/components/calendar/TimeView.tsx

@@ -5,6 +5,9 @@ import React from 'react';
 import {LocaleProps, localeable} from '../../locale';
 import {Icon} from '../icons';
 import {ClassNamesFn} from '../../theme';
+import Picker from '../Picker';
+import {PickerColumnItem} from '../PickerColumn';
+import {getRange, isMobile} from "../../utils/helper";
 
 export class CustomTimeView extends TimeView {
   props: {
@@ -23,6 +26,9 @@ export class CustomTimeView extends TimeView {
     timeFormat: string;
     classnames: ClassNamesFn;
     setTime: (type: string, value: any) => void;
+    onClose?: () => void;
+    onConfirm?: (value: number[], types: string[]) => void;
+    useMobileUI: boolean;
   } & LocaleProps;
   onStartClicking: any;
   disableContextMenu: any;
@@ -68,10 +74,9 @@ export class CustomTimeView extends TimeView {
     );
   };
 
-  renderCounter = (type: string) => {
-    const cx = this.props.classnames;
+  getCounterValue = (type: string) => {
     if (type !== 'daypart') {
-      var value = this.state[type];
+      let value = this.state[type];
       if (
         type === 'hours' &&
         this.props.timeFormat.toLowerCase().indexOf(' a') !== -1
@@ -82,6 +87,15 @@ export class CustomTimeView extends TimeView {
           value = 12;
         }
       }
+      return parseInt(value);
+    }
+    return 0;
+  }
+
+  renderCounter = (type: string) => {
+    const cx = this.props.classnames;
+    if (type !== 'daypart') {
+      const value = this.getCounterValue(type);
 
       const {min, max, step} = this.timeConstraints[type];
 
@@ -134,10 +148,71 @@ export class CustomTimeView extends TimeView {
     return null;
   };
 
+  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 ) {
+      options = ['AM', 'PM'];
+    }
+
+    return options.map(daypart => ({
+      text: __(daypart),
+      value: daypart
+    }));
+  }
+
+  renderTimeViewPicker = () => {
+    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;
+        }
+        columns.push({
+          options: getRange(min, max, step)
+        });
+        values.push(counterValue);
+      }
+    });
+    if (this.state.daypart !== false) {
+      columns.push({
+        options: this.getDayPartOptions()
+      });
+      values.push(this.state.daypart)
+    }
+
+    return (
+      <Picker
+        translate={this.props.translate}
+        locale={this.props.locale}
+        columns={columns}
+        value={values} 
+        onConfirm={this.onConfirm}
+        onClose={this.props.onClose}
+        />
+    );
+  }
+
   render() {
-    const counters: Array<JSX.Element | null> = [];
+    let counters: Array<JSX.Element | null> = [];
     const cx = this.props.classnames;
-
+    
+    if (isMobile() && this.props.useMobileUI) {
+      return <div className={cx('CalendarTime')}>
+          {this.renderTimeViewPicker()}
+        </div>
+    }
     this.state.counters.forEach(c => {
       if (counters.length) {
         counters.push(

package/src/components/calendar/YearsView.tsx

@@ -3,10 +3,13 @@ import YearsView from 'react-datetime/src/YearsView';
 import moment from 'moment';
 import React from 'react';
 import {LocaleProps, localeable} from '../../locale';
+import Picker from '../Picker';
+import {convertDateToObject, getRange, isMobile} from "../../utils/helper";
 
 export class CustomYearsView extends YearsView {
   props: {
     viewDate: moment.Moment;
+    selectedDate: moment.Moment;
     subtractTime: (
       amount: number,
       type: string,
@@ -18,6 +21,12 @@ export class CustomYearsView extends YearsView {
       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;
   renderYears: (year: number) => JSX.Element;
   renderYear = (props: any, year: number) => {
@@ -27,11 +36,45 @@ export class CustomYearsView extends YearsView {
       </td>
     );
   };
+
+  onConfirm = (value: number[]) => {
+    this.props.onConfirm && this.props.onConfirm(value, ["year"])
+  }
+
+  renderYearPicker = () => {
+    const {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 columns = [{
+      options: getRange(minYear, maxYear, 1)
+    }];
+
+    return (
+      <Picker
+        translate={this.props.translate}
+        locale={this.props.locale}
+        columns={columns}
+        value={[year]} 
+        onConfirm={this.onConfirm}
+        onClose={this.props.onClose}
+        />
+    );
+  };
+
   render() {
     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>
+      );
+    }
     return (
       <div className="rdtYears">
         <table>