amis-ui 1.0.0-beta.0

package/src/components/formula/plugin.ts

@@ -0,0 +1,252 @@
+/**
+ * @file 扩展 codemirror
+ */
+
+import type CodeMirror from 'codemirror';
+import {eachTree} from 'amis-core';
+import type {FormulaEditorProps, VariableItem} from './Editor';
+
+export function editorFactory(
+  dom: HTMLElement,
+  cm: typeof CodeMirror,
+  props: any
+) {
+  registerLaunguageMode(cm);
+
+  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!);
+    }
+  }
+
+  // 计算 `${`、`}` 括号的位置，如 ${a}+${b}, 结果是 [ { from: 0, to: 3 }, { from: 5, to: 8 } ]
+  computedBracesPosition(exp: string) {
+    const braces: {begin: number; end: number}[] = [];
+
+    exp?.replace(/\$\{/g, (val, offset) => {
+      if (val) {
+        const charArr = exp.slice(offset + val.length).split('');
+        const cache = ['${'];
+
+        for (let index = 0; index < charArr.length; index++) {
+          const char = charArr[index];
+          if (char === '$' && charArr[index + 1] === '{') {
+            cache.push('${');
+          } else if (char === '}') {
+            cache.pop();
+          }
+
+          if (cache.length === 0) {
+            braces.push({begin: offset + 2, end: index + offset + 2});
+            break;
+          }
+        }
+      }
+      return '';
+    });
+
+    return braces;
+  }
+
+  // 判断字符串是否在 ${} 中
+  checkStrIsInBraces(
+    [from, to]: number[],
+    braces: {begin: number; end: number}[]
+  ) {
+    let isIn = false;
+    if (braces.length) {
+      for (let index = 0; index < braces.length; index++) {
+        const brace = braces[index];
+        if (from > brace.begin && to <= brace.end) {
+          isIn = true;
+          break;
+        }
+      }
+    }
+    return isIn;
+  }
+
+  insertBraces(originFrom: CodeMirror.Position, originTo: CodeMirror.Position) {
+    const str = this.editor.getValue();
+    const braces = this.computedBracesPosition(str);
+
+    if (!this.checkStrIsInBraces([originFrom.ch, originTo.ch], braces)) {
+      this.editor.setCursor({
+        line: originFrom.line,
+        ch: originFrom.ch
+      });
+      this.editor.replaceSelection('${');
+
+      this.editor.setCursor({
+        line: originTo.line,
+        ch: originTo.ch + 2
+      });
+      this.editor.replaceSelection('}');
+    }
+  }
+
+  insertContent(value: any, type?: 'variable' | 'func') {
+    const from = this.editor.getCursor();
+    const {evalMode} = this.getProps();
+    if (type === 'variable') {
+      this.editor.replaceSelection(value.key);
+      const to = this.editor.getCursor();
+
+      this.markText(from, to, value.name, 'cm-field');
+
+      !evalMode && this.insertBraces(from, to);
+    } else if (type === 'func') {
+      this.editor.replaceSelection(`${value}()`);
+      const 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
+      });
+
+      if (!evalMode) {
+        this.insertBraces(from, to);
+        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 => {
+      if (item.value) {
+        const key = item.value;
+        varMap[key] = 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

@@ -0,0 +1,267 @@
+/**
+ * @file Icon
+ * @description
+ * @author fex
+ */
+import React from 'react';
+
+import CloseIcon from '../icons/close.svg';
+import CloseSmallIcon from '../icons/close-small.svg';
+import StatusCloseIcon from '../icons/status-close.svg';
+import UnDoIcon from '../icons/undo.svg';
+import ReDoIcon from '../icons/redo.svg';
+import EnterIcon from '../icons/enter.svg';
+import VolumeIcon from '../icons/volume.svg';
+import MuteIcon from '../icons/mute.svg';
+import PlayIcon from '../icons/play.svg';
+import PauseIcon from '../icons/pause.svg';
+import LeftArrowIcon from '../icons/left-arrow.svg';
+import RightArrowIcon from '../icons/right-arrow.svg';
+import CheckIcon from '../icons/check.svg';
+import PlusIcon from '../icons/plus.svg';
+import MinusIcon from '../icons/minus.svg';
+import PencilIcon from '../icons/pencil.svg';
+import ViewIcon from '../icons/view.svg';
+import RemoveIcon from '../icons/remove.svg';
+import RetryIcon from '../icons/retry.svg';
+import UploadIcon from '../icons/upload.svg';
+import DownloadIcon from '../icons/download.svg';
+import FileIcon from '../icons/file.svg';
+import StatusSuccessIcon from '../icons/status-success.svg';
+import StatusFailIcon from '../icons/status-fail.svg';
+import StatusInfoIcon from '../icons/status-info.svg';
+import StatusWarningIcon from '../icons/status-warning.svg';
+import SuccessIcon from '../icons/success.svg';
+import FailIcon from '../icons/fail.svg';
+import SearchIcon from '../icons/search.svg';
+import BackIcon from '../icons/back.svg';
+import MoveIcon from '../icons/move.svg';
+import InfoIcon from '../icons/info.svg';
+import LocationIcon from '../icons/location.svg';
+import DragBarIcon from '../icons/drag-bar.svg';
+import ReloadIcon from '../icons/reload.svg';
+import ExchangeIcon from '../icons/exchange.svg';
+import ColmunsIcon from '../icons/columns.svg';
+import CalendarIcon from '../icons/calendar.svg';
+import ClockIcon from '../icons/clock.svg';
+import TreeDownIcon from '../icons/tree-down.svg';
+import CloudUploadIcon from '../icons/cloud-upload.svg';
+import ImageIcon from '../icons/image.svg';
+import RefreshIcon from '../icons/refresh.svg';
+import DragIcon from '../icons/drag.svg';
+import EditIcon from '../icons/edit.svg';
+import DeskEmptyIcon from '../icons/desk-empty.svg';
+
+import CopyIcon from '../icons/copy.svg';
+import FilterIcon from '../icons/filter.svg';
+import CaretIcon from '../icons/caret.svg';
+import RightArrowBoldIcon from '../icons/right-arrow-bold.svg';
+import DownArrowBoldIcon from '../icons/down-arrow-bold.svg';
+import ColumnFilterIcon from '../icons/column-filter.svg';
+import ZoomInIcon from '../icons/zoom-in.svg';
+import ZoomOutIcon from '../icons/zoom-out.svg';
+import QuestionIcon from '../icons/question.svg';
+import QuestionMarkIcon from '../icons/question-mark.svg';
+import WindowRestoreIcon from '../icons/window-restore.svg';
+import InfoCircleIcon from '../icons/info-circle.svg';
+import WarningIcon from '../icons/warning.svg';
+import WarningMarkIcon from '../icons/warning-mark.svg';
+import ScheduleIcon from '../icons/schedule.svg';
+import HomeIcon from '../icons/home.svg';
+import FolderIcon from '../icons/folder.svg';
+import SortDefaultIcon from '../icons/sort-default.svg';
+import SortAscIcon from '../icons/sort-asc.svg';
+import SortDescIcon from '../icons/sort-desc.svg';
+import SettingIcon from '../icons/setting.svg';
+import PlusCicleIcon from '../icons/plus-cicle.svg';
+import PlusFineIcon from '../icons/plus-fine.svg';
+import EllipsisVIcon from '../icons/ellipsis-v.svg';
+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';
+import AlertDanger from '../icons/alert-danger.svg';
+import FunctionIcon from '../icons/function.svg';
+import InputClearIcon from '../icons/input-clear.svg';
+import SliderHandleIcon from '../icons/slider-handle-icon.svg';
+import TrashIcon from '../icons/trash.svg';
+import MenuIcon from '../icons/menu.svg';
+import UserRemove from '../icons/user-remove.svg';
+import Role from '../icons/role.svg';
+import Department from '../icons/department.svg';
+import Post from '../icons/post.svg';
+import DotIcon from '../icons/dot.svg';
+import Invisible from '../icons/invisible.svg';
+import DateIcon from '../icons/date.svg';
+
+// 兼容原来的用法，后续不直接试用。
+
+export const closeIcon = <CloseIcon />;
+export const unDoIcon = <UnDoIcon />;
+export const reDoIcon = <ReDoIcon />;
+export const enterIcon = <EnterIcon />;
+export const volumeIcon = <VolumeIcon />;
+export const muteIcon = <MuteIcon />;
+export const playIcon = <PlayIcon />;
+export const pauseIcon = <PauseIcon />;
+export const leftArrowIcon = <LeftArrowIcon />;
+export const rightArrowIcon = <RightArrowIcon />;
+const iconFactory: {
+  [propName: string]: React.ReactType<{}>;
+} = {};
+
+export function getIcon(key: string) {
+  return iconFactory[key];
+}
+
+export function hasIcon(iconName: string) {
+  return !!getIcon(iconName);
+}
+
+export function registerIcon(key: string, component: React.ReactType<{}>) {
+  iconFactory[key] = component;
+}
+
+registerIcon('close', CloseIcon);
+registerIcon('close-small', CloseSmallIcon);
+registerIcon('status-close', StatusCloseIcon);
+registerIcon('undo', UnDoIcon);
+registerIcon('redo', ReDoIcon);
+registerIcon('enter', EnterIcon);
+registerIcon('volume', VolumeIcon);
+registerIcon('mute', MuteIcon);
+registerIcon('play', PlayIcon);
+registerIcon('pause', PauseIcon);
+registerIcon('left-arrow', LeftArrowIcon);
+registerIcon('right-arrow', RightArrowIcon);
+registerIcon('prev', LeftArrowIcon);
+registerIcon('next', RightArrowIcon);
+registerIcon('check', CheckIcon);
+registerIcon('plus', PlusIcon);
+registerIcon('add', PlusIcon);
+registerIcon('minus', MinusIcon);
+registerIcon('pencil', PencilIcon);
+registerIcon('view', ViewIcon);
+registerIcon('remove', RemoveIcon);
+registerIcon('retry', RetryIcon);
+registerIcon('upload', UploadIcon);
+registerIcon('download', DownloadIcon);
+registerIcon('file', FileIcon);
+registerIcon('status-success', StatusSuccessIcon);
+registerIcon('status-fail', StatusFailIcon);
+registerIcon('status-info', StatusInfoIcon);
+registerIcon('status-warning', StatusWarningIcon);
+registerIcon('success', SuccessIcon);
+registerIcon('fail', FailIcon);
+registerIcon('warning', WarningIcon);
+registerIcon('warning-mark', WarningMarkIcon);
+registerIcon('search', SearchIcon);
+registerIcon('back', BackIcon);
+registerIcon('move', MoveIcon);
+registerIcon('info', InfoIcon);
+registerIcon('info-circle', InfoCircleIcon);
+registerIcon('location', LocationIcon);
+registerIcon('drag-bar', DragBarIcon);
+registerIcon('reload', ReloadIcon);
+registerIcon('exchange', ExchangeIcon);
+registerIcon('columns', ColmunsIcon);
+registerIcon('calendar', CalendarIcon);
+registerIcon('clock', ClockIcon);
+registerIcon('copy', CopyIcon);
+registerIcon('filter', FilterIcon);
+registerIcon('column-filter', ColumnFilterIcon);
+registerIcon('caret', CaretIcon);
+registerIcon('right-arrow-bold', RightArrowBoldIcon);
+registerIcon('down-arrow-bold', DownArrowBoldIcon);
+registerIcon('zoom-in', ZoomInIcon);
+registerIcon('zoom-out', ZoomOutIcon);
+registerIcon('question', QuestionIcon);
+registerIcon('question-mark', QuestionMarkIcon);
+registerIcon('window-restore', WindowRestoreIcon);
+registerIcon('schedule', ScheduleIcon);
+registerIcon('home', HomeIcon);
+registerIcon('folder', FolderIcon);
+registerIcon('sort-default', SortDefaultIcon);
+registerIcon('sort-asc', SortAscIcon);
+registerIcon('sort-desc', SortDescIcon);
+registerIcon('setting', SettingIcon);
+registerIcon('plus-cicle', PlusCicleIcon);
+registerIcon('ellipsis-v', EllipsisVIcon);
+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);
+registerIcon('alert-danger', AlertDanger);
+registerIcon('tree-down', TreeDownIcon);
+registerIcon('function', FunctionIcon);
+registerIcon('input-clear', InputClearIcon);
+registerIcon('slider-handle', SliderHandleIcon);
+registerIcon('cloud-upload', CloudUploadIcon);
+registerIcon('image', ImageIcon);
+registerIcon('refresh', RefreshIcon);
+registerIcon('trash', TrashIcon);
+registerIcon('menu', MenuIcon);
+registerIcon('user-remove', UserRemove);
+registerIcon('role', Role);
+registerIcon('department', Department);
+registerIcon('post', Post);
+registerIcon('dot', DotIcon);
+registerIcon('drag', DragIcon);
+registerIcon('edit', EditIcon);
+registerIcon('desk-empty', DeskEmptyIcon);
+registerIcon('invisible', Invisible);
+registerIcon('plus-fine', PlusFineIcon);
+registerIcon('date', DateIcon);
+
+export function Icon({
+  icon,
+  className,
+  ...rest
+}: {
+  icon: string;
+} & React.ComponentProps<any>) {
+  // jest 运行环境下，把指定的 icon 也输出到 snapshot 中。
+  if (typeof jest !== 'undefined') {
+    rest.icon = icon;
+  }
+
+  const Component = getIcon(icon);
+  return Component ? (
+    <Component {...rest} className={`${className || ''} icon-${icon}`} />
+  ) : (
+    <span className="text-danger">没有 icon {icon}</span>
+  );
+}
+
+export {
+  InputClearIcon,
+  CloseIcon,
+  UnDoIcon,
+  ReDoIcon,
+  EnterIcon,
+  VolumeIcon,
+  MuteIcon,
+  PlayIcon,
+  PauseIcon,
+  ReloadIcon,
+  LeftArrowIcon,
+  RightArrowIcon,
+  CheckIcon,
+  PlusIcon,
+  MinusIcon,
+  PencilIcon,
+  FunctionIcon,
+  MenuIcon,
+  UserRemove,
+  Role,
+  Department,
+  Post
+};

package/src/components/index.tsx

@@ -0,0 +1,133 @@
+/**
+ * @file Index
+ * @description
+ * @author fex
+ */
+
+import NotFound from './404';
+import {default as Alert, alert, confirm, prompt} from './Alert';
+import {default as ContextMenu, openContextMenus} from './ContextMenu';
+import AsideNav from './AsideNav';
+import Avatar from './Avatar';
+import Button from './Button';
+import Breadcrumb from './Breadcrumb';
+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';
+import {default as Tabs, Tab} from './Tabs';
+import Editor from './Editor';
+import Html from './Html';
+import * as Icons from './icons';
+import Layout from './Layout';
+import {LazyComponent} from 'amis-core';
+import Modal from './Modal';
+import Overlay from './Overlay';
+import PopOver from './PopOver';
+import Radios from './Radios';
+import Range from './Range';
+import Rating from './Rating';
+// import RichText from './RichText';
+import Select from './Select';
+import SparkLine from './SparkLine';
+import Spinner from './Spinner';
+import Switch from './Switch';
+import Textarea from './Textarea';
+import TitleBar from './TitleBar';
+import {default as ToastComponent, toast} from './Toast';
+import Tooltip from './Tooltip';
+import TooltipWrapper from './TooltipWrapper';
+import Tree from './Tree';
+import Alert2 from './Alert2';
+import Transfer from './Transfer';
+import TabsTransfer from './TabsTransfer';
+import ResultBox from './ResultBox';
+import InputBox from './InputBox';
+import ListGroup from './ListGroup';
+import NumberInput from './NumberInput';
+import ArrayInput from './ArrayInput';
+import SearchBox from './SearchBox';
+import AnchorNav from './AnchorNav';
+import Selection from './Selection';
+import GroupedSelection from './GroupedSelection';
+import ChainedSelection from './ChainedSelection';
+import TableSelection from './TableSelection';
+import TreeSelection from './TreeSelection';
+import AssociatedSelection from './AssociatedSelection';
+import PullRefresh from './PullRefresh';
+import Table from './table';
+import SchemaVariableListPicker from './schema-editor/SchemaVariableListPicker';
+import SchemaVariableList from './schema-editor/SchemaVariableList';
+import FormulaPicker from './formula/Picker';
+import InputJSONSchema from './json-schema';
+
+export {
+  NotFound,
+  Alert as AlertComponent,
+  alert,
+  Avatar,
+  confirm,
+  prompt,
+  ContextMenu,
+  openContextMenus,
+  Alert2,
+  AsideNav,
+  Button,
+  Breadcrumb,
+  Checkbox,
+  Checkboxes,
+  Collapse,
+  CollapseGroup,
+  DatePicker,
+  DateRangePicker,
+  Drawer,
+  Tabs,
+  Tab,
+  Editor,
+  Html,
+  Icons,
+  Layout,
+  LazyComponent,
+  Modal,
+  Overlay,
+  PopOver,
+  Radios,
+  Range,
+  Rating,
+  // RichText,
+  Select,
+  SparkLine,
+  Spinner,
+  Switch,
+  Textarea,
+  TitleBar,
+  ToastComponent,
+  toast,
+  Tooltip,
+  TooltipWrapper,
+  Tree,
+  Transfer,
+  TabsTransfer,
+  Selection,
+  GroupedSelection,
+  ChainedSelection,
+  TableSelection,
+  TreeSelection,
+  AssociatedSelection,
+  ResultBox,
+  InputBox,
+  SearchBox,
+  ListGroup,
+  NumberInput,
+  ArrayInput,
+  AnchorNav,
+  PullRefresh,
+  Table,
+  SchemaVariableListPicker,
+  SchemaVariableList,
+  FormulaPicker,
+  InputJSONSchema
+};