init

2026-05-20 21:41:57 +00:00 · 2025-09-26 11:06:31 +07:00
parent a5524686a6
commit 2e1b0fef2b
36 changed files with 8716 additions and 79 deletions
@@ -0,0 +1,203 @@
+'use client';
+
+import { ComponentType, ReactNode, useMemo } from 'react';
+import Select, { OptionProps, GroupBase } from 'react-select';
+import makeAnimated from 'react-select/animated';
+
+import { cn } from '@/lib/helper';
+
+export interface OptionType {
+  value: string | number;
+  label: string;
+  className?: string; // for multi select
+  labelClassName?: string; // for multi select
+}
+
+export type OptionComponent<T = OptionType> = ComponentType<
+  OptionProps<T, boolean, GroupBase<T>>
+>;
+
+interface SelectInputProps<T = OptionType> {
+  label?: ReactNode;
+  bottomLabel?: ReactNode;
+  value?: T | T[];
+  onChange?: (val: T | T[] | null) => void;
+  options: T[];
+  optionComponent?: OptionComponent<T>;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  isClearable?: boolean;
+  isRtl?: boolean;
+  isSearchable?: boolean;
+  isMulti?: boolean;
+  placeholder?: string;
+  required?: boolean;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    select?: string;
+  };
+  isError?: boolean;
+  errorMessage?: string;
+  isAnimated?: boolean;
+  openMenu?: boolean;
+}
+
+const animatedComponents = makeAnimated();
+
+const SelectInput = <T extends OptionType>({
+  label,
+  bottomLabel,
+  value,
+  onChange,
+  options,
+  optionComponent,
+  isDisabled,
+  isLoading,
+  isClearable,
+  isRtl,
+  isSearchable = true,
+  isMulti,
+  placeholder,
+  required,
+  className,
+  isError,
+  errorMessage,
+  isAnimated = true,
+  openMenu,
+}: SelectInputProps) => {
+  const components = useMemo(() => {
+    const base = isAnimated ? animatedComponents : {};
+
+    return {
+      ...base,
+      IndicatorSeparator: () => null,
+    };
+  }, [isAnimated]);
+
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {label && (
+        <span
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            {
+              'text-error': isError,
+            },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <>
+              {' '}
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'> *</span>
+              </span>
+            </>
+          )}
+        </span>
+      )}
+
+      <Select
+        instanceId='select'
+        value={value}
+        onChange={(val) => onChange?.(val as T)}
+        options={options}
+        menuIsOpen={openMenu}
+        isMulti={isMulti}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        isClearable={isClearable}
+        isRtl={isRtl}
+        isSearchable={isSearchable}
+        placeholder={placeholder}
+        className={cn('w-full', className)}
+        classNames={{
+          control: ({ isFocused, isDisabled }) =>
+            cn(
+              'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+              {
+                'border-red-500! focus-within:border-red-500 focus-within:ring-2 focus-within:ring-red-200':
+                  isError,
+                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                'border-gray-300': !isError && !isFocused,
+                'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+              }
+            ),
+          valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+          placeholder: () =>
+            cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
+          singleValue: () =>
+            cn({ 'text-gray-900': !isError, 'text-error!': isError }),
+          input: () => cn('text-gray-900'),
+          indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
+          indicatorSeparator: () => cn('mx-1 h-4 w-px bg-gray-200'),
+          clearIndicator: () => cn('p-1 rounded-md hover:bg-gray-100'),
+          dropdownIndicator: ({ isFocused }) =>
+            cn('p-1 rounded-md hover:bg-gray-100', {
+              'text-gray-900': isFocused,
+              'text-gray-500': !isFocused,
+              'text-error!': isError,
+            }),
+          menu: () =>
+            cn(
+              'border border-gray-200 rounded-lg bg-white shadow-lg rounded-lg!'
+            ),
+          menuList: () => cn('p-2! max-h-60 overflow-auto'),
+          groupHeading: () =>
+            cn('ml-2 mt-2 mb-1 text-xs font-medium text-gray-500'),
+          option: ({ isFocused, isSelected, isDisabled }) =>
+            cn('mt-1 px-3 py-2 rounded-md cursor-pointer! select-none', {
+              'text-gray-300': isDisabled,
+              'bg-indigo-600 text-white': isFocused,
+              'text-gray-700': !isDisabled && !isFocused,
+              'active:bg-indigo-50': !isDisabled,
+              'bg-blue-500!': isSelected,
+            }),
+          noOptionsMessage: () => cn('px-3 py-2 text-gray-500'),
+          loadingMessage: () => cn('px-3 py-2 text-gray-500'),
+          multiValue: ({ getValue, index }) => {
+            const selectedValues = getValue();
+
+            return cn(
+              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1 rounded-md!',
+              selectedValues[index]?.className
+            );
+          },
+          multiValueLabel: ({ getValue, index }) => {
+            const selectedValues = getValue();
+
+            return cn('text-indigo-700', selectedValues[index]?.labelClassName);
+          },
+          multiValueRemove: () =>
+            cn('p-1 rounded-sm! hover:bg-indigo-100 hover:text-indigo-800'),
+        }}
+        components={{
+          ...components,
+          ...(optionComponent ? { Option: optionComponent } : {}),
+        }}
+        // make the menu float above modals/etc.
+        menuPortalTarget={
+          typeof document !== 'undefined' ? document.body : undefined
+        }
+        styles={{
+          // Tailwind can't set inline z-index on a portal; use styles here:
+          menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+        }}
+      />
+
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+    </div>
+  );
+};
+
+export default SelectInput;