File "index.js"

Full path: /home/webcknlt/admissiontell.com/wp-content/plugins/generateblocks/src/extend/inspector-control/controls/icon/index.js
File size: 3.76 B (3.76 KB bytes)
MIME-type: text/x-java
Charset: utf-8

Download   Open   Edit   Advanced Editor &nnbsp; Back

import PanelArea from '../../../../components/panel-area';
import { __ } from '@wordpress/i18n';
import getIcon from '../../../../utils/get-icon';
import IconPicker from '../../../../components/icon-picker';
import IconStyles from './components/icon-styles';
import { useContext } from '@wordpress/element';
import ControlsContext from '../../../../block-context';
import getDeviceType from '../../../../utils/get-device-type';
import FlexControl from '../../../../components/flex-control';
import UnitControl from '../../../../components/unit-control';
import getResponsivePlaceholder from '../../../../utils/get-responsive-placeholder';
import getAttribute from '../../../../utils/get-attribute';

export default function IconControls( { attributes, setAttributes } ) {
	const { id, supports: { icon: iconSupport } } = useContext( ControlsContext );

	const device = getDeviceType();
	const {
		icon,
		iconLocation,
		iconLocationTablet,
		iconLocationMobile,
		removeText,
	} = attributes;

	return (
		<PanelArea
			title={ __( 'Icon', 'generateblocks' ) }
			initialOpen={ false }
			icon={ getIcon( 'icons' ) }
			className="gblocks-panel-label"
			id={ `${ id }Icon` }
		>
			{ 'Desktop' === device &&
				<>
					<IconPicker
						attributes={ attributes }
						setAttributes={ setAttributes }
						attrIcon={ 'icon' }
						attrRemoveText={ 'removeText' }
						attrAriaLabel={ 'ariaLabel' }
						id={ id }
					/>

					{ !! icon && ! removeText &&
						<IconStyles
							attributes={ attributes }
							setAttributes={ setAttributes }
							iconLocation={ iconLocation }
							locationOptions={ iconSupport.location }
							onChangeLocation={ ( value ) => {
								setAttributes( {
									iconLocation: value,
									iconPaddingRight: 'inline' === value || 'left' === value ? '0.5' : '',
									iconPaddingBottom: 'above' === value ? '0.5' : '',
									iconPaddingLeft: 'right' === value ? '0.5' : '',
								} );
							} }
						/>
					}
				</>
			}

			{ 'Tablet' === device && !! icon && ! removeText &&
				<IconStyles
					attributes={ attributes }
					setAttributes={ setAttributes }
					iconLocation={ iconLocationTablet }
					locationOptions={ iconSupport.location }
					onChangeLocation={ ( value ) => {
						setAttributes( {
							iconLocationTablet: value,
							iconPaddingRightTablet: 'inline' === value || 'left' === value ? '0.5' : '',
							iconPaddingBottomTablet: 'above' === value ? '0.5' : '',
							iconPaddingLeftTablet: 'right' === value ? '0.5' : '',
						} );
					} }
				/>
			}

			{ 'Mobile' === device && !! icon && ! removeText &&
				<IconStyles
					attributes={ attributes }
					setAttributes={ setAttributes }
					iconLocation={ iconLocationMobile }
					locationOptions={ iconSupport.location }
					onChangeLocation={ ( value ) => {
						setAttributes( {
							iconLocationMobile: value,
							iconPaddingRightMobile: 'inline' === value || 'left' === value ? '0.5' : '',
							iconPaddingBottomMobile: 'above' === value ? '0.5' : '',
							iconPaddingLeftMobile: 'right' === value ? '0.5' : '',
						} );
					} }
				/>
			}

			{ !! icon && !! iconSupport.iconSize &&
				<FlexControl>
					<UnitControl
						id="gblocks-icon-width"
						label={ __( 'Icon Size', 'generateblocks' ) }
						value={ getAttribute( 'width', { attributes: attributes.iconStyles, deviceType: device } ) }
						placeholder={ getResponsivePlaceholder( 'width', attributes.iconStyles, device ) }
						onChange={ ( value ) => {
							setAttributes( {
								iconStyles: {
									[ getAttribute( 'width', { attributes: attributes.iconStyles, deviceType: device }, true ) ]: value,
									[ getAttribute( 'height', { attributes: attributes.iconStyles, deviceType: device }, true ) ]: value,
								},
							} );
						} }
					/>
				</FlexControl>
			}
		</PanelArea>
	);
}