amis 1.8.0-beta.13 → 1.8.0-beta.17

package/src/WithStore.tsx

@@ -201,7 +201,7 @@ export function HocStoreFactory(renderer: {
             store.initData(
               extendObject(
                 props.data,
-                store.hasRemoteData
+                store.hasRemoteData || store.path === 'page'
                   ? {
                       ...store.data,
                       ...props.data

package/src/components/DatePicker.tsx

@@ -371,7 +371,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         value: normalizeValue(props.value, props.format)
       };
 
-      newState.inputValue = newState.value.format(this.props.inputFormat) || '';
+      newState.inputValue =
+        newState.value?.format(this.props.inputFormat) || '';
 
       this.setState(newState);
     }

package/src/components/Progress.tsx

@@ -110,16 +110,15 @@ export class Progress extends React.Component<ProgressProps, Object> {
     if (typeof value !== 'number') {
       viewValue = <span className="text-muted">{placeholder}</span>;
     } else if (type === 'line') {
-      const style: any = {};
       const barStyle: any = {
         width: `${value}%`
       };
-      strokeWidth && (style.height = strokeWidth);
+      strokeWidth && (barStyle.height = strokeWidth);
       !isColorClass && (barStyle.backgroundColor = bgColor);
 
       viewValue = [
         <div key="progress" className={cx(prefixCls, progressClassName)}>
-          <div className={cx(`${prefixCls}-inter`)} style={style}>
+          <div className={cx(`${prefixCls}-inter`)}>
             <div
               className={cx(
                 `${prefixCls}-bar`,
@@ -149,7 +148,10 @@ export class Progress extends React.Component<ProgressProps, Object> {
       };
 
       viewValue = [
-        <div className={cx(prefixCls, progressClassName)} key="circle">
+        <div
+          className={cx(prefixCls, progressClassName || 'w-ssm')}
+          key="circle"
+        >
           <Circle
             percent={value}
             strokeColor={!isColorClass ? bgColor : ''}

package/src/components/TabsTransfer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {autobind} from '../utils/helper';
 import Tabs, {Tab} from './Tabs';
-import SearchBox from './SearchBox';
+import InputBox from './InputBox';
 import TableCheckboxes from './TableSelection';
 import TreeCheckboxes from './TreeSelection';
 import ChainedCheckboxes from './ChainedSelection';
@@ -12,6 +12,8 @@ import {themeable} from '../theme';
 import AssociatedCheckboxes from './AssociatedSelection';
 import {localeable} from '../locale';
 import {ItemRenderStates} from './Selection';
+import {Icon} from './icons';
+import debounce from 'lodash/debounce';
 
 export interface TabsTransferProps
   extends Omit<
@@ -20,8 +22,14 @@ export interface TabsTransferProps
     | 'columns'
     | 'selectRender'
     | 'statistics'
+    | 'onSearch'
     | 'optionItemRender'
   > {
+  onSearch: (
+    term: string,
+    option: Option,
+    setCancel: (cancel: () => void) => void
+  ) => Promise<Options | void>;
   optionItemRender?: (
     option: Option,
     states: ItemRenderStates,
@@ -39,7 +47,97 @@ export interface TabsTransferProps
   ) => JSX.Element;
 }
 
-export class TabsTransfer extends React.Component<TabsTransferProps> {
+export interface TabsTransferState {
+  inputValue: string;
+  searchResult: Options | null;
+}
+
+export class TabsTransfer extends React.Component<
+  TabsTransferProps,
+  TabsTransferState
+> {
+  state = {
+    inputValue: '',
+    searchResult: null
+  };
+
+  unmounted = false;
+  cancelSearch?: () => void;
+
+  componentWillUnmount() {
+    this.lazySearch.cancel();
+    this.unmounted = true;
+  }
+
+  @autobind
+  handleSearch(text: string, option: Option) {
+    // text 有值的时候，走搜索否则直接走 handleSeachCancel ，等同于右侧的 clear 按钮
+    if (text) {
+      this.setState(
+        {
+          inputValue: text
+        },
+        () => {
+          // 如果有取消搜索，先取消掉。
+          this.cancelSearch && this.cancelSearch();
+          this.lazySearch(text, option);
+        }
+      );
+    } else {
+      this.handleSeachCancel();
+    }
+  }
+
+  @autobind
+  handleSeachCancel() {
+    this.setState({
+      inputValue: '',
+      searchResult: null
+    });
+  }
+
+  lazySearch = debounce(
+    (text: string, option: Option) => {
+      (async (text: string) => {
+        const onSearch = this.props.onSearch;
+        let result = await onSearch(
+          text,
+          option,
+          (cancelExecutor: () => void) => (this.cancelSearch = cancelExecutor)
+        );
+
+        if (this.unmounted) {
+          return;
+        }
+
+        if (!Array.isArray(result)) {
+          throw new Error('onSearch 需要返回数组');
+        }
+
+        this.setState({
+          searchResult: result
+        });
+      })(text).catch(e => console.error(e));
+    },
+    250,
+    {
+      trailing: true,
+      leading: false
+    }
+  );
+
+  @autobind
+  handleSearchKeyDown(e: React.KeyboardEvent<any>) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+    }
+  }
+
+  @autobind
+  handleTabChange() {
+    this.handleSeachCancel();
+  }
+
   renderSearchResult(searchResult: Options | null) {
     const {
       searchResultMode,
@@ -126,22 +224,9 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
   }
 
   @autobind
-  renderSelect({onSearch, onSearchCancel, searchResult}: any) {
-    const {
-      options,
-      placeholder,
-      classnames: cx,
-      value,
-      disabled,
-      onChange,
-      onSearch: searchable,
-      option2value,
-      onDeferLoad,
-      onLeftDeferLoad,
-      cellRender,
-      translate: __,
-      optionItemRender
-    } = this.props;
+  renderSelect() {
+    const {options, placeholder, classnames: cx, translate: __} = this.props;
+    const showOptions = options.filter(item => item.visible !== false);
 
     if (!Array.isArray(options) || !options.length) {
       return (
@@ -153,138 +238,163 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
 
     return (
       <Tabs
-        mode="card"
+        mode="line"
         className={cx('TabsTransfer-tabs')}
-        activeKey={searchResult !== null ? 0 : undefined}
-        toolbar={
-          searchable ? (
-            <>
-              <span className={cx('TabsTransfer-tabsMid')}></span>
-              <SearchBox onSearch={onSearch} onCancel={onSearchCancel} />
-            </>
-          ) : null
-        }
+        onSelect={this.handleTabChange}
       >
-        {searchResult !== null
-          ? [
-              <Tab
-                className="TabsTransfer-tab"
-                title={__('searchResult')}
-                key={0}
-                eventKey={0}
-              >
-                {this.renderSearchResult(searchResult)}
-              </Tab>
-            ]
-          : options.map((option, index) => (
-              <Tab
-                eventKey={index}
-                key={index}
-                title={option.label || option.title}
-                className="TabsTransfer-tab"
-              >
-                {option.selectMode === 'table' ? (
-                  <TableCheckboxes
-                    className={cx('Transfer-checkboxes')}
-                    columns={option.columns as any}
-                    options={option.children || []}
-                    value={value}
-                    disabled={disabled}
-                    onChange={onChange}
-                    option2value={option2value}
-                    onDeferLoad={onDeferLoad}
-                    cellRender={cellRender}
-                  />
-                ) : option.selectMode === 'tree' ? (
-                  <TreeCheckboxes
-                    className={cx('Transfer-checkboxes')}
-                    options={option.children || []}
-                    value={value}
-                    disabled={disabled}
-                    onChange={onChange}
-                    option2value={option2value}
-                    onDeferLoad={onDeferLoad}
-                    itemRender={
-                      optionItemRender
-                        ? (item: Option, states: ItemRenderStates) =>
-                            optionItemRender(item, states, {
-                              panel: 'tab',
-                              tag: option
-                            })
-                        : undefined
-                    }
-                  />
-                ) : option.selectMode === 'chained' ? (
-                  <ChainedCheckboxes
-                    className={cx('Transfer-checkboxes')}
-                    options={option.children || []}
-                    value={value}
-                    disabled={disabled}
-                    onChange={onChange}
-                    option2value={option2value}
-                    onDeferLoad={onDeferLoad}
-                    defaultSelectedIndex={option.defaultSelectedIndex}
-                    itemRender={
-                      optionItemRender
-                        ? (item: Option, states: ItemRenderStates) =>
-                            optionItemRender(item, states, {
-                              panel: 'tab',
-                              tag: option
-                            })
-                        : undefined
-                    }
-                  />
-                ) : option.selectMode === 'associated' ? (
-                  <AssociatedCheckboxes
-                    className={cx('Transfer-checkboxes')}
-                    options={option.children || []}
-                    value={value}
-                    disabled={disabled}
-                    onChange={onChange}
-                    option2value={option2value}
-                    onDeferLoad={onDeferLoad}
-                    onLeftDeferLoad={onLeftDeferLoad}
-                    leftMode={option.leftMode}
-                    leftOptions={option.leftOptions}
-                    leftDefaultValue={option.leftDefaultValue}
-                    itemRender={
-                      optionItemRender
-                        ? (item: Option, states: ItemRenderStates) =>
-                            optionItemRender(item, states, {
-                              panel: 'tab',
-                              tag: option
-                            })
-                        : undefined
-                    }
-                  />
-                ) : (
-                  <ListCheckboxes
-                    className={cx('Transfer-checkboxes')}
-                    options={option.children || []}
-                    value={value}
-                    disabled={disabled}
-                    onChange={onChange}
-                    option2value={option2value}
-                    onDeferLoad={onDeferLoad}
-                    itemRender={
-                      optionItemRender
-                        ? (item: Option, states: ItemRenderStates) =>
-                            optionItemRender(item, states, {
-                              panel: 'tab',
-                              tag: option
-                            })
-                        : undefined
-                    }
-                  />
-                )}
-              </Tab>
-            ))}
+        {showOptions.map((option, index) => (
+          <Tab
+            eventKey={index}
+            key={index}
+            title={option.label || option.title}
+            className="TabsTransfer-tab"
+          >
+            {option.searchable ? (
+              <div className={cx('TabsTransfer-search')}>
+                <InputBox
+                  value={this.state.inputValue}
+                  onChange={(text: string) => this.handleSearch(text, option)}
+                  placeholder={__('Transfer.searchKeyword')}
+                  clearable={false}
+                  onKeyDown={this.handleSearchKeyDown}
+                >
+                  {this.state.searchResult !== null ? (
+                    <a onClick={this.handleSeachCancel}>
+                      <Icon icon="close" className="icon" />
+                    </a>
+                  ) : (
+                    <Icon icon="search" className="icon" />
+                  )}
+                </InputBox>
+              </div>
+            ) : null}
+            {this.state.searchResult !== null
+              ? this.renderSearchResult(this.state.searchResult)
+              : this.renderOptions(option)}
+          </Tab>
+        ))}
       </Tabs>
     );
   }
 
+  @autobind
+  renderOptions(option: Option) {
+    const {
+      classnames: cx,
+      value,
+      disabled,
+      onChange,
+      option2value,
+      onDeferLoad,
+      onLeftDeferLoad,
+      cellRender,
+      translate: __,
+      optionItemRender
+    } = this.props;
+    return option.selectMode === 'table' ? (
+      <TableCheckboxes
+        className={cx('Transfer-checkboxes')}
+        columns={option.columns as any}
+        options={option.children || []}
+        value={value}
+        disabled={disabled}
+        onChange={onChange}
+        option2value={option2value}
+        onDeferLoad={onDeferLoad}
+        cellRender={cellRender}
+      />
+    ) : option.selectMode === 'tree' ? (
+      <TreeCheckboxes
+        className={cx('Transfer-checkboxes')}
+        options={option.children || []}
+        value={value}
+        disabled={disabled}
+        onChange={onChange}
+        option2value={option2value}
+        onDeferLoad={onDeferLoad}
+        itemRender={
+          optionItemRender
+            ? (item: Option, states: ItemRenderStates) =>
+                optionItemRender(item, states, {
+                  panel: 'tab',
+                  tag: option
+                })
+            : undefined
+        }
+      />
+    ) : option.selectMode === 'chained' ? (
+      <ChainedCheckboxes
+        className={cx('Transfer-checkboxes')}
+        options={option.children || []}
+        value={value}
+        disabled={disabled}
+        onChange={onChange}
+        option2value={option2value}
+        onDeferLoad={onDeferLoad}
+        defaultSelectedIndex={option.defaultSelectedIndex}
+        itemRender={
+          optionItemRender
+            ? (item: Option, states: ItemRenderStates) =>
+                optionItemRender(item, states, {
+                  panel: 'tab',
+                  tag: option
+                })
+            : undefined
+        }
+      />
+    ) : option.selectMode === 'associated' ? (
+      <AssociatedCheckboxes
+        className={cx('Transfer-checkboxes')}
+        options={option.children || []}
+        value={value}
+        disabled={disabled}
+        onChange={onChange}
+        option2value={option2value}
+        onDeferLoad={onDeferLoad}
+        onLeftDeferLoad={onLeftDeferLoad}
+        leftMode={option.leftMode}
+        leftOptions={option.leftOptions}
+        leftDefaultValue={option.leftDefaultValue}
+        itemRender={
+          optionItemRender
+            ? (item: Option, states: ItemRenderStates) =>
+                optionItemRender(item, states, {
+                  panel: 'tab',
+                  tag: option
+                })
+            : undefined
+        }
+      />
+    ) : (
+      <ListCheckboxes
+        className={cx('Transfer-checkboxes')}
+        options={option.children || []}
+        value={value}
+        disabled={disabled}
+        onChange={onChange}
+        option2value={option2value}
+        onDeferLoad={onDeferLoad}
+        itemRender={
+          optionItemRender
+            ? (item: Option, states: ItemRenderStates) =>
+                optionItemRender(item, states, {
+                  panel: 'tab',
+                  tag: option
+                })
+            : undefined
+        }
+      />
+    );
+  }
+
   render() {
-    const {className, classnames: cx, optionItemRender, ...reset} = this.props;
+    const {
+      className,
+      classnames: cx,
+      optionItemRender,
+      onSearch,
+      ...reset
+    } = this.props;
 
     return (
       <Transfer

package/src/components/Tree.tsx

@@ -210,7 +210,9 @@ export class TreeSelector extends React.Component<
 
   componentDidMount() {
     const {enableNodePath} = this.props;
-    this.props.onRef(this)
+
+    // onRef只有渲染器的情况才会使用
+    this.props.onRef?.(this);
     enableNodePath && this.expandLazyLoadNodes();
   }
 

package/src/components/formula/Editor.tsx

@@ -8,7 +8,7 @@ import {doc} from 'amis-formula/dist/doc';
 
 import {FormulaPlugin, editorFactory} from './plugin';
 import FuncList from './FuncList';
-import {VariableList} from './VariableList';
+import VariableList from './VariableList';
 import CodeMirrorEditor from '../CodeMirror';
 import {autobind, eachTree} from '../../utils/helper';
 import {themeable, ThemeProps} from '../../theme';
@@ -283,10 +283,17 @@ export class FormulaEditor extends React.Component<
 
         <section className={cx('FormulaEditor-settings')}>
           <div className={cx('FormulaEditor-panel')}>
-            <div className={cx('FormulaEditor-panel-header')}>
-              {__('FormulaEditor.variable')}
-            </div>
-            <div className={cx('FormulaEditor-panel-body')}>
+            {variableMode !== 'tabs' ? (
+              <div className={cx('FormulaEditor-panel-header')}>
+                {__('FormulaEditor.variable')}
+              </div>
+            ) : null}
+            <div
+              className={cx(
+                'FormulaEditor-panel-body',
+                variableMode && `FormulaEditor-panel-body--${variableMode}`
+              )}
+            >
               <VariableList
                 classPrefix={classPrefix}
                 className={cx(

package/src/components/formula/VariableList.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
-import cx from 'classnames';
 
+import {themeable, ThemeProps} from '../../theme';
 import GroupedSelection from '../GroupedSelection';
 import Tabs, {Tab} from '../Tabs';
 import TreeSelection from '../TreeSelection';
+import SearchBox from '../SearchBox';
+import {filterTree, flattenTree} from '../../utils/helper';
 
 import type {VariableItem} from './Editor';
 import type {ItemRenderStates} from '../Selection';
 import type {Option} from '../Select';
 import type {TabsMode} from '../Tabs';
 
-export interface VariableListProps {
+export interface VariableListProps extends ThemeProps {
   className?: string;
   itemClassName?: string;
-  classPrefix?: string;
   data: Array<VariableItem>;
   selectMode?: 'list' | 'tree' | 'tabs';
   tabsMode?: TabsMode;
@@ -21,16 +22,18 @@ export interface VariableListProps {
   onSelect?: (item: VariableItem) => void;
 }
 
-export function VariableList(props: VariableListProps) {
+function VariableList(props: VariableListProps) {
   const {
     data: list,
     className,
-    tabsMode = 'card',
+    classnames: cx,
+    tabsMode = 'line',
     classPrefix: themePrefix,
     itemClassName,
     selectMode,
     onSelect
   } = props;
+  const [filterVars, setFilterVars] = React.useState(list);
   const classPrefix = `${themePrefix}FormulaEditor-VariableList`;
   const itemRender =
     props.itemRender && typeof props.itemRender === 'function'
@@ -48,14 +51,35 @@ export function VariableList(props: VariableListProps) {
           );
         };
 
+  function onSearch(term: string) {
+    const flatten = flattenTree(list);
+    const filtered = flatten.filter(item => ~item.label.indexOf(term));
+
+    setFilterVars(!term ? list : filtered);
+  }
+
+  function renderSearchBox() {
+    return (
+      <div className={cx('FormulaEditor-VariableList-searchBox')}>
+        <SearchBox mini={false} onSearch={onSearch} />
+      </div>
+    );
+  }
+
   return (
-    <div className={cx(className, {'is-scrollable': selectMode !== 'tabs'})}>
+    <div
+      className={cx(
+        className,
+        'FormulaEditor-VariableList',
+        selectMode && `FormulaEditor-VariableList-${selectMode}`
+      )}
+    >
       {selectMode === 'tabs' ? (
         <Tabs
           tabsMode={tabsMode}
           className={cx(`${classPrefix}-base ${classPrefix}-tabs`)}
         >
-          {list.map((item, index) => (
+          {filterVars.map((item, index) => (
             <Tab
               className={cx(`${classPrefix}-tab`)}
               eventKey={index}
@@ -63,6 +87,8 @@ export function VariableList(props: VariableListProps) {
               title={item.label}
             >
               <VariableList
+                classnames={cx}
+                classPrefix={`${classPrefix}-sub-`}
                 className={cx(`${classPrefix}-sub`)}
                 itemRender={itemRender}
                 selectMode={item.selectMode}
@@ -73,22 +99,30 @@ export function VariableList(props: VariableListProps) {
           ))}
         </Tabs>
       ) : selectMode === 'tree' ? (
-        <TreeSelection
-          itemRender={itemRender}
-          className={cx(`${classPrefix}-base`)}
-          multiple={false}
-          options={list}
-          onChange={(item: any) => onSelect?.(item)}
-        />
+        <div className={cx('FormulaEditor-VariableList-body')}>
+          {renderSearchBox()}
+          <TreeSelection
+            itemRender={itemRender}
+            className={cx(`${classPrefix}-base`, 'is-scrollable')}
+            multiple={false}
+            options={filterVars}
+            onChange={(item: any) => onSelect?.(item)}
+          />
+        </div>
       ) : (
-        <GroupedSelection
-          itemRender={itemRender}
-          className={cx(`${classPrefix}-base`)}
-          multiple={false}
-          options={list}
-          onChange={(item: any) => onSelect?.(item)}
-        />
+        <div className={cx('FormulaEditor-VariableList-body')}>
+          {renderSearchBox()}
+          <GroupedSelection
+            itemRender={itemRender}
+            className={cx(`${classPrefix}-base`, 'is-scrollable')}
+            multiple={false}
+            options={filterVars}
+            onChange={(item: any) => onSelect?.(item)}
+          />
+        </div>
       )}
     </div>
   );
 }
+
+export default themeable(VariableList);