import React from 'react' ; import _ from 'lodash' ; import { BaseComponent } from '../base/BaseComponent' ; import { ColorPicker } from '../ColorPicker' ; import { InputNumber } from '../InputNumber' ; import { Select } from '../Select' ; import { FONT_WEIGHT_OPITONS } from './constant' ; import styles from './index.module.less' ; type FontSettingProps = { attributeIdMap : { fontColor ? : string ; fontSize ? : string ; fontWeight ? : string ; fontFamily ? : string ; textAlign ? : string ; opacity ? : string ; } ; } ; description export class FontSetting extends BaseComponent < FontSettingProps > { renderContent ( ) { const { onChange , attributes , config } = this . props ; const { attributeIdMap = { } , initialValue } = config ; const { fontColor : fontColorId , fontFamily : fontFamilyId , opacity : opacityId , fontSize : fontSizeId , fontWeight : fontWeightId , } = attributeIdMap ; return ( < div className = { styles . fontSetting } > { } { fontColorId && ( < ColorPicker className = { styles . fontColor } attributes = { attributes } config = { { attributeId : fontColorId } } onChange = { onChange } innerStyle = { { border : 'none' } } />)} { fontSizeId && ( < InputNumber attributes = { attributes } config = { { attributeId : fontSizeId , initialValue : initialValue ?. [ 'fontSize' ] } } onChange = { onChange } / > ) } { opacityId && ( < InputNumber attributes = { attributes } config = { { attributeId : opacityId } } onChange = { onChange } / > ) } { } { fontWeightId && ( < Select attributes = { attributes } config = { { attributeId : fontWeightId , options : FONT_WEIGHT_OPITONS } } onChange = { onChange } / > ) } < /div>); } }