amis 1.9.1-beta.13 → 1.9.1-beta.17

package/src/components/Select.tsx

@@ -60,6 +60,8 @@ export interface OptionProps {
   disabled?: boolean;
   creatable?: boolean;
   pathSeparator?: string;
+  itemHeight?: number; // 每个选项的高度，主要用于虚拟渲染
+  virtualThreshold?: number; // 数据量多大的时候开启虚拟渲染
   hasError?: boolean;
   block?: boolean;
   onAdd?: (
@@ -382,7 +384,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
     checkAll: false,
     checkAllLabel: 'Select.checkAll',
     defaultCheckAll: false,
-    overlayPlacement: 'auto'
+    overlayPlacement: 'auto',
+    virtualThreshold: 100
   };
 
   input: HTMLInputElement;
@@ -778,10 +781,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
               })}
               onClick={this.removeItem.bind(this, index)}
             >
-              <Icon
-                icon="close"
-                className="icon"
-              />
+              <Icon icon="close" className="icon" />
             </span>
           </div>
         </TooltipWrapper>
@@ -825,6 +825,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       hideSelected,
       renderMenu,
       mobileClassName,
+      virtualThreshold = 200,
       useMobileUI = false
     } = this.props;
     const {selection} = this.state;
@@ -853,7 +854,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
       );
     }
 
-    const itemHeight = this.state.itemHeight;
+    // 用于虚拟渲染的每项高度
+    const virtualItemHeight = this.props.itemHeight || this.state.itemHeight;
 
     // 渲染单个选项
     const renderItem = ({index, style}: {index: number; style?: object}) => {
@@ -980,7 +982,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
         ref={this.menu}
         className={cx('Select-menu', {
           'Select--longlist':
-            filtedOptions.length && filtedOptions.length > 100,
+            filtedOptions.length && filtedOptions.length > virtualThreshold,
           'is-mobile': mobileUI
         })}
       >
@@ -1026,7 +1028,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
           </div>
         ) : null}
 
-        <div ref={this.menuItemRef} className={cx('Select-option invisible')}>
+        <div ref={this.menuItemRef} className={cx('Select-option hidden')}>
           {multiple ? (
             <Checkbox size="sm">Placeholder</Checkbox>
           ) : (
@@ -1042,15 +1044,15 @@ export class Select extends React.Component<SelectProps, SelectState> {
         ) : null}
 
         {filtedOptions.length ? (
-          filtedOptions.length > 100 ? ( // 超过 100 行数据才启用 virtuallist 避免滚动条问题
+          filtedOptions.length > virtualThreshold ? ( // 较多数据时才启用 virtuallist，避免滚动条问题
             <VirtualList
               height={
                 filtedOptions.length > 8
                   ? 266
-                  : filtedOptions.length * itemHeight
+                  : filtedOptions.length * virtualItemHeight
               }
               itemCount={filtedOptions.length}
-              itemSize={itemHeight}
+              itemSize={virtualItemHeight}
               renderItem={renderItem}
             />
           ) : (
@@ -1083,7 +1085,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
           overlay
           className={cx('Select-popover')}
           style={{
-            minWidth: this.target ? this.target.offsetWidth : 'auto'
+            width: this.target ? this.target.offsetWidth : 'auto'
           }}
           onHide={this.close}
         >

package/src/components/formula/Editor.tsx

@@ -55,6 +55,11 @@ export interface FormulaEditorProps extends ThemeProps, LocaleProps {
    */
   variableMode?: 'tabs' | 'tree';
 
+  /**
+   * 只展示变量，不需要其他面板
+   */
+  onlyVariable?: boolean;
+
   /**
    * 函数集合，默认不需要传，即  amis-formula 里面那个函数
    * 如果有扩充，则需要传。
@@ -221,6 +226,19 @@ export class FormulaEditor extends React.Component<
 
   @autobind
   handleVariableSelect(item: VariableItem) {
+    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(
       {
         key: item.value,
@@ -248,6 +266,7 @@ export class FormulaEditor extends React.Component<
       value,
       functions,
       variableMode,
+      onlyVariable,
       translate: __,
       classnames: cx,
       variableClassName,
@@ -267,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')}>
@@ -310,12 +336,14 @@ export class FormulaEditor extends React.Component<
             </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

@@ -17,6 +17,7 @@ import {themeable} from '../../theme';
 import {localeable} from '../../locale';
 import type {SchemaIcon} from '../../Schema';
 import {parse, Evaluator} from 'amis-formula';
+import Input from '../Input';
 
 export interface FormulaPickerProps extends FormulaEditorProps {
   // 新的属性？
@@ -35,13 +36,18 @@ export interface FormulaPickerProps extends FormulaEditorProps {
   /**
    * 控件模式
    */
-  mode?: 'button' | 'input-button';
+  mode?: 'button' | 'input-button' | 'input-group';
 
   /**
    * 边框模式，全边框，还是半边框，或者没边框。
    */
   borderMode?: 'full' | 'half' | 'none';
 
+  /**
+   * 只展示变量，不需要其他面板
+   */
+  onlyVariable?: boolean;
+
   /**
    * 按钮Label，inputMode为button时生效
    */
@@ -132,7 +138,8 @@ export class FormulaPicker extends React.Component<
   }
 
   static defaultProps = {
-    evalMode: true
+    evalMode: true,
+    onlyVariable: false
   };
 
   state: FormulaPickerState = {
@@ -173,8 +180,19 @@ export class FormulaPicker extends React.Component<
     this.setState({value}, () => this.handleConfirm());
   }
 
+  @autobind
+  handleInputGroupChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const onChange = this.props.onChange;
+    onChange && onChange(e.currentTarget.value);
+  }
+
   @autobind
   handleEditorChange(value: string) {
+    const {onlyVariable} = this.props;
+    if (onlyVariable) {
+      return this.confirm(value);
+    }
+
     this.setState({
       editorValue: value,
       isError: false
@@ -185,6 +203,10 @@ export class FormulaPicker extends React.Component<
   handleEditorConfirm() {
     const {translate: __} = this.props;
     const value = this.state.editorValue;
+    this.confirm(value);
+  }
+
+  confirm(value: string) {
     const validate = this.validate(value);
 
     if (validate === true) {
@@ -274,6 +296,7 @@ export class FormulaPicker extends React.Component<
       functions,
       children,
       variableMode,
+      onlyVariable,
       ...rest
     } = this.props;
     const {isOpened, value, editorValue, isError} = this.state;
@@ -289,8 +312,14 @@ export class FormulaPicker extends React.Component<
             setState: this.updateState
           })
         ) : (
-          <div className={cx('FormulaPicker', className)}>
-            {mode === 'button' ? (
+          <div
+            className={cx(
+              'FormulaPicker',
+              className,
+              mode === 'input-group' ? 'is-input-group' : ''
+            )}
+          >
+            {mode === 'button' && (
               <Button
                 className={cx('FormulaPicker-action', 'w-full')}
                 level={level}
@@ -319,7 +348,8 @@ export class FormulaPicker extends React.Component<
                   {__(btnLabel || 'FormulaEditor.btnLabel')}
                 </span>
               </Button>
-            ) : (
+            )}
+            {mode === 'input-button' && (
               <>
                 <ResultBox
                   className={cx(
@@ -360,6 +390,29 @@ export class FormulaPicker extends React.Component<
                 </Button>
               </>
             )}
+            {mode === 'input-group' && (
+              <>
+                <Input
+                  className={cx('FormulaPicker-input')}
+                  onChange={this.handleInputGroupChange}
+                  placeholder={allowInput ? placeholder : ''}
+                  autoComplete="off"
+                  value={value}
+                  disabled={disabled}
+                  readOnly={!allowInput}
+                />
+
+                <a
+                  className={cx(`FormulaPicker-toggler`)}
+                  onClick={this.handleClick}
+                >
+                  <Icon
+                    icon={onlyVariable ? 'ellipsis-v' : 'function'}
+                    className="icon"
+                  />
+                </a>
+              </>
+            )}
           </div>
         )}
         <Modal
@@ -377,6 +430,7 @@ 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}
             />
@@ -389,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>
       </>

package/src/locale/de-DE.ts

@@ -132,7 +132,7 @@ register('de-DE', {
   'File.retry': 'Wiederholen',
   'File.start': 'Hochladen beginnen',
   'File.upload': 'Hochladen',
-  'Image.upload':'Hochladen',
+  'Image.upload': 'Hochladen',
   'File.uploadFailed': 'Zurückgegebene Daten der Upload-API sind leer',
   'File.uploading': 'Wird hochgeladen...',
   'FormItem.autoUpdateloadFaild': 'Die Schnittstelle hat einen Fehler zurückgegeben, bitte sorgfältig prüfen',
@@ -333,5 +333,5 @@ register('de-DE', {
   'JSONSchema.description': 'Description',
   'JSONSchema.key': 'Key',
   'JSONSchema.array_items': 'Items',
-  'TimeNow': 'Jetzt',
+  'TimeNow': 'Jetzt'
 });

package/src/locale/en-US.ts

@@ -134,7 +134,7 @@ register('en-US', {
   'File.sizeLimit': 'The maximum file size is {{maxSize}} B',
   'File.start': 'Start upload',
   'File.upload': 'Upload',
-  'Image.upload':'Upload image',
+  'Image.upload': 'Upload image',
   'File.uploadFailed': 'return data of udpload api is empty',
   'File.uploading': 'Uploading',
   'FormItem.autoUpdateloadFaild': 'return data of autoUpdate api is error',
@@ -336,5 +336,5 @@ register('en-US', {
   'JSONSchema.description': 'Description',
   'JSONSchema.key': 'Key',
   'JSONSchema.array_items': 'Items',
-  'TimeNow': 'Now',
+  'TimeNow': 'Now'
 });

package/src/locale/zh-CN.ts

@@ -202,7 +202,7 @@ register('zh-CN', {
   'Select.clearAll': '移除所有',
   'Select.createLabel': '新增选项',
   'Select.placeholder': '请选择',
-  'Select.searchPromptText': '输入内容进行检索',
+  'Select.searchPromptText': '搜索',
   'sort': '排序',
   'SubForm.button': '设置',
   'SubForm.editDetail': '编辑详情',

package/src/renderers/Action.tsx

@@ -412,7 +412,8 @@ const ActionProps = [
   'copyFormat',
   'payload',
   'requireSelected',
-  'countDown'
+  'countDown',
+  'fileName'
 ];
 import {filterContents} from './Remark';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';

package/src/renderers/CRUD.tsx

@@ -670,6 +670,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             throw e;
           }
         });
+    } else if (action.actionType === 'reload') {
+      this.reload();
     } else if (
       pickerMode &&
       (action.actionType === 'confirm' || action.actionType === 'submit')

package/src/renderers/Form/InputFormula.tsx

@@ -54,7 +54,7 @@ export interface InputFormulaControlSchema extends FormBaseControl {
   /**
    * 控件模式
    */
-  inputMode?: 'button' | 'input-button';
+  inputMode?: 'button' | 'input-button' | 'input-group';
 
   /**
    * 外层input是否允许输入，否需要点击fx在弹窗中输入
@@ -94,6 +94,11 @@ export interface InputFormulaControlSchema extends FormBaseControl {
    */
   borderMode?: 'full' | 'half' | 'none';
 
+  /**
+   * 只展示变量，不需要其他面板
+   */
+  onlyVariable?: boolean;
+
   /**
    * 输入框占位符
    */
@@ -123,11 +128,12 @@ export interface InputFormulaProps
 export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
   static defaultProps: Pick<
     InputFormulaControlSchema,
-    'inputMode' | 'borderMode' | 'evalMode'
+    'inputMode' | 'borderMode' | 'evalMode' | 'onlyVariable'
   > = {
     inputMode: 'input-button',
     borderMode: 'full',
-    evalMode: true
+    evalMode: true,
+    onlyVariable: false
   };
 
   ref: any;
@@ -162,6 +168,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
       onChange,
       evalMode,
       variableMode,
+      onlyVariable,
       header,
       label,
       value,
@@ -206,6 +213,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
         evalMode={evalMode}
         variables={variables}
         variableMode={variableMode}
+        onlyVariable={onlyVariable}
         functions={functions}
         header={header || label || ''}
         borderMode={borderMode}

package/src/renderers/Form/InputImage.tsx

@@ -1569,7 +1569,7 @@ export default class ImageControl extends React.Component<
                                           />
                                         </a>
                                       ) : null}
-        
+
                                       {!disabled ? (
                                         <a
                                           data-tooltip={__('Select.clear')}
@@ -1636,7 +1636,9 @@ export default class ImageControl extends React.Component<
                         ) : (
                           <>
                             <Icon icon="plus-fine" className="icon" />
-                            <span className={cx('ImageControl-addBtn-text')}>{__('Image.upload')}</span>
+                            <span className={cx('ImageControl-addBtn-text')}>
+                              {__('Image.upload')}
+                            </span>
                           </>
                         )}
 

package/src/renderers/Form/InputTree.tsx

@@ -62,6 +62,11 @@ export interface TreeControlSchema extends FormOptionsControl {
    */
   onlyChildren?: boolean;
 
+  /**
+   * 单选时，只运行选择叶子节点
+   */
+  onlyLeaf?: boolean;
+
   /**
    * 顶级节点是否可以创建子节点
    */
@@ -174,6 +179,7 @@ export default class TreeControl extends React.Component<TreeProps> {
       unfoldedLevel,
       withChildren,
       onlyChildren,
+      onlyLeaf,
       loading,
       hideRoot,
       rootLabel,
@@ -228,6 +234,7 @@ export default class TreeControl extends React.Component<TreeProps> {
             unfoldedLevel={unfoldedLevel}
             withChildren={withChildren}
             onlyChildren={onlyChildren}
+            onlyLeaf={onlyLeaf}
             hideRoot={hideRoot}
             rootLabel={__(rootLabel)}
             rootValue={rootValue}

package/src/renderers/Form/Select.tsx

@@ -85,14 +85,27 @@ export interface SelectControlSchema extends FormOptionsControl {
    * 搜索 API
    */
   searchApi?: SchemaApi;
+
+  /**
+   * 单个选项的高度，主要用于虚拟渲染
+   */
+  itemHeight?: number;
+
+  /**
+   * 在选项数量达到多少时开启虚拟渲染
+   */
+  virtualThreshold?: number;
+
   /**
    * 可多选条件下，是否可全选
    */
   checkAll?: boolean;
+
   /**
    * 可多选条件下，是否默认全选中所有值
    */
   defaultCheckAll?: boolean;
+
   /**
    * 可多选条件下，全选项文案，默认 ”全选“
    */

package/src/renderers/Table/index.tsx

@@ -972,10 +972,7 @@ export default class Table extends React.Component<TableProps, object> {
       return;
     }
 
-    onSaveOrder(
-      movedItems,
-      items
-    );
+    onSaveOrder(movedItems, items);
   }
 
   syncSelected() {
@@ -2300,7 +2297,10 @@ export default class Table extends React.Component<TableProps, object> {
             onClick={async () => {
               const {data, dispatchEvent} = this.props;
 
-              const allToggled = !(store.activeToggaleColumns.length === store.toggableColumns.length);
+              const allToggled = !(
+                store.activeToggaleColumns.length ===
+                store.toggableColumns.length
+              );
               const rendererEvent = await dispatchEvent(
                 'columnToggled',
                 createObject(data, {
@@ -2341,9 +2341,11 @@ export default class Table extends React.Component<TableProps, object> {
             key={column.index}
             onClick={async () => {
               const {data, dispatchEvent} = this.props;
-              let columns = store.activeToggaleColumns.map(item => item.pristine);
+              let columns = store.activeToggaleColumns.map(
+                item => item.pristine
+              );
               if (!column.toggled) {
-                columns.push(column.pristine)
+                columns.push(column.pristine);
               } else {
                 columns = columns.filter(c => c.name !== column.pristine.name);
               }

package/src/renderers/Tabs.tsx

@@ -18,7 +18,8 @@ import {
   BaseSchema,
   SchemaClassName,
   SchemaCollection,
-  SchemaIcon
+  SchemaIcon,
+  SchemaExpression
 } from '../Schema';
 import {ActionSchema} from './Action';
 import {filter} from '../utils/tpl';
@@ -194,11 +195,16 @@ export interface TabsSchema extends BaseSchema {
    * 自定义增加按钮文案
    */
   addBtnText?: string;
+
+  /**
+   * 默认激活的选项卡，hash值或索引值，支持使用表达式
+   */
+  activeKey?: SchemaExpression;
 }
 
 export interface TabsProps
   extends RendererProps,
-    Omit<TabsSchema, 'className' | 'contentClassName'> {
+    Omit<TabsSchema, 'className' | 'contentClassName' | 'activeKey'> {
   activeKey?: string | number;
   location?: any;
   tabRender?: (tab: TabSchema, props: TabsProps, index: number) => JSX.Element;
@@ -327,6 +333,8 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   componentDidUpdate(preProps: TabsProps, prevState: any) {
     const props = this.props;
     let localTabs = this.state.localTabs;
+    const prevActiveKey = tokenize(preProps.defaultActiveKey, preProps.data);
+    const activeKey = tokenize(props.defaultActiveKey, props.data);
 
     // 响应外部修改 tabs
     const isTabsModified = isObjectShallowModified(
@@ -409,6 +417,26 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         prevKey: undefined,
         activeKey: (this.activeKey = activeKey)
       });
+    } else if (prevActiveKey !== activeKey) {
+      if (activeKey == null) {
+        return;
+      }
+
+      let newActivedKey = null;
+      const tab = find(localTabs, item => item.hash === activeKey);
+
+      if (tab) {
+        newActivedKey = tab.hash;
+      } else if (typeof activeKey === 'number' && localTabs[activeKey]) {
+        newActivedKey = activeKey;
+      }
+
+      if (newActivedKey) {
+        this.setState({
+          prevKey: prevActiveKey,
+          activeKey: (this.activeKey = newActivedKey)
+        });
+      }
     }
 
     this.autoJumpToNeighbour(this.activeKey);
@@ -578,7 +606,9 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       }
     });
     // 获取激活元素项
-    const tab = localTabs?.find((item, index) => key === (item.hash ? item.hash : index));
+    const tab = localTabs?.find(
+      (item, index) => key === (item.hash ? item.hash : index)
+    );
 
     const rendererEvent = await dispatchEvent(
       'change',