amis 1.9.1-beta.12 → 1.9.1-beta.21

package/src/components/Badge.tsx

@@ -71,7 +71,7 @@ export interface BadgeSchema extends Omit<BaseSchema, 'type'> {
 export interface BadgeProps {
   badge?: BadgeSchema;
   classnames: ClassNamesFn;
-  data: any;
+  data?: any;
 }
 
 export class Badge extends React.Component<BadgeProps, object> {

package/src/components/GroupedSelection.tsx

@@ -89,7 +89,8 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
       placeholder,
       classnames: cx,
       option2value,
-      onClick
+      onClick,
+      placeholderRender
     } = this.props;
     const __ = this.props.translate;
 
@@ -106,7 +107,7 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
           body
         ) : (
           <div className={cx('GroupedSelection-placeholder')}>
-            {__(placeholder)}
+            {placeholderRender?.(this.props) ?? __(placeholder)}
           </div>
         )}
       </div>

package/src/components/PickerContainer.tsx

@@ -11,6 +11,7 @@ import Button from './Button';
 export interface PickerContainerProps extends ThemeProps, LocaleProps {
   title?: string;
   showTitle?: boolean;
+  showFooter?: boolean;
   headerClassName?: string;
   children: (props: {
     onClick: (e: React.MouseEvent) => void;
@@ -131,7 +132,8 @@ export class PickerContainer extends React.Component<
       showTitle,
       headerClassName,
       translate: __,
-      size
+      size,
+      showFooter
     } = this.props;
     return (
       <>
@@ -158,15 +160,18 @@ export class PickerContainer extends React.Component<
               ref: this.bodyRef,
               setState: this.updateState,
               onClose: this.close,
-              onChange: this.handleChange
+              onChange: this.handleChange,
+              onConfirm: this.confirm
             })}
           </Modal.Body>
-          <Modal.Footer>
-            <Button onClick={this.close}>{__('cancel')}</Button>
-            <Button onClick={this.confirm} level="primary">
-              {__('confirm')}
-            </Button>
-          </Modal.Footer>
+          {showFooter ?? true ? (
+            <Modal.Footer>
+              <Button onClick={this.close}>{__('cancel')}</Button>
+              <Button onClick={this.confirm} level="primary">
+                {__('confirm')}
+              </Button>
+            </Modal.Footer>
+          ) : null}
         </Modal>
       </>
     );

package/src/components/ResultBox.tsx

@@ -1,11 +1,14 @@
 import {ThemeProps, themeable} from '../theme';
 import React from 'react';
+import omit from 'lodash/omit';
+import isInteger from 'lodash/isInteger';
 import {InputBoxProps} from './InputBox';
 import {uncontrollable} from 'uncontrollable';
 import {Icon} from './icons';
 import Input from './Input';
 import {autobind, isMobile, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
+import TooltipWrapper, {TooltipObject} from './TooltipWrapper';
 import isPlainObject = require('lodash/isPlainObject');
 
 export interface ResultBoxProps
@@ -22,6 +25,8 @@ export interface ResultBoxProps
   inputPlaceholder: string;
   useMobileUI?: boolean;
   hasDropDownArrow?: boolean;
+  maxTagCount?: number;
+  overflowTagPopover?: TooltipObject;
 }
 
 export class ResultBox extends React.Component<ResultBoxProps> {
@@ -94,6 +99,91 @@ export class ResultBox extends React.Component<ResultBoxProps> {
     onChange?.(e.currentTarget.value);
   }
 
+  renderMultipeTags(tags: any[]) {
+    const {
+      maxTagCount,
+      overflowTagPopover,
+      itemRender,
+      classnames: cx
+    } = this.props;
+
+    if (
+      maxTagCount != null &&
+      isInteger(Math.floor(maxTagCount)) &&
+      Math.floor(maxTagCount) >= 0 &&
+      Math.floor(maxTagCount) < tags.length
+    ) {
+      const maxVisibleCount = Math.floor(maxTagCount);
+      const tooltipProps: TooltipObject = {
+        placement: 'top',
+        trigger: 'hover',
+        showArrow: false,
+        offset: [0, -10],
+        tooltipClassName: cx(
+          'ResultBox-overflow',
+          overflowTagPopover?.tooltipClassName
+        ),
+        ...omit(overflowTagPopover, ['children', 'content', 'tooltipClassName'])
+      };
+
+      return [
+        ...tags.slice(0, maxVisibleCount),
+        {label: `+ ${tags.length - maxVisibleCount} ...`}
+      ].map((item, index) => {
+        return index === maxVisibleCount ? (
+          <TooltipWrapper
+            key={tags.length}
+            tooltip={{
+              ...tooltipProps,
+              children: () => (
+                <div className={cx('ResultBox-overflow-wrapper')}>
+                  {tags
+                    .slice(maxVisibleCount, tags.length)
+                    .map((item, index) => {
+                      const itemIndex = index + maxVisibleCount;
+
+                      return (
+                        <div className={cx('ResultBox-value')} key={itemIndex}>
+                          <span className={cx('ResultBox-valueLabel')}>
+                            {itemRender(item)}
+                          </span>
+                          <a data-index={itemIndex} onClick={this.removeItem}>
+                            <Icon icon="close" className="icon" />
+                          </a>
+                        </div>
+                      );
+                    })}
+                </div>
+              )
+            }}
+          >
+            <div className={cx('ResultBox-value')} key={index}>
+              <span className={cx('ResultBox-valueLabel')}>{item.label}</span>
+            </div>
+          </TooltipWrapper>
+        ) : (
+          <div className={cx('ResultBox-value')} key={index}>
+            <span className={cx('ResultBox-valueLabel')}>
+              {itemRender(item)}
+            </span>
+            <a data-index={index} onClick={this.removeItem}>
+              <Icon icon="close" className="icon" />
+            </a>
+          </div>
+        );
+      });
+    }
+
+    return tags.map((item, index) => (
+      <div className={cx('ResultBox-value')} key={index}>
+        <span className={cx('ResultBox-valueLabel')}>{itemRender(item)}</span>
+        <a data-index={index} onClick={this.removeItem}>
+          <Icon icon="close" className="icon" />
+        </a>
+      </div>
+    ));
+  }
+
   render() {
     const {
       className,
@@ -125,6 +215,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
     } = this.props;
     const isFocused = this.state.isFocused;
     const mobileUI = useMobileUI && isMobile();
+
     return (
       <div
         className={cx('ResultBox', className, {
@@ -144,16 +235,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
         onBlur={allowInput ? undefined : onBlur}
       >
         {Array.isArray(result) && result.length ? (
-          result.map((item, index) => (
-            <div className={cx('ResultBox-value')} key={index}>
-              <span className={cx('ResultBox-valueLabel')}>
-                {itemRender(item)}
-              </span>
-              <a data-index={index} onClick={this.removeItem}>
-                <Icon icon="close" className="icon" />
-              </a>
-            </div>
-          ))
+          this.renderMultipeTags(result)
         ) : result && !Array.isArray(result) ? (
           <span className={cx('ResultBox-singleValue')}>
             {isPlainObject(result) ? itemRender(result) : result}
@@ -174,7 +256,9 @@ export class ResultBox extends React.Component<ResultBoxProps> {
             placeholder={__(
               Array.isArray(result) && result.length
                 ? inputPlaceholder
-                : (result ? '' : placeholder)
+                : result
+                ? ''
+                : placeholder
             )}
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}

package/src/components/ResultList.tsx

@@ -4,19 +4,16 @@
 import React from 'react';
 import Sortable from 'sortablejs';
 import {findDOMNode} from 'react-dom';
+import {cloneDeep} from 'lodash';
 
 import {Option, Options} from './Select';
 import {ThemeProps, themeable} from '../theme';
 import {Icon} from './icons';
 import {autobind, guid} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
-import {BaseSelection, BaseSelectionProps} from './Selection';
 import TransferSearch from './TransferSearch';
 
-export interface ResultListProps
-  extends ThemeProps,
-    LocaleProps,
-    BaseSelectionProps {
+export interface ResultListProps extends ThemeProps, LocaleProps {
   className?: string;
   value?: Array<Option>;
   onChange?: (value: Array<Option>, optionModified?: boolean) => void;
@@ -26,23 +23,9 @@ export interface ResultListProps
   placeholder: string;
   itemRender: (option: Option, states: ItemRenderStates) => JSX.Element;
   itemClassName?: string;
-  columns: Array<{
-    name: string;
-    label: string;
-    [propName: string]: any;
-  }>;
-  cellRender?: (
-    column: {
-      name: string;
-      label: string;
-      [propName: string]: any;
-    },
-    option: Option,
-    colIndex: number,
-    rowIndex: number
-  ) => JSX.Element;
   searchable?: boolean;
   onSearch?: Function;
+  valueField?: string;
 }
 
 export interface ItemRenderStates {
@@ -59,15 +42,11 @@ export class ResultList extends React.Component<
   ResultListProps,
   ResultListState
 > {
-
   static itemRender(option: any) {
     return <span>{`${option.scopeLabel || ''}${option.label}`}</span>;
   }
 
-  static defaultProps: Pick<
-    ResultListProps,
-    'placeholder' | 'itemRender'
-  > = {
+  static defaultProps: Pick<ResultListProps, 'placeholder' | 'itemRender'> = {
     placeholder: 'placeholder.selectData',
     itemRender: ResultList.itemRender
   };
@@ -172,43 +151,60 @@ export class ResultList extends React.Component<
     const searchResult = (value || []).filter(
       item => onSearch && onSearch(inputValue, item)
     );
-    this.setState({searchResult})
+    this.setState({searchResult});
   }
 
   @autobind
   clearSearch() {
-    this.setState({searchResult: null})
+    this.setState({searchResult: null});
   }
 
-  // 关闭表格最后一项
+  // 删除项
   @autobind
-  handleCloseItem(option: Option) {
-    const {value, onChange, option2value, options, disabled} = this.props;
+  handleCloseItem(e: React.MouseEvent<HTMLElement>, option: Option) {
+    const {
+      value,
+      onChange,
+      disabled,
+      searchable,
+      valueField = 'value'
+    } = this.props;
 
     if (disabled || option.disabled) {
       return;
     }
 
-    // 删除普通值
-    let valueArray = BaseSelection.value2array(value, options, option2value);
-
-    let idx = valueArray.indexOf(option);
-    valueArray.splice(idx, 1);
-    let newValue: string | Array<Option> = option2value
-      ? valueArray.map(item => option2value(item))
-      : valueArray;
-    onChange && onChange(newValue);
-
     const {searchResult} = this.state;
-    if (searchResult) {
-      const searchArray = BaseSelection.value2array(
-        searchResult,
-        options,
-        option2value
+    // 结果搜索
+    if (searchable && searchResult) {
+      // 删除普通值
+      const valueArray = cloneDeep(value) || [];
+      const idx = valueArray.findIndex(
+        (item: Option) => item[valueField] === option[valueField]
       );
-      const searchIdx = searchArray.indexOf(option);
-      searchResult.splice(searchIdx, 1);
-      this.setState({searchResult});
+      if (idx > -1) {
+        valueArray.splice(idx, 1);
+        onChange && onChange(valueArray);
+      }
+      // 删除搜索结果
+      const searchIdx = parseInt(e.currentTarget.getAttribute('data-index')!, 10);
+      if (searchIdx > -1) {
+        searchResult.splice(searchIdx, 1);
+        this.setState({searchResult});
+      }
+    }
+    // 没有搜索，走旧的删除方式
+    else {
+      const index = parseInt(e.currentTarget.getAttribute('data-index')!, 10);
+      const {value, onChange} = this.props;
+
+      if (!Array.isArray(value)) {
+        return;
+      }
+
+      const newValue = value.concat();
+      newValue.splice(index, 1);
+      onChange?.(newValue);
     }
   }
 
@@ -256,7 +252,7 @@ export class ResultList extends React.Component<
                     className={cx('Selections-delBtn')}
                     data-index={index}
                     onClick={(e: React.MouseEvent<HTMLElement>) =>
-                      this.handleCloseItem(option)
+                      this.handleCloseItem(e, option)
                     }
                   >
                     <Icon icon="close" className="icon" />
@@ -265,8 +261,9 @@ export class ResultList extends React.Component<
               </div>
             ))}
           </div>
-        ) :
-        (<div className={cx('Selections-placeholder')}>{__(placeholder)}</div>)}
+        ) : (
+          <div className={cx('Selections-placeholder')}>{__(placeholder)}</div>
+        )}
       </>
     );
   }

package/src/components/ResultTableList.tsx

@@ -43,7 +43,10 @@ export interface ResultTableSelectionState {
   searchTableOptions: Options;
 }
 
-export class BaseResultTableSelection extends BaseSelection<ResultTableSelectionProps, ResultTableSelectionState> {
+export class BaseResultTableSelection extends BaseSelection<
+  ResultTableSelectionProps,
+  ResultTableSelectionState
+> {
   static defaultProps = {
     ...BaseSelection.defaultProps,
     cellRender: (
@@ -55,25 +58,21 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
       option: Option,
       colIndex: number,
       rowIndex: number
-    ) => <span>{resolveVariable(column.name, option)}</span>,
+    ) => <span>{resolveVariable(column.name, option)}</span>
   };
 
   state: ResultTableSelectionState = {
     tableOptions: [],
     searching: false,
     searchTableOptions: []
-  }
+  };
 
   static getDerivedStateFromProps(props: ResultTableSelectionProps) {
-    const {
-      options,
-      value,
-      option2value,
-    } = props;
+    const {options, value, option2value} = props;
     const valueArray = BaseSelection.value2array(value, options, option2value);
     return {
       tableOptions: valueArray
-    }
+    };
   }
 
   @autobind
@@ -117,15 +116,16 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
     }
 
     const {value, onSearch} = this.props;
-    const searchOptions = ((value || []) as Options)
-      .filter(item => onSearch?.(inputValue, item));
+    const searchOptions = ((value || []) as Options).filter(item =>
+      onSearch?.(inputValue, item)
+    );
 
     this.setState({
       searching: true,
       searchTableOptions: searchOptions
     });
   }
-  
+
   @autobind
   clearSearch() {
     this.setState({
@@ -152,9 +152,7 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
 
     return (
       <div className={cx('ResultTableList', className)}>
-        {
-          Array.isArray(value) && value.length ?
-          (
+        {Array.isArray(value) && value.length ? (
           <TableSelection
             columns={columns}
             options={!searching ? tableOptions : searchTableOptions}
@@ -163,6 +161,7 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
             option2value={option2value}
             onChange={onChange}
             multiple={false}
+            resultMode={true}
             cellRender={(
               column: {
                 name: string;
@@ -176,27 +175,28 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
               const raw = cellRender(column, option, colIndex, rowIndex);
               if (colIndex === columns.length - 1) {
                 return (
-                <>
-                  {raw}
-                  {
-                    <span
-                      className={cx('ResultTableList-close-btn')}
-                      onClick={(e: React.SyntheticEvent<HTMLElement>) => {
-                        e.stopPropagation();
-                        this.handleCloseItem(option);
-                      }}
-                    >
-                      <CloseIcon />
-                    </span>
-                  }
-                </>)
+                  <>
+                    {raw}
+                    {
+                      <span
+                        className={cx('ResultTableList-close-btn')}
+                        onClick={(e: React.SyntheticEvent<HTMLElement>) => {
+                          e.stopPropagation();
+                          this.handleCloseItem(option);
+                        }}
+                      >
+                        <CloseIcon />
+                      </span>
+                    }
+                  </>
+                );
               }
               return raw;
             }}
           />
-          )
-          : (<div className={cx('Selections-placeholder')}>{__(placeholder)}</div>)
-        }
+        ) : (
+          <div className={cx('Selections-placeholder')}>{__(placeholder)}</div>
+        )}
       </div>
     );
   }
@@ -211,7 +211,6 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
       placeholder = __('Transfer.searchKeyword')
     } = this.props;
 
-
     return (
       <div className={cx('Selections', className)}>
         {title ? <div className={cx('Selections-title')}>{title}</div> : null}