amis 1.5.6-beta.4 → 1.5.6-beta.5

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/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';

package/src/renderers/Form/InputColor.tsx

@@ -68,12 +68,11 @@ export default class ColorControl extends React.PureComponent<
   };
 
   render() {
-    const {className, classPrefix: ns, value, ...rest} = this.props;
-
+    const {className, classPrefix: ns, value, env, ...rest} = this.props;
     return (
       <div className={cx(`${ns}ColorControl`, className)}>
         <Suspense fallback={<div>...</div>}>
-          <ColorPicker classPrefix={ns} {...rest} value={value || ''} />
+          <ColorPicker classPrefix={ns} {...rest} value={value || ''} useMobileUI={env.useMobileUI}/>
         </Suspense>
       </div>
     );

package/src/renderers/Form/InputDate.tsx

@@ -424,6 +424,7 @@ export default class DateControl extends React.PureComponent<
       format,
       timeFormat,
       valueFormat,
+      env,
       largeMode,
       render,
       ...rest
@@ -441,6 +442,7 @@ export default class DateControl extends React.PureComponent<
           format={valueFormat || format}
           {...this.state}
           classnames={cx}
+          useMobileUI={env.useMobileUI}
           schedules={this.state.schedules}
           largeMode={largeMode}
           onScheduleClick={this.onScheduleClick.bind(this)}

package/src/renderers/Form/InputDateRange.tsx

@@ -172,6 +172,7 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 
@@ -186,6 +187,7 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
+          useMobileUI={env.useMobileUI}
         />
       </div>
     );