dtable-ui-component 0.3.20 → 0.3.21

package/lib/select-editor/mb-select-editor-popover/index.js

@@ -8,25 +8,17 @@ import { getLocale } from '../../lang';
 import SelectEditorOption from '../select-editor-option';
 import MBEditorHeader from '../../MBEditorHeader';
 import './index.css';
-
 var MBSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
   _inherits(MBSelectEditorPopover, _React$Component);
-
   var _super = _createSuper(MBSelectEditorPopover);
-
   function MBSelectEditorPopover(props) {
     var _this;
-
     _classCallCheck(this, MBSelectEditorPopover);
-
     _this = _super.call(this, props);
-
     _this.handleHistaryBack = function (e) {
       e.preventDefault();
-
       _this.props.onClosePopover();
     };
-
     _this.onContainerClick = function (event) {
       if (_this.editorPopover && _this.editorPopover.contains(event.target)) {
         event.stopPropagation();
@@ -34,35 +26,27 @@ var MBSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
         return false;
       }
     };
-
     _this.onChangeSearch = function (event) {
       var searchVal = _this.state.searchVal;
-
       if (searchVal === event.target.value) {
         return;
       }
-
       searchVal = event.target.value;
-
       _this.setState({
         searchVal: searchVal
       });
     };
-
     _this.getSelectedOptions = function () {
       var _this$props = _this.props,
-          value = _this$props.value,
-          options = _this$props.options;
-
+        value = _this$props.value,
+        options = _this$props.options;
       if (!Array.isArray(value)) {
         return [];
       }
-
       return options.filter(function (option) {
         return value.indexOf(option.id) > -1;
       });
     };
-
     _this.getFilteredOptions = function () {
       var options = _this.props.options;
       var searchVal = _this.state.searchVal;
@@ -70,28 +54,21 @@ var MBSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
         return item.name.indexOf(searchVal) > -1;
       }) : options;
     };
-
     _this.onSelectOption = function (option) {
       _this.props.onOptionItemToggle(option);
     };
-
     _this.onAddNewOption = function (event) {
       event.stopPropagation();
       event.nativeEvent.stopImmediatePropagation();
-
       var newOption = _this.state.searchVal.trim();
-
       if (newOption) {
         _this.props.onAddNewOption(newOption);
-
         _this.props.onClosePopover();
       }
     };
-
     _this.onRemoveOption = function (option) {
       _this.props.onOptionItemToggle(option);
     };
-
     _this.renderSelectOptions = function (options) {
       var value = _this.props.value;
       return options.map(function (option, index) {
@@ -119,22 +96,18 @@ var MBSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
         })));
       });
     };
-
     _this.setEditorPopover = function (editorPopover) {
       _this.editorPopover = editorPopover;
     };
-
     _this.state = {
       searchVal: ''
     };
     return _this;
   }
-
   _createClass(MBSelectEditorPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       history.pushState(null, null, '#'); // eslint-disable-line
-
       window.addEventListener('popstate', this.handleHistaryBack, false);
     }
   }, {
@@ -146,22 +119,19 @@ var MBSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props2 = this.props,
-          isReadOnly = _this$props2.isReadOnly,
-          column = _this$props2.column,
-          isSupportNewOption = _this$props2.isSupportNewOption,
-          isShowRemoveIcon = _this$props2.isShowRemoveIcon;
+        isReadOnly = _this$props2.isReadOnly,
+        column = _this$props2.column,
+        isSupportNewOption = _this$props2.isSupportNewOption,
+        isShowRemoveIcon = _this$props2.isShowRemoveIcon;
       var searchVal = this.state.searchVal;
       var selectedOptions = this.getSelectedOptions();
       var filteredOptions = this.getFilteredOptions();
       var isShowRemoveBtn = !isReadOnly && isShowRemoveIcon;
       var isShowCreateBtn = !isReadOnly && isSupportNewOption && !!searchVal;
-
       if (isShowCreateBtn) {
         isShowCreateBtn = filteredOptions.length === 0;
       }
-
       return /*#__PURE__*/React.createElement("div", {
         ref: this.setEditorPopover,
         className: "dtable-ui-mb-editor-popover mb-select-editor-popover",
@@ -219,10 +189,8 @@ var MBSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
       }, "".concat(getLocale('Add_an_option'), " ").concat(searchVal)))));
     }
   }]);
-
   return MBSelectEditorPopover;
 }(React.Component);
-
 MBSelectEditorPopover.defaultProps = {
   isReadOnly: false,
   isShowRemoveIcon: false,

package/lib/select-editor/pc-select-editor-popover/index.js

@@ -6,56 +6,40 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { getLocale } from '../../lang';
 import './index.css';
-
 var PCSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
   _inherits(PCSelectEditorPopover, _React$Component);
-
   var _super = _createSuper(PCSelectEditorPopover);
-
   function PCSelectEditorPopover(props) {
     var _this;
-
     _classCallCheck(this, PCSelectEditorPopover);
-
     _this = _super.call(this, props);
-
     _this.onValueChanged = function (event) {
       var value = event.target.value;
-
       _this.setState({
         searchValue: value
       });
     };
-
     _this.onInputClick = function (event) {
       event.nativeEvent.stopImmediatePropagation();
       event.stopPropagation();
     };
-
     _this.onAddNewOption = function () {
       var name = _this.state.searchValue.trim();
-
       _this.props.onAddNewOption(name);
     };
-
     _this.onOptionItemToggle = function (item) {
       _this.props.onOptionItemToggle(item);
     };
-
     _this.getFilterOptions = function () {
       var options = _this.props.options;
-
       var filter = _this.state.searchValue.toLowerCase();
-
       if (!filter) {
         return options;
       }
-
       return options.filter(function (option) {
         return option.name.toString().toLowerCase().indexOf(filter) > -1;
       });
     };
-
     _this.getOptionStyle = function (option) {
       var textColor = option.textColor || null;
       return {
@@ -69,23 +53,20 @@ var PCSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
         color: textColor
       };
     };
-
     _this.state = {
       searchValue: ''
     };
     return _this;
   }
-
   _createClass(PCSelectEditorPopover, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var options = this.getFilterOptions();
       var _this$props = this.props,
-          popoverPosition = _this$props.popoverPosition,
-          selectedOptions = _this$props.selectedOptions,
-          isSupportNewOption = _this$props.isSupportNewOption;
+        popoverPosition = _this$props.popoverPosition,
+        selectedOptions = _this$props.selectedOptions,
+        isSupportNewOption = _this$props.isSupportNewOption;
       var searchValue = this.state.searchValue;
       var popoverStyle = Object.assign({}, _objectSpread({}, popoverPosition), {
         position: 'absolute'
@@ -104,7 +85,6 @@ var PCSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
         className: "select-options-container"
       }, options.length > 0 && options.map(function (option, index) {
         var optionStyle = _this2.getOptionStyle(option);
-
         var isSelect = selectedOptions.some(function (selectedOption) {
           return selectedOption.id === option.id;
         });
@@ -133,10 +113,8 @@ var PCSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("span", null, getLocale('Add_an_option'), ' ', searchValue)));
     }
   }]);
-
   return PCSelectEditorPopover;
 }(React.Component);
-
 PCSelectEditorPopover.defaultProps = {
   popoverPosition: {},
   options: [],

package/lib/select-editor/select-editor-option.js

@@ -3,30 +3,21 @@ 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 SelectEditorOption = /*#__PURE__*/function (_React$Component) {
   _inherits(SelectEditorOption, _React$Component);
-
   var _super = _createSuper(SelectEditorOption);
-
   function SelectEditorOption() {
     var _this;
-
     _classCallCheck(this, SelectEditorOption);
-
     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.onDeleteOption = function (event) {
       event.nativeEvent.stopImmediatePropagation();
       event.stopPropagation();
-
       _this.props.onDeleteSelectOption(_this.props.option);
     };
-
     _this.getContainerStyle = function () {
       var option = _this.props.option;
       return {
@@ -40,7 +31,6 @@ var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
         backgroundColor: option.color
       };
     };
-
     _this.getOptionStyle = function (option) {
       var textColor = option.textColor || null;
       return {
@@ -51,7 +41,6 @@ var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
         color: textColor
       };
     };
-
     _this.getOperationStyle = function (option) {
       var textColor = option.textColor || null;
       return {
@@ -62,16 +51,14 @@ var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
         transform: 'scale(.8)'
       };
     };
-
     return _this;
   }
-
   _createClass(SelectEditorOption, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          option = _this$props.option,
-          isShowRemoveIcon = _this$props.isShowRemoveIcon;
+        option = _this$props.option,
+        isShowRemoveIcon = _this$props.isShowRemoveIcon;
       var containerStyle = this.getContainerStyle();
       var optionStyle = this.getOptionStyle(option);
       var operationStyle = this.getOperationStyle(option);
@@ -97,10 +84,8 @@ var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
       })));
     }
   }]);
-
   return SelectEditorOption;
 }(React.Component);
-
 SelectEditorOption.defaultProps = {
   isShowRemoveIcon: false
 };

package/lib/toaster/alert.js

@@ -4,17 +4,12 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { css } from 'glamor';
-
 var Alert = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Alert, _React$PureComponent);
-
   var _super = _createSuper(Alert);
-
   function Alert(props) {
     var _this;
-
     _classCallCheck(this, Alert);
-
     _this = _super.call(this, props);
     _this.containerStyle = css({
       borderRadius: '3px',
@@ -72,7 +67,6 @@ var Alert = /*#__PURE__*/function (_React$PureComponent) {
     });
     return _this;
   }
-
   _createClass(Alert, [{
     key: "getContainerStyle",
     value: function getContainerStyle(intent) {
@@ -85,7 +79,6 @@ var Alert = /*#__PURE__*/function (_React$PureComponent) {
             }),
             iconClass: 'dtable-font dtable-icon-check-circle'
           };
-
         case 'warning':
           return {
             borderStyle: this.containerBorderWarn,
@@ -94,7 +87,6 @@ var Alert = /*#__PURE__*/function (_React$PureComponent) {
             }),
             iconClass: 'dtable-font dtable-icon-exclamation-triangle'
           };
-
         case 'none':
           return {
             borderStyle: this.containerBorderNotify,
@@ -103,7 +95,6 @@ var Alert = /*#__PURE__*/function (_React$PureComponent) {
             }),
             iconClass: 'dtable-font dtable-icon-exclamation-circle'
           };
-
         case 'danger':
           return {
             borderStyle: this.containerBorderDanger,
@@ -112,7 +103,6 @@ var Alert = /*#__PURE__*/function (_React$PureComponent) {
             }),
             iconClass: 'dtable-font dtable-icon-exclamation-circle'
           };
-
         default:
           return {
             borderStyle: this.containerBorderSuccess,
@@ -143,8 +133,6 @@ var Alert = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/React.createElement("span", null, "\xD7")));
     }
   }]);
-
   return Alert;
 }(React.PureComponent);
-
 export default Alert;

package/lib/toaster/toast.js

@@ -44,40 +44,30 @@ var animationStyles = css({
     animation: "".concat(closeAnimation, " 120ms ").concat(animationEasing.acceleration, " both")
   }
 });
-
 var Toast = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Toast, _React$PureComponent);
-
   var _super = _createSuper(Toast);
-
   function Toast() {
     var _this;
-
     _classCallCheck(this, Toast);
-
     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.state = {
       isShown: true,
       height: 0
     };
-
     _this.close = function (event) {
       if (event) {
         event.nativeEvent.stopImmediatePropagation();
         event.stopPropagation();
       }
-
       _this.clearCloseTimer();
-
       _this.setState({
         isShown: false
       });
     };
-
     _this.startCloseTimer = function () {
       if (_this.props.duration) {
         _this.closeTimer = setTimeout(function () {
@@ -85,36 +75,28 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
         }, _this.props.duration * 1000);
       }
     };
-
     _this.clearCloseTimer = function () {
       if (_this.closeTimer) {
         clearTimeout(_this.closeTimer);
         _this.closeTimer = null;
       }
     };
-
     _this.handleMouseEnter = function () {
       _this.clearCloseTimer();
     };
-
     _this.handleMouseLeave = function () {
       _this.startCloseTimer();
     };
-
     _this.onRef = function (ref) {
       if (ref === null) return;
-
       var _ref$getBoundingClien = ref.getBoundingClientRect(),
-          height = _ref$getBoundingClien.height;
-
+        height = _ref$getBoundingClien.height;
       _this.setState({
         height: height
       });
     };
-
     return _this;
   }
-
   _createClass(Toast, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
@@ -139,7 +121,6 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       return /*#__PURE__*/React.createElement(Transition, {
         appear: true,
         unmountOnExit: true,
@@ -174,10 +155,8 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
       });
     }
   }]);
-
   return Toast;
 }(React.PureComponent);
-
 Toast.defaultProps = {
   intent: 'none'
 };

package/lib/toaster/toastManager.js

@@ -19,43 +19,32 @@ var wrapperClass = css({
   position: 'fixed',
   zIndex: 999999
 });
-
 var hasCustomId = function hasCustomId(settings) {
   return Object.hasOwnProperty.call(settings, 'id');
 };
-
 var ToastManager = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ToastManager, _React$PureComponent);
-
   var _super = _createSuper(ToastManager);
-
   function ToastManager(props, context) {
     var _this;
-
     _classCallCheck(this, ToastManager);
-
     _this = _super.call(this, props, context);
-
     _this.getToasts = function () {
       return _this.state.toasts;
     };
-
     _this.closeAll = function () {
       _this.getToasts().forEach(function (toast) {
         return toast.close();
       });
     };
-
     _this.notify = function (title, settings) {
       // If there's a custom toast ID passed, close existing toasts with the same custom ID
       if (hasCustomId(settings)) {
         var _iterator = _createForOfIteratorHelper(_this.state.toasts),
-            _step;
-
+          _step;
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var toast = _step.value;
-
             // Since unique ID is still appended to a custom ID, skip the unique ID and check only prefix
             if (String(toast.id).startsWith(settings.id)) {
               _this.closeToast(toast.id);
@@ -67,32 +56,25 @@ var ToastManager = /*#__PURE__*/function (_React$PureComponent) {
           _iterator.f();
         }
       }
-
       var instance = _this.createToastInstance(title, settings);
-
       _this.setState(function (previousState) {
         return {
           toasts: [instance].concat(_toConsumableArray(previousState.toasts))
         };
       });
-
       return instance;
     };
-
     _this.createToastInstance = function (title, settings) {
       var uniqueId = ++ToastManager.idCounter;
       var id = hasCustomId(settings) ? "".concat(settings.id, "-").concat(uniqueId) : uniqueId;
       var hasCloseButton = settings.hasCloseButton || true;
       var duration = settings.duration || 2;
-
       if (settings.hasCloseButton !== undefined) {
         hasCloseButton = settings.hasCloseButton;
       }
-
       if (settings.duration !== undefined) {
         duration = settings.duration;
       }
-
       return {
         id: id,
         title: title,
@@ -105,7 +87,10 @@ var ToastManager = /*#__PURE__*/function (_React$PureComponent) {
         intent: settings.intent
       };
     };
-
+    /**
+     * This will set isShown on the Toast which will close the toast.
+     * It won't remove the toast until onExited triggers onRemove.
+     */
     _this.closeToast = function (id) {
       _this.setState(function (previousState) {
         return {
@@ -115,13 +100,11 @@ var ToastManager = /*#__PURE__*/function (_React$PureComponent) {
                 isShown: false
               });
             }
-
             return toast;
           })
         };
       });
     };
-
     _this.removeToast = function (id) {
       _this.setState(function (previousState) {
         return {
@@ -131,7 +114,6 @@ var ToastManager = /*#__PURE__*/function (_React$PureComponent) {
         };
       });
     };
-
     props.bindNotify(_this.notify);
     props.bindGetToasts(_this.getToasts);
     props.bindCloseAll(_this.closeAll);
@@ -140,19 +122,16 @@ var ToastManager = /*#__PURE__*/function (_React$PureComponent) {
     };
     return _this;
   }
-
   _createClass(ToastManager, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       return /*#__PURE__*/React.createElement("span", {
         className: wrapperClass
       }, this.state.toasts.map(function (_ref) {
         var id = _ref.id,
-            description = _ref.description,
-            props = _objectWithoutProperties(_ref, _excluded);
-
+          description = _ref.description,
+          props = _objectWithoutProperties(_ref, _excluded);
         return /*#__PURE__*/React.createElement(Toast, Object.assign({
           key: id,
           onRemove: function onRemove() {
@@ -162,9 +141,7 @@ var ToastManager = /*#__PURE__*/function (_React$PureComponent) {
       }));
     }
   }]);
-
   return ToastManager;
 }(React.PureComponent);
-
 ToastManager.idCounter = 0;
 export { ToastManager as default };