Update PickerItem.tsx to allow values of type number (#74)

* Update PickerItem.tsx

Allow values for the picker to be strings or numbers, so that I don't have to do custom transformation logic on the values.

This is particularly useful for a picker for numeric values like height, where I really want to store it as a number and not a string.

* Update corresponding types for value in Picker.tsx to support string | number also

* Added type coersion in test. This works, but with this in mind it maybe better to allow the values to be generics if they aren't strings? Would be interested in thoughts

examples/containers/ModalPicker.tsx

@@ -23,7 +23,7 @@ export default function ModalPicker() {
 
     const { year, month } = newValue
     const newDayArray = getDayArray(Number(year), Number(month))
-    const newDay = newDayArray.includes(newValue.day) ? newValue.day : newDayArray[newDayArray.length - 1]
+    const newDay = newDayArray.includes(newValue.day as string) ? newValue.day : newDayArray[newDayArray.length - 1]
     setPickerValue({ ...newValue, day: newDay })
   }, [])
 

lib/components/Picker.tsx

@@ -5,12 +5,12 @@ const DEFAULT_ITEM_HEIGHT = 36
 const DEFAULT_WHEEL_MODE = 'off'
 
 interface Option {
-  value: string
+  value: string | number
   element: MutableRefObject<HTMLElement | null>
 }
 
 export interface PickerValue {
-  [key: string]: string
+  [key: string]: string | number
 }
 
 export interface PickerRootProps<TType extends PickerValue> extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
@@ -44,7 +44,7 @@ export function usePickerData(componentName: string) {
 
 const PickerActionsContext = createContext<{
   registerOption(key: string, option: Option): () => void
-  change(key: string, value: string): boolean
+  change(key: string, value: string | number): boolean
 } | null>(null)
 PickerActionsContext.displayName = 'PickerActionsContext'
 

lib/components/PickerItem.tsx

@@ -8,7 +8,7 @@ interface PickerItemRenderProps {
 
 export interface PickerItemProps extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'children'> {
   children: ReactNode | ((renderProps: PickerItemRenderProps) => ReactNode)
-  value: string
+  value: string | number
 }
 
 // eslint-disable-next-line