AdvancedRuleItem.js
2 years ago
AdvancedRuleModalItem.js
2 years ago
AdvancedRulesIsEmpty.js
2 years ago
AdvancedRulesList.js
2 years ago
AdvancedRulesModal.js
2 years ago
ChooseRelatedField.js
2 years ago
EditAdvancedRulesButton.js
2 years ago
EditRulesModalContext.js
2 years ago
HumanReadableRule.js
2 years ago
ValidationBlockMessage.js
2 years ago
ValidationMetaMessage.js
2 years ago
ValidationToggleGroup.js
2 years ago
ValidationMetaMessage.js
53 lines
| 1 | import getItemByName from '../helpers/getItemByName'; |
| 2 | |
| 3 | const { |
| 4 | TextControl, |
| 5 | Tooltip, |
| 6 | } = wp.components; |
| 7 | |
| 8 | function ValidationMetaMessage( { |
| 9 | message, |
| 10 | update, |
| 11 | value = null, |
| 12 | help = null, |
| 13 | ...props |
| 14 | } ) { |
| 15 | const current = getItemByName( message.id ); |
| 16 | |
| 17 | return <div { ...props }> |
| 18 | <label |
| 19 | htmlFor={ message.id } |
| 20 | className={ 'jet-fb flex jc-space-between' } |
| 21 | > |
| 22 | <span>{ current.label }</span> |
| 23 | <span className={ 'jet-fb flex gap-1em' }> |
| 24 | { message.blocks.map( block => <span |
| 25 | key={ 'message_block_item' + block.title } |
| 26 | className="jet-fb-validation-messages-item-heading-pair__icon" |
| 27 | > |
| 28 | <Tooltip |
| 29 | text={ block.title } |
| 30 | delay={ 200 } |
| 31 | position={ 'top center' } |
| 32 | > |
| 33 | <div>{ block.icon }</div> |
| 34 | </Tooltip> |
| 35 | </span> ) } |
| 36 | </span> |
| 37 | </label> |
| 38 | <TextControl |
| 39 | id={ message.id } |
| 40 | key={ 'validation_message_' + message.id } |
| 41 | help={ help ?? current?.help } |
| 42 | value={ value ?? current?.initial } |
| 43 | onChange={ value => update( prev => ( |
| 44 | { |
| 45 | ...prev, |
| 46 | [ message.id ]: value, |
| 47 | } |
| 48 | ) ) } |
| 49 | /> |
| 50 | </div>; |
| 51 | } |
| 52 | |
| 53 | export default ValidationMetaMessage; |