optimize code

Author: shuntian

src/DTableColorPicker/index.js

@@ -34,8 +34,7 @@ const RGB_COLORS_MAP = {
 
 const LOCAL_STORAGE_KEY = 'dtable-color-picker';
 
-const DTableColorPicker = forwardRef((props, ref) => {
-  const { onToggle, popoverStyle, color, defaultColors, useProtal, target, scrollContainerId, throttleDelay = 20 } = props;
+const DTableColorPicker = forwardRef(({ onToggle, popoverStyle, color = '#ffffff', defaultColors, useProtal, target, scrollContainerId, throttleDelay = 20, onSubmit }, ref) => {
   const initialRgbaColor = hexToRgba(color);
   const [value, setValue] = useState(initialRgbaColor);
   const [hexVal, setHexVal] = useState(getInitialHexVal(color));
@@ -170,7 +169,7 @@ const DTableColorPicker = forwardRef((props, ref) => {
   const updateValue = (newValue) => {
     setValue(newValue);
     const submitHex = rgbaToHex(newValue);
-    props.onSubmit(submitHex);
+    onSubmit(submitHex);
   };
 
   const onAlphaInputBlur = () => {
@@ -390,8 +389,4 @@ DTableColorPicker.propTypes = {
   throttleDelay: PropTypes.number,
 };
 
-DTableColorPicker.defaultProps = {
-  color: '#ffffff',
-};
-
 export default DTableColorPicker;

src/DTablePopover/index.js

@@ -5,6 +5,12 @@ import { getEventClassName } from '../utils/utils';
 
 class DTablePopover extends React.Component {
 
+  static defaultProps = {
+    placement: 'bottom-start',
+    hideArrow: true,
+    canHideDTablePopover: true
+  };
+
   dtablePopoverRef = null;
 
   componentDidMount() {
@@ -69,12 +75,6 @@ class DTablePopover extends React.Component {
   }
 }
 
-DTablePopover.defaultProps = {
-  placement: 'bottom-start',
-  hideArrow: true,
-  canHideDTablePopover: true
-};
-
 DTablePopover.propTypes = {
   target: PropTypes.string.isRequired,
   innerClassName: PropTypes.string,

src/DTableRadio/index.js

@@ -4,32 +4,39 @@ import classnames from 'classnames';
 
 import './index.css';
 
-function DTableRadio(props) {
-  const { className } = props;
+function DTableRadio({
+  disabled = false,
+  name = 'dtable-radio-input',
+  onCheckedChange = () => {},
+  className,
+  isChecked,
+  value,
+  label
+}) {
 
   return (
     <label
       className={classnames('dtable-radio w-100 align-items-center', {
-        'dtable-radio-disable': props.disabled,
+        'dtable-radio-disable': disabled,
         [className]: className
       })}
     >
       <input
         type="radio"
         className="dtable-radio-input position-absolute"
-        checked={props.isChecked}
-        onChange={props.disabled ? () => {} : props.onCheckedChange}
-        name={props.name}
-        value={props.value}
+        checked={isChecked}
+        onChange={disabled ? () => {} : onCheckedChange}
+        name={name}
+        value={value}
       />
       <span
         className={classnames('dtable-radio-indicator position-relative', {
-          'dtable-radio-selected-indicator': props.isChecked,
-          'dtable-radio-indicator-disable': props.disabled
+          'dtable-radio-selected-indicator': isChecked,
+          'dtable-radio-indicator-disable': disabled
         })}
       >
       </span>
-      <span className="dtable-radio-description text-truncate ml-2">{props.label}</span>
+      <span className="dtable-radio-description text-truncate ml-2">{label}</span>
     </label>
   );
 }
@@ -44,10 +51,4 @@ DTableRadio.propTypes = {
   onCheckedChange: PropTypes.func,
 };
 
-DTableRadio.defaultProps = {
-  disabled: false,
-  name: 'dtable-radio-input',
-  onCheckedChange: () => {}
-};
-
 export default DTableRadio;

src/DTableSearchInput/index.js

@@ -15,6 +15,12 @@ class DtableSearchInput extends Component {
     this.inputRef = null;
   }
 
+  static defaultProps = {
+    wait: 100,
+    disabled: false,
+    value: '',
+  };
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
       this.setState({ searchValue: nextProps.value });
@@ -121,10 +127,4 @@ DtableSearchInput.propTypes = {
   value: PropTypes.string,
 };
 
-DtableSearchInput.defaultProps = {
-  wait: 100,
-  disabled: false,
-  value: '',
-};
-
 export default DtableSearchInput;

src/DTableSelect/dtable-select-label.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import './dtable-select-label.css';
 
-function DTableSelectLabel({ classname, name, isSelect }) {
+function DTableSelectLabel({ classname = '', name = '', isSelect = false }) {
   return (
     <div className={`${classname} w-100 d-flex justify-content-between`}>
       <span>{name}</span>
@@ -22,10 +22,4 @@ DTableSelectLabel.propTypes = {
   isSelect: PropTypes.bool,
 };
 
-DTableSelectLabel.defaultProps = {
-  classname: '',
-  name: '',
-  isSelect: false,
-};
-
 export default DTableSelectLabel;

src/DTableSwitch/index.js

@@ -5,8 +5,7 @@ import { generatorBase64Code } from 'dtable-utils';
 
 import './index.css';
 
-function DTableSwitch(props) {
-  const { onChange, checked, placeholder, disabled, size, switchPosition, switchClassName } = props;
+function DTableSwitch({ onChange, checked = false, placeholder, disabled, size = 'sm', switchPosition = 'right', switchClassName }) {
   const switchNode = <span className="custom-switch-indicator"></span>;
   const textNode = <span className="custom-switch-description text-truncate">{placeholder}</span>;
   return (
@@ -35,12 +34,6 @@ function DTableSwitch(props) {
   );
 }
 
-DTableSwitch.defaultProps = {
-  checked: false,
-  size: 'sm',
-  switchPosition: 'right',
-};
-
 DTableSwitch.propTypes = {
   checked: PropTypes.bool,
   size: PropTypes.string, // 'sm || lg'

src/Department-editor/selected-departments/index.js

@@ -6,8 +6,7 @@ import { getLocale } from '../../lang';
 
 import './index.css';
 
-function SelectedDepartments(props) {
-  const { value, removeDepartment, isShowRemoveIcon, departments } = props;
+function SelectedDepartments({ value, removeDepartment, isShowRemoveIcon = false, departments = [] }) {
 
   const idDepartmentMap = useMemo(() => {
     let idDepartmentMap = {};
@@ -65,11 +64,6 @@ function SelectedDepartments(props) {
   return dom;
 }
 
-SelectedDepartments.defaultProps = {
-  isShowRemoveIcon: false,
-  departments: [],
-};
-
 SelectedDepartments.propTypes = {
   isShowRemoveIcon: PropTypes.bool,
   value: PropTypes.array,