amis 1.9.1-beta.21 → 1.9.1-beta.24

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

package/src/components/PickerContainer.tsx

@@ -11,7 +11,6 @@ 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;
@@ -132,8 +131,7 @@ export class PickerContainer extends React.Component<
       showTitle,
       headerClassName,
       translate: __,
-      size,
-      showFooter
+      size
     } = this.props;
     return (
       <>
@@ -160,18 +158,15 @@ export class PickerContainer extends React.Component<
               ref: this.bodyRef,
               setState: this.updateState,
               onClose: this.close,
-              onChange: this.handleChange,
-              onConfirm: this.confirm
+              onChange: this.handleChange
             })}
           </Modal.Body>
-          {showFooter ?? true ? (
-            <Modal.Footer>
-              <Button onClick={this.close}>{__('cancel')}</Button>
-              <Button onClick={this.confirm} level="primary">
-                {__('confirm')}
-              </Button>
-            </Modal.Footer>
-          ) : null}
+          <Modal.Footer>
+            <Button onClick={this.close}>{__('cancel')}</Button>
+            <Button onClick={this.confirm} level="primary">
+              {__('confirm')}
+            </Button>
+          </Modal.Footer>
         </Modal>
       </>
     );

package/src/components/ResultBox.tsx

@@ -215,6 +215,8 @@ export class ResultBox extends React.Component<ResultBoxProps> {
     } = this.props;
     const isFocused = this.state.isFocused;
     const mobileUI = useMobileUI && isMobile();
+    /** 不需要透传给Input的属性 */
+    const omitPropsList = ['maxTagCount', 'overflowTagPopover'];
 
     return (
       <div
@@ -248,7 +250,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
 
         {allowInput && !disabled ? (
           <Input
-            {...rest}
+            {...omit(rest, omitPropsList)}
             onKeyPress={onKeyPress}
             ref={this.inputRef}
             value={value || ''}

package/src/components/ResultList.tsx

@@ -4,16 +4,19 @@
 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 {
+export interface ResultListProps
+  extends ThemeProps,
+    LocaleProps,
+    BaseSelectionProps {
   className?: string;
   value?: Array<Option>;
   onChange?: (value: Array<Option>, optionModified?: boolean) => void;
@@ -23,9 +26,23 @@ export interface ResultListProps extends ThemeProps, LocaleProps {
   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 {
@@ -42,11 +59,15 @@ 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
   };
@@ -151,60 +172,43 @@ 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(e: React.MouseEvent<HTMLElement>, option: Option) {
-    const {
-      value,
-      onChange,
-      disabled,
-      searchable,
-      valueField = 'value'
-    } = this.props;
+  handleCloseItem(option: Option) {
+    const {value, onChange, option2value, options, disabled} = this.props;
 
     if (disabled || option.disabled) {
       return;
     }
 
-    const {searchResult} = this.state;
-    // 结果搜索
-    if (searchable && searchResult) {
-      // 删除普通值
-      const valueArray = cloneDeep(value) || [];
-      const idx = valueArray.findIndex(
-        (item: Option) => item[valueField] === option[valueField]
-      );
-      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;
+    // 删除普通值
+    let valueArray = BaseSelection.value2array(value, options, option2value);
 
-      if (!Array.isArray(value)) {
-        return;
-      }
+    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 newValue = value.concat();
-      newValue.splice(index, 1);
-      onChange?.(newValue);
+    const {searchResult} = this.state;
+    if (searchResult) {
+      const searchArray = BaseSelection.value2array(
+        searchResult,
+        options,
+        option2value
+      );
+      const searchIdx = searchArray.indexOf(option);
+      searchResult.splice(searchIdx, 1);
+      this.setState({searchResult});
     }
   }
 
@@ -252,7 +256,7 @@ export class ResultList extends React.Component<
                     className={cx('Selections-delBtn')}
                     data-index={index}
                     onClick={(e: React.MouseEvent<HTMLElement>) =>
-                      this.handleCloseItem(e, option)
+                      this.handleCloseItem(option)
                     }
                   >
                     <Icon icon="close" className="icon" />
@@ -261,9 +265,8 @@ 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/Select.tsx

@@ -7,6 +7,7 @@
 
 import {uncontrollable} from 'uncontrollable';
 import React from 'react';
+import merge from 'lodash/merge';
 import isInteger from 'lodash/isInteger';
 import omit from 'lodash/omit';
 import VirtualList from './virtual-list';
@@ -411,7 +412,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       inputValue: '',
       highlightedIndex: -1,
       selection: value2array(props.value, props),
-      itemHeight: 35,
+      itemHeight: 32 /** Select选项高度保持一致 */,
       pickerSelectItem: ''
     };
   }
@@ -726,7 +727,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
   @autobind
   menuItemRef(ref: any) {
-    ref && this.setState({itemHeight: ref.offsetHeight});
+    if (ref && typeof ref.offsetHeight === 'number' && ref > 0) {
+      this.setState({itemHeight: ref.offsetHeight});
+    }
   }
 
   renderValue({inputValue, isOpen}: ControllerStateAndHelpers<any>) {
@@ -944,7 +947,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       hideSelected,
       renderMenu,
       mobileClassName,
-      virtualThreshold = 200,
+      virtualThreshold = 100,
       useMobileUI = false
     } = this.props;
     const {selection} = this.state;
@@ -958,7 +961,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
           })
         : options.concat()
     ).filter((option: Option) => !option.hidden && option.visible !== false);
-
+    const enableVirtualRender =
+      filtedOptions.length && filtedOptions.length > virtualThreshold;
     const selectionValues = selection.map(select => select[valueField]);
     if (multiple && checkAll) {
       const optionsValues = (checkAllBySearch ? filtedOptions : options).map(
@@ -998,7 +1002,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
             item,
             disabled: item.disabled
           })}
-          style={style}
+          style={merge(style, enableVirtualRender ? {width: '100%'} : {})}
           className={cx(`Select-option`, {
             'is-disabled': item.disabled,
             'is-highlight': highlightedIndex === index,
@@ -1076,7 +1080,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
               {item.tip}
             </Checkbox>
           ) : (
-            <span>
+            <span
+              className={cx('Select-option-content')}
+              title={
+                typeof item[labelField] === 'string' ? item[labelField] : ''
+              }
+            >
               {item.disabled
                 ? item[labelField]
                 : highlight(
@@ -1100,8 +1109,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       <div
         ref={this.menu}
         className={cx('Select-menu', {
-          'Select--longlist':
-            filtedOptions.length && filtedOptions.length > virtualThreshold,
+          'Select--longlist': enableVirtualRender,
           'is-mobile': mobileUI
         })}
       >

package/src/components/Selection.tsx

@@ -33,7 +33,6 @@ export interface BaseSelectionProps extends ThemeProps, LocaleProps {
   itemRender: (option: Option, states: ItemRenderStates) => JSX.Element;
   disabled?: boolean;
   onClick?: (e: React.MouseEvent) => void;
-  placeholderRender?: (props: any) => JSX.Element | null;
 }
 
 export interface ItemRenderStates {

package/src/components/TabsTransfer.tsx

@@ -45,8 +45,8 @@ export interface TabsTransferProps
     colIndex: number,
     rowIndex: number
   ) => JSX.Element;
-  onTabChange?: (key: number) => void;
-  activeKey?: number
+  onTabChange: (key: number) => void;
+  activeKey: number
 }
 
 export interface TabsTransferState {

package/src/components/Transfer.tsx

@@ -664,6 +664,10 @@ export class Transfer<
         onChange={onChange}
         placeholder={placeholder}
         itemRender={resultItemRender}
+        columns={columns!}
+        options={options || []}
+        option2value={option2value}
+        cellRender={cellRender}
         searchable={searchable}
         onSearch={onResultSearch}
       />

package/src/components/TreeSelection.tsx

@@ -282,7 +282,6 @@ export class TreeSelection extends BaseSelection<
       placeholder,
       classnames: cx,
       option2value,
-      placeholderRender,
       translate: __
     } = this.props;
 
@@ -299,7 +298,7 @@ export class TreeSelection extends BaseSelection<
           body
         ) : (
           <div className={cx('TreeSelection-placeholder')}>
-            {placeholderRender?.(this.props) ?? __(placeholder)}
+            {__(placeholder)}
           </div>
         )}
       </div>

package/src/components/formula/Editor.tsx

@@ -13,13 +13,12 @@ import CodeMirrorEditor from '../CodeMirror';
 import {autobind, eachTree} from '../../utils/helper';
 import {themeable, ThemeProps} from '../../theme';
 import {localeable, LocaleProps} from '../../locale';
-import {toast} from '../Toast';
 
 export interface VariableItem {
   label: string;
   value?: string;
   children?: Array<VariableItem>;
-  type?: string;
+  type: '';
   tag?: string;
   selectMode?: 'tree' | 'tabs';
 }
@@ -56,6 +55,11 @@ export interface FormulaEditorProps extends ThemeProps, LocaleProps {
    */
   variableMode?: 'tabs' | 'tree';
 
+  /**
+   * 只展示变量，不需要其他面板
+   */
+  onlyVariable?: boolean;
+
   /**
    * 函数集合，默认不需要传，即  amis-formula 里面那个函数
    * 如果有扩充，则需要传。
@@ -70,11 +74,6 @@ export interface FormulaEditorProps extends ThemeProps, LocaleProps {
   variableClassName?: string;
 
   functionClassName?: string;
-
-  /**
-   * 当前输入项字段 name: 用于避免循环绑定自身导致无限渲染
-   */
-  selfVariableName?: string;
 }
 
 export interface FunctionsProps {
@@ -227,11 +226,17 @@ export class FormulaEditor extends React.Component<
 
   @autobind
   handleVariableSelect(item: VariableItem) {
-    const {evalMode, selfVariableName} = this.props;
-
-    if (item && item.label && selfVariableName === item.label) {
-      toast.warning('不能使用当前变量[self]，避免循环引用。');
-      return;
+    const {onlyVariable, evalMode} = this.props;
+
+    // 只展示变量时，选择即提交
+    if (onlyVariable) {
+      const onChange = this.props.onChange;
+      const value = item.value
+        ? evalMode
+          ? item.value
+          : '${' + item.value + '}'
+        : '';
+      return onChange?.(value);
     }
 
     this.editorPlugin?.insertContent(
@@ -261,12 +266,12 @@ export class FormulaEditor extends React.Component<
       value,
       functions,
       variableMode,
+      onlyVariable,
       translate: __,
       classnames: cx,
       variableClassName,
       functionClassName,
-      classPrefix,
-      selfVariableName
+      classPrefix
     } = this.props;
     const {focused} = this.state;
     const customFunctions = Array.isArray(functions) ? functions : [];
@@ -281,23 +286,30 @@ export class FormulaEditor extends React.Component<
           'is-focused': focused
         })}
       >
-        <section className={cx(`FormulaEditor-content`)}>
-          <header className={cx(`FormulaEditor-header`)}>
-            {__(header || 'FormulaEditor.title')}
-          </header>
-
-          <CodeMirrorEditor
-            className={cx('FormulaEditor-editor')}
-            value={value}
-            onChange={this.handleOnChange}
-            editorFactory={this.editorFactory}
-            editorDidMount={this.handleEditorMounted}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-          />
-        </section>
-
-        <section className={cx('FormulaEditor-settings')}>
+        {onlyVariable ? null : (
+          <section className={cx(`FormulaEditor-content`)}>
+            <header className={cx(`FormulaEditor-header`)}>
+              {__(header || 'FormulaEditor.title')}
+            </header>
+
+            <CodeMirrorEditor
+              className={cx('FormulaEditor-editor')}
+              value={value}
+              onChange={this.handleOnChange}
+              editorFactory={this.editorFactory}
+              editorDidMount={this.handleEditorMounted}
+              onFocus={this.handleFocus}
+              onBlur={this.handleBlur}
+            />
+          </section>
+        )}
+
+        <section
+          className={cx(
+            'FormulaEditor-settings',
+            onlyVariable ? 'only-variable' : ''
+          )}
+        >
           <div className={cx('FormulaEditor-panel')}>
             {variableMode !== 'tabs' ? (
               <div className={cx('FormulaEditor-panel-header')}>
@@ -320,17 +332,18 @@ export class FormulaEditor extends React.Component<
                 selectMode={variableMode}
                 data={variables!}
                 onSelect={this.handleVariableSelect}
-                selfVariableName={selfVariableName}
               />
             </div>
           </div>
 
-          <FuncList
-            className={functionClassName}
-            title={__('FormulaEditor.function')}
-            data={functionList}
-            onSelect={this.handleFunctionSelect}
-          />
+          {onlyVariable ? null : (
+            <FuncList
+              className={functionClassName}
+              title={__('FormulaEditor.function')}
+              data={functionList}
+              onSelect={this.handleFunctionSelect}
+            />
+          )}
         </section>
       </div>
     );

package/src/components/formula/Picker.tsx

@@ -43,6 +43,11 @@ export interface FormulaPickerProps extends FormulaEditorProps {
    */
   borderMode?: 'full' | 'half' | 'none';
 
+  /**
+   * 只展示变量，不需要其他面板
+   */
+  onlyVariable?: boolean;
+
   /**
    * 按钮Label，inputMode为button时生效
    */
@@ -133,7 +138,8 @@ export class FormulaPicker extends React.Component<
   }
 
   static defaultProps = {
-    evalMode: true
+    evalMode: true,
+    onlyVariable: false
   };
 
   state: FormulaPickerState = {
@@ -182,6 +188,11 @@ export class FormulaPicker extends React.Component<
 
   @autobind
   handleEditorChange(value: string) {
+    const {onlyVariable} = this.props;
+    if (onlyVariable) {
+      return this.confirm(value);
+    }
+
     this.setState({
       editorValue: value,
       isError: false
@@ -285,6 +296,7 @@ export class FormulaPicker extends React.Component<
       functions,
       children,
       variableMode,
+      onlyVariable,
       ...rest
     } = this.props;
     const {isOpened, value, editorValue, isError} = this.state;
@@ -394,7 +406,10 @@ export class FormulaPicker extends React.Component<
                   className={cx(`FormulaPicker-toggler`)}
                   onClick={this.handleClick}
                 >
-                  <Icon icon="function" className="icon" />
+                  <Icon
+                    icon={onlyVariable ? 'ellipsis-v' : 'function'}
+                    className="icon"
+                  />
                 </a>
               </>
             )}
@@ -415,9 +430,9 @@ export class FormulaPicker extends React.Component<
               variables={this.state.variables ?? variables}
               functions={this.state.functions ?? functions}
               variableMode={this.state.variableMode ?? variableMode}
+              onlyVariable={onlyVariable}
               value={editorValue}
               onChange={this.handleEditorChange}
-              selfVariableName={this.props.selfVariableName}
             />
           </Modal.Body>
           <Modal.Footer>
@@ -428,10 +443,14 @@ export class FormulaPicker extends React.Component<
                 </span>
               </div>
             ) : null}
-            <Button onClick={this.close}>{__('cancel')}</Button>
-            <Button onClick={this.handleEditorConfirm} level="primary">
-              {__('confirm')}
-            </Button>
+            {onlyVariable ? null : (
+              <>
+                <Button onClick={this.close}>{__('cancel')}</Button>
+                <Button onClick={this.handleEditorConfirm} level="primary">
+                  {__('confirm')}
+                </Button>
+              </>
+            )}
           </Modal.Footer>
         </Modal>
       </>