fix(fields): add fixedWidth prop to MultiSelect (#33)

MTES-MCT · Nov 29, 2022 · bea7a83 · bea7a83
1 parent 586a44c
commit bea7a83
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
diff --git a/src/fields/MultiSelect.tsx b/src/fields/MultiSelect.tsx
@@ -8,11 +8,14 @@ import type { Promisable } from 'type-fest'
 
 export type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {
   defaultValue?: string[]
+  /** Width in REM */
+  fixedWidth?: number
   name: string
   onChange?: (nextValue: string[] | undefined) => Promisable<void>
   options: Option[]
 }
 export function MultiSelect({
+  fixedWidth = 5,
   onChange,
   options,
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -37,11 +40,25 @@ export function MultiSelect({
     [onChange]
   )
 
-  return <StyledTagPicker key={key} data={options} onChange={handleChange} searchable={searchable} {...originalProps} />
+  return (
+    <StyledTagPicker
+      key={key}
+      data={options}
+      fixedWidth={fixedWidth}
+      onChange={handleChange}
+      searchable={searchable}
+      {...originalProps}
+    />
+  )
 }
 
-const StyledTagPicker = styled(TagPicker)`
+// TODO A width seems to be mandatory in rsuite which is a very dirty behavior.
+// We should hack that.
+const StyledTagPicker = styled(TagPicker)<{
+  fixedWidth: number
+}>`
   cursor: pointer;
+  width: ${p => p.fixedWidth}rem;
 
   > .rs-picker-toggle {
     cursor: inherit;

diff --git a/stories/fields/MultiSelect.stories.tsx b/stories/fields/MultiSelect.stories.tsx
@@ -7,14 +7,15 @@ import type { MultiSelectProps } from '../../src'
 
 const args: MultiSelectProps = {
   defaultValue: undefined,
-  placeholder: 'Pick some options',
+  fixedWidth: 10,
   name: 'myMultiSelect',
   options: [
     { label: 'First Option', value: 'FIRST_OPTION' },
     { label: 'Second Option', value: 'SECOND_OPTION' },
     { label: 'Third Option', value: 'THIRD_OPTION' },
     { label: 'A Very Very Long Option', value: 'A_VERY_VERY_LONG_OPTION' }
-  ]
+  ],
+  placeholder: 'Pick some options'
 }
 
 export default {
@@ -25,9 +26,6 @@ export default {
     defaultValue: {
       control: 'inline-check',
       options: ['FIRST_OPTION', 'SECOND_OPTION', 'THIRD_OPTION', 'A_VERY_VERY_LONG_OPTION']
-    },
-    isMulti: {
-      control: 'boolean'
     }
   },
 

diff --git a/stories/fields/Select.stories.tsx b/stories/fields/Select.stories.tsx
@@ -25,9 +25,6 @@ export default {
     defaultValue: {
       control: 'inline-radio',
       options: ['FIRST_OPTION', 'SECOND_OPTION', 'THIRD_OPTION', 'A_VERY_VERY_LONG_OPTION']
-    },
-    isMulti: {
-      control: 'boolean'
     }
   },
 

diff --git a/stories/formiks/FormikMultiSelect.stories.tsx b/stories/formiks/FormikMultiSelect.stories.tsx
@@ -8,14 +8,15 @@ import { noop } from '../_utils/noop'
 import type { FormikMultiSelectProps } from '../../src'
 
 const args: FormikMultiSelectProps = {
-  placeholder: 'Pick some options',
+  fixedWidth: 10,
   name: 'myMultiSelect',
   options: [
     { label: 'First Option', value: 'FIRST_OPTION' },
     { label: 'Second Option', value: 'SECOND_OPTION' },
     { label: 'Third Option', value: 'THIRD_OPTION' },
     { label: 'A Very Very Long Option', value: 'A_VERY_VERY_LONG_OPTION' }
-  ]
+  ],
+  placeholder: 'Pick some options'
 }
 
 export default {