amis 1.3.4 → 1.4.0

package/src/RootRenderer.tsx

@@ -116,12 +116,14 @@ export class RootRenderer extends React.Component<RootRendererProps> {
       );
     } else if (action.actionType === 'email') {
       const mailTo = filter(action.to, ctx);
-      const mailInfo = mapValues(pick(action, 'to', 'cc', 'bcc', 'subject', 'body'), val => filter(val, ctx));
+      const mailInfo = mapValues(
+        pick(action, 'to', 'cc', 'bcc', 'subject', 'body'),
+        val => filter(val, ctx)
+      );
       const mailStr = qs.stringify(mailInfo);
       const mailto = `mailto:${mailTo}?${mailStr}`;
 
       window.open(mailto);
-
     } else if (action.actionType === 'dialog') {
       store.setCurrentAction(action);
       store.openDialog(ctx);
@@ -159,7 +161,10 @@ export class RootRenderer extends React.Component<RootRendererProps> {
       action.actionType === 'copy' &&
       (action.content || action.copy)
     ) {
-      env.copy && env.copy(filter(action.content || action.copy, ctx, '| raw'));
+      env.copy &&
+        env.copy(filter(action.content || action.copy, ctx, '| raw'), {
+          format: action.copyFormat
+        });
     }
   }
 

package/src/components/Badge.tsx

@@ -17,7 +17,7 @@ export interface BadgeSchema extends BaseSchema {
   /**
    * 文本内容
    */
-  text?: string;
+  text?: string | number;
 
   /**
    * 大小
@@ -29,11 +29,21 @@ export interface BadgeSchema extends BaseSchema {
    */
   mode?: 'text' | 'dot';
 
+  /**
+   * 角标位置，优先级大于position
+   */
+  offset?: [number | string, number | string];
+  
   /**
    * 角标位置
    */
   position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
+  /**
+   * 封顶的数字值
+   */
+  overflowCount?: number;
+
   /**
    * 动态控制是否显示
    */
@@ -50,6 +60,11 @@ export interface BadgeSchema extends BaseSchema {
   style?: {
     [propName: string]: any;
   };
+
+  /**
+   * 提示类型
+   */
+  level?: 'info' | 'warning' | 'success' | 'danger';
 }
 
 export interface BadgeProps {
@@ -81,10 +96,13 @@ export class Badge extends React.Component<BadgeProps, object> {
       text,
       size,
       style,
+      offset,
       position = 'top-right',
+      overflowCount = 99,
       visibleOn,
       className,
-      animation
+      animation,
+      level = 'danger'
     } = badge;
 
     if (visibleOn) {
@@ -111,6 +129,12 @@ export class Badge extends React.Component<BadgeProps, object> {
         height: size,
         lineHeight: size + 'px'
       };
+      // 当text、overflowCount都为number类型时，进行封顶值处理
+      if (typeof text === 'number' && typeof overflowCount === 'number') {
+        text = (
+          (text as number) > (overflowCount as number) ? `${overflowCount}+` : text
+        ) as string | number;
+      }
 
       if (!text) {
         isDisplay = false;
@@ -121,6 +145,17 @@ export class Badge extends React.Component<BadgeProps, object> {
       sizeStyle = {width: size, height: size};
     }
 
+    let offsetStyle = {};
+    // 如果设置了offset属性，offset在position为'top-right'的基础上进行translate定位
+    if (offset && offset.length) {
+      position = 'top-right';
+      const left = `calc(50% + ${parseInt(offset[0] as string, 10)}px)`;
+      const right = `calc(-50% + ${parseInt(offset[1] as string, 10)}px)`;
+      offsetStyle = {
+        transform: `translate(${left}, ${right})`,
+      };
+    }
+
     let animationBackground = 'var(--danger)';
 
     if (style && style.background) {
@@ -148,15 +183,15 @@ export class Badge extends React.Component<BadgeProps, object> {
         {isDisplay ? (
           mode === 'dot' ? (
             <span
-              className={cx('Badge-dot', `Badge--${position}`)}
-              style={{...sizeStyle, ...style}}
+              className={cx('Badge-dot', `Badge--${position}`, `Badge--${level}`)}
+              style={{...offsetStyle, ...sizeStyle, ...style}}
             >
               {animationElement}
             </span>
           ) : (
             <span
-              className={cx('Badge-text', `Badge--${position}`)}
-              style={{...sizeStyle, ...style}}
+              className={cx('Badge-text', `Badge--${position}`, `Badge--${level}`)}
+              style={{...offsetStyle, ...sizeStyle, ...style}}
             >
               {text}
               {animationElement}

package/src/components/Checkbox.tsx

@@ -15,7 +15,7 @@ interface CheckboxProps {
   label?: string;
   labelClassName?: string;
   className?: string;
-  onChange?: (value: any) => void;
+  onChange?: (value: any, shift?: boolean) => void;
   value?: any;
   inline?: boolean;
   trueValue?: any;
@@ -48,7 +48,10 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
       return;
     }
 
-    onChange(e.currentTarget.checked ? trueValue : falseValue);
+    onChange(
+      e.currentTarget.checked ? trueValue : falseValue,
+      (e.nativeEvent as MouseEvent).shiftKey
+    );
   }
 
   render() {

package/src/components/Drawer.tsx

@@ -8,7 +8,8 @@ import React from 'react';
 import Transition, {
   ENTERED,
   ENTERING,
-  EXITING
+  EXITING,
+  EXITED
 } from 'react-transition-group/Transition';
 import Portal from 'react-overlays/Portal';
 import {Icon} from './icons';
@@ -230,7 +231,7 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
                   >
                     <Icon icon="close" className="icon" />
                   </a>
-                  {children}
+                  {status === EXITED ? null : children}
                 </div>
               </div>
             );

package/src/components/Modal.tsx

@@ -8,7 +8,8 @@ import React from 'react';
 import Transition, {
   ENTERED,
   ENTERING,
-  EXITING
+  EXITING,
+  EXITED
 } from 'react-transition-group/Transition';
 import Portal from 'react-overlays/Portal';
 import {current, addModal, removeModal} from './ModalManager';
@@ -264,7 +265,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
                   fadeStyles[status]
                 )}
               >
-                {children}
+                {status === EXITED ? null : children}
               </div>
             </div>
           </Portal>

package/src/components/RichText.tsx

@@ -46,8 +46,6 @@ 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> {
-  oldModel: any = null;
-
   constructor(props: any) {
     super(props);
     Froala.VIDEO_PROVIDERS = [
@@ -58,29 +56,6 @@ export default class FroalaEditor extends React.Component<any, any> {
         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>'
       }
     ];
-
-    this.state = {
-      model: this.props.model
-    };
-    this.handleModelChange = this.handleModelChange.bind(this);
-  }
-
-  componentDidUpdate() {
-    if (JSON.stringify(this.oldModel) == JSON.stringify(this.props.model)) {
-      return;
-    }
-    this.handleModelChange(this.props.model);
-  }
-
-  handleModelChange(model: string) {
-    if (!this.props.onModelChange) {
-      return;
-    }
-    this.oldModel = model;
-    this.props.onModelChange(model);
-    this.setState({
-      model: model
-    });
   }
 
   render() {
@@ -88,8 +63,8 @@ export default class FroalaEditor extends React.Component<any, any> {
       <FroalaEditorComponent
         tag="textarea"
         config={this.props.config}
-        model={this.state.model}
-        onModelChange={this.handleModelChange}
+        model={this.props.model}
+        onModelChange={this.props.onModelChange}
       />
     );
   }

package/src/components/Select.tsx

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

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

@@ -41,7 +41,7 @@ export interface RendererEnv {
     schema: Schema,
     props: any
   ) => null | RendererConfig;
-  copy?: (contents: string) => void;
+  copy?: (contents: string, format?: any) => void;
   getModalContainer?: () => HTMLElement;
   theme: ThemeInstance;
   affixOffsetTop: number;

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;
@@ -99,7 +104,7 @@ export interface RenderOptions {
     schema: Schema,
     props: any
   ) => null | RendererConfig;
-  copy?: (contents: string) => void;
+  copy?: (contents: string, options?: any) => void;
   getModalContainer?: () => HTMLElement;
   loadRenderer?: (
     schema: Schema,
@@ -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/index.tsx

@@ -174,6 +174,8 @@ import './compat';
 
 import './envOverwrite';
 
+import './schemaExtend';
+
 import './themes/ang';
 import './themes/cxd';
 import './themes/dark';

package/src/locale/de-DE.ts

@@ -158,6 +158,7 @@ register('de-DE', {
   'System.requestError': 'Anfragefehler: ',
   'System.requestErrorStatus': 'Anfragefehler, Statuscode:',
   'Table.addRow': 'Zeile hinzufügen',
+  'Table.copyRow': 'Zeile kopieren',
   'Table.columnsVisibility': 'Klicken, um die Sichtbarkeit der Spalten zu steuern',
   'Table.deleteRow': 'Aktuele Zeile löschen',
   'Table.discard': 'Verwerfen',

package/src/locale/en-US.ts

@@ -158,7 +158,8 @@ register('en-US', {
   'System.copy': 'Content copied',
   'System.requestError': 'Request error: ',
   'System.requestErrorStatus': 'Request error, status code: ',
-  'Table.addRow': 'Add a row',
+  'Table.addRow': 'Add row',
+  'Table.copyRow': 'Copy row',
   'Table.columnsVisibility': 'Click to control columns visibility',
   'Table.deleteRow': 'Delete current row',
   'Table.discard': 'Discard',

package/src/locale/zh-CN.ts

@@ -83,7 +83,7 @@ register('zh-CN', {
   'desc': '降序',
   'Dialog.close': '关闭',
   'Embed.invalidRoot': '选择器不对，页面上没有此元素',
-  'Embed.downloading': '文件即将开始下载。。',
+  'Embed.downloading': '文件即将开始下载',
   'Excel.placeholder': '拖拽 Excel 到这，或点击上传',
   'fetchFailed': '初始化失败',
   'File.continueAdd': '继续添加',
@@ -163,6 +163,7 @@ register('zh-CN', {
   'System.requestError': '接口报错：',
   'System.requestErrorStatus': '接口出错，状态码是：',
   'Table.addRow': '新增一行',
+  'Table.copyRow': '复制一行',
   'Table.columnsVisibility': '点击选择显示列',
   'Table.deleteRow': '删除当前行',
   'Table.discard': '放弃',

package/src/renderers/Action.tsx

@@ -151,6 +151,14 @@ export interface AjaxActionSchema extends ButtonSchema {
   ignoreConfirm?: boolean;
 }
 
+export interface DownloadActionSchema
+  extends Omit<AjaxActionSchema, 'actionType'> {
+  /**
+   * 指定为下载行为
+   */
+  actionType: 'download';
+}
+
 export interface UrlActionSchema extends ButtonSchema {
   /**
    * 指定为打开链接
@@ -347,6 +355,7 @@ const ActionProps = [
   'mergeData',
   'index',
   'copy',
+  'copyFormat',
   'payload',
   'requireSelected'
 ];
@@ -368,7 +377,7 @@ import {DialogSchema, DialogSchemaBase} from './Dialog';
 import {DrawerSchema, DrawerSchemaBase} from './Drawer';
 import {generateIcon} from '../utils/icon';
 import {BadgeSchema, withBadge} from '../components/Badge';
-import {str2AsyncFunction} from '../utils/api';
+import {normalizeApi, str2AsyncFunction} from '../utils/api';
 
 // 构造一个假的 React 事件避免可能的报错，主要用于快捷键功能
 // 来自 https://stackoverflow.com/questions/27062455/reactjs-can-i-create-my-own-syntheticevent
@@ -534,6 +543,15 @@ export class Action extends React.Component<ActionProps, ActionState> {
 
     e.preventDefault();
     const action = pick(this.props, ActionProps) as ActionSchema;
+
+    // download 是一种 ajax 的简写
+    if (action.actionType === 'download') {
+      action.actionType = 'ajax';
+      const api = normalizeApi((action as AjaxActionSchema).api);
+      api.responseType = 'blob';
+      (action as AjaxActionSchema).api = api;
+    }
+
     onAction(e, action);
 
     if (countDown) {