From c032afc07ae3460eddd21337c03ec955bf60dc8a Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Fri, 14 Aug 2020 18:38:15 +0100
Subject: [PATCH] add/update icon controls

---
 index.php       |   2 +-
 src/editor.scss |   2 +-
 src/index.js    | 202 +++++++++++++++++++++++++++++++++++++-----------
 src/style.scss  |   4 +
 4 files changed, 161 insertions(+), 49 deletions(-)

diff --git a/index.php b/index.php
index c7903a7..31f6a9b 100644
--- a/index.php
+++ b/index.php
@@ -48,7 +48,7 @@ add_action( 'init', function() {
 
 
 	function room_vw_iconify_enqueue_assets() {
-		wp_enqueue_script( 'iconify', 'https://code.iconify.design/1/1.0.7/iconify.min.js', array(), '1.0.7', false );
+		wp_enqueue_script( 'iconify', 'https://code.iconify.design/2/2.0.0-beta.6/iconify.min.js', array(), '2.0.0-beta.6', false );
 	}
 	add_action( 'enqueue_block_assets', 'room_vw_iconify_enqueue_assets' );
 } );
diff --git a/src/editor.scss b/src/editor.scss
index 6e64a23..7e04f97 100644
--- a/src/editor.scss
+++ b/src/editor.scss
@@ -5,5 +5,5 @@
  */
 
 .wp-block-room-vw-iconify {
-	// TODO
+	line-height: 1;
 }
diff --git a/src/index.js b/src/index.js
index aede38f..57b1746 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,20 @@
+/* global Iconify */
 import './style.scss';
 import './editor.scss';
 
 import { registerBlockType } from '@wordpress/blocks';
 
-import { RawHTML, Fragment } from '@wordpress/element';
-import { InspectorControls } from '@wordpress/editor';
+import { RawHTML, Fragment, useState } from '@wordpress/element';
+import { BlockControls, InspectorControls } from '@wordpress/editor';
 import {
 	Button,
+	Modal,
+	RangeControl,
 	TextControl,
 	ToggleControl,
-	Panel,
+	Toolbar,
+	ToolbarButton,
+	PanelBody,
 	PanelRow,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -22,87 +27,188 @@ registerBlockType('room-vw/iconify', {
 	supports: {
 		// Removes support for an HTML mode.
 		html: false,
+		align: ['left', 'center', 'right'],
 	},
 
 	attributes: {
 		prefix: {
 			type: 'string',
-			source: 'attribute',
-			selector: 'data-prefix',
-			default: 'noto-v1',
+			default: 'simple-icons',
 		},
 		name: {
 			type: 'string',
-			source: 'attribute',
-			selector: 'data-name',
-			default: 'unicorn',
+			default: 'iconify',
 		},
-		inline: {
+		isInline: {
 			type: 'boolean',
-			default: false,
+			default: true,
 		},
 		svg: {
 			type: 'string',
 			source: 'html',
 			selector: '.icon',
-			default: '<span>Select an icon</span>',
+			default: '',
+		},
+		fontUnit: {
+			type: 'string',
+			default: 'px',
+		},
+		fontSize: {
+			type: 'number',
+			default: 16,
 		},
 	},
 
 	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
+					setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
+					closeModal();
+				});
+			} else {
+				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>
-					<Panel>
-						<PanelRow>
-							<TextControl
-								label="Prefix"
-								value={attributes.prefix}
-								onChange={(newPrefix) => {
-									setAttributes({ prefix: newPrefix });
-								}}
-							/>
-							<TextControl
-								label="Name"
-								value={attributes.name}
-								onChange={(newName) => {
-									setAttributes({ name: newName });
-								}}
-							/>
-						</PanelRow>
+					<PanelBody title="Icon settings">
+						<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 });
+							}}
+						/>
+						<PanelRow></PanelRow>
 						<PanelRow>
 							<ToggleControl
-								label="Is inline"
-								checked={attributes.inline}
+								label="Is isInline"
+								checked={attributes.isInline}
 								onChange={(state) => {
-									setAttributes({ inline: state });
+									setAttributes({ isInline: state });
 								}}
 							/>
-							<Button
-								isBusy={false}
-								disabled={false}
-								isSecondary
-								onClick={() => {
+							<ToggleControl
+								label="Use ems"
+								checked={attributes.fontUnit === 'em'}
+								onChange={(state) => {
 									setAttributes({
-										svg: Iconify.getSVG(
-											`${attributes.prefix}:${attributes.name}`
-										),
+										fontUnit: state ? 'em' : 'px',
+										fontSize: state
+											? attributes.fontSize / 16
+											: attributes.fontSize * 16,
 									});
 								}}
-							>
-								Get Icon
-							</Button>
+							/>
 						</PanelRow>
-					</Panel>
+					</PanelBody>
 				</InspectorControls>
+
+				<BlockControls>
+					<Toolbar label="label">
+						<ToolbarButton
+							label="Replace icon"
+							icon="admin-generic"
+							onClick={openModal}
+						/>
+					</Toolbar>
+				</BlockControls>
+
 				<RawHTML
 					className={
 						className +
-						(attributes.inline ? ' is-inline icon' : ' icon')
+						(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>
 		);
 	},
@@ -110,10 +216,12 @@ registerBlockType('room-vw/iconify', {
 	save({ attributes }) {
 		return (
 			<RawHTML
-				className={attributes.inline ? ' is-inline icon' : ' icon'}
+				className={attributes.isInline ? ' is-inline icon' : ' icon'}
 				dataPrefix={attributes.prefix}
 				dataName={attributes.name}
-				dataInline={attributes.inline}
+				style={{
+					fontSize: attributes.fontSize + attributes.fontUnit,
+				}}
 			>
 				{attributes.svg}
 			</RawHTML>
diff --git a/src/style.scss b/src/style.scss
index 94897e3..e74488f 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,3 +1,7 @@
 .wp-block-room-vw-iconify {
 	font-size: 4em;
+
+	&.is-inline {
+		display: inline;
+	}
 }