amis 1.5.4 → 1.5.6-beta.5

package/src/components/PopUp.tsx

@@ -0,0 +1,133 @@
+/**
+ * @file PopUp
+ * @description
+ * @author fex
+ */
+
+import React from 'react';
+import {ClassNamesFn, themeable} from '../theme';
+import Transition, {
+  ENTERED,
+  EXITING,
+  EXITED,
+  ENTERING
+} from 'react-transition-group/Transition';
+import Portal from 'react-overlays/Portal';
+import { Icon } from './icons';
+
+
+export interface PopUpPorps {
+  className?: string;
+  style?: {
+    [styleName: string]: string;
+  };
+  overlay?: boolean;
+  onHide?: () => void;
+  classPrefix: string;
+  classnames: ClassNamesFn;
+  [propName: string]: any;
+  isShow?: boolean;
+  container?: any;
+  hideClose?: boolean;
+  placement?: 'left' | 'center' | 'right';
+}
+
+const fadeStyles: {
+  [propName: string]: string;
+} = {
+  [ENTERED]: '',
+  [EXITING]: 'out',
+  [EXITED]: '',
+  [ENTERING]: 'in'
+};
+export class PopUp extends React.PureComponent<PopUpPorps> {
+  static defaultProps = {
+    className: '',
+    overlay: true,
+    isShow: false,
+    container: document.body,
+    hideClose: false,
+  };
+
+  componentDidMount() {
+
+  }
+  handleClick(e: React.MouseEvent) {
+    e.stopPropagation();
+  }
+
+  render() {
+    const {
+      style,
+      children,
+      overlay,
+      onHide,
+      classPrefix: ns,
+      classnames: cx,
+      className,
+      isShow,
+      container,
+      hideClose,
+      placement='center',
+      ...rest
+    } = this.props;
+
+    const outerStyle: any = {
+      ...style,
+    };
+    delete outerStyle.top;
+    return (
+      <Portal container={container}>
+        <Transition
+          mountOnEnter
+          unmountOnExit
+          in={isShow}
+          timeout={500}
+          appear
+        >
+          {(status: string) => {
+              return (
+                <div
+                  className={cx(
+                    `${ns}PopUp`,
+                    className,
+                    fadeStyles[status]
+                  )}
+                  style={outerStyle}
+                  {...rest}
+                  onClick={this.handleClick}
+                >
+                  {overlay && (
+                    <div className={`${ns}PopUp-overlay`} onClick={onHide}/>
+                  )}
+                  <div className={cx(
+                    `${ns}PopUp-inner`
+                  )}
+                  >
+                    {
+                      !hideClose && (
+                        <div className={cx(`${ns}PopUp-closeWrap`, 'text-right')}>
+                          <Icon
+                            icon="close"
+                          className={cx('icon', `${ns}PopUp-close`)}
+                            onClick={onHide}
+                          />
+                        </div>
+                      )
+                    }
+                    <div
+                      className={cx(`${ns}PopUp-content`, `justify-${placement}`)}
+                    >
+                      {children}
+                    </div>
+                  </div>
+                </div>
+              )
+          }}
+        </Transition>
+      </Portal>
+    )
+  }
+}
+
+export default themeable(PopUp);

package/src/components/Progress.tsx

@@ -118,7 +118,7 @@ export class Progress extends React.Component<ProgressProps, Object> {
       };
 
       viewValue = [
-        <div className={cx(prefixCls)}>
+        <div className={cx(prefixCls)} key="circle">
           <Circle
             percent={value}
             strokeColor=""

package/src/components/Steps.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {themeable, ThemeProps} from '../theme';
 import {Icon} from './icons';
 import {BaseSchema} from '../Schema';
+import { isMobile } from '../utils/helper';
 
 export enum StepStatus {
   wait = 'wait',
@@ -78,6 +79,7 @@ export interface StepsProps extends ThemeProps {
     [propName: string]: StepStatus;
   };
   mode?: 'horizontal' | 'vertical';
+  useMobileUI?: boolean;
 }
 
 export function Steps(props: StepsProps) {
@@ -87,7 +89,8 @@ export function Steps(props: StepsProps) {
     className,
     current,
     status,
-    mode = 'horizontal'
+    mode = 'horizontal',
+    useMobileUI
   } = props;
   const FINISH_ICON = 'check';
   const ERROR_ICON = 'close';
@@ -122,8 +125,9 @@ export function Steps(props: StepsProps) {
     };
   }
 
+  const mobileUI = useMobileUI && isMobile();
   return (
-    <ul className={cx('Steps', `Steps--${mode}`, className)}>
+    <ul className={cx('Steps', `Steps--${mode}`, mobileUI ? 'Steps-mobile' : '', className)}>
       {stepsRow.map((step, i) => {
         const {stepStatus, icon} = getStepStatus(step, i);
 
@@ -133,7 +137,8 @@ export function Steps(props: StepsProps) {
             className={cx('StepsItem', `is-${stepStatus}`, step.className)}
           >
             <div className={cx('StepsItem-container')}>
-              <div className={cx('StepsItem-containerIcon')}>
+              <div className={cx('StepsItem-containerIcon',
+                      i < current && 'is-success')}>
                 <span className={cx('StepsItem-icon')}>
                   {icon ? <Icon icon={icon} className="icon" /> : i + 1}
                 </span>

package/src/components/TabsTransferPicker.tsx

@@ -44,7 +44,7 @@ export class TransferPicker extends React.Component<TabsTransferPickerProps> {
     return (
       <PickerContainer
         title={__('Select.placeholder')}
-        popOverRender={({onClose, value, onChange}) => {
+        bodyRender={({onClose, value, onChange}) => {
           return <TabsTransfer {...rest} value={value} onChange={onChange} />;
         }}
         value={value}

package/src/components/TransferPicker.tsx

@@ -19,18 +19,9 @@ export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
 }
 
 export class TransferPicker extends React.Component<TransferPickerProps> {
-  @autobind
-  handleClose() {
-    this.setState({
-      inputValue: '',
-      searchResult: null
-    });
-  }
-
   @autobind
   handleConfirm(value: any) {
     this.props.onChange?.(value);
-    this.handleClose();
   }
 
   render() {
@@ -49,12 +40,11 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
     return (
       <PickerContainer
         title={__('Select.placeholder')}
-        popOverRender={({onClose, value, onChange}) => {
+        bodyRender={({onClose, value, onChange}) => {
           return <Transfer {...rest} value={value} onChange={onChange} />;
         }}
         value={value}
         onConfirm={this.handleConfirm}
-        onCancel={this.handleClose}
         size={size}
       >
         {({onClick, isOpened}) => (

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>
+  );
+}