amis 1.5.1 → 1.5.5

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'> {
@@ -28,6 +29,14 @@ interface BaseDatePickerProps
     year?: number,
     date?: moment.Moment
   ) => JSX.Element;
+  schedules?: Array<{
+    startTime: Date;
+    endTime: Date;
+    content: string | React.ReactElement;
+    color?: string;
+  }>;
+  largeMode?: boolean;
+  onScheduleClick?: (scheduleData: any) => void;
 }
 
 class BaseDatePicker extends ReactDatePicker {
@@ -82,7 +91,10 @@ class BaseDatePicker extends ReactDatePicker {
         'nextIcon',
         'isEndDate',
         'classnames',
-        'minDate'
+        'minDate',
+        'schedules',
+        'largeMode',
+        'onScheduleClick'
       ].forEach(key => (props[key] = (this.props as any)[key]));
 
       return props;
@@ -180,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();
@@ -191,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

@@ -5,6 +5,7 @@ import React from 'react';
 import Downshift from 'downshift';
 import {LocaleProps, localeable} from '../../locale';
 import {ClassNamesFn} from '../../theme';
+import find from 'lodash/find';
 
 interface CustomDaysViewProps extends LocaleProps {
   classPrefix?: string;
@@ -39,6 +40,14 @@ interface CustomDaysViewProps extends LocaleProps {
   updateSelectedDate: (event: React.MouseEvent<any>, close?: boolean) => void;
   handleClickOutside: () => void;
   classnames: ClassNamesFn;
+  schedules?: Array<{
+    startTime: Date,
+    endTime: Date,
+    content: any,
+    className?: string
+  }>;
+  largeMode?: boolean;
+  onScheduleClick?: (scheduleData: any) => void;
 }
 
 export class CustomDaysView extends DaysView {
@@ -117,6 +126,88 @@ export class CustomDaysView extends DaysView {
   };
 
   renderDay = (props: any, currentDate: moment.Moment) => {
+    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)) {
+          schedule.push(item);
+        }
+      });
+      if (schedule.length > 0) {
+        const cx = this.props.classnames;
+        const __ = this.props.translate;
+        // 日程数据
+        const scheduleData = {
+          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'),
+            }
+          }),
+          currentDate
+        };
+
+        // 放大模式
+        if (this.props.largeMode) {
+          let showSchedule: any[] = [];
+          for (let i = 0; i < schedule.length; i++) {
+            if (showSchedule.length > 3) {
+              break;
+            }
+            if (moment(schedule[i].startTime).isSame(currentDate, 'day')) {
+              showSchedule.push(schedule[i]);
+            }
+            else if (currentDate.weekday() === 0) {
+              // 周一重新设置日程
+              showSchedule.push({
+                ...schedule[i],
+                width: moment(schedule[i].endTime).date() - currentDate.date()
+              });
+            }
+          }
+          [0, 1, 2].forEach((i: number) => {
+            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 {
+              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>;
+          });
+          return <td {...props}>
+              <div className={cx('ScheduleCalendar-large-day-wrap')}>
+                <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>}
+              </div>
+          </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>;
   };