default.js
| 1 | import { RichText } from '@wordpress/block-editor'; |
| 2 | import { decodeHtmlEntities } from '@Blocks/util'; |
| 3 | |
| 4 | export const InputComponent = ( { attributes, blockID, setAttributes } ) => { |
| 5 | const { label, placeholder, required, defaultValue } = attributes; |
| 6 | |
| 7 | const isRequired = required ? ' srfm-required' : ''; |
| 8 | const slug = 'input'; |
| 9 | |
| 10 | return ( |
| 11 | <> |
| 12 | <RichText |
| 13 | tagName="label" |
| 14 | value={ label } |
| 15 | onChange={ ( value ) => { |
| 16 | setAttributes( { label: decodeHtmlEntities( value ) } ); |
| 17 | } } |
| 18 | className={ `srfm-block-label${ isRequired }` } |
| 19 | multiline={ false } |
| 20 | id={ blockID } |
| 21 | allowedFormats={ [] } |
| 22 | /> |
| 23 | <input |
| 24 | id={ `srfm-${ slug }-confirm-${ blockID }` } |
| 25 | type="text" |
| 26 | value={ defaultValue } |
| 27 | className={ `srfm-input-common srfm-input-${ slug }` } |
| 28 | placeholder={ placeholder } |
| 29 | required={ required } |
| 30 | /> |
| 31 | </> |
| 32 | ); |
| 33 | }; |
| 34 |