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/switch/index.css

@@ -0,0 +1,23 @@
+.seahub-switch .custom-switch {
+  cursor: pointer;
+}
+
+.seahub-switch.small .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.seahub-switch.small .custom-switch-indicator.disabled {
+  cursor: default;
+}
+
+.seahub-switch.small .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}
+
+.seahub-switch.small .custom-switch-input:checked~.custom-switch-indicator:before {
+  left: 12px;
+}

frontend/src/components/switch/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import './index.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;