@plone/volto 18.0.0-alpha.41 → 18.0.0-alpha.43

package/src/components/manage/Blocks/Video/Edit.jsx

@@ -1,14 +1,8 @@
-/**
- * Edit video block.
- * @module components/manage/Blocks/Title/Edit
- */
-
-import React, { Component } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { Button, Input, Message } from 'semantic-ui-react';
 import cx from 'classnames';
-import { isEqual } from 'lodash';
 
 import { Icon, SidebarPortal, VideoSidebar } from '@plone/volto/components';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -16,7 +10,6 @@ import aheadSVG from '@plone/volto/icons/ahead.svg';
 import videoBlockSVG from '@plone/volto/components/manage/Blocks/Video/block-video.svg';
 import Body from '@plone/volto/components/manage/Blocks/Video/Body';
 import { withBlockExtensions } from '@plone/volto/helpers';
-import { compose } from 'redux';
 
 const messages = defineMessages({
   VideoFormDescription: {
@@ -29,183 +22,123 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Edit video block class.
- * @class Edit
- * @extends Component
- */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    handleKeyDown: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-
-    this.onChangeUrl = this.onChangeUrl.bind(this);
-    this.onSubmitUrl = this.onSubmitUrl.bind(this);
-    this.onKeyDownVariantMenuForm = this.onKeyDownVariantMenuForm.bind(this);
-    this.state = {
-      url: '',
-    };
-  }
-
-  /**
-   * Change url handler
-   * @method onChangeUrl
-   * @param {Object} target Target object
-   * @returns {undefined}
-   */
-  onChangeUrl({ target }) {
-    this.setState({
-      url: target.value,
-    });
-  }
+const Edit = (props) => {
+  const { data, block, onChangeBlock, selected } = props;
+  const intl = useIntl();
+  const [url, setUrl] = useState('');
 
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
+  const onChangeUrl = ({ target }) => {
+    setUrl(target.value);
+  };
 
-  /**
-   * Submit url handler
-   * @method onSubmitUrl
-   * @returns {undefined}
-   */
-  onSubmitUrl() {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      url: this.state.url,
+  const onSubmitUrl = useCallback(() => {
+    onChangeBlock(block, {
+      ...data,
+      url: url,
     });
-  }
+  }, [onChangeBlock, block, data, url]);
 
-  resetSubmitUrl = () => {
-    this.setState({
-      url: '',
-    });
+  const resetSubmitUrl = () => {
+    setUrl('');
   };
 
-  /**
-   * Keydown handler on Variant Menu Form
-   * This is required since the ENTER key is already mapped to a onKeyDown
-   * event and needs to be overriden with a child onKeyDown.
-   * @method onKeyDownVariantMenuForm
-   * @param {Object} e Event object
-   * @returns {undefined}
-   */
-  onKeyDownVariantMenuForm(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      this.onSubmitUrl();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      e.stopPropagation();
-      // TODO: Do something on ESC key
-    }
-  }
+  const onKeyDownVariantMenuForm = useCallback(
+    (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        onSubmitUrl();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        // TODO: Do something on ESC key
+      }
+    },
+    [onSubmitUrl],
+  );
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { data } = this.props;
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.intl.formatMessage(messages.VideoBlockInputPlaceholder);
-    return (
-      <div
-        className={cx(
-          'block video align',
-          {
-            selected: this.props.selected,
-            center: !Boolean(this.props.data.align),
-          },
-          this.props.data.align,
-        )}
-      >
-        {data.url ? (
-          <Body data={this.props.data} isEditMode={true} />
-        ) : (
-          <Message>
-            <center>
-              <img src={videoBlockSVG} alt="" />
-              <div className="toolbar-inner">
-                <Input
-                  onKeyDown={this.onKeyDownVariantMenuForm}
-                  onChange={this.onChangeUrl}
-                  placeholder={placeholder}
-                  value={this.state.url}
-                  // Prevents propagation to the Dropzone and the opening
-                  // of the upload browser dialog
-                  onClick={(e) => e.stopPropagation()}
-                />
-                {this.state.url && (
-                  <Button.Group>
-                    <Button
-                      basic
-                      className="cancel"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        this.setState({ url: '' });
-                      }}
-                    >
-                      <Icon name={clearSVG} size="30px" />
-                    </Button>
-                  </Button.Group>
-                )}
+  const placeholder = useMemo(
+    () =>
+      data.placeholder ||
+      intl.formatMessage(messages.VideoBlockInputPlaceholder),
+    [intl, data],
+  );
+
+  return (
+    <div
+      className={cx(
+        'block video align',
+        {
+          selected: selected,
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      {data.url ? (
+        <Body data={data} isEditMode={true} />
+      ) : (
+        <Message>
+          <center>
+            <img src={videoBlockSVG} alt="" />
+            <div className="toolbar-inner">
+              <Input
+                onKeyDown={onKeyDownVariantMenuForm}
+                onChange={onChangeUrl}
+                placeholder={placeholder}
+                value={url}
+                // Prevents propagation to the Dropzone and the opening
+                // of the upload browser dialog
+                onClick={(e) => e.stopPropagation()}
+              />
+              {url && (
                 <Button.Group>
                   <Button
                     basic
-                    primary
+                    className="cancel"
                     onClick={(e) => {
                       e.stopPropagation();
-                      this.onSubmitUrl();
+                      setUrl('');
                     }}
                   >
-                    <Icon name={aheadSVG} size="30px" />
+                    <Icon name={clearSVG} size="30px" />
                   </Button>
                 </Button.Group>
-              </div>
-            </center>
-          </Message>
-        )}
-        <SidebarPortal selected={this.props.selected}>
-          <VideoSidebar {...this.props} resetSubmitUrl={this.resetSubmitUrl} />
-        </SidebarPortal>
-      </div>
-    );
-  }
-}
+              )}
+              <Button.Group>
+                <Button
+                  basic
+                  primary
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onSubmitUrl();
+                  }}
+                >
+                  <Icon name={aheadSVG} size="30px" />
+                </Button>
+              </Button.Group>
+            </div>
+          </center>
+        </Message>
+      )}
+      <SidebarPortal selected={selected}>
+        <VideoSidebar {...props} resetSubmitUrl={resetSubmitUrl} />
+      </SidebarPortal>
+    </div>
+  );
+};
+
+Edit.propTypes = {
+  selected: PropTypes.bool.isRequired,
+  block: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  onSelectBlock: PropTypes.func.isRequired,
+  onDeleteBlock: PropTypes.func.isRequired,
+  onFocusPreviousBlock: PropTypes.func.isRequired,
+  onFocusNextBlock: PropTypes.func.isRequired,
+  handleKeyDown: PropTypes.func.isRequired,
+};
 
-export default compose(injectIntl, withBlockExtensions)(Edit);
+export default withBlockExtensions(Edit);

package/src/components/manage/Blocks/Video/Edit.stories.jsx

@@ -0,0 +1,57 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import VideoComponent from './Edit';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlVideoComponent = injectIntl(VideoComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlVideoComponent
+        data={{
+          ...args,
+          '@type': 'video',
+        }}
+        selected={false}
+        block="1234"
+        onChangeBlock={() => {}}
+        onSelectBlock={() => {}}
+        onDeleteBlock={() => {}}
+        onFocusPreviousBlock={() => {}}
+        onFocusNextBlock={() => {}}
+        handleKeyDown={() => {}}
+        index={1}
+      />
+    </Wrapper>
+  );
+}
+
+export const Video = StoryComponent.bind({});
+
+Video.args = {
+  url: 'https://www.youtube.com/watch?v=ayjNbKju-8s',
+};
+
+export default {
+  title: 'Public components/Video/Video',
+  component: Video,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    // controlled value prop
+  },
+};

package/src/components/manage/Blocks/Video/VideoSidebar.jsx

@@ -18,7 +18,8 @@ const messages = defineMessages({
 });
 
 const VideoSidebar = (props) => {
-  const { data, block, onChangeBlock, navRoot, contentType } = props;
+  const { data, block, blocksErrors, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = VideoBlockSchema({ ...props, intl });
 
@@ -44,6 +45,7 @@ const VideoSidebar = (props) => {
           block={block}
           navRoot={navRoot}
           contentType={contentType}
+          errors={blocksErrors}
         />
       )}
     </>

package/src/components/manage/Contents/Contents.jsx

@@ -156,7 +156,7 @@ const messages = defineMessages({
     defaultMessage: 'Item(s) has been updated.',
   },
   messageReorder: {
-    id: 'Item succesfully moved.',
+    id: 'Item successfully moved.',
     defaultMessage: 'Item successfully moved.',
   },
   messagePasted: {
@@ -1532,6 +1532,9 @@ class Contents extends Component {
                     onCancel={this.onPropertiesCancel}
                     onOk={this.onPropertiesOk}
                     items={this.state.selected}
+                    values={map(this.state.selected, (id) =>
+                      find(this.state.items, { '@id': id }),
+                    ).filter((item) => item)}
                   />
                   {this.state.showWorkflow && (
                     <ContentsWorkflowModal

package/src/components/manage/Contents/ContentsBreadcrumbs.stories.jsx

@@ -0,0 +1,46 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ContentsBreadcrumbsComponent from './ContentsBreadcrumbs';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlContentBreadcrumbsComponent = injectIntl(
+  ContentsBreadcrumbsComponent,
+);
+const breadcrumbs = [
+  { title: 'Blog', url: '/blog' },
+  { title: 'My first blog', url: '/blog/my-first-blog' },
+];
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlContentBreadcrumbsComponent
+        {...args}
+        pathname="/blog"
+        items={breadcrumbs}
+      />
+    </Wrapper>
+  );
+}
+
+export const ContentBreadcrumbs = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/Contents/Content Breadcrumbs',
+  component: ContentBreadcrumbs,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

package/src/components/manage/Contents/ContentsPropertiesModal.jsx

@@ -1,12 +1,14 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty, map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
+import { cloneDeepSchema } from '@plone/volto/helpers/Utils/Utils';
 import { updateContent } from '@plone/volto/actions';
 import { ModalForm } from '@plone/volto/components/manage/Form';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   properties: {
@@ -65,12 +67,83 @@ const messages = defineMessages({
 });
 
 const ContentsPropertiesModal = (props) => {
-  const { onCancel, onOk, open, items } = props;
+  const { onCancel, onOk, open, items, values } = props;
   const intl = useIntl();
   const dispatch = useDispatch();
   const request = useSelector((state) => state.content.update);
   const prevrequestloading = usePrevious(request.loading);
 
+  const baseSchema = {
+    fieldsets: [
+      {
+        id: 'default',
+        title: intl.formatMessage(messages.default),
+        fields: [
+          'effective',
+          'expires',
+          'rights',
+          'creators',
+          'exclude_from_nav',
+        ],
+      },
+    ],
+    properties: {
+      effective: {
+        description: intl.formatMessage(messages.effectiveDescription),
+        title: intl.formatMessage(messages.effectiveTitle),
+        type: 'string',
+        widget: 'datetime',
+      },
+      expires: {
+        description: intl.formatMessage(messages.expiresDescription),
+        title: intl.formatMessage(messages.expiresTitle),
+        type: 'string',
+        widget: 'datetime',
+      },
+      rights: {
+        description: intl.formatMessage(messages.rightsDescription),
+        title: intl.formatMessage(messages.rightsTitle),
+        type: 'string',
+        widget: 'textarea',
+      },
+      creators: {
+        description: intl.formatMessage(messages.creatorsDescription),
+        title: intl.formatMessage(messages.creatorsTitle),
+        type: 'array',
+      },
+      exclude_from_nav: {
+        description: intl.formatMessage(messages.excludeFromNavDescription),
+        title: intl.formatMessage(messages.excludeFromNavTitle),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+  const schemaEnhancer = config.settings.contentPropertiesSchemaEnhancer;
+  let schema = schemaEnhancer
+    ? schemaEnhancer({
+        schema: cloneDeepSchema(baseSchema),
+        intl,
+      })
+    : baseSchema;
+
+  const initialData = {};
+  if (values?.length) {
+    for (const name of Object.keys(schema.properties)) {
+      const firstValue = values[0][name];
+      // should not show floor or ceiling dates
+      if (
+        (name === 'effective' && firstValue && firstValue <= '1970') ||
+        (name === 'expires' && firstValue && firstValue >= '2499')
+      ) {
+        continue;
+      }
+      if (values.every((item) => item[name] === firstValue)) {
+        initialData[name] = firstValue;
+      }
+    }
+  }
+
   useEffect(() => {
     if (prevrequestloading && request.loaded) {
       onOk();
@@ -78,13 +151,19 @@ const ContentsPropertiesModal = (props) => {
   }, [onOk, prevrequestloading, request.loaded]);
 
   const onSubmit = (data) => {
-    if (isEmpty(data)) {
+    let changes = {};
+    for (const name of Object.keys(data)) {
+      if (data[name] !== initialData[name]) {
+        changes[name] = data[name];
+      }
+    }
+    if (isEmpty(changes)) {
       onOk();
     } else {
       dispatch(
         updateContent(
           items,
-          map(items, () => data),
+          map(items, () => changes),
         ),
       );
     }
@@ -97,54 +176,8 @@ const ContentsPropertiesModal = (props) => {
         onSubmit={onSubmit}
         onCancel={onCancel}
         title={intl.formatMessage(messages.properties)}
-        schema={{
-          fieldsets: [
-            {
-              id: 'default',
-              title: intl.formatMessage(messages.default),
-              fields: [
-                'effective',
-                'expires',
-                'rights',
-                'creators',
-                'exclude_from_nav',
-              ],
-            },
-          ],
-          properties: {
-            effective: {
-              description: intl.formatMessage(messages.effectiveDescription),
-              title: intl.formatMessage(messages.effectiveTitle),
-              type: 'string',
-              widget: 'datetime',
-            },
-            expires: {
-              description: intl.formatMessage(messages.expiresDescription),
-              title: intl.formatMessage(messages.expiresTitle),
-              type: 'string',
-              widget: 'datetime',
-            },
-            rights: {
-              description: intl.formatMessage(messages.rightsDescription),
-              title: intl.formatMessage(messages.rightsTitle),
-              type: 'string',
-              widget: 'textarea',
-            },
-            creators: {
-              description: intl.formatMessage(messages.creatorsDescription),
-              title: intl.formatMessage(messages.creatorsTitle),
-              type: 'array',
-            },
-            exclude_from_nav: {
-              description: intl.formatMessage(
-                messages.excludeFromNavDescription,
-              ),
-              title: intl.formatMessage(messages.excludeFromNavTitle),
-              type: 'boolean',
-            },
-          },
-          required: [],
-        }}
+        schema={schema}
+        formData={initialData}
       />
     )
   );