feat(multi select): add title (#717)

ayasofyazilim-clomerce · Jan 9, 2025 · 2967602 · 2967602
2 parents 1ed97a2 + 0236171
commit 2967602
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/molecules/multi-select/index.tsx b/src/molecules/multi-select/index.tsx
@@ -118,7 +118,6 @@ export interface MultiSelectProps
    * Optional, defaults to "Select options".
    */
   placeholder?: string;
-  title?: string;
 }
 
 export const MultiSelect = React.forwardRef<
@@ -136,7 +135,6 @@ export const MultiSelect = React.forwardRef<
       maxCount = 3,
       modalPopover = false,
       className,
-      title,
       ...props
     },
     ref
@@ -208,7 +206,6 @@ export const MultiSelect = React.forwardRef<
         onOpenChange={setIsPopoverOpen}
         modal={modalPopover}
       >
-        {title && <div className="text-sm font-medium">{title}</div>}
         <PopoverTrigger asChild className="w-full">
           <Button
             ref={ref}

diff --git a/src/organisms/schema-form/widgets/multi-select.tsx b/src/organisms/schema-form/widgets/multi-select.tsx
@@ -1,5 +1,7 @@
 import { WidgetProps } from '@rjsf/utils';
 import { MultiSelect, MultiSelectProps } from '../../../molecules/multi-select';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
 
 type CustomMultiSelectProps = Omit<MultiSelectProps, 'options' | 'onChange'> & {
   optionList: MultiSelectProps['options'];
@@ -8,7 +10,18 @@ type CustomMultiSelectProps = Omit<MultiSelectProps, 'options' | 'onChange'> & {
 export function CustomMultiSelect(
   props: CustomMultiSelectProps & Omit<WidgetProps, 'options'>
 ) {
-  const { value, defaultValue, uiSchema, optionList, onChange } = props;
+  const {
+    value,
+    defaultValue,
+    uiSchema,
+    optionList,
+    onChange,
+    id,
+    label,
+    required,
+    classNames,
+    displayLabel,
+  } = props;
   const fieldValue: string[] = Array.isArray(value)
     ? value
     : defaultValue || [];
@@ -18,7 +31,13 @@ export function CustomMultiSelect(
     uiSchema?.['ui:placeholder'] ||
     uiOptions?.['ui:placeholder'];
   return (
-    <div className="custom-multi-select-wrapper">
+    <div className={cn(uiSchema?.['ui:className'], classNames, 'w-full')}>
+      {label && displayLabel !== false && (
+        <Label htmlFor={id}>
+          {label}
+          {required ? <span className="text-destructive">*</span> : null}
+        </Label>
+      )}
       <MultiSelect
         {...props}
         defaultValue={fieldValue}