dtable-ui-component 6.0.25 → 6.0.26-beta1

package/lib/RowExpandEditor/RowExpandDateEditor/index.js

@@ -6,125 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _dtableUtils = require("dtable-utils");
-var _DateEditor = _interopRequireDefault(require("../../DateEditor"));
-var _utils = require("../../utils/utils");
-var _columnUtils = require("../../utils/column-utils");
-var _constants = require("../../constants");
-class RowExpandDateEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowEditor) {
-        if ((0, _utils.getEventClassName)(e).includes('rc-calendar')) return;
-        this.setState({
-          isShowEditor: true
-        });
-      }
-    };
-    this.hideCalendar = () => {
-      this.setState({
-        isShowEditor: false
-      }, () => {
-        this.dateContainerRef && this.dateContainerRef.focus();
-      });
-    };
-    this.onFocus = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-    };
-    this.toggleEditor = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-      this.setState({
-        isShowEditor: !this.state.isShowEditor
-      });
-    };
-    this.onCommit = value => {
-      this.props.onCommit(value);
-      this.setState({
-        value
-      });
-    };
-    this.onClear = () => {
-      this.setState({
-        value: null
-      });
-      this.props.onCommit(null);
-    };
-    this.state = {
-      isShowEditor: false,
-      value: null
-    };
-  }
-  componentDidMount() {
-    const {
-      column,
-      row,
-      valueKey
-    } = this.props;
-    this.setState({
-      value: row[column[valueKey]]
-    });
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row,
-      valueKey
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.setState({
-        value: row[column[valueKey]],
-        isShowEditor: false
-      });
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.isShowEditor !== prevState.isShowEditor) {
-      if (this.state.isShowEditor === true && this.props.onEditorOpen) {
-        this.props.onEditorOpen();
-      }
-      if (this.state.isShowEditor === false && this.props.onEditorClose) {
-        this.props.onEditorClose();
-      }
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    let {
-      column,
-      isInModal,
-      isEditorFocus,
-      lang
-    } = this.props;
-    let {
-      value,
-      isShowEditor
-    } = this.state;
-    const format = (0, _columnUtils.getDateColumnFormat)(column);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.dateSelectRef = ref
-    }, isShowEditor ? /*#__PURE__*/_react.default.createElement(_DateEditor.default, {
-      isInModal: isInModal,
-      value: value,
-      lang: lang,
-      column: column,
-      onCommit: this.onCommit,
-      hideCalendar: this.hideCalendar
-    }) : /*#__PURE__*/_react.default.createElement("div", {
-      tabIndex: 0,
-      onFocus: this.onFocus,
-      onClick: this.toggleEditor,
-      ref: ref => this.dateContainerRef = ref,
-      className: "form-control",
-      style: isEditorFocus ? Object.assign({
-        width: 320
-      }, _constants.ROW_EXPAND_FOCUS_STYLE) : {
-        width: 320
-      }
-    }, value ? (0, _dtableUtils.getDateDisplayString)(value, format) : ''));
-  }
-}
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandDateEditor = 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 = RowExpandDateEditor;

package/lib/RowExpandEditor/RowExpandDateEditor/lg.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 _dtableUtils = require("dtable-utils");
+var _DateEditor = _interopRequireDefault(require("../../DateEditor"));
+var _utils = require("../../utils/utils");
+var _columnUtils = require("../../utils/column-utils");
+var _constants = require("../../constants");
+class Large extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowEditor) {
+        if ((0, _utils.getEventClassName)(e).includes('rc-calendar')) return;
+        this.setState({
+          isShowEditor: true
+        });
+      }
+    };
+    this.hideCalendar = () => {
+      this.setState({
+        isShowEditor: false
+      }, () => {
+        this.dateContainerRef && this.dateContainerRef.focus();
+      });
+    };
+    this.onFocus = () => {
+      this.props.updateTabIndex(this.props.columnIndex);
+    };
+    this.toggleEditor = () => {
+      this.props.updateTabIndex(this.props.columnIndex);
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      this.props.onCommit(value);
+      this.setState({
+        value
+      });
+    };
+    this.onClear = () => {
+      this.setState({
+        value: null
+      });
+      this.props.onCommit(null);
+    };
+    this.state = {
+      isShowEditor: false,
+      value: null
+    };
+  }
+  componentDidMount() {
+    const {
+      column,
+      row,
+      valueKey
+    } = this.props;
+    this.setState({
+      value: row[column[valueKey]]
+    });
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]],
+        isShowEditor: false
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.isShowEditor !== prevState.isShowEditor) {
+      if (this.state.isShowEditor === true && this.props.onEditorOpen) {
+        this.props.onEditorOpen();
+      }
+      if (this.state.isShowEditor === false && this.props.onEditorClose) {
+        this.props.onEditorClose();
+      }
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    let {
+      column,
+      isInModal,
+      isEditorFocus,
+      lang
+    } = this.props;
+    let {
+      value,
+      isShowEditor
+    } = this.state;
+    const format = (0, _columnUtils.getDateColumnFormat)(column);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.dateSelectRef = ref
+    }, isShowEditor ? /*#__PURE__*/_react.default.createElement(_DateEditor.default, {
+      isInModal: isInModal,
+      value: value,
+      lang: lang,
+      column: column,
+      onCommit: this.onCommit,
+      hideCalendar: this.hideCalendar
+    }) : /*#__PURE__*/_react.default.createElement("div", {
+      tabIndex: 0,
+      onFocus: this.onFocus,
+      onClick: this.toggleEditor,
+      ref: ref => this.dateContainerRef = ref,
+      className: "form-control",
+      style: isEditorFocus ? Object.assign({
+        width: 320
+      }, _constants.ROW_EXPAND_FOCUS_STYLE) : {
+        width: 320
+      }
+    }, value ? (0, _dtableUtils.getDateDisplayString)(value, format) : ''));
+  }
+}
+var _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandDateEditor/sm.js

@@ -0,0 +1,84 @@
+"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 _DateEditor = _interopRequireDefault(require("../../DateEditor"));
+var _RightAngle = _interopRequireDefault(require("../RightAngle"));
+var _columnUtils = require("../../utils/column-utils");
+class Small extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.hideCalendar = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.toggleEditor = () => {
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      this.props.onCommit(value);
+      this.setState({
+        value
+      });
+    };
+    const {
+      column,
+      row,
+      valueKey
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[column[valueKey]]
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]],
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    let {
+      column,
+      isInModal,
+      lang
+    } = this.props;
+    let {
+      value,
+      isShowEditor
+    } = this.state;
+    const format = (0, _columnUtils.getDateColumnFormat)(column);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '50px',
+        lineHeight: '50px'
+      },
+      onClick: this.toggleEditor
+    }, value ? (0, _dtableUtils.getDateDisplayString)(value, format) : ''), /*#__PURE__*/_react.default.createElement(_RightAngle.default, null)), isShowEditor && /*#__PURE__*/_react.default.createElement(_DateEditor.default, {
+      isInModal: isInModal,
+      value: value,
+      lang: lang,
+      column: column,
+      onCommit: this.onCommit,
+      hideCalendar: this.hideCalendar
+    }));
+  }
+}
+var _default = exports.default = Small;

package/lib/RowExpandEditor/RowExpandDepartmentEditor/index.js

@@ -1,104 +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"));
-var _hooks = require("../../hooks");
-var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
-var _constants = require("../../constants");
-var _departmentSingleSelect = _interopRequireDefault(require("../../Department-editor/department-single-select"));
-function RowExpandDepartmentEditor(props) {
-  const {
-    row,
-    column,
-    valueKey,
-    departments,
-    userDepartmentIdsMap,
-    isEditorFocus,
-    columnIndex
-  } = props;
-  const [value, setValue] = (0, _react.useState)(row[column[valueKey]] || '');
-  const [showEditor, setShowEditor] = (0, _react.useState)(false);
-  const departmentSelectContainer = (0, _react.useRef)(null);
-  const departmentSelectContent = (0, _react.useRef)(null);
-  (0, _hooks.useClickOutside)({
-    currDOM: departmentSelectContainer.current,
-    onClickOutside: hideDropDownMenu
-  }, [isEditorFocus, value]);
-  (0, _react.useEffect)(() => {
-    document.addEventListener('keydown', onKeyDown);
-    return () => {
-      document.removeEventListener('keydown', onKeyDown);
-    };
-    // eslint-disable-next-line
-  }, [isEditorFocus, showEditor]);
-  (0, _react.useEffect)(() => {
-    setValue(row[column[valueKey]] || '');
-    setShowEditor(false);
-    // eslint-disable-next-line
-  }, [row]);
-  function hideDropDownMenu(event) {
-    if (!event.target) return;
-    toggleDepartmentSelect(false);
-  }
-  function onKeyDown(e) {
-    if (e.keyCode === _constants.KeyCodes.Enter && props.isEditorFocus && !showEditor) {
-      setShowEditor(true);
-    } else if (e.keyCode === _constants.KeyCodes.Escape && showEditor) {
-      e.stopPropagation();
-      setShowEditor(false);
-      departmentSelectContent.current.focus();
-    }
-  }
-  function toggleDepartmentSelect(value) {
-    setShowEditor(value);
-  }
-  function onToggleSelect(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    props.updateTabIndex(columnIndex);
-    toggleDepartmentSelect(true);
-  }
-  function onFocus() {
-    props.updateTabIndex(columnIndex);
-  }
-  function onCommit(newValue) {
-    toggleDepartmentSelect(false);
-    if (newValue === value) return;
-    setValue(newValue);
-    props.onCommit(newValue);
-  }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "position-relative w-100",
-    ref: departmentSelectContainer
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    tabIndex: 0,
-    onFocus: onFocus,
-    onClick: onToggleSelect,
-    ref: departmentSelectContent,
-    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, /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
-    value: value,
-    departments: departments
-  })), /*#__PURE__*/_react.default.createElement("i", {
-    "aria-hidden": "true",
-    className: "dtable-font dtable-icon-down3"
-  }))), showEditor && /*#__PURE__*/_react.default.createElement(_departmentSingleSelect.default, {
-    enableSelectRange: false,
-    column: column,
-    value: value,
-    onCommit: onCommit,
-    userDepartmentIdsMap: userDepartmentIdsMap,
-    departments: departments
-  }));
-}
+var _react = _interopRequireDefault(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandDepartmentEditor = 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 = RowExpandDepartmentEditor;

package/lib/RowExpandEditor/RowExpandDepartmentEditor/lg.js

@@ -0,0 +1,101 @@
+"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 _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
+var _constants = require("../../constants");
+var _DepartmentEditor = _interopRequireDefault(require("../../DepartmentEditor"));
+function Large(props) {
+  const {
+    row,
+    column,
+    valueKey,
+    departments,
+    userDepartmentIdsMap,
+    isEditorFocus,
+    columnIndex
+  } = props;
+  const [value, setValue] = (0, _react.useState)(row[column[valueKey]] || '');
+  const [showEditor, setShowEditor] = (0, _react.useState)(false);
+  const departmentSelectContainer = (0, _react.useRef)(null);
+  const departmentSelectContent = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+    // eslint-disable-next-line
+  }, [isEditorFocus, showEditor]);
+  (0, _react.useEffect)(() => {
+    setValue(row[column[valueKey]] || '');
+    setShowEditor(false);
+    // eslint-disable-next-line
+  }, [row]);
+  function onKeyDown(e) {
+    if (e.keyCode === _constants.KeyCodes.Enter && props.isEditorFocus && !showEditor) {
+      setShowEditor(true);
+    } else if (e.keyCode === _constants.KeyCodes.Escape && showEditor) {
+      e.stopPropagation();
+      setShowEditor(false);
+      departmentSelectContent.current.focus();
+    }
+  }
+  function toggleDepartmentSelect(value) {
+    setShowEditor(value);
+  }
+  function onToggleSelect(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    props.updateTabIndex(columnIndex);
+    toggleDepartmentSelect(true);
+  }
+  function onFocus() {
+    props.updateTabIndex(columnIndex);
+  }
+  function onCommit(newValue) {
+    toggleDepartmentSelect(false);
+    if (newValue === value) return;
+    setValue(newValue);
+    props.onCommit(newValue);
+  }
+  function closeEditor() {
+    toggleDepartmentSelect(false);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-relative w-100",
+    ref: departmentSelectContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    tabIndex: 0,
+    onFocus: onFocus,
+    onClick: onToggleSelect,
+    ref: departmentSelectContent,
+    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, /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
+    value: value,
+    departments: departments
+  })), /*#__PURE__*/_react.default.createElement("i", {
+    "aria-hidden": "true",
+    className: "dtable-font dtable-icon-down3"
+  }))), showEditor && /*#__PURE__*/_react.default.createElement(_DepartmentEditor.default, {
+    isInModal: true,
+    enableSelectRange: false,
+    target: departmentSelectContent.current,
+    column: column,
+    value: value,
+    onCommit: onCommit,
+    userDepartmentIdsMap: userDepartmentIdsMap,
+    departments: departments,
+    toggleDepartmentSelect: closeEditor
+  }));
+}
+var _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandDepartmentEditor/sm.js

@@ -0,0 +1,65 @@
+"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 _RightAngle = _interopRequireDefault(require("../RightAngle"));
+var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
+var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
+var _DepartmentEditor = _interopRequireDefault(require("../../DepartmentEditor"));
+var _lang = require("../../lang");
+function Small(_ref) {
+  let {
+    row,
+    column,
+    valueKey,
+    departments,
+    userDepartmentIdsMap,
+    onCommit
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(row[column[valueKey]] || '');
+  const [showEditor, setShowEditor] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setValue(row[column[valueKey]] || '');
+    setShowEditor(false);
+    // eslint-disable-next-line
+  }, [row]);
+  const openEditor = (0, _react.useCallback)(() => {
+    setShowEditor(true);
+  }, []);
+  const closeEditor = (0, _react.useCallback)(() => {
+    setShowEditor(false);
+  }, []);
+  const onChange = (0, _react.useCallback)(newValue => {
+    if (newValue === value) return;
+    setValue(newValue);
+    onCommit && onCommit(newValue);
+  }, [value, onCommit]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui mobile-dtable-ui-row-expand-options-editor position-relative",
+    onClick: openEditor
+  }, value ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 50,
+      padding: '14px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
+    value: value,
+    departments: departments
+  })) : /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+    text: (0, _lang.getLocale)('Choose_a_department')
+  }), /*#__PURE__*/_react.default.createElement(_RightAngle.default, null)), showEditor && /*#__PURE__*/_react.default.createElement(_DepartmentEditor.default, {
+    enableSelectRange: false,
+    column: column,
+    value: value,
+    onCommit: onChange,
+    userDepartmentIdsMap: userDepartmentIdsMap,
+    departments: departments,
+    onClose: closeEditor
+  }));
+}
+var _default = exports.default = Small;