add default item to dropdown (#389)

massalabs · Jan 22, 2024 · e64e451 · e64e451
1 parent eb50ac5
commit e64e451
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -171,6 +171,24 @@ export const _Dropdown = {
 
         <br />
 
+        <Dropdown
+          size={'xs'}
+          options={[
+            {
+              icon: (
+                <MassaToken size={16} className="bg-c-default rounded-full" />
+              ),
+              item: 'MAS',
+              onClick: () => console.log('option 1'),
+            },
+            { icon: <MassaLogo size={16} />, item: 'MAS' },
+            { icon: <MassaLogo size={16} />, item: 'MAS' },
+          ]}
+          defaultItem={{ item: 'Select a token' }}
+        />
+
+        <br />
+
         <Dropdown
           size={'xs'}
           readOnly={true}

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -12,25 +12,32 @@ interface IOption extends ComponentPropsWithoutRef<'div'> {
   select?: number;
 }
 
-interface IDropdownProps extends ComponentPropsWithoutRef<'div'> {
+interface DropdownProps extends ComponentPropsWithoutRef<'div'> {
   options: IOption[];
   size?: 'xs' | 'md';
   select?: number;
   readOnly?: boolean;
+  defaultItem?: IOption;
 }
 
 function Icon({ toggle }: { toggle: boolean }) {
-  let IconclassName = 'max-w-fit stroke-current';
+  let IconClassName = 'max-w-fit stroke-current';
 
   return toggle ? (
-    <FiChevronUp className={IconclassName} />
+    <FiChevronUp className={IconClassName} />
   ) : (
-    <FiChevronDown className={IconclassName} />
+    <FiChevronDown className={IconClassName} />
   );
 }
 
-export function Dropdown(props: IDropdownProps) {
-  let { size = 'md', select = 0, options, readOnly = false } = props;
+export function Dropdown(props: DropdownProps) {
+  let {
+    size = 'md',
+    select = 0,
+    options,
+    readOnly = false,
+    defaultItem,
+  } = props;
 
   const ref = useRef(null);
 
@@ -51,7 +58,7 @@ export function Dropdown(props: IDropdownProps) {
 
   const firstObject = options[select];
   const [toggle, setToggle] = useState(false);
-  const [selected, setSelected] = useState(firstObject);
+  const [selected, setSelected] = useState(defaultItem ?? firstObject);
   const hidden = toggle ? '' : 'hidden';
 
   useClickOutside(ref, () => {
@@ -60,7 +67,7 @@ export function Dropdown(props: IDropdownProps) {
 
   // refresh the selected item when the select prop changes
   useEffect(() => {
-    setSelected(options[select]);
+    setSelected(defaultItem ?? options[select]);
   }, [select, options]);
 
   const customButtonClass = classes[size].button;