dtable-ui-component 4.3.6 → 4.3.8

package/lib/DTablePopover/index.js

@@ -1,29 +1,19 @@
-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) {
+class DTablePopover extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.dtablePopoverRef = null;
+    this.onHistoryState = e => {
       e.preventDefault();
-      _this.props.hideDTablePopover(e);
+      this.props.hideDTablePopover(e);
     };
-    _this.onKeyDown = function (e) {
-      var _this$props = _this.props,
-        canHideDTablePopover = _this$props.canHideDTablePopover,
-        hideDTablePopoverWithEsc = _this$props.hideDTablePopoverWithEsc;
+    this.onKeyDown = e => {
+      const {
+        canHideDTablePopover,
+        hideDTablePopoverWithEsc
+      } = this.props;
       if (e.keyCode === 27 && typeof hideDTablePopoverWithEsc === 'function') {
         e.preventDefault();
         hideDTablePopoverWithEsc();
@@ -33,62 +23,53 @@ var DTablePopover = /*#__PURE__*/function (_React$Component) {
         e.stopImmediatePropagation();
       }
     };
-    _this.onMousedown = function (e) {
-      var canHideDTablePopover = _this.props.canHideDTablePopover;
+    this.onMousedown = e => {
+      const {
+        canHideDTablePopover
+      } = this.props;
       if (!canHideDTablePopover) return;
-      if (_this.dtablePopoverRef && e && getEventClassName(e).indexOf('popover') === -1 && !_this.dtablePopoverRef.contains(e.target)) {
-        _this.props.hideDTablePopover(e);
+      if (this.dtablePopoverRef && e && getEventClassName(e).indexOf('popover') === -1 && !this.dtablePopoverRef.contains(e.target)) {
+        this.props.hideDTablePopover(e);
       }
     };
-    _this.onPopoverInsideClick = function (e) {
+    this.onPopoverInsideClick = e => {
       e.stopPropagation();
     };
-    return _this;
   }
-  _createClass(DTablePopover, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('mousedown', this.onMousedown);
-      document.addEventListener('keydown', this.onKeyDown);
-      window.addEventListener('popstate', this.onHistoryState);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('mousedown', this.onMousedown);
-      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);
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onMousedown);
+    document.addEventListener('keydown', this.onKeyDown);
+    window.addEventListener('popstate', this.onHistoryState);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.onMousedown);
+    document.removeEventListener('keydown', this.onKeyDown);
+    window.removeEventListener('popstate', this.onHistoryState);
+  }
+  render() {
+    const {
+      target,
+      innerClassName,
+      popoverClassName,
+      hideArrow,
+      modifiers,
+      placement
+    } = this.props;
+    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: ref => this.dtablePopoverRef = ref,
+      onClick: this.onPopoverInsideClick
+    }, this.props.children));
+  }
+}
 DTablePopover.defaultProps = {
   placement: 'bottom-start',
   hideArrow: true,

package/lib/DTablePopover/utils.js

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

package/lib/DTableRadio/index.js

@@ -1,18 +1,20 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
 import classnames from 'classnames';
 import './index.css';
 function DTableRadio(props) {
-  var className = props.className;
+  const {
+    className
+  } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: classnames('dtable-radio w-100 align-items-center', _defineProperty({
-      'dtable-radio-disable': props.disabled
-    }, className, className))
+    className: classnames('dtable-radio w-100 align-items-center', {
+      'dtable-radio-disable': props.disabled,
+      [className]: className
+    })
   }, /*#__PURE__*/React.createElement("input", {
     type: "radio",
     className: "dtable-radio-input position-absolute",
     checked: props.isChecked,
-    onChange: props.disabled ? function () {} : props.onCheckedChange,
+    onChange: props.disabled ? () => {} : props.onCheckedChange,
     name: props.name,
     value: props.value
   }), /*#__PURE__*/React.createElement("span", {
@@ -27,6 +29,6 @@ function DTableRadio(props) {
 DTableRadio.defaultProps = {
   disabled: false,
   name: 'dtable-radio-input',
-  onCheckedChange: function onCheckedChange() {}
+  onCheckedChange: () => {}
 };
 export default DTableRadio;

package/lib/DTableSearchInput/index.js

@@ -1,134 +1,124 @@
-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;
+class DtableSearchInput extends Component {
+  constructor(props) {
+    super(props);
+    this.onCompositionStart = () => {
+      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({
+    this.onChange = e => {
+      this.timer && clearTimeout(this.timer);
+      const {
+        onChange,
+        wait
+      } = this.props;
+      let text = e.target.value;
+      this.setState({
         searchValue: text || ''
-      }, function () {
-        if (_this.isInputtingChinese) return;
-        _this.timer = setTimeout(function () {
-          onChange && onChange(_this.state.searchValue.trim());
+      }, () => {
+        if (this.isInputtingChinese) return;
+        this.timer = setTimeout(() => {
+          onChange && onChange(this.state.searchValue.trim());
         }, wait);
       });
     };
-    _this.onCompositionEnd = function (e) {
-      _this.isInputtingChinese = false;
-      _this.onChange(e);
+    this.onCompositionEnd = e => {
+      this.isInputtingChinese = false;
+      this.onChange(e);
     };
-    _this.clearSearch = function () {
-      var clearValue = _this.props.clearValue;
-      _this.setState({
+    this.clearSearch = () => {
+      const {
+        clearValue
+      } = this.props;
+      this.setState({
         searchValue: ''
-      }, function () {
+      }, () => {
         clearValue && clearValue();
       });
     };
-    _this.setFocus = function (isSelectAllText) {
-      if (_this.inputRef === document.activeElement) return;
-      _this.inputRef.focus();
+    this.setFocus = isSelectAllText => {
+      if (this.inputRef === document.activeElement) return;
+      this.inputRef.focus();
       if (isSelectAllText) {
-        var txtLength = _this.state.searchValue.length;
-        _this.inputRef.setSelectionRange(0, txtLength);
+        const 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;
+    this.renderClear = () => {
+      const {
+        isClearable,
+        clearClassName,
+        components = {}
+      } = this.props;
+      const {
+        searchValue
+      } = this.state;
       if (!isClearable || !searchValue) return null;
-      var ClearIndicator = components.ClearIndicator;
+      const {
+        ClearIndicator
+      } = components;
       if (React.isValidElement(ClearIndicator)) {
         return React.cloneElement(ClearIndicator, {
-          clearValue: _this.clearSearch
+          clearValue: this.clearSearch
         });
       } else if (isFunction(ClearIndicator)) {
         return /*#__PURE__*/React.createElement(ClearIndicator, {
-          clearValue: _this.clearSearch
+          clearValue: this.clearSearch
         });
       }
       return /*#__PURE__*/React.createElement("i", {
         className: classnames('search-text-clear input-icon-addon', clearClassName),
-        onClick: _this.clearSearch
+        onClick: this.clearSearch
       }, "\xD7");
     };
-    _this.state = {
+    this.state = {
       searchValue: props.value
     };
-    _this.isInputtingChinese = false;
-    _this.timer = null;
-    _this.inputRef = null;
-    return _this;
+    this.isInputtingChinese = false;
+    this.timer = null;
+    this.inputRef = null;
   }
-  _createClass(DtableSearchInput, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_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());
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.value !== this.props.value) {
+      this.setState({
+        searchValue: nextProps.value
+      });
     }
-  }]);
-  return DtableSearchInput;
-}(Component);
+  }
+  componentWillUnmount() {
+    this.timer && clearTimeout(this.timer);
+    this.timer = null;
+    this.inputRef = null;
+  }
+  render() {
+    const {
+      placeholder,
+      autoFocus,
+      className,
+      onKeyDown,
+      disabled,
+      style
+    } = this.props;
+    const {
+      searchValue
+    } = this.state;
+    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: ref => this.inputRef = ref
+    }), this.renderClear());
+  }
+}
 DtableSearchInput.defaultProps = {
   wait: 100,
   disabled: false,

package/lib/DTableSearchInput/utils.js

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

package/lib/DTableSelect/dtable-select-label.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import './dtable-select-label.css';
 function DTableSelectLabel(_ref) {
-  var classname = _ref.classname,
-    name = _ref.name,
-    isSelect = _ref.isSelect;
+  let {
+    classname,
+    name,
+    isSelect
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(classname, " w-100 d-flex justify-content-between")
   }, /*#__PURE__*/React.createElement("span", null, name), isSelect && /*#__PURE__*/React.createElement("div", {

package/lib/DTableSelect/index.js

@@ -1,68 +1,55 @@
-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 Select from 'react-select';
 import { MenuSelectStyle, DropdownIndicator, ClearIndicator, MenuList, Option } from './utils';
-var DTableSelect = /*#__PURE__*/function (_React$Component) {
-  _inherits(DTableSelect, _React$Component);
-  var _super = _createSuper(DTableSelect);
-  function DTableSelect() {
-    _classCallCheck(this, DTableSelect);
-    return _super.apply(this, arguments);
+export default class DTableSelect extends React.Component {
+  render() {
+    const {
+      options,
+      onChange,
+      value,
+      isSearchable,
+      placeholder,
+      isMulti,
+      menuPosition,
+      isClearable,
+      noOptionsMessage,
+      classNamePrefix,
+      style,
+      innerRef,
+      isDisabled,
+      form,
+      customFilterOption
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Select, {
+      value: value,
+      onChange: onChange,
+      options: options,
+      isMulti: isMulti,
+      classNamePrefix: classNamePrefix,
+      styles: style || MenuSelectStyle,
+      components: {
+        Option,
+        DropdownIndicator,
+        MenuList,
+        ClearIndicator
+      },
+      placeholder: placeholder,
+      isSearchable: isSearchable,
+      isClearable: isClearable,
+      menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
+      ,
+      menuShouldScrollIntoView: true,
+      menuPortalTarget: document.querySelector(this.props.menuPortalTarget),
+      captureMenuScroll: false,
+      hideSelectedOptions: false,
+      noOptionsMessage: noOptionsMessage,
+      isDisabled: isDisabled,
+      ref: innerRef,
+      filterOption: customFilterOption,
+      form: form
+    });
   }
-  _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,
-        innerRef = _this$props.innerRef,
-        isDisabled = _this$props.isDisabled,
-        form = _this$props.form,
-        customFilterOption = _this$props.customFilterOption;
-      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,
-          ClearIndicator: ClearIndicator
-        },
-        placeholder: placeholder,
-        isSearchable: isSearchable,
-        isClearable: isClearable,
-        menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
-        ,
-        menuShouldScrollIntoView: true,
-        menuPortalTarget: document.querySelector(this.props.menuPortalTarget),
-        captureMenuScroll: false,
-        hideSelectedOptions: false,
-        noOptionsMessage: noOptionsMessage,
-        isDisabled: isDisabled,
-        ref: innerRef,
-        filterOption: customFilterOption,
-        form: form
-      });
-    }
-  }]);
-  return DTableSelect;
-}(React.Component);
+}
 DTableSelect.defaultProps = {
   options: [],
   value: {},
@@ -72,8 +59,7 @@ DTableSelect.defaultProps = {
   placeholder: '',
   isMulti: false,
   menuPortalTarget: '.modal',
-  noOptionsMessage: function noOptionsMessage() {
+  noOptionsMessage: () => {
     return null;
   }
-};
-export { DTableSelect as default };
+};

package/lib/DTableSelect/utils.js

@@ -1,13 +1,13 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _excluded = ["innerProps"];
 import React from 'react';
 import { components } from 'react-select';
-var MenuSelectStyle = {
-  option: function option(provided, state) {
-    var isDisabled = state.isDisabled,
-      isFocused = state.isFocused;
-    return _objectSpread(_objectSpread({}, provided), {}, {
+const MenuSelectStyle = {
+  option: (provided, state) => {
+    const {
+      isDisabled,
+      isFocused
+    } = state;
+    return {
+      ...provided,
       fontSize: '13px',
       color: '#212529',
       cursor: isDisabled ? 'default' : 'pointer',
@@ -15,23 +15,21 @@ var MenuSelectStyle = {
       '.header-icon .dtable-font': {
         color: '#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() {}
+  control: provided => ({
+    ...provided,
+    fontSize: '14px',
+    cursor: 'pointer',
+    lineHeight: '1.5'
+  }),
+  menuPortal: base => ({
+    ...base,
+    zIndex: 9999
+  }),
+  indicatorSeparator: () => {}
 };
-var DropdownIndicator = function DropdownIndicator(props) {
+const DropdownIndicator = props => {
   return components.DropdownIndicator && /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement("span", {
     className: "dtable-font dtable-icon-drop-down",
     style: {
@@ -39,29 +37,26 @@ var DropdownIndicator = function DropdownIndicator(props) {
     }
   }));
 };
-var ClearIndicator = function ClearIndicator(_ref) {
-  var innerProps = _ref.innerProps,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var onMouseDown = function onMouseDown(e) {
+const ClearIndicator = _ref => {
+  let {
+    innerProps,
+    ...props
+  } = _ref;
+  const onMouseDown = e => {
     e.nativeEvent.stopImmediatePropagation();
     innerProps.onMouseDown(e);
   };
-  props.innerProps = _objectSpread(_objectSpread({}, innerProps), {}, {
-    onMouseDown: onMouseDown
-  });
+  props.innerProps = {
+    ...innerProps,
+    onMouseDown
+  };
   return /*#__PURE__*/React.createElement(components.ClearIndicator, props);
 };
-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) {
+const MenuList = props => /*#__PURE__*/React.createElement("div", {
+  onClick: e => e.nativeEvent.stopImmediatePropagation(),
+  onMouseDown: e => e.nativeEvent.stopImmediatePropagation()
+}, /*#__PURE__*/React.createElement(components.MenuList, props, props.children));
+const Option = props => {
   return /*#__PURE__*/React.createElement("div", {
     style: props.data.style
   }, /*#__PURE__*/React.createElement(components.Option, props));