amis 1.4.0 → 1.4.2-beta.12

package/src/components/RichText.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 
 // @ts-ignore
-import FroalaEditorComponent from 'react-froala-wysiwyg';
+import FroalaEditor from 'froala-editor';
 // @ts-ignore
 import Froala from 'froala-editor/js/froala_editor.min.js';
 import 'froala-editor/js/plugins/align.min';
@@ -45,7 +45,249 @@ import 'froala-editor/js/languages/zh_cn.js';
 import 'froala-editor/css/froala_style.min.css';
 import 'froala-editor/css/froala_editor.pkgd.min.css';
 
-export default class FroalaEditor extends React.Component<any, any> {
+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 = [
@@ -61,7 +303,6 @@ export default class FroalaEditor extends React.Component<any, any> {
   render() {
     return (
       <FroalaEditorComponent
-        tag="textarea"
         config={this.props.config}
         model={this.props.model}
         onModelChange={this.props.onModelChange}

package/src/components/SearchBox.tsx

@@ -54,7 +54,7 @@ export class SearchBox extends React.Component<SearchBoxProps> {
 
   @autobind
   handleCancel() {
-    const {onActiveChange, onChange, onCancel} = this.props;
+    const {onActiveChange, onCancel, onChange} = this.props;
     onActiveChange?.(false);
     onCancel?.();
     onChange?.('');
@@ -62,14 +62,14 @@ export class SearchBox extends React.Component<SearchBoxProps> {
 
   @autobind
   handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const {onChange, onSearch, searchImediately} = this.props;
+    const {searchImediately, onChange} = this.props;
     onChange?.(e.currentTarget.value);
     searchImediately && this.lazyEmitSearch();
   }
 
   @autobind
   handleSearch() {
-    const {value, onSearch} = this.props;
+    const {onSearch, value} = this.props;
     onSearch?.(value || '');
   }
 
@@ -84,14 +84,13 @@ export class SearchBox extends React.Component<SearchBoxProps> {
   render() {
     const {
       classnames: cx,
-      value,
       active,
       name,
       className,
-      onChange,
       disabled,
       placeholder,
       mini,
+      value,
       translate: __
     } = this.props;
 

package/src/components/Select.tsx

@@ -20,7 +20,8 @@ import {
   findTree,
   autobind,
   ucFirst,
-  normalizeNodePath
+  normalizeNodePath,
+  isMobile
 } from '../utils/helper';
 import find from 'lodash/find';
 import isPlainObject from 'lodash/isPlainObject';
@@ -35,6 +36,7 @@ import {LocaleProps, localeable} from '../locale';
 import Spinner from './Spinner';
 import {Option, Options} from '../Schema';
 import {RemoteOptionsProps, withRemoteConfig} from './WithRemoteConfig';
+import PickerColumn from './PickerColumn';
 
 export {Option, Options};
 
@@ -317,6 +319,7 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
   defaultCheckAll?: boolean;
   simpleValue?: boolean;
   defaultOpen?: boolean;
+  useMobileUI?: boolean;
 
   /**
    * 边框模式，全边框，还是半边框，或者没边框。
@@ -326,6 +329,11 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
    * 是否隐藏已选项
    */
   hideSelected?: boolean;
+
+  /**
+   * 移动端样式类名
+   */
+  mobileClassName?: string;
 }
 
 interface SelectState {
@@ -335,6 +343,7 @@ interface SelectState {
   inputValue: string;
   highlightedIndex: number;
   selection: Array<Option>;
+  pickerSelectItem: any;
 }
 
 export class Select extends React.Component<SelectProps, SelectState> {
@@ -368,6 +377,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
     this.open = this.open.bind(this);
     this.close = this.close.bind(this);
+    this.confirm = this.confirm.bind(this);
+    this.handlePickerChange = this.handlePickerChange.bind(this);
     this.toggle = this.toggle.bind(this);
     this.onBlur = this.onBlur.bind(this);
     this.onFocus = this.onFocus.bind(this);
@@ -391,7 +402,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
       inputValue: '',
       highlightedIndex: -1,
       selection: value2array(props.value, props),
-      itemHeight: 35
+      itemHeight: 35,
+      pickerSelectItem: ''
     };
   }
 
@@ -435,6 +447,14 @@ export class Select extends React.Component<SelectProps, SelectState> {
     });
   }
 
+  confirm() {
+    // @ts-ignore
+    this.handleChange(this.state.pickerSelectItem);
+    this.setState({
+      isOpen: false
+    });
+  }
+
   toggle(e?: React.MouseEvent<HTMLDivElement>) {
     if (
       e &&
@@ -549,6 +569,16 @@ export class Select extends React.Component<SelectProps, SelectState> {
     );
   }
 
+  handlePickerChange(selectItem: any, index: number, confirm: boolean) {
+    this.setState({
+      pickerSelectItem: selectItem
+    });
+    // 直接选中选项
+    if (confirm) {
+      this.handleChange(selectItem);
+    }
+  }
+
   handleChange(selectItem: any) {
     const {onChange, multiple, simpleValue, valueField} = this.props;
     let {selection} = this.state;
@@ -716,6 +746,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     const {
       popOverContainer,
       options,
+      value,
       valueField,
       labelField,
       noResultsText,
@@ -737,7 +768,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
       overlayPlacement,
       translate: __,
       hideSelected,
-      renderMenu
+      renderMenu,
+      mobileClassName,
+      useMobileUI = false
     } = this.props;
     const {selection} = this.state;
 
@@ -770,6 +803,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
     // 渲染单个选项
     const renderItem = ({index, style}: {index: number; style?: object}) => {
       const item = filtedOptions[index];
+      if (!item) {
+        return null;
+      }
       const checked =
         selectedItem === item || !!~selectionValues.indexOf(item[valueField]);
       if (hideSelected && checked) {
@@ -879,7 +915,22 @@ export class Select extends React.Component<SelectProps, SelectState> {
       );
     };
 
-    const menu = (
+    const mobileUI = isMobile() && useMobileUI;
+    const menu = mobileUI ? (
+      <PickerColumn
+        mobileClassName={mobileClassName}
+        labelField={'label'}
+        readonly={false}
+        className={'PickerColumns-column'}
+        value={value && value[0]}
+        swipeDuration={1000}
+        visibleItemCount={5}
+        options={filtedOptions}
+        onChange={checkAll ? noop : this.handlePickerChange}
+        onClose={this.close}
+        onConfirm={this.confirm}
+      ></PickerColumn>
+    ) : (
       <div
         ref={this.menu}
         className={cx('Select-menu', {
@@ -975,7 +1026,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
       >
         <PopOver
           overlay
-          className={cx('Select-popover', popoverClassName)}
+          className={cx(
+            'Select-popover',
+            popoverClassName,
+            mobileUI ? 'PopOver-isMobile' : ''
+          )}
           style={{
             minWidth: this.target ? this.target.offsetWidth : 'auto'
           }}

package/src/components/{Checkboxes.tsx → Selection.tsx}

@@ -16,29 +16,33 @@ import isEqual from 'lodash/isEqual';
 import {LocaleProps, localeable} from '../locale';
 // import isPlainObject from 'lodash/isPlainObject';
 
-export interface BaseCheckboxesProps extends ThemeProps, LocaleProps {
+export interface BaseSelectionProps extends ThemeProps, LocaleProps {
   options: Options;
   className?: string;
   placeholder?: string;
-  value?: Array<any>;
-  onChange?: (value: Array<Option>) => void;
+  value?: any | Array<any>;
+  multiple?: boolean;
+  clearable?: boolean;
+  onChange?: (value: Array<any> | any) => void;
   onDeferLoad?: (option: Option) => void;
   inline?: boolean;
   labelClassName?: string;
   option2value?: (option: Option) => any;
   itemClassName?: string;
   itemRender: (option: Option) => JSX.Element;
-
   disabled?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
 }
 
-export class BaseCheckboxes<
-  T extends BaseCheckboxesProps = BaseCheckboxesProps,
+export class BaseSelection<
+  T extends BaseSelectionProps = BaseSelectionProps,
   S = any
 > extends React.Component<T, S> {
   static defaultProps = {
     placeholder: 'placeholder.noOption',
-    itemRender: (option: Option) => <span>{option.label}</span>
+    itemRender: (option: Option) => <span>{option.label}</span>,
+    multiple: true,
+    clearable: false
   };
 
   static value2array(
@@ -62,36 +66,82 @@ export class BaseCheckboxes<
     });
   }
 
+  static resolveSelected(
+    value: any,
+    options: Options,
+    option2value: (option: Option) => any = (option: Option) => option
+  ) {
+    value = Array.isArray(value) ? value[0] : value;
+    return findTree(options, option => isEqual(option2value(option), value));
+  }
+
+  // 获取两个数组的交集
+  intersectArray(
+    arr1: undefined | Array<Option>,
+    arr2: undefined | Array<Option>
+  ): Array<Option> {
+    if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
+      return [];
+    }
+    const len1 = arr1.length;
+    const len2 = arr2.length;
+    if (len1 < len2) {
+      return this.intersectArray(arr2, arr1);
+    }
+    return Array.from(new Set(arr1.filter(item => arr2.includes(item))));
+  }
+
   toggleOption(option: Option) {
-    const {value, onChange, option2value, options, disabled} = this.props;
+    const {
+      value,
+      onChange,
+      option2value,
+      options,
+      disabled,
+      multiple,
+      clearable
+    } = this.props;
 
     if (disabled || option.disabled) {
       return;
     }
 
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
     let idx = valueArray.indexOf(option);
 
-    if (~idx) {
+    if (~idx && (multiple || clearable)) {
       valueArray.splice(idx, 1);
-    } else {
+    } else if (multiple) {
       valueArray.push(option);
+    } else {
+      valueArray = [option];
     }
 
     let newValue: string | Array<Option> = option2value
       ? valueArray.map(item => option2value(item))
       : valueArray;
 
-    onChange && onChange(newValue);
+    onChange && onChange(multiple ? newValue : newValue[0]);
   }
 
   @autobind
   toggleAll() {
-    const {value, onChange, option2value, options} = this.props;
+    const {value, onChange, option2value, options, multiple} = this.props;
+    if (multiple) {
+      return;
+    }
+
     let valueArray: Array<Option> = [];
 
-    if (!Array.isArray(value) || !value.length) {
-      valueArray = options.filter(option => !option.disabled);
+    const availableOptions = options.filter(option => !option.disabled);
+    const intersectOptions = this.intersectArray(value, availableOptions);
+
+    if (!Array.isArray(value)) {
+      valueArray = availableOptions;
+    } else if (intersectOptions.length < availableOptions.length) {
+      valueArray = Array.from(new Set([...value, ...availableOptions]));
+    } else {
+      valueArray = value.filter(item => !availableOptions.includes(item));
     }
 
     let newValue: string | Array<Option> = option2value
@@ -113,17 +163,20 @@ export class BaseCheckboxes<
       classnames: cx,
       option2value,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple,
+      onClick
     } = this.props;
 
     const __ = this.props.translate;
 
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
     let body: Array<React.ReactNode> = [];
 
     if (Array.isArray(options) && options.length) {
       body = options.map((option, key) => (
         <Checkbox
+          type={multiple ? 'checkbox' : 'radio'}
           className={cx(itemClassName, option.className)}
           key={key}
           onChange={() => this.toggleOption(option)}
@@ -140,10 +193,11 @@ export class BaseCheckboxes<
     return (
       <div
         className={cx(
-          'Checkboxes',
+          'Selection',
           className,
-          inline ? 'Checkboxes--inline' : ''
+          inline ? 'Selection--inline' : ''
         )}
+        onClick={onClick}
       >
         {body && body.length ? body : <div>{__(placeholder)}</div>}
       </div>
@@ -151,11 +205,11 @@ export class BaseCheckboxes<
   }
 }
 
-export class Checkboxes extends BaseCheckboxes {}
+export class Selection extends BaseSelection {}
 
 export default themeable(
   localeable(
-    uncontrollable(Checkboxes, {
+    uncontrollable(Selection, {
       value: 'onChange'
     })
   )

package/src/components/SparkLine.tsx

@@ -14,6 +14,7 @@ export interface SparkLineProps extends ThemeProps, LocaleProps {
         label?: string;
       }
   >;
+  placeholder?: string;
   onClick?: (e: React.MouseEvent, value?: PlainObject) => void;
 }
 
@@ -76,6 +77,8 @@ export class SparkLine extends React.Component<SparkLineProps> {
       value,
       width,
       height,
+      placeholder,
+      translate: __,
       onClick
     } = this.props;
 
@@ -98,7 +101,7 @@ export class SparkLine extends React.Component<SparkLineProps> {
             {this.renderLines()}
           </svg>
         ) : (
-          <span>Invalid Value</span>
+          placeholder ?? __('placeholder.empty')
         )}
       </div>
     );