| 1 |
import { TextControl, ToggleControl } from '@wordpress/components'; |
| 2 |
import { __ } from '@wordpress/i18n'; |
| 3 |
|
| 4 |
/** |
| 5 |
* Get field attributes to render Gutenberg component. |
| 6 |
* |
| 7 |
* @param {Object} attributes - block attributes. |
| 8 |
* |
| 9 |
* @return {Object} attributes list. |
| 10 |
*/ |
| 11 |
export function getFieldAttributes(attributes) { |
| 12 |
const allowedAttributes = [ |
| 13 |
'id', |
| 14 |
'placeholder', |
| 15 |
'default', |
| 16 |
'min', |
| 17 |
'max', |
| 18 |
'step', |
| 19 |
'multiple', |
| 20 |
'required', |
| 21 |
'for', |
| 22 |
]; |
| 23 |
const result = { |
| 24 |
// prevent input focus. |
| 25 |
tabIndex: -1, |
| 26 |
onFocus(e) { |
| 27 |
e.target.blur(); |
| 28 |
}, |
| 29 |
}; |
| 30 |
|
| 31 |
Object.keys(attributes).forEach((k) => { |
| 32 |
let val = attributes[k]; |
| 33 |
|
| 34 |
if (typeof val !== 'undefined') { |
| 35 |
if (k === 'slug') { |
| 36 |
k = 'id'; |
| 37 |
} |
| 38 |
|
| 39 |
if (allowedAttributes.indexOf(k) !== -1) { |
| 40 |
// boolean value. |
| 41 |
if (typeof val === 'boolean') { |
| 42 |
if (val) { |
| 43 |
val = k; |
| 44 |
} else { |
| 45 |
val = false; |
| 46 |
} |
| 47 |
} |
| 48 |
|
| 49 |
// default attribute. |
| 50 |
if (k === 'default') { |
| 51 |
k = 'value'; |
| 52 |
} |
| 53 |
|
| 54 |
if (val !== false) { |
| 55 |
result[k] = val; |
| 56 |
} |
| 57 |
} |
| 58 |
} |
| 59 |
}); |
| 60 |
|
| 61 |
return result; |
| 62 |
} |
| 63 |
|
| 64 |
/** |
| 65 |
* Field Default Settings Class. |
| 66 |
* |
| 67 |
* @param props |
| 68 |
*/ |
| 69 |
export function FieldDefaultSettings(props) { |
| 70 |
const { |
| 71 |
attributes, |
| 72 |
setAttributes, |
| 73 |
|
| 74 |
hideLabelCustom, |
| 75 |
hideDescriptionCustom, |
| 76 |
requiredCustom, |
| 77 |
placeholderCustom, |
| 78 |
defaultCustom, |
| 79 |
slugCustom, |
| 80 |
} = props; |
| 81 |
|
| 82 |
const { |
| 83 |
slug, |
| 84 |
label, |
| 85 |
description, |
| 86 |
hideLabel, |
| 87 |
hideDescription, |
| 88 |
required, |
| 89 |
placeholder, |
| 90 |
default: defaultVal, |
| 91 |
} = attributes; |
| 92 |
|
| 93 |
const hideLabelControl = hideLabelCustom || ( |
| 94 |
<ToggleControl |
| 95 |
label={__('Hide Label', 'ghostkit')} |
| 96 |
checked={hideLabel} |
| 97 |
onChange={() => setAttributes({ hideLabel: !hideLabel })} |
| 98 |
/> |
| 99 |
); |
| 100 |
|
| 101 |
const hideDescriptionControl = hideDescriptionCustom || ( |
| 102 |
<ToggleControl |
| 103 |
label={__('Hide Description', 'ghostkit')} |
| 104 |
checked={hideDescription} |
| 105 |
onChange={() => |
| 106 |
setAttributes({ hideDescription: !hideDescription }) |
| 107 |
} |
| 108 |
/> |
| 109 |
); |
| 110 |
|
| 111 |
return ( |
| 112 |
<> |
| 113 |
{slugCustom || ( |
| 114 |
<TextControl |
| 115 |
label={__('Slug', 'ghostkit')} |
| 116 |
help={__( |
| 117 |
'Slug is used in form field [name] attribute.', |
| 118 |
'ghostkit' |
| 119 |
)} |
| 120 |
value={slug} |
| 121 |
onChange={() => {}} |
| 122 |
readOnly |
| 123 |
/> |
| 124 |
)} |
| 125 |
{placeholderCustom || ( |
| 126 |
<TextControl |
| 127 |
label={__('Placeholder', 'ghostkit')} |
| 128 |
value={placeholder} |
| 129 |
onChange={(val) => setAttributes({ placeholder: val })} |
| 130 |
/> |
| 131 |
)} |
| 132 |
{defaultCustom || ( |
| 133 |
<TextControl |
| 134 |
label={__('Default', 'ghostkit')} |
| 135 |
value={defaultVal} |
| 136 |
onChange={(val) => setAttributes({ default: val })} |
| 137 |
/> |
| 138 |
)} |
| 139 |
{requiredCustom || ( |
| 140 |
<ToggleControl |
| 141 |
label={__('Required', 'ghostkit')} |
| 142 |
checked={required} |
| 143 |
onChange={() => setAttributes({ required: !required })} |
| 144 |
/> |
| 145 |
)} |
| 146 |
{label ? hideLabelControl : ''} |
| 147 |
{description ? hideDescriptionControl : ''} |
| 148 |
</> |
| 149 |
); |
| 150 |
} |
| 151 |
|
