Updated DiscodataComponents

package.json

@@ -18,6 +18,7 @@
     "@eeacms/volto-metadata-block",
     "@eeacms/volto-tabs-block",
     "@eeacms/volto-grid-block",
+    "@eeacms/volto-widget-toggle",
     "volto-addons",
     "volto-datablocks"
   ],
@@ -111,6 +112,7 @@
     "@eeacms/volto-metadata-block": "github:eea/volto-metadata-block#0.2.0",
     "@eeacms/volto-slate-metadata-mentions": "github:eea/volto-slate-metadata-mentions#0.2.0",
     "@eeacms/volto-tabs-block": "github:eea/volto-tabs-block#0.2.2",
+    "@eeacms/volto-widget-toggle": "github:eea/volto-widget-toggle#0.1.0",
     "@eeacms/volto-widgets-view": "github:eea/volto-widgets-view#0.2.4",
     "@plone/volto": "github:eea/volto#7.11.1-beta.1",
     "@tinymce/tinymce-react": "^3.6.0",
@@ -119,12 +121,14 @@
     "ol": "^6.4.3",
     "performant-array-to-tree": "^1.7.1",
     "react": "^16.13.1",
+    "react-color": "^2.18.1",
     "react-component-queries": "^2.3.0",
     "react-dom": "^16.13.1",
     "react-highlight-words": "^0.16.0",
     "react-iframe": "^1.8.0",
     "react-loadable": "^5.5.0",
     "react-sizeme": "^2.6.12",
+    "react-tooltip": "^4.2.9",
     "react-visibility-sensor": "^5.1.1",
     "volto-slate": "github:eea/volto-slate#0.6.0.beta.1"
   },

src/components/manage/Blocks/DiscodataComponents/Button/Edit.jsx

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import _uniqueId from 'lodash/uniqueId';
+import RenderFields from 'volto-addons/Widgets/RenderFields';
+import View from './View';
+import { settings } from '~/config';
+
+const getSchema = (props) => {
+  return {
+    queryParam: {
+      title: 'Query parameter',
+      type: 'text',
+    },
+    visible: {
+      title: 'Visible when',
+      type: 'array',
+      choices: [
+        ['hasQuery', 'Query parameter exists'],
+        ['always', 'Always'],
+      ],
+    },
+    leftText: {
+      title: 'Left text',
+      widget: 'textarea',
+    },
+    rightText: {
+      title: 'Right text',
+      widget: 'textarea',
+    },
+    color: {
+      title: 'Color',
+      type: 'text',
+    },
+    component: {
+      title: 'Component type',
+      type: 'array',
+      choices: [
+        ['h1', 'H1'],
+        ['h2', 'H2'],
+        ['h3', 'H3'],
+        ['p', 'Paragraph'],
+      ],
+    },
+  };
+};
+
+const Edit = (props) => {
+  const [state, setState] = useState({
+    schema: getSchema({ ...props, providerUrl: settings.providerUrl }),
+    id: _uniqueId('block_'),
+  });
+  return (
+    <div>
+      <RenderFields
+        schema={state.schema}
+        {...props}
+        title="Query param text block"
+        noValueKey={true}
+      />
+      <View {...props} id={state.id} mode="edit" />
+    </div>
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    pathname: state.router.location.pathname,
+  })),
+)(Edit);

src/components/manage/Blocks/DiscodataComponents/Button/View.jsx

@@ -0,0 +1,78 @@
+/* REACT */
+import React, { useState } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+
+function isColor(strColor) {
+  return /^#[0-9A-F]{6}$/i.test(strColor);
+}
+
+const components = {
+  h1: (text, color) => (
+    <h1 className="query-param-text" style={{ color: color }}>
+      {text}
+    </h1>
+  ),
+  h2: (text, color) => (
+    <h2 className="query-param-text" style={{ color: color }}>
+      {text}
+    </h2>
+  ),
+  h3: (text, color) => (
+    <h3 className="query-param-text" style={{ color: color }}>
+      {text}
+    </h3>
+  ),
+  p: (text, color) => (
+    <p className="query-param-text" style={{ color: color }}>
+      {text}
+    </p>
+  ),
+};
+
+const View = ({ content, ...props }) => {
+  const { data } = props;
+  const {
+    visible = 'always',
+    component = 'h1',
+    queryParam = '',
+    leftText = '',
+    rightText = '',
+    color = '#000',
+  } = data;
+
+  const queryText = props.search[queryParam] || '';
+
+  const text = `${leftText} ${queryText} ${rightText}`;
+
+  const hasText = leftText || queryText || rightText;
+
+  const textMayRender =
+    (visible === 'always' && hasText) || (visible === 'hasQuery' && queryText);
+
+  return (
+    <>
+      {props.mode === 'edit' ? (
+        !textMayRender ? (
+          <p>Query param text</p>
+        ) : (
+          ''
+        )
+      ) : (
+        ''
+      )}
+      {textMayRender && components[component]
+        ? components[component](text, isColor(color) ? color : '#000')
+        : ''}
+    </>
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    query: state.router.location.search,
+    content:
+      state.prefetch?.[state.router.location.pathname] || state.content.data,
+    search: state.discodata_query.search,
+  })),
+)(View);

src/components/manage/Blocks/DiscodataComponents/Link/Edit.jsx

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import _uniqueId from 'lodash/uniqueId';
+import RenderFields from 'volto-addons/Widgets/RenderFields';
+import View from './View';
+import { settings } from '~/config';
+
+const getSchema = (props) => {
+  return {
+    queryParam: {
+      title: 'Query parameter',
+      type: 'text',
+    },
+    visible: {
+      title: 'Visible when',
+      type: 'array',
+      choices: [
+        ['hasQuery', 'Query parameter exists'],
+        ['always', 'Always'],
+      ],
+    },
+    leftText: {
+      title: 'Left text',
+      widget: 'textarea',
+    },
+    rightText: {
+      title: 'Right text',
+      widget: 'textarea',
+    },
+    color: {
+      title: 'Color',
+      type: 'text',
+    },
+    component: {
+      title: 'Component type',
+      type: 'array',
+      choices: [
+        ['h1', 'H1'],
+        ['h2', 'H2'],
+        ['h3', 'H3'],
+        ['p', 'Paragraph'],
+      ],
+    },
+  };
+};
+
+const Edit = (props) => {
+  const [state, setState] = useState({
+    schema: getSchema({ ...props, providerUrl: settings.providerUrl }),
+    id: _uniqueId('block_'),
+  });
+  return (
+    <div>
+      <RenderFields
+        schema={state.schema}
+        {...props}
+        title="Query param text block"
+        noValueKey={true}
+      />
+      <View {...props} id={state.id} mode="edit" />
+    </div>
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    pathname: state.router.location.pathname,
+  })),
+)(Edit);

src/components/manage/Blocks/DiscodataComponents/Link/View.jsx

@@ -0,0 +1,78 @@
+/* REACT */
+import React, { useState } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+
+function isColor(strColor) {
+  return /^#[0-9A-F]{6}$/i.test(strColor);
+}
+
+const components = {
+  h1: (text, color) => (
+    <h1 className="query-param-text" style={{ color: color }}>
+      {text}
+    </h1>
+  ),
+  h2: (text, color) => (
+    <h2 className="query-param-text" style={{ color: color }}>
+      {text}
+    </h2>
+  ),
+  h3: (text, color) => (
+    <h3 className="query-param-text" style={{ color: color }}>
+      {text}
+    </h3>
+  ),
+  p: (text, color) => (
+    <p className="query-param-text" style={{ color: color }}>
+      {text}
+    </p>
+  ),
+};
+
+const View = ({ content, ...props }) => {
+  const { data } = props;
+  const {
+    visible = 'always',
+    component = 'h1',
+    queryParam = '',
+    leftText = '',
+    rightText = '',
+    color = '#000',
+  } = data;
+
+  const queryText = props.search[queryParam] || '';
+
+  const text = `${leftText} ${queryText} ${rightText}`;
+
+  const hasText = leftText || queryText || rightText;
+
+  const textMayRender =
+    (visible === 'always' && hasText) || (visible === 'hasQuery' && queryText);
+
+  return (
+    <>
+      {props.mode === 'edit' ? (
+        !textMayRender ? (
+          <p>Query param text</p>
+        ) : (
+          ''
+        )
+      ) : (
+        ''
+      )}
+      {textMayRender && components[component]
+        ? components[component](text, isColor(color) ? color : '#000')
+        : ''}
+    </>
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    query: state.router.location.search,
+    content:
+      state.prefetch?.[state.router.location.pathname] || state.content.data,
+    search: state.discodata_query.search,
+  })),
+)(View);