@plone/volto 14.0.2 → 14.2.1

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

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { find, isObject, isArray } from 'lodash';
+import { find, isObject } from 'lodash';
 
 import {
   getVocabFromHint,
@@ -56,10 +56,79 @@ function arrayMove(array, from, to) {
   return slicedArray;
 }
 
+function normalizeArrayValue(choices, value) {
+  if (!value || !Array.isArray(value)) return [];
+  if (value.length === 0) return value;
+
+  if (typeof value[0] === 'string') {
+    // raw value like ['foo', 'bar']
+    return value.map((v) => {
+      return {
+        label: find(choices, (c) => c.value === v)?.label || v,
+        value: v,
+      };
+    });
+  }
+
+  if (
+    isObject(value[0]) &&
+    Object.keys(value[0]).includes('token') // Array of objects, w/ label+value
+  ) {
+    return value
+      .map((v) => {
+        const item = find(choices, (c) => c.value === v.token);
+        return item
+          ? {
+              label: item.label || item.title || item.token,
+              value: v.token,
+            }
+          : {
+              // avoid a crash if choices doesn't include this item
+              label: v.label,
+              value: v.token,
+            };
+      })
+      .filter((f) => !!f);
+  }
+
+  return [];
+}
+
+function normalizeChoices(choices) {
+  if (Array.isArray(choices) && choices.length && Array.isArray(choices[0])) {
+    return choices.map((option) => ({
+      value: option[0],
+      label:
+        // Fix "None" on the serializer, to remove when fixed in p.restapi
+        option[1] !== 'None' && option[1] ? option[1] : option[0],
+    }));
+  }
+
+  return choices;
+}
+
 /**
  * ArrayWidget component class.
  * @class ArrayWidget
  * @extends Component
+ *
+ * A createable select array widget will be rendered if the named vocabulary is
+ * in the widget definition (hint) like:
+ *
+ * ```
+ * list_field_voc_unconstrained = schema.List(
+ *     title=u"List field with values from vocabulary but not constrained to them.",
+ *     description=u"zope.schema.List",
+ *     value_type=schema.TextLine(),
+ *     required=False,
+ *     missing_value=[],
+ * )
+ * directives.widget(
+ *     "list_field_voc_unconstrained",
+ *     AjaxSelectFieldWidget,
+ *     vocabulary="plone.app.vocabularies.PortalTypes",
+ * )
+ * ```
  */
 class ArrayWidget extends Component {
   /**
@@ -88,6 +157,7 @@ class ArrayWidget extends Component {
     ),
     onChange: PropTypes.func.isRequired,
     wrapped: PropTypes.bool,
+    creatable: PropTypes.bool, //if widget has no vocab and you want to be creatable
   };
 
   /**
@@ -107,6 +177,7 @@ class ArrayWidget extends Component {
     error: [],
     choices: [],
     value: null,
+    creatable: false,
   };
 
   /**
@@ -119,18 +190,6 @@ class ArrayWidget extends Component {
     super(props);
 
     this.handleChange = this.handleChange.bind(this);
-
-    this.state = {
-      selectedOption: this.props.vocabBaseUrl
-        ? []
-        : props.value
-        ? props.value.map((item) =>
-            isObject(item)
-              ? { label: item.title || item.token, value: item.token }
-              : { label: item, value: item },
-          )
-        : [],
-    };
   }
 
   /**
@@ -150,64 +209,8 @@ class ArrayWidget extends Component {
         subrequest: this.props.intl.locale,
       });
     }
-    this.setDefaultValues();
-  }
-
-  componentDidUpdate() {
-    this.setDefaultValues();
   }
 
-  normalizeArrayValue = (choices, value) => {
-    // Array of tokens (on add, and on change tab in Tab component)
-    if (
-      value &&
-      isArray(value) &&
-      value.length > 0 &&
-      typeof value[0] === 'string'
-    ) {
-      return value.map((v) => {
-        return {
-          label: find(choices, (c) => c.value === v)?.label || v,
-          value: v,
-        };
-      });
-    }
-    // Array of objects, containing label,value
-    if (
-      value &&
-      isArray(value) &&
-      value.length > 0 &&
-      isObject(value[0]) &&
-      Object.keys(value[0]).includes('token')
-    ) {
-      return value.map((v) => {
-        return {
-          label: find(choices, (c) => c.value === v.token).label,
-          value: v.token,
-        };
-      });
-    }
-    return null;
-  };
-
-  setDefaultValues = () => {
-    if (
-      (this.state.selectedOption || []).length === 0 &&
-      this.props.value &&
-      this.props.choices?.length > 0
-    ) {
-      const normalizedValue = this.normalizeArrayValue(
-        this.props.choices,
-        this.props.value,
-      );
-      if (normalizedValue !== null) {
-        this.setState({
-          selectedOption: normalizedValue,
-        });
-      }
-    }
-  };
-
   /**
    * Handle the field change, store it in the local state and back to simple
    * array of tokens for correct serialization
@@ -216,21 +219,27 @@ class ArrayWidget extends Component {
    * @returns {undefined}
    */
   handleChange(selectedOption) {
-    this.setState({ selectedOption });
-
     this.props.onChange(
       this.props.id,
       selectedOption ? selectedOption.map((item) => item.value) : null,
     );
   }
 
+  onSortEnd = (selectedOption, { oldIndex, newIndex }) => {
+    const newValue = arrayMove(selectedOption, oldIndex, newIndex);
+
+    this.handleChange(newValue);
+  };
+
   /**
    * Render method.
    * @method render
    * @returns {string} Markup for the component.
    */
   render() {
-    const { selectedOption } = this.state;
+    const choices = normalizeChoices(this.props?.choices || []);
+    const selectedOption = normalizeArrayValue(choices, this.props.value);
+
     const CreatableSelect = this.props.reactSelectCreateable.default;
     const { SortableContainer } = this.props.reactSortableHOC;
     const Select = this.props.reactSelect.default;
@@ -249,42 +258,33 @@ class ArrayWidget extends Component {
       //     AjaxSelectFieldWidget,
       //     vocabulary="plone.app.vocabularies.PortalTypes",
       // )
-      this.props?.choices && !getVocabFromHint(this.props)
+      this.props?.choices &&
+      !getVocabFromHint(this.props) &&
+      !this.props.creatable
         ? SortableContainer(Select)
         : SortableContainer(CreatableSelect);
 
-    const onSortEnd = ({ oldIndex, newIndex }) => {
-      const newValue = arrayMove(this.state.selectedOption, oldIndex, newIndex);
-
-      this.setState({ selectedOption: newValue });
-    };
-
     return (
       <FormFieldWrapper {...this.props}>
         <SortableSelect
           useDragHandle
           // react-sortable-hoc props:
           axis="xy"
-          onSortEnd={onSortEnd}
+          onSortEnd={this.onSortEnd}
           distance={4}
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
           getHelperDimensions={({ node }) => node.getBoundingClientRect()}
           id={`field-${this.props.id}`}
           key={this.props.id}
-          isDisabled={this.props.isDisabled}
+          isDisabled={this.props.disabled || this.props.isDisabled}
           className="react-select-container"
           classNamePrefix="react-select"
           options={
             this.props.vocabBaseUrl
-              ? this.props.choices
+              ? choices
               : this.props.choices
               ? [
-                  ...this.props.choices.map((option) => ({
-                    value: option[0],
-                    label:
-                      // Fix "None" on the serializer, to remove when fixed in p.restapi
-                      option[1] !== 'None' && option[1] ? option[1] : option[0],
-                  })),
+                  ...choices,
                   ...(this.props.noValueOption && !this.props.default
                     ? [
                         {

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

@@ -1,70 +1,47 @@
 import React from 'react';
-import { ArrayWidgetComponent } from './ArrayWidget';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+import ArrayWidget, { ArrayWidgetComponent } from './ArrayWidget';
+import WidgetStory from './story';
 
-const ArrayComponent = injectLazyLibs([
-  'reactSelectCreateable',
-  'reactSortableHOC',
-])(ArrayWidgetComponent);
+const choices = [
+  ['foo', 'Foo'],
+  ['bar', 'Bar'],
+  ['fooBar', 'FooBar'],
+];
 
-const Array = (args) => {
-  const [value, setValue] = React.useState(args.value ?? '');
-  const onChange = (block, value) => {
-    // args.onChange({ value });
-    setValue(value);
-  };
-
-  return (
-    <Wrapper>
-      <ArrayComponent {...args} onChange={onChange} value={value} />
-    </Wrapper>
-  );
-};
-
-export const Default = Array.bind({});
+export const Default = WidgetStory.bind({ widget: ArrayWidget });
 Default.args = {
   id: 'field-empty',
   title: 'field 1 title',
   description: 'Optional help text',
   placeholder: 'Type something…',
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
+  choices,
 };
 
-export const Required = Array.bind({});
+export const Required = WidgetStory.bind({ widget: ArrayWidget });
 Required.args = {
   id: 'field-empty',
   title: 'field 1 title',
   description: 'Optional help text',
   placeholder: 'Type something…',
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
+  choices,
   required: true,
 };
 
-export const Filled = Array.bind({});
+export const Filled = WidgetStory.bind({
+  widget: ArrayWidget,
+  props: { value: ['foo'] },
+});
 Filled.args = {
   id: 'field-filled',
   title: 'Filled field title',
   description: 'Optional help text',
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
-  value: ['Foo'],
+  choices,
+  value: ['foo'],
   placeholder: 'Type something…',
   required: true,
 };
 
-export const Errored = Array.bind({});
+export const Errored = WidgetStory.bind({ widget: ArrayWidget });
 Errored.args = {
   id: 'field-errored',
   title: 'Errored field title',
@@ -81,45 +58,33 @@ Errored.args = {
   //     required=False,
   //     default=None,
   // )
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
+  choices,
   value: ['Foo'],
   error: ['This is the error'],
   required: true,
 };
 
-export const NoPlaceholder = Array.bind({});
+export const NoPlaceholder = WidgetStory.bind({ widget: ArrayWidget });
 NoPlaceholder.args = {
   id: 'field-without-novalue',
   title: 'Field title',
   description: 'This field has no value option',
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
+  choices,
   required: true,
 };
 
-export const WithoutNoValueOption = Array.bind({});
+export const WithoutNoValueOption = WidgetStory.bind({ widget: ArrayWidget });
 WithoutNoValueOption.args = {
   id: 'field-without-novalue',
   title: 'Field title',
   description: 'This field has no value option',
   placeholder: 'something…',
-  choices: [
-    ['Foo', 'Foo'],
-    ['Bar', 'Bar'],
-    ['FooBar', 'FooBar'],
-  ],
+  choices,
   required: true,
   noValueOption: false,
 };
 
-export const VocabularyBased = Array.bind({});
+export const VocabularyBased = WidgetStory.bind({ widget: ArrayWidget });
 VocabularyBased.args = {
   id: 'field-vocab-based',
   title: 'field title',
@@ -146,7 +111,7 @@ VocabularyBased.args = {
   vocabBaseUrl: 'https://anapivocabularyURL',
 };
 
-export const Disabled = Array.bind({});
+export const Disabled = WidgetStory.bind({ widget: ArrayWidget });
 Disabled.args = {
   id: 'field-disabled',
   title: 'Disabled field title',
@@ -154,15 +119,23 @@ Disabled.args = {
   disabled: true,
 };
 
+export const Creatable = WidgetStory.bind({ widget: ArrayWidget });
+Creatable.args = {
+  id: 'field-creatable',
+  title: 'Field with creatable',
+  description: 'Allows creation of new terms',
+  creatable: true,
+};
+
 const getOptionsGenerator = (count) => {
   const options = [];
   for (let i = 0; i < count; i = i + 1) {
-    options.push([i, `Option ${i}`]);
+    options.push([i.toString(), `Option ${i}`]);
   }
   return options;
 };
 
-export const ManyOptions1000 = Array.bind({});
+export const ManyOptions1000 = WidgetStory.bind({ widget: ArrayWidget });
 ManyOptions1000.args = {
   id: 'field-empty',
   title: 'field 1 title',
@@ -171,7 +144,7 @@ ManyOptions1000.args = {
   choices: getOptionsGenerator(1000),
 };
 
-export const ManyOptions500 = Array.bind({});
+export const ManyOptions500 = WidgetStory.bind({ widget: ArrayWidget });
 ManyOptions500.args = {
   id: 'field-empty',
   title: 'field 1 title',
@@ -182,7 +155,7 @@ ManyOptions500.args = {
 
 export default {
   title: 'Widgets/Array',
-  component: ArrayComponent,
+  component: ArrayWidgetComponent,
   decorators: [
     (Story) => (
       <div style={{ width: '400px' }}>

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

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