amis 1.5.6-beta.0 → 1.5.7

package/src/components/formula/Editor.tsx

@@ -0,0 +1,261 @@
+/**
+ * @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>;
+
+  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-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 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,82 @@
+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')}>
+              <p>{activeFunc.example}</p>
+              <div>{activeFunc.description}</div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default themeable(FuncList);

package/src/components/formula/Picker.tsx

@@ -0,0 +1,86 @@
+import {uncontrollable} from 'uncontrollable';
+import React from 'react';
+import {FormulaEditor, FormulaEditorProps} from './Editor';
+import {autobind} 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
+            )}
+            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>
+  );
+}

package/src/components/formula/plugin.ts

@@ -0,0 +1,177 @@
+/**
+ * @file 扩展 codemirror
+ */
+
+import type CodeMirror from 'codemirror';
+import {eachTree} from '../../utils/helper';
+import type {FormulaEditorProps, VariableItem} from './Editor';
+
+export function editorFactory(
+  dom: HTMLElement,
+  cm: typeof CodeMirror,
+  props: any
+) {
+  registerLaunguageMode(cm);
+
+  console.log('here', props.evalMode);
+
+  return cm(dom, {
+    value: props.value || '',
+    autofocus: true,
+    mode: props.evalMode ? 'text/formula' : 'text/formula-template'
+  });
+}
+
+export class FormulaPlugin {
+  constructor(
+    readonly editor: CodeMirror.Editor,
+    readonly cm: typeof CodeMirror,
+    readonly getProps: () => FormulaEditorProps
+  ) {
+    // editor.on('change', this.autoMarkText);
+    this.autoMarkText();
+  }
+
+  autoMarkText() {
+    const {functions, variables, value} = this.getProps();
+    if (value) {
+      // todo functions 也需要自动替换
+      this.autoMark(variables);
+    }
+  }
+
+  insertContent(value: any, type: 'variable' | 'func') {
+    const from = this.editor.getCursor();
+    if (type === 'variable') {
+      this.editor.replaceSelection(value.key);
+      var to = this.editor.getCursor();
+
+      this.markText(from, to, value.name, 'cm-field');
+    } else if (type === 'func') {
+      // todo 支持 snippet，目前是不支持的
+
+      this.editor.replaceSelection(`${value}()`);
+      var to = this.editor.getCursor();
+      this.markText(
+        from,
+        {
+          line: to.line,
+          ch: to.ch - 2
+        },
+        value,
+        'cm-func'
+      );
+
+      this.editor.setCursor({
+        line: to.line,
+        ch: to.ch - 1
+      });
+    } else if (typeof value === 'string') {
+      this.editor.replaceSelection(value);
+    }
+
+    this.editor.focus();
+  }
+
+  markText(
+    from: CodeMirror.Position,
+    to: CodeMirror.Position,
+    label: string,
+    className = 'cm-func'
+  ) {
+    const text = document.createElement('span');
+    text.className = className;
+    text.innerText = label;
+    this.editor.markText(from, to, {
+      atomic: true,
+      replacedWith: text
+    });
+  }
+
+  autoMark(variables: Array<VariableItem>) {
+    if (!Array.isArray(variables) || !variables.length) {
+      return;
+    }
+
+    const varMap: {
+      [propname: string]: string;
+    } = {};
+
+    eachTree(
+      variables,
+      item => item.value && (varMap[item.value] = item.label)
+    );
+    const vars = Object.keys(varMap).sort((a, b) => b.length - a.length);
+
+    const editor = this.editor;
+    const lines = editor.lineCount();
+    for (let line = 0; line < lines; line++) {
+      const content = editor.getLine(line);
+
+      // 标记方法调用
+      content.replace(/([A-Z]+)\s*\(/g, (_, func, pos) => {
+        this.markText(
+          {
+            line: line,
+            ch: pos
+          },
+          {
+            line: line,
+            ch: pos + func.length
+          },
+          func,
+          'cm-func'
+        );
+        return _;
+      });
+
+      // 标记变量
+      vars.forEach(v => {
+        let from = 0;
+        let idx = -1;
+        while (~(idx = content.indexOf(v, from))) {
+          this.markText(
+            {
+              line: line,
+              ch: idx
+            },
+            {
+              line: line,
+              ch: idx + v.length
+            },
+            varMap[v],
+            'cm-field'
+          );
+          from = idx + v.length;
+        }
+      });
+    }
+  }
+
+  dispose() {}
+
+  validate() {}
+}
+
+let modeRegisted = false;
+function registerLaunguageMode(cm: typeof CodeMirror) {
+  if (modeRegisted) {
+    return;
+  }
+  modeRegisted = true;
+
+  // 对应 evalMode
+  cm.defineMode('formula', (config: any, parserConfig: any) => {
+    var formula = cm.getMode(config, 'javascript');
+    if (!parserConfig || !parserConfig.base) return formula;
+
+    return cm.multiplexingMode(cm.getMode(config, parserConfig.base), {
+      open: '${',
+      close: '}',
+      mode: formula
+    });
+  });
+
+  cm.defineMIME('text/formula', {name: 'formula'});
+  cm.defineMIME('text/formula-template', {name: 'formula', base: 'htmlmixed'});
+}

package/src/components/icons.tsx

@@ -70,6 +70,7 @@ import ExpandAltIcon from '../icons/expand-alt.svg';
 import CompressAltIcon from '../icons/compress-alt.svg';
 import TransparentIcon from '../icons/transparent.svg';
 import LoadingOutline from '../icons/loading-outline.svg';
+import Star from '../icons/star.svg';
 import AlertSuccess from '../icons/alert-success.svg';
 import AlertInfo from '../icons/alert-info.svg';
 import AlertWarning from '../icons/alert-warning.svg';
@@ -170,6 +171,7 @@ registerIcon('expand-alt', ExpandAltIcon);
 registerIcon('compress-alt', CompressAltIcon);
 registerIcon('transparent', TransparentIcon);
 registerIcon('loading-outline', LoadingOutline);
+registerIcon('star', Star);
 registerIcon('alert-success', AlertSuccess);
 registerIcon('alert-info', AlertInfo);
 registerIcon('alert-warning', AlertWarning);

package/src/components/index.tsx

@@ -12,6 +12,7 @@ import Button from './Button';
 import Checkbox from './Checkbox';
 import Checkboxes from './Selection';
 import Collapse from './Collapse';
+import CollapseGroup from './CollapseGroup';
 import DatePicker from './DatePicker';
 import DateRangePicker from './DateRangePicker';
 import Drawer from './Drawer';
@@ -69,6 +70,7 @@ export {
   Checkbox,
   Checkboxes,
   Collapse,
+  CollapseGroup,
   DatePicker,
   DateRangePicker,
   Drawer,

package/src/icons/star.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>星星</title>
+    <g id="页面-1" stroke-width="1" fill-rule="evenodd">
+        <g id="画板备份-8" transform="translate(-453.000000, -354.000000)">
+            <g id="编组" transform="translate(451.000000, 352.000000)">
+                <rect id="矩形" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+                <path d="M5.991,5.57 L3.50612104,5.93019955 C2.95954884,6.00942879 2.58069251,6.51674109 2.65992175,7.0633133 C2.69148792,7.28107625 2.79399678,7.48234825 2.95156285,7.63593881 L4.75,9.389 L4.75,9.389 L4.32487658,11.8655653 C4.23143888,12.4098886 4.59695386,12.9268961 5.14127715,13.0203338 C5.35808617,13.0575509 5.58111746,13.0222392 5.77582605,12.9198682 L7.999,11.751 L7.999,11.751 L10.223309,12.9201739 C10.712173,13.1771377 11.3167859,12.9891455 11.5737498,12.5002815 C11.6760846,12.3055935 11.7113789,12.0825978 11.6741677,11.8658233 L11.249,9.389 L11.249,9.389 L13.0473242,7.63660227 C13.4428666,7.25116142 13.4510555,6.6180494 13.0656146,6.22250699 C12.9120633,6.06493147 12.7108304,5.96239489 12.4930948,5.93078419 L10.008,5.57 L10.008,5.57 L8.89657099,3.31725295 C8.65221378,2.82196717 8.05261467,2.61854938 7.5573289,2.86290659 C7.36008347,2.96022079 7.20042315,3.11984957 7.10306997,3.31707577 L5.991,5.57 L5.991,5.57 Z" id="图标-填色"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/index.tsx

@@ -89,6 +89,7 @@ import './renderers/Form/Select';
 import './renderers/Form/Static';
 import './renderers/Form/InputDate';
 import './renderers/Form/InputDateRange';
+import './renderers/Form/InputFormula';
 import './renderers/Form/InputRepeat';
 import './renderers/Form/InputTree';
 import './renderers/Form/TreeSelect';