amis 1.5.6-beta.5 → 1.6.0

package/src/components/Steps.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {themeable, ThemeProps} from '../theme';
 import {Icon} from './icons';
 import {BaseSchema} from '../Schema';
-import { isMobile } from '../utils/helper';
+import {isMobile} from '../utils/helper';
 
 export enum StepStatus {
   wait = 'wait',
@@ -63,7 +63,7 @@ export interface StepsSchema extends BaseSchema {
    */
   name?: string;
 
-  status: StepStatus
+  status: StepStatus;
 
   /**
    * 展示模式
@@ -75,9 +75,11 @@ export interface StepsProps extends ThemeProps {
   steps: StepSchema[];
   className: string;
   current: number;
-  status?: StepStatus | {
-    [propName: string]: StepStatus;
-  };
+  status?:
+    | StepStatus
+    | {
+        [propName: string]: StepStatus;
+      };
   mode?: 'horizontal' | 'vertical';
   useMobileUI?: boolean;
 }
@@ -127,7 +129,14 @@ export function Steps(props: StepsProps) {
 
   const mobileUI = useMobileUI && isMobile();
   return (
-    <ul className={cx('Steps', `Steps--${mode}`, mobileUI ? 'Steps-mobile' : '', className)}>
+    <ul
+      className={cx(
+        'Steps',
+        `Steps--${mode}`,
+        mobileUI ? 'Steps-mobile' : '',
+        className
+      )}
+    >
       {stepsRow.map((step, i) => {
         const {stepStatus, icon} = getStepStatus(step, i);
 
@@ -137,8 +146,12 @@ export function Steps(props: StepsProps) {
             className={cx('StepsItem', `is-${stepStatus}`, step.className)}
           >
             <div className={cx('StepsItem-container')}>
-              <div className={cx('StepsItem-containerIcon',
-                      i < current && 'is-success')}>
+              <div
+                className={cx(
+                  'StepsItem-containerIcon',
+                  i < current && 'is-success'
+                )}
+              >
                 <span className={cx('StepsItem-icon')}>
                   {icon ? <Icon icon={icon} className="icon" /> : i + 1}
                 </span>
@@ -166,7 +179,7 @@ export function Steps(props: StepsProps) {
         );
       })}
     </ul>
-  )
+  );
 }
 
-export default themeable(Steps);
+export default themeable(Steps);

package/src/components/TableSelection.tsx

@@ -153,50 +153,7 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
   }
 
   render() {
-    const {
-      value,
-      options,
-      className,
-      labelClassName,
-      disabled,
-      classnames: cx,
-      option2value,
-      itemClassName,
-      itemRender,
-      multiple
-    } = this.props;
-
-    let valueArray = BaseSelection.value2array(value, options, option2value);
-    let body: Array<React.ReactNode> = [];
-
-    if (Array.isArray(options) && options.length) {
-      body = options.map((option, key) => (
-        <div
-          key={key}
-          className={cx(
-            'TableSelection-item',
-            itemClassName,
-            option.className,
-            disabled || option.disabled ? 'is-disabled' : ''
-          )}
-          onClick={() => this.toggleOption(option)}
-        >
-          <div className={cx('TableSelection-itemLabel')}>
-            {itemRender(option)}
-          </div>
-
-          {multiple ? (
-            <Checkbox
-              size="sm"
-              checked={!!~valueArray.indexOf(option)}
-              disabled={disabled || option.disabled}
-              labelClassName={labelClassName}
-              description={option.description}
-            />
-          ) : null}
-        </div>
-      ));
-    }
+    const {className, classnames: cx} = this.props;
 
     return (
       <div className={cx('TableSelection', className)}>

package/src/components/Tabs.tsx

@@ -96,7 +96,7 @@ export interface TabsProps extends ThemeProps {
   tabs?: Array<TabProps>;
   tabRender?: (tab: TabProps, props?: TabsProps) => JSX.Element;
   toolbar?: React.ReactNode;
-  scrollable?: boolean // 是否支持溢出滚动
+  scrollable?: boolean; // 是否支持溢出滚动
 }
 
 export class Tabs extends React.Component<TabsProps, any> {
@@ -107,23 +107,25 @@ export class Tabs extends React.Component<TabsProps, any> {
 
   static Tab = Tab;
   navMain = React.createRef<HTMLDivElement>();
-  scroll:boolean = false;
+  scroll: boolean = false;
 
   checkArrowStatus = debounce(
     () => {
-      const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current
-        || {
-          scrollLeft: 0,
-          scrollWidth: 0,
-          clientWidth: 0
-        }
+      const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current || {
+        scrollLeft: 0,
+        scrollWidth: 0,
+        clientWidth: 0
+      };
       const {arrowRightDisabled, arrowLeftDisabled} = this.state;
       if (scrollLeft === 0 && !arrowLeftDisabled) {
         this.setState({
           arrowRightDisabled: false,
           arrowLeftDisabled: true
         });
-      } else if (scrollWidth === scrollLeft + clientWidth && !arrowRightDisabled) {
+      } else if (
+        scrollWidth === scrollLeft + clientWidth &&
+        !arrowRightDisabled
+      ) {
         this.setState({
           arrowRightDisabled: true,
           arrowLeftDisabled: false
@@ -132,7 +134,10 @@ export class Tabs extends React.Component<TabsProps, any> {
         this.setState({
           arrowLeftDisabled: false
         });
-      } else if (scrollWidth !== scrollLeft + clientWidth && arrowRightDisabled) {
+      } else if (
+        scrollWidth !== scrollLeft + clientWidth &&
+        arrowRightDisabled
+      ) {
         this.setState({
           arrowRightDisabled: false
         });
@@ -143,21 +148,23 @@ export class Tabs extends React.Component<TabsProps, any> {
       trailing: true,
       leading: false
     }
-  )
+  );
 
   constructor(props: TabsProps) {
     super(props);
     this.state = {
       isOverflow: false,
       arrowLeftDisabled: false,
-      arrowRightDisabled: false,
+      arrowRightDisabled: false
     };
   }
 
   componentDidMount() {
     this.computedWidth();
     if (this.navMain) {
-      this.navMain.current?.addEventListener('wheel', this.handleWheel, {passive: false});
+      this.navMain.current?.addEventListener('wheel', this.handleWheel, {
+        passive: false
+      });
       this.checkArrowStatus();
     }
   }
@@ -207,7 +214,9 @@ export class Tabs extends React.Component<TabsProps, any> {
     }
     const {activeKey, children} = this.props;
     const currentKey = key !== undefined ? key : activeKey;
-    const currentIndex = (children as any[])?.findIndex((item: any) => item.props.eventKey === currentKey);
+    const currentIndex = (children as any[])?.findIndex(
+      (item: any) => item.props.eventKey === currentKey
+    );
     const li = this.navMain.current?.children[0]?.children || [];
     const currentLi = li[currentIndex] as HTMLElement;
     const liOffsetLeft = currentLi?.offsetLeft - 20;
@@ -241,12 +250,11 @@ export class Tabs extends React.Component<TabsProps, any> {
   }
 
   handleArrow(type: 'left' | 'right') {
-    const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current
-      || {
-        scrollLeft: 0,
-        scrollWidth: 0,
-        clientWidth: 0
-      }
+    const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current || {
+      scrollLeft: 0,
+      scrollWidth: 0,
+      clientWidth: 0
+    };
     if (type === 'left' && scrollLeft > 0) {
       this.navMain.current?.scrollTo({
         left: 0,
@@ -369,7 +377,7 @@ export class Tabs extends React.Component<TabsProps, any> {
   }
 
   renderArrow(type: 'left' | 'right') {
-    const {mode: dMode, tabsMode,} = this.props;
+    const {mode: dMode, tabsMode} = this.props;
     const mode = tabsMode || dMode;
     if (mode === 'vertical') {
       return;
@@ -377,17 +385,18 @@ export class Tabs extends React.Component<TabsProps, any> {
     const {classnames: cx} = this.props;
     const {isOverflow, arrowLeftDisabled, arrowRightDisabled} = this.state;
     const disabled = type === 'left' ? arrowLeftDisabled : arrowRightDisabled;
-    return (isOverflow
-      ? (<div onClick={() => this.handleArrow(type)}
-          className={cx(
-            'Tabs-linksContainer-arrow',
-            'Tabs-linksContainer-arrow--' + type,
-            disabled && 'Tabs-linksContainer-arrow--disabled'
-          )}>
-          <i className={'iconfont icon-arrow-' + type} />
-        </div>)
-      : null
-    )
+    return isOverflow ? (
+      <div
+        onClick={() => this.handleArrow(type)}
+        className={cx(
+          'Tabs-linksContainer-arrow',
+          'Tabs-linksContainer-arrow--' + type,
+          disabled && 'Tabs-linksContainer-arrow--disabled'
+        )}
+      >
+        <i className={'iconfont icon-arrow-' + type} />
+      </div>
+    ) : null;
   }
 
   render() {
@@ -421,28 +430,30 @@ export class Tabs extends React.Component<TabsProps, any> {
           className
         )}
       >
-        {
-          scrollable && !['vertical', 'chrome'].includes(mode) ?
-            (<div className={cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow')}>
-              {this.renderArrow('left')}
-              <div
-                className={cx('Tabs-linksContainer-main')}
-                ref={this.navMain}
-              >
-                <ul className={cx('Tabs-links', linksClassName)} role="tablist">
-                  {children.map((tab, index) => this.renderNav(tab, index))}
-                  {additionBtns}
-                  {toolbar}
-                </ul>
-              </div>
-              {this.renderArrow('right')}
-            </div>)
-          : (<ul className={cx('Tabs-links', linksClassName)} role="tablist">
-              {children.map((tab, index) => this.renderNav(tab, index))}
-              {additionBtns}
-              {toolbar}
-            </ul>)
-        }
+        {scrollable && !['vertical', 'chrome'].includes(mode) ? (
+          <div
+            className={cx(
+              'Tabs-linksContainer',
+              isOverflow && 'Tabs-linksContainer--overflow'
+            )}
+          >
+            {this.renderArrow('left')}
+            <div className={cx('Tabs-linksContainer-main')} ref={this.navMain}>
+              <ul className={cx('Tabs-links', linksClassName)} role="tablist">
+                {children.map((tab, index) => this.renderNav(tab, index))}
+                {additionBtns}
+                {toolbar}
+              </ul>
+            </div>
+            {this.renderArrow('right')}
+          </div>
+        ) : (
+          <ul className={cx('Tabs-links', linksClassName)} role="tablist">
+            {children.map((tab, index) => this.renderNav(tab, index))}
+            {additionBtns}
+            {toolbar}
+          </ul>
+        )}
 
         <div className={cx('Tabs-content', contentClassName)}>
           {children.map((child, index) => {

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);