dtable-ui-component 0.3.20 → 0.3.21

package/lib/DTableSearchInput/index.js

@@ -5,30 +5,22 @@ 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;
+        onChange = _this$props.onChange,
+        wait = _this$props.wait;
       var text = e.target.value;
-
       _this.setState({
         searchValue: text || ''
       }, function () {
@@ -38,45 +30,35 @@ var DtableSearchInput = /*#__PURE__*/function (_Component) {
         }, 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;
+        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
@@ -86,13 +68,11 @@ var DtableSearchInput = /*#__PURE__*/function (_Component) {
           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
     };
@@ -101,7 +81,6 @@ var DtableSearchInput = /*#__PURE__*/function (_Component) {
     _this.inputRef = null;
     return _this;
   }
-
   _createClass(DtableSearchInput, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
@@ -122,14 +101,13 @@ var DtableSearchInput = /*#__PURE__*/function (_Component) {
     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;
+        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",
@@ -149,10 +127,8 @@ var DtableSearchInput = /*#__PURE__*/function (_Component) {
       }), this.renderClear());
     }
   }]);
-
   return DtableSearchInput;
 }(Component);
-
 DtableSearchInput.defaultProps = {
   wait: 100,
   disabled: false,

package/lib/DTableSelect/index.js

@@ -8,8 +8,8 @@ import Select, { components } from 'react-select';
 var MenuSelectStyle = {
   option: function option(provided, state) {
     var isDisabled = state.isDisabled,
-        isSelected = state.isSelected,
-        isFocused = state.isFocused;
+      isSelected = state.isSelected,
+      isFocused = state.isFocused;
     return _objectSpread(_objectSpread({}, provided), {}, {
       cursor: isDisabled ? 'default' : 'pointer',
       backgroundColor: isSelected ? '#20a0ff' : isFocused ? '#f5f5f5' : '#fff',
@@ -32,7 +32,6 @@ var MenuSelectStyle = {
   },
   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",
@@ -41,7 +40,6 @@ var DropdownIndicator = function DropdownIndicator(props) {
     }
   }));
 };
-
 var MenuList = function MenuList(props) {
   return /*#__PURE__*/React.createElement("div", {
     onClick: function onClick(e) {
@@ -52,52 +50,42 @@ var MenuList = function MenuList(props) {
     }
   }, /*#__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;
+        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,
@@ -122,10 +110,8 @@ var DtableSelect = /*#__PURE__*/function (_React$Component) {
       });
     }
   }]);
-
   return DtableSelect;
 }(React.Component);
-
 DtableSelect.defaultProps = {
   options: [],
   value: {},

package/lib/DTableSwitch/index.js

@@ -1,11 +1,10 @@
 import React from 'react';
-
 function DtableSwitch(props) {
   var onChange = props.onChange,
-      checked = props.checked,
-      placeholder = props.placeholder,
-      disabled = props.disabled,
-      switchClassName = props.switchClassName;
+    checked = props.checked,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
+    switchClassName = props.switchClassName;
   return /*#__PURE__*/React.createElement("div", {
     className: "dtable-switch position-relative ".concat(switchClassName || '')
   }, /*#__PURE__*/React.createElement("label", {
@@ -23,5 +22,4 @@ function DtableSwitch(props) {
     className: "custom-switch-indicator"
   })));
 }
-
 export default DtableSwitch;

package/lib/DateEditor/index.js

@@ -9,62 +9,47 @@ import { getDateDisplayString } from 'dtable-utils';
 import PCDateEditorPopover from './pc-date-editor-popover';
 import MBDateEditorPopover from './mb-date-editor-popover';
 import './index.css';
-
 var DateEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(DateEditor, _React$Component);
-
   var _super = _createSuper(DateEditor);
-
   function DateEditor(props) {
     var _this;
-
     _classCallCheck(this, DateEditor);
-
     _this = _super.call(this, props);
-
     _this.getDateFormat = function () {
       var column = _this.props.column;
       var defaultDateFormat = 'YYYY-MM-DD';
       var dateFormat = column.data && column.data.format;
       return dateFormat || defaultDateFormat;
     };
-
     _this.onDateEditorToggle = function () {
       var isReadOnly = _this.props.isReadOnly;
-
       if (isReadOnly) {
         return;
       }
-
       _this.setState({
         isPopoverShow: !_this.state.isPopoverShow
       });
     };
-
     _this.onValueChanged = function (value) {
       if (value !== _this.state.newValue) {
         _this.setState({
           newValue: value
         });
-
         _this.onCommit(value);
       }
     };
-
     _this.onCommit = function (newValue) {
       var updated = {};
       var column = _this.props.column;
       updated[column.key] = newValue;
-
       _this.props.onCommit(updated);
     };
-
     _this.onClosePopover = function () {
       _this.setState({
         isPopoverShow: false
       });
     };
-
     _this.state = {
       isDateInit: false,
       newValue: '',
@@ -74,13 +59,12 @@ var DateEditor = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
   _createClass(DateEditor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props = this.props,
-          value = _this$props.value,
-          lang = _this$props.lang;
+        value = _this$props.value,
+        lang = _this$props.lang;
       dayjs.locale(lang);
       var dateFormat = this.getDateFormat();
       this.setState({
@@ -102,15 +86,14 @@ var DateEditor = /*#__PURE__*/function (_React$Component) {
           className: "control-form"
         })));
       }
-
       var _this$props2 = this.props,
-          lang = _this$props2.lang,
-          column = _this$props2.column;
+        lang = _this$props2.lang,
+        column = _this$props2.column;
       var _this$state = this.state,
-          newValue = _this$state.newValue,
-          isPopoverShow = _this$state.isPopoverShow,
-          dateFormat = _this$state.dateFormat,
-          showHourAndMinute = _this$state.showHourAndMinute;
+        newValue = _this$state.newValue,
+        isPopoverShow = _this$state.isPopoverShow,
+        dateFormat = _this$state.dateFormat,
+        showHourAndMinute = _this$state.showHourAndMinute;
       return /*#__PURE__*/React.createElement("div", {
         className: "cell-editor dtable-ui-date-editor"
       }, !isPopoverShow && /*#__PURE__*/React.createElement("div", {
@@ -140,10 +123,8 @@ var DateEditor = /*#__PURE__*/function (_React$Component) {
       }))));
     }
   }]);
-
   return DateEditor;
 }(React.Component);
-
 DateEditor.defaultProps = {
   isReadOnly: false,
   value: '',

package/lib/DateEditor/mb-date-editor-popover/index.js

@@ -12,84 +12,61 @@ import { initDateEditorLanguage } from '../../utils/editor-utils';
 import MBEditorHeader from '../../MBEditorHeader';
 import '@seafile/seafile-calendar/assets/index.css';
 import './index.css';
-
 var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(DateEditorPopover, _React$PureComponent);
-
   var _super = _createSuper(DateEditorPopover);
-
   function DateEditorPopover(props) {
     var _this;
-
     _classCallCheck(this, DateEditorPopover);
-
     _this = _super.call(this, props);
-
     _this.handleHistaryBack = function (e) {
       e.preventDefault();
-
       _this.closePopover();
     };
-
     _this.handleDateChange = function (date) {
       var _this$props = _this.props,
-          dateFormat = _this$props.dateFormat,
-          showHourAndMinute = _this$props.showHourAndMinute;
+        dateFormat = _this$props.dateFormat,
+        showHourAndMinute = _this$props.showHourAndMinute;
       var newValue = dayjs(date);
-
       if (showHourAndMinute) {
         var datePickerValue = _this.state.datePickerValue;
         var HM = datePickerValue.format('HH:mm');
         var format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
-
         var newDate = dayjs(date).format(format) + ' ' + HM;
         newValue = dayjs(newDate);
       }
-
       _this.setState({
         datePickerValue: dayjs(date)
       });
-
       _this.props.onValueChanged(newValue.format(dateFormat));
     };
-
     _this.handleTimeChange = function (time) {
       var datePickerValue = _this.state.datePickerValue;
       var dateFormat = _this.props.dateFormat;
       var format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
-
       var YMD = datePickerValue.format(format);
       var newDate = YMD + ' ' + dayjs(time).format('HH:mm');
       var newValue = dayjs(newDate);
-
       _this.setState({
         datePickerValue: newValue
       });
-
       _this.props.onValueChanged(datePickerValue.format(dateFormat));
     };
-
     _this.closePopover = function () {
       _this.props.onClosePopover();
     };
-
     _this.deleteDate = function () {
       _this.props.onValueChanged('');
-
       _this.closePopover();
     };
-
     _this.onChange = function (value) {
       if (!value) return;
       var dateFormat = _this.props.dateFormat;
-
       _this.setState({
         datePickerValue: value
       });
-
       _this.props.onValueChanged(value.format(dateFormat));
     };
-
     _this.onContainerClick = function (event) {
       if (_this.editorPopover && _this.editorPopover.contains(event.target)) {
         event.stopPropagation();
@@ -97,19 +74,16 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
         return false;
       }
     };
-
     _this.setEditorPopover = function (editorPopover) {
       _this.editorPopover = editorPopover;
     };
-
     _this.getCalendarContainer = function () {
       return _this.calendarContainerRef.current;
     };
-
     _this.getCalender = function () {
       var _this$props2 = _this.props,
-          dateFormat = _this$props2.dateFormat,
-          lang = _this$props2.lang;
+        dateFormat = _this$props2.dateFormat,
+        lang = _this$props2.lang;
       var defaultValue = dayjs().clone();
       return /*#__PURE__*/React.createElement(Calendar, {
         locale: initDateEditorLanguage(lang),
@@ -126,13 +100,10 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
         }
       });
     };
-
     _this.renderDataPicker = function () {
       var dateFormat = _this.props.dateFormat;
       var datePickerValue = _this.state.datePickerValue;
-
       var calendar = _this.getCalender();
-
       return /*#__PURE__*/React.createElement(SeaDatePicker, {
         open: true,
         style: {
@@ -162,7 +133,6 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
         }));
       });
     };
-
     _this.state = {
       open: true,
       datePickerValue: props.value ? dayjs(props.value) : dayjs().clone()
@@ -170,12 +140,10 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
     _this.calendarContainerRef = React.createRef();
     return _this;
   }
-
   _createClass(DateEditorPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       history.pushState(null, null, '#'); // eslint-disable-line
-
       window.addEventListener('popstate', this.handleHistaryBack, false);
     }
   }, {
@@ -187,10 +155,10 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props3 = this.props,
-          lang = _this$props3.lang,
-          column = _this$props3.column,
-          dateFormat = _this$props3.dateFormat,
-          showHourAndMinute = _this$props3.showHourAndMinute;
+        lang = _this$props3.lang,
+        column = _this$props3.column,
+        dateFormat = _this$props3.dateFormat,
+        showHourAndMinute = _this$props3.showHourAndMinute;
       var leftFormat = dateFormat.split(' ')[0];
       var rightFormat = dateFormat.split(' ')[1];
       var datePickerValue = this.state.datePickerValue;
@@ -238,8 +206,6 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
       }, getLocale('Clear')))));
     }
   }]);
-
   return DateEditorPopover;
 }(React.PureComponent);
-
 export default DateEditorPopover;

package/lib/DateEditor/pc-date-editor-popover.js

@@ -9,66 +9,52 @@ import Calendar from '@seafile/seafile-calendar';
 import { initDateEditorLanguage } from '../utils/editor-utils';
 import '@seafile/seafile-calendar/assets/index.css';
 import { getLocale } from '../lang';
-
 var PCDateEditorPopover = /*#__PURE__*/function (_React$Component) {
   _inherits(PCDateEditorPopover, _React$Component);
-
   var _super = _createSuper(PCDateEditorPopover);
-
   function PCDateEditorPopover(props) {
     var _this;
-
     _classCallCheck(this, PCDateEditorPopover);
-
     _this = _super.call(this, props);
-
+    // event trigger sequence: onOpenChange --> onChange
     _this.onChange = function (value) {
       if (!value) return;
       var dateFormat = _this.props.dateFormat;
-
       _this.setState({
         datePickerValue: value,
         open: true // if value changed, don't close datePicker
-
       });
 
       _this.props.onValueChanged(value.format(dateFormat));
     };
-
     _this.onOpenChange = function (open) {
       _this.setState({
         open: open
       });
-
       return;
     };
-
     _this.onClear = function () {
       _this.setState({
         datePickerValue: null
       });
     };
-
     _this.onFocusDatePicker = function () {
       _this.setState({
         open: true
       });
     };
-
     _this.handleMouseDown = function (event) {
       event.preventDefault();
       event.stopPropagation();
     };
-
     _this.getCalendarContainer = function () {
       return _this.calendarContainerRef.current;
     };
-
     _this.getCalender = function () {
       var _this$props = _this.props,
-          dateFormat = _this$props.dateFormat,
-          showHourAndMinute = _this$props.showHourAndMinute,
-          lang = _this$props.lang;
+        dateFormat = _this$props.dateFormat,
+        showHourAndMinute = _this$props.showHourAndMinute,
+        lang = _this$props.lang;
       var defaultValue = dayjs().clone();
       return /*#__PURE__*/React.createElement(Calendar, {
         locale: initDateEditorLanguage(lang),
@@ -84,25 +70,21 @@ var PCDateEditorPopover = /*#__PURE__*/function (_React$Component) {
         onClear: _this.onClear
       });
     };
-
     _this.state = {
       open: true,
       datePickerValue: props.value ? dayjs(props.value) : null
     };
     _this.calendarContainerRef = React.createRef();
     return _this;
-  } // event trigger sequence: onOpenChange --> onChange
-
-
+  }
   _createClass(PCDateEditorPopover, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var dateFormat = this.props.dateFormat;
       var _this$state = this.state,
-          open = _this$state.open,
-          datePickerValue = _this$state.datePickerValue;
+        open = _this$state.open,
+        datePickerValue = _this$state.datePickerValue;
       var calendar = this.getCalender();
       return /*#__PURE__*/React.createElement(DatePicker, {
         open: open,
@@ -135,8 +117,6 @@ var PCDateEditorPopover = /*#__PURE__*/function (_React$Component) {
       });
     }
   }]);
-
   return PCDateEditorPopover;
 }(React.Component);
-
 export default PCDateEditorPopover;

package/lib/DateFormatter/index.js

@@ -6,40 +6,31 @@ import React from 'react';
 import classnames from 'classnames';
 import { getDateDisplayString } from 'dtable-utils';
 import './index.css';
-
 var DateFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(DateFormatter, _React$Component);
-
   var _super = _createSuper(DateFormatter);
-
   function DateFormatter() {
     _classCallCheck(this, DateFormatter);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(DateFormatter, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          date = _this$props.value,
-          format = _this$props.format,
-          containerClassName = _this$props.containerClassName;
+        date = _this$props.value,
+        format = _this$props.format,
+        containerClassName = _this$props.containerClassName;
       var classname = classnames('dtable-ui cell-formatter-container date-formatter', containerClassName);
-
       if (date !== '') {
         date = getDateDisplayString(date, format);
       }
-
       return /*#__PURE__*/React.createElement("div", {
         className: classname
       }, date);
     }
   }]);
-
   return DateFormatter;
 }(React.Component);
-
 DateFormatter.defaultProps = {
   value: '',
   format: 'YYYY-MM-DD',