dtable-ui-component 0.1.84 → 0.1.85

package/lib/DTablePopover/index.js

@@ -0,0 +1,115 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { Popover } from 'reactstrap';
+import { getEventClassName } from './utils';
+
+var DTablePopover = /*#__PURE__*/function (_React$Component) {
+  _inherits(DTablePopover, _React$Component);
+
+  var _super = _createSuper(DTablePopover);
+
+  function DTablePopover() {
+    var _this;
+
+    _classCallCheck(this, DTablePopover);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.dtablePopoverRef = null;
+
+    _this.onHistoryState = function (e) {
+      e.preventDefault();
+
+      _this.props.hideDTablePopover(e);
+    };
+
+    _this.onKeyDown = function (e) {
+      var _this$props = _this.props,
+          canHideDTablePopover = _this$props.canHideDTablePopover,
+          hideDTablePopoverWithEsc = _this$props.hideDTablePopoverWithEsc;
+
+      if (e.keyCode === 27 && typeof hideDTablePopoverWithEsc === 'function') {
+        e.preventDefault();
+        hideDTablePopoverWithEsc();
+      } else if (e.keyCode === 13) {
+        // Resolve the default behavior of the enter key when entering formulas is blocked
+        if (canHideDTablePopover) return;
+        e.stopImmediatePropagation();
+      }
+    };
+
+    _this.onClick = function (e) {
+      var canHideDTablePopover = _this.props.canHideDTablePopover;
+      if (!canHideDTablePopover) return;
+
+      if (_this.dtablePopoverRef && e && getEventClassName(e).indexOf('popover') === -1 && !_this.dtablePopoverRef.contains(e.target)) {
+        _this.props.hideDTablePopover(e);
+      }
+    };
+
+    _this.onPopoverInsideClick = function (e) {
+      e.stopPropagation();
+    };
+
+    return _this;
+  }
+
+  _createClass(DTablePopover, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.onClick);
+      document.addEventListener('keydown', this.onKeyDown);
+      window.addEventListener('popstate', this.onHistoryState);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.onClick);
+      document.removeEventListener('keydown', this.onKeyDown);
+      window.removeEventListener('popstate', this.onHistoryState);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          target = _this$props2.target,
+          innerClassName = _this$props2.innerClassName,
+          popoverClassName = _this$props2.popoverClassName,
+          hideArrow = _this$props2.hideArrow,
+          modifiers = _this$props2.modifiers,
+          placement = _this$props2.placement;
+      return /*#__PURE__*/React.createElement(Popover, {
+        placement: placement,
+        isOpen: true,
+        target: target,
+        fade: false,
+        hideArrow: hideArrow,
+        innerClassName: innerClassName,
+        className: popoverClassName,
+        modifiers: modifiers
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref) {
+          return _this2.dtablePopoverRef = _ref;
+        },
+        onClick: this.onPopoverInsideClick
+      }, this.props.children));
+    }
+  }]);
+
+  return DTablePopover;
+}(React.Component);
+
+DTablePopover.defaultProps = {
+  placement: 'bottom-start',
+  hideArrow: true,
+  canHideDTablePopover: true
+};
+export default DTablePopover;

package/lib/DTablePopover/utils.js

@@ -0,0 +1,5 @@
+export var getEventClassName = function getEventClassName(e) {
+  // svg mouseEvent event.target.className is an object
+  if (!e || !e.target) return '';
+  return e.target.getAttribute('class') || '';
+};

package/lib/DTableSelect/index.js

@@ -0,0 +1,140 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import Select, { components } from 'react-select';
+var MenuSelectStyle = {
+  option: function option(provided, state) {
+    var isDisabled = state.isDisabled,
+        isSelected = state.isSelected,
+        isFocused = state.isFocused;
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: isSelected ? '#20a0ff' : isFocused ? '#f5f5f5' : '#fff',
+      '.header-icon .dtable-font': {
+        color: isSelected ? '#fff' : '#aaa'
+      }
+    });
+  },
+  control: function control(provided) {
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      fontSize: '14px',
+      cursor: 'pointer',
+      lineHeight: '1.5'
+    });
+  },
+  menuPortal: function menuPortal(base) {
+    return _objectSpread(_objectSpread({}, base), {}, {
+      zIndex: 9999
+    });
+  },
+  indicatorSeparator: function indicatorSeparator() {}
+};
+
+var DropdownIndicator = function DropdownIndicator(props) {
+  return components.DropdownIndicator && /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-drop-down",
+    style: {
+      fontSize: '12px'
+    }
+  }));
+};
+
+var MenuList = function MenuList(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      return e.nativeEvent.stopImmediatePropagation();
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.nativeEvent.stopImmediatePropagation();
+    }
+  }, /*#__PURE__*/React.createElement(components.MenuList, props, props.children));
+};
+
+var Option = function Option(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: props.data.style
+  }, /*#__PURE__*/React.createElement(components.Option, props));
+};
+
+var DtableSelect = /*#__PURE__*/function (_React$Component) {
+  _inherits(DtableSelect, _React$Component);
+
+  var _super = _createSuper(DtableSelect);
+
+  function DtableSelect() {
+    var _this;
+
+    _classCallCheck(this, DtableSelect);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.getMenuPortalTarget = function () {
+      var menuPortalTarget = _this.props.menuPortalTarget;
+      return document.querySelector(menuPortalTarget);
+    };
+
+    return _this;
+  }
+
+  _createClass(DtableSelect, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          options = _this$props.options,
+          onChange = _this$props.onChange,
+          value = _this$props.value,
+          isSearchable = _this$props.isSearchable,
+          placeholder = _this$props.placeholder,
+          isMulti = _this$props.isMulti,
+          menuPosition = _this$props.menuPosition,
+          isClearable = _this$props.isClearable,
+          noOptionsMessage = _this$props.noOptionsMessage,
+          classNamePrefix = _this$props.classNamePrefix;
+      return /*#__PURE__*/React.createElement(Select, {
+        value: value,
+        onChange: onChange,
+        options: options,
+        isMulti: isMulti,
+        classNamePrefix: classNamePrefix,
+        styles: MenuSelectStyle,
+        components: {
+          Option: Option,
+          DropdownIndicator: DropdownIndicator,
+          MenuList: MenuList
+        },
+        placeholder: placeholder,
+        isSearchable: isSearchable,
+        isClearable: isClearable,
+        menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary. 
+        ,
+        menuShouldScrollIntoView: true,
+        menuPortalTarget: this.getMenuPortalTarget(),
+        captureMenuScroll: false,
+        noOptionsMessage: noOptionsMessage
+      });
+    }
+  }]);
+
+  return DtableSelect;
+}(React.Component);
+
+DtableSelect.defaultProps = {
+  options: [],
+  value: {},
+  isSearchable: false,
+  isClearable: false,
+  placeholder: '',
+  isMulti: false,
+  menuPortalTarget: '.modal',
+  noOptionsMessage: function noOptionsMessage() {
+    return null;
+  }
+};
+export default DtableSelect;

package/lib/DTableSwitch/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+function DtableSwitch(props) {
+  var onChange = props.onChange,
+      checked = props.checked,
+      placeholder = props.placeholder,
+      disabled = props.disabled,
+      switchClassName = props.switchClassName;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dtable-switch ".concat(switchClassName || '')
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "custom-switch"
+  }, /*#__PURE__*/React.createElement("input", {
+    className: "custom-switch-input",
+    type: "checkbox",
+    checked: checked,
+    onChange: onChange,
+    name: "custom-switch-checkbox",
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "custom-switch-description text-truncate"
+  }, placeholder), /*#__PURE__*/React.createElement("span", {
+    className: "custom-switch-indicator"
+  })));
+}
+
+export default DtableSwitch;

package/lib/FormulaFormatter/index.js

@@ -59,19 +59,19 @@ var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
 
       var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
 
-      if (isArrayFormalColumn(array_type)) {
-        formatterProps.value = value;
-        return _this.createColumnFormatter(Formatter, formatterProps);
-      }
-
-      var _isSimpleCellFormatterColumn = isSimpleCellFormatter(array_type);
-
       var cellValue = value;
 
       if (!Array.isArray(value)) {
         cellValue = cellValueValidator(value, array_type) ? [value] : [];
       }
 
+      if (isArrayFormalColumn(array_type)) {
+        formatterProps.value = cellValue.filter(Boolean);
+        return _this.createColumnFormatter(Formatter, formatterProps);
+      }
+
+      var _isSimpleCellFormatterColumn = isSimpleCellFormatter(array_type);
+
       var contentItemClassName = "formula-formatter-content-item ".concat(_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : '');
       return /*#__PURE__*/React.createElement("div", {
         className: "dtable-ui formula-formatter multiple"

package/lib/index.js

@@ -41,4 +41,8 @@ export { default as SingleSelectEditor } from './SingleSelectEditor';
 export { default as MultipleSelectEditor } from './MultipleSelectEditor';
 export { default as CollaboratorEditor } from './CollaboratorEditor';
 export { default as DateEditor } from './DateEditor';
-export { default as LinkEditor } from './LinkEditor';
+export { default as LinkEditor } from './LinkEditor'; // dtable custom
+
+export { default as DTablePopover } from './DTablePopover';
+export { default as DTableSelect } from './DTableSelect';
+export { default as DTableSwitch } from './DTableSwitch';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.1.84",
+  "version": "0.1.85",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",
@@ -22,6 +22,7 @@
     "react-responsive": "^8.0.3",
     "react-transition-group": "^4.4.1",
     "reactstrap": "^8.4.1",
+    "react-select": "4.3.0",
     "rehype-format": "^2.2.0",
     "rehype-mathjax": "^2.0.0",
     "rehype-raw": "^2.0.0",

package/es/app.css

@@ -1,20 +0,0 @@
-html, body, #root {
-  width: 100%;
-  height: 100%;
-}
-
-.app {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.app .app-body {
-  flex: 1;
-}
-
-.app .app-body .collaborator-container {
-  padding: 5px;
-  border: 1px solid;
-}

package/es/app.js

@@ -1,91 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-import { CollaboratorFormatter, SingleSelectFormatter } from './components/cell-formatter';
-import './app.css';
-
-var App = /*#__PURE__*/function (_React$Component) {
-  _inherits(App, _React$Component);
-
-  var _super = _createSuper(App);
-
-  function App() {
-    var _this;
-
-    _classCallCheck(this, App);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _this.onDeleteCollaborator = function () {//
-    };
-
-    return _this;
-  }
-
-  _createClass(App, [{
-    key: "render",
-    value: function render() {
-      var collaborators = [{
-        name: '小强',
-        email: '214402@qq.com',
-        avatar_url: '你好饿',
-        contact_email: 'adbd'
-      }];
-      var options = [{
-        id: '1111',
-        name: '未开始',
-        color: '#e3f9f6'
-      }, {
-        id: '2222',
-        name: '进行中',
-        color: '#ff7500'
-      }, {
-        id: '3333',
-        name: '待评审',
-        color: '#eaff56'
-      }, {
-        id: '4444',
-        name: '已评审',
-        color: '#faff72'
-      }, {
-        id: '5555',
-        name: '完成',
-        color: '#00e500'
-      }];
-      return /*#__PURE__*/React.createElement("div", {
-        className: "app"
-      }, /*#__PURE__*/React.createElement("header", {
-        className: "app-header"
-      }, /*#__PURE__*/React.createElement("h1", {
-        className: "text-center"
-      }, 'seatable ui component test')), /*#__PURE__*/React.createElement("div", {
-        className: "app-body"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, "collaborators\u6D4B\u8BD5"), /*#__PURE__*/React.createElement("div", null, "\u5355\u4E2Acollaborators\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(CollaboratorFormatter, {
-        value: '123',
-        collaborators: collaborators
-      }), /*#__PURE__*/React.createElement("div", null, "\u591A\u4E2Acollaborators\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(CollaboratorFormatter, {
-        value: ['123', '4567'],
-        collaborators: collaborators
-      }), /*#__PURE__*/React.createElement("div", null, "\u5E26\u5220\u9664\u6309\u94AE\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(CollaboratorFormatter, {
-        containerClassName: "collaborator-container",
-        value: ['123', '4567'],
-        collaborators: collaborators,
-        enableDeleteCollaborator: true,
-        onDeleteCollaborator: this.onDeleteCollaborator
-      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, "single-select\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(SingleSelectFormatter, {
-        value: '3333',
-        options: options
-      }))));
-    }
-  }]);
-
-  return App;
-}(React.Component);
-
-export default App;

package/es/components/cell-editor/checkbox-editor.js

@@ -1,104 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-
-var CheckboxEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(CheckboxEditor, _React$Component);
-
-  var _super = _createSuper(CheckboxEditor);
-
-  function CheckboxEditor(props) {
-    var _this;
-
-    _classCallCheck(this, CheckboxEditor);
-
-    _this = _super.call(this, props);
-
-    _this.getValue = function () {
-      var updated = {};
-      var column = _this.props.column;
-      updated[column.key] = _this.state.value;
-      return updated;
-    };
-
-    _this.onCommit = function () {
-      var updated = _this.getValue();
-
-      _this.props.onCommit(updated);
-    };
-
-    _this.onChange = function (event) {
-      if (_this.props.isReadOnly) {
-        return;
-      }
-
-      var value = event.target.checked;
-
-      if (value === _this.state.value) {
-        return;
-      }
-
-      _this.setState({
-        value: value
-      }, function () {
-        _this.onCommit();
-      });
-    };
-
-    _this.onKeyDown = function (event) {
-      event.stopPropagation();
-    };
-
-    _this.onBlur = function () {// this.onCommit();
-    };
-
-    _this.setInputRef = function (input) {
-      _this.input = input;
-    };
-
-    _this.getStyle = function () {
-      return {
-        marginLeft: 0,
-        transform: 'scale(1.1)'
-      };
-    };
-
-    _this.state = {
-      value: props.value ? props.value : false
-    };
-    return _this;
-  }
-
-  _createClass(CheckboxEditor, [{
-    key: "render",
-    value: function render() {
-      var style = this.getStyle();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "cell-editor checkbox-editor"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "checkbox-editor-container"
-      }, /*#__PURE__*/React.createElement("input", {
-        ref: this.setInputRef,
-        type: "checkbox",
-        className: "checkbox",
-        checked: this.state.value,
-        onBlur: this.onBlur,
-        onPaste: this.onPaste,
-        onKeyDown: this.onKeyDown,
-        onChange: this.onChange,
-        style: style,
-        readOnly: this.props.isReadOnly
-      })));
-    }
-  }]);
-
-  return CheckboxEditor;
-}(React.Component);
-
-CheckboxEditor.defaultProps = {
-  isReadOnly: false,
-  value: false
-};
-export default CheckboxEditor;