amis 1.9.0-beta.12 → 1.9.0-beta.15

package/src/env.tsx

@@ -6,12 +6,8 @@ import {RendererConfig} from './factory';
 import {ThemeInstance} from './theme';
 import {Action, Api, Payload, Schema} from './types';
 import hoistNonReactStatic from 'hoist-non-react-statics';
-import {
-  RendererEvent,
-  RendererEventListener,
-  EventListeners
-} from './utils/renderer-event';
 import {IScopedContext} from './Scoped';
+import {RendererEvent} from './utils/renderer-event';
 
 export interface RendererEnv {
   fetcher: (api: Api, data?: any, options?: object) => Promise<Payload>;
@@ -69,8 +65,11 @@ export interface RendererEnv {
   ) => Promise<React.ReactType> | React.ReactType | JSX.Element | void;
   loadChartExtends?: () => void | Promise<void>;
   useMobileUI?: boolean;
-  bindEvent: (context: any) => (() => void) | undefined;
-  dispatchEvent: (
+  /**
+   * 过滤 html 标签，可用来添加 xss 保护逻辑
+   */
+  filterHtml: (input: string) => string;
+  beforeDispatchEvent: (
     e:
       | string
       | React.ClipboardEvent<any>
@@ -86,13 +85,7 @@ export interface RendererEnv {
     scoped: IScopedContext,
     data: any,
     broadcast?: RendererEvent<any>
-  ) => Promise<RendererEvent<any> | undefined>;
-  rendererEventListeners: RendererEventListener[];
-
-  /**
-   * 过滤 html 标签，可用来添加 xss 保护逻辑
-   */
-  filterHtml: (input: string) => string;
+  ) => void;
   [propName: string]: any;
 }
 

package/src/factory.tsx

@@ -4,7 +4,6 @@ import {getEnv, destroy} from 'mobx-state-tree';
 import {wrapFetcher} from './utils/api';
 import {normalizeLink} from './utils/normalizeLink';
 import {
-  createObject,
   findIndex,
   isObject,
   JSONTraverse,
@@ -13,9 +12,7 @@ import {
   string2regExp
 } from './utils/helper';
 import {
-  Api,
   fetcherResult,
-  Payload,
   SchemaNode,
   Schema,
   Action,
@@ -23,8 +20,8 @@ import {
   PlainObject
 } from './types';
 import {observer} from 'mobx-react';
-import Scoped, {IScopedContext} from './Scoped';
-import {getTheme, ThemeInstance, ThemeProps} from './theme';
+import Scoped from './Scoped';
+import {getTheme, ThemeProps} from './theme';
 import find from 'lodash/find';
 import Alert from './components/Alert2';
 import {toast} from './components/Toast';
@@ -34,14 +31,7 @@ import ScopedRootRenderer, {RootRenderProps} from './Root';
 import {HocStoreFactory} from './WithStore';
 import {EnvContext, RendererEnv} from './env';
 import {envOverwrite} from './envOverwrite';
-import {
-  EventListeners,
-  createRendererEvent,
-  RendererEventListener,
-  OnEventProps,
-  RendererEvent
-} from './utils/renderer-event';
-import {runActions} from './actions/Action';
+import {OnEventProps} from './utils/renderer-event';
 import {enableDebug} from './utils/debug';
 
 export interface TestFunc {
@@ -283,7 +273,6 @@ const defaultOptions: RenderOptions = {
     location.search.indexOf('amisDebug=1') !== -1 ??
     false,
   loadRenderer,
-  rendererEventListeners: [],
   fetcher() {
     return Promise.reject('fetcher is required');
   },
@@ -384,98 +373,6 @@ const defaultOptions: RenderOptions = {
   },
   // 用于跟踪用户在界面中的各种操作
   tracker(eventTrack: EventTrack, props: PlainObject) {},
-  // 返回解绑函数
-  bindEvent(renderer: any) {
-    if (!renderer) {
-      return undefined;
-    }
-    const listeners: EventListeners = renderer.props.$schema.onEvent;
-    if (listeners) {
-      // 暂存
-      for (let key of Object.keys(listeners)) {
-        const listener = this.rendererEventListeners.some(
-          (item: RendererEventListener) =>
-            item.renderer === renderer && item.type === key
-        );
-        if (!listener) {
-          this.rendererEventListeners.push({
-            renderer,
-            type: key,
-            weight: listeners[key].weight || 0,
-            actions: listeners[key].actions
-          });
-        }
-      }
-
-      return () => {
-        this.rendererEventListeners = this.rendererEventListeners.filter(
-          (item: RendererEventListener) => item.renderer !== renderer
-        );
-      };
-    }
-
-    return undefined;
-  },
-  async dispatchEvent(
-    e: string | React.MouseEvent<any>,
-    renderer: React.Component<RendererProps>,
-    scoped: IScopedContext,
-    data: any,
-    broadcast?: RendererEvent<any>
-  ) {
-    let unbindEvent = null;
-    const eventName = typeof e === 'string' ? e : e.type;
-
-    if (!broadcast) {
-      const eventConfig = renderer?.props?.onEvent?.[eventName];
-
-      if (!eventConfig) {
-        // 没命中也没关系
-        return Promise.resolve(undefined);
-      }
-
-      unbindEvent = this.bindEvent(renderer);
-    }
-
-    // 没有可处理的监听
-    if (!this.rendererEventListeners.length) {
-      return Promise.resolve();
-    }
-    // 如果是广播动作，就直接复用
-    const rendererEvent =
-      broadcast ||
-      createRendererEvent(eventName, {
-        env: this,
-        nativeEvent: e,
-        data,
-        scoped
-      });
-
-    // 过滤&排序
-    const listeners = this.rendererEventListeners
-      .filter(
-        (item: RendererEventListener) =>
-          item.type === eventName &&
-          (broadcast ? true : item.renderer === renderer)
-      )
-      .sort(
-        (prev: RendererEventListener, next: RendererEventListener) =>
-          next.weight - prev.weight
-      );
-
-    for (let listener of listeners) {
-      await runActions(listener.actions, listener.renderer, rendererEvent);
-
-      // 停止后续监听器执行
-      if (rendererEvent.stoped) {
-        break;
-      }
-    }
-
-    unbindEvent?.();
-
-    return rendererEvent;
-  },
   rendererResolver: resolveRenderer,
   replaceTextIgnoreKeys: [
     'type',

package/src/icons/dot.svg

@@ -0,0 +1,11 @@
+<?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">
+        <circle id="dot" fill="currentColor" cx="8" cy="8" r="6"></circle>
+        <circle id="dotWave" cx="8" cy="8" r="6" fill="currentColor" opacity="0.5">
+            <animate attributeName="r" begin="0" values="6;8;6" dur="1.5" repeatCount="indefinite"></animate>
+        </circle>
+    </g>
+</svg>
+

package/src/index.tsx

@@ -87,6 +87,7 @@ import './renderers/Form/ChartRadios';
 import './renderers/Form/InputRating';
 import './renderers/Form/Switch';
 import './renderers/Form/Radios';
+import './renderers/Form/JSONSchemaEditor';
 import './renderers/Form/ListSelect';
 import './renderers/Form/LocationPicker';
 import './renderers/Form/Select';
@@ -177,6 +178,8 @@ import './renderers/Code';
 import './renderers/WebComponent';
 import './renderers/GridNav';
 import './renderers/TooltipWrapper';
+import './renderers/Tag';
+import './renderers/Table-v2';
 
 import Scoped, {ScopedContext} from './Scoped';
 
@@ -219,6 +222,8 @@ import {
 const classPrefix = getClassPrefix();
 
 import './actions';
+import {DataScope} from './utils/DataScope';
+import {DataSchema} from './utils/DataSchema';
 
 export * from './components/index';
 
@@ -276,5 +281,7 @@ export {
   setDefaultLocale,
   registerLocale,
   makeTranslator,
-  animation
+  animation,
+  DataSchema,
+  DataScope
 };

package/src/locale/de-DE.ts

@@ -46,6 +46,11 @@ register('de-DE', {
   'CRUD.paginationGoText': 'Wechseln zu',
   'CRUD.paginationPageText': 'Seite',
   'PaginationWrapper.placeholder': 'Textkörper konfigurieren',
+  'Pagination.select': '{{count}} items/page',
+  'Pagination.goto': 'goto',
+  'Pagination.go': 'GO',
+  'Pagination.totalPage': 'total {{lastPage}} pages',
+  'Pagination.totalCount': 'total {{total}} items',
   'Date.titleYear': '',
   'Date.titleMonth': '',
   'Date.titleDate': '',
@@ -300,5 +305,17 @@ register('de-DE', {
   'pullRefresh.loosingText': 'Zum Aktualisieren freigeben...',
   'pullRefresh.loadingText': 'Laden...',
   'pullRefresh.successText': 'Laden erfolgreich',
-  'Picker.placeholder': 'Klicken Sie rechts auf das Symbol'
+  'Picker.placeholder': 'Klicken Sie rechts auf das Symbol',
+  'SchemaType.string': 'String',
+  'SchemaType.number': 'Number',
+  'SchemaType.interger': 'Interger',
+  'SchemaType.object': 'Object',
+  'SchemaType.array': 'Array',
+  'SchemaType.boolean': 'Boolean',
+  'SchemaType.null': 'Null',
+  'SchemaType.any': 'Any',
+  'JSONSchema.title': 'Title',
+  'JSONSchema.description': 'Description',
+  'JSONSchema.key': 'Key',
+  'JSONSchema.array_items': 'Items'
 });

package/src/locale/en-US.ts

@@ -43,6 +43,11 @@ register('en-US', {
   'CRUD.paginationGoText': 'Go to',
   'CRUD.paginationPageText': 'page',
   'PaginationWrapper.placeholder': 'please config body',
+  'Pagination.select': '{{count}} items/page',
+  'Pagination.goto': 'goto',
+  'Pagination.go': 'GO',
+  'Pagination.totalPage': 'total {{lastPage}} pages',
+  'Pagination.totalCount': 'total {{total}} items',
   'Date.titleYear': 'select year',
   'Date.titleMonth': 'select month and year',
   'Date.titleDate': 'select month, year and day',
@@ -302,5 +307,17 @@ register('en-US', {
   'pullRefresh.loosingText': 'Release to refresh...',
   'pullRefresh.loadingText': 'Loading...',
   'pullRefresh.successText': 'Loading success',
-  'Picker.placeholder': 'Click icon on the right'
+  'Picker.placeholder': 'Click icon on the right',
+  'SchemaType.string': 'String',
+  'SchemaType.number': 'Number',
+  'SchemaType.interger': 'Interger',
+  'SchemaType.object': 'Object',
+  'SchemaType.array': 'Array',
+  'SchemaType.boolean': 'Boolean',
+  'SchemaType.any': 'Any',
+  'SchemaType.null': 'Null',
+  'JSONSchema.title': 'Title',
+  'JSONSchema.description': 'Description',
+  'JSONSchema.key': 'Key',
+  'JSONSchema.array_items': 'Items'
 });

package/src/locale/zh-CN.ts

@@ -46,6 +46,11 @@ register('zh-CN', {
   'CRUD.paginationGoText': '前往',
   'CRUD.paginationPageText': '页',
   'PaginationWrapper.placeholder': '请配置内容',
+  'Pagination.select': '{{count}} 条/页',
+  'Pagination.goto': '跳转至',
+  'Pagination.go': 'GO',
+  'Pagination.totalPage': '共 {{lastPage}} 页',
+  'Pagination.totalCount': '共 {{total}} 条',
   'Date.titleYear': '选择年',
   'Date.titleMonth': '选择年月',
   'Date.titleDate': '选择年月日',
@@ -309,5 +314,19 @@ register('zh-CN', {
   'pullRefresh.loosingText': '释放即可刷新...',
   'pullRefresh.loadingText': '加载中...',
   'pullRefresh.successText': '加载成功',
-  'Picker.placeholder': '请点击右侧的图标'
+  'Picker.placeholder': '请点击右侧的图标',
+  'SchemaType.string': '字符串',
+  'SchemaType.number': '数字',
+  'SchemaType.interger': '整数',
+  'SchemaType.object': '对象',
+  'SchemaType.array': '数组',
+  'SchemaType.boolean': '布尔',
+  'SchemaType.null': 'Null',
+  'SchemaType.any': '任意',
+  'JSONSchema.title': '名称',
+  'JSONSchema.key': '字段名',
+  'JSONSchema.description': '描述',
+  'JSONSchema.add_prop': '添加属性',
+  'JSONSchema.array_items': '成员类型',
+  'Required': '必填'
 });

package/src/renderers/Action.tsx

@@ -614,7 +614,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
     const {onAction, disabled, countDown, env} = this.props;
 
     // https://reactjs.org/docs/legacy-event-pooling.html
-    e.persist();
+    // e.persist(); // react 17之后去掉 event pooling 了，这个应该没用了
     let onClick = this.props.onClick;
 
     if (typeof onClick === 'string') {

package/src/renderers/Carousel.tsx

@@ -18,6 +18,7 @@ import {Icon} from '../components/icons';
 import {BaseSchema, SchemaCollection, SchemaName, SchemaTpl} from '../Schema';
 import Html from '../components/Html';
 import Image from '../renderers/Image';
+import {ScopedContext, IScopedContext} from '../Scoped';
 
 /**
  * Carousel 轮播图渲染器。
@@ -192,14 +193,13 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
     this.clearAutoTimeout();
   }
 
-  doAction(action: Action, data: object, throwErrors: boolean): any {
+  doAction(action: Action, args: object, throwErrors: boolean): any {
     const actionType = action?.actionType as string;
-    
+
     if (!!~['next', 'prev'].indexOf(actionType)) {
       this.autoSlide(actionType);
-    }
-    else if (actionType === 'goto-image') {
-      this.changeSlide((data as any).activeIndex);
+    } else if (actionType === 'goto-image') {
+      this.changeSlide((args as any).activeIndex);
     }
   }
 
@@ -480,4 +480,19 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
 @Renderer({
   type: 'carousel'
 })
-export class CarouselRenderer extends Carousel {}
+export class CarouselRenderer extends Carousel {
+  static contextType = ScopedContext;
+
+  constructor(props: CarouselProps, context: IScopedContext) {
+    super(props);
+
+    const scoped = context;
+    scoped.registerComponent(this);
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount?.();
+    const scoped = this.context as IScopedContext;
+    scoped.unRegisterComponent(this);
+  }
+}

package/src/renderers/Form/ButtonGroupSelect.tsx

@@ -6,7 +6,7 @@ import {
   Option,
   FormOptionsControl
 } from './Options';
-import {Button} from '../../types';
+import {Action, Button} from '../../types';
 import {getLevelFromClassName, autobind, isEmpty} from '../../utils/helper';
 import {dataMapping} from '../../utils/tpl-builtin';
 import {ButtonGroupSchema} from '../ButtonGroup';
@@ -48,6 +48,15 @@ export default class ButtonGroupControl extends React.Component<
     vertical: false
   };
 
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {resetValue, onChange} = this.props;
+    const actionType = action?.actionType as string;
+
+    if (!!~['clear', 'reset'].indexOf(actionType)) {
+      onChange(resetValue ?? '');
+    }
+  }
+
   @autobind
   handleToggle(option: Option) {
     const {onToggle, multiple, autoFill, onBulkChange} = this.props;

package/src/renderers/Form/Checkbox.tsx

@@ -71,10 +71,10 @@ export default class CheckboxControl extends React.Component<
     const rendererEvent = await dispatchEvent(
       'change',
       createObject(data, {
-        value: eventData,
+        value: eventData
       })
     );
-    
+
     if (rendererEvent?.prevented) {
       return;
     }
@@ -118,10 +118,10 @@ export default class CheckboxControl extends React.Component<
   }
 }
 
+// @ts-ignore
+@withBadge
 @FormItem({
   type: 'checkbox',
   sizeMutable: false
 })
-// @ts-ignore
-@withBadge
 export class CheckboxControlRenderer extends CheckboxControl {}

package/src/renderers/Form/Checkboxes.tsx

@@ -9,7 +9,7 @@ import cx from 'classnames';
 import Checkbox from '../../components/Checkbox';
 
 import {Icon} from '../../components/icons';
-import {Api} from '../../types';
+import {Action, Api} from '../../types';
 import {autobind, hasAbility} from '../../utils/helper';
 import {columnsSplit} from '../../utils/columnsSplit';
 
@@ -56,7 +56,7 @@ export interface CheckboxesProps
   createBtnLabel: string;
   editable?: boolean;
   removable?: boolean;
-  optionType?: 'default' | 'button'
+  optionType?: 'default' | 'button';
 }
 
 export default class CheckboxesControl extends React.Component<
@@ -73,6 +73,14 @@ export default class CheckboxesControl extends React.Component<
     optionType: 'default'
   };
 
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {resetValue, onChange} = this.props;
+    const actionType = action?.actionType as string;
+    if (!!~['clear', 'reset'].indexOf(actionType)) {
+      onChange(resetValue ?? '');
+    }
+  }
+
   reload() {
     const reload = this.props.reloadOptions;
     reload && reload();
@@ -117,27 +125,27 @@ export default class CheckboxesControl extends React.Component<
     const wrapDom = this.refs.checkboxRef as HTMLElement;
     const wrapWidth = wrapDom.clientWidth;
     const childs = Array.from(wrapDom.children) as HTMLElement[];
-    
+
     childs.forEach(child => {
       child.style.borderRadius = '0';
       child.style.borderLeftWidth = '1px';
       child.style.borderTopWidth = '1px';
     });
-    const childTotalWidth = childs.reduce((pre, next) =>
-        pre + next.clientWidth, 0);
+    const childTotalWidth = childs.reduce(
+      (pre, next) => pre + next.clientWidth,
+      0
+    );
     if (childTotalWidth <= wrapWidth) {
       if (childs.length === 1) {
-        childs[0].style.borderRadius = "4px";
-      }
-      else {
-        childs[0].style.borderRadius = "4px 0 0 4px";
-        childs[childs.length - 1].style.borderRadius = "0 4px 4px 0";
+        childs[0].style.borderRadius = '4px';
+      } else {
+        childs[0].style.borderRadius = '4px 0 0 4px';
+        childs[childs.length - 1].style.borderRadius = '0 4px 4px 0';
         childs.forEach((child, idx) => {
           idx !== 0 && (child.style.borderLeftWidth = '0');
         });
       }
-    }
-    else {
+    } else {
       let curRowWidth = 0;
       let curRow = 0;
       const rowNum = Math.floor(childTotalWidth / wrapWidth);
@@ -157,34 +165,32 @@ export default class CheckboxesControl extends React.Component<
         }
         rowColArr[curRow].push(child);
       });
-      
+
       rowColArr.forEach((row: HTMLElement[], rowIdx: number) => {
         if (rowIdx === 0) {
           row.forEach((r: HTMLElement, colIdx: number) => {
             r.style.borderRadius = '0';
             colIdx !== 0 && (r.style.borderLeftWidth = '0');
-            row.length > rowColArr[rowIdx + 1].length
-              && (row[row.length - 1].style.borderBottomRightRadius = "4px");
+            row.length > rowColArr[rowIdx + 1].length &&
+              (row[row.length - 1].style.borderBottomRightRadius = '4px');
           });
-          row[0].style.borderTopLeftRadius = "4px";
-          row[row.length - 1].style.borderTopRightRadius = "4px";
-        }
-        else if (rowIdx === rowNum) {
+          row[0].style.borderTopLeftRadius = '4px';
+          row[row.length - 1].style.borderTopRightRadius = '4px';
+        } else if (rowIdx === rowNum) {
           row.forEach((r: HTMLElement, colIdx: number) => {
             r.style.borderRadius = '0';
             colIdx !== 0 && (r.style.borderLeftWidth = '0');
             r.style.borderTopWidth = '0';
-            row[0].style.borderBottomLeftRadius = "4px";
-            row[row.length - 1].style.borderBottomRightRadius = "4px";
+            row[0].style.borderBottomLeftRadius = '4px';
+            row[row.length - 1].style.borderBottomRightRadius = '4px';
           });
-        }
-        else {
+        } else {
           row.forEach((r: HTMLElement, colIdx: number) => {
             r.style.borderRadius = '0';
             colIdx !== 0 && (r.style.borderLeftWidth = '0');
             r.style.borderTopWidth = '0';
-            row.length > rowColArr[rowIdx + 1].length
-              && (row[row.length - 1].style.borderBottomRightRadius = "4px");
+            row.length > rowColArr[rowIdx + 1].length &&
+              (row[row.length - 1].style.borderBottomRightRadius = '4px');
           });
         }
       });

package/src/renderers/Form/Combo.tsx

@@ -434,7 +434,7 @@ export default class ComboControl extends React.Component<ComboProps> {
   }
 
   getValueAsArray(props = this.props) {
-    const {flat, joinValues, delimiter} = props;
+    const {flat, joinValues, delimiter, type} = props;
     let value = props.value;
 
     if (joinValues && flat && typeof value === 'string') {
@@ -581,7 +581,7 @@ export default class ComboControl extends React.Component<ComboProps> {
   }
 
   handleChange(values: any, diff: any, {index}: any) {
-    const {flat, store, joinValues, delimiter, disabled, submitOnChange} =
+    const {flat, store, joinValues, delimiter, disabled, submitOnChange, type} =
       this.props;
 
     if (disabled) {
@@ -595,7 +595,23 @@ export default class ComboControl extends React.Component<ComboProps> {
       value = value.join(delimiter || ',');
     }
 
-    this.props.onChange(value, submitOnChange, true);
+    if (type === 'input-kv') {
+      let hasDuplicateKey = false;
+      const keys: {[key: string]: boolean} = {};
+      for (const item of value) {
+        if (keys[item.key]) {
+          hasDuplicateKey = true;
+        } else {
+          keys[item.key] = true;
+        }
+      }
+      // 有重复值就不触发修改，因为 KV 模式下无法支持重复值
+      if (!hasDuplicateKey) {
+        this.props.onChange(value, submitOnChange, true);
+      }
+    } else {
+      this.props.onChange(value, submitOnChange, true);
+    }
 
     store.forms.forEach(
       form =>
@@ -1246,7 +1262,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                 closeOnClick: true
               },
               {
-                buttons: conditions.map(item => ({
+                buttons: conditions?.map(item => ({
                   label: item.label,
                   onClick: (e: any) => {
                     this.addItemWith(item);

package/src/renderers/Form/Editor.tsx

@@ -112,6 +112,11 @@ export interface EditorControlSchema extends Omit<FormBaseControl, 'size'> {
    * 是否展示全屏模式开关
    */
   allowFullscreen?: boolean;
+
+  /**
+   * 获取编辑器底层实例
+   */
+  editorDidMount?: string;
 }
 
 export type EditorRendererEvent = 'blur' | 'focus';
@@ -195,7 +200,16 @@ export default class EditorControl extends React.Component<EditorProps, any> {
         ); // folding
       }).dispose
     );
-    this.props.editorDidMount && this.props.editorDidMount(editor, monaco);
+    if (this.props.editorDidMount) {
+      let editorDidMount = this.props.editorDidMount;
+      if (typeof editorDidMount === 'string') {
+        editorDidMount = new Function('editor', 'monaco');
+      }
+      const dispose = editorDidMount(editor, monaco);
+      if (typeof dispose === 'function') {
+        this.toDispose.push(dispose);
+      }
+    }
   }
 
   prevHeight = 0;

package/src/renderers/Form/InputExcel.tsx

@@ -115,7 +115,7 @@ export default class ExcelControl extends React.PureComponent<
    */
   readWorksheet(worksheet: any) {
     const result: any[] = [];
-    const {parseMode, plainText} = this.props;
+    const {parseMode, plainText, includeEmpty} = this.props;
 
     if (parseMode === 'array') {
       worksheet.eachRow((row: any, rowNumber: number) => {
@@ -132,6 +132,11 @@ export default class ExcelControl extends React.PureComponent<
           firstRowValues = row.values;
         } else {
           const data: any = {};
+          if (includeEmpty) {
+            firstRowValues.forEach((item: any) => {
+              data[item] = '';
+            });
+          }
           row.eachCell((cell: any, colNumber: any) => {
             if (firstRowValues[colNumber]) {
               let value = cell.value;

package/src/renderers/Form/InputFile.tsx

@@ -1356,8 +1356,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                   <Button
                     level="default"
                     disabled={disabled}
-                    className={cx('FileControl-selectBtn', {
-                      btnClassName,
+                    className={cx('FileControl-selectBtn', btnClassName, {
                       'is-disabled':
                         multiple && !!maxLength && files.length >= maxLength
                     })}