import React , { FunctionComponent , useContext } from 'react' ; import BaseInput from './utils/BaseInput' ; import ItemContext from '#context/ItemContext' ; import SkuOptionChildrenContext from '#context/SkuOptionChildrenContext' ; import { has } from 'lodash' ; import { ItemOptions } from '#reducers/ItemReducer' ; import components from '#config/components' ; import { BaseInputComponentProps } from '#typings' ; const propTypes = components . SkuOptionInput . propTypes ; const displayName = components . SkuOptionInput . displayName ; type SkuOptionInputProps = BaseInputComponentProps & JSX . IntrinsicElements [ 'input' ] & JSX . IntrinsicElements [ 'textarea' ] ; const SkuOptionInput = ( props ) => { const { name } = props ; const { option , setOption } = useContext ( ItemContext ) ; const { skuOption , skuCode } = useContext ( SkuOptionChildrenContext ) ; const handleChange = ( event ) => { const val = event . target . value ; const options = has ( option , `${ skuCode }.${ skuOption ?. id }` ) ? option [ skuCode ] [ `${ skuOption ?. id }` ] [ 'options' ] : { } ; const o = { [ skuCode ] : { ... option [ skuCode ] , [ `${ skuOption ?. id }` ] : { skuOptionId : skuOption ?. id , options : { ... options , [ name ] : val , } , } , } , } as ItemOptions ; setOption && setOption ( o ) ; } ; return < BaseInput onChange = { handleChange } { ... props } />; } ; SkuOptionInput . propTypes = propTypes ; SkuOptionInput . displayName = displayName ; export default SkuOptionInput ;