@plone/volto 14.0.2 → 14.1.0

package/src/components/manage/Widgets/SelectWidget.jsx

@@ -16,7 +16,7 @@ import {
 } from '@plone/volto/helpers';
 import { FormFieldWrapper } from '@plone/volto/components';
 import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
-import { normalizeValue } from './SelectUtils';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
 
 import {
   customSelectStyles,
@@ -107,6 +107,8 @@ class SelectWidget extends Component {
       PropTypes.object,
       PropTypes.string,
       PropTypes.bool,
+      PropTypes.func,
+      PropTypes.array,
     ]),
     onChange: PropTypes.func.isRequired,
     onBlur: PropTypes.func,
@@ -115,6 +117,8 @@ class SelectWidget extends Component {
     onDelete: PropTypes.func,
     wrapped: PropTypes.bool,
     noValueOption: PropTypes.bool,
+    customOptionStyling: PropTypes.any,
+    isMulti: PropTypes.bool,
   };
 
   /**
@@ -140,11 +144,7 @@ class SelectWidget extends Component {
     onEdit: null,
     onDelete: null,
     noValueOption: true,
-  };
-
-  state = {
-    // TODO: also take into account this.props.defaultValue?
-    selectedOption: normalizeValue(this.props.choices, this.props.value),
+    customOptionStyling: null,
   };
 
   /**
@@ -165,32 +165,14 @@ class SelectWidget extends Component {
     }
   }
 
-  componentDidUpdate() {
-    if (
-      !this.state.selectedOption &&
-      this.props.value &&
-      this.props.choices?.length > 0
-    ) {
-      const normalizedValue = normalizeValue(
-        this.props.choices,
-        this.props.value,
-      );
-
-      if (normalizedValue != null) {
-        this.setState({
-          selectedOption: normalizedValue,
-        });
-      }
-    }
-  }
-
   /**
    * Render method.
    * @method render
    * @returns {string} Markup for the component.
    */
   render() {
-    const { id, choices, onChange } = this.props;
+    const { id, choices, value, intl, onChange } = this.props;
+    const normalizedValue = normalizeValue(choices, value, intl);
     // Make sure that both disabled and isDisabled (from the DX layout feat work)
     const disabled = this.props.disabled || this.props.isDisabled;
     const Select = this.props.reactSelect.default;
@@ -216,6 +198,10 @@ class SelectWidget extends Component {
             : []),
         ];
 
+    const isMulti = this.props.isMulti
+      ? this.props.isMulti
+      : id === 'roles' || id === 'groups';
+
     return (
       <FormFieldWrapper {...this.props}>
         <Select
@@ -226,11 +212,7 @@ class SelectWidget extends Component {
           isSearchable={true}
           className="react-select-container"
           classNamePrefix="react-select"
-          isMulti={
-            this.props.isMulti
-              ? this.props.isMulti
-              : id === 'roles' || id === 'groups'
-          }
+          isMulti={isMulti}
           options={options}
           styles={customSelectStyles}
           theme={selectTheme}
@@ -240,12 +222,20 @@ class SelectWidget extends Component {
             }),
             DropdownIndicator,
             ClearIndicator,
-            Option,
+            Option: this.props.customOptionStyling || Option,
           }}
-          value={this.state.selectedOption}
-          placeholder={this.props.intl.formatMessage(messages.select)}
+          value={normalizedValue}
+          placeholder={
+            this.props.placeholder ??
+            this.props.intl.formatMessage(messages.select)
+          }
           onChange={(selectedOption) => {
-            this.setState({ selectedOption });
+            if (isMulti) {
+              return onChange(
+                id,
+                selectedOption.map((el) => el.value),
+              );
+            }
             return onChange(
               id,
               selectedOption && selectedOption.value !== 'no-value'
@@ -263,7 +253,6 @@ class SelectWidget extends Component {
 export const SelectWidgetComponent = injectIntl(SelectWidget);
 
 export default compose(
-  injectIntl,
   injectLazyLibs(['reactSelect']),
   connect(
     (state, props) => {
@@ -298,4 +287,4 @@ export default compose(
     },
     { getVocabulary, getVocabularyTokenTitle },
   ),
-)(SelectWidget);
+)(SelectWidgetComponent);

package/src/components/manage/Widgets/SelectWidget.stories.jsx

@@ -1,30 +1,24 @@
 import React from 'react';
-import { SelectWidgetComponent } from './SelectWidget';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+import SelectWidget, { SelectWidgetComponent } from './SelectWidget';
+import WidgetStory from './story';
 
-const SelectComponent = injectLazyLibs(['reactSelect'])(SelectWidgetComponent);
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import checkSVG from '@plone/volto/icons/check.svg';
+import { Icon } from '@plone/volto/components';
 
-const Select = (args) => {
-  const [value, setValue] = React.useState(args.value ?? '');
-  const onChange = (block, value) => {
-    // args.onChange({ value });
-    setValue(value);
-  };
+import bellRingingSVG from '@plone/volto/icons/bell-ringing.svg';
+import blogSVG from '@plone/volto/icons/blog.svg';
+import bookSVG from '@plone/volto/icons/book.svg';
 
-  return (
-    <Wrapper>
-      <SelectComponent {...args} onChange={onChange} value={value} />
-    </Wrapper>
-  );
-};
-
-export const Default = Select.bind({});
+export const Default = WidgetStory.bind({
+  widget: SelectWidget,
+});
 Default.args = {
   id: 'field-empty',
   title: 'field 1 title',
   description: 'Optional help text',
   placeholder: 'Type something…',
+  isMulti: false,
   choices: [
     ['Foo', 'Foo'],
     ['Bar', 'Bar'],
@@ -32,7 +26,9 @@ Default.args = {
   ],
 };
 
-export const Required = Select.bind({});
+export const Required = WidgetStory.bind({
+  widget: SelectWidget,
+});
 Required.args = {
   id: 'field-empty',
   title: 'field 1 title',
@@ -46,7 +42,9 @@ Required.args = {
   required: true,
 };
 
-export const Filled = Select.bind({});
+export const Filled = WidgetStory.bind({
+  widget: SelectWidget,
+});
 Filled.args = {
   id: 'field-filled',
   title: 'Filled field title',
@@ -61,7 +59,9 @@ Filled.args = {
   required: true,
 };
 
-export const Errored = Select.bind({});
+export const Errored = WidgetStory.bind({
+  widget: SelectWidget,
+});
 Errored.args = {
   id: 'field-errored',
   title: 'Errored field title',
@@ -88,7 +88,9 @@ Errored.args = {
   required: true,
 };
 
-export const NoPlaceholder = Select.bind({});
+export const NoPlaceholder = WidgetStory.bind({
+  widget: SelectWidget,
+});
 NoPlaceholder.args = {
   id: 'field-without-novalue',
   title: 'Field title',
@@ -101,7 +103,9 @@ NoPlaceholder.args = {
   required: true,
 };
 
-export const WithoutNoValueOption = Select.bind({});
+export const WithoutNoValueOption = WidgetStory.bind({
+  widget: SelectWidget,
+});
 WithoutNoValueOption.args = {
   id: 'field-without-novalue',
   title: 'Field title',
@@ -116,7 +120,9 @@ WithoutNoValueOption.args = {
   noValueOption: false,
 };
 
-export const VocabularyBased = Select.bind({});
+export const VocabularyBased = WidgetStory.bind({
+  widget: SelectWidget,
+});
 VocabularyBased.args = {
   id: 'field-vocab-based',
   title: 'field title',
@@ -143,7 +149,9 @@ VocabularyBased.args = {
   vocabBaseUrl: 'https://anapivocabularyURL',
 };
 
-export const Disabled = Select.bind({});
+export const Disabled = WidgetStory.bind({
+  widget: SelectWidget,
+});
 Disabled.args = {
   id: 'field-disabled',
   title: 'Disabled field title',
@@ -159,7 +167,9 @@ const getOptionsGenerator = (count) => {
   return options;
 };
 
-export const ManyOptions1000 = Select.bind({});
+export const ManyOptions1000 = WidgetStory.bind({
+  widget: SelectWidget,
+});
 ManyOptions1000.args = {
   id: 'field-empty',
   title: 'field 1 title',
@@ -168,7 +178,9 @@ ManyOptions1000.args = {
   choices: getOptionsGenerator(1000),
 };
 
-export const ManyOptions500 = Select.bind({});
+export const ManyOptions500 = WidgetStory.bind({
+  widget: SelectWidget,
+});
 ManyOptions500.args = {
   id: 'field-empty',
   title: 'field 1 title',
@@ -177,9 +189,65 @@ ManyOptions500.args = {
   choices: getOptionsGenerator(500),
 };
 
+export const MultiSelection = WidgetStory.bind({
+  widget: SelectWidget,
+});
+MultiSelection.args = {
+  id: 'field-empty',
+  title: 'field 1 title',
+  description: 'Select multiple values',
+  placeholder: 'Type something…',
+  isMulti: true,
+  choices: [
+    ['Foo', 'Foo'],
+    ['Bar', 'Bar'],
+    ['FooBar', 'FooBar'],
+  ],
+};
+
+const Option = injectLazyLibs('reactSelect')((props) => {
+  const { Option } = props.reactSelect.components;
+  const icons = {
+    FooBar: bellRingingSVG,
+    Bar: blogSVG,
+    Foo: bookSVG,
+  };
+  return (
+    <Option {...props}>
+      <div>
+        {icons[props.value] && <Icon name={icons[props.value]} size="24px" />}
+        {props.label}
+      </div>
+      {props.isFocused && !props.isSelected && (
+        <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+      )}
+      {props.isSelected && <Icon name={checkSVG} size="24px" color="#007bc1" />}
+    </Option>
+  );
+});
+
+export const CustomOptions = WidgetStory.bind({
+  widget: SelectWidget,
+  props: {
+    customOptionStyling: Option,
+  },
+});
+CustomOptions.args = {
+  id: 'field-empty',
+  title: 'field 1 title',
+  description: 'Select a value',
+  placeholder: 'Type something…',
+  isMulti: false,
+  choices: [
+    ['Foo', 'Foo'],
+    ['Bar', 'Bar'],
+    ['FooBar', 'FooBar'],
+  ],
+};
+
 export default {
   title: 'Widgets/Select Widget',
-  component: SelectComponent,
+  component: SelectWidgetComponent,
   decorators: [
     (Story) => (
       <div style={{ width: '400px' }}>

package/src/components/manage/Widgets/TextWidget.stories.jsx

@@ -1,28 +1,11 @@
 import React from 'react';
 import TextWidget from './TextWidget';
-import Wrapper from '@plone/volto/storybook';
+import WidgetStory from './story';
 
-const TextWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState('');
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <TextWidget
-          {...args}
-          id="field"
-          title="Text"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
-    </Wrapper>
-  );
-};
-
-export const Text = TextWidgetComponent.bind({});
+export const Text = WidgetStory.bind({
+  props: { id: 'text', title: 'Text' },
+  widget: TextWidget,
+});
 
 export default {
   title: 'Widgets/Text',

package/src/components/manage/Widgets/TextareaWidget.stories.jsx

@@ -1,28 +1,11 @@
 import React from 'react';
 import TextareaWidget from './TextareaWidget';
-import Wrapper from '@plone/volto/storybook';
+import WidgetStory from './story';
 
-const TextareaWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState('');
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <TextareaWidget
-          {...args}
-          id="field"
-          title="Textarea"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
-    </Wrapper>
-  );
-};
-
-export const Textarea = TextareaWidgetComponent.bind({});
+export const Textarea = WidgetStory.bind({
+  props: { id: 'textarea', title: 'Text area', block: 'block' },
+  widget: TextareaWidget,
+});
 
 export default {
   title: 'Widgets/Textarea',

package/src/components/manage/Widgets/TokenWidget.jsx

@@ -1,6 +1,6 @@
 /**
- * ArrayWidget component.
- * @module components/manage/Widgets/ArrayWidget
+ * TokenWidget component.
+ * @module components/manage/Widgets/TokenWidget
  */
 
 import React, { Component } from 'react';
@@ -39,6 +39,11 @@ const messages = defineMessages({
 
 /**
  * TokenWidget component class.
+ *
+ * Because new terms are created through the web by using the widget, the token
+ * widget conflates the meaning of token, label and value and assumes they can
+ * be used interchangeably.
+ *
  * @class TokenWidget
  * @extends Component
  */
@@ -95,12 +100,6 @@ class TokenWidget extends Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-
-    this.state = {
-      selectedOption: props.value
-        ? props.value.map((item) => ({ label: item, value: item }))
-        : [],
-    };
   }
 
   /**
@@ -109,11 +108,13 @@ class TokenWidget extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    this.props.getVocabulary({
-      vocabNameOrURL: this.props.vocabBaseUrl,
-      size: -1,
-      subrequest: this.props.intl.locale,
-    });
+    if (!this.props.choices?.length) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.intl.locale,
+      });
+    }
   }
 
   /**
@@ -124,7 +125,6 @@ class TokenWidget extends Component {
    * @returns {undefined}
    */
   handleChange(selectedOption) {
-    this.setState({ selectedOption });
     this.props.onChange(
       this.props.id,
       selectedOption ? selectedOption.map((item) => item.label) : null,
@@ -137,11 +137,13 @@ class TokenWidget extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { selectedOption } = this.state;
+    const selectedOption = this.props.value
+      ? this.props.value.map((item) => ({ label: item, value: item }))
+      : [];
+
     const defaultOptions = (this.props.choices || [])
       .filter(
-        (item) =>
-          !this.state.selectedOption.find(({ label }) => label === item.label),
+        (item) => !selectedOption.find(({ label }) => label === item.label),
       )
       .map((item) => ({
         label: item.label || item.value,

package/src/components/manage/Widgets/TokenWidget.stories.jsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import TokenWidget from './TokenWidget';
+
+import WidgetStory from './story';
+
+const vocabBaseUrl = 'https://anapivocabularyURL';
+
+const defaults = {
+  widget: TokenWidget,
+  props: {
+    widgetOptions: {
+      vocabulary: {
+        '@id': vocabBaseUrl,
+      },
+    },
+  },
+  customStore: {
+    userSession: { token: '1234' },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    vocabularies: {
+      [vocabBaseUrl]: {
+        subrequests: {
+          en: {
+            items: [
+              { value: 'foo', label: 'Foo' },
+              { value: 'bar', label: 'Bar' },
+              { value: 'fooBar', label: 'FooBar' },
+            ],
+          },
+        },
+      },
+    },
+  },
+};
+
+export const Default = WidgetStory.bind(defaults);
+Default.args = {
+  id: 'field-empty',
+  title: 'field 1 title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+  vocabBaseUrl,
+};
+
+export const Required = WidgetStory.bind(defaults);
+Required.args = {
+  id: 'field-empty',
+  title: 'field 1 title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+  required: true,
+  vocabBaseUrl,
+};
+
+export const Filled = WidgetStory.bind(defaults);
+Filled.args = {
+  id: 'field-filled',
+  title: 'Filled field title',
+  description: 'Optional help text',
+  value: ['Foo'],
+  placeholder: 'Type something…',
+  required: true,
+  vocabBaseUrl,
+};
+
+export const Errored = WidgetStory.bind(defaults);
+Errored.args = {
+  id: 'field-errored',
+  title: 'Errored field title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+  // Simplest example in Plone - a "hardcoded, hand made" vocab using SimpleVocabulary/SimpleTerm
+  // allow_discussion = schema.Choice(
+  //     title=_(u'Allow discussion'),
+  //     description=_(u'Allow discussion for this content object.'),
+  //     vocabulary=SimpleVocabulary([
+  //       SimpleTerm(value=True, title=_(u'Yes')),
+  //       SimpleTerm(value=False, title=_(u'No')),
+  //     ]),
+  //     required=False,
+  //     default=None,
+  // )
+  value: ['Foo'],
+  error: ['This is the error'],
+  required: true,
+  vocabBaseUrl,
+};
+
+export const NoPlaceholder = WidgetStory.bind(defaults);
+NoPlaceholder.args = {
+  id: 'field-without-novalue',
+  title: 'Field title',
+  description: 'This field has no value option',
+  required: true,
+  vocabBaseUrl,
+};
+
+export const WithoutNoValueOption = WidgetStory.bind(defaults);
+WithoutNoValueOption.args = {
+  id: 'field-without-novalue',
+  title: 'Field title',
+  description: 'This field has no value option',
+  placeholder: 'something…',
+  required: true,
+  noValueOption: false,
+  vocabBaseUrl,
+};
+
+export const Disabled = WidgetStory.bind(defaults);
+Disabled.args = {
+  id: 'field-disabled',
+  title: 'Disabled field title',
+  description: 'This select field is disabled',
+  disabled: true,
+  vocabBaseUrl,
+};
+
+export default {
+  title: 'Widgets/Token',
+  component: TokenWidget,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    // controlled value prop
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  // excludeStories: ['searchResults'],
+  // subcomponents: { ArgsTable },
+};

package/src/components/manage/Widgets/UrlWidget.stories.jsx

@@ -1,28 +1,12 @@
 import React from 'react';
 import UrlWidgetDefault, { UrlWidget } from './UrlWidget';
-import Wrapper from '@plone/volto/storybook';
 
-const UrlWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState('');
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <UrlWidgetDefault
-          {...args}
-          id="field"
-          title="Url"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
-    </Wrapper>
-  );
-};
+import WidgetStory from './story';
 
-export const Url = UrlWidgetComponent.bind({});
+export const Url = WidgetStory.bind({
+  props: { id: 'align', title: 'URL' },
+  widget: UrlWidgetDefault,
+});
 
 export default {
   title: 'Widgets/Url',