dtable-ui-component 4.4.0 → 4.4.2

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-single-select-filter.js

@@ -0,0 +1,89 @@
+import React, { useState, useRef } from 'react';
+import classnames from 'classnames';
+import SelectedDepartments from '../../../Department-editor/selected-departments';
+import DepartmentSingleSelect from '../../../Department-editor/department-single-select';
+import { DEPARTMENT_SELECT_RANGE_OPTIONS } from '../../../Department-editor/constants';
+import { useClickOutside } from '../../../hooks/common-hooks';
+import { getLocale } from '../../../lang';
+function DepartmentSingleSelectFilter(props) {
+  const {
+    value,
+    column,
+    roleId,
+    departments,
+    userDepartmentIdsMap
+  } = props;
+  const [isShowSelector, setIsShowSelector] = useState(false);
+  const [selectedDepartment, setSelectedDepartment] = useState(value || '');
+  const selectorRef = useRef(null);
+  let selectedDepartmentIds = [];
+  selectedDepartmentIds.push(value);
+  useClickOutside({
+    currDOM: selectorRef.current,
+    onClickOutside: () => setIsShowSelector(false)
+  }, [selectedDepartment]);
+  function renderUserDepartmentOptions(onSelect) {
+    if (!roleId) return [];
+    return DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
+      const {
+        type,
+        name
+      } = option;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dropdown-item department-item d-flex align-items-center",
+        key: index,
+        onClick: event => onSelect(event, type)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "department-item-left-content d-flex align-items-center"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "text-truncate department-name"
+      }, getLocale(name)), selectedDepartment === type && /*#__PURE__*/React.createElement("span", {
+        className: "department-check-icon"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      }))));
+    });
+  }
+  function onSelectToggle(event) {
+    event.preventDefault();
+    setIsShowSelector(!isShowSelector);
+  }
+  function onCommit(value) {
+    setSelectedDepartment(value);
+    setIsShowSelector(false);
+    const columnOption = {
+      id: value
+    };
+    props.onCommit({
+      columnOption
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: selectorRef,
+    className: classnames('dtable-select custom-select', {
+      'focus': isShowSelector
+    }),
+    onClick: onSelectToggle,
+    id: "filter-department-editor"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "selected-option"
+  }, value ? /*#__PURE__*/React.createElement("span", {
+    className: "selected-option-show"
+  }, /*#__PURE__*/React.createElement(SelectedDepartments, {
+    value: selectedDepartmentIds,
+    departments: departments
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "select-placeholder"
+  }, getLocale('Select_department')), /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-drop-down"
+  })), isShowSelector && /*#__PURE__*/React.createElement(DepartmentSingleSelect, {
+    enableSelectRange: false,
+    column: column,
+    value: value,
+    onCommit: onCommit,
+    userDepartmentIdsMap: userDepartmentIdsMap,
+    departments: departments,
+    renderUserDepartmentOptions: renderUserDepartmentOptions
+  }));
+}
+export default DepartmentSingleSelectFilter;

package/lib/DTableFiltersPopover/widgets/filter-calendar.js

@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+import dayjs from '../../utils/dayjs';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en-gb';
+import Calendar from '@seafile/seafile-calendar';
+import DatePicker from '@seafile/seafile-calendar/lib/Picker';
+import { translateCalendar } from '../../lang';
+import { getDateColumnFormat } from '../utils';
+import '@seafile/seafile-calendar/assets/index.css';
+let now = dayjs();
+class FilterCalendar extends Component {
+  constructor(props) {
+    super(props);
+    this.handleMouseDown = e => {
+      e.preventDefault();
+    };
+    this.onChange = value => {
+      const {
+        onChange
+      } = this.props;
+      const searchFormat = 'YYYY-MM-DD';
+      this.setState({
+        value
+      }, () => {
+        if (this.state.value) {
+          onChange(this.state.value.format(searchFormat));
+        }
+      });
+    };
+    this.onClear = () => {
+      this.setState({
+        value: null
+      }, () => {
+        this.setState({
+          open: true
+        });
+      });
+    };
+    this.onOpenChange = open => {
+      this.setState({
+        open
+      });
+    };
+    this.onReadOnlyFocus = () => {
+      if (!this.state.open && this.state.isMouseDown) {
+        this.setState({
+          isMouseDown: false
+        });
+      } else {
+        this.setState({
+          open: true
+        });
+      }
+    };
+    this.getCalendarContainer = () => {
+      return this.calendarContainerRef.current;
+    };
+    this.getCalendarFormat = () => {
+      let calendarFormat = [];
+      if (this.columnDataFormat.indexOf('YYYY-MM-DD') > -1) {
+        let newColumnDataFormat = this.columnDataFormat.replace('YYYY-MM-DD', 'YYYY-M-D');
+        calendarFormat = [this.columnDataFormat, newColumnDataFormat];
+      } else if (this.columnDataFormat.indexOf('DD/MM/YYYY') > -1) {
+        let newColumnDataFormat = this.columnDataFormat.replace('DD/MM/YYYY', 'D/M/YYYY');
+        calendarFormat = [this.columnDataFormat, newColumnDataFormat];
+      } else {
+        calendarFormat = [this.columnDataFormat];
+      }
+      return calendarFormat;
+    };
+    this.state = {
+      open: false,
+      value: null
+    };
+    const DataFormat = getDateColumnFormat(props.filterColumn).trim();
+    //Minutes and seconds are not supported at present
+    this.columnDataFormat = DataFormat.split(' ')[0];
+    this.calendarContainerRef = React.createRef();
+    this.defaultCalendarValue = null;
+  }
+  componentDidMount() {
+    const {
+      value,
+      lang
+    } = this.props;
+    const iszhcn = lang === 'zh-cn';
+    if (iszhcn) {
+      now = now.locale('zh-cn');
+    } else {
+      now = now.locale('en-gb');
+    }
+    this.defaultCalendarValue = now.clone();
+    if (value && dayjs(value).isValid()) {
+      let validValue = dayjs(value).isValid() ? dayjs(value) : dayjs(this.defaultCalendarValue);
+      this.setState({
+        value: iszhcn ? dayjs(validValue).locale('zh-cn') : dayjs(validValue).locale('en-gb')
+      });
+    }
+  }
+  render() {
+    const {
+      isReadOnly
+    } = this.props;
+    const state = this.state;
+    if (isReadOnly) return /*#__PURE__*/React.createElement("input", {
+      className: "ant-calendar-picker-input ant-input form-control",
+      value: state.value ? state.value.format(this.columnDataFormat) : '',
+      disabled: true
+    });
+    const calendarFormat = this.getCalendarFormat();
+    const clearStyle = {
+      position: 'absolute',
+      top: '15px',
+      left: '225px',
+      color: 'gray',
+      fontSize: '12px'
+    };
+    const clearIcon = React.createElement('i', {
+      className: 'item-icon dtable-font dtable-icon-x',
+      style: clearStyle
+    });
+    const calendar = /*#__PURE__*/React.createElement(Calendar, {
+      className: "dtable-rc-calendar",
+      locale: translateCalendar(),
+      style: {
+        zIndex: 1001
+      },
+      dateInputPlaceholder: 'please enter date',
+      format: calendarFormat,
+      defaultValue: this.defaultCalendarValue,
+      showDateInput: true,
+      focusablePanel: false,
+      onClear: this.onClear,
+      clearIcon: clearIcon
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: "date-picker-container"
+    }, /*#__PURE__*/React.createElement(DatePicker, {
+      calendar: calendar,
+      value: state.value,
+      onChange: this.onChange,
+      getCalendarContainer: this.getCalendarContainer,
+      onOpenChange: this.onOpenChange,
+      open: state.open,
+      style: {
+        zIndex: 1001
+      }
+    }, _ref => {
+      let {
+        value
+      } = _ref;
+      return /*#__PURE__*/React.createElement("span", {
+        tabIndex: "0",
+        onFocus: this.onReadOnlyFocus
+      }, /*#__PURE__*/React.createElement("input", {
+        tabIndex: "-1",
+        readOnly: true,
+        className: "ant-calendar-picker-input ant-input form-control",
+        value: value ? value.format(this.columnDataFormat) : '',
+        onMouseDown: this.handleMouseDown
+      }), /*#__PURE__*/React.createElement("div", {
+        ref: this.calendarContainerRef
+      }));
+    }));
+  }
+}
+export default FilterCalendar;