import React from 'react' ; import { startWithType , mapHandlers , mapWithProps , pureComponent } from 'refun' ; import { getObjectKeys } from 'tsfn' ; import { mapStoreState , setResolution } from '../../store' ; import { resolutions } from '../../resolutions' ; import type { TResolutionKey } from '../../resolutions' ; import type { TId } from '../../types' ; import { Dropdown } from '../dropdown' ; import { SYMBOL_DROPDOWN } from '../../symbols' ; const OPTIONS = [ { label : 'Custom' , value : '-' } , ... getObjectKeys ( resolutions ) . map ( ( key ) => ( { label : resolutions [ key ] . label , value : key } ) ) , ] ; export type TResolutionDropdown = TId ; export const ResolutionDropdown = pureComponent ( startWithType < TResolutionDropdown > ( ) , mapStoreState ( ( { resolutionKey } ) => ( { resolutionKey } ) , [ 'resolutionKey' ] ) , mapHandlers ( { dispatchResolutionKey : ( ) => ( key ) => setResolution ( key ) , } ) , mapWithProps ( ( { resolutionKey } ) => ( { value : resolutionKey === null ? '-' : resolutionKey , } ) ) , mapHandlers ( { onChange : ( { dispatchResolutionKey } ) => ( value ) => dispatchResolutionKey ( value === '-' ? null : value ) , } ) ) ( ( { value , id , onChange } ) => ( < Dropdown id = { id } options = { OPTIONS } value = { value } onChange = { onChange } / > ) ) ; ResolutionDropdown . displayName = 'ResolutionDropdown' ; ResolutionDropdown . componentSymbol = SYMBOL_DROPDOWN ;