dtable-ui-component 4.4.0-alpha2 → 4.4.0-beta1

package/lib/Department-editor/selected-departments/index.js

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import { DEPARTMENT_SELECT_RANGE_MAP } from 'dtable-utils';
+import { DEPARTMENT_SELECT_RANGE_OPTIONS } from '../constants';
+import { getLocale } from '../../lang';
+import './index.css';
+function SelectedDepartments(props) {
+  const {
+    value,
+    removeDepartment,
+    isShowRemoveIcon,
+    departments
+  } = props;
+  const idDepartmentMap = useMemo(() => {
+    let idDepartmentMap = {};
+    departments.forEach(department => {
+      idDepartmentMap[department.id] = department;
+    });
+    return idDepartmentMap;
+  }, [departments]);
+  const dom = Array.isArray(value) ? value.map((content, index) => {
+    if ([DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT, DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB].includes(content)) {
+      const name = getLocale(DEPARTMENT_SELECT_RANGE_OPTIONS.find(option => option.type === content).name);
+      return /*#__PURE__*/React.createElement("div", {
+        key: "department-".concat(index),
+        className: "department mr-1"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "department-name text-truncate",
+        title: name,
+        "aria-label": name
+      }, name));
+    }
+    const department = idDepartmentMap[content];
+    if (department) {
+      const {
+        name
+      } = department;
+      return /*#__PURE__*/React.createElement("div", {
+        key: "department-".concat(index),
+        className: "department mr-1"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "department-avatar-container d-flex align-items-center justify-content-center"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "dtable-font dtable-icon-department-single-selection"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "department-name text-truncate",
+        title: name,
+        "aria-label": name
+      }, name), isShowRemoveIcon && /*#__PURE__*/React.createElement("span", {
+        className: "remove-container"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "remove-icon",
+        onClick: event => removeDepartment(event, content)
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number department-remove-icon"
+      }))));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: "department-".concat(index),
+      className: "department empty-department mr-1"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "department-avatar-container d-flex align-items-center justify-content-center"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "dtable-font dtable-icon-department-single-selection"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "department-name"
+    }, getLocale('Deleted_department')), isShowRemoveIcon && /*#__PURE__*/React.createElement("span", {
+      className: "remove-container"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "remove-icon",
+      onClick: event => removeDepartment(event, content)
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number department-remove-icon"
+    }))));
+  }) : null;
+  return dom;
+}
+SelectedDepartments.defaultProps = {
+  isShowRemoveIcon: false,
+  departments: []
+};
+export default SelectedDepartments;

package/lib/Department-editor/utils.js

@@ -0,0 +1,29 @@
+export const searchDepartments = (departments, searchValue) => {
+  const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
+  const validDepartments = Array.isArray(departments) ? departments : [];
+  if (!validSearchValue) return validDepartments;
+  return validDepartments.filter(department => {
+    const {
+      name
+    } = department;
+    if (!name) return false;
+    return name.toString().toLowerCase().indexOf(validSearchValue) > -1;
+  });
+};
+export const getNormalizedDepartments = function (departments) {
+  let canExpand = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  let parentIdMap = {};
+  for (let i = 0; i < departments.length; i++) {
+    let item = departments[i];
+    parentIdMap[item.parent_id] = true;
+  }
+  return departments.map(depart => {
+    const hasChild = canExpand && !!parentIdMap[depart.id];
+    const isExpanded = depart.parent_id === -1 ? true : false;
+    return {
+      ...depart,
+      hasChild,
+      isExpanded
+    };
+  });
+};

package/lib/constants/index.js

@@ -19,4 +19,7 @@ const DATE_TYPES = {
 const SIMPLE_CELL_COLUMNS = [CellType.TEXT, CellType.NUMBER, CellType.DATE, CellType.CTIME, CellType.MTIME, CellType.AUTO_NUMBER, CellType.URL, CellType.EMAIL, CellType.DURATION, CellType.CHECKBOX, CellType.RATE];
 const ARRAY_FORMAT_COLUMNS = [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
 const SIMPLE_CELL_FORMULA_RESULTS = [FORMULA_RESULT_TYPE.NUMBER, FORMULA_RESULT_TYPE.STRING, FORMULA_RESULT_TYPE.DATE, FORMULA_RESULT_TYPE.BOOL];
-export { CellType, NUMBER_TYPES, DATE_TYPES, FORMULA_RESULT_TYPE, SIMPLE_CELL_COLUMNS, ARRAY_FORMAT_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS };
+const EVENT_BUS_TYPE = {
+  OPEN_SELECT: 'open-select'
+};
+export { CellType, NUMBER_TYPES, DATE_TYPES, FORMULA_RESULT_TYPE, SIMPLE_CELL_COLUMNS, ARRAY_FORMAT_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS, EVENT_BUS_TYPE };

package/lib/hooks/common-hooks.js

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+export const useClickOutside = (_ref, deps) => {
+  let {
+    currDOM,
+    onClickOutside
+  } = _ref;
+  useEffect(() => {
+    const onMousedown = event => {
+      if (currDOM && event && currDOM.contains(event.target)) {
+        return;
+      }
+      onClickOutside && onClickOutside(event);
+    };
+    document.addEventListener('mousedown', onMousedown);
+    return () => {
+      document.removeEventListener('mousedown', onMousedown);
+    };
+
+    // eslint-disable-next-line
+  }, deps || []);
+};

package/lib/index.js

@@ -70,4 +70,7 @@ export { default as ModalPortal } from './ModalPortal';
 export { default as RoleStatusEditor } from './RoleStatusEditor';
 
 // setting
-export { default as FieldDisplaySetting } from './FieldDisplaySetting';
+export { default as FieldDisplaySetting } from './FieldDisplaySetting';
+
+// popover
+export { default as DTableFiltersPopover } from './DTableFiltersPopover';

package/lib/lang/index.js

@@ -2,17 +2,26 @@ import de from '../locals/de';
 import en from '../locals/en';
 import fr from '../locals/fr';
 import zh_CN from '../locals/zh-CN';
+const zhCN = require('@seafile/seafile-calendar/lib/locale/zh_CN');
+const zhTW = require('@seafile/seafile-calendar/lib/locale/zh_TW');
+const enUS = require('@seafile/seafile-calendar/lib/locale/en_US');
+const frFR = require('@seafile/seafile-calendar/lib/locale/fr_FR');
+const deDE = require('@seafile/seafile-calendar/lib/locale/de_DE');
+const esES = require('@seafile/seafile-calendar/lib/locale/es_ES');
+const plPL = require('@seafile/seafile-calendar/lib/locale/pl_PL');
+const csCZ = require('@seafile/seafile-calendar/lib/locale/cs_CZ');
+const ruRU = require('@seafile/seafile-calendar/lib/locale/ru_RU');
 let langData = {
   'de': de,
   'en': en,
   'fr': fr,
   'zh-cn': zh_CN
 };
-const LANGUAGE = 'en';
+let LANGUAGE = 'en';
 let LANGUAGE_MAP = langData[LANGUAGE];
 export function setLocale(args) {
-  let lang = typeof args === 'string' ? args : LANGUAGE;
-  LANGUAGE_MAP = langData[lang] || langData[LANGUAGE];
+  LANGUAGE = typeof args === 'string' ? args : LANGUAGE;
+  LANGUAGE_MAP = langData[LANGUAGE];
 }
 export function getLocale(key, def) {
   if (!key) return def;
@@ -40,4 +49,59 @@ export function substitute(str, obj) {
     return val;
   }
   return '';
+}
+export function translateCalendar() {
+  const locale = LANGUAGE ? LANGUAGE : 'en';
+  let language;
+  switch (locale) {
+    case 'zh-cn':
+      language = zhCN;
+      break;
+    case 'zh-tw':
+      language = zhTW;
+      break;
+    case 'en':
+      language = enUS;
+      break;
+    case 'fr':
+      language = frFR;
+      break;
+    case 'de':
+      language = deDE;
+      break;
+    case 'es':
+      language = esES;
+      break;
+    case 'es-ar':
+      language = esES;
+      break;
+    case 'es-mx':
+      language = esES;
+      break;
+    case 'pl':
+      language = plPL;
+      break;
+    case 'cs':
+      language = csCZ;
+      break;
+    case 'ru':
+      language = ruRU;
+      break;
+    default:
+      language = enUS;
+  }
+  return language;
+}
+export function getMobileDatePickerLocale() {
+  return {
+    DatePickerLocale: {
+      year: getLocale('Year'),
+      month: getLocale('Month'),
+      day: getLocale('Day'),
+      hour: getLocale('Hour'),
+      minute: getLocale('Minute')
+    },
+    okText: getLocale('Done'),
+    dismissText: getLocale('Cancel')
+  };
 }

package/lib/locals/en.js

@@ -16,6 +16,45 @@ const en = {
   Are_you_sure_you_want_to_delete_this_file: 'Are you sure you want to delete this file?',
   Are_you_sure_you_want_to_delete_this_image: 'Are you sure you want to delete this image?',
   Cancel: 'Cancel',
-  Delete: 'Delete'
+  Delete: 'Delete',
+  Find_a_department: 'Find a department',
+  No_departments_available: 'No departments available',
+  Current_user_department: 'Current user\'s department',
+  Current_user_department_and_sub: 'Current user\'s department and sub-departments',
+  Specific_departments: 'Specific departments',
+  Deleted_department: 'Deleted department',
+  Add_filter: 'Add filter',
+  Submit: 'Submit',
+  No_filters_applied_to_this_view: 'No_filters_applied_to_this_view',
+  No_filters: 'No_filters',
+  Today: 'Today',
+  Tomorrow: 'Tomorrow',
+  Yesterday: 'Yesterday',
+  One_week_ago: 'One week ago',
+  One_week_from_now: 'One week from now',
+  One_month_ago: 'One month ago',
+  One_month_from_now: 'One month from now',
+  Number_of_days_ago: 'Number of days ago',
+  Number_of_days_from_now: 'Number of days from now',
+  Exact_date: 'Exact date',
+  Last_week: 'Last week',
+  Last_month: 'Last month',
+  Last_year: 'Last year',
+  The_next_week: 'The next week',
+  The_next_month: 'The next month',
+  The_next_year: 'The next year',
+  The_next_numbers_of_days: 'The next numbers of days',
+  The_past_numbers_of_days: 'The past numbers of days',
+  This_week: 'This week',
+  This_month: 'This month',
+  This_year: 'This year',
+  Select_an_option: 'Select_an_option',
+  Add_collaborator: 'Add_collaborator',
+  Add_a_creator: 'Add_a_creator',
+  Add_a_last_modifier: 'Add_a_last_modifier',
+  Invalid_filter: 'Invalid_filter',
+  Find_column: 'Find_column',
+  No_results: 'No_results',
+  'Select_option(s)': 'Select option(s)'
 };
 export default en;

package/lib/locals/zh-CN.js

@@ -16,6 +16,11 @@ const zh_CN = {
   Are_you_sure_you_want_to_delete_this_file: '你确定要删除此文件吗？',
   Are_you_sure_you_want_to_delete_this_image: '你确定要删除此图片吗？',
   Cancel: '取消',
-  Delete: '删除'
+  Delete: '删除',
+  Find_a_department: "查找部门",
+  Current_user_department: "当前用户的部门",
+  Current_user_department_and_sub: "当前用户的部门和子部门",
+  Specific_departments: "具体部门",
+  Deleted_department: "已经删除的部门"
 };
 export default zh_CN;

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

@@ -119,7 +119,7 @@
     transition: translateY(1px);
   }
 
-  .dtable-ui-mb-select-editor-body .mb-create-select-item .add-new-option {
+  .dtable-ui-mb-select-editor-body .mb-create-select-item .dtable-ui-add-new-option {
     font-size: 14px;
     font-weight: 500px;
   }

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

@@ -176,7 +176,7 @@ class MBSelectEditorPopover extends React.Component {
     }, /*#__PURE__*/React.createElement("i", {
       className: "dtable-font dtable-icon-add-table"
     }), /*#__PURE__*/React.createElement("span", {
-      className: "add-new-option"
+      className: "dtable-ui-add-new-option"
     }, "".concat(getLocale('Add_an_option'), " ").concat(searchVal)))));
   }
 }

package/lib/utils/dayjs.js

@@ -0,0 +1,4 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+dayjs.extend(customParseFormat);
+export default dayjs;

package/lib/utils/event-bus.js

@@ -0,0 +1,28 @@
+class EventBus {
+  constructor() {
+    this.subscribers = {};
+  }
+  subscribe(type, handler) {
+    if (!this.subscribers[type]) {
+      this.subscribers[type] = [];
+    }
+    const handlers = this.subscribers[type];
+    handlers.push(handler);
+    return () => {
+      const index = handlers.indexOf(handler);
+      if (index > -1) {
+        handlers.splice(index, 1);
+      }
+    };
+  }
+  dispatch(type) {
+    for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      data[_key - 1] = arguments[_key];
+    }
+    const handlers = this.subscribers[type];
+    if (Array.isArray(handlers)) {
+      handlers.forEach(handler => handler(...data));
+    }
+  }
+}
+export default new EventBus();

package/lib/utils/utils.js

@@ -37,4 +37,9 @@ export const downloadFile = downloadUrl => {
   iframe.style.display = 'none';
   iframe.src = downloadUrl;
   document.body.appendChild(iframe);
+};
+export const getEventClassName = e => {
+  // svg mouseEvent event.target.className is an object
+  if (!e || !e.target) return '';
+  return e.target.getAttribute('class') || '';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "4.4.0-alpha2",
+  "version": "4.4.0-beta1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",