dtable-ui-component 0.1.84 → 0.1.87

package/lib/DTableSearchInput/index.js

@@ -0,0 +1,161 @@
+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, { Component, Fragment } from 'react';
+import classnames from 'classnames';
+import { isFunction } from './utils';
+
+var DtableSearchInput = /*#__PURE__*/function (_Component) {
+  _inherits(DtableSearchInput, _Component);
+
+  var _super = _createSuper(DtableSearchInput);
+
+  function DtableSearchInput(props) {
+    var _this;
+
+    _classCallCheck(this, DtableSearchInput);
+
+    _this = _super.call(this, props);
+
+    _this.onCompositionStart = function () {
+      _this.isInputtingChinese = true;
+    };
+
+    _this.onChange = function (e) {
+      _this.timer && clearTimeout(_this.timer);
+      var _this$props = _this.props,
+          onChange = _this$props.onChange,
+          wait = _this$props.wait;
+      var text = e.target.value;
+
+      _this.setState({
+        searchValue: text || ''
+      }, function () {
+        if (_this.isInputtingChinese) return;
+        _this.timer = setTimeout(function () {
+          onChange && onChange(_this.state.searchValue.trim());
+        }, wait);
+      });
+    };
+
+    _this.onCompositionEnd = function (e) {
+      _this.isInputtingChinese = false;
+
+      _this.onChange(e);
+    };
+
+    _this.clearSearch = function () {
+      var clearValue = _this.props.clearValue;
+
+      _this.setState({
+        searchValue: ''
+      }, function () {
+        clearValue && clearValue();
+      });
+    };
+
+    _this.setFocus = function (isSelectAllText) {
+      if (_this.inputRef === document.activeElement) return;
+
+      _this.inputRef.focus();
+
+      if (isSelectAllText) {
+        var txtLength = _this.state.searchValue.length;
+
+        _this.inputRef.setSelectionRange(0, txtLength);
+      }
+    };
+
+    _this.renderClear = function () {
+      var _this$props2 = _this.props,
+          isClearable = _this$props2.isClearable,
+          clearClassName = _this$props2.clearClassName,
+          _this$props2$componen = _this$props2.components,
+          components = _this$props2$componen === void 0 ? {} : _this$props2$componen;
+      var searchValue = _this.state.searchValue;
+      if (!isClearable || !searchValue) return null;
+      var ClearIndicator = components.ClearIndicator;
+
+      if (React.isValidElement(ClearIndicator)) {
+        return React.cloneElement(ClearIndicator, {
+          clearValue: _this.clearSearch
+        });
+      } else if (isFunction(ClearIndicator)) {
+        return /*#__PURE__*/React.createElement(ClearIndicator, {
+          clearValue: _this.clearSearch
+        });
+      }
+
+      return /*#__PURE__*/React.createElement("i", {
+        className: classnames('search-text-clear input-icon-addon', clearClassName),
+        onClick: _this.clearSearch
+      }, "\xD7");
+    };
+
+    _this.state = {
+      searchValue: props.value
+    };
+    _this.isInputtingChinese = false;
+    _this.timer = null;
+    _this.inputRef = null;
+    return _this;
+  }
+
+  _createClass(DtableSearchInput, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.value !== this.props.value) {
+        this.setState({
+          searchValue: nextProps.value
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.timer && clearTimeout(this.timer);
+      this.timer = null;
+      this.inputRef = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props3 = this.props,
+          placeholder = _this$props3.placeholder,
+          autoFocus = _this$props3.autoFocus,
+          className = _this$props3.className,
+          onKeyDown = _this$props3.onKeyDown,
+          disabled = _this$props3.disabled,
+          style = _this$props3.style;
+      var searchValue = this.state.searchValue;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        value: searchValue,
+        className: classnames('form-control', className),
+        onChange: this.onChange,
+        autoFocus: autoFocus,
+        placeholder: placeholder,
+        onCompositionStart: this.onCompositionStart,
+        onCompositionEnd: this.onCompositionEnd,
+        onKeyDown: onKeyDown,
+        disabled: disabled,
+        style: style,
+        ref: function ref(_ref) {
+          return _this2.inputRef = _ref;
+        }
+      }), this.renderClear());
+    }
+  }]);
+
+  return DtableSearchInput;
+}(Component);
+
+DtableSearchInput.defaultProps = {
+  wait: 100,
+  disabled: false,
+  value: ''
+};
+export default DtableSearchInput;

package/lib/DTableSearchInput/utils.js

@@ -0,0 +1,4 @@
+export var isFunction = function isFunction(functionToCheck) {
+  var getType = {};
+  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+};

package/lib/DTableSelect/index.js

@@ -0,0 +1,141 @@
+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,
+          style = _this$props.style;
+      return /*#__PURE__*/React.createElement(Select, {
+        value: value,
+        onChange: onChange,
+        options: options,
+        isMulti: isMulti,
+        classNamePrefix: classNamePrefix,
+        styles: style || 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/SelectOptionGroup/KeyCodes.js

@@ -0,0 +1,10 @@
+module.exports = {
+  LeftArrow: 37,
+  UpArrow: 38,
+  RightArrow: 39,
+  DownArrow: 40,
+  Enter: 13,
+  Tab: 9,
+  Escape: 27,
+  Esc: 27
+};

package/lib/SelectOptionGroup/index.js

@@ -0,0 +1,217 @@
+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, { Component } from 'react';
+import Option from './option';
+import DTableSearchInput from '../DTableSearchInput';
+import KeyCodes from './KeyCodes';
+var OPTION_HEIGHT = 32;
+
+var SelectOptionGroup = /*#__PURE__*/function (_Component) {
+  _inherits(SelectOptionGroup, _Component);
+
+  var _super = _createSuper(SelectOptionGroup);
+
+  function SelectOptionGroup(props) {
+    var _this;
+
+    _classCallCheck(this, SelectOptionGroup);
+
+    _this = _super.call(this, props);
+
+    _this.resetMenuStyle = function () {
+      var _this$optionGroupRef$ = _this.optionGroupRef.getBoundingClientRect(),
+          top = _this$optionGroupRef$.top,
+          height = _this$optionGroupRef$.height;
+
+      if (height + top > window.innerHeight) {
+        var borderWidth = 2;
+        _this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+      }
+    };
+
+    _this.onHotKey = function (event) {
+      var keyCode = event.keyCode;
+
+      if (keyCode === KeyCodes.UpArrow) {
+        _this.onPressUp();
+      } else if (keyCode === KeyCodes.DownArrow) {
+        _this.onPressDown();
+      } else if (keyCode === KeyCodes.Enter) {
+        var option = _this.filterOptions && _this.filterOptions[_this.state.activeIndex];
+
+        if (option) {
+          _this.props.onSelectOption(option.value);
+
+          if (!_this.props.supportMultipleSelect) {
+            _this.props.closeSelect();
+          }
+        }
+      } else if (keyCode === KeyCodes.Tab || keyCode === KeyCodes.Escape) {
+        _this.props.closeSelect();
+      }
+    };
+
+    _this.onPressUp = function () {
+      if (_this.state.activeIndex > 0) {
+        _this.setState({
+          activeIndex: _this.state.activeIndex - 1
+        }, function () {
+          _this.scrollContent();
+        });
+      }
+    };
+
+    _this.onPressDown = function () {
+      if (_this.filterOptions && _this.state.activeIndex < _this.filterOptions.length - 1) {
+        _this.setState({
+          activeIndex: _this.state.activeIndex + 1
+        }, function () {
+          _this.scrollContent();
+        });
+      }
+    };
+
+    _this.onClick = function (e) {
+      if (_this.props.stopClickEvent && _this.optionGroupRef.contains(e.target) && !e.target.className.includes('dtable-font')) {
+        e.stopPropagation();
+      }
+    };
+
+    _this.scrollContent = function () {
+      var _this$optionGroupCont = _this.optionGroupContentRef,
+          offsetHeight = _this$optionGroupCont.offsetHeight,
+          scrollTop = _this$optionGroupCont.scrollTop;
+
+      if (_this.state.activeIndex * OPTION_HEIGHT < scrollTop) {
+        _this.optionGroupContentRef.scrollTop = scrollTop - OPTION_HEIGHT;
+      } else if (_this.state.activeIndex * OPTION_HEIGHT > offsetHeight + scrollTop) {
+        _this.optionGroupContentRef.scrollTop = scrollTop + OPTION_HEIGHT;
+      }
+    };
+
+    _this.changeIndex = function (index) {
+      _this.setState({
+        activeIndex: index
+      });
+    };
+
+    _this.onChangeSearch = function (searchVal) {
+      var value = searchVal || '';
+
+      if (value !== _this.state.searchVal) {
+        _this.setState({
+          searchVal: value,
+          activeIndex: -1
+        });
+      }
+    };
+
+    _this.renderOptGroup = function (searchVal) {
+      var _this$props = _this.props,
+          noOptionsPlaceholder = _this$props.noOptionsPlaceholder,
+          onSelectOption = _this$props.onSelectOption;
+      _this.filterOptions = _this.props.getFilterOptions(searchVal);
+
+      if (_this.filterOptions === 0) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "none-search-result"
+        }, noOptionsPlaceholder);
+      }
+
+      return _this.filterOptions.map(function (opt, i) {
+        var key = opt.value.column ? opt.value.column.key : i;
+        var isActive = _this.state.activeIndex === i;
+        return /*#__PURE__*/React.createElement(Option, {
+          key: key,
+          index: i,
+          isActive: isActive,
+          value: opt.value,
+          onSelectOption: onSelectOption,
+          changeIndex: _this.changeIndex,
+          supportMultipleSelect: _this.props.supportMultipleSelect
+        }, opt.label);
+      });
+    };
+
+    _this.state = {
+      searchVal: '',
+      activeIndex: -1
+    };
+    _this.filterOptions = null;
+    return _this;
+  }
+
+  _createClass(SelectOptionGroup, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener('keydown', this.onHotKey);
+      window.addEventListener('click', this.onClick, true);
+      this.resetMenuStyle();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.filterOptions = null;
+      window.removeEventListener('click', this.onClick, true);
+      window.removeEventListener('keydown', this.onHotKey);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          searchable = _this$props2.searchable,
+          searchPlaceholder = _this$props2.searchPlaceholder,
+          top = _this$props2.top,
+          left = _this$props2.left,
+          minWidth = _this$props2.minWidth,
+          value = _this$props2.value,
+          isShowSelected = _this$props2.isShowSelected;
+      var searchVal = this.state.searchVal;
+      var style = {
+        top: top || 0,
+        left: left || 0
+      };
+
+      if (minWidth) {
+        style = {
+          top: top || 0,
+          left: left || 0,
+          minWidth: minWidth
+        };
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "option-group ".concat(isShowSelected ? 'pt-0' : ''),
+        ref: function ref(_ref2) {
+          return _this2.optionGroupRef = _ref2;
+        },
+        style: style
+      }, isShowSelected && /*#__PURE__*/React.createElement("div", {
+        className: "editor-list-delete mb-2",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, value.label || ''), searchable && /*#__PURE__*/React.createElement("div", {
+        className: "option-group-search"
+      }, /*#__PURE__*/React.createElement(DTableSearchInput, {
+        className: "option-search-control",
+        placeholder: searchPlaceholder,
+        onChange: this.onChangeSearch,
+        autoFocus: true
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "option-group-content",
+        ref: function ref(_ref) {
+          return _this2.optionGroupContentRef = _ref;
+        }
+      }, this.renderOptGroup(searchVal)));
+    }
+  }]);
+
+  return SelectOptionGroup;
+}(Component);
+
+export default SelectOptionGroup;

package/lib/SelectOptionGroup/option.js

@@ -0,0 +1,60 @@
+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, { Component } from 'react';
+
+var Option = /*#__PURE__*/function (_Component) {
+  _inherits(Option, _Component);
+
+  var _super = _createSuper(Option);
+
+  function Option() {
+    var _this;
+
+    _classCallCheck(this, Option);
+
+    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.onSelectOption = function (value, event) {
+      _this.props.onSelectOption(value, event);
+    };
+
+    _this.onClick = function (event) {
+      if (_this.props.supportMultipleSelect) {
+        event.stopPropagation();
+      }
+    };
+
+    _this.onMouseEnter = function () {
+      _this.props.changeIndex(_this.props.index);
+    };
+
+    _this.onMouseLeave = function () {
+      _this.props.changeIndex(-1);
+    };
+
+    return _this;
+  }
+
+  _createClass(Option, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: this.props.isActive ? 'option option-active' : 'option',
+        onMouseDown: this.onSelectOption.bind(this, this.props.value),
+        onClick: this.onClick,
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave
+      }, this.props.children);
+    }
+  }]);
+
+  return Option;
+}(Component);
+
+export default Option;