amis-ui 1.0.0-beta.0

package/src/components/ResultTreeList.tsx

@@ -0,0 +1,312 @@
+/**
+ * 结果树(暂时不支持结果排序)
+ */
+import React from 'react';
+import {cloneDeep, isEqual, omit} from 'lodash';
+
+import {Option, Options} from './Select';
+import {ThemeProps, themeable} from 'amis-core';
+import {autobind, noop} from 'amis-core';
+import {LocaleProps, localeable} from 'amis-core';
+import {BaseSelectionProps} from './Selection';
+import Tree from './Tree';
+import TransferSearch from './TransferSearch';
+
+export interface ResultTreeListProps
+  extends ThemeProps,
+    LocaleProps,
+    BaseSelectionProps {
+  className?: string;
+  title?: string;
+  searchable?: boolean;
+  value: Array<Option>;
+  valueField: string;
+  onSearch?: Function;
+  onChange: (value: Array<Option>, optionModified?: boolean) => void;
+  placeholder: string;
+  itemRender: (option: Option, states: ItemRenderStates) => JSX.Element;
+  itemClassName?: string;
+  cellRender?: (
+    column: {
+      name: string;
+      label: string;
+      [propName: string]: any;
+    },
+    option: Option,
+    colIndex: number,
+    rowIndex: number
+  ) => JSX.Element;
+}
+
+export interface ItemRenderStates {
+  index: number;
+  disabled?: boolean;
+  onChange: (value: any, name: string) => void;
+}
+
+interface ResultTreeListState {
+  searching: Boolean;
+  treeOptions: Options;
+  searchTreeOptions: Options;
+}
+
+// 递归找到对应选中节点(dfs)
+function getDeep(
+  node: Option,
+  cb: (node: Option) => boolean,
+  pathNodes: Array<Option>,
+  valueField: string
+) {
+  if (node[valueField] && cb(node)) {
+    node.isChecked = true;
+    for (let i = pathNodes.length - 2; i >= 0; i--) {
+      if (!pathNodes[i].isChecked) {
+        pathNodes[i].isChecked = true;
+        continue;
+      }
+      break;
+    }
+  } else if (node.children && Array.isArray(node.children)) {
+    node.children.forEach(n => {
+      pathNodes.push(n);
+      getDeep(n, cb, pathNodes, valueField);
+      pathNodes.pop();
+    });
+  }
+}
+
+// 递归删除树多余的节点
+function deepCheckedTreeNode(nodes: Array<Option>) {
+  let arr: Array<Option> = [];
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.isChecked) {
+      if (node.children && Array.isArray(node.children)) {
+        node.children = deepCheckedTreeNode(node.children);
+      }
+      arr.push(node);
+    }
+  }
+  return arr;
+}
+
+// 根据选项获取到结果
+function getResultOptions(
+  value: Options = [],
+  options: Options,
+  valueField: string
+) {
+  const newOptions = cloneDeep(options) as Array<Option>;
+  const callBack = (node: Option) =>
+    !!(value || []).find(target => target[valueField] === node[valueField]);
+  newOptions &&
+    newOptions.forEach(op => {
+      getDeep(op, callBack, [op], valueField);
+    });
+  return deepCheckedTreeNode(newOptions);
+}
+
+// 在包含回调函数情况下，遍历树
+function deepTree(nodes: Options, cb: (node: Option) => void) {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    cb(node);
+    if (node.children && Array.isArray(node.children)) {
+      deepTree(node.children, cb);
+    }
+  }
+}
+
+// 树的节点删除
+function deepDeleteTree(nodes: Options, option: Option, valueField: string) {
+  let arr: Array<Option> = [];
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (isEqual(node, option)) {
+      continue;
+    }
+    if (node.children && Array.isArray(node.children)) {
+      node.children = deepDeleteTree(node.children, option, valueField);
+    }
+    if (
+      (node.children && node.children.length > 0) ||
+      node[valueField] !== undefined
+    ) {
+      arr.push(node);
+    }
+  }
+  return arr;
+}
+
+export class BaseResultTreeList extends React.Component<
+  ResultTreeListProps,
+  ResultTreeListState
+> {
+  static itemRender(option: any) {
+    return <span>{`${option.scopeLabel || ''}${option.label}`}</span>;
+  }
+
+  static defaultProps: Pick<ResultTreeListProps, 'placeholder' | 'itemRender'> =
+    {
+      placeholder: 'placeholder.selectData',
+      itemRender: BaseResultTreeList.itemRender
+    };
+
+  state: ResultTreeListState = {
+    searching: false,
+    treeOptions: [],
+    searchTreeOptions: []
+  };
+
+  static getDerivedStateFromProps(props: ResultTreeListProps) {
+    const newOptions = getResultOptions(
+      props.value,
+      props.options,
+      props.valueField
+    );
+    return {
+      treeOptions: cloneDeep(newOptions)
+    };
+  }
+
+  // 删除非选中节点
+  @autobind
+  deleteTreeChecked(option: Option) {
+    const {value = [], onChange, valueField} = this.props;
+    const {searching, treeOptions} = this.state;
+    let temNode: Options = [];
+    const cb = (node: Option) => {
+      if (isEqual(node, option)) {
+        temNode = [node];
+      }
+    };
+    deepTree(treeOptions || [], cb);
+    let arr: Options = [];
+    const cb2 = (node: Option) => {
+      if (node.isChecked && node[valueField]) {
+        arr.push(node);
+      }
+    };
+    deepTree(temNode, cb2);
+    onChange &&
+      onChange(
+        value.filter(
+          item =>
+            !arr.find(arrItem =>
+              isEqual(omit(arrItem, ['isChecked', 'childrens']), item)
+            )
+        )
+      );
+
+    // 搜索时，重新生成树
+    searching && this.deleteResultTreeNode(option);
+  }
+
+  // 搜索树点击删除时，删除对应节点
+  deleteResultTreeNode(option: Option) {
+    const arr = deepDeleteTree(
+      cloneDeep(this.state.searchTreeOptions) || [],
+      option,
+      this.props.valueField
+    );
+    this.setState({searchTreeOptions: arr});
+  }
+
+  @autobind
+  search(inputValue: string) {
+    // 结果为空，直接清空
+    if (!inputValue) {
+      this.clearSearch();
+      return;
+    }
+
+    const {valueField, onSearch} = this.props;
+    let temOptions: Array<Option> = this.state.treeOptions || [];
+    const cb = (node: Option) => {
+      node.isChecked = false;
+      return true;
+    };
+    deepTree(temOptions, cb);
+
+    const callBack = (node: Option) => onSearch?.(inputValue, node);
+
+    temOptions &&
+      temOptions.forEach(op => {
+        getDeep(op, callBack, [op], valueField);
+      });
+
+    this.setState({
+      searching: true,
+      searchTreeOptions: deepCheckedTreeNode(temOptions)
+    });
+  }
+
+  @autobind
+  clearSearch() {
+    this.setState({
+      searching: false,
+      searchTreeOptions: []
+    });
+  }
+
+  renderTree() {
+    const {
+      className,
+      classnames: cx,
+      value,
+      placeholder,
+      valueField,
+      itemRender,
+      translate: __
+    } = this.props;
+
+    const {treeOptions, searching, searchTreeOptions} = this.state;
+
+    return (
+      <div className={cx('ResultTreeList', className)}>
+        {Array.isArray(value) && value.length ? (
+          <Tree
+            className={cx('Transfer-tree')}
+            options={!searching ? treeOptions : searchTreeOptions}
+            valueField={valueField}
+            value={[]}
+            onChange={noop}
+            showIcon={false}
+            itemRender={itemRender}
+            removable
+            onDelete={(option: Option) => this.deleteTreeChecked(option)}
+          />
+        ) : (
+          <div className={cx('Selections-placeholder')}>{__(placeholder)}</div>
+        )}
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      className,
+      title,
+      searchable,
+      translate: __,
+      placeholder = __('Transfer.searchKeyword')
+    } = this.props;
+
+    return (
+      <div className={cx('Selections', className)}>
+        {title ? <div className={cx('Selections-title')}>{title}</div> : null}
+        {searchable ? (
+          <TransferSearch
+            placeholder={placeholder}
+            onSearch={this.search}
+            onCancelSearch={this.clearSearch}
+          />
+        ) : null}
+        {this.renderTree()}
+      </div>
+    );
+  }
+}
+
+export default themeable(localeable(BaseResultTreeList));

package/src/components/RichText.tsx

@@ -0,0 +1,312 @@
+/**
+ * @file RichText
+ * @description
+ * @author fex
+ */
+
+import React from 'react';
+
+// @ts-ignore
+import FroalaEditor from 'froala-editor';
+// @ts-ignore
+import Froala from 'froala-editor/js/froala_editor.min.js';
+import 'froala-editor/js/plugins/align.min';
+import 'froala-editor/js/plugins/colors.min';
+import 'froala-editor/js/plugins/char_counter.min';
+import 'froala-editor/js/plugins/code_view.min';
+import 'froala-editor/js/plugins/draggable.min';
+import 'froala-editor/js/plugins/entities.min';
+import 'froala-editor/js/plugins/font_family.min';
+import 'froala-editor/js/plugins/font_size.min';
+import 'froala-editor/js/plugins/forms.min';
+import 'froala-editor/js/plugins/fullscreen.min';
+import 'froala-editor/js/plugins/help.min';
+import 'froala-editor/js/plugins/image.min';
+import 'froala-editor/js/plugins/inline_class.min';
+import 'froala-editor/js/plugins/inline_style.min';
+import 'froala-editor/js/plugins/line_breaker.min';
+import 'froala-editor/js/plugins/line_height.min';
+import 'froala-editor/js/plugins/link.min';
+import 'froala-editor/js/plugins/lists.min';
+import 'froala-editor/js/plugins/paragraph_format.min';
+import 'froala-editor/js/plugins/paragraph_style.min';
+import 'froala-editor/js/plugins/print.min';
+import 'froala-editor/js/plugins/quick_insert.min';
+import 'froala-editor/js/plugins/quote.min';
+import 'froala-editor/js/plugins/save.min';
+import 'froala-editor/js/plugins/special_characters.min';
+import 'froala-editor/js/plugins/table.min';
+import 'froala-editor/js/plugins/url.min';
+import 'froala-editor/js/plugins/video.min';
+import 'froala-editor/js/plugins/word_paste.min';
+import 'froala-editor/js/languages/zh_cn.js';
+
+// Require Editor CSS files.
+// import 'froala-editor/css/froala_style.min.css';
+// import 'froala-editor/css/froala_editor.pkgd.min.css';
+
+export interface FroalaEditorComponentProps {
+  config: any;
+  model: string;
+  onModelChange: (value: string) => void;
+}
+
+// 代码来源于：https://github.com/froala/react-froala-wysiwyg/blob/master/lib/FroalaEditorFunctionality.jsx
+// 改动原因是model 同步有些问题，有时候不更新，所以基于官方代码改造一下。
+// 目前发现的问题是，如果 model 数据修改，如果此时 editor 还没有初始化完成则不会同步成功
+class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps> {
+  listeningEvents: any;
+  element: any;
+  editor: any;
+  config: any;
+  editorInitialized: any;
+  INNER_HTML_ATTR: any;
+  oldModel: any;
+  el: any;
+  _initEvents: any;
+
+  constructor(props: FroalaEditorComponentProps) {
+    super(props);
+
+    this.listeningEvents = [];
+    this.element = null;
+    this.editor = null;
+    this.config = {
+      immediateReactModelUpdate: false,
+      reactIgnoreAttrs: null
+    };
+
+    this.editorInitialized = false;
+    this.INNER_HTML_ATTR = 'innerHTML';
+
+    this.oldModel = null;
+  }
+
+  // After first time render.
+  componentDidMount() {
+    this.createEditor();
+  }
+
+  componentWillUnmount() {
+    this.destroyEditor();
+  }
+
+  componentDidUpdate() {
+    if (JSON.stringify(this.oldModel) == JSON.stringify(this.props.model)) {
+      return;
+    }
+
+    this.setContent();
+  }
+
+  // Return cloned object
+  clone(item: any) {
+    const me = this;
+    if (!item) {
+      return item;
+    } // null, undefined values check
+
+    let types = [Number, String, Boolean],
+      result: any;
+
+    // normalizing primitives if someone did new String('aaa'), or new Number('444');
+    types.forEach(function (type) {
+      if (item instanceof type) {
+        result = type(item);
+      }
+    });
+
+    if (typeof result == 'undefined') {
+      if (Object.prototype.toString.call(item) === '[object Array]') {
+        result = [];
+        item.forEach(function (child: any, index: number, array: Array<any>) {
+          result[index] = me.clone(child);
+        });
+      } else if (typeof item == 'object') {
+        // testing that this is DOM
+        if (item.nodeType && typeof item.cloneNode == 'function') {
+          result = item.cloneNode(true);
+        } else if (!item.prototype) {
+          // check that this is a literal
+          if (item instanceof Date) {
+            result = new Date(item);
+          } else {
+            // it is an object literal
+            result = {};
+            for (var i in item) {
+              result[i] = me.clone(item[i]);
+            }
+          }
+        } else {
+          if (false && item.constructor) {
+            result = new item.constructor();
+          } else {
+            result = item;
+          }
+        }
+      } else {
+        result = item;
+      }
+    }
+    return result;
+  }
+
+  createEditor() {
+    if (this.editorInitialized) {
+      return;
+    }
+
+    this.config = this.clone(this.props.config || this.config);
+    this.config = {...this.config};
+
+    this.element = this.el;
+
+    if (this.props.model) {
+      this.element.innerHTML = this.props.model;
+    }
+
+    this.setContent();
+
+    // Default initialized.
+    this.registerEvent(
+      'initialized',
+      this.config.events && this.config.events.initialized
+    );
+
+    // Check if events are set.
+    if (!this.config.events) this.config.events = {};
+    this.config.events.initialized = () => {
+      this.editorInitialized = true;
+      this.initListeners();
+    };
+
+    this.editor = new FroalaEditor(this.element, this.config);
+  }
+
+  setContent() {
+    if (this.props.model || this.props.model == '') {
+      this.oldModel = this.props.model;
+
+      if (this.editorInitialized) {
+        this.setNormalTagContent();
+      } else {
+        if (!this._initEvents) this._initEvents = [];
+        this._initEvents.push(() => this.setNormalTagContent());
+      }
+    }
+  }
+
+  setNormalTagContent() {
+    let self = this;
+
+    self.editor.html && self.editor.html.set(self.props.model || '');
+    if (self.editorInitialized && self.editor.undo) {
+      //This will reset the undo stack everytime the model changes externally. Can we fix this?
+      self.editor.undo.reset();
+      self.editor.undo.saveStep();
+    }
+  }
+
+  destroyEditor() {
+    if (this.element) {
+      this.editor.destroy && this.editor.destroy();
+      this.listeningEvents.length = 0;
+      this.element = null;
+      this.editorInitialized = false;
+      this._initEvents = [];
+    }
+  }
+
+  getEditor() {
+    if (this.element) {
+      return this.editor;
+    }
+
+    return null;
+  }
+
+  updateModel() {
+    if (!this.props.onModelChange) {
+      return;
+    }
+
+    let modelContent = '';
+
+    let returnedHtml = this.editor.html.get();
+    if (typeof returnedHtml === 'string') {
+      modelContent = returnedHtml;
+    }
+
+    this.oldModel = modelContent;
+    this.props.onModelChange(modelContent);
+  }
+
+  initListeners() {
+    let self = this;
+
+    // bind contentChange and keyup event to froalaModel
+    this.editor.events.on('contentChanged', function () {
+      self.updateModel();
+    });
+    if (this.config.immediateReactModelUpdate) {
+      this.editor.events.on('keyup', function () {
+        self.updateModel();
+      });
+    }
+
+    // Call init events.
+    if (this._initEvents) {
+      for (let i = 0; i < this._initEvents.length; i++) {
+        this._initEvents[i].call(this.editor);
+      }
+    }
+  }
+
+  // register event on jquery editor element
+  registerEvent(eventName: string, callback: Function) {
+    if (!eventName || !callback) {
+      return;
+    }
+
+    if (eventName == 'initialized') {
+      if (!this._initEvents) this._initEvents = [];
+      this._initEvents.push(callback);
+    } else {
+      if (!this.config.events) {
+        this.config.events = {};
+      }
+
+      this.config.events[eventName] = callback;
+    }
+  }
+
+  render() {
+    return (
+      <textarea ref={el => (this.el = el)}>{this.props.children}</textarea>
+    );
+  }
+}
+
+export default class extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    Froala.VIDEO_PROVIDERS = [
+      {
+        test_regex: /.*/,
+        url_regex: '',
+        url_text: '',
+        html: '<span class="fr-video fr-dvb fr-draggable" contenteditable="false" draggable="true"><video class="fr-draggable" controls="" data-msg="ok" data-status="0" src="{url}" style="width: 600px;"></video></span>'
+      }
+    ];
+  }
+
+  render() {
+    return (
+      <FroalaEditorComponent
+        config={this.props.config}
+        model={this.props.model}
+        onModelChange={this.props.onModelChange}
+      />
+    );
+  }
+}