amis 1.5.6 → 1.6.1-beta.0

package/src/components/Select.tsx

@@ -37,6 +37,7 @@ import Spinner from './Spinner';
 import {Option, Options} from '../Schema';
 import {RemoteOptionsProps, withRemoteConfig} from './WithRemoteConfig';
 import Picker from './Picker';
+import PopUp from './PopUp';
 
 export {Option, Options};
 
@@ -183,7 +184,8 @@ export function normalizeOptions(
   } = {
     values: [],
     options: []
-  }
+  },
+  valueField = 'value'
 ): Options {
   if (typeof options === 'string') {
     return options.split(',').map(item => {
@@ -224,7 +226,7 @@ export function normalizeOptions(
     });
   } else if (Array.isArray(options as Options)) {
     return (options as Options).map(item => {
-      const value = item && item.value;
+      const value = item && item[valueField];
 
       const idx =
         value !== undefined && !item.children
@@ -241,7 +243,7 @@ export function normalizeOptions(
       };
 
       if (typeof option.children !== 'undefined') {
-        option.children = normalizeOptions(option.children, share);
+        option.children = normalizeOptions(option.children, share, valueField);
       } else if (value !== undefined) {
         share.values.push(value);
         share.options.push(option);
@@ -923,23 +925,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
       labelField: 'label',
       options: filtedOptions
     };
-    const menu = mobileUI ? (
-      <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}
-      />
-    ) : (
+    const menu = (
       <div
         ref={this.menu}
         className={cx('Select-menu', {
-          'Select--longlist': filtedOptions.length && filtedOptions.length > 100
+          'Select--longlist':
+            filtedOptions.length && filtedOptions.length > 100,
+          'is-mobile': mobileUI
         })}
       >
         {searchable ? (
@@ -1021,8 +1013,16 @@ export class Select extends React.Component<SelectProps, SelectState> {
         )}
       </div>
     );
-
-    return (
+    return mobileUI ? (
+      <PopUp
+        className={cx(`Select-popup`)}
+        container={popOverContainer}
+        isShow={this.state.isOpen}
+        onHide={this.close}
+      >
+        {menu}
+      </PopUp>
+    ) : (
       <Overlay
         container={popOverContainer || this.getTarget}
         target={this.getTarget}
@@ -1031,11 +1031,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       >
         <PopOver
           overlay
-          className={cx(
-            'Select-popover',
-            popoverClassName,
-            mobileUI ? 'PopOver-isMobile' : ''
-          )}
+          className={cx('Select-popover')}
           style={{
             minWidth: this.target ? this.target.offsetWidth : 'auto'
           }}
@@ -1061,13 +1057,14 @@ export class Select extends React.Component<SelectProps, SelectState> {
       labelField,
       disabled,
       checkAll,
-      borderMode
+      borderMode,
+      useMobileUI
     } = this.props;
 
     const selection = this.state.selection;
     const inputValue = this.state.inputValue;
     const resetValue = this.props.resetValue;
-
+    const mobileUI = useMobileUI && isMobile();
     return (
       <Downshift
         selectedItem={selection}
@@ -1101,6 +1098,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                   'is-opened': isOpen,
                   'is-focused': this.state.isFocused,
                   'is-disabled': disabled,
+                  'is-mobile': mobileUI,
                   [`Select--border${ucFirst(borderMode)}`]: borderMode
                 },
                 className

package/src/components/Selection.tsx

@@ -29,18 +29,30 @@ export interface BaseSelectionProps extends ThemeProps, LocaleProps {
   labelClassName?: string;
   option2value?: (option: Option) => any;
   itemClassName?: string;
-  itemRender: (option: Option) => JSX.Element;
+  itemRender: (option: Option, states: ItemRenderStates) => JSX.Element;
   disabled?: boolean;
   onClick?: (e: React.MouseEvent) => void;
 }
 
+export interface ItemRenderStates {
+  index: number;
+  multiple?: boolean;
+  checked: boolean;
+  onChange: () => void;
+  disabled?: boolean;
+}
+
 export class BaseSelection<
   T extends BaseSelectionProps = BaseSelectionProps,
   S = any
 > extends React.Component<T, S> {
+  static itemRender(option: Option, states: ItemRenderStates) {
+    return <span>{option.label}</span>;
+  }
+
   static defaultProps = {
     placeholder: 'placeholder.noOption',
-    itemRender: (option: Option) => <span>{option.label}</span>,
+    itemRender: BaseSelection.itemRender,
     multiple: true,
     clearable: false
   };
@@ -182,7 +194,13 @@ export class BaseSelection<
           labelClassName={labelClassName}
           description={option.description}
         >
-          {itemRender(option)}
+          {itemRender(option, {
+            index: key,
+            multiple: multiple,
+            checked: !!~valueArray.indexOf(option),
+            onChange: () => this.toggleOption(option),
+            disabled: disabled || option.disabled
+          })}
         </Checkbox>
       ));
     }

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}
       />