amis 1.5.6 → 1.6.1-beta.0

package/src/components/TabsTransferPicker.tsx

@@ -5,7 +5,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';
 import TabsTransfer, {TabsTransferProps} from './TabsTransfer';
 
 export interface TabsTransferPickerProps
@@ -15,18 +15,12 @@ export interface TabsTransferPickerProps
 }
 
 export class TransferPicker extends React.Component<TabsTransferPickerProps> {
-  @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() {
@@ -44,12 +38,30 @@ export class TransferPicker extends React.Component<TabsTransferPickerProps> {
     return (
       <PickerContainer
         title={__('Select.placeholder')}
-        bodyRender={({onClose, value, onChange}) => {
-          return <TabsTransfer {...rest} value={value} onChange={onChange} />;
+        bodyRender={({onClose, value, onChange, setState, ...states}) => {
+          return (
+            <TabsTransfer
+              {...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/Timeline.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {themeable, ThemeProps} from '../theme';
+import TimelineItem, {TimelineItemProps} from './TimelineItem';
+
+export interface TimelineProps extends ThemeProps {
+  items: Array<TimelineItemProps>;
+  direction?: 'vertical' | 'horizontal';
+  reverse?: boolean;
+  mode?: 'left' | 'right' | 'alternate';
+}
+
+export function Timeline(props: TimelineProps) {
+  const {
+    items,
+    classnames: cx,
+    direction = 'vertical',
+    reverse = false,
+    mode = 'right'
+  } = props;
+
+  const timelineDatasource = items?.slice();
+
+  reverse && timelineDatasource?.reverse();
+
+  return (
+    <div
+      className={cx('Timeline', `Timeline-${direction}`, `Timeline-${mode}`)}
+    >
+      {timelineDatasource?.map((item: TimelineItemProps, index: number) => (
+        <TimelineItem {...item} key={`TimelineItem-${index}`} />
+      ))}
+    </div>
+  );
+}
+
+export default themeable(Timeline);

package/src/components/TimelineItem.tsx

@@ -0,0 +1,140 @@
+import React, {ReactNode, useState} from 'react';
+import {localeable, LocaleProps} from '../locale';
+import {SchemaExpression} from '../Schema';
+import {themeable, ThemeProps} from '../theme';
+import {Icon} from './icons';
+
+export interface TimelineItemProps {
+  /**
+   * 时间点
+   */
+  time: string;
+
+  /**
+   * 事件名称
+   */
+  title?: string | ReactNode;
+
+  /**
+   * 详细内容
+   */
+  detail?: string;
+
+  /**
+   * detail折叠时文案
+   */
+  detailCollapsedText?: string;
+
+  /**
+   * detail展开时文案
+   */
+  detailExpandedText?: string;
+
+  /**
+   * 时间点圆圈颜色,可传入英文/颜色值/level样式（info、success、warning、danger）
+   */
+  color?: SchemaExpression;
+
+  /**
+   * 图标
+   */
+  icon?: string | ReactNode;
+}
+
+export interface TimelineItem
+  extends ThemeProps,
+    LocaleProps,
+    TimelineItemProps {
+  key: string;
+}
+
+export function TimelineItem(props: TimelineItem) {
+  const {
+    time,
+    title,
+    detail,
+    detailCollapsedText,
+    detailExpandedText,
+    color,
+    icon,
+    classnames: cx,
+    translate: __,
+    key
+  } = props;
+
+  const [detailVisible, setDetailVisible] = useState<boolean>(false);
+
+  const renderDetail = (
+    detail: string,
+    detailCollapsedText: string = __('Timeline.collapseText'),
+    detailExpandedText: string = __('Timeline.expandText')
+  ): ReactNode => {
+    return (
+      <>
+        <div
+          className={cx('TimelineItem-detail-button')}
+          onClick={() => setDetailVisible(!detailVisible)}
+        >
+          {detailVisible ? detailExpandedText : detailCollapsedText}
+          <div
+            className={cx(
+              'TimelineItem-detail-arrow',
+              `${detailVisible && 'TimelineItem-detail-arrow-top'}`
+            )}
+          >
+            <Icon icon="tree-down" />
+          </div>
+        </div>
+        <div
+          className={cx(
+            `${
+              detailVisible
+                ? 'TimelineItem-detail-visible'
+                : 'TimelineItem-detail-invisible'
+            }`
+          )}
+        >
+          {detail}
+        </div>
+      </>
+    );
+  };
+
+  // 判断是否为颜色值
+  const isColorVal = color && /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(color);
+
+  // 取level级颜色
+  const levelColor = !isColorVal && color;
+
+  return (
+    <div className={cx('TimelineItem')} key={key}>
+      <div className={cx('TimelineItem-axle')}>
+        <div className={cx('TimelineItem-line')}></div>
+        {icon ? (
+          <div className={cx('TimelineItem-icon')}>
+            <Icon icon={icon} className="icon" />
+          </div>
+        ) : (
+          <div
+            className={cx(
+              'TimelineItem-round',
+              levelColor && `TimelineItem-round--${levelColor}`
+            )}
+            style={isColorVal ? {backgroundColor: color} : undefined}
+          ></div>
+        )}
+      </div>
+      <div className={cx('TimelineItem-content')}>
+        <div className={cx('TimelineItem-time')}>{time}</div>
+        <div className={cx('TimelineItem-title')}>{title}</div>
+        {detail && (
+          <div className={cx('TimelineItem-detail')}>
+            {renderDetail(detail, detailCollapsedText, detailExpandedText)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default themeable(localeable(TimelineItem));

package/src/components/Transfer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {ThemeProps, themeable} from '../theme';
-import {BaseSelectionProps, BaseSelection} from './Selection';
+import {BaseSelectionProps, BaseSelection, ItemRenderStates} from './Selection';
 import {Options, Option} from './Select';
 import {uncontrollable} from 'uncontrollable';
 import ResultList from './ResultList';
@@ -14,11 +14,12 @@ import AssociatedSelection from './AssociatedSelection';
 import {LocaleProps, localeable} from '../locale';
 import GroupedSelection from './GroupedSelection';
 import ChainedSelection from './ChainedSelection';
+import {ItemRenderStates as ResultItemRenderStates} from './ResultList';
 
 export interface TransferProps
   extends ThemeProps,
     LocaleProps,
-    BaseSelectionProps {
+    Omit<BaseSelectionProps, 'itemRender'> {
   inline?: boolean;
   statistics?: boolean;
   showArrow?: boolean;
@@ -55,6 +56,7 @@ export interface TransferProps
   }>;
   searchPlaceholder?: string;
   noResultsText?: string;
+  onChange?: (value: Array<Option>, optionModified?: boolean) => void;
   onSearch?: (
     term: string,
     setCancel: (cancel: () => void) => void
@@ -70,8 +72,11 @@ export interface TransferProps
   ) => JSX.Element;
 
   resultTitle?: string;
-  optionItemRender?: (option: Option) => JSX.Element;
-  resultItemRender?: (option: Option) => JSX.Element;
+  optionItemRender?: (option: Option, states: ItemRenderStates) => JSX.Element;
+  resultItemRender?: (
+    option: Option,
+    states: ResultItemRenderStates
+  ) => JSX.Element;
   sortable?: boolean;
 }
 
@@ -83,9 +88,8 @@ export interface TransferState {
 export class Transfer<
   T extends TransferProps = TransferProps
 > extends React.Component<T, TransferState> {
-  static defaultProps: Pick<TransferProps, 'itemRender' | 'multiple'> = {
-    multiple: true,
-    itemRender: (option: Option) => <span>{option.label}</span>
+  static defaultProps: Pick<TransferProps, 'multiple'> = {
+    multiple: true
   };
 
   state = {
@@ -382,7 +386,6 @@ export class Transfer<
         option2value={option2value}
         onDeferLoad={onDeferLoad}
         cellRender={cellRender}
-        itemRender={optionItemRender}
         multiple={multiple}
       />
     ) : selectMode === 'tree' ? (

package/src/components/TransferDropDown.tsx

@@ -7,11 +7,13 @@ import ResultBox from './ResultBox';
 import {Icon} from './icons';
 import InputBox from './InputBox';
 import PopOverContainer from './PopOverContainer';
+import {isMobile} from '../utils/helper';
 
 export interface TransferDropDownProps extends TransferProps {
   // 新的属性？
   multiple?: boolean;
   borderMode?: 'full' | 'half' | 'none';
+  useMobileUI?: boolean;
 }
 
 export class TransferDropDown extends Transfer<TransferDropDownProps> {
@@ -25,15 +27,22 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
       onChange,
       onSearch,
       multiple,
-      borderMode
+      borderMode,
+      useMobileUI
     } = this.props;
     const {inputValue, searchResult} = this.state;
 
+    const mobileUI = useMobileUI && isMobile();
     return (
       <PopOverContainer
+        useMobileUI={useMobileUI}
         popOverClassName={cx('TransferDropDown-popover')}
         popOverRender={({onClose}) => (
-          <div className={cx('TransferDropDown-content')}>
+          <div
+            className={cx('TransferDropDown-content', {
+              'is-mobile': mobileUI
+            })}
+          >
             {onSearch ? (
               <div className={cx('Transfer-search')}>
                 <InputBox
@@ -88,22 +97,21 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
             )}
             borderMode={borderMode}
             allowInput={false}
-            result={
-              multiple
-                ? value
-                : value?.[0]
-                ? this.props.itemRender(value[0])
-                : null
-            }
+            result={multiple ? value : value?.[0] ? value?.[0] : null}
             onResultChange={onChange}
             onResultClick={onClick}
             placeholder={__('Select.placeholder')}
             disabled={disabled}
             ref={ref}
+            useMobileUI={useMobileUI}
           >
-            <span className={cx('TransferDropDown-icon')}>
-              <Icon icon="caret" className="icon" />
-            </span>
+            {!mobileUI ? (
+              <span className={cx('TransferDropDown-icon')}>
+                <Icon icon="caret" className="icon" />
+              </span>
+            ) : (
+              <></>
+            )}
           </ResultBox>
         )}
       </PopOverContainer>

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,9 +19,11 @@ export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
 }
 
 export class TransferPicker extends React.Component<TransferPickerProps> {
+  optionModified = false;
   @autobind
   handleConfirm(value: any) {
-    this.props.onChange?.(value);
+    this.props.onChange?.(value, this.optionModified);
+    this.optionModified = false;
   }
 
   render() {
@@ -40,8 +42,27 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
     return (
       <PickerContainer
         title={__('Select.placeholder')}
-        bodyRender={({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}

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,23 @@ import CustomCalendarContainer from './CalendarContainer';
 import cx from 'classnames';
 import moment from 'moment';
 import {themeable, ThemeOutterProps, ThemeProps} from '../../theme';
-import {convertDateArrayToDate} from "../../utils/helper";
+import {convertArrayValueToMoment, getRange} from "../../utils/helper";
+import {PickerOption} from '../PickerColumn';
+
+export type DateType = 'year' | 'month' | 'date' | 'hours' | 'minutes' | 'seconds';
+export interface BoundaryObject {
+  max: number;
+  min: number;
+}
+
+export interface DateBoundary {
+  year: BoundaryObject;
+  month: BoundaryObject;
+  date: BoundaryObject;
+  hours: BoundaryObject;
+  minutes: BoundaryObject;
+  seconds: BoundaryObject;
+}
 
 interface BaseDatePickerProps
   extends Omit<ReactDatePicker.DatetimepickerProps, 'viewMode'> {
@@ -18,6 +34,7 @@ interface BaseDatePickerProps
   onClose?: () => void;
   isEndDate?: boolean;
   minDate?: moment.Moment;
+  maxDate?: moment.Moment;
   renderDay?: (
     props: any,
     currentDate: moment.Moment,
@@ -37,6 +54,11 @@ interface BaseDatePickerProps
   }>;
   largeMode?: boolean;
   onScheduleClick?: (scheduleData: any) => void;
+  hideHeader?: boolean;
+  updateOn?: string;
+  useMobileUI?: boolean;
+  embed?: boolean;
+  showToolbar?: boolean;
 }
 
 class BaseDatePicker extends ReactDatePicker {
@@ -45,6 +67,16 @@ class BaseDatePicker extends ReactDatePicker {
   setState: (state: any) => void;
   getStateFromProps: any;
 
+  timeCellLength = {
+    year: 4,
+    month: 2,
+    date: 2,
+    hours: 2,
+    minutes: 2,
+    seconds: 2,
+    milliseconds: 3
+  };
+
   constructor(props: any) {
     super(props);
     const state = this.getStateFromProps(this.props);
@@ -92,8 +124,15 @@ class BaseDatePicker extends ReactDatePicker {
         'isEndDate',
         'classnames',
         'minDate',
+        'maxDate',
         'schedules',
         'largeMode',
+        'onScheduleClick',
+        'hideHeader',
+        'updateOn',
+        'useMobileUI',
+        'showToolbar',
+        'embed',
         'onScheduleClick'
       ].forEach(key => (props[key] = (this.props as any)[key]));
 
@@ -192,10 +231,58 @@ class BaseDatePicker extends ReactDatePicker {
     that.props.onChange(date);
   };
 
+  getDateBoundary = (currentDate: moment.Moment) => {
+    const {years, months} = currentDate.toObject();
+    const maxDateObject = this.props.maxDate?.toObject();
+    const minDateObject = this.props.minDate?.toObject();
+
+    const yearBoundary = {
+      max: maxDateObject ? maxDateObject.years : years + 100,
+      min: minDateObject ? minDateObject.years : years - 100,
+    };
+    const monthBoundary = {
+      max: years === maxDateObject?.years ? maxDateObject.months : 11,
+      min: years === minDateObject?.years ? minDateObject.months : 0
+    };
+    const dateBoundary  = {
+      max: years === maxDateObject?.years && months === maxDateObject?.months ? maxDateObject.date : currentDate.daysInMonth(),
+      min: years === minDateObject?.years && months === minDateObject?.months ? minDateObject.date : 1
+    }
+    return {
+      year: yearBoundary,
+      month: monthBoundary,
+      date: dateBoundary,
+      hours: {max: 23, min: 0},
+      minutes: {max: 59, min: 0},
+      seconds: {max: 59, min: 0}
+    };
+  };
+
+  timeCell = (value: number, type: DateType) => {
+		let str = value + '';
+		while (str.length < this.timeCellLength[type])
+			str = '0' + str;
+		return str;
+	};
+
+  getColumns = (types: DateType[], dateBoundary: DateBoundary) => {
+    const columns: { options: PickerOption[] }[] = [];
+    types.map((type: DateType) => {
+      const options = getRange(dateBoundary[type].min, dateBoundary[type].max, 1).map(item => {
+
+        return {
+          text: type === 'month' ? this.timeCell(item+1, type) : this.timeCell(item, type),
+          value: item
+        };
+      });
+      columns.push({options})
+    });
+    return columns;
+  };
+
   onConfirm = (value: number[], types: string[]) => {
     const currentDate = (this.state.selectedDate || this.state.viewDate || moment()).clone();
-    
-    const date = convertDateArrayToDate(value, types, currentDate);
+    const date = convertArrayValueToMoment(value, types, currentDate);
 
     if (!this.props.value) {
       this.setState({
@@ -205,7 +292,7 @@ class BaseDatePicker extends ReactDatePicker {
     }
     this.props.onChange && this.props.onChange(date);
     this.props.onClose && this.props.onClose();
-  }
+  };
 
   
   render() {
@@ -218,8 +305,18 @@ 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;
+    viewProps.getDateBoundary = this.getDateBoundary;
+    viewProps.getColumns = this.getColumns;
+    viewProps.timeCell = this.timeCell;
+
     return (
       <div className={cx('rdt rdtStatic rdtOpen', this.props.className)}>
         <div key="dt" className="rdtPicker">