dtable-ui-component 0.1.78 → 0.1.79

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 ? '#5A98F8' : 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/index.js

@@ -2,7 +2,9 @@
 export { default as toaster } from './toaster'; // Loading
 
 export { default as Loading } from './Loading';
-export { setLocale } from './lang'; // utils
+export { setLocale } from './lang'; // dtable select
+
+export { default as DtableSelect } from './DtableSelect'; // utils
 
 export { getDateDisplayString, getNumberDisplayString, formatStringToNumber, formatNumberString } from './utils/value-format-utils'; // formatter
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.1.78",
+  "version": "0.1.79",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",
@@ -20,6 +20,7 @@
     "react-app-polyfill": "^1.0.6",
     "react-dom": "16.14.0",
     "react-responsive": "^8.0.3",
+    "react-select": "^3.1.0",
     "react-transition-group": "^4.4.1",
     "reactstrap": "^8.4.1",
     "rehype-format": "^2.2.0",