dtable-ui-component 5.3.0-alpha1 → 5.3.1-beta

package/lib/RowExpandDialog/column-content/index.css

@@ -0,0 +1,43 @@
+.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info {
+  padding-top: 9px;
+  height: fit-content;
+}
+
+.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-header-icon {
+  display: inline-block;
+  padding: 0 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.dtable-ui-header-icon .dtable-font {
+  font-size: 14px;
+  color: #aaa;
+  cursor: default;
+}
+
+.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-header-icon .dtable-font {
+  color: #212529a6;
+}
+
+.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-row-expand-column-name {
+  color: #212529b3;
+}
+
+.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .cell-is-required {
+  color: #ff1920;
+  padding-left: 0.3125rem;
+  display: inline-block;
+  height: 21px;
+}
+
+.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-column-tip-icon {
+  color: #bdbdbd;
+  position: relative;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.dtable-ui-column-description-tip {
+  max-height: 300px;
+  overflow: auto;
+}

package/lib/RowExpandDialog/column-content/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _dtableUtils = require("dtable-utils");
+require("./index.css");
+const RowContent = _ref => {
+  let {
+    column,
+    children
+  } = _ref;
+  const descriptionRef = (0, _react.useRef)(null);
+  const {
+    name,
+    type,
+    key,
+    description
+  } = column;
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
+    className: "dtable-ui-row-expand-column-content pb-4"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
+    md: 3,
+    className: "dtable-ui-row-expand-column-content-info d-flex"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "dtable-ui-header-icon",
+    id: "header-icon-".concat(key)
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: _dtableUtils.COLUMNS_ICON_CONFIG[type]
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "dtable-ui-row-expand-column-name"
+  }, name || ''), description && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "dtable-font dtable-icon-description dtable-ui-column-tip-icon ml-2",
+    ref: descriptionRef
+  }), descriptionRef.current && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
+    innerClassName: "dtable-ui-column-description-tip",
+    popperClassName: "dtable-ui-row-expand-column-tip",
+    target: descriptionRef.current,
+    placement: "bottom",
+    fade: false
+  }, description))), /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
+    md: 9,
+    className: "d-flex align-items-center dtable-ui-row-expand-column-content-value"
+  }, children));
+};
+var _default = exports.default = RowContent;

package/lib/RowExpandDialog/constants.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.keyCodes = exports.ROW_EXPAND_FOCUS_STYLE = exports.ROW_EXPAND_BTN_FOCUS_STYLE = void 0;
+const keyCodes = exports.keyCodes = {
+  Backspace: 8,
+  Tab: 9,
+  Enter: 13,
+  Shift: 16,
+  Ctrl: 17,
+  Alt: 18,
+  PauseBreak: 19,
+  CapsLock: 20,
+  Escape: 27,
+  Esc: 27,
+  Space: 32,
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
+  LeftArrow: 37,
+  UpArrow: 38,
+  RightArrow: 39,
+  DownArrow: 40,
+  Insert: 45,
+  Delete: 46,
+  0: 48,
+  1: 49,
+  2: 50,
+  3: 51,
+  4: 52,
+  5: 53,
+  6: 54,
+  7: 55,
+  8: 56,
+  9: 57,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  LeftWindowKey: 91,
+  RightWindowKey: 92,
+  SelectKey: 93,
+  NumPad0: 96,
+  NumPad1: 97,
+  NumPad2: 98,
+  NumPad3: 99,
+  NumPad4: 100,
+  NumPad5: 101,
+  NumPad6: 102,
+  NumPad7: 103,
+  NumPad8: 104,
+  NumPad9: 105,
+  Multiply: 106,
+  Add: 107,
+  Subtract: 109,
+  DecimalPoint: 110,
+  Divide: 111,
+  F1: 112,
+  F2: 113,
+  F3: 114,
+  F4: 115,
+  F5: 116,
+  F6: 117,
+  F7: 118,
+  F8: 119,
+  F9: 120,
+  F10: 121,
+  F12: 123,
+  NumLock: 144,
+  ScrollLock: 145,
+  SemiColon: 186,
+  EqualSign: 187,
+  Comma: 188,
+  Dash: 189,
+  Period: 190,
+  ForwardSlash: 191,
+  GraveAccent: 192,
+  OpenBracket: 219,
+  BackSlash: 220,
+  CloseBracket: 221,
+  SingleQuote: 222,
+  ChineseInputMethod: 229
+};
+const ROW_EXPAND_FOCUS_STYLE = exports.ROW_EXPAND_FOCUS_STYLE = {
+  border: '2px solid #3B88FD'
+};
+const ROW_EXPAND_BTN_FOCUS_STYLE = exports.ROW_EXPAND_BTN_FOCUS_STYLE = {
+  border: '2px solid #3B88FD'
+};

package/lib/RowExpandDialog/header/index.css

@@ -0,0 +1,31 @@
+.dtable-ui-row-expand-header .dtable-ui-row-expand-header-close-list {
+  display: flex;
+}
+
+.dtable-ui-row-expand-header .dtable-ui-row-expand-header-close-list .header-close-list-btn {
+  height: 24px;
+  width: 24px;
+  padding: 0 5px;
+  margin: 0 2px;
+  color: #000;
+  opacity: 0.5;
+  font-weight: 700;
+}
+
+.dtable-ui-row-expand-header .dtable-ui-row-expand-header-close-list .header-close-list-btn:hover {
+  opacity: 0.75;
+  cursor: pointer;
+}
+
+.dtable-ui-row-expand-header .dtable-ui-row-expand-header-left-btns {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dtable-ui-row-expand-header .dtable-ui-row-expand-header-left-btns .dtable-ui-row-expand-header-title {
+  max-width: 400px;
+  font-weight: normal;
+}
+

package/lib/RowExpandDialog/header/index.js

@@ -0,0 +1,33 @@
+"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 _lang = require("../../lang");
+require("./index.css");
+const Header = _ref => {
+  let {
+    onToggle,
+    title
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+    className: "d-print-none dtable-ui-row-expand-header",
+    close: /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-header-close-list"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      role: "button",
+      "aria-label": (0, _lang.getLocale)('Close_expanded_record'),
+      className: "dtable-font dtable-icon-x header-close-list-btn",
+      onClick: onToggle
+    }))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui-row-expand-header-left-btns"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui-row-expand-header-title text-truncate"
+  }, title)));
+};
+var _default = exports.default = Header;

package/lib/RowExpandDialog/index.css

@@ -0,0 +1,24 @@
+.dtable-ui-row-expand-dialog {
+  margin: 28px 0 0 0;
+  transform: translate(0, 0) !important;
+}
+
+.dtable-ui-row-expand-dialog .modal-header {
+  padding: 6px 14px 6px 20px;
+}
+
+.dtable-ui-row-expand-dialog .modal-content {
+  height: 100%;
+}
+
+.dtable-ui-row-expand-dialog .dtable-ui-row-expand-content {
+  display: flex;
+  flex-direction: row;
+}
+
+.dtable-ui-row-expand-dialog .dtable-ui-row-expand-details {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}

package/lib/RowExpandDialog/index.js

@@ -0,0 +1,268 @@
+"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 _reactstrap = require("reactstrap");
+var _dtableUtils = require("dtable-utils");
+var _lang = require("../lang");
+var _header = _interopRequireDefault(require("./header"));
+var _body = _interopRequireDefault(require("./body"));
+var _Loading = _interopRequireDefault(require("../Loading"));
+var _utils = require("../utils/utils");
+var _cellComparer = require("../utils/cell-comparer");
+require("./index.css");
+var _toaster = _interopRequireDefault(require("../toaster"));
+const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    saveImmediately = true,
+    isInsertingRow,
+    zIndex,
+    title,
+    className,
+    placeholder,
+    collaborators,
+    component,
+    eventBus,
+    valueKey = 'name',
+    // name or key
+    departments,
+    userDepartmentIdsMap,
+    config,
+    layout = 'horizontal',
+    // horizontal or vertical
+    longTextEditorAPI,
+    getRow,
+    modifyRow,
+    getCollaborators,
+    queryCollaborators,
+    checkEditable = c => c.editable && !_dtableUtils.NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP[c.type],
+    onToggle,
+    uploadFile
+  } = _ref;
+  const [isAnimationEnd, setAnimationEnd] = (0, _react.useState)(false);
+  const [isLoading, setLoading] = (0, _react.useState)(true);
+  const [isSaving, setSaving] = (0, _react.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
+  const [row, setRow] = (0, _react.useState)({});
+  const [columns, setColumns] = (0, _react.useState)([]);
+  const modalRef = (0, _react.useRef)(null);
+  const isChangedRef = (0, _react.useRef)(false);
+  const update = (0, _react.useRef)({});
+  const initStyle = (0, _react.useMemo)(() => {
+    const defaultMargin = 80; // sequence cell width
+    const defaultHeight = 100;
+    return {
+      width: window.innerWidth - defaultMargin,
+      maxWidth: window.innerWidth - defaultMargin,
+      marginLeft: defaultMargin,
+      height: defaultHeight,
+      marginRight: defaultMargin,
+      marginTop: '30%',
+      transition: 'all .3s'
+    };
+  }, []);
+  const style = (0, _react.useMemo)(() => {
+    const width = 800;
+    return {
+      width,
+      maxWidth: width,
+      marginLeft: (window.innerWidth - width) / 2,
+      height: 'calc(100% - 56px)' // Dialog margin is 3.5rem (56px)
+    };
+  }, []);
+  const _checkEditable = (0, _react.useCallback)((column, row) => {
+    if (isSaving) return false;
+    if (!column) return false;
+    if (!checkEditable) return false;
+    if (!checkEditable(column, row)) return false;
+    if (column.type === _dtableUtils.CellType.IMAGE || column.type === _dtableUtils.CellType.FILE) return Boolean(uploadFile);
+    return true;
+  }, [isSaving, checkEditable, uploadFile]);
+  const initRowData = (0, _react.useCallback)(() => {
+    setLoading(true);
+    getRow().then(res => {
+      const {
+        row,
+        columns
+      } = res.data;
+      setRow(row);
+      const validColumns = columns.map(c => ({
+        ...c,
+        editable: _checkEditable(c, row),
+        width: 320
+      }));
+      isChangedRef.current = isInsertingRow && Object.keys(row).length > 0;
+      setColumns(validColumns);
+      setLoading(false);
+    }).catch(error => {
+      const errorMsg = (0, _utils.getErrorMsg)(error);
+      setErrorMessage((0, _lang.getLocale)(errorMsg));
+      setLoading(false);
+    });
+  }, [isInsertingRow, getRow, _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] : {};
+    modifyRow(updated, columns, {
+      successCallback,
+      failCallback
+    });
+  }, [columns, modifyRow]);
+  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)(() => {
+    // use setTimeout to make sure real dom rendered
+    setTimeout(() => {
+      let dom = modalRef.current.firstChild;
+      const {
+        width,
+        maxWidth,
+        marginLeft,
+        height
+      } = style;
+      dom.style.width = "".concat(width, "px");
+      dom.style.maxWidth = "".concat(maxWidth, "px");
+      dom.style.marginLeft = "".concat(marginLeft, "px");
+      dom.style.height = height;
+      dom.style.marginRight = 'unset';
+      dom.style.marginTop = '28px';
+      // after animation, change style and run callback
+      setTimeout(() => {
+        setAnimationEnd(true);
+        dom.style.transition = 'none';
+        initRowData();
+      }, 280);
+    }, 1);
+    // 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]);
+  const renderContent = (0, _react.useCallback)(() => {
+    if (!isAnimationEnd) return null;
+    if (isLoading) return /*#__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));
+    if (errorMessage) return /*#__PURE__*/_react.default.createElement("div", null, errorMessage);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-details"
+    }, /*#__PURE__*/_react.default.createElement(_header.default, {
+      onToggle: toggle,
+      title: title
+    }), /*#__PURE__*/_react.default.createElement(_body.default, {
+      isInsertingRow: isInsertingRow,
+      row: row,
+      columns: columns,
+      placeholder: placeholder,
+      collaborators: collaborators,
+      eventBus: eventBus,
+      component: component,
+      valueKey: valueKey,
+      departments: departments,
+      userDepartmentIdsMap: userDepartmentIdsMap,
+      config: config,
+      onChange: onChange,
+      getCollaborators: getCollaborators,
+      queryCollaborators: queryCollaborators,
+      uploadFile: uploadFile,
+      longTextEditorAPI: longTextEditorAPI
+    }), (!saveImmediately || isInsertingRow) && /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+      onClick: toggle,
+      color: "secondary"
+    }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+      onClick: onSubmit,
+      disabled: isSaving || !isChangedRef.current,
+      color: "primary"
+    }, (0, _lang.getLocale)('Submit'))));
+  }, [isSaving, saveImmediately, isAnimationEnd, isLoading, isInsertingRow, errorMessage, title, row, columns, placeholder, collaborators, component, valueKey, departments, userDepartmentIdsMap, eventBus, onChange, toggle, getCollaborators, queryCollaborators, uploadFile, longTextEditorAPI, config, onSubmit]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    isOpen: true,
+    toggle: onToggle,
+    className: (0, _classnames.default)('dtable-ui-row-expand-dialog', className),
+    style: isAnimationEnd ? style : initStyle,
+    zIndex: zIndex || 1048,
+    contentClassName: "dtable-ui-row-expand-content",
+    modalClassName: "dtable-ui-row-expand-modal",
+    fade: false,
+    innerRef: modalRef,
+    keyboard: false
+  }, renderContent());
+});
+var _default = exports.default = RowExpandDialog;

package/lib/RowExpandDialog/utils.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTwoDimensionArrayValue = exports.getFormulaArrayValue = exports.downloadFile = void 0;
+exports.isArrayFormalColumn = isArrayFormalColumn;
+exports.isValidCellValue = void 0;
+var _dtableUtils = require("dtable-utils");
+const isValidCellValue = value => {
+  if (value === undefined) return false;
+  if (value === null) return false;
+  if (value === '') return false;
+  if (JSON.stringify(value) === '{}') return false;
+  if (JSON.stringify(value) === '[]') return false;
+  return true;
+};
+exports.isValidCellValue = isValidCellValue;
+function isArrayFormalColumn(columnType) {
+  return [_dtableUtils.CellType.IMAGE, _dtableUtils.CellType.FILE, _dtableUtils.CellType.MULTIPLE_SELECT, _dtableUtils.CellType.COLLABORATOR].includes(columnType);
+}
+const getFormulaArrayValue = function (value) {
+  let isFlat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  if (!Array.isArray(value)) return [];
+  if (!isFlat) return getTwoDimensionArrayValue(value);
+  return value.map(item => {
+    if (Object.prototype.toString.call(item) !== '[object Object]') {
+      return item;
+    }
+    if (!Object.prototype.hasOwnProperty.call(item, 'display_value')) return item;
+    const {
+      display_value
+    } = item;
+    if (!Array.isArray(display_value) || display_value.length === 0) return display_value;
+    return display_value.map(i => {
+      if (Object.prototype.toString.call(i) === '[object Object]') {
+        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) return i;
+        const {
+          display_value
+        } = i;
+        return display_value;
+      }
+      return i;
+    });
+  }).flat().filter(item => isValidCellValue(item));
+};
+exports.getFormulaArrayValue = getFormulaArrayValue;
+const getTwoDimensionArrayValue = value => {
+  if (!Array.isArray(value)) return [];
+  return value.map(item => {
+    if (Object.prototype.toString.call(item) !== '[object Object]') {
+      return item;
+    }
+    if (!Object.prototype.hasOwnProperty.call(item, 'display_value')) return item;
+    const {
+      display_value
+    } = item;
+    if (!Array.isArray(display_value) || display_value.length === 0) return display_value;
+    return display_value.map(i => {
+      if (Object.prototype.toString.call(i) === '[object Object]') {
+        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) return i;
+        const {
+          display_value
+        } = i;
+        return display_value;
+      }
+      return i;
+    });
+  });
+};
+exports.getTwoDimensionArrayValue = getTwoDimensionArrayValue;
+const downloadFile = downloadUrl => {
+  const downloadFrame = document.getElementById('download-iframe');
+  if (downloadFrame != null) {
+    document.body.removeChild(downloadFrame);
+  }
+  let iframe = document.createElement('iframe');
+  iframe.setAttribute('id', 'download-iframe');
+  iframe.style.display = 'none';
+  iframe.src = downloadUrl;
+  document.body.appendChild(iframe);
+};
+exports.downloadFile = downloadFile;

package/lib/RowExpandEditor/RowExpandAddBtn/index.css

@@ -0,0 +1,22 @@
+.dtable-ui-row-expand-add-btn {
+  min-width: 80px;
+  max-width: 100%;
+  height: 28px;
+  line-height: 24px;
+  border: 2px solid transparent;
+  padding: 0 10px;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  color: #666666;
+  font-size: 14px;
+  text-align: center;
+  display: inline-flex;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.dtable-ui-row-expand-add-btn:hover {
+  background-color: #dbdbdb;
+  color: #666666;
+  cursor: pointer;
+}

package/lib/RowExpandEditor/RowExpandAddBtn/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").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 _default = exports.default = RowExpandAddBtn;