index.js
157 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import PanelArea from '../../../../components/panel-area'; |
| 3 | import getIcon from '../../../../utils/get-icon'; |
| 4 | import { useContext } from '@wordpress/element'; |
| 5 | import ControlsContext from '../../../../block-context'; |
| 6 | import { Tooltip, Button } from '@wordpress/components'; |
| 7 | import MinHeight from './components/MinHeight'; |
| 8 | import getAttribute from '../../../../utils/get-attribute'; |
| 9 | import Width from './components/Width'; |
| 10 | import MaxWidth from './components/MaxWidth'; |
| 11 | import Height from './components/Height'; |
| 12 | import MinWidth from './components/MinWidth'; |
| 13 | import MaxHeight from './components/MaxHeight'; |
| 14 | import './editor.scss'; |
| 15 | import getDeviceType from '../../../../utils/get-device-type'; |
| 16 | import getResponsivePlaceholder from '../../../../utils/get-responsive-placeholder'; |
| 17 | |
| 18 | export default function Sizing( props ) { |
| 19 | const { id, supports: { sizingPanel } } = useContext( ControlsContext ); |
| 20 | const device = getDeviceType(); |
| 21 | const { |
| 22 | attributes, |
| 23 | setAttributes, |
| 24 | } = props; |
| 25 | |
| 26 | const { |
| 27 | useGlobalMaxWidth = false, |
| 28 | useInnerContainer = false, |
| 29 | isGrid = false, |
| 30 | sizing, |
| 31 | } = attributes; |
| 32 | |
| 33 | function getValue( name ) { |
| 34 | return sizing && sizing[ getAttribute( name, { attributes, deviceType: device }, true ) ] |
| 35 | ? sizing[ getAttribute( name, { attributes, deviceType: device }, true ) ] |
| 36 | : ''; |
| 37 | } |
| 38 | |
| 39 | return ( |
| 40 | <PanelArea |
| 41 | title={ __( 'Sizing', 'generateblocks' ) } |
| 42 | initialOpen={ false } |
| 43 | icon={ getIcon( 'sizing' ) } |
| 44 | className="gblocks-panel-label" |
| 45 | id={ `${ id }Sizing` } |
| 46 | > |
| 47 | <div className="gblocks-sizing-fields"> |
| 48 | { sizingPanel.width && |
| 49 | <Width |
| 50 | value={ getValue( 'width' ) } |
| 51 | placeholder={ getResponsivePlaceholder( 'width', attributes.sizing, device ) } |
| 52 | onChange={ ( value ) => { |
| 53 | setAttributes( { |
| 54 | sizing: { |
| 55 | [ getAttribute( 'width', { attributes, deviceType: device }, true ) ]: value, |
| 56 | }, |
| 57 | } ); |
| 58 | } } |
| 59 | /> |
| 60 | } |
| 61 | |
| 62 | { sizingPanel.height && |
| 63 | <Height |
| 64 | value={ getValue( 'height' ) } |
| 65 | placeholder={ getResponsivePlaceholder( 'height', attributes.sizing, device ) } |
| 66 | onChange={ ( value ) => { |
| 67 | setAttributes( { |
| 68 | sizing: { |
| 69 | [ getAttribute( 'height', { attributes, deviceType: device }, true ) ]: value, |
| 70 | }, |
| 71 | } ); |
| 72 | } } |
| 73 | /> |
| 74 | } |
| 75 | |
| 76 | { sizingPanel.minWidth && |
| 77 | <MinWidth |
| 78 | value={ getValue( 'minWidth' ) } |
| 79 | placeholder={ getResponsivePlaceholder( 'minWidth', attributes.sizing, device ) } |
| 80 | disabled={ isGrid } |
| 81 | onChange={ ( value ) => { |
| 82 | setAttributes( { |
| 83 | sizing: { |
| 84 | [ getAttribute( 'minWidth', { attributes, deviceType: device }, true ) ]: value, |
| 85 | }, |
| 86 | } ); |
| 87 | } } |
| 88 | /> |
| 89 | } |
| 90 | |
| 91 | { sizingPanel.minHeight && |
| 92 | <MinHeight |
| 93 | value={ getValue( 'minHeight' ) } |
| 94 | placeholder={ getResponsivePlaceholder( 'minHeight', attributes.sizing, device ) } |
| 95 | onChange={ ( value ) => { |
| 96 | setAttributes( { |
| 97 | sizing: { |
| 98 | [ getAttribute( 'minHeight', { attributes, deviceType: device }, true ) ]: value, |
| 99 | }, |
| 100 | } ); |
| 101 | } } |
| 102 | /> |
| 103 | } |
| 104 | |
| 105 | { sizingPanel.maxWidth && |
| 106 | <MaxWidth |
| 107 | value={ getValue( 'maxWidth' ) } |
| 108 | placeholder={ getResponsivePlaceholder( 'maxWidth', attributes.sizing, device ) } |
| 109 | overrideValue={ !! useGlobalMaxWidth ? generateBlocksInfo.globalContainerWidth : null } |
| 110 | disabled={ useInnerContainer || isGrid || ( useGlobalMaxWidth && 'Desktop' === device ) } |
| 111 | onChange={ ( value ) => { |
| 112 | setAttributes( { |
| 113 | sizing: { |
| 114 | [ getAttribute( 'maxWidth', { attributes, deviceType: device }, true ) ]: value, |
| 115 | }, |
| 116 | } ); |
| 117 | } } |
| 118 | overrideAction={ () => { |
| 119 | if ( ! sizingPanel.useGlobalMaxWidth || useInnerContainer || isGrid || 'Desktop' !== device || getValue( 'maxWidth' ) ) { |
| 120 | return null; |
| 121 | } |
| 122 | |
| 123 | return ( |
| 124 | <Tooltip text={ __( 'Use global max-width', 'generateblocks' ) }> |
| 125 | <Button |
| 126 | icon={ getIcon( 'globe' ) } |
| 127 | variant={ !! useGlobalMaxWidth ? 'primary' : '' } |
| 128 | onClick={ () => { |
| 129 | setAttributes( { |
| 130 | useGlobalMaxWidth: useGlobalMaxWidth ? false : true, |
| 131 | } ); |
| 132 | } } |
| 133 | /> |
| 134 | </Tooltip> |
| 135 | ); |
| 136 | } } |
| 137 | /> |
| 138 | } |
| 139 | |
| 140 | { sizingPanel.maxHeight && |
| 141 | <MaxHeight |
| 142 | value={ getValue( 'maxHeight' ) } |
| 143 | placeholder={ getResponsivePlaceholder( 'maxHeight', attributes.sizing, device ) } |
| 144 | onChange={ ( value ) => { |
| 145 | setAttributes( { |
| 146 | sizing: { |
| 147 | [ getAttribute( 'maxHeight', { attributes, deviceType: device }, true ) ]: value, |
| 148 | }, |
| 149 | } ); |
| 150 | } } |
| 151 | /> |
| 152 | } |
| 153 | </div> |
| 154 | </PanelArea> |
| 155 | ); |
| 156 | } |
| 157 |