dtable-ui-component 6.0.25 → 6.0.26-beta

package/lib/RowExpand/sm/body/index.js

@@ -0,0 +1,111 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _dtableUtils = require("dtable-utils");
+var _columnContent = _interopRequireDefault(require("../column-content"));
+var _RowExpandEditor = _interopRequireDefault(require("../../../RowExpandEditor"));
+var _RowExpandFormatter = _interopRequireDefault(require("../../../RowExpandFormatter"));
+var _utils = require("../../../utils/utils");
+require("./index.css");
+class Body extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.downloadImage = imageItemUrl => {
+      this.props.getDownLoadFiles([{
+        url: imageItemUrl
+      }]).then(res => {
+        const [downloadUrl] = res.data.urls;
+        (0, _utils.downloadFile)(downloadUrl);
+      }).catch(error => {
+        // todo
+      });
+    };
+    this.getCellValue = _ref => {
+      let {
+        row,
+        column
+      } = _ref;
+      if (!row || !column) return null;
+      const {
+        valueKey
+      } = this.props;
+      return row[column[valueKey]];
+    };
+    this.renderColumnValue = (row, column) => {
+      const {
+        component,
+        onChange,
+        className,
+        ...props
+      } = this.props;
+      const {
+        getDownLoadFiles
+      } = props;
+      const {
+        editable
+      } = column;
+      const {
+        editor,
+        formatter
+      } = component || {};
+      if (editable) {
+        return /*#__PURE__*/_react.default.createElement(_RowExpandEditor.default, Object.assign({}, props, {
+          column: column,
+          row: row,
+          component: editor,
+          onCommit: value => onChange(column, value)
+        }));
+      }
+      return /*#__PURE__*/_react.default.createElement(_RowExpandFormatter.default, Object.assign({}, props, {
+        className: (0, _classnames.default)('mobile-dtable-ui-row-expand-formatter', "mobile-dtable-row-expand-".concat(column.type, "-formatter"), className),
+        column: column,
+        row: row,
+        component: formatter,
+        downloadImage: getDownLoadFiles ? this.downloadImage : null
+      }));
+    };
+  }
+  render() {
+    const {
+      columns,
+      row,
+      placeholder
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-body mobile-dtable-ui-row-expand-body"
+    }, columns.length === 0 && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder), columns.map(column => {
+      const {
+        type,
+        data
+      } = column;
+      let isHasMore = false;
+      if (type === _dtableUtils.CellType.LINK_FORMULA) {
+        let {
+          array_type
+        } = data || {};
+        const value = this.getCellValue({
+          row,
+          column
+        });
+        const cellValue = (0, _utils.getFormulaArrayValue)(value, !(0, _utils.isArrayFormatColumn)(array_type));
+        if (cellValue.length >= 10) {
+          isHasMore = true;
+        }
+      }
+      return /*#__PURE__*/_react.default.createElement(_columnContent.default, {
+        column: column,
+        className: (0, _classnames.default)('', {
+          'is-has-more': isHasMore
+        }),
+        key: column.key
+      }, this.renderColumnValue(row, column));
+    }));
+  }
+}
+var _default = exports.default = Body;

package/lib/RowExpand/sm/column-content/index.css

@@ -0,0 +1,27 @@
+.mobile-dtable-ui-row-expand-item {
+  margin-bottom: 0px;
+  padding: 0 1rem;
+  background-color: #fff;
+  min-height: unset;
+}
+
+.mobile-dtable-ui-row-expand-item .mobile-dtable-ui-row-expand-item-title {
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e9e9e9;
+  border-top: 1px solid #e9e9e9;
+  margin: 0 -1rem;
+  padding: 0.625rem 1rem 0;
+  display: flex;
+}
+
+.mobile-dtable-ui-row-expand-item .mobile-dtable-ui-row-expand-item-title label {
+  margin-bottom: 5px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.mobile-dtable-ui-row-expand-item .mobile-dtable-ui-column-uneditable-tip {
+  font-size: 14px;
+  margin-left: 4px;
+  color: #ccc;
+}

package/lib/RowExpand/sm/column-content/index.js

@@ -0,0 +1,25 @@
+"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");
+require("./index.css");
+const ColumnContent = _ref => {
+  let {
+    column,
+    children
+  } = _ref;
+  const {
+    name
+  } = column;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-dtable-ui-row-expand-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-dtable-ui-row-expand-item-title"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, name)), children);
+};
+var _default = exports.default = ColumnContent;

package/lib/RowExpand/sm/index.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dtableUtils = require("dtable-utils");
+var _toaster = _interopRequireDefault(require("../../toaster"));
+var _Loading = _interopRequireDefault(require("../../Loading"));
+var _body = _interopRequireDefault(require("./body"));
+var _lang = require("../../lang");
+var _cellComparer = require("../../utils/cell-comparer");
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+require("./index.css");
+const Small = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    saveImmediately = true,
+    readonly = false,
+    isInsertingRow = false,
+    zIndex,
+    title,
+    className,
+    valueKey = 'name',
+    // name or key
+    row: defaultRow,
+    columns: defaultColumns,
+    commit,
+    onToggle,
+    uploadFile,
+    copyURL,
+    children = [],
+    historyCallback,
+    ...otherProps
+  } = _ref;
+  const [isLoading, setLoading] = (0, _react.useState)(true);
+  const [isSaving, setSaving] = (0, _react.useState)(false);
+  const [row, setRow] = (0, _react.useState)({});
+  const [columns, setColumns] = (0, _react.useState)([]);
+  const isChangedRef = (0, _react.useRef)(false);
+  const update = (0, _react.useRef)({});
+  const checkEditable = (0, _react.useCallback)(column => {
+    if (isSaving) return false;
+    if (readonly || !column || !column.editable || _dtableUtils.NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP[column.type]) return false;
+    if (column.type === _dtableUtils.CellType.IMAGE || column.type === _dtableUtils.CellType.FILE) return Boolean(uploadFile);
+    return true;
+  }, [readonly, isSaving, uploadFile]);
+  const initRowData = (0, _react.useCallback)(() => {
+    setLoading(true);
+    setRow(defaultRow);
+    let validColumns = defaultColumns.map(c => ({
+      ...c,
+      editable: checkEditable(c, defaultRow),
+      width: 320
+    }));
+    if (isInsertingRow) {
+      validColumns = validColumns.filter(c => c.editable);
+    }
+    isChangedRef.current = isInsertingRow && Object.keys(defaultRow).length > 0;
+    setColumns(validColumns);
+    setLoading(false);
+  }, [isInsertingRow, defaultColumns, defaultRow, checkEditable]);
+  const toggle = (0, _react.useCallback)(() => {
+    if (isSaving) return;
+    onToggle();
+  }, [isSaving, onToggle]);
+  const onSave = (0, _react.useCallback)(function (updated) {
+    let {
+      successCallback,
+      failCallback
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    commit(updated, columns, {
+      successCallback,
+      failCallback
+    });
+  }, [columns, commit]);
+  const onChange = (0, _react.useCallback)((column, value) => {
+    const key = column[valueKey];
+    const updated = {
+      [key]: value
+    };
+    const oldValue = row[key];
+    if (!(0, _cellComparer.isCellValueChanged)(oldValue, value, column.type)) return;
+    if (!saveImmediately || isInsertingRow) {
+      isChangedRef.current = true;
+      update.current = {
+        ...update.current,
+        ...updated
+      };
+      setRow({
+        ...row,
+        ...updated
+      });
+      return;
+    }
+    onSave(updated, {
+      successCallback: () => {
+        isChangedRef.current = false;
+        update.current = {};
+        setRow({
+          ...row,
+          ...updated
+        });
+      },
+      failCallback: () => {
+        _toaster.default.danger((0, _lang.getLocale)('Save_failed'));
+      }
+    });
+  }, [saveImmediately, isInsertingRow, row, valueKey, onSave]);
+  const onSubmit = (0, _react.useCallback)(() => {
+    setSaving(true);
+    const successCallback = isInsertingRow ? onToggle : () => {
+      isChangedRef.current = false;
+      update.current = {};
+      setSaving(false);
+    };
+    const failCallback = () => {
+      setSaving(false);
+      _toaster.default.danger((0, _lang.getLocale)('Save_failed'));
+    };
+    const newRow = isInsertingRow ? {
+      ...row,
+      ...update.current
+    } : update.current;
+    onSave(newRow, {
+      successCallback,
+      failCallback
+    });
+  }, [row, isInsertingRow, onSave, onToggle]);
+  (0, _react.useEffect)(() => {
+    initRowData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    getData: () => ({
+      row,
+      columns
+    }),
+    setData: function () {
+      let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      Object.keys(data).forEach(key => {
+        if (key === 'row') {
+          setRow(data[key]);
+        }
+        if (key === 'columns') {
+          setColumns(data[key]);
+        }
+      });
+    }
+  }), [row, columns]);
+  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+    className: (0, _classnames.default)('seatable-row-expand-full-screen-page', className),
+    onLeftClick: toggle,
+    onRightClick: (!saveImmediately || isInsertingRow) && !(isSaving || !isChangedRef.current) ? onSubmit : null,
+    zIndex: zIndex || 100,
+    historyCallback: historyCallback
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "dtable-font dtable-icon-return"
+  }), title, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (!saveImmediately || isInsertingRow) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Submit'))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "w-100 -h-100 d-flex align-items-center justify-content-center"
+  }, /*#__PURE__*/_react.default.createElement(_Loading.default, null)) : /*#__PURE__*/_react.default.createElement(_body.default, Object.assign({}, otherProps, {
+    row: row,
+    columns: columns,
+    valueKey: valueKey,
+    onChange: onChange,
+    uploadFile: uploadFile
+  }))));
+});
+var _default = exports.default = Small;

package/lib/RowExpandEditor/RightAngle/index.css

@@ -0,0 +1,6 @@
+.mobile-dtable-ui-row-expand-angle-right {
+  color: #999;
+  position: absolute;
+  right: 0;
+  top: calc(50% - 12px);
+}

package/lib/RowExpandEditor/RightAngle/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RightAngle;
+var _react = _interopRequireDefault(require("react"));
+require("./index.css");
+function RightAngle() {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "mobile-dtable-ui-row-expand-angle-right"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    "aria-hidden": "true",
+    className: "dtable-font dtable-icon-right"
+  }));
+}

package/lib/RowExpandEditor/RowExpandAddBtn/index.js

@@ -1,24 +1,19 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _constants = require("../../constants");
-require("./index.css");
-const RowExpandAddBtn = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    tabIndex: 0,
-    onClick: props.onClick,
-    onFocus: props.onFocus,
-    role: "button",
-    className: "dtable-ui-row-expand-add-btn d-print-none",
-    style: props.isFocus ? _constants.ROW_EXPAND_BTN_FOCUS_STYLE : {}
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "d-print-none"
-  }, props.text));
-});
+var _react = _interopRequireDefault(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandAddBtn = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
 var _default = exports.default = RowExpandAddBtn;

package/lib/RowExpandEditor/RowExpandAddBtn/lg/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../constants");
+require("./index.css");
+const Large = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    tabIndex: 0,
+    onClick: props.onClick,
+    onFocus: props.onFocus,
+    role: "button",
+    className: (0, _classnames.default)('dtable-ui-row-expand-add-btn d-print-none', props.className),
+    style: props.isFocus ? _constants.ROW_EXPAND_BTN_FOCUS_STYLE : {}
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "d-print-none"
+  }, props.text));
+});
+var _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandAddBtn/sm/index.css

@@ -0,0 +1,3 @@
+.mobile-dtable-ui-row-expand-add-btn {
+  color: #666666;
+}

package/lib/RowExpandEditor/RowExpandAddBtn/sm/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+const Small = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    onClick: props.onClick,
+    className: (0, _classnames.default)('mobile-dtable-ui-row-expand-add-btn', props.className)
+  }, props.text);
+});
+var _default = exports.default = Small;

package/lib/RowExpandEditor/RowExpandCheckboxEditor/index.js

@@ -6,38 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _CheckboxEditor = _interopRequireDefault(require("../../CheckboxEditor"));
-var _constants = require("../../constants");
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
 require("./index.css");
-class RowExpandCheckboxEditor extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-    this.onChangeCheckboxValue = () => {
-      const {
-        columnIndex
-      } = this.props;
-      if (!this.editor) return;
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(columnIndex);
-      }
-      const newValue = this.editor.getValue();
-      this.props.onCommit(newValue);
-    };
-  }
-  render() {
-    const {
-      isEditorFocus,
-      column,
-      value
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_CheckboxEditor.default, {
-      ref: ref => this.editor = ref,
-      className: "dtable-ui-row-expand-checkbox-editor mt-2",
-      column: column,
-      value: value,
-      style: isEditorFocus ? _constants.ROW_EXPAND_FOCUS_STYLE : {},
-      onCommit: this.onChangeCheckboxValue
-    });
-  }
-}
+const RowExpandCheckboxEditor = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
 var _default = exports.default = RowExpandCheckboxEditor;

package/lib/RowExpandEditor/RowExpandCheckboxEditor/lg.js

@@ -0,0 +1,42 @@
+"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 _lg = _interopRequireDefault(require("../../CheckboxEditor/lg"));
+var _constants = require("../../constants");
+class Large extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.onChangeCheckboxValue = () => {
+      const {
+        columnIndex
+      } = this.props;
+      if (!this.editor) return;
+      if (this.props.updateTabIndex) {
+        this.props.updateTabIndex(columnIndex);
+      }
+      const newValue = this.editor.getValue();
+      this.props.onCommit(newValue);
+    };
+  }
+  render() {
+    const {
+      isEditorFocus,
+      column,
+      value
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_lg.default, {
+      ref: ref => this.editor = ref,
+      className: "dtable-ui-row-expand-checkbox-editor mt-2",
+      column: column,
+      value: value,
+      style: isEditorFocus ? _constants.ROW_EXPAND_FOCUS_STYLE : {},
+      onCommit: this.onChangeCheckboxValue
+    });
+  }
+}
+var _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandCheckboxEditor/sm/index.css

@@ -0,0 +1,6 @@
+.mobile-dtable-ui-row-expand-checkbox-editor-container {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+}

package/lib/RowExpandEditor/RowExpandCheckboxEditor/sm/index.js

@@ -0,0 +1,39 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _sm = _interopRequireDefault(require("../../../CheckboxEditor/sm"));
+require("./index.css");
+class Small extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onChangeCheckboxValue = () => {
+      if (!this.editor) return;
+      const newValue = this.editor.getValue();
+      this.props.onCommit(newValue);
+    };
+    this.editor = null;
+  }
+  render() {
+    const {
+      column,
+      value,
+      className
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('mobile-dtable-ui-row-expand-checkbox-editor-container', className)
+    }, /*#__PURE__*/_react.default.createElement(_sm.default, {
+      ref: ref => this.editor = ref,
+      className: "dtable-ui-row-expand-checkbox-editor mt-0",
+      column: column,
+      value: value,
+      onCommit: this.onChangeCheckboxValue
+    }));
+  }
+}
+var _default = exports.default = Small;