index.js
134 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { RangeControl, BaseControl } from '@wordpress/components'; |
| 3 | import formatNumCol from '@vkblocks/utils/formatNumCol'; |
| 4 | |
| 5 | export const ColumnLayout = (props) => { |
| 6 | const { setAttributes, attributes } = props; |
| 7 | // eslint-disable-next-line camelcase |
| 8 | const { col_xs, col_sm, col_md, col_lg, col_xl, col_xxl } = attributes; |
| 9 | |
| 10 | const defaultMinMax = { |
| 11 | min: '1', |
| 12 | max: '6', |
| 13 | }; |
| 14 | |
| 15 | const marks = [ |
| 16 | { |
| 17 | value: 1, |
| 18 | }, |
| 19 | { |
| 20 | value: 2, |
| 21 | }, |
| 22 | { |
| 23 | value: 3, |
| 24 | }, |
| 25 | { |
| 26 | value: 4, |
| 27 | }, |
| 28 | { |
| 29 | value: 6, |
| 30 | }, |
| 31 | ]; |
| 32 | |
| 33 | return ( |
| 34 | <> |
| 35 | <BaseControl |
| 36 | label={__('Column ( Screen size : Extra small )', 'vk-blocks')} |
| 37 | id={'vk_columns-xs'} |
| 38 | > |
| 39 | <RangeControl |
| 40 | // eslint-disable-next-line camelcase |
| 41 | value={col_xs} |
| 42 | onChange={(value) => |
| 43 | setAttributes({ col_xs: formatNumCol(value, col_xs) }) |
| 44 | } |
| 45 | marks={marks} |
| 46 | min={defaultMinMax.min} |
| 47 | max={defaultMinMax.max} |
| 48 | step={1} |
| 49 | /> |
| 50 | </BaseControl> |
| 51 | <BaseControl |
| 52 | label={__('Column ( Screen size : Small )', 'vk-blocks')} |
| 53 | id={'vk_columns-xs'} |
| 54 | > |
| 55 | <RangeControl |
| 56 | // eslint-disable-next-line camelcase |
| 57 | value={col_sm} |
| 58 | onChange={(value) => |
| 59 | setAttributes({ col_sm: formatNumCol(value, col_sm) }) |
| 60 | } |
| 61 | marks={marks} |
| 62 | min={defaultMinMax.min} |
| 63 | max={defaultMinMax.max} |
| 64 | step={1} |
| 65 | /> |
| 66 | </BaseControl> |
| 67 | <BaseControl |
| 68 | label={__('Column ( Screen size : Medium )', 'vk-blocks')} |
| 69 | id={'vk_columns-xs'} |
| 70 | > |
| 71 | <RangeControl |
| 72 | // eslint-disable-next-line camelcase |
| 73 | value={col_md} |
| 74 | onChange={(value) => |
| 75 | setAttributes({ col_md: formatNumCol(value, col_md) }) |
| 76 | } |
| 77 | marks={marks} |
| 78 | min={defaultMinMax.min} |
| 79 | max={defaultMinMax.max} |
| 80 | step={1} |
| 81 | /> |
| 82 | </BaseControl> |
| 83 | <BaseControl |
| 84 | label={__('Column ( Screen size : Large )', 'vk-blocks')} |
| 85 | id={'vk_columns-xs'} |
| 86 | > |
| 87 | <RangeControl |
| 88 | // eslint-disable-next-line camelcase |
| 89 | value={col_lg} |
| 90 | onChange={(value) => |
| 91 | setAttributes({ col_lg: formatNumCol(value, col_lg) }) |
| 92 | } |
| 93 | marks={marks} |
| 94 | min={defaultMinMax.min} |
| 95 | max={defaultMinMax.max} |
| 96 | step={1} |
| 97 | /> |
| 98 | </BaseControl> |
| 99 | <BaseControl |
| 100 | label={__('Column ( Screen size : Extra large )', 'vk-blocks')} |
| 101 | id={'vk_columns-xs'} |
| 102 | > |
| 103 | <RangeControl |
| 104 | // eslint-disable-next-line camelcase |
| 105 | value={col_xl} |
| 106 | onChange={(value) => |
| 107 | setAttributes({ col_xl: formatNumCol(value, col_xl) }) |
| 108 | } |
| 109 | marks={marks} |
| 110 | min={defaultMinMax.min} |
| 111 | max={defaultMinMax.max} |
| 112 | step={1} |
| 113 | /> |
| 114 | </BaseControl> |
| 115 | <BaseControl |
| 116 | label={__('Column ( Screen size : XX large )', 'vk-blocks')} |
| 117 | id={'vk_columns-xs'} |
| 118 | > |
| 119 | <RangeControl |
| 120 | // eslint-disable-next-line camelcase |
| 121 | value={col_xxl} |
| 122 | onChange={(value) => |
| 123 | setAttributes({ col_xxl: formatNumCol(value, col_xxl) }) |
| 124 | } |
| 125 | marks={marks} |
| 126 | min={defaultMinMax.min} |
| 127 | max={defaultMinMax.max} |
| 128 | step={1} |
| 129 | /> |
| 130 | </BaseControl> |
| 131 | </> |
| 132 | ); |
| 133 | }; |
| 134 |