update i18ns. factor out edit/save functions
This commit is contained in:
parent
70229149a9
commit
3e8f484e40
|
|
@ -0,0 +1,190 @@
|
||||||
|
/* global Iconify */
|
||||||
|
|
||||||
|
import { __ } from '@wordpress/i18n';
|
||||||
|
|
||||||
|
import { RawHTML, Fragment, useState } from '@wordpress/element';
|
||||||
|
import { BlockControls, InspectorControls } from '@wordpress/editor';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Modal,
|
||||||
|
RangeControl,
|
||||||
|
TextControl,
|
||||||
|
ToggleControl,
|
||||||
|
Toolbar,
|
||||||
|
ToolbarButton,
|
||||||
|
PanelBody,
|
||||||
|
} from '@wordpress/components';
|
||||||
|
|
||||||
|
export function edit({ className, attributes, setAttributes }) {
|
||||||
|
/* eslint-disable react-hooks/rules-of-hooks */
|
||||||
|
const [modalIsOpen, setOpen] = useState(false);
|
||||||
|
const [newPrefix, setNewPrefix] = useState(attributes.prefix);
|
||||||
|
const [newName, setNewName] = useState(attributes.name);
|
||||||
|
/* eslint-enable react-hooks/rules-of-hooks */
|
||||||
|
|
||||||
|
const updateIcon = () => {
|
||||||
|
const iconString = `${newPrefix}:${newName}`;
|
||||||
|
if (!Iconify.iconExists(iconString)) {
|
||||||
|
// TODO loading indicator
|
||||||
|
Iconify.loadIcons([iconString], () => {
|
||||||
|
// TODO if icon not found
|
||||||
|
// TODO customisations object as renderHTML second argument
|
||||||
|
setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
|
||||||
|
closeModal();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// TODO customisations object as renderHTML second argument
|
||||||
|
setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setSVG = (svg, prefix, name) => {
|
||||||
|
setAttributes({
|
||||||
|
svg,
|
||||||
|
prefix,
|
||||||
|
name,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const openModal = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const InspectorControlComponent = () => (
|
||||||
|
<InspectorControls>
|
||||||
|
<PanelBody title={__('Icon size', 'room-vw')}>
|
||||||
|
<RangeControl
|
||||||
|
label={`${__('Font size', 'room-vw')} (${
|
||||||
|
attributes.fontUnit
|
||||||
|
})`}
|
||||||
|
value={attributes.fontSize}
|
||||||
|
min={attributes.fontUnit === 'em' ? '0.5' : '8'}
|
||||||
|
max={attributes.fontUnit === 'em' ? '20' : '320'}
|
||||||
|
step={attributes.fontUnit === 'em' ? '0.1' : '1'}
|
||||||
|
onChange={(value) => {
|
||||||
|
setAttributes({ fontSize: value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Use', 'room-vw') + ' ems'}
|
||||||
|
checked={attributes.fontUnit === 'em'}
|
||||||
|
onChange={(state) => {
|
||||||
|
setAttributes({
|
||||||
|
fontUnit: state ? 'em' : 'px',
|
||||||
|
fontSize: state
|
||||||
|
? attributes.fontSize / 16
|
||||||
|
: attributes.fontSize * 16,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</PanelBody>
|
||||||
|
<PanelBody title={__('Icon variations', 'room-vw')}>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Inline', 'room-vw')}
|
||||||
|
checked={attributes.isInline}
|
||||||
|
onChange={(state) => {
|
||||||
|
setAttributes({ isInline: state });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<p>Color</p>
|
||||||
|
<p>Rotate</p>
|
||||||
|
<p>Flip</p>
|
||||||
|
<p>Etc</p>
|
||||||
|
</PanelBody>
|
||||||
|
</InspectorControls>
|
||||||
|
);
|
||||||
|
|
||||||
|
const BlockControlComponent = () => (
|
||||||
|
<BlockControls>
|
||||||
|
<Toolbar>
|
||||||
|
<ToolbarButton
|
||||||
|
label={__('Replace icon', 'room-vw')}
|
||||||
|
icon="admin-generic"
|
||||||
|
onClick={openModal}
|
||||||
|
/>
|
||||||
|
</Toolbar>
|
||||||
|
</BlockControls>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ModalComponent = () => (
|
||||||
|
<Modal
|
||||||
|
title={__('Select an Icon', 'room-vw')}
|
||||||
|
onRequestClose={closeModal}
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
<strong>TODO:</strong> Search for an icon
|
||||||
|
</p>
|
||||||
|
<TextControl
|
||||||
|
label={__('Prefix', 'room-vw')}
|
||||||
|
value={newPrefix}
|
||||||
|
onChange={(value) => {
|
||||||
|
setNewPrefix(value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<TextControl
|
||||||
|
label={__('Name', 'room-vw')}
|
||||||
|
value={newName}
|
||||||
|
onChange={(value) => {
|
||||||
|
setNewName(value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button isPrimary onClick={updateIcon}>
|
||||||
|
{__('Select', 'room-vw')}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button isSecondary onClick={closeModal}>
|
||||||
|
{__('Cancel', 'room-vw')}
|
||||||
|
</Button>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<InspectorControlComponent />
|
||||||
|
<BlockControlComponent />
|
||||||
|
|
||||||
|
<RawHTML
|
||||||
|
className={
|
||||||
|
className +
|
||||||
|
(attributes.isInline ? ' is-inline icon' : ' icon')
|
||||||
|
}
|
||||||
|
style={{
|
||||||
|
fontSize: attributes.fontSize + attributes.fontUnit,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{attributes.svg}
|
||||||
|
</RawHTML>
|
||||||
|
|
||||||
|
{attributes.svg === '' && (
|
||||||
|
<Button
|
||||||
|
isBusy={false}
|
||||||
|
disabled={false}
|
||||||
|
isPrimary
|
||||||
|
onClick={openModal}
|
||||||
|
>
|
||||||
|
Choose Icon
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{attributes.svg !== '' && (
|
||||||
|
<Button
|
||||||
|
isBusy={false}
|
||||||
|
disabled={false}
|
||||||
|
isTertiary
|
||||||
|
onClick={openModal}
|
||||||
|
>
|
||||||
|
Change Icon
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{modalIsOpen && <ModalComponent />}
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
194
src/index.js
194
src/index.js
|
|
@ -1,23 +1,13 @@
|
||||||
/* global Iconify */
|
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
import './editor.scss';
|
import './editor.scss';
|
||||||
|
|
||||||
import { registerBlockType } from '@wordpress/blocks';
|
|
||||||
|
|
||||||
import { RawHTML, Fragment, useState } from '@wordpress/element';
|
|
||||||
import { BlockControls, InspectorControls } from '@wordpress/editor';
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Modal,
|
|
||||||
RangeControl,
|
|
||||||
TextControl,
|
|
||||||
ToggleControl,
|
|
||||||
Toolbar,
|
|
||||||
ToolbarButton,
|
|
||||||
PanelBody,
|
|
||||||
} from '@wordpress/components';
|
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
|
|
||||||
|
import { edit } from './edit.js';
|
||||||
|
import { save } from './save.js';
|
||||||
|
|
||||||
|
import { registerBlockType } from '@wordpress/blocks';
|
||||||
|
|
||||||
registerBlockType('room-vw/iconify', {
|
registerBlockType('room-vw/iconify', {
|
||||||
title: __('Iconify', 'room-vw'),
|
title: __('Iconify', 'room-vw'),
|
||||||
icon: (
|
icon: (
|
||||||
|
|
@ -69,177 +59,7 @@ registerBlockType('room-vw/iconify', {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
edit({ className, attributes, setAttributes }) {
|
edit,
|
||||||
/* eslint-disable react-hooks/rules-of-hooks */
|
|
||||||
const [modalIsOpen, setOpen] = useState(false);
|
|
||||||
const [newPrefix, setNewPrefix] = useState(attributes.prefix);
|
|
||||||
const [newName, setNewName] = useState(attributes.name);
|
|
||||||
/* eslint-enable react-hooks/rules-of-hooks */
|
|
||||||
|
|
||||||
const updateIcon = () => {
|
save,
|
||||||
const iconString = `${newPrefix}:${newName}`;
|
|
||||||
if (!Iconify.iconExists(iconString)) {
|
|
||||||
// TODO loading indicator
|
|
||||||
Iconify.loadIcons([iconString], () => {
|
|
||||||
// TODO if icon not found
|
|
||||||
// TODO customisations object as renderHTML second argument
|
|
||||||
setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
|
|
||||||
closeModal();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// TODO customisations object as renderHTML second argument
|
|
||||||
setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
|
|
||||||
closeModal();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const setSVG = (svg, prefix, name) => {
|
|
||||||
setAttributes({
|
|
||||||
svg,
|
|
||||||
prefix,
|
|
||||||
name,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const openModal = () => {
|
|
||||||
setOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeModal = () => {
|
|
||||||
setOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<InspectorControls>
|
|
||||||
<PanelBody title="Icon size">
|
|
||||||
<RangeControl
|
|
||||||
label={`Font size (${attributes.fontUnit})`}
|
|
||||||
value={attributes.fontSize}
|
|
||||||
min={attributes.fontUnit === 'em' ? '0.5' : '8'}
|
|
||||||
max={attributes.fontUnit === 'em' ? '20' : '320'}
|
|
||||||
step={attributes.fontUnit === 'em' ? '0.1' : '1'}
|
|
||||||
onChange={(value) => {
|
|
||||||
setAttributes({ fontSize: value });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ToggleControl
|
|
||||||
label="Use ems"
|
|
||||||
checked={attributes.fontUnit === 'em'}
|
|
||||||
onChange={(state) => {
|
|
||||||
setAttributes({
|
|
||||||
fontUnit: state ? 'em' : 'px',
|
|
||||||
fontSize: state
|
|
||||||
? attributes.fontSize / 16
|
|
||||||
: attributes.fontSize * 16,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</PanelBody>
|
|
||||||
<PanelBody title="Icon variations">
|
|
||||||
<ToggleControl
|
|
||||||
label="Inline"
|
|
||||||
checked={attributes.isInline}
|
|
||||||
onChange={(state) => {
|
|
||||||
setAttributes({ isInline: state });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<p>Color</p>
|
|
||||||
<p>Rotate</p>
|
|
||||||
<p>Flip</p>
|
|
||||||
<p>Etc</p>
|
|
||||||
</PanelBody>
|
|
||||||
</InspectorControls>
|
|
||||||
|
|
||||||
<BlockControls>
|
|
||||||
<Toolbar label="label">
|
|
||||||
<ToolbarButton
|
|
||||||
label="Replace icon"
|
|
||||||
icon="admin-generic"
|
|
||||||
onClick={openModal}
|
|
||||||
/>
|
|
||||||
</Toolbar>
|
|
||||||
</BlockControls>
|
|
||||||
|
|
||||||
<RawHTML
|
|
||||||
className={
|
|
||||||
className +
|
|
||||||
(attributes.isInline ? ' is-inline icon' : ' icon')
|
|
||||||
}
|
|
||||||
style={{
|
|
||||||
fontSize: attributes.fontSize + attributes.fontUnit,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{attributes.svg}
|
|
||||||
</RawHTML>
|
|
||||||
|
|
||||||
{attributes.svg === '' && (
|
|
||||||
<Button
|
|
||||||
isBusy={false}
|
|
||||||
disabled={false}
|
|
||||||
isPrimary
|
|
||||||
onClick={openModal}
|
|
||||||
>
|
|
||||||
Choose Icon
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{attributes.svg !== '' && (
|
|
||||||
<Button
|
|
||||||
isBusy={false}
|
|
||||||
disabled={false}
|
|
||||||
isTertiary
|
|
||||||
onClick={openModal}
|
|
||||||
>
|
|
||||||
Change Icon
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{modalIsOpen && (
|
|
||||||
<Modal title="Select an Icon" onRequestClose={closeModal}>
|
|
||||||
<p>
|
|
||||||
<strong>TODO:</strong> Search for an icon
|
|
||||||
</p>
|
|
||||||
<TextControl
|
|
||||||
label="Prefix"
|
|
||||||
value={newPrefix}
|
|
||||||
onChange={(value) => {
|
|
||||||
setNewPrefix(value);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<TextControl
|
|
||||||
label="Name"
|
|
||||||
value={newName}
|
|
||||||
onChange={(value) => {
|
|
||||||
setNewName(value);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Button isPrimary onClick={updateIcon}>
|
|
||||||
Select
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button isSecondary onClick={closeModal}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Modal>
|
|
||||||
)}
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
save({ attributes }) {
|
|
||||||
return (
|
|
||||||
<RawHTML
|
|
||||||
className={attributes.isInline ? ' is-inline icon' : ' icon'}
|
|
||||||
dataPrefix={attributes.prefix}
|
|
||||||
dataName={attributes.name}
|
|
||||||
style={{
|
|
||||||
fontSize: attributes.fontSize + attributes.fontUnit,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{attributes.svg}
|
|
||||||
</RawHTML>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { RawHTML } from '@wordpress/element';
|
||||||
|
|
||||||
|
export function save({ attributes }) {
|
||||||
|
return (
|
||||||
|
<RawHTML
|
||||||
|
className={attributes.isInline ? ' is-inline icon' : ' icon'}
|
||||||
|
dataPrefix={attributes.prefix}
|
||||||
|
dataName={attributes.name}
|
||||||
|
style={{
|
||||||
|
fontSize: attributes.fontSize + attributes.fontUnit,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{attributes.svg}
|
||||||
|
</RawHTML>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue