amis 1.3.5-beta.6 → 1.4.2-beta.1

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/Select.tsx

@@ -770,6 +770,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) {
@@ -1107,6 +1110,7 @@ export const SelectWithRemoteOptions = withRemoteConfig<Array<Options>>({
   > {
     render() {
       const {loading, config, deferLoad, updateConfig, ...rest} = this.props;
+
       return (
         <EnhancedSelect
           {...rest}

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/Steps.tsx

@@ -14,12 +14,12 @@ export type StepSchema = {
   /**
    * 标题
    */
-  title: string;
+  title?: string | JSX.Element;
 
   /**
    * 子标题
    */
-  subTitle?: string;
+  subTitle?: string | JSX.Element;
 
   /**
    * 图标
@@ -31,7 +31,7 @@ export type StepSchema = {
   /**
    * 描述
    */
-  description?: string;
+  description?: string | JSX.Element;
 
   status?: StepStatus;
 } & Omit<BaseSchema, 'type'>;

package/src/components/Toast.tsx

@@ -311,13 +311,13 @@ export class ToastMessage extends React.Component<
               {showIcon === false ? null : (
                 <div className={cx('Toast-icon')}>
                   {level === 'success' ? (
-                    <Icon icon="success" className="icon" />
+                    <Icon icon="status-success" className="icon" />
                   ) : level == 'error' ? (
-                    <Icon icon="fail" className="icon" />
+                    <Icon icon="status-fail" className="icon" />
                   ) : level == 'info' ? (
-                    <Icon icon="info-circle" className="icon" />
+                    <Icon icon="status-info" className="icon" />
                   ) : level == 'warning' ? (
-                    <Icon icon="warning" className="icon" />
+                    <Icon icon="status-warning" className="icon" />
                   ) : null}
                 </div>
               )}
@@ -327,7 +327,7 @@ export class ToastMessage extends React.Component<
 
               {closeButton ? (
                 <a onClick={this.close} className={cx(`Toast-close`)}>
-                  <Icon icon="close" className="icon" />
+                  <Icon icon="status-close" className="icon" />
                 </a>
               ) : null}
             </div>

package/src/components/Tree.tsx

@@ -19,7 +19,7 @@ import {
 import {Option, Options, value2array} from './Select';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {highlight} from '../renderers/Form/Options';
-import {Icon} from './icons';
+import {Icon, getIcon} from './icons';
 import Checkbox from './Checkbox';
 import {LocaleProps, localeable} from '../locale';
 import Spinner from './Spinner';
@@ -710,6 +710,8 @@ export class TreeSelector extends React.Component<
       const isLeaf =
         (!item.children || !item.children.length) && !item.placeholder;
 
+      const iconValue = item[iconField] || (childrenItems ? 'folder' : 'file');
+
       return (
         <li
           key={key}
@@ -754,7 +756,6 @@ export class TreeSelector extends React.Component<
                 <i
                   className={cx(
                     `Tree-itemIcon ${
-                      item[iconField] ||
                       (childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')
                     }`
                   )}
@@ -765,12 +766,9 @@ export class TreeSelector extends React.Component<
                       : this.handleSelect(item))
                   }
                 >
-                  {item[iconField] ? null : (
-                    <Icon
-                      icon={childrenItems ? 'folder' : 'file'}
-                      className="icon"
-                    />
-                  )}
+                  {getIcon(iconValue)
+                    ? <Icon icon={iconValue} className="icon"/>
+                    : <i className={iconValue}></i>}
                 </i>
               ) : null}
 

package/src/components/WithRemoteConfig.tsx

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
+import debounce from 'lodash/debounce';
 import {Api, Payload} from '../types';
 import {SchemaApi, SchemaTokenizeableString} from '../Schema';
 import {withStore} from './WithStore';
@@ -97,6 +98,7 @@ export interface OutterProps {
   env?: RendererEnv;
   data: any;
   source?: SchemaApi | SchemaTokenizeableString;
+  autoComplete?: SchemaApi | SchemaTokenizeableString;
   deferApi?: SchemaApi;
   remoteConfigRef?: (
     instance:
@@ -182,10 +184,16 @@ export function withRemoteConfig<P = any>(
           static displayName = `WithRemoteConfig(${
             ComposedComponent.displayName || ComposedComponent.name
           })`;
-          static ComposedComponent = ComposedComponent as React.ComponentType<T>;
+          static ComposedComponent =
+            ComposedComponent as React.ComponentType<T>;
           static contextType = EnvContext;
           toDispose: Array<() => void> = [];
 
+          loadOptions = debounce(this.loadAutoComplete.bind(this), 250, {
+            trailing: true,
+            leading: false
+          });
+
           constructor(
             props: FinalOutterProps & {
               store: IStore;
@@ -250,6 +258,7 @@ export function withRemoteConfig<P = any>(
             this.toDispose = [];
 
             this.props.remoteConfigRef?.(undefined);
+            this.loadOptions.cancel();
           }
 
           async loadConfig(ctx = this.props.data) {
@@ -261,6 +270,28 @@ export function withRemoteConfig<P = any>(
             }
           }
 
+          loadAutoComplete(input: string) {
+            const env: RendererEnv = this.props.env || this.context;
+            const {autoComplete, data, store} = this.props;
+
+            if (!env || !env.fetcher) {
+              throw new Error('fetcher is required');
+            }
+
+            const ctx = createObject(data, {
+              term: input,
+              value: input
+            });
+
+            if (!isEffectiveApi(autoComplete, ctx)) {
+              return Promise.resolve({
+                options: []
+              });
+            }
+
+            return store.load(env, autoComplete, ctx, config);
+          }
+
           setConfig(value: any, ctx?: any) {
             const {store} = this.props;
             store.setConfig(value, config, ctx);
@@ -321,13 +352,14 @@ export function withRemoteConfig<P = any>(
 
           render() {
             const store = this.props.store;
+            const env: RendererEnv = this.props.env || this.context;
             const injectedProps: RemoteOptionsProps<P> = {
               config: store.config,
               loading: store.fetching,
               deferLoad: this.deferLoadConfig,
               updateConfig: this.setConfig
             };
-            const {remoteConfigRef, ...rest} = this.props;
+            const {remoteConfigRef, autoComplete, ...rest} = this.props;
 
             return (
               <ComposedComponent
@@ -335,6 +367,9 @@ export function withRemoteConfig<P = any>(
                   T,
                   React.ComponentProps<T>
                 >)}
+                {...(env && isEffectiveApi(autoComplete) && this.loadOptions
+                  ? {loadOptions: this.loadOptions}
+                  : {})}
                 {...injectedProps}
               />
             );

package/src/components/calendar/DaysView.tsx

@@ -100,8 +100,8 @@ export class CustomDaysView extends DaysView {
   confirm = () => {
     let date = (this.props.selectedDate || this.props.viewDate).clone();
 
-    // 如果 minDate 是可用的，且比当前日期早，则用 minDate
-    if (this.props.minDate?.isValid() && this.props.minDate?.isBefore(date)) {
+    // 如果 minDate 是可用的，且比当前日期晚，则用 minDate
+    if (this.props.minDate?.isValid() && this.props.minDate?.isAfter(date)) {
       date = this.props.minDate.clone();
     }
 

package/src/components/condition-builder/Field.tsx

@@ -33,7 +33,6 @@ export class ConditionField extends React.Component<
       options: props.options
     };
     this.onSearch = this.onSearch.bind(this);
-    this.onSearch = this.onSearch.bind(this);
   }
 
   onSearch(text: string) {
@@ -51,7 +50,7 @@ export class ConditionField extends React.Component<
             });
             return children.length > 0
               ? Object.assign({}, item, {children}) // 需要copy一份，防止覆盖原始数据
-              : false; 
+              : false;
           } else {
             return item.name.toLowerCase().includes(txt) ||
               item.label.toLowerCase().includes(txt)

package/src/components/condition-builder/Value.tsx

@@ -92,11 +92,14 @@ export class Value extends React.Component<ValueProps> {
         />
       );
     } else if (field.type === 'select') {
+      const autoComplete = field.autoComplete;
+
       input = (
         <Select
           simpleValue
           options={field.options!}
           source={field.source}
+          autoComplete={autoComplete}
           searchable={field.searchable}
           value={value ?? field.defaultValue ?? ''}
           data={data}

package/src/components/condition-builder/types.ts

@@ -145,6 +145,12 @@ interface SelectField extends BaseField {
   options?: Array<any>;
   source?: SchemaApi;
   searchable?: boolean;
+
+  /**
+   * 自动完成 API，当输入部分文字的时候，会将这些文字通过 ${term} 可以取到，发送给接口。
+   * 接口可以返回匹配到的选项，帮助用户输入。
+   */
+  autoComplete?: SchemaApi;
 }
 
 interface BooleanField extends BaseField {

package/src/components/icons.tsx

@@ -6,6 +6,7 @@
 import React from 'react';
 
 import CloseIcon from '../icons/close.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';
@@ -24,6 +25,10 @@ import RemoveIcon from '../icons/remove.svg';
 import RetryIcon from '../icons/retry.svg';
 import UploadIcon from '../icons/upload.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';
@@ -36,6 +41,8 @@ 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 CopyIcon from '../icons/copy.svg';
 import FilterIcon from '../icons/filter.svg';
 import CaretIcon from '../icons/caret.svg';
@@ -61,6 +68,7 @@ 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';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -91,6 +99,7 @@ export function registerIcon(key: string, component: React.ReactType<{}>) {
 }
 
 registerIcon('close', CloseIcon);
+registerIcon('status-close', StatusCloseIcon);
 registerIcon('undo', UnDoIcon);
 registerIcon('redo', ReDoIcon);
 registerIcon('enter', EnterIcon);
@@ -112,6 +121,10 @@ registerIcon('remove', RemoveIcon);
 registerIcon('retry', RetryIcon);
 registerIcon('upload', UploadIcon);
 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);
@@ -127,6 +140,7 @@ 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);
@@ -149,6 +163,7 @@ registerIcon('ellipsis-v', EllipsisVIcon);
 registerIcon('expand-alt', ExpandAltIcon);
 registerIcon('compress-alt', CompressAltIcon);
 registerIcon('transparent', TransparentIcon);
+registerIcon('loading-outline', LoadingOutline);
 
 export function Icon({
   icon,

package/src/factory.tsx

@@ -74,11 +74,16 @@ export interface RenderSchemaFilter {
   (schema: Schema, renderer: RendererConfig, props?: any): Schema;
 }
 
+export interface wsObject {
+  url: string;
+  body?: any;
+}
+
 export interface RenderOptions {
   session?: string;
   fetcher?: (config: fetcherConfig) => Promise<fetcherResult>;
   wsFetcher?: (
-    ws: string,
+    ws: wsObject,
     onMessage: (data: any) => void,
     onError: (error: any) => void
   ) => void;
@@ -234,8 +239,13 @@ const defaultOptions: RenderOptions = {
   // 使用 WebSocket 来实时获取数据
   wsFetcher(ws, onMessage, onError) {
     if (ws) {
-      const socket = new WebSocket(ws);
-      socket.onmessage = (event: any) => {
+      const socket = new WebSocket(ws.url);
+      socket.onopen = event => {
+        if (ws.body) {
+          socket.send(JSON.stringify(ws.body));
+        }
+      };
+      socket.onmessage = event => {
         if (event.data) {
           onMessage(JSON.parse(event.data));
         }

package/src/icons/clock.svg

@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>ic_时间</title><g id="ic_时间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="1-FL" stroke="#000" cx="8" cy="8" r="6.5" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/><polyline id="2-FLW" stroke="#000" points="7.87443646 5.5 7.87443646 8.53778873 5.5 9.28133409" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>

package/src/icons/loading-outline.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true">
+    <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z">
+    </path>
+</svg>

package/src/icons/status-close.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>关闭</title>
+    <g id="关闭" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标-关闭">
+            <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+            <path d="M12.549,2.65 L13.256,3.357 L8.659,7.952 L13.2563,12.549 L12.5493,13.257 L7.953,8.659 L3.357,13.257 L2.65,12.549 L7.246,7.952 L2.6503,3.357 L3.3573,2.65 L7.953,7.245 L12.549,2.65 Z" id="图标-填色" fill="#080E1A" opacity="0.5"></path>
+        </g>
+    </g>
+</svg>