PLANET-7303 Move Spreadsheet block into master theme (#2178)

- Moved all needed files for Spreadsheet into master theme
- Restructured some files to match structure from plugin repo

assets/src/block-editor/ColorPaletteControl/ColorPaletteControl.js

@@ -0,0 +1,24 @@
+import classnames from 'classnames';
+import {withInstanceId} from '@wordpress/compose';
+import {BaseControl, ColorPalette} from '@wordpress/components';
+
+function ColorPaletteControl({label, className, value, help, instanceId, onChange, options = [], ...passThroughProps}) {
+  const id = `inspector-color-palette-control-${instanceId}`;
+
+  // eslint-disable-next-line no-shadow
+  const optionsAsColors = options.map(({value, ...props}) => ({color: value, ...props}));
+
+  return options.length > 0 && (
+    <BaseControl label={label} id={id} help={help}
+      className={classnames(className, 'components-color-palette-control')}>
+      <ColorPalette
+        value={value}
+        onChange={onChange}
+        colors={optionsAsColors}
+        {...passThroughProps}
+      />
+    </BaseControl>
+  );
+}
+
+export default withInstanceId(ColorPaletteControl);

assets/src/blocks/Spreadsheet/ArrowIcon.js

@@ -0,0 +1,3 @@
+export const ArrowIcon = () => (
+  <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm292 116V256h70.9c10.7 0 16.1-13 8.5-20.5L264.5 121.2c-4.7-4.7-12.2-4.7-16.9 0l-115 114.3c-7.6 7.6-2.2 20.5 8.5 20.5H212v116c0 6.6 5.4 12 12 12h64c6.6 0 12-5.4 12-12z"></path></svg>
+);

assets/src/blocks/Spreadsheet/HighlightMatches.js

@@ -0,0 +1,15 @@
+export const HighlightMatches = (cellValue, searchText, className = 'highlighted-text') => {
+  const reg = new RegExp('(' + searchText.trim() + ')', 'gi');
+  const parts = cellValue.split(reg);
+
+  // Skips the first empty value and the intermediate parts
+  for (let i = 1; i < parts.length; i += 2) {
+    parts[i] = (
+      <span key={i} className={className}>
+        { parts[i] }
+      </span>
+    );
+  }
+
+  return <>{ parts }</>;
+};

assets/src/blocks/Spreadsheet/SpreadsheetBlock.js

@@ -0,0 +1,62 @@
+import {SpreadsheetEditor} from './SpreadsheetEditor';
+import {frontendRendered} from '../frontendRendered';
+import {SpreadsheetFrontend} from './SpreadsheetFrontend';
+import {renderToString} from 'react-dom/server';
+
+const BLOCK_NAME = 'planet4-blocks/spreadsheet';
+
+const attributes = {
+  url: {
+    type: 'string',
+    default: '',
+  },
+  color: {
+    type: 'string',
+    default: 'grey',
+  },
+};
+
+const CSS_VARIABLES_ATTRIBUTE = {
+  type: 'object',
+  default: {},
+};
+
+export const registerSpreadsheetBlock = () => {
+  const {registerBlockType} = wp.blocks;
+  const {RawHTML} = wp.element;
+
+  registerBlockType(BLOCK_NAME, {
+    title: 'Spreadsheet',
+    icon: 'editor-table',
+    category: 'planet4-blocks',
+    attributes,
+    edit: SpreadsheetEditor,
+    save: props => {
+      const markup = renderToString(<div
+        data-hydrate={BLOCK_NAME}
+        data-attributes={JSON.stringify(props.attributes)}
+      >
+        <SpreadsheetFrontend {...props.attributes} />
+      </div>);
+      return <RawHTML>{markup}</RawHTML>;
+    },
+    deprecated: [
+      {
+        attributes,
+        save: frontendRendered(BLOCK_NAME),
+      },
+      {
+        attributes: {
+          url: {
+            type: 'string',
+            default: '',
+          },
+          css_variables: CSS_VARIABLES_ATTRIBUTE,
+        },
+        save() {
+          return null;
+        },
+      },
+    ],
+  });
+};

assets/src/blocks/Spreadsheet/SpreadsheetEditor.js

@@ -0,0 +1,107 @@
+import {useState} from '@wordpress/element';
+import {InspectorControls} from '@wordpress/block-editor';
+import ColorPaletteControl from '../../block-editor/ColorPaletteControl/ColorPaletteControl';
+import {SpreadsheetFrontend} from './SpreadsheetFrontend';
+import {debounce} from '@wordpress/compose';
+import {TextControl, PanelBody} from '@wordpress/components';
+
+const {__} = wp.i18n;
+
+const colors = [
+  {name: 'blue', color: '#167f82'},
+  {name: 'green', color: '#1f4912'},
+  {name: 'grey', color: '#45494c'},
+  {name: 'gp-green', color: '#198700'},
+];
+
+export const SpreadsheetEditor = ({
+  attributes,
+  setAttributes,
+  isSelected,
+}) => {
+  const [invalidSheetId, setInvalidSheetId] = useState(false);
+  const [url, setUrl] = useState(attributes.url);
+
+  const debounceUrl = debounce(newUrl => {
+    setAttributes({url: newUrl});
+  }, 300);
+
+  const toColorName = code => colors.find(color => color.color === code)?.name || 'grey';
+
+  const toColorCode = name => colors.find(color => color.name === name)?.color || '#ececec';
+
+  const renderEdit = () => (
+    <>
+      <InspectorControls>
+        <PanelBody title={__('Settings', 'planet4-blocks-backend')}>
+          <ColorPaletteControl
+            label={__('Table Color', 'planet4-blocks-backend')}
+            value={toColorCode(attributes.color)}
+            onChange={value => setAttributes({color: toColorName(value)})}
+            disableCustomColors
+            clearable={false}
+            options={colors}
+          />
+          <TextControl
+            label={__('Spreadsheet URL', 'planet4-blocks-backend')}
+            placeholder={__('Enter Google Spreadsheet URL', 'planet4-blocks-backend')}
+            value={url}
+            onChange={newUrl => {
+              setUrl(newUrl);
+              debounceUrl(newUrl);
+            }}
+          />
+          <div className="sidebar-blocks-help">
+            <ul>
+              <li>
+                {/* eslint-disable-next-line no-restricted-syntax */}
+                { __(`From Your Google Spreadsheet Table choose File -> Publish on web.
+                No need to choose the output format, any of them will work.
+                A pop-up window will show up, click on the Publish button and then OK when the confirmation message is displayed.
+                Copy the URL that is highlighted and paste it in this block.`, 'planet4-blocks-backend') }
+              </li>
+              <li>
+                {/* eslint-disable-next-line no-restricted-syntax */}
+                { __(`If you make changes to the sheet after publishing
+                  then these changes do not always immediately get reflected,
+                  even when "Automatically republish when changes are made" is checked.`, 'planet4-blocks-backend') }
+              </li>
+              <li>
+                {/* eslint-disable-next-line no-restricted-syntax */}
+                { __(`You can force an update by unpublishing and republishing the sheet.
+                  This will not change the sheet's public url.`, 'planet4-blocks-backend') }
+              </li>
+            </ul>
+          </div>
+        </PanelBody>
+      </InspectorControls>
+    </>
+  );
+
+  const renderView = () => (
+    <>
+      {!attributes.url ?
+        <div className="block-edit-mode-warning components-notice is-warning">
+          { __('No URL has been specified. Please edit the block and provide a Spreadsheet URL using the sidebar.', 'planet4-blocks-backend') }
+        </div> :
+        null
+      }
+
+      {attributes.url && invalidSheetId ?
+        <div className="block-edit-mode-warning components-notice is-error">
+          { __('The Spreadsheet URL appears to be invalid.', 'planet4-blocks-backend') }
+        </div> :
+        null
+      }
+
+      <SpreadsheetFrontend {...attributes} setInvalidSheetId={setInvalidSheetId} />
+    </>
+  );
+
+  return (
+    <>
+      {isSelected ? renderEdit() : null}
+      {renderView()}
+    </>
+  );
+};

assets/src/blocks/Spreadsheet/SpreadsheetEditorScript.js

@@ -0,0 +1,3 @@
+import {registerSpreadsheetBlock} from './SpreadsheetBlock';
+
+registerSpreadsheetBlock();