dtable-ui-component 5.3.6 → 5.3.7

package/lib/RowExpandEditor/RowExpandSingleSelectorEditor/index.js

@@ -0,0 +1,193 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _dtableUtils = require("dtable-utils");
+var _constants = require("../../constants");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SingleSelectEditor = _interopRequireDefault(require("../../SingleSelectEditor"));
+var _lang = require("../../lang");
+require("./index.css");
+class RowExpandSingleSelectEditor extends _react.default.Component {
+  constructor(_props) {
+    super(_props);
+    this.getOptions = props => {
+      const {
+        column,
+        row,
+        columns
+      } = props;
+      const options = (0, _dtableUtils.getColumnOptions)(column);
+      const {
+        data
+      } = column;
+      const {
+        cascade_column_key,
+        cascade_settings
+      } = data || {};
+      if (cascade_column_key && Array.isArray(columns)) {
+        const cascadeColumn = columns.find(c => c.key === cascade_column_key);
+        if (cascadeColumn) {
+          const cascadeColumnValue = row[cascade_column_key];
+          if (!cascadeColumnValue) return [];
+          const cascadeSetting = cascade_settings[cascadeColumnValue];
+          if (!cascadeSetting || !Array.isArray(cascadeSetting) || cascadeSetting.length === 0) return [];
+          return options.filter(option => cascadeSetting.includes(option.id));
+        }
+      }
+      return options;
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.showSelectPopover) {
+        this.setState({
+          showSelectPopover: true
+        });
+      }
+    };
+    this.toggleSingleSelect = value => {
+      this.setState({
+        showSelectPopover: value
+      }, () => {
+        var _this$selectRef;
+        if (value) return;
+        // eslint-disable-next-line no-unused-expressions
+        (_this$selectRef = this.selectRef) === null || _this$selectRef === void 0 ? void 0 : _this$selectRef.focus();
+      });
+    };
+    this.closeEditor = () => {
+      this.toggleSingleSelect(false);
+    };
+    this.hideDropDownMenu = event => {
+      if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
+      if (!this.singleSelectContainer.contains(event.target) && this.state.showSelectPopover) {
+        const singleSelectEditor = document.getElementsByClassName('dtable-ui-select-editor-container')[0];
+        if (singleSelectEditor && singleSelectEditor.contains(event.target)) return;
+        this.toggleSingleSelect(false);
+      }
+    };
+    this.onToggleSelect = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.props.updateTabIndex(this.props.columnIndex);
+      if (this.props.readOnly) return;
+      this.toggleSingleSelect(true);
+    };
+    this.onFocus = () => {
+      this.props.updateTabIndex(this.props.columnIndex);
+    };
+    this.onChange = option => {
+      let newValue = option[this.key];
+      if (this.state.value === newValue) newValue = null;
+      this.setState({
+        value: newValue
+      });
+      this.props.onCommit(newValue);
+      this.toggleSingleSelect(false);
+    };
+    this.renderOption = () => {
+      const {
+        isEditorFocus
+      } = this.props;
+      const {
+        value
+      } = this.state;
+      const option = this.options.find(o => o[this.key] === value);
+      const optionStyle = option ? {
+        backgroundColor: option.color,
+        color: option.textColor || null
+      } : {
+        backgroundColor: _constants.DELETED_OPTION_BACKGROUND_COLOR
+      };
+      const optionName = option ? option.name : (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        tabIndex: 0,
+        onFocus: this.onFocus,
+        onClick: this.onToggleSelect,
+        ref: ref => this.selectRef = ref,
+        className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
+          'focus': isEditorFocus
+        })
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-row-expand-select-editor-inner"
+      }, /*#__PURE__*/_react.default.createElement("div", null, value && /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-select-option",
+        style: optionStyle,
+        title: optionName
+      }, optionName)), /*#__PURE__*/_react.default.createElement("i", {
+        "aria-hidden": "true",
+        className: "dtable-font dtable-icon-down3"
+      })));
+    };
+    this.state = {
+      value: _props.value,
+      showSelectPopover: false
+    };
+    this.key = _props.valueKey === 'name' ? 'name' : 'id';
+    this.options = this.getOptions(_props);
+    this.selectRef = null;
+    this.outerRef = null;
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.hideDropDownMenu);
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      value
+    } = nextProps;
+    if (value !== this.props.value) {
+      this.options = this.getOptions(nextProps);
+      this.setState({
+        value,
+        showSelectPopover: false
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.showSelectPopover !== prevState.showSelectPopover) {
+      if (this.state.showSelectPopover === true && this.props.onEditorOpen) {
+        this.props.onEditorOpen();
+      }
+      if (this.state.showSelectPopover === false && this.props.onEditorClose) {
+        this.props.onEditorClose();
+      }
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.hideDropDownMenu);
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    const {
+      isSupportNewOption,
+      onAddNewOption,
+      column
+    } = this.props;
+    const {
+      showSelectPopover,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative w-100",
+      ref: ref => this.singleSelectContainer = ref
+    }, this.renderOption(), /*#__PURE__*/_react.default.createElement("span", {
+      ref: ref => this.targetRef = ref
+    }), showSelectPopover && /*#__PURE__*/_react.default.createElement(_SingleSelectEditor.default, {
+      isInModal: true,
+      options: this.options,
+      column: column,
+      value: value,
+      valueKey: this.key,
+      target: this.targetRef,
+      onCommit: this.onChange,
+      isSupportNewOption: isSupportNewOption,
+      onAddNewOption: onAddNewOption,
+      onClose: this.closeEditor
+    }));
+  }
+}
+var _default = exports.default = RowExpandSingleSelectEditor;

package/lib/RowExpandEditor/RowExpandTextEditor/index.css

@@ -0,0 +1,4 @@
+.dtable-ui-row-expand-simple-text-editor-container {
+  width: 100%;
+}
+

package/lib/RowExpandEditor/RowExpandTextEditor/index.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _TextEditor = _interopRequireDefault(require("../../TextEditor"));
+var _columnUtils = require("../../utils/column-utils");
+var _cell = require("../../utils/cell");
+var _constants = require("../../constants");
+var _lang = require("../../lang");
+require("./index.css");
+class RowExpandSimpleText extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.setEditorRef = ref => {
+      // 'checkingField' is required if want to check current field
+      if (this.props.isRequired && (0, _columnUtils.isEnableCheckFormat)(this.props.column)) {
+        this.checkingField = ref;
+      }
+    };
+    this.focusInput = () => {
+      // use setTimeout to make sure real DOM is rendered, avoiding flush updates when React is already rendering
+      setTimeout(() => {
+        this.editor && this.editor.focusInput();
+      }, 1);
+    };
+    this.blurInput = () => {
+      setTimeout(() => {
+        this.editor && this.editor.blurInput();
+      }, 1);
+    };
+    this.onCommit = () => {
+      const {
+        isRequired,
+        column
+      } = this.props;
+      const value = this.editor.getValue();
+      if (isRequired && (0, _columnUtils.isEnableCheckFormat)(column)) {
+        this.checked = true;
+        this.checkField();
+      }
+      this.props.onCommit(value);
+    };
+    this.checkField = () => {
+      const {
+        column
+      } = this.props;
+      const text = this.editor.getValue();
+      this.validValue = (0, _cell.checkValueConformityFormat)(column.data, text);
+      this.setState({
+        inconformityFormat: !this.validValue
+      });
+      return this.validValue;
+    };
+    this.onKeyDown = event => {
+      if (event.keyCode === _constants.KeyCodes.Esc) {
+        event.preventDefault();
+        this.blurInput();
+      }
+    };
+    this.isChecked = () => {
+      return this.checked;
+    };
+    this.isValidValue = () => {
+      return this.validValue;
+    };
+    this.onInputClick = () => {
+      if (this.props.updateTabIndex) {
+        this.props.updateTabIndex(this.props.columnIndex);
+      }
+    };
+    this.state = {
+      inconformityFormat: false
+    };
+
+    // for format check
+    this.checked = false;
+    this.validValue = true;
+    this.checkingField = null;
+  }
+  componentDidMount() {
+    const {
+      isEditorFocus
+    } = this.props;
+    if (isEditorFocus) {
+      this.focusInput();
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      isEditorFocus
+    } = nextProps;
+    if (isEditorFocus && !this.props.isEditorFocus) {
+      this.focusInput();
+    } else if (!isEditorFocus && this.props.isEditorFocus) {
+      this.blurInput();
+    }
+  }
+  render() {
+    const {
+      readOnly,
+      column,
+      value
+    } = this.props;
+    const {
+      inconformityFormat
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-simple-text-editor-container",
+      ref: this.setEditorRef
+    }, /*#__PURE__*/_react.default.createElement(_TextEditor.default, {
+      ref: ref => this.editor = ref,
+      className: inconformityFormat ? 'is-invalid' : '',
+      readOnly: readOnly,
+      column: column,
+      value: value,
+      onKeyDown: this.onKeyDown,
+      onInputClick: this.onInputClick,
+      onCommit: this.onCommit
+    }), inconformityFormat && /*#__PURE__*/_react.default.createElement(_reactstrap.FormFeedback, null, _lang.getLocale.get('Input_does_not_meet_specifications')));
+  }
+}
+var _default = exports.default = RowExpandSimpleText;

package/lib/RowExpandEditor/RowExpandUrlEditor/index.css

@@ -0,0 +1,31 @@
+.dtable-ui-row-expand-url-editor {
+  position: relative;
+  width: inherit;
+}
+
+.dtable-ui-row-expand-url-editor .dtable-ui-row-expand-url-input {
+  text-decoration: underline;
+  text-decoration-color: #999;
+  padding-right: 40px;
+}
+
+.dtable-ui-row-expand-jump-link {
+  display: inline-block;
+  font-size: 14px;
+  height: 22px;
+  position: absolute;
+  top: 8px;
+  right: 9px;
+  border: 1px solid #eee;
+  padding: 0 4px;
+  color: #999;
+  border-radius: 2px;
+  background: #fff;
+  cursor: pointer;
+  box-shadow: 0 0 1px;
+}
+
+.dtable-ui-row-expand-jump-link:hover {
+  background: #f5f5f5;
+  border: 1px solid #c9c9c9;
+}

package/lib/RowExpandEditor/RowExpandUrlEditor/index.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toaster = _interopRequireDefault(require("../../toaster"));
+var _utils = require("../../utils/utils");
+var _constants = require("../../constants");
+var _lang = require("../../lang");
+require("./index.css");
+class RowExpandUrlEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.focusInput = () => {
+      // use setTimeout to make sure real DOM is rendered
+      setTimeout(() => {
+        this.urlInputRef && this.urlInputRef.focus();
+      }, 1);
+    };
+    this.blurInput = () => {
+      setTimeout(() => {
+        this.urlInputRef && this.urlInputRef.blur();
+      }, 1);
+    };
+    this.onBlur = () => {
+      const {
+        onCommit
+      } = this.props;
+      onCommit(this.state.value.trim());
+    };
+    this.onFocus = e => {
+      this.props.updateTabIndex(this.props.columnIndex);
+    };
+    this.onChange = e => {
+      let value = e.target.value;
+      if (value === this.state.value) return;
+      this.setState({
+        value
+      });
+    };
+    this.onCut = e => {
+      e.stopPropagation();
+    };
+    this.onPaste = e => {
+      e.stopPropagation();
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Esc) {
+        e.stopPropagation();
+        this.blurInput();
+        return;
+      }
+      let {
+        selectionStart,
+        selectionEnd,
+        value
+      } = e.currentTarget;
+      if (e.keyCode === _constants.KeyCodes.ChineseInputMethod || e.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || e.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
+        e.stopPropagation();
+      }
+    };
+    this.onOpenUrlLink = () => {
+      const {
+        value
+      } = this.state;
+      let newValue = value.trim();
+      if (!(0, _utils.isValidUrl)(newValue)) {
+        newValue = "http://".concat(newValue);
+      }
+      try {
+        (0, _utils.openUrlLink)(newValue);
+      } catch {
+        _toaster.default.danger((0, _lang.getLocale)('URL_is_invalid'));
+      }
+    };
+    this.state = {
+      value: props.value
+    };
+    this.inputRef = /*#__PURE__*/_react.default.createRef();
+  }
+  componentDidMount() {
+    if (this.props.isEditorFocus) {
+      this.focusInput();
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[this.props.valueKey]] || ''
+      });
+    }
+    if (nextProps.isEditorFocus === true && this.props.isEditorFocus === false) {
+      this.focusInput();
+    }
+    if (nextProps.isEditorFocus === false && this.props.isEditorFocus === true) {
+      this.blurInput();
+    }
+  }
+  render() {
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-url-editor"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: ref => this.urlInputRef = ref,
+      type: "text",
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      onCut: this.onCut,
+      onPaste: this.onPaste,
+      onChange: this.onChange,
+      className: "form-control dtable-ui-row-expand-url-input",
+      value: value || '',
+      onKeyDown: this.onKeyDown
+    }), value && value.trim() && /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-url dtable-ui-row-expand-jump-link",
+      onClick: this.onOpenUrlLink
+    }));
+  }
+}
+var _default = exports.default = RowExpandUrlEditor;

package/lib/RowExpandEditor/constants.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CELL_EDITOR_MAP = void 0;
+var _dtableUtils = require("dtable-utils");
+var _RowExpandTextEditor = _interopRequireDefault(require("./RowExpandTextEditor"));
+var _RowExpandSingleSelectorEditor = _interopRequireDefault(require("./RowExpandSingleSelectorEditor"));
+var _RowExpandMultipleSelectEditor = _interopRequireDefault(require("./RowExpandMultipleSelectEditor"));
+var _RowExpandUrlEditor = _interopRequireDefault(require("./RowExpandUrlEditor"));
+var _RowExpandNumberEditor = _interopRequireDefault(require("./RowExpandNumberEditor"));
+var _RowExpandDateEditor = _interopRequireDefault(require("./RowExpandDateEditor"));
+var _RowExpandLongTextEditor = _interopRequireDefault(require("./RowExpandLongTextEditor"));
+var _RowExpandCheckboxEditor = _interopRequireDefault(require("./RowExpandCheckboxEditor"));
+var _RowExpandEmailEditor = _interopRequireDefault(require("./RowExpandEmailEditor"));
+var _RowExpandDurationEditor = _interopRequireDefault(require("./RowExpandDurationEditor"));
+var _RowExpandRateEditor = _interopRequireDefault(require("./RowExpandRateEditor"));
+var _RowExpandCollaboratorEditor = _interopRequireDefault(require("./RowExpandCollaboratorEditor"));
+var _RowExpandDepartmentEditor = _interopRequireDefault(require("./RowExpandDepartmentEditor"));
+var _RowExpandImageEditor = _interopRequireDefault(require("./RowExpandImageEditor"));
+var _RowExpandFileEditor = _interopRequireDefault(require("./RowExpandFileEditor"));
+var _RowExpandDigitalSignEditor = _interopRequireDefault(require("./RowExpandDigitalSignEditor"));
+var _RowExpandGeolocationEditor = _interopRequireDefault(require("./RowExpandGeolocationEditor"));
+const CELL_EDITOR_MAP = exports.CELL_EDITOR_MAP = {
+  [_dtableUtils.CellType.TEXT]: _RowExpandTextEditor.default,
+  [_dtableUtils.CellType.SINGLE_SELECT]: _RowExpandSingleSelectorEditor.default,
+  [_dtableUtils.CellType.MULTIPLE_SELECT]: _RowExpandMultipleSelectEditor.default,
+  [_dtableUtils.CellType.NUMBER]: _RowExpandNumberEditor.default,
+  [_dtableUtils.CellType.DATE]: _RowExpandDateEditor.default,
+  [_dtableUtils.CellType.URL]: _RowExpandUrlEditor.default,
+  [_dtableUtils.CellType.LONG_TEXT]: _RowExpandLongTextEditor.default,
+  [_dtableUtils.CellType.CHECKBOX]: _RowExpandCheckboxEditor.default,
+  [_dtableUtils.CellType.EMAIL]: _RowExpandEmailEditor.default,
+  [_dtableUtils.CellType.DURATION]: _RowExpandDurationEditor.default,
+  [_dtableUtils.CellType.RATE]: _RowExpandRateEditor.default,
+  [_dtableUtils.CellType.COLLABORATOR]: _RowExpandCollaboratorEditor.default,
+  [_dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT]: _RowExpandDepartmentEditor.default,
+  [_dtableUtils.CellType.IMAGE]: _RowExpandImageEditor.default,
+  [_dtableUtils.CellType.FILE]: _RowExpandFileEditor.default,
+  [_dtableUtils.CellType.DIGITAL_SIGN]: _RowExpandDigitalSignEditor.default,
+  [_dtableUtils.CellType.GEOLOCATION]: _RowExpandGeolocationEditor.default
+};

package/lib/RowExpandEditor/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("./constants");
+const RowExpandEditor = _ref => {
+  let {
+    column,
+    component,
+    ...props
+  } = _ref;
+  const components = {
+    ..._constants.CELL_EDITOR_MAP,
+    ...component
+  };
+  const Editor = components[column.type];
+  if (!Editor) return null;
+  const {
+    row,
+    valueKey
+  } = props;
+  const value = row[column[valueKey]];
+  return /*#__PURE__*/_react.default.createElement(Editor, Object.assign({}, props, {
+    value: value,
+    column: column
+  }));
+};
+var _default = exports.default = RowExpandEditor;

package/lib/RowExpandFormatter/RowExpandDepartmentFormatter/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
+function RowExpandDepartmentFormatter(_ref) {
+  let {
+    value,
+    departments
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-relative w-100"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    tabIndex: 0,
+    className: "dtable-ui-row-expand-select-formatter custom-select"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui-row-expand-select-formatter-inner"
+  }, /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
+    value: value,
+    departments: departments
+  }))));
+}
+var _default = exports.default = RowExpandDepartmentFormatter;

package/lib/{RowExpandEmailFormatter → RowExpandFormatter/RowExpandEmailFormatter}/index.css

@@ -1,4 +1,4 @@
-@import url('../css/cell-formatter.css');
+@import url('../../css/cell-formatter.css');
 
 .dtable-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
 .dtable-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {

package/lib/{RowExpandEmailFormatter → RowExpandFormatter/RowExpandEmailFormatter}/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _editorUtils = require("../utils/editor-utils");
+var _editorUtils = require("../../utils/editor-utils");
 require("./index.css");
 class RowExpandEmailFormatter extends _react.default.Component {
   constructor() {

package/lib/{RowExpandFileFormatter → RowExpandFormatter/RowExpandFileFormatter}/index.css

@@ -1,4 +1,4 @@
-@import url('../css/cell-formatter.css');
+@import url('../../css/cell-formatter.css');
 
 .dtable-ui.row-expand-file-formatter {
   display: flex;
@@ -28,7 +28,7 @@
   border-color: #c9c9c9;
 }
 
-.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice {
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-ui-file-icons-choice {
   height: 20px;
   width: 100%;
   top: 0;
@@ -40,11 +40,11 @@
   align-items: center;
 }
 
-.dtable-ui.row-expand-file-formatter .row-expand-item-file:hover .dtable-file-icons-choice {
+.dtable-ui.row-expand-file-formatter .row-expand-item-file:hover .dtable-ui-file-icons-choice {
   display: flex;
 }
 
-.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon {
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-ui-file-icons-choice .file-icon {
   height: 16px;
   width: 16px;
   border-radius: 50%;
@@ -56,11 +56,11 @@
   align-items: center;
 }
 
-.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon:nth-child(2) {
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-ui-file-icons-choice .file-icon:nth-child(2) {
   margin-left: 5px;
 }
 
-.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon .dtable-font {
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-ui-file-icons-choice .file-icon .dtable-font {
   font-size: 12px;
   transform: scale(.7);
 }

package/lib/{RowExpandFileFormatter → RowExpandFormatter/RowExpandFileFormatter}/index.js

@@ -17,7 +17,8 @@ class RowExpandFileFormatter extends _react.default.PureComponent {
       column,
       downloadFile,
       deleteFile,
-      readOnly
+      readOnly,
+      config
     } = this.props;
     if (!Array.isArray(value) || value.length === 0) {
       return null;
@@ -30,6 +31,7 @@ class RowExpandFileFormatter extends _react.default.PureComponent {
         key: index,
         index: index,
         column: column,
+        config: config,
         downloadFile: downloadFile,
         deleteFile: deleteFile,
         readOnly: readOnly