amis 1.5.6-beta.4 → 1.5.8-beta.2

package/src/components/calendar/YearsView.tsx

@@ -4,7 +4,7 @@ import moment from 'moment';
 import React from 'react';
 import {LocaleProps, localeable} from '../../locale';
 import Picker from '../Picker';
-import {convertDateToObject, getRange, isMobile} from "../../utils/helper";
+import {convertDateToObject, getRange, isMobile} from '../../utils/helper';
 
 export class CustomYearsView extends YearsView {
   props: {
@@ -38,28 +38,30 @@ export class CustomYearsView extends YearsView {
   };
 
   onConfirm = (value: number[]) => {
-    this.props.onConfirm && this.props.onConfirm(value, ["year"])
-  }
+    this.props.onConfirm && this.props.onConfirm(value, ['year']);
+  };
 
   renderYearPicker = () => {
-    const {minDate, maxDate, selectedDate, viewDate} =  this.props;
+    const {minDate, maxDate, selectedDate, viewDate} = this.props;
     const year = (selectedDate || viewDate || moment()).year();
     const maxYear = maxDate ? convertDateToObject(maxDate)!.year : year + 100;
     const minYear = minDate ? convertDateToObject(minDate)!.year : year - 100;
-    
-    const columns = [{
-      options: getRange(minYear, maxYear, 1)
-    }];
+
+    const columns = [
+      {
+        options: getRange(minYear, maxYear, 1)
+      }
+    ];
 
     return (
       <Picker
         translate={this.props.translate}
         locale={this.props.locale}
         columns={columns}
-        value={[year]} 
+        value={[year]}
         onConfirm={this.onConfirm}
         onClose={this.props.onClose}
-        />
+      />
     );
   };
 
@@ -67,13 +69,9 @@ export class CustomYearsView extends YearsView {
     let year = this.props.viewDate.year();
     year = year - (year % 10);
     const __ = this.props.translate;
-    
+
     if (isMobile() && this.props.useMobileUI) {
-      return (
-        <div className="rdtYears">
-          {this.renderYearPicker()}
-        </div>
-      );
+      return <div className="rdtYears">{this.renderYearPicker()}</div>;
     }
     return (
       <div className="rdtYears">

package/src/components/condition-builder/Field.tsx

@@ -114,9 +114,7 @@ export class ConditionField extends React.Component<
               ref={ref}
               allowInput={false}
               result={
-                value
-                  ? findTree(options, item => item.name === value)?.label
-                  : ''
+                value ? findTree(options, item => item.name === value) : ''
               }
               onResultChange={noop}
               onResultClick={onClick}

package/src/components/condition-builder/Func.tsx

@@ -97,7 +97,7 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
                 )}
                 ref={ref}
                 allowInput={false}
-                result={func?.label}
+                result={func}
                 onResultChange={noop}
                 onResultClick={onClick}
                 placeholder="请选择字段"

package/src/components/formula/Editor.tsx

@@ -0,0 +1,266 @@
+/**
+ * @file 公式编辑器
+ */
+import React from 'react';
+import {uncontrollable} from 'uncontrollable';
+import {FormulaPlugin, editorFactory} from './plugin';
+import {doc} from 'amis-formula/dist/doc';
+import FuncList from './FuncList';
+import {VariableList} from './VariableList';
+import {parse} from 'amis-formula';
+import {autobind} from '../../utils/helper';
+import CodeMirrorEditor from '../CodeMirror';
+import {themeable, ThemeProps} from '../../theme';
+import {localeable, LocaleProps} from '../../locale';
+
+export interface VariableItem {
+  label: string;
+  value?: string;
+  children?: Array<VariableItem>;
+  selectMode?: 'tree' | 'tabs';
+}
+
+export interface FuncGroup {
+  groupName: string;
+  items: Array<FuncItem>;
+}
+
+export interface FuncItem {
+  name: string;
+  [propName: string]: any;
+}
+
+export interface FormulaEditorProps extends ThemeProps, LocaleProps {
+  onChange?: (value: string) => void;
+  value: string;
+  /**
+   * evalMode 即直接就是表达式，否则
+   * 需要 ${这里面才是表达式}
+   * 默认为 true
+   */
+  evalMode?: boolean;
+
+  /**
+   * 用于提示的变量集合，默认为空
+   */
+  variables: Array<VariableItem>;
+
+  /**
+   * 变量展现模式，可选值：'tabs' ｜ 'tree'
+   */
+  variableMode?: 'tabs' | 'tree';
+
+  /**
+   * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+   * 如果有扩充，则需要传。
+   */
+  functions: Array<FuncGroup>;
+
+  /**
+   * 顶部标题，默认为表达式
+   */
+  header: string;
+}
+
+export interface FunctionsProps {
+  name: string;
+  items: FunctionProps[];
+}
+
+export interface FunctionProps {
+  name: string;
+  intro: string;
+  usage: string;
+  example: string;
+}
+
+export interface FormulaState {
+  focused: boolean;
+}
+
+export class FormulaEditor extends React.Component<
+  FormulaEditorProps,
+  FormulaState
+> {
+  state: FormulaState = {
+    focused: false
+  };
+  editorPlugin?: FormulaPlugin;
+
+  static buildDefaultFunctions(
+    doc: Array<{
+      namespace: string;
+      name: string;
+      [propName: string]: any;
+    }>
+  ) {
+    const funcs: Array<FuncGroup> = [];
+
+    doc.forEach(item => {
+      const namespace = item.namespace || 'Others';
+      let exists = funcs.find(item => item.groupName === namespace);
+      if (!exists) {
+        exists = {
+          groupName: namespace,
+          items: []
+        };
+        funcs.push(exists);
+      }
+      exists.items.push(item);
+    });
+
+    return funcs;
+  }
+
+  static defaultProps: Pick<
+    FormulaEditorProps,
+    'functions' | 'variables' | 'evalMode'
+  > = {
+    functions: this.buildDefaultFunctions(doc),
+    variables: [],
+    evalMode: true
+  };
+
+  static highlightValue(
+    value: string,
+    variables: Array<VariableItem>,
+    functions: Array<FuncGroup>
+  ) {
+    // todo 高亮原始文本
+    return value;
+  }
+
+  componentWillUnmount() {
+    this.editorPlugin?.dispose();
+  }
+
+  @autobind
+  handleFocus() {
+    this.setState({
+      focused: true
+    });
+  }
+
+  @autobind
+  handleBlur() {
+    this.setState({
+      focused: false
+    });
+  }
+
+  @autobind
+  insertValue(value: any, type: 'variable' | 'func') {
+    this.editorPlugin?.insertContent(value, type);
+  }
+
+  @autobind
+  handleEditorMounted(cm: any, editor: any) {
+    this.editorPlugin = new FormulaPlugin(editor, cm, () => this.props);
+  }
+
+  @autobind
+  validate() {
+    const value = this.props.value;
+
+    try {
+      value
+        ? parse(value, {
+            evalMode: this.props.evalMode
+          })
+        : null;
+    } catch (e) {
+      return e.message;
+    }
+
+    return;
+  }
+
+  @autobind
+  handleFunctionSelect(item: FuncItem) {
+    this.editorPlugin?.insertContent(`${item.name}`, 'func');
+  }
+
+  @autobind
+  handleVariableSelect(item: VariableItem) {
+    this.editorPlugin?.insertContent(
+      {
+        key: item.value,
+        name: item.label
+      },
+      'variable'
+    );
+  }
+
+  @autobind
+  handleOnChange(value: any) {
+    const onChange = this.props.onChange;
+    onChange?.(value);
+  }
+
+  @autobind
+  editorFactory(dom: HTMLElement, cm: any) {
+    return editorFactory(dom, cm, this.props);
+  }
+
+  render() {
+    const {
+      variables,
+      header,
+      value,
+      functions,
+      variableMode,
+      classnames: cx
+    } = this.props;
+    const {focused} = this.state;
+
+    return (
+      <div
+        className={cx(`FormulaEditor`, {
+          'is-focused': focused
+        })}
+      >
+        <div className={cx(`FormulaEditor-content`)}>
+          <div className={cx(`FormulaEditor-header`)}>{header ?? '表达式'}</div>
+
+          <CodeMirrorEditor
+            className={cx('FormulaEditor-editor')}
+            value={value}
+            onChange={this.handleOnChange}
+            editorFactory={this.editorFactory}
+            editorDidMount={this.handleEditorMounted}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+          ></CodeMirrorEditor>
+        </div>
+
+        <div className={cx('FormulaEditor-settings')}>
+          {Array.isArray(functions) && functions.length ? (
+            <div>
+              <h3>变量</h3>
+              <VariableList
+                className={cx('VariableList')}
+                selectMode={variableMode}
+                data={variables}
+                onSelect={this.handleVariableSelect}
+              />
+            </div>
+          ) : null}
+          {Array.isArray(variables) && variables.length ? (
+            <div>
+              <h3>函数</h3>
+              <FuncList data={functions} onSelect={this.handleFunctionSelect} />
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default uncontrollable(
+  themeable(localeable(FormulaEditor)),
+  {
+    value: 'onChange'
+  },
+  ['validate']
+);

package/src/components/formula/FuncList.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {themeable, ThemeProps} from '../../theme';
+import Collapse from '../Collapse';
+import CollapseGroup from '../CollapseGroup';
+import SearchBox from '../SearchBox';
+import type {FuncGroup, FuncItem} from './Editor';
+
+export interface FuncListProps extends ThemeProps {
+  data: Array<FuncGroup>;
+  onSelect?: (item: FuncItem) => void;
+}
+
+export function FuncList(props: FuncListProps) {
+  const cx = props.classnames;
+  const [filteredFuncs, setFiteredFuncs] = React.useState(props.data);
+  const [activeFunc, setActiveFunc] = React.useState<any>(null);
+  function onSearch(term: string) {
+    const filtered = props.data
+      .map(item => {
+        return {
+          ...item,
+          items: term
+            ? item.items.filter(item => ~item.name.indexOf(term.toUpperCase()))
+            : item.items
+        };
+      })
+      .filter(item => item.items.length);
+    setFiteredFuncs(filtered);
+  }
+
+  return (
+    <div className={cx('FormulaFuncList')}>
+      <SearchBox
+        className="FormulaFuncList-searchBox"
+        mini={false}
+        onSearch={onSearch}
+      />
+      <div className={cx('FormulaFuncList-columns')}>
+        <CollapseGroup
+          className="FormulaFuncList-group"
+          defaultActiveKey={filteredFuncs[0]?.groupName}
+          accordion
+        >
+          {filteredFuncs.map(item => (
+            <Collapse
+              headingClassName="FormulaFuncList-groupTitle"
+              bodyClassName="FormulaFuncList-groupBody"
+              propKey={item.groupName}
+              header={item.groupName}
+              key={item.groupName}
+            >
+              {item.items.map(item => (
+                <div
+                  className={cx(
+                    `FormulaFuncList-funcItem ${
+                      item.name === activeFunc?.name ? 'is-active' : ''
+                    }`
+                  )}
+                  onMouseEnter={() => setActiveFunc(item)}
+                  onClick={() => props.onSelect?.(item)}
+                  key={item.name}
+                >
+                  {item.name}
+                </div>
+              ))}
+            </Collapse>
+          ))}
+        </CollapseGroup>
+        <div className={cx('FormulaFuncList-column')}>
+          {activeFunc ? (
+            <div className={cx('FormulaFuncList-funcDetail')}>
+              <pre>
+                <code>{activeFunc.example}</code>
+              </pre>
+              <div>{activeFunc.description}</div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default themeable(FuncList);

package/src/components/formula/Picker.tsx

@@ -0,0 +1,87 @@
+import {uncontrollable} from 'uncontrollable';
+import React from 'react';
+import {FormulaEditor, FormulaEditorProps} from './Editor';
+import {autobind, noop} from '../../utils/helper';
+import PickerContainer from '../PickerContainer';
+import Editor from './Editor';
+import ResultBox from '../ResultBox';
+import {Icon} from '../icons';
+import {themeable} from '../../theme';
+import {localeable} from '../../locale';
+
+export interface FormulaPickerProps extends FormulaEditorProps {
+  // 新的属性？
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+  /**
+   * 边框模式，全边框，还是半边框，或者没边框。
+   */
+  borderMode?: 'full' | 'half' | 'none';
+
+  disabled?: boolean;
+}
+
+export class FormulaPicker extends React.Component<FormulaPickerProps> {
+  @autobind
+  handleConfirm(value: any) {
+    this.props.onChange?.(value);
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      value,
+      translate: __,
+      disabled,
+      className,
+      onChange,
+      size,
+      borderMode,
+      ...rest
+    } = this.props;
+
+    return (
+      <PickerContainer
+        showTitle={false}
+        bodyRender={({onClose, value, onChange}) => {
+          return <Editor {...rest} value={value} onChange={onChange} />;
+        }}
+        value={value}
+        onConfirm={this.handleConfirm}
+        size={'md'}
+      >
+        {({onClick, isOpened}) => (
+          <ResultBox
+            className={cx(
+              'FormulaPicker',
+              className,
+              isOpened ? 'is-active' : ''
+            )}
+            allowInput={false}
+            result={FormulaEditor.highlightValue(
+              value,
+              rest.variables,
+              rest.functions
+            )}
+            onResultChange={noop}
+            onResultClick={onClick}
+            disabled={disabled}
+            borderMode={borderMode}
+          >
+            <span className={cx('FormulaPicker-icon')}>
+              <Icon icon="pencil" className="icon" />
+            </span>
+          </ResultBox>
+        )}
+      </PickerContainer>
+    );
+  }
+}
+
+export default themeable(
+  localeable(
+    uncontrollable(FormulaPicker, {
+      value: 'onChange'
+    })
+  )
+);

package/src/components/formula/VariableList.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import GroupedSelection from '../GroupedSelection';
+import Tabs, {Tab} from '../Tabs';
+import TreeSelection from '../TreeSelection';
+import type {VariableItem} from './Editor';
+
+export interface VariableListProps {
+  className?: string;
+  data: Array<VariableItem>;
+  selectMode?: 'list' | 'tree' | 'tabs';
+  onSelect?: (item: VariableItem) => void;
+}
+
+export function VariableList({
+  data: list,
+  className,
+  selectMode,
+  onSelect
+}: VariableListProps) {
+  return (
+    <div className={className}>
+      {selectMode === 'tabs' ? (
+        <Tabs tabsMode="radio">
+          {list.map((item, index) => (
+            <Tab eventKey={index} key={index} title={item.label}>
+              <VariableList
+                selectMode={item.selectMode}
+                data={item.children!}
+                onSelect={onSelect}
+              />
+            </Tab>
+          ))}
+        </Tabs>
+      ) : selectMode === 'tree' ? (
+        <TreeSelection
+          multiple={false}
+          options={list}
+          onChange={(item: any) => onSelect?.(item)}
+        />
+      ) : (
+        <GroupedSelection
+          multiple={false}
+          options={list}
+          onChange={(item: any) => onSelect?.(item)}
+        />
+      )}
+    </div>
+  );
+}