feat: optimzie code

Author: 杨国璇

src/CheckboxEditor/index.js

@@ -1,29 +1,29 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
-import Large from './lg';
-import Small from './sm';
+import PCCheckboxEditor from './pc-editor';
+import MBCheckboxEditor from './mb-editor';
 
 import './index.css';
 
-const CheckboxEditor = forwardRef(({ size, ...props }, ref) => {
-  if (size === 'lg') return (<Large { ...props } />);
-  if (size === 'sm') return (<Small { ...props } />);
+const CheckboxEditor = forwardRef(({ isMobile, ...props }, ref) => {
+  if (isMobile === false) return (<PCCheckboxEditor { ...props } ref={ref} />);
+  if (isMobile === true) return (<MBCheckboxEditor { ...props } ref={ref} />);
 
   return (
     <>
       <MediaQuery query="(min-width: 768px)">
-        <Large { ...props } ref={ref} />
+        <PCCheckboxEditor { ...props } ref={ref} />
       </MediaQuery>
       <MediaQuery query="(max-width: 768px)">
-        <Small { ...props } ref={ref} />
+        <MBCheckboxEditor { ...props } ref={ref} />
       </MediaQuery>
     </>
   );
 });
 
 CheckboxEditor.propTypes = {
-  size: PropTypes.oneOf(['lg', 'sm']),
+  isMobile: PropTypes.bool,
 };
 
 export default CheckboxEditor;

src/CheckboxEditor/sm.js renamed to src/CheckboxEditor/mb-editor.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import SvgIcon from '../SvgIcon';
 import { DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
 
-class Small extends Component {
+class MBCheckboxEditor extends Component {
 
   constructor(props) {
     super(props);
@@ -74,7 +74,7 @@ class Small extends Component {
   }
 }
 
-Small.propTypes = {
+MBCheckboxEditor.propTypes = {
   isEditorShow: PropTypes.bool,
   className: PropTypes.string,
   style: PropTypes.object,
@@ -83,4 +83,4 @@ Small.propTypes = {
   onCommit: PropTypes.func,
 };
 
-export default Small;
+export default MBCheckboxEditor;

src/CheckboxEditor/lg.js renamed to src/CheckboxEditor/pc-editor.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import SvgIcon from '../SvgIcon';
 import { KeyCodes, DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
 
-class Large extends Component {
+class PCCheckboxEditor extends Component {
 
   constructor(props) {
     super(props);
@@ -89,7 +89,7 @@ class Large extends Component {
   }
 }
 
-Large.propTypes = {
+PCCheckboxEditor.propTypes = {
   isEditorShow: PropTypes.bool,
   className: PropTypes.string,
   style: PropTypes.object,
@@ -98,4 +98,4 @@ Large.propTypes = {
   onCommit: PropTypes.func,
 };
 
-export default Large;
+export default PCCheckboxEditor;

src/CollaboratorEditor/index.js

@@ -1,32 +1,31 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
-import Large from './lg';
-import Small from './sm';
+import PCCollaboratorEditor from './pc-editor';
+import MBCollaboratorEditor from './mb-editor';
 
 import './index.css';
 
-const CollaboratorEditor = forwardRef(({ value: oldValue, size, ...props }, ref) => {
+const CollaboratorEditor = forwardRef(({ isMobile, value: oldValue, ...props }, ref) => {
   const value = Array.isArray(oldValue) ? oldValue : [];
-
-  if (size === 'lg') return (<Large { ...props } value={value} />);
-  if (size === 'sm') return (<Small { ...props } value={value} />);
+  if (isMobile === false) return (<PCCollaboratorEditor { ...props } value={value} ref={ref} />);
+  if (isMobile === true) return (<MBCollaboratorEditor { ...props } value={value} ref={ref} />);
 
   return (
     <>
-      <MediaQuery query={'(min-width: 768px)'}>
-        <Large { ...props} value={value} ref={ref} />
+      <MediaQuery query="(min-width: 768px)">
+        <PCCollaboratorEditor { ...props } value={value} ref={ref} />
       </MediaQuery>
-      <MediaQuery query={'(max-width: 767.8px)'}>
-        <Small { ...props} value={value} ref={ref} />
+      <MediaQuery query="(max-width: 768px)">
+        <MBCollaboratorEditor { ...props } value={value} ref={ref} />
       </MediaQuery>
     </>
   );
 });
 
 CollaboratorEditor.propTypes = {
+  isMobile: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  size: PropTypes.oneOf(['lg', 'sm']),
 };
 
 export default CollaboratorEditor;

src/CollaboratorEditor/mb-editor/index.css

@@ -0,0 +1,41 @@
+@import url('../../css/mb-cell-editor.css');
+
+.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option .dtable-ui-mobile-selector-option-name {
+  height: 36px !important;
+  line-height: 36px !important;
+  margin-top: 0px !important;
+}
+
+.dtable-ui-mobile-selector.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option {
+  font-size: 16px;
+}
+
+.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option .dtable-ui.collaborator-item {
+  background-color: inherit;
+  border-radius: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option .dtable-ui.collaborator-item .collaborator-avatar {
+  height: 2rem;
+  margin: 2px 0;
+  vertical-align: middle;
+  width: 2rem;
+}
+
+.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option .dtable-ui.collaborator-item .collaborator-avatar-icon {
+  border-radius: 50%;
+  height: 2rem;
+  width: 2rem;
+}
+
+.dtable-ui-mobile-collaborator-editor .dtable-ui-mobile-selector-option .dtable-ui.collaborator-item .collaborator-name {
+  height: 100%;
+  font-size: 16px;
+  line-height: 36px;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/CollaboratorEditor/sm/index.js renamed to src/CollaboratorEditor/mb-editor/index.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { searchCollaborators } from 'dtable-utils';
-import MobileSelectorEditor from '../../MobileSelectorEditor';
+import MobileSelector from '../../MobileSelector';
 import { getLocale } from '../../lang';
 import CollaboratorItem from '../../CollaboratorItem';
 
 import './index.css';
 
-const { Search, Option, Options, Empty } = MobileSelectorEditor;
+const { Search, Option, Options, Empty } = MobileSelector;
 
-class Small extends React.Component {
+class MBCollaboratorEditor extends React.Component {
 
   static defaultProps = {
     value: [],
@@ -65,25 +65,25 @@ class Small extends React.Component {
     const displayCollaborators = searchVal ? searchCollaborators(collaborators, searchVal) : collaborators;
 
     return (
-      <MobileSelectorEditor onClose={this.props.onClose} title={column.name} className="mobile-dtable-ui-collaborator-editor">
+      <MobileSelector onClose={this.props.onClose} title={column.name} className="dtable-ui-mobile-collaborator-editor">
         {collaborators.length > 10 && (
           <Search value={searchVal} placeholder={getLocale('Search_collaborator')} onChange={this.onChangeSearch} />
         )}
         <Options>
           {displayCollaborators.length === 0 && (<Empty>{getLocale('No_collaborators_available')}</Empty>)}
           {displayCollaborators.length > 0 && this.renderCollaborators(displayCollaborators)}
         </Options>
-      </MobileSelectorEditor>
+      </MobileSelector>
     );
   }
 }
 
-Small.propTypes = {
+MBCollaboratorEditor.propTypes = {
   value: PropTypes.array.isRequired,
   column: PropTypes.object.isRequired,
   collaborators: PropTypes.array.isRequired,
   onCommit: PropTypes.func.isRequired,
   onClose: PropTypes.func,
 };
 
-export default Small;
+export default MBCollaboratorEditor;

src/CollaboratorEditor/lg/index.css renamed to src/CollaboratorEditor/pc-editor/index.css

@@ -11,7 +11,7 @@ import ObjectUtils from '../../utils/object-utils';
 
 import './index.css';
 
-class Large extends React.Component {
+class PCCollaboratorEditor extends React.Component {
 
   constructor(props) {
     super(props);
@@ -230,7 +230,7 @@ class Large extends React.Component {
   }
 }
 
-Large.propTypes = {
+PCCollaboratorEditor.propTypes = {
   isInModal: PropTypes.bool,
   value: PropTypes.array,
   collaborators: PropTypes.array.isRequired,
@@ -241,4 +241,4 @@ Large.propTypes = {
   onPressTab: PropTypes.func,
 };
 
-export default Large;
+export default PCCollaboratorEditor;

src/CollaboratorEditor/lg/index.js renamed to src/CollaboratorEditor/pc-editor/index.js

@@ -1,9 +1,9 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import SelectedDepartments from '../../../DepartmentEditor/selected-departments';
-import DepartmentMultipleSelect from '../../../DepartmentEditor/department-multiple-select';
-import { DEPARTMENT_SELECT_RANGE_OPTIONS } from '../../../DepartmentEditor/constants';
+import SelectedDepartments from '../../../SelectedDepartments';
+import DepartmentMultipleSelectEditor from '../../../DepartmentMultipleSelectEditor';
+import { DEPARTMENT_SELECT_RANGE_OPTIONS } from '../../../constants/departments';
 import { useClickOutside } from '../../../hooks/common-hooks';
 import { getLocale } from '../../../lang';
 
@@ -85,7 +85,7 @@ function DepartmentMultipleSelectFilter(props) {
         <span className="dtable-font dtable-icon-down3"></span>
       </div>
       {isShowSelector &&
-        <DepartmentMultipleSelect
+        <DepartmentMultipleSelectEditor
           isShowSelectedDepartments={false}
           classNamePrefix="filter"
           value={selectedDepartments}

src/CollaboratorEditor/sm/index.css

@@ -1,9 +1,9 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import SelectedDepartments from '../../../DepartmentEditor/selected-departments';
-import DepartmentEditor from '../../../DepartmentEditor';
-import { DEPARTMENT_SELECT_RANGE_OPTIONS } from '../../../DepartmentEditor/constants';
+import SelectedDepartments from '../../../SelectedDepartments';
+import DepartmentSingleSelectEditor from '../../../DepartmentSingleSelectEditor';
+import { DEPARTMENT_SELECT_RANGE_OPTIONS } from '../../../constants/departments';
 import { useClickOutside } from '../../../hooks/common-hooks';
 import { getLocale } from '../../../lang';
 
@@ -83,7 +83,7 @@ function DepartmentSingleSelectFilter(props) {
         <span className="dtable-font dtable-icon-down3"></span>
       </div>
       {isShowSelector &&
-        <DepartmentEditor
+        <DepartmentSingleSelectEditor
           enableSelectRange={false}
           column={column}
           value={value}

src/DTableFiltersPopover/widgets/department-select-filter/department-multiple-select-filter.js

@@ -3,27 +3,15 @@ import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
 import { DEFAULT_DATE_FORMAT } from 'dtable-utils';
 import dayjs from '../utils/dayjs';
-import Large from './lg';
-import Small from './sm';
+import PCDateEditor from './pc-editor';
+import MBDateEditor from './mb-editor';
 
 import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/en-gb';
 
 import './index.css';
 
-const propTypes = {
-  isReadOnly: PropTypes.bool,
-  isInModal: PropTypes.bool,
-  value: PropTypes.string,
-  lang: PropTypes.string,
-  className: PropTypes.string,
-  column: PropTypes.object.isRequired,
-  onCommit: PropTypes.func.isRequired,
-  onClose: PropTypes.func,
-  firstDayOfWeek: PropTypes.string,
-};
-
-const DateEditor = forwardRef(({ lang, isReadOnly, column, className, isInModal, firstDayOfWeek, size, value: oldValue, hideCalendar, onCommit }, ref) => {
+const DateEditor = forwardRef(({ isMobile, lang, isReadOnly, column, className, isInModal, firstDayOfWeek, size, value: oldValue, hideCalendar, onCommit }, ref) => {
   const [isDateInit, setDateInit] = useState(false);
   const [value, setValue] = useState(oldValue || '');
 
@@ -58,21 +46,32 @@ const DateEditor = forwardRef(({ lang, isReadOnly, column, className, isInModal,
     onClose: hideCalendar,
   };
 
-  if (size === 'lg') return (<Large { ...props } isInModal={isInModal} ref={ref} />);
-  if (size === 'sm') return (<Small { ...props } isReadOnly={isReadOnly} column={column} ref={ref} />);
+  if (isMobile === false) return (<PCDateEditor { ...props } isInModal={isInModal} ref={ref} />);
+  if (isMobile === true) return (<MBDateEditor { ...props } isReadOnly={isReadOnly} column={column} ref={ref} />);
 
   return (
     <>
       <MediaQuery query={'(min-width: 768px)'}>
-        <Large { ...props } isInModal={isInModal} ref={ref} />
+        <PCDateEditor { ...props } isInModal={isInModal} ref={ref} />
       </MediaQuery>
-      <MediaQuery query={'(max-width: 767.8px)'}>
-        <Small { ...props } isReadOnly={isReadOnly} column={column} ref={ref} />
+      <MediaQuery query={'(max-width: 768px)'}>
+        <MBDateEditor { ...props } isReadOnly={isReadOnly} column={column} ref={ref} />
       </MediaQuery>
     </>
   );
 });
 
-DateEditor.propTypes = propTypes;
+DateEditor.propTypes = {
+  isMobile: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isInModal: PropTypes.bool,
+  value: PropTypes.string,
+  lang: PropTypes.string,
+  className: PropTypes.string,
+  column: PropTypes.object.isRequired,
+  onCommit: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
+  firstDayOfWeek: PropTypes.string,
+};
 
 export default DateEditor;