feat: add formatter for select display value

abelflopes · Jul 11, 2024 · 5592dfb · 5592dfb
1 parent a89d5e8
commit 5592dfb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/packages/components/select/src/index.tsx b/packages/components/select/src/index.tsx
@@ -31,6 +31,7 @@ const Select = ({
   value: userValue,
   multiple: selectMultiple,
   defaultValue,
+  displayValueFormatter,
   ...props
 }: Readonly<SelectProps>): React.ReactElement => {
   const onNextRender = useNextRender();
@@ -60,7 +61,13 @@ const Select = ({
   );
 
   /** Returns the internal value always as an array to facilitate operations  */
-  const selectedValuesList = useMemo(() => valueAsArray(internalValue ?? []), [internalValue]);
+  const selectedValuesList = useMemo(
+    () =>
+      valueAsArray(internalValue ?? []).filter((i) =>
+        childrenData.map((c) => c.computedValue).includes(i),
+      ),
+    [childrenData, internalValue],
+  );
 
   const updateInternalValue = useCallback<ChangeHandler>(
     (value, mode) => {
@@ -121,6 +128,25 @@ const Select = ({
     [handleChange, selectedValuesList],
   );
 
+  /** Compute value label to display */
+
+  const displayValue = useMemo(() => {
+    if (selectedValuesList.length === 0) return undefined;
+
+    const displayValue = childrenData
+      .filter((i) => i.computedValue && selectedValuesList.includes(i.computedValue))
+      .map((i) => i.textContent)
+      .join(", ");
+
+    return displayValueFormatter
+      ? displayValueFormatter({
+          selectedValues: selectedValuesList,
+          childrenData,
+          displayValue,
+        })
+      : displayValue;
+  }, [childrenData, displayValueFormatter, selectedValuesList]);
+
   /** Actions to do when dropdown opens  */
   useEffect(() => {
     if (!open) return;
@@ -189,14 +215,7 @@ const Select = ({
           handleBlur();
           onBlur?.(e);
         }}>
-        {selectedValuesList.length > 0 &&
-          childrenData
-            .filter((i) => i.computedValue && selectedValuesList.includes(i.computedValue))
-            .map((i) => i.textContent)
-            .join(", ")}
-        {selectedValuesList.length === 0 && (
-          <span className={styles.placeholder}>{placeholder}</span>
-        )}
+        {displayValue || <span className={styles.placeholder}>{placeholder}</span>}
       </div>
 
       <Dropdown

diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
@@ -21,6 +21,11 @@ export interface SelectProps
   defaultValue?: UserValue;
   name?: React.SelectHTMLAttributes<HTMLSelectElement>["name"];
   multiple?: React.SelectHTMLAttributes<HTMLSelectElement>["multiple"];
+  displayValueFormatter?: (data: {
+    displayValue: string;
+    selectedValues: string[];
+    childrenData: SelectChildrenData[];
+  }) => React.ReactNode;
 }
 
 export interface SelectOptionProps extends Omit<MenuItemProps, "skin"> {

diff --git a/packages/docs/stories/src/select.stories.tsx b/packages/docs/stories/src/select.stories.tsx
@@ -22,12 +22,14 @@ const meta: Meta<typeof Select> = {
 
 const args: SelectProps = {
   placeholder: "Select a fruit",
+  displayValueFormatter: ({ displayValue }) => displayValue.replace(" 🍋", ""),
   children: (
     <>
       <Select.Option value="Apple" disabled />
+      <Select.Option>Guaraná</Select.Option>
       <Select.Option value="bnn">Banana</Select.Option>
       <Select.Option value="orange">Orange</Select.Option>
-      <Select.Option value="lemon">Lemon</Select.Option>
+      <Select.Option value="lemon">Lemon 🍋</Select.Option>
       <Select.Option>
         <span>
           <b>Exotic</b> mango