refactor(metadata): remove ui-component (#7492)

1. ModalPortal
2. Icon
3. IconBtn
4. Loading
5. CenteredLoading
6. ClickOutside
7. SearchInput
8. Switch
9. CustomizeAddTool
10. SfCalendar
11. SfFilterCalendar
12. CustomizeSelect
13. CustomizePopover
14. FieldDisplaySettings
15. Formatters
16. remove duplicate codes

frontend/src/components/common/common-add-tool.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import '../../css/common-add-tool.css';
-
-function CommonAddTool(props) {
-  const { callBack, footerName, className, addIconClassName } = props;
-  return (
-    <div className={`add-item-btn ${className ? className : ''}`} onClick={(e) => {callBack(e);}}>
-      <span className={`sf3-font sf3-font-enlarge mr-2 ${addIconClassName || ''}`}></span>
-      <span className='add-new-option' title={footerName}>{footerName}</span>
-    </div>
-  );
-}
-
-CommonAddTool.propTypes = {
-  className: PropTypes.string,
-  addIconClassName: PropTypes.string,
-  footerName: PropTypes.string.isRequired,
-  callBack: PropTypes.func.isRequired,
-};
-
-export default CommonAddTool;

frontend/src/components/common/group-select/click-outside.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class ClickOutside extends React.Component {
-
-  isClickedInside = false;
-
-  componentDidMount() {
-    document.addEventListener('mousedown', this.handleDocumentClick);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleDocumentClick);
-  }
-
-  handleDocumentClick = (e) => {
-    if (this.isClickedInside) {
-      this.isClickedInside = false;
-      return;
-    }
-
-    this.props.onClickOutside(e);
-  };
-
-  handleMouseDown = () => {
-    this.isClickedInside = true;
-  };
-
-  render() {
-    return React.cloneElement(
-      React.Children.only(this.props.children), {
-        onMouseDownCapture: this.handleMouseDown
-      }
-    );
-  }
-}
-
-ClickOutside.propTypes = {
-  children: PropTypes.element.isRequired,
-  onClickOutside: PropTypes.func.isRequired,
-};
-
-export default ClickOutside;

frontend/src/components/common/group-select/select-option-group.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import SearchInput from '../search-input';
+import SearchInput from '../../search-input';
+import ClickOutside from '../../click-outside';
 import Option from './option';
 import KeyCodes from '../../../constants/keyCodes';
-import ClickOutside from './click-outside';
 
 import './select-option-group.css';
 

frontend/src/components/common/seahub-popover.js

@@ -1,101 +0,0 @@
-import React from 'react';
-import { Popover } from 'reactstrap';
-import PropTypes from 'prop-types';
-import { KeyCodes } from '../../constants';
-
-const propTypes = {
-  target: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-  boundariesElement: PropTypes.object,
-  innerClassName: PropTypes.string,
-  popoverClassName: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  hideSeahubPopover: PropTypes.func.isRequired,
-  hideSeahubPopoverWithEsc: PropTypes.func,
-  hideArrow: PropTypes.bool,
-  canHideSeahubPopover: PropTypes.bool,
-  placement: PropTypes.string,
-  modifiers: PropTypes.object
-};
-
-class SeahubPopover extends React.Component {
-
-  SeahubPopoverRef = null;
-  isSelectOpen = false;
-
-  componentDidMount() {
-    document.addEventListener('mousedown', this.onMouseDown);
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onMouseDown);
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-
-  getEventClassName = (e) => {
-    // svg mouseEvent event.target.className is an object
-    if (!e || !e.target) return '';
-    return e.target.getAttribute('class') || '';
-  };
-
-  onKeyDown = (e) => {
-    const { canHideSeahubPopover, hideSeahubPopoverWithEsc } = this.props;
-    if (e.keyCode === KeyCodes.Escape && typeof hideSeahubPopoverWithEsc === 'function' && !this.isSelectOpen) {
-      e.preventDefault();
-      hideSeahubPopoverWithEsc();
-    } else if (e.keyCode === KeyCodes.Enter) {
-      // Resolve the default behavior of the enter key when entering formulas is blocked
-      if (canHideSeahubPopover) return;
-      e.stopImmediatePropagation();
-    }
-  };
-
-  onMouseDown = (e) => {
-    if (!this.props.canHideSeahubPopover) return;
-    if (this.SeahubPopoverRef && e && this.getEventClassName(e).indexOf('popover') === -1 && !this.SeahubPopoverRef.contains(e.target)) {
-      this.props.hideSeahubPopover(e);
-    }
-  };
-
-  onPopoverInsideClick = (e) => {
-    e.stopPropagation();
-  };
-
-  render() {
-    const {
-      target, boundariesElement, innerClassName, popoverClassName, hideArrow, modifiers,
-      placement,
-    } = this.props;
-    let additionalProps = {};
-    if (boundariesElement) {
-      additionalProps.boundariesElement = boundariesElement;
-    }
-    return (
-      <Popover
-        placement={placement}
-        isOpen={true}
-        target={target}
-        fade={false}
-        hideArrow={hideArrow}
-        innerClassName={innerClassName}
-        className={popoverClassName}
-        modifiers={modifiers}
-        {...additionalProps}
-      >
-        <div ref={ref => this.SeahubPopoverRef = ref} onClick={this.onPopoverInsideClick}>
-          {this.props.children}
-        </div>
-      </Popover>
-    );
-  }
-}
-
-SeahubPopover.defaultProps = {
-  placement: 'bottom-start',
-  hideArrow: true,
-  canHideSeahubPopover: true
-};
-
-SeahubPopover.propTypes = propTypes;
-
-export default SeahubPopover;

frontend/src/components/common/search-input.js

@@ -1,140 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Utils } from '../../utils/utils';
-
-const propTypes = {
-  placeholder: PropTypes.string,
-  autoFocus: PropTypes.bool,
-  className: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onKeyDown: PropTypes.func,
-  wait: PropTypes.number,
-  disabled: PropTypes.bool,
-  style: PropTypes.object,
-  isClearable: PropTypes.bool,
-  clearValue: PropTypes.func,
-  clearClassName: PropTypes.string,
-  components: PropTypes.object,
-  value: PropTypes.string,
-};
-
-class SearchInput extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchValue: props.value,
-    };
-    this.isInputtingChinese = false;
-    this.timer = null;
-    this.inputRef = null;
-  }
-
-  componentDidMount() {
-    if (this.props.autoFocus && this.inputRef && this.inputRef !== document.activeElement) {
-      setTimeout(() => {
-        this.inputRef.focus();
-      }, 0);
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.value !== this.props.value) {
-      this.setState({ searchValue: nextProps.value });
-    }
-  }
-
-  componentWillUnmount() {
-    this.timer && clearTimeout(this.timer);
-    this.timer = null;
-    this.inputRef = null;
-  }
-
-  onCompositionStart = () => {
-    this.isInputtingChinese = true;
-  };
-
-  onChange = (e) => {
-    this.timer && clearTimeout(this.timer);
-    const { onChange, wait } = this.props;
-    let text = e.target.value;
-    this.setState({ searchValue: text || '' }, () => {
-      if (this.isInputtingChinese) return;
-      this.timer = setTimeout(() => {
-        onChange && onChange(this.state.searchValue.trim());
-      }, wait);
-    });
-  };
-
-  onCompositionEnd = (e) => {
-    this.isInputtingChinese = false;
-    this.onChange(e);
-  };
-
-  clearSearch = () => {
-    const { clearValue } = this.props;
-    this.setState({ searchValue: '' }, () => {
-      clearValue && clearValue();
-    });
-  };
-
-  setFocus = (isSelectAllText) => {
-    if (this.inputRef === document.activeElement) return;
-    this.inputRef.focus();
-    if (isSelectAllText) {
-      const txtLength = this.state.searchValue.length;
-      this.inputRef.setSelectionRange(0, txtLength);
-    }
-  };
-
-  renderClear = () => {
-    const { isClearable, clearClassName, components = {} } = this.props;
-    const { searchValue } = this.state;
-    if (!isClearable || !searchValue) return null;
-    const { ClearIndicator } = components;
-    if (React.isValidElement(ClearIndicator)) {
-      return React.cloneElement(ClearIndicator, { clearValue: this.clearSearch });
-    } else if (Utils.isFunction(ClearIndicator)) {
-      return <ClearIndicator clearValue={this.clearSearch} />;
-    }
-    return (
-      <i className={classnames('search-text-clear input-icon-addon', clearClassName)} onClick={this.clearSearch}>×</i>
-    );
-  };
-
-  render() {
-    const { placeholder, autoFocus, className, onKeyDown, disabled, style } = this.props;
-    const { searchValue } = this.state;
-
-    return (
-      <Fragment>
-        <input
-          type="text"
-          value={searchValue}
-          className={classnames('form-control', className)}
-          onChange={this.onChange}
-          autoFocus={autoFocus}
-          placeholder={placeholder}
-          onCompositionStart={this.onCompositionStart}
-          onCompositionEnd={this.onCompositionEnd}
-          onKeyDown={onKeyDown}
-          disabled={disabled}
-          style={style}
-          ref={ref => this.inputRef = ref}
-        />
-        {this.renderClear()}
-      </Fragment>
-    );
-  }
-}
-
-SearchInput.propTypes = propTypes;
-
-SearchInput.defaultProps = {
-  wait: 100,
-  disabled: false,
-  value: '',
-};
-
-export default SearchInput;

frontend/src/components/common/switch/index.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import '../../../css/switch.css';
-
-function Switch({ onChange, checked, placeholder, disabled, className, size, textPosition = 'left', setRef }) {
-  return (
-    <div className={classnames('seahub-switch position-relative', className, size)} ref={setRef}>
-      <label className="custom-switch">
-        <input
-          className="custom-switch-input"
-          type="checkbox"
-          checked={checked}
-          onChange={onChange}
-          name="custom-switch-checkbox"
-          disabled={disabled}
-        />
-        {textPosition === 'left' &&
-          <span className="custom-switch-description text-truncate">{placeholder}</span>
-        }
-        <span className={classnames('custom-switch-indicator', { 'disabled': disabled })}></span>
-        {textPosition === 'right' &&
-          <span className="custom-switch-description text-truncate">{placeholder}</span>
-        }
-      </label>
-    </div>
-  );
-}
-
-Switch.propTypes = {
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  className: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'small', undefined]),
-  textPosition: PropTypes.oneOf(['left', 'right', undefined]),
-  onChange: PropTypes.func,
-  setRef: PropTypes.func
-};
-
-export default Switch;