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/css/common-add-tool.css

@@ -1,26 +0,0 @@
-.add-item-btn {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-  border-top: 1px solid #dedede;
-  background: #fff;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  position: relative;
-  height: 30px;
-  padding: 0 10px;
-  overflow: hidden;
-}
-
-.add-item-btn:hover {
-  background-color: #f5f5f5;
-}
-
-.add-item-btn .add-new-option {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

frontend/src/css/icon.css

@@ -10,3 +10,7 @@
   fill: #444;
   color: #bdbdbd;
 }
+
+.sf-metadata-icon {
+  vertical-align: -0.15em;
+}

frontend/src/css/metadata-rc-calendar.css

@@ -0,0 +1,96 @@
+.sf-metadata-rc-calendar .rc-calendar-date {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  line-height: 30px;
+}
+
+.sf-metadata-rc-calendar table thead tr,
+.sf-metadata-rc-calendar .rc-calendar-tbody tr {
+  height: inherit;
+}
+
+.sf-metadata-rc-calendar .rc-calendar-cell {
+  font-size: 12px;
+}
+
+.sf-metadata-rc-calendar .rc-calendar-date-panel {
+  width: 253px;
+}
+
+.sf-metadata-rc-calendar .rc-calendar-selected-day .rc-calendar-date {
+  background-color: #fcecd9;
+}
+
+.sf-metadata-rc-calendar .rc-calendar-date:hover,
+.sf-metadata-rc-calendar .rc-calendar-year-panel-year:hover,
+.sf-metadata-rc-calendar .rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
+  background-color: #fcecd9;
+}
+
+.sf-metadata-rc-calendar .rc-calendar-selected-date .rc-calendar-date,
+.sf-metadata-rc-calendar .rc-calendar-selected-date .rc-calendar-date:hover,
+.sf-metadata-rc-calendar .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year,
+.sf-metadata-rc-calendar .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
+  background-color: #f09f3f;
+}
+
+.sf-metadata-rc-calendar .rc-calendar-next-year-btn:not([href]):not([tabindex]),
+.sf-metadata-rc-calendar .rc-calendar-prev-year-btn:not([href]):not([tabindex]),
+.sf-metadata-rc-calendar .rc-calendar-next-month-btn:not([href]):not([tabindex]),
+.sf-metadata-rc-calendar .rc-calendar-prev-month-btn:not([href]):not([tabindex]) {
+  color: #666666;
+}
+
+.sf-metadata-rc-calendar .rc-calendar-next-year-btn:not([href]):not([tabindex]):hover,
+.sf-metadata-rc-calendar .rc-calendar-prev-year-btn:not([href]):not([tabindex]):hover,
+.sf-metadata-rc-calendar .rc-calendar-next-month-btn:not([href]):not([tabindex]):hover,
+.sf-metadata-rc-calendar .rc-calendar-prev-month-btn:not([href]):not([tabindex]):hover {
+  color: #666666;
+}
+
+.sf-metadata-rc-calendar .rc-calendar-today .rc-calendar-date {
+  border: none;
+  position: relative;
+}
+
+.sf-metadata-rc-calendar .rc-calendar-today .rc-calendar-date::after {
+  content: '';
+  background: #f09f3f;
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  left: 45%;
+  bottom: 0%;
+  display: inline-block;
+}
+
+.sf-metadata-rc-calendar .rdg-editor-container input.editor-main[readonly] {
+  background-color: #fff;
+}
+
+.sf-metadata-rc-calendar .rc-calendar-time-picker {
+  z-index: 1;
+}
+
+.sf-metadata-rc-calendar .date-picker-container {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  line-height: 1.5;
+  margin-bottom: 22px;
+}
+
+.sf-metadata-rc-calendar .date-picker-container-row-expand {
+  margin-bottom: 0;
+  width: 320px;
+}
+
+.sf-metadata-rc-calendar .sf-metadata-rc-calendar-clear {
+  position: absolute;
+  top: 8px;
+  left: 225px;
+  fill: gray;
+  font-size: 12px;
+}

frontend/src/css/switch.css

@@ -1,23 +0,0 @@
-.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;
-}