amis 1.5.7 → 1.5.8-beta.2

package/src/components/PickerContainer.tsx

@@ -19,6 +19,8 @@ export interface PickerContainerProps extends ThemeProps, LocaleProps {
     onClose: () => void;
     value: any;
     onChange: (value: any) => void;
+    setState: (state: any) => void;
+    [propName: string]: any;
   }) => JSX.Element;
   value?: any;
   onConfirm?: (value?: any) => void;
@@ -83,6 +85,15 @@ export class PickerContainer extends React.Component<
     this.close(undefined, () => onConfirm?.(this.state.value));
   }
 
+  @autobind
+  updateState(state: any = {}) {
+    const {isOpened, ...rest} = state;
+    this.setState({
+      ...this.state,
+      ...rest
+    });
+  }
+
   render() {
     const {
       children,
@@ -112,8 +123,9 @@ export class PickerContainer extends React.Component<
           ) : null}
           <Modal.Body>
             {popOverRender({
+              ...(this.state as any),
+              setState: this.updateState,
               onClose: this.close,
-              value: this.state.value,
               onChange: this.handleChange
             })}
           </Modal.Body>

package/src/components/PopUp.tsx

@@ -13,8 +13,7 @@ import Transition, {
   ENTERING
 } from 'react-transition-group/Transition';
 import Portal from 'react-overlays/Portal';
-import { Icon } from './icons';
-
+import {Icon} from './icons';
 
 export interface PopUpPorps {
   className?: string;
@@ -30,6 +29,7 @@ export interface PopUpPorps {
   container?: any;
   hideClose?: boolean;
   placement?: 'left' | 'center' | 'right';
+  header?: JSX.Element;
 }
 
 const fadeStyles: {
@@ -46,12 +46,10 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
     overlay: true,
     isShow: false,
     container: document.body,
-    hideClose: false,
+    hideClose: false
   };
 
-  componentDidMount() {
-
-  }
+  componentDidMount() {}
   handleClick(e: React.MouseEvent) {
     e.stopPropagation();
   }
@@ -68,65 +66,52 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
       isShow,
       container,
       hideClose,
-      placement='center',
+      header,
+      placement = 'center',
       ...rest
     } = this.props;
 
     const outerStyle: any = {
-      ...style,
+      ...style
     };
     delete outerStyle.top;
     return (
       <Portal container={container}>
-        <Transition
-          mountOnEnter
-          unmountOnExit
-          in={isShow}
-          timeout={500}
-          appear
-        >
+        <Transition mountOnEnter unmountOnExit in={isShow} timeout={500} appear>
           {(status: string) => {
-              return (
-                <div
-                  className={cx(
-                    `${ns}PopUp`,
-                    className,
-                    fadeStyles[status]
-                  )}
-                  style={outerStyle}
-                  {...rest}
-                  onClick={this.handleClick}
-                >
-                  {overlay && (
-                    <div className={`${ns}PopUp-overlay`} onClick={onHide}/>
-                  )}
-                  <div className={cx(
-                    `${ns}PopUp-inner`
+            return (
+              <div
+                className={cx(`${ns}PopUp`, className, fadeStyles[status])}
+                style={outerStyle}
+                {...rest}
+                onClick={this.handleClick}
+              >
+                {overlay && (
+                  <div className={`${ns}PopUp-overlay`} onClick={onHide} />
+                )}
+                <div className={cx(`${ns}PopUp-inner`)}>
+                  {!hideClose && (
+                    <div className={cx(`${ns}PopUp-closeWrap`)}>
+                      {header}
+                      <Icon
+                        icon="close"
+                        className={cx('icon', `${ns}PopUp-close`)}
+                        onClick={onHide}
+                      />
+                    </div>
                   )}
+                  <div
+                    className={cx(`${ns}PopUp-content`, `justify-${placement}`)}
                   >
-                    {
-                      !hideClose && (
-                        <div className={cx(`${ns}PopUp-closeWrap`, 'text-right')}>
-                          <Icon
-                            icon="close"
-                          className={cx('icon', `${ns}PopUp-close`)}
-                            onClick={onHide}
-                          />
-                        </div>
-                      )
-                    }
-                    <div
-                      className={cx(`${ns}PopUp-content`, `justify-${placement}`)}
-                    >
-                      {children}
-                    </div>
+                    {children}
                   </div>
                 </div>
-              )
+              </div>
+            );
           }}
         </Transition>
       </Portal>
-    )
+    );
   }
 }
 

package/src/components/ResultBox.tsx

@@ -6,6 +6,7 @@ import {Icon} from './icons';
 import Input from './Input';
 import {autobind, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
+import isPlainObject = require('lodash/isPlainObject');
 
 export interface ResultBoxProps
   extends ThemeProps,
@@ -147,7 +148,9 @@ export class ResultBox extends React.Component<ResultBoxProps> {
             </div>
           ))
         ) : result && !Array.isArray(result) ? (
-          <span className={cx('ResultBox-singleValue')}>{result}</span>
+          <span className={cx('ResultBox-singleValue')}>
+            {isPlainObject(result) ? itemRender(result) : result}
+          </span>
         ) : allowInput && !disabled ? null : (
           <span className={cx('ResultBox-placeholder')}>
             {__(placeholder || 'placeholder.noData')}

package/src/components/ResultList.tsx

@@ -13,21 +13,28 @@ import {LocaleProps, localeable} from '../locale';
 export interface ResultListProps extends ThemeProps, LocaleProps {
   className?: string;
   value?: Array<Option>;
-  onChange?: (value: Array<Option>) => void;
+  onChange?: (value: Array<Option>, optionModified?: boolean) => void;
   sortable?: boolean;
   disabled?: boolean;
   title?: string;
   placeholder: string;
-  itemRender: (option: Option) => JSX.Element;
+  itemRender: (option: Option, states: ItemRenderStates) => JSX.Element;
   itemClassName?: string;
 }
 
+export interface ItemRenderStates {
+  index: number;
+  disabled?: boolean;
+  onChange: (value: any, name: string) => void;
+}
+
 export class ResultList extends React.Component<ResultListProps> {
+  static itemRender(option: any) {
+    return <span>{`${option.scopeLabel || ''}${option.label}`}</span>;
+  }
   static defaultProps: Pick<ResultListProps, 'placeholder' | 'itemRender'> = {
     placeholder: 'placeholder.selectData',
-    itemRender: (option: any) => (
-      <span>{`${option.scopeLabel || ''}${option.label}`}</span>
-    )
+    itemRender: ResultList.itemRender
   };
 
   id = guid();
@@ -114,6 +121,23 @@ export class ResultList extends React.Component<ResultListProps> {
     delete this.sortable;
   }
 
+  handleValueChange(index: number, value: any, name: string) {
+    if (typeof name !== 'string') {
+      return;
+    }
+    const {value: list, onChange} = this.props;
+
+    const result = Array.isArray(list) ? list.concat() : [];
+    if (!result[index]) {
+      return;
+    }
+    result.splice(index, 1, {
+      ...result[index],
+      [name]: value
+    });
+    onChange?.(result, true);
+  }
+
   render() {
     const {
       classnames: cx,
@@ -150,7 +174,13 @@ export class ResultList extends React.Component<ResultListProps> {
                   />
                 ) : null}
 
-                <label>{itemRender(option)}</label>
+                <label>
+                  {itemRender(option, {
+                    index,
+                    disabled,
+                    onChange: this.handleValueChange.bind(this, index)
+                  })}
+                </label>
 
                 {!disabled ? (
                   <a

package/src/components/Select.tsx

@@ -926,7 +926,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     const menu = mobileUI ? (
       <Picker
         className={cx('PickerColumns-column', mobileClassName)}
-        labelField='label'
+        labelField="label"
         value={value[0]}
         translate={this.props.translate}
         locale={this.props.locale}

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) => {