amis 1.4.1 → 1.4.2-beta.13

package/src/components/RichText.tsx

@@ -61,7 +61,6 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
   config: any;
   editorInitialized: any;
   INNER_HTML_ATTR: any;
-  hasSpecialTag: any;
   oldModel: any;
   el: any;
   _initEvents: any;
@@ -166,7 +165,7 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
       this.element.innerHTML = this.props.model;
     }
 
-    this.setContent(true);
+    this.setContent();
 
     // Default initialized.
     this.registerEvent(
@@ -176,17 +175,20 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
 
     // Check if events are set.
     if (!this.config.events) this.config.events = {};
-    this.config.events.initialized = () => this.initListeners();
+    this.config.events.initialized = () => {
+      this.editorInitialized = true;
+      this.initListeners();
+    };
 
     this.editor = new FroalaEditor(this.element, this.config);
   }
 
-  setContent(firstTime?: boolean) {
+  setContent() {
     if (this.props.model || this.props.model == '') {
       this.oldModel = this.props.model;
 
       if (this.editorInitialized) {
-        this.setNormalTagContent(firstTime);
+        this.setNormalTagContent();
       } else {
         if (!this._initEvents) this._initEvents = [];
         this._initEvents.push(() => this.setNormalTagContent());
@@ -194,35 +196,14 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
     }
   }
 
-  setNormalTagContent(firstTime?: boolean) {
+  setNormalTagContent() {
     let self = this;
 
-    function htmlSet() {
-      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();
-      }
-    }
-
-    if (firstTime) {
-      if (this.config.initOnClick) {
-        this.registerEvent('initializationDelayed', () => {
-          htmlSet();
-        });
-
-        this.registerEvent('initialized', () => {
-          this.editorInitialized = true;
-        });
-      } else {
-        this.registerEvent('initialized', () => {
-          this.editorInitialized = true;
-          htmlSet();
-        });
-      }
-    } else {
-      htmlSet();
+    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();
     }
   }
 
@@ -232,6 +213,7 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
       this.listeningEvents.length = 0;
       this.element = null;
       this.editorInitialized = false;
+      this._initEvents = [];
     }
   }
 
@@ -250,31 +232,9 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
 
     let modelContent = '';
 
-    if (this.hasSpecialTag) {
-      let attributeNodes = this.element.attributes;
-      let attrs: any = {};
-
-      for (let i = 0; i < attributeNodes.length; i++) {
-        let attrName = attributeNodes[i].name;
-        if (
-          this.config.reactIgnoreAttrs &&
-          this.config.reactIgnoreAttrs.indexOf(attrName) != -1
-        ) {
-          continue;
-        }
-        attrs[attrName] = attributeNodes[i].value;
-      }
-
-      if (this.element.innerHTML) {
-        attrs[this.INNER_HTML_ATTR] = this.element.innerHTML;
-      }
-
-      modelContent = attrs;
-    } else {
-      let returnedHtml = this.editor.html.get();
-      if (typeof returnedHtml === 'string') {
-        modelContent = returnedHtml;
-      }
+    let returnedHtml = this.editor.html.get();
+    if (typeof returnedHtml === 'string') {
+      modelContent = returnedHtml;
     }
 
     this.oldModel = modelContent;

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

package/src/components/{TableCheckboxes.tsx → TableSelection.tsx}

@@ -1,4 +1,4 @@
-import {BaseCheckboxes, BaseCheckboxesProps} from './Checkboxes';
+import {BaseSelection, BaseSelectionProps} from './Selection';
 import {themeable} from '../theme';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
@@ -7,7 +7,7 @@ import {Option} from './Select';
 import {resolveVariable} from '../utils/tpl-builtin';
 import {localeable} from '../locale';
 
-export interface TableCheckboxesProps extends BaseCheckboxesProps {
+export interface TableSelectionProps extends BaseSelectionProps {
   columns: Array<{
     name: string;
     label: string;
@@ -25,9 +25,9 @@ export interface TableCheckboxesProps extends BaseCheckboxesProps {
   ) => JSX.Element;
 }
 
-export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
+export class TableSelection extends BaseSelection<TableSelectionProps> {
   static defaultProps = {
-    ...BaseCheckboxes.defaultProps,
+    ...BaseSelection.defaultProps,
     cellRender: (
       column: {
         name: string;
@@ -50,9 +50,16 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
   }
 
   renderTHead() {
-    const {options, classnames: cx, value, disabled, option2value} = this.props;
+    const {
+      options,
+      classnames: cx,
+      value,
+      disabled,
+      option2value,
+      multiple
+    } = this.props;
     let columns = this.getColumns();
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
     const availableOptions = options.filter(option => !option.disabled);
     let partialChecked = false;
     let allChecked = !!availableOptions.length;
@@ -70,9 +77,10 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
     return (
       <thead>
         <tr>
-          {Array.isArray(options) && options.length ? (
+          {multiple && Array.isArray(options) && options.length ? (
             <th className={cx('Table-checkCell')}>
               <Checkbox
+                key="checkbox"
                 size="sm"
                 disabled={disabled}
                 onChange={this.toggleAll}
@@ -97,11 +105,13 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
       cellRender,
       value,
       disabled,
+      multiple,
       option2value,
-      translate: __
+      translate: __,
+      itemClassName
     } = this.props;
     const columns = this.getColumns();
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
 
     return (
       <tbody>
@@ -113,10 +123,18 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
               <tr
                 key={rowIndex}
                 onClick={e => e.defaultPrevented || this.toggleOption(option)}
+                className={cx(
+                  itemClassName,
+                  option.className,
+                  disabled || option.disabled ? 'is-disabled' : '',
+                  !!~valueArray.indexOf(option) ? 'is-active' : ''
+                )}
               >
-                <td className={cx('Table-checkCell')}>
-                  <Checkbox size="sm" checked={checked} disabled={disabled} />
-                </td>
+                {multiple ? (
+                  <td className={cx('Table-checkCell')} key="checkbox">
+                    <Checkbox size="sm" checked={checked} disabled={disabled} />
+                  </td>
+                ) : null}
                 {columns.map((column, colIndex) => (
                   <td key={colIndex}>
                     {cellRender(column, option, colIndex, rowIndex)}
@@ -144,10 +162,11 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
       classnames: cx,
       option2value,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple
     } = this.props;
 
-    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) {
@@ -155,30 +174,32 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
         <div
           key={key}
           className={cx(
-            'TableCheckboxes-item',
+            'TableSelection-item',
             itemClassName,
             option.className,
             disabled || option.disabled ? 'is-disabled' : ''
           )}
           onClick={() => this.toggleOption(option)}
         >
-          <div className={cx('TableCheckboxes-itemLabel')}>
+          <div className={cx('TableSelection-itemLabel')}>
             {itemRender(option)}
           </div>
 
-          <Checkbox
-            size="sm"
-            checked={!!~valueArray.indexOf(option)}
-            disabled={disabled || option.disabled}
-            labelClassName={labelClassName}
-            description={option.description}
-          />
+          {multiple ? (
+            <Checkbox
+              size="sm"
+              checked={!!~valueArray.indexOf(option)}
+              disabled={disabled || option.disabled}
+              labelClassName={labelClassName}
+              description={option.description}
+            />
+          ) : null}
         </div>
       ));
     }
 
     return (
-      <div className={cx('TableCheckboxes', className)}>
+      <div className={cx('TableSelection', className)}>
         <div className={cx('Table-content')}>
           <table className={cx('Table-table')}>
             {this.renderTHead()}
@@ -192,7 +213,7 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
 
 export default themeable(
   localeable(
-    uncontrollable(TableCheckboxes, {
+    uncontrollable(TableSelection, {
       value: 'onChange'
     })
   )