amis 1.5.3 → 1.5.6-beta.4

package/src/components/PickerColumn.tsx

@@ -1,6 +1,6 @@
 /**
  * @file Picker
- * @description 移动端选择器
+ * @description 移动端列滚动选择器
  */
 import React, {
   useEffect,
@@ -8,8 +8,7 @@ import React, {
   useRef,
   useImperativeHandle,
   useCallback,
-  forwardRef,
-  CSSProperties
+  forwardRef
 } from 'react';
 import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
@@ -18,37 +17,25 @@ import {uncontrollable} from 'uncontrollable';
 import {useSetState, useUpdateEffect} from '../hooks';
 import {range} from '../utils/helper';
 import {themeable, ThemeProps} from '../theme';
-import {localeable, LocaleProps} from '../locale';
 import useTouch from '../hooks/use-touch';
-import Button from './Button';
 
-export interface PickerColumnProps extends ThemeProps, LocaleProps {
-  mobileClassName?: string;
-  style?: CSSProperties;
-  index?: number;
-  labelField: string;
+export interface PickerColumnItem {
+  labelField?: string;
   readonly?: boolean;
-  value: any;
-  swipeDuration?: number | string;
-  visibleItemCount?: number | string;
+  value?: PickerOption;
+  swipeDuration?: number;
+  visibleItemCount?: number;
+  itemHeight?: number;
   options?: PickerOption[];
-  children?: any;
   optionRender?: (option: string | object | PickerOption) => React.ReactNode;
   onChange?: (
     value?: PickerOption | string,
     index?: number,
     confirm?: boolean
   ) => void;
-  onClose?: () => void;
-  onConfirm?: () => void;
-}
+};
 
-export interface Column {
-  values?: string[];
-  className?: string;
-  children?: Column[];
-  disabled?: boolean;
-}
+export interface PickerColumnProps extends PickerColumnItem, ThemeProps {}
 
 export type PickerOption = string | number | PickerObjectOption;
 
@@ -77,23 +64,17 @@ function getElementTranslateY(element: HTMLElement | null) {
 function isOptionDisabled(option: PickerOption) {
   return isObject(option) && option.disabled;
 }
-
+  
 const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const {
-    onClose,
-    onConfirm,
-    mobileClassName,
     visibleItemCount = 5,
+    itemHeight = 30,
     value,
     swipeDuration = 1000,
-    labelField = 'value',
-    translate: __,
+    labelField = 'text',
     options = [],
     classnames: cx
   } = props;
-  let itemHeight = 24;
-
-  const defaultIndex = options.findIndex(item => item === value);
 
   const root = useRef(null);
   const menuItemRef = useRef(null);
@@ -105,21 +86,9 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const touchStartTime = useRef(0);
   const momentumOffset = useRef(0);
 
-  if (menuItemRef.current) {
-    //@ts-ignore
-    itemHeight = menuItemRef.current.getBoundingClientRect().height;
-  }
-
-  const [state, updateState] = useSetState({
-    index: defaultIndex,
-    offset: 0,
-    duration: 0,
-    options: cloneDeep(options)
-  });
-
   const touch = useTouch();
-
-  const count = state.options.length;
+  const count = options.length;
+  const defaultIndex = options.findIndex(item => item === value);
 
   const baseOffset = useMemo(() => {
     // 默认转入第一个选项的位置
@@ -128,20 +97,27 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
 
   const adjustIndex = (index: number) => {
     index = range(index, 0, count);
-    if (!state.options) {
+    if (!options) {
       return;
     }
 
     for (let i = index; i < count; i += 1) {
-      if (!isOptionDisabled(state.options[i])) return i;
+      if (!isOptionDisabled(options[i])) return i;
     }
     for (let i = index - 1; i >= 0; i -= 1) {
-      if (!isOptionDisabled(state.options[i])) return i;
+      if (!isOptionDisabled(options[i])) return i;
     }
 
     return null;
   };
 
+  const [state, updateState] = useSetState({
+    index: adjustIndex(defaultIndex) || 0,
+    offset: 0,
+    duration: 0,
+    options: cloneDeep(options)
+  });
+
   /**
    *
    * @param index 索引
@@ -156,9 +132,14 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
       updateState({index});
 
       if (emitChange && props.onChange) {
-        setTimeout(() => {
-          props.onChange?.(options[index], index, confirm);
-        }, 0);
+        requestAnimationFrame(
+          () => {
+            props.onChange?.(options[index], index, confirm);
+          }
+        );
+        // setTimeout(() => {
+        //   props.onChange?.(options[index], index, confirm);
+        // }, 0);
       }
     };
 
@@ -175,7 +156,8 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const setOptions = (options: Array<PickerOption>) => {
     if (JSON.stringify(options) !== JSON.stringify(state.options)) {
       updateState({options});
-      setIndex(defaultIndex, true);
+      const index = options.findIndex(item => item === value) || 0;
+      setIndex(index, true, true);
     }
   };
 
@@ -189,7 +171,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   };
 
   const getOptionText = (option: [] | PickerOption) => {
-    if (isObject(option) && props.labelField in option) {
+    if (isObject(option) && labelField in option) {
       //@ts-ignore
       return option[labelField];
     }
@@ -298,6 +280,10 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   };
 
   const renderOptions = () => {
+    const style = {
+      height: `${itemHeight}px`,
+      lineHeight: `${itemHeight}px`
+    };
     return state.options.map((option, index: number) => {
       const text: string | PickerOption = getOptionText(option);
       const disabled = isOptionDisabled(option);
@@ -305,6 +291,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
       const data = {
         role: 'button',
         key: index,
+        style,
         tabIndex: disabled ? -1 : 0,
         className: props.classnames(`PickerColumns-columnItem`, {
           'is-disabled': disabled,
@@ -314,7 +301,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
           onClickItem(index);
         }
       };
-
+      
       const childData = {
         className: 'text-ellipsis',
         children: text
@@ -335,7 +322,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const setValue = (value: string) => {
     const {options} = state;
     for (let i = 0; i < options.length; i += 1) {
-      if (getOptionText(options[i]) === value) {
+      if (options[i] === value) {
         return setIndex(i);
       }
     }
@@ -348,7 +335,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   );
 
   useEffect(() => {
-    setIndex(defaultIndex, true);
+    setIndex(defaultIndex);
   }, [defaultIndex]);
 
   useUpdateEffect(() => {
@@ -369,61 +356,37 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
     transitionDuration: `${state.duration}ms`,
     transitionProperty: state.duration ? 'all' : 'none'
   };
-
-  const wrapHeight = itemHeight * +visibleItemCount;
-  const frameStyle = {height: `${itemHeight}px`};
-  const columnsStyle = {height: `${wrapHeight}px`};
-  const maskStyle = {
-    backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
-  };
-
   return (
-    <div
-      className={cx(mobileClassName, 'PickerColumns', 'PickerColumns-popOver')}
-    >
-      <div className={cx('PickerColumns-toolbar')}>
-        <Button level="default" onClick={onClose}>
-          {__('cancel')}
-        </Button>
-        <Button level="primary" onClick={onConfirm}>
-          {__('confirm')}
-        </Button>
-      </div>
-      <div className={cx('PickerColumns-columns')} style={columnsStyle}>
-        <div
+      <div
           ref={root}
-          className={props.classnames(props.className)}
+          className={props.classnames('PickerColumns', props.className)}
           onTouchStart={onTouchStart}
           onTouchMove={onTouchMove}
           onTouchEnd={onTouchEnd}
           onTouchCancel={onTouchEnd}
-        >
+      >
           <ul
-            ref={wrapper}
-            style={wrapperStyle}
-            className={props.classnames('PickerColumns-columnWrapper')}
-            onTransitionEnd={stopMomentum}
+          ref={wrapper}
+          style={wrapperStyle}
+          className={props.classnames('PickerColumns-columnWrapper')}
+          onTransitionEnd={stopMomentum}
           >
-            {renderOptions()}
+          {renderOptions()}
           </ul>
-        </div>
-        <div className={cx('PickerColumns-mask')} style={maskStyle}></div>
-        <div className={cx('PickerColumns-frame')} style={frameStyle}></div>
       </div>
-    </div>
   );
 });
 
 PickerColumn.defaultProps = {
   options: [],
   visibleItemCount: 5,
-  swipeDuration: 1000
+  swipeDuration: 1000,
+  itemHeight: 30
 };
 
 export default themeable(
-  localeable(
-    uncontrollable(PickerColumn, {
-      value: 'onChange'
-    })
-  )
+  uncontrollable(PickerColumn, {
+    value: 'onChange'
+  })
 );
+

package/src/components/Progress.tsx

@@ -118,7 +118,7 @@ export class Progress extends React.Component<ProgressProps, Object> {
       };
 
       viewValue = [
-        <div className={cx(prefixCls)}>
+        <div className={cx(prefixCls)} key="circle">
           <Circle
             percent={value}
             strokeColor=""

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>

package/src/components/index.tsx

@@ -12,6 +12,7 @@ import Button from './Button';
 import Checkbox from './Checkbox';
 import Checkboxes from './Selection';
 import Collapse from './Collapse';
+import CollapseGroup from './CollapseGroup';
 import DatePicker from './DatePicker';
 import DateRangePicker from './DateRangePicker';
 import Drawer from './Drawer';
@@ -69,6 +70,7 @@ export {
   Checkbox,
   Checkboxes,
   Collapse,
+  CollapseGroup,
   DatePicker,
   DateRangePicker,
   Drawer,