amis 1.9.1-beta.13 → 1.9.1-beta.19

package/src/components/Select.tsx

@@ -778,10 +778,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>
@@ -1026,7 +1023,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>
           ) : (
@@ -1083,7 +1080,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/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' && !action.target) {
+      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/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/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',

package/src/utils/formula.ts

@@ -210,12 +210,14 @@ export function registerFormulaExec(execMode: string, formulaExec: Function) {
 
 // 用于判断是否优先使用value。
 export function isExpression(expression: any): boolean {
-  if (!isString(expression)) {
+  if (!expression || !isString(expression)) {
     // 非字符串类型，比如：Object、Array类型、boolean、number类型
     return false;
   }
-  // 备注: "\\${xxx}"不作为表达式，至少含一个${xxx}才算是表达式
-  return /(?<!\\)(\${).+(\})/.test(expression);
+  // 备注1: "\\${xxx}"不作为表达式，至少含一个${xxx}才算是表达式
+  
+  // 备注2: safari 不支持 /(?<!\\)(\${).+(\})/.test(expression) 
+  return /(^|[^\\])\$\{.+\}/.test(expression);
 }
 
 // 用于判断是否需要执行表达式: