amis 1.5.7 → 1.5.8-beta.2

package/src/components/TabsTransfer.tsx

@@ -11,12 +11,22 @@ import Transfer, {TransferProps} from './Transfer';
 import {themeable} from '../theme';
 import AssociatedCheckboxes from './AssociatedSelection';
 import {localeable} from '../locale';
+import {ItemRenderStates} from './Selection';
 
 export interface TabsTransferProps
   extends Omit<
     TransferProps,
-    'selectMode' | 'columns' | 'selectRender' | 'statistics'
+    | 'selectMode'
+    | 'columns'
+    | 'selectRender'
+    | 'statistics'
+    | 'optionItemRender'
   > {
+  optionItemRender?: (
+    option: Option,
+    states: ItemRenderStates,
+    tab: Option
+  ) => JSX.Element;
   cellRender?: (
     column: {
       name: string;
@@ -30,10 +40,6 @@ export interface TabsTransferProps
 }
 
 export class TabsTransfer extends React.Component<TabsTransferProps> {
-  static defaultProps = {
-    itemRender: (option: Option) => <span>{option.label}</span>
-  };
-
   renderSearchResult(searchResult: Options | null) {
     const {
       searchResultMode,
@@ -44,7 +50,8 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
       disabled,
       onChange,
       option2value,
-      cellRender
+      cellRender,
+      optionItemRender
     } = this.props;
     const options = searchResult || [];
     const mode = searchResultMode;
@@ -70,6 +77,14 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
         disabled={disabled}
         onChange={onChange}
         option2value={option2value}
+        itemRender={
+          optionItemRender
+            ? (item: Option, states: ItemRenderStates) =>
+                optionItemRender(item, states, {
+                  panel: 'result'
+                })
+            : undefined
+        }
       />
     ) : mode === 'chained' ? (
       <ChainedCheckboxes
@@ -80,6 +95,14 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
         disabled={disabled}
         onChange={onChange}
         option2value={option2value}
+        itemRender={
+          optionItemRender
+            ? (item: Option, states: ItemRenderStates) =>
+                optionItemRender(item, states, {
+                  panel: 'result'
+                })
+            : undefined
+        }
       />
     ) : (
       <ListCheckboxes
@@ -90,6 +113,14 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
         disabled={disabled}
         onChange={onChange}
         option2value={option2value}
+        itemRender={
+          optionItemRender
+            ? (item: Option, states: ItemRenderStates) =>
+                optionItemRender(item, states, {
+                  panel: 'result'
+                })
+            : undefined
+        }
       />
     );
   }
@@ -107,7 +138,8 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
       option2value,
       onDeferLoad,
       cellRender,
-      translate: __
+      translate: __,
+      optionItemRender
     } = this.props;
 
     if (!Array.isArray(options) || !options.length) {
@@ -171,6 +203,15 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
                     onChange={onChange}
                     option2value={option2value}
                     onDeferLoad={onDeferLoad}
+                    itemRender={
+                      optionItemRender
+                        ? (item: Option, states: ItemRenderStates) =>
+                            optionItemRender(item, states, {
+                              panel: 'tab',
+                              tag: option
+                            })
+                        : undefined
+                    }
                   />
                 ) : option.selectMode === 'chained' ? (
                   <ChainedCheckboxes
@@ -182,6 +223,15 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
                     option2value={option2value}
                     onDeferLoad={onDeferLoad}
                     defaultSelectedIndex={option.defaultSelectedIndex}
+                    itemRender={
+                      optionItemRender
+                        ? (item: Option, states: ItemRenderStates) =>
+                            optionItemRender(item, states, {
+                              panel: 'tab',
+                              tag: option
+                            })
+                        : undefined
+                    }
                   />
                 ) : option.selectMode === 'associated' ? (
                   <AssociatedCheckboxes
@@ -195,6 +245,15 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
                     leftMode={option.leftMode}
                     leftOptions={option.leftOptions}
                     leftDefaultValue={option.leftDefaultValue}
+                    itemRender={
+                      optionItemRender
+                        ? (item: Option, states: ItemRenderStates) =>
+                            optionItemRender(item, states, {
+                              panel: 'tab',
+                              tag: option
+                            })
+                        : undefined
+                    }
                   />
                 ) : (
                   <ListCheckboxes
@@ -205,6 +264,15 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
                     onChange={onChange}
                     option2value={option2value}
                     onDeferLoad={onDeferLoad}
+                    itemRender={
+                      optionItemRender
+                        ? (item: Option, states: ItemRenderStates) =>
+                            optionItemRender(item, states, {
+                              panel: 'tab',
+                              tag: option
+                            })
+                        : undefined
+                    }
                   />
                 )}
               </Tab>
@@ -214,12 +282,13 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
   }
 
   render() {
-    const {className, classnames: cx} = this.props;
+    const {className, classnames: cx, optionItemRender, ...reset} = this.props;
 
     return (
       <Transfer
-        {...this.props}
+        {...reset}
         statistics={false}
+        classnames={cx}
         className={cx('TabsTransfer', className)}
         selectRender={this.renderSelect}
       />

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,31 @@
+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) => <TimelineItem {...item} />)}
+    </div>)
+}
+
+export default themeable(Timeline);

package/src/components/TimelineItem.tsx

@@ -0,0 +1,107 @@
+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 {}
+
+export function TimelineItem(props: TimelineItem) {
+  const {
+    time,
+    title,
+    detail,
+    detailCollapsedText,
+    detailExpandedText,
+    color,
+    icon,
+    classnames: cx,
+    translate: __,
+  } = 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')}>
+      <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

@@ -88,13 +88,7 @@ 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')}

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,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">