| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { PanelBody, TextControl, TextareaControl } from '@wordpress/components'; |
| 3 |
import BaseFieldEdit from './BaseFieldEdit'; |
| 4 |
|
| 5 |
// Shared preview renderer for the comma-separated options/labels field |
| 6 |
// family. 'select' / 'select-multiple' render a native <select>; 'radio' / |
| 7 |
// 'checkbox' render a list of disabled inputs — the two shapes the six |
| 8 |
// consuming blocks (Select, Select2, Select (Multiple), Select2 (Multiple), |
| 9 |
// Radio, Checkbox) actually need. |
| 10 |
function renderPreview( previewType, optionsList, labelsList ) { |
| 11 |
const rows = optionsList.length > 0 ? optionsList : null; |
| 12 |
|
| 13 |
if ( previewType === 'radio' || previewType === 'checkbox' ) { |
| 14 |
const className = previewType === 'radio' ? 'wppb-fb-radios' : 'wppb-fb-checkboxes'; |
| 15 |
return ( |
| 16 |
<div className={ className }> |
| 17 |
{ rows ? rows.map( ( opt, i ) => ( |
| 18 |
<div key={ i } style={ { marginBottom: '5px' } }> |
| 19 |
<input type={ previewType } disabled /> |
| 20 |
<label style={ { marginLeft: '5px' } }> |
| 21 |
{ labelsList[ i ] ? labelsList[ i ].trim() : opt.trim() } |
| 22 |
</label> |
| 23 |
</div> |
| 24 |
) ) : <div>{ __( '(no options defined)', 'profile-builder' ) }</div> } |
| 25 |
</div> |
| 26 |
); |
| 27 |
} |
| 28 |
|
| 29 |
const isMultiple = previewType === 'select-multiple'; |
| 30 |
return ( |
| 31 |
<select disabled multiple={ isMultiple } style={ isMultiple ? { width: '100%', height: '100px' } : { width: '100%' } }> |
| 32 |
{ rows ? rows.map( ( opt, i ) => ( |
| 33 |
<option key={ i } value={ opt.trim() }> |
| 34 |
{ labelsList[ i ] ? labelsList[ i ].trim() : opt.trim() } |
| 35 |
</option> |
| 36 |
) ) : <option>{ __( '(no options defined)', 'profile-builder' ) }</option> } |
| 37 |
</select> |
| 38 |
); |
| 39 |
} |
| 40 |
|
| 41 |
/** |
| 42 |
* Shared editor for the comma-separated options/labels field family. Each |
| 43 |
* consuming block keeps its own edit.js (required by the register-blocks.js |
| 44 |
* require.context glob, which discovers blocks by their edit.js default |
| 45 |
* export) and its own __( 'X Settings', … ) panel-title call (required for |
| 46 |
* .pot extraction — the string must be a literal at the call site), passed |
| 47 |
* in as `panelTitle`. Everything else — the Options/Labels textareas, the |
| 48 |
* Default Value control, and the preview markup — lives here once. |
| 49 |
*/ |
| 50 |
export default function OptionsFieldEdit( { panelTitle, previewType = 'select', defaultValueAttr = 'default-option', showDefaultHelp = false, extraControls = null, ...props } ) { |
| 51 |
const { attributes, setAttributes } = props; |
| 52 |
|
| 53 |
const extraPanels = ( |
| 54 |
<PanelBody title={ panelTitle }> |
| 55 |
<TextareaControl |
| 56 |
label={ __( 'Options', 'profile-builder' ) } |
| 57 |
value={ attributes.options } |
| 58 |
onChange={ ( val ) => setAttributes( { options: val } ) } |
| 59 |
help={ __( 'Enter options separated by comma.', 'profile-builder' ) } |
| 60 |
/> |
| 61 |
<TextareaControl |
| 62 |
label={ __( 'Labels', 'profile-builder' ) } |
| 63 |
value={ attributes.labels } |
| 64 |
onChange={ ( val ) => setAttributes( { labels: val } ) } |
| 65 |
help={ __( 'Enter labels separated by comma. If empty, options will be used.', 'profile-builder' ) } |
| 66 |
/> |
| 67 |
<TextControl |
| 68 |
label={ __( 'Default Value', 'profile-builder' ) } |
| 69 |
value={ attributes[ defaultValueAttr ] } |
| 70 |
onChange={ ( val ) => setAttributes( { [ defaultValueAttr ]: val } ) } |
| 71 |
help={ showDefaultHelp ? __( 'Enter default selected options separated by comma.', 'profile-builder' ) : undefined } |
| 72 |
/> |
| 73 |
{ extraControls } |
| 74 |
</PanelBody> |
| 75 |
); |
| 76 |
|
| 77 |
const optionsList = attributes.options ? attributes.options.split( ',' ) : []; |
| 78 |
const labelsList = attributes.labels ? attributes.labels.split( ',' ) : []; |
| 79 |
|
| 80 |
return ( |
| 81 |
<BaseFieldEdit { ...props } inspectorPanels={ extraPanels }> |
| 82 |
{ renderPreview( previewType, optionsList, labelsList ) } |
| 83 |
</BaseFieldEdit> |
| 84 |
); |
| 85 |
} |
| 86 |
|
