amis 1.3.5-beta.7 → 1.4.0

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

@@ -1057,7 +1057,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
               (!stopAutoRefreshWhen ||
                 !(
                   (stopAutoRefreshWhenModalIsOpen && store.hasModalOpened) ||
-                  evalExpression(stopAutoRefreshWhen, createObject(store.data, store.query))
+                  evalExpression(
+                    stopAutoRefreshWhen,
+                    createObject(store.data, store.query)
+                  )
                 )) &&
               (this.timer = setTimeout(
                 silentPolling
@@ -1497,15 +1500,11 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   hasBulkActions() {
     const {bulkActions, itemActions, store} = this.props;
 
-    if (
-      (!bulkActions || !bulkActions.length) &&
-      (!itemActions || !itemActions.length)
-    ) {
+    if (!bulkActions || !bulkActions.length) {
       return false;
     }
 
     let bulkBtns: Array<ActionSchema> = [];
-    let itemBtns: Array<ActionSchema> = [];
     const ctx = store.mergedData;
 
     if (bulkActions && bulkActions.length) {
@@ -1517,21 +1516,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
         .filter(item => !item.hidden && item.visible !== false);
     }
 
-    const itemData = createObject(
-      store.data,
-      store.selectedItems.length ? store.selectedItems[0] : {}
-    );
-
-    if (itemActions && itemActions.length) {
-      itemBtns = itemActions
-        .map(item => ({
-          ...item,
-          ...getExprProperties(item as Schema, itemData)
-        }))
-        .filter(item => !item.hidden && item.visible !== false);
-    }
-
-    return bulkBtns.length || itemBtns.length;
+    return bulkBtns.length;
   }
 
   renderBulkActions(childProps: any) {
@@ -1539,11 +1524,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
 
     const items = childProps.items;
 
-    if (
-      !items.length ||
-      ((!bulkActions || !bulkActions.length) &&
-        (!itemActions || !itemActions.length))
-    ) {
+    if (!items.length || !bulkActions || !bulkActions.length) {
       return null;
     }
 
@@ -1595,7 +1576,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
           render(
             `bulk-action/${index}`,
             {
-              size: 'sm',
               ...omit(btn, ['visibleOn', 'hiddenOn', 'disabledOn']),
               type: 'button',
               ignoreConfirm: true
@@ -1619,7 +1599,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
           render(
             `bulk-action/${index}`,
             {
-              size: 'sm',
               ...omit(btn, ['visibleOn', 'hiddenOn', 'disabledOn']),
               type: 'button'
             },

package/src/renderers/Collapse.tsx

@@ -7,6 +7,7 @@ import {
   SchemaCollection,
   SchemaTpl
 } from '../Schema';
+import {isClickOnInput} from '../utils/helper';
 
 /**
  * Collapse 折叠渲染器，格式说明。
@@ -134,7 +135,10 @@ export default class Collapse extends React.Component<
     }
   }
 
-  toggleCollapsed() {
+  toggleCollapsed(e: React.MouseEvent<HTMLElement>) {
+    if (isClickOnInput(e)) {
+      return;
+    }
     this.props.collapsable !== false &&
       this.setState({
         collapsed: !this.state.collapsed

package/src/renderers/Dialog.tsx

@@ -318,7 +318,7 @@ export default class Dialog extends React.Component<DialogProps> {
   handleExited() {
     const {lazySchema, store} = this.props;
     if (isAlive(store)) {
-      store.setFormData({});
+      store.reset();
       store.setEntered(false);
       if (typeof lazySchema === 'function') {
         store.setSchema('');

package/src/renderers/DropDownButton.tsx

@@ -76,6 +76,11 @@ export interface DropdownButtonSchema extends BaseSchema {
    * 是否只显示图标。
    */
   iconOnly?: boolean;
+
+  /**
+   * 触发条件，默认是 click
+   */
+  trigger?: 'click' | 'hover';
 }
 
 export interface DropDownButtonProps
@@ -266,6 +271,7 @@ export default class DropDownButton extends React.Component<
       iconOnly,
       icon,
       isActived,
+      trigger,
       data
     } = this.props;
 
@@ -281,6 +287,8 @@ export default class DropDownButton extends React.Component<
           },
           className
         )}
+        onMouseEnter={trigger === 'hover' ? this.open : () => {}}
+        onMouseLeave={trigger === 'hover' ? this.close : () => {}}
         ref={this.domRef}
       >
         <TooltipWrapper

package/src/renderers/Form/Editor.tsx

@@ -118,7 +118,7 @@ export default class EditorControl extends React.Component<EditorProps, any> {
   static defaultProps: Partial<EditorProps> = {
     language: 'javascript',
     editorTheme: 'vs',
-    allowFullscreen: false,
+    allowFullscreen: true,
     options: {
       automaticLayout: true,
       selectOnLineNumbers: true,
@@ -294,26 +294,25 @@ export const availableLanguages = [
   'yaml'
 ];
 
-export const EditorControls: Array<
-  typeof EditorControl
-> = availableLanguages.map((lang: string) => {
-  @FormItem({
-    type: `${lang}-editor`,
-    sizeMutable: false
-  })
-  class EditorControlRenderer extends EditorControl {
-    static lang = lang;
-    static displayName = `${lang[0].toUpperCase()}${lang.substring(
-      1
-    )}EditorControlRenderer`;
-    static defaultProps = {
-      ...EditorControl.defaultProps,
-      language: lang
-    };
-  }
+export const EditorControls: Array<typeof EditorControl> =
+  availableLanguages.map((lang: string) => {
+    @FormItem({
+      type: `${lang}-editor`,
+      sizeMutable: false
+    })
+    class EditorControlRenderer extends EditorControl {
+      static lang = lang;
+      static displayName = `${lang[0].toUpperCase()}${lang.substring(
+        1
+      )}EditorControlRenderer`;
+      static defaultProps = {
+        ...EditorControl.defaultProps,
+        language: lang
+      };
+    }
 
-  return EditorControlRenderer;
-});
+    return EditorControlRenderer;
+  });
 
 @FormItem({
   type: 'js-editor',

package/src/renderers/Form/InputExcel.tsx

@@ -28,6 +28,11 @@ export interface InputExcelControlSchema extends FormBaseControl {
    * 是否包含空内容，主要用于二维数组模式
    */
   includeEmpty: boolean;
+
+  /**
+   * 纯文本模式
+   */
+  plainText: boolean;
 }
 
 export interface ExcelProps
@@ -48,12 +53,15 @@ export default class ExcelControl extends React.PureComponent<
   static defaultProps: Partial<ExcelProps> = {
     allSheets: false,
     parseMode: 'object',
-    includeEmpty: true
+    includeEmpty: true,
+    plainText: true
   };
   state: ExcelControlState = {
     open: false
   };
 
+  ExcelJS: any;
+
   @autobind
   handleDrop(files: File[]) {
     const {allSheets, onChange} = this.props;
@@ -63,6 +71,7 @@ export default class ExcelControl extends React.PureComponent<
     reader.onload = async () => {
       if (reader.result) {
         import('exceljs').then(async (ExcelJS: any) => {
+          this.ExcelJS = ExcelJS;
           const workbook = new ExcelJS.Workbook();
           await workbook.xlsx.load(reader.result);
           if (allSheets) {
@@ -88,7 +97,7 @@ export default class ExcelControl extends React.PureComponent<
    */
   readWorksheet(worksheet: any) {
     const result: any[] = [];
-    const {parseMode} = this.props;
+    const {parseMode, plainText} = this.props;
 
     if (parseMode === 'array') {
       worksheet.eachRow((row: any, rowNumber: number) => {
@@ -107,7 +116,23 @@ export default class ExcelControl extends React.PureComponent<
           const data: any = {};
           row.eachCell((cell: any, colNumber: any) => {
             if (firstRowValues[colNumber]) {
-              data[firstRowValues[colNumber]] = cell.value;
+              let value = cell.value;
+              if (plainText) {
+                const ExcelValueType = this.ExcelJS.ValueType;
+                if (cell.type === ExcelValueType.Hyperlink) {
+                  value = cell.value.hyperlink;
+                } else if (cell.type === ExcelValueType.Formula) {
+                  value = cell.value.result;
+                } else if (cell.type === ExcelValueType.RichText) {
+                  value = cell.value.richText
+                    .map((item: any) => item.text)
+                    .join('');
+                } else if (cell.type === ExcelValueType.Error) {
+                  value = '';
+                }
+              }
+
+              data[firstRowValues[colNumber]] = value;
             }
           });
           result.push(data);