ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / sparklp6 / public_html / website_356c8563 / wp-content / plugins / essential-blocks / src / blocks / icon / src

/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { InspectorControls } from "@wordpress/block-editor";
import {
    PanelBody,
    BaseControl,
    TabPanel,
    SelectControl,
    RangeControl,
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";

/**
 * Internal depencencies
 */
import {
    WRAPPER_BG,
    WRAPPER_MARGIN,
    WRAPPER_PADDING,
    WRAPPER_BORDER_SHADOW,
    ICON_SIZE,
    ICON_ALIGN,
    ICON_SHAPE,
    SHAPE_VIEW,
    NORMAL_HOVER,
    BORDER,
    BORDER_WIDTH,
} from "./constants";

import {
    ResponsiveDimensionsControl,
    ResponsiveRangeController,
    ColorControl,
    EBIconPicker,
    InspectorPanel
} from "@essential-blocks/controls";

import objAttributes from "./attributes";

function Inspector(props) {
    const { attributes, setAttributes } = props;
    const {
        resOption,
        icon,
        iconAlign,
        iconPrimaryColor,
        iconPrimaryHoverColor,
        iconSecondaryColor,
        iconSecondaryHoverColor,
        iconShape,
        iconView,
        iconPadding,
        iconColorType,
    } = attributes;

return (
        <InspectorPanel advancedControlProps={{
            marginPrefix: WRAPPER_MARGIN,
            paddingPrefix: WRAPPER_PADDING,
            backgroundPrefix: WRAPPER_BG,
            borderPrefix: WRAPPER_BORDER_SHADOW,
            hasMargin: true
        }}>
            <InspectorPanel.General>
                <InspectorPanel.PanelBody title={__("General", "essential-blocks")} initialOpen={true}>
                    <EBIconPicker
                        value={icon}
                        attributeName={'icon'}
                    />
                    <SelectControl
                        label={__("Icon View", "essential-blocks")}
                        value={iconView}
                        options={SHAPE_VIEW}
                        onChange={(newIconView) =>
                            setAttributes({
                                iconView: newIconView,
                            })
                        }
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                    />
                    {iconView !== "default" && (
                        <SelectControl
                            label={__("Icon Shape", "essential-blocks")}
                            value={iconShape}
                            options={ICON_SHAPE}
                            onChange={(newIconShape) =>
                                setAttributes({
                                    iconShape: newIconShape,
                                })
                            }
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        />
                    )}
                    <ToggleGroupControl
                        label={__("Alignment", "essential-blocks")}

value={iconAlign}
                        onChange={(value) =>
                            setAttributes({
                                iconAlign: value,
                            })
                        }
                        isBlock
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                    >
                        {ICON_ALIGN.map((item, key) => (
                            <ToggleGroupControlOption
                                key={key}
                                value={item.value}
                                label={item.label}
                            />
                        ))}
                    </ToggleGroupControl>
                </InspectorPanel.PanelBody>
            </InspectorPanel.General>
            <InspectorPanel.Style>
                <InspectorPanel.PanelBody initialOpen={true}>
                    <ToggleGroupControl
                        className="newtogglegroupcontrol eb-inspector-btn-group"
                        value={iconColorType}
                        onChange={(value) =>
                            setAttributes({
                                iconColorType: value,
                            })
                        }
                        isBlock
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                    >
                        {NORMAL_HOVER.map((item, key) => (
                            <ToggleGroupControlOption
                                key={key}
                                value={item.value}
                                label={item.label}
                            />
                        ))}
                    </ToggleGroupControl>
                    {iconColorType === "normal" && (
                        <>
                            <ColorControl
                                label={__("Primary Color", "essential-blocks")}
                                color={iconPrimaryColor}
                                attributeName={'iconPrimaryColor'}
                            />

{iconView != "default" && (
                                <ColorControl
                                    label={__("Secondary Color", "essential-blocks")}
                                    color={iconSecondaryColor}
                                    attributeName={'iconSecondaryColor'}
                                />
                            )}
                        </>
                    )}
                    {iconColorType === "hover" && (
                        <>
                            <ColorControl
                                label={__("Primary Color", "essential-blocks")}
                                color={iconPrimaryHoverColor}
                                attributeName={'iconPrimaryHoverColor'}
                            />

{iconView != "default" && (
                                <ColorControl
                                    label={__("Secondary Color", "essential-blocks")}
                                    color={iconSecondaryHoverColor}
                                    attributeName={'iconSecondaryHoverColor'}
                                />
                            )}
                        </>
                    )}
                    <ResponsiveRangeController
                        baseLabel={__("Icon Size", "essential-blocks")}
                        controlName={ICON_SIZE}
                        min={10}
                        max={400}
                        step={1}
                    />
                    <RangeControl
                        label={__("Padding", "essential-blocks")}
                        value={iconPadding}
                        onChange={(iconPadding) =>
                            setAttributes({
                                iconPadding,
                            })
                        }
                        min={0}
                        max={100}
                        step={1}
                        allowReset={true}
                        __nextHasNoMarginBottom
                        __next40pxDefaultSize
                    />
                    {iconView === "framed" && (
                        <ResponsiveDimensionsControl
                            controlName={BORDER_WIDTH}
                            baseLabel={__("Border Width", "essential-blocks")}
                        />
                    )}
                    <ResponsiveDimensionsControl
                        forBorderRadius
                        controlName={BORDER}
                        baseLabel={__("Border Radius", "essential-blocks")}
                    />
                </InspectorPanel.PanelBody>
            </InspectorPanel.Style>
        </InspectorPanel>
    );
}

export default Inspector;

[-] example.js [edit]
[-] edit.js [edit]
[-] deprecated.js [edit]
[-] .htaccess [edit]
[-] style.js [edit]
[+] constants
[-] save.js [edit]
[-] style.scss [edit]
[-] index.js [edit]
[-] icon.svg [edit]
[-] inspector.js [edit]
[+] ..
[-] attributes.js [edit]