feat: add customTagRender combobox

goto · Jan 23, 2025 · f960306 · f960306
1 parent f9a005a
commit f960306
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 20 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.11.4",
+    "version": "0.11.5-alpha.0",
     "command": {
         "version": {
             "message": "chore(release): publish %s"

diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.11.4",
+    "version": "0.11.5-alpha.0",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",

diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.11.4",
+    "version": "0.11.5-alpha.0",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <[email protected]>",
     "license": "Apache-2.0",

diff --git a/packages/apsara-ui/src/Combobox/Combobox.stories.tsx b/packages/apsara-ui/src/Combobox/Combobox.stories.tsx
@@ -1,16 +1,15 @@
 import React, { useState } from "react";
 import { SelectProps } from "rc-select";
 
-import Combobox from "./Combobox";
+import Combobox, { customTagRender } from "./Combobox";
 
 export default {
     title: "General/Combobox",
     component: Combobox,
     argTypes: { mode: { control: "select", options: ["multiple", "tags", "combobox", undefined] } },
 };
 
-
-type SelectOptionType = SelectProps['options'];
+type SelectOptionType = SelectProps["options"];
 const options: SelectOptionType = [
     { value: "2", label: "pilotdata-integration:bq_smoke_test_json_insert_all_dataset - Bigquery Dataset" },
     { value: "3", label: "Ford Raptor" },
@@ -25,7 +24,9 @@ const options: SelectOptionType = [
     { value: "12", label: "Suzuki Samurai" },
 ];
 
-const Template = (args: SelectProps) => <Combobox {...args} />;
+const Template = (args: SelectProps) => (
+    <Combobox tagRender={(props) => customTagRender({ ...props, className: "testing" })} {...args} />
+);
 
 export const MultiSelectWithSearch = Template.bind({});
 MultiSelectWithSearch.args = {
@@ -41,21 +42,15 @@ MultiSelectWithSearch.args = {
 export const WithAsyncOptions = () => {
     const [isSearching, setIsSearching] = useState<boolean>(false);
     const [opts, setOpts] = useState<SelectOptionType>();
-    
+
     const search = (q: string) => {
         setIsSearching(true);
         setOpts(undefined);
         setTimeout(() => {
-            setOpts(options.filter((o) => (o.label as string).includes(q)))
+            setOpts(options.filter((o) => (o.label as string).includes(q)));
             setIsSearching(false);
         }, 1000);
-    }
-
-    return <Combobox
-        options={opts}
-        allowClear
-        optionFilterProp="label"
-        onSearch={search}
-        loading={isSearching}
-    />
+    };
+
+    return <Combobox options={opts} allowClear optionFilterProp="label" onSearch={search} loading={isSearching} />;
 };
diff --git a/packages/apsara-ui/src/Combobox/Combobox.styles.tsx b/packages/apsara-ui/src/Combobox/Combobox.styles.tsx
@@ -244,6 +244,10 @@ export const StyledMultiSelect = styled(Select)<{ showInputIcon?: boolean }>`
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        &.error {
+            border: 1px solid #ff4d4f !important;
+            color: #ff4d4f !important;
+        }
 
         ${({ mode, theme }) =>
             mode == "multiple" || mode == "tags"

diff --git a/packages/apsara-ui/src/Combobox/Combobox.tsx b/packages/apsara-ui/src/Combobox/Combobox.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, HTMLAttributes } from "react";
 import Select, { SelectProps, OptGroup, Option } from "rc-select";
 import { NotFoundContent, StyledMultiSelect } from "./Combobox.styles";
 import { useState } from "react";
 import Icon from "../Icon";
+import { CustomTagProps } from "rc-select/lib/interface/generator";
 
 const SearchIcon = <Icon name="search" size={20} color="#aaa" />;
 const ArrowIcon = <Icon name="chevronright" color="#aaa" />;
@@ -20,6 +21,32 @@ const loadingContent = (
     </NotFoundContent>
 );
 
+type CustomTagRenderProps = CustomTagProps &
+    HTMLAttributes<HTMLSpanElement> & {
+        isError?: boolean;
+    };
+
+export const customTagRender = (props: CustomTagRenderProps) => {
+    const { label, closable, onClose, isError, className = "", ...restProps } = props;
+
+    return (
+        <span className={`rc-select-selection-item ${className} ${isError ? "error" : ""}`} {...restProps}>
+            <span className="rc-select-selection-item-content">{label}</span>
+            {closable && (
+                <span
+                    className="rc-select-selection-item-remove"
+                    unselectable="on"
+                    aria-hidden="true"
+                    style={{ userSelect: "none" }}
+                    onClick={onClose}
+                >
+                    <span className="rc-select-selection-item-remove-icon">×</span>
+                </span>
+            )}
+        </span>
+    );
+};
+
 const Combobox = forwardRef<Select<unknown>, SelectProps>((props, ref) => {
     const {
         options,

diff --git a/packages/apsara-ui/src/Combobox/index.tsx b/packages/apsara-ui/src/Combobox/index.tsx
@@ -1,3 +1,4 @@
-import Combobox from "./Combobox";
+import Combobox, { customTagRender } from "./Combobox";
 
+export { customTagRender };
 export default Combobox;