feat: AsyncUserSelect

Author: renjie-run

.babelrc

@@ -1,13 +1,40 @@
 {
   "env": {
     "test": {
-      "presets": [["react-app", {"absoluteRuntime" : false, "BABEL_ENV" : "test"}]]
+      "presets": [
+        [
+          "react-app",
+          {
+            "absoluteRuntime": false,
+            "runtime": "automatic",
+            "BABEL_ENV": "test"
+          }
+        ]
+      ]
     },
     "development": {
-      "presets": [["react-app", {"absoluteRuntime" : false, "BABEL_ENV" : "development"}]]
+      "presets": [
+        [
+          "react-app",
+          {
+            "absoluteRuntime": false,
+            "runtime": "automatic",
+            "BABEL_ENV": "development"
+          }
+        ]
+      ]
     },
     "production": {
-      "presets": [["react-app", {"absoluteRuntime" : false, "BABEL_ENV" : "production"}]]
+      "presets": [
+        [
+          "react-app",
+          {
+            "absoluteRuntime": false,
+            "runtime": "automatic",
+            "BABEL_ENV": "production"
+          }
+        ]
+      ]
     },
     "node": {
       "presets": [

package-lock.json

@@ -6,7 +6,7 @@
     "@seafile/react-image-lightbox": "4.0.2",
     "@seafile/seafile-calendar": "0.0.31",
     "@seafile/seafile-editor": "~2.0.14",
-    "classnames": "2.3.2",
+    "classnames": "~2.5.*",
     "dayjs": "1.10.7",
     "dtable-utils": "~5.0.22",
     "is-hotkey": "0.2.0",

package.json

@@ -0,0 +1,120 @@
+.dtable-ui-selected-users-container {
+  flex-wrap: wrap;
+  min-height: 38px;
+  max-width: calc(100% - 10px);
+}
+
+.dtable-ui-selected-users-container .dtable-ui-user-select-placeholder {
+  color: #808080;
+}
+
+.dtable-ui-user-select-popover .popover {
+  width: 385px;
+  max-width: 385px;
+}
+
+.dtable-ui-user-select-container {
+  position: relative;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-search-container {
+  padding: 10px 10px 0 10px;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-search-container input {
+  height: 28px;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-list-container {
+  min-height: 160px;
+  max-height: 200px;
+  margin: 10px 0;
+  overflow: auto;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  padding: 0 10px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container:hover,
+.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container-highlight {
+  background: #f5f5f5;
+  cursor: pointer;
+}
+
+.no-user-search-result {
+  color: #666666;
+  font-size: 14px;
+  padding-left: 10px;
+  padding: 10px;
+  overflow: auto;
+}
+
+.dtable-ui-user-select-popover .popover .dtable-ui-user-item {
+  background: transparent;
+}
+
+.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check-mark {
+  color: #798d99;
+  font-size: 12px;
+}
+
+/* user-item */
+.dtable-ui-user-item {
+  display: inline-flex;
+  align-items: center;
+  margin: 2px 10px 2px 0;
+  padding: 0 8px 0 2px;
+  height: 20px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #eaeaea;
+}
+
+.dtable-ui-user-item .user-item .user-avatar img {
+  width: 16px;
+  height: 16px;
+}
+
+.dtable-ui-user-item .user-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(0);
+  flex-shrink: 0;
+}
+
+.dtable-ui-user-item .user-name {
+  margin-left: 5px;
+}
+
+.dtable-ui-user-item .user-avatar img {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+
+.dtable-ui-user-item .user-remove {
+  display: inline-block;
+  width: 14px;
+  margin: 0 -2px 0 2px;
+}
+
+.dtable-ui-user-item .user-remove .dtable-font {
+  display: inline-block;
+  font-size: 16px;
+  color: #909090;
+  transform: scale(.8);
+  cursor: pointer;
+}
+
+.dtable-ui-user-item .user-remove .dtable-font:hover {
+  color: #666666;
+  cursor: pointer;
+}