dtable-ui-component 6.0.25-alpha.4 → 6.0.26-beta

package/lib/RowExpandEditor/RowExpandUrlEditor/index.js

@@ -6,125 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 = event => {
-      if (event.keyCode === _constants.KeyCodes.Esc) {
-        event.preventDefault();
-        this.blurInput();
-        return;
-      }
-      const {
-        selectionStart,
-        selectionEnd,
-        value
-      } = event.currentTarget;
-      if (event.keyCode === _constants.KeyCodes.ChineseInputMethod || event.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || event.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
-        event.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 _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandUrlEditor = 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 = RowExpandUrlEditor;

package/lib/RowExpandEditor/RowExpandUrlEditor/lg/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 Large 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 = event => {
+      if (event.keyCode === _constants.KeyCodes.Esc) {
+        event.preventDefault();
+        this.blurInput();
+        return;
+      }
+      const {
+        selectionStart,
+        selectionEnd,
+        value
+      } = event.currentTarget;
+      if (event.keyCode === _constants.KeyCodes.ChineseInputMethod || event.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || event.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
+        event.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 = Large;

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

@@ -0,0 +1,17 @@
+.mobile-dtable-ui-row-expand-url-editor-container .mobile-dtable-ui-row-expand-url-input {
+  text-decoration: underline;
+  padding-right: 40px;
+}
+
+.mobile-dtable-ui-row-expand-url-editor-container .mobile-dtable-ui-row-expand-jump-link {
+  height: 22px;
+  line-height: 22px;
+  position: absolute;
+  right: 0;
+  top: 14px;
+  background: #fff;
+  color: #999;
+  border: 1px solid #eee;
+  box-shadow: 0 0 1px;
+  padding: 0 3px;
+}

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

@@ -0,0 +1,87 @@
+"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 _lang = require("../../../lang");
+require("./index.css");
+class Large extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onBlur = () => {
+      const {
+        onCommit
+      } = this.props;
+      onCommit(this.state.value.trim());
+    };
+    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.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 || ''
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[this.props.valueKey]] || ''
+      });
+    }
+  }
+  render() {
+    const {
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-dtable-ui-row-expand-input-editor-container position-relative mobile-dtable-ui-row-expand-url-editor-container"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      onCut: this.onCut,
+      onPaste: this.onPaste,
+      onChange: this.onChange,
+      className: "form-control mobile-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 mobile-dtable-ui-row-expand-jump-link",
+      onClick: this.onOpenUrlLink
+    }));
+  }
+}
+var _default = exports.default = Large;

package/lib/RowExpandFormatter/RowExpandDepartmentFormatter/index.js

@@ -6,22 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandDepartmentFormatter = 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: 767.8px)'
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
 var _default = exports.default = RowExpandDepartmentFormatter;

package/lib/RowExpandFormatter/RowExpandDepartmentFormatter/lg.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 Large(_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 = Large;

package/lib/RowExpandFormatter/RowExpandDepartmentFormatter/sm.js

@@ -0,0 +1,20 @@
+"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 Small(_ref) {
+  let {
+    value,
+    departments
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
+    value: value,
+    departments: departments
+  });
+}
+var _default = exports.default = Small;

package/lib/RowExpandFormatter/RowExpandEmailFormatter/index.css

@@ -1,13 +1,13 @@
 @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 {
+.dtable-ui-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
+.dtable-ui-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {
   text-decoration: underline;
   width: 95%;
   display: inline-flex;
 }
 
-.dtable-row-expand-formatter .dtable-ui .row-expand-jump-link {
+.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link {
   display: inline-flex;
   align-items: center;
   font-size: 14px;
@@ -24,7 +24,7 @@
   box-shadow: 0 0 1px;
 }
 
-.dtable-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
+.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
   background: #eee;
   border: 1px solid #c9c9c9;
 }

package/lib/RowExpandFormatter/RowExpandRateFormatter/index.css

@@ -1,5 +1,5 @@
 @import url('../../css/cell-formatter.css');
 
-.dtable-ui.dtable-row-expand-formatter .dtable-rate-formatter .dtable-icon-rate {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-rate-formatter .dtable-icon-rate {
   padding-right: 5px;
 }

package/lib/RowExpandFormatter/index.css

@@ -1,9 +1,9 @@
-.dtable-ui.dtable-row-expand-formatter {
+.dtable-ui.dtable-ui-row-expand-formatter {
   width: 100%;
   max-width: 100%;
 }
 
-.dtable-ui.dtable-row-expand-formatter .row-cell-empty {
+.dtable-ui.dtable-ui-row-expand-formatter .row-cell-empty {
   height: 8px;
   width: 20px;
   background-color: #f1f1f1;
@@ -11,14 +11,14 @@
   display: inline-block;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.collaborator-item {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.collaborator-item {
   margin: 5px 10px 5px 0;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.formula-formatter,
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.text-formatter,
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.url-formatter,
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.email-formatter {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.formula-formatter,
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.text-formatter,
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.url-formatter,
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.email-formatter {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -27,11 +27,11 @@
   width: 100%;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.multiple-select-formatter .dtable-ui.select-item {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.multiple-select-formatter .dtable-ui.select-item {
   margin: 5px 0;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui.geolocation-formatter {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.geolocation-formatter {
   width: fit-content;
   min-width: 80px;
   max-width: 100%;
@@ -45,19 +45,19 @@
   text-align: center;
 }
 
-.dtable-ui.dtable-row-expand-formatter .form-control {
+.dtable-ui.dtable-ui-row-expand-formatter .form-control {
   background-color: #f8f9fa;
   padding: 0 10px;
   height: fit-content;
   min-height: 2.375rem;
 }
 
-.dtable-ui.dtable-row-expand-formatter .ctime-formatter-container,
-.dtable-ui.dtable-row-expand-formatter .mtime-formatter-container {
+.dtable-ui.dtable-ui-row-expand-formatter .ctime-formatter-container,
+.dtable-ui.dtable-ui-row-expand-formatter .mtime-formatter-container {
   padding: 0.375rem 0.75rem;
 }
 
-.dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container {
+.dtable-ui.dtable-ui-row-expand-formatter .checkbox-formatter-container {
   width: 24px;
   height: 24px;
   border: 2px solid #e0e0e0;
@@ -66,11 +66,11 @@
   justify-content: center;
 }
 
-.dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container .cell-formatter-container {
+.dtable-ui.dtable-ui-row-expand-formatter .checkbox-formatter-container .cell-formatter-container {
   line-height: inherit;
 }
 
-.dtable-ui.dtable-row-expand-formatter .button-formatter {
+.dtable-ui.dtable-ui-row-expand-formatter .button-formatter {
   text-align: center;
   height: 26px;
   line-height: 14px;
@@ -91,7 +91,7 @@
   letter-spacing: .03em;
 }
 
-.dtable-ui.dtable-row-expand-formatter .longtext-formatter-container {
+.dtable-ui.dtable-ui-row-expand-formatter .longtext-formatter-container {
   border: 1px solid rgba(0, 40, 100, 0.12);
   border-radius: 3px;
   padding: 0.375rem 0.75rem;
@@ -99,13 +99,13 @@
   background-color: #fff;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui-geolocation-formatter-container {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui-geolocation-formatter-container {
   margin-top: 0.5rem;
   display: flex;
   align-items: center;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-link-formatter {
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-link-formatter {
   padding-top: 8px;
 }
 

package/lib/RowExpandFormatter/index.js

@@ -382,7 +382,7 @@ class RowExpandFormatter extends _react.default.Component {
       className
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('dtable-ui dtable-row-expand-formatter', className)
+      className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-formatter', className)
     }, this.renderFormatter());
   }
 }