@plone/volto 18.0.0-alpha.8 → 18.0.0

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

@@ -1,15 +1,10 @@
-/**
- * DatetimeWidget component.
- * @module components/manage/Widgets/DatetimeWidget
- */
-import React, { Component } from 'react';
-import { compose } from 'redux';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
 import loadable from '@loadable/component';
 import cx from 'classnames';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { parseDateTime, toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
@@ -49,6 +44,7 @@ const PrevIcon = () => (
     <Icon name={leftKey} size="30px" />
   </div>
 );
+
 const NextIcon = () => (
   <div
     style={{
@@ -71,68 +67,53 @@ const defaultTimeDateOnly = {
   second: 0,
 };
 
-/**
- * DatetimeWidget component class
- * @class DatetimeWidget
- * @extends Component
- *
- * To use it, in schema properties, declare a field like:
- *
- * ```jsx
- * {
- *  title: "Publish date",
- *  type: 'datetime',
- * }
- * ```
- */
-export class DatetimeWidgetComponent extends Component {
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs DatetimeWidget
-   */
-  constructor(props) {
-    super(props);
-    this.moment = props.moment.default;
-
-    this.state = {
-      focused: false,
-      // if passed value matches the construction time, we guess it's a default
-      isDefault:
-        parseDateTime(
-          toBackendLang(this.props.lang),
-          this.props.value,
-          undefined,
-          this.moment,
-        )?.toISOString() === this.moment().utc().toISOString(),
-    };
-  }
-
-  getInternalValue() {
-    return parseDateTime(
-      toBackendLang(this.props.lang),
-      this.props.value,
+const DatetimeWidgetComponent = (props) => {
+  const {
+    id,
+    resettable,
+    reactDates,
+    widgetOptions,
+    moment,
+    value,
+    onChange,
+    dateOnly,
+    widget,
+    noPastDates: propNoPastDates,
+    isDisabled,
+  } = props;
+
+  const intl = useIntl();
+  const lang = intl.locale;
+
+  const [focused, setFocused] = useState(false);
+  const [isDefault, setIsDefault] = useState(false);
+
+  const { SingleDatePicker } = reactDates;
+
+  useEffect(() => {
+    const parsedDateTime = parseDateTime(
+      toBackendLang(lang),
+      value,
       undefined,
-      this.moment,
+      moment.default,
+    );
+    setIsDefault(
+      parsedDateTime?.toISOString() === moment.default().utc().toISOString(),
     );
-  }
+  }, [value, lang, moment]);
 
-  getDateOnly() {
-    return this.props.dateOnly || this.props.widget === 'date';
-  }
+  const getInternalValue = () => {
+    return parseDateTime(toBackendLang(lang), value, undefined, moment.default);
+  };
+
+  const getDateOnly = () => {
+    return dateOnly || widget === 'date';
+  };
 
-  /**
-   * Update date storage
-   * @method onDateChange
-   * @param {Object} date updated momentjs Object for date
-   * @returns {undefined}
-   */
-  onDateChange = (date) => {
+  const onDateChange = (date) => {
     if (date) {
-      const moment = this.props.moment.default;
-      const isDateOnly = this.getDateOnly();
-      const base = (this.getInternalValue() || moment()).set({
+      const isDateOnly = getDateOnly();
+      const base = (getInternalValue() || moment.default()).set({
         year: date.year(),
         month: date.month(),
         date: date.date(),
@@ -141,125 +122,100 @@ export class DatetimeWidgetComponent extends Component {
       const dateValue = isDateOnly
         ? base.format('YYYY-MM-DD')
         : base.toISOString();
-      this.props.onChange(this.props.id, dateValue);
+      onChange(id, dateValue);
     }
-    this.setState({ isDefault: false });
+    setIsDefault(false);
   };
 
-  /**
-   * Update date storage
-   * @method onTimeChange
-   * @param {Object} time updated momentjs Object for time
-   * @returns {undefined}
-   */
-  onTimeChange = (time) => {
-    const moment = this.props.moment.default;
+  const onTimeChange = (time) => {
     if (time) {
-      const base = (this.getInternalValue() || moment()).set({
+      const base = (getInternalValue() || moment.default()).set({
         hours: time?.hours() ?? 0,
         minutes: time?.minutes() ?? 0,
         seconds: 0,
       });
       const dateValue = base.toISOString();
-      this.props.onChange(this.props.id, dateValue);
+      onChange(id, dateValue);
     }
   };
 
-  onResetDates = () => {
-    this.setState({ isDefault: false });
-    this.props.onChange(this.props.id, null);
+  const onResetDates = () => {
+    setIsDefault(false);
+    onChange(id, null);
   };
 
-  /**
-   * Handle SingleDatePicker focus
-   * @method onFocusChange
-   * @param {boolean} focused component focus state.
-   * @returns {undefined}
-   */
-  onFocusChange = ({ focused }) => this.setState({ focused });
-
-  render() {
-    const { id, resettable, intl, reactDates, widgetOptions, lang } =
-      this.props;
-    const noPastDates =
-      this.props.noPastDates || widgetOptions?.pattern_options?.noPastDates;
-    const moment = this.props.moment.default;
-    const datetime = this.getInternalValue();
-    const dateOnly = this.getDateOnly();
-    const { SingleDatePicker } = reactDates;
-
-    return (
-      <FormFieldWrapper {...this.props}>
-        <div className="date-time-widget-wrapper">
+  const onFocusChange = ({ focused }) => setFocused(focused);
+
+  const noPastDates =
+    propNoPastDates || widgetOptions?.pattern_options?.noPastDates;
+  const datetime = getInternalValue();
+  const isDateOnly = getDateOnly();
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div className="date-time-widget-wrapper">
+        <div
+          className={cx('ui input date-input', {
+            'default-date': isDefault,
+          })}
+        >
+          <SingleDatePicker
+            date={datetime}
+            disabled={isDisabled}
+            onDateChange={onDateChange}
+            focused={focused}
+            numberOfMonths={1}
+            {...(noPastDates ? {} : { isOutsideRange: () => false })}
+            onFocusChange={onFocusChange}
+            noBorder
+            displayFormat={moment.default
+              .localeData(toBackendLang(lang))
+              .longDateFormat('L')}
+            navPrev={<PrevIcon />}
+            navNext={<NextIcon />}
+            id={`${id}-date`}
+            placeholder={intl.formatMessage(messages.date)}
+          />
+        </div>
+        {!isDateOnly && (
           <div
-            className={cx('ui input date-input', {
-              'default-date': this.state.isDefault,
+            className={cx('ui input time-input', {
+              'default-date': isDefault,
             })}
           >
-            <SingleDatePicker
-              date={datetime}
-              disabled={this.props.isDisabled}
-              onDateChange={this.onDateChange}
-              focused={this.state.focused}
-              numberOfMonths={1}
-              {...(noPastDates ? {} : { isOutsideRange: () => false })}
-              onFocusChange={this.onFocusChange}
-              noBorder
-              displayFormat={moment
+            <TimePicker
+              disabled={isDisabled}
+              defaultValue={datetime}
+              value={datetime}
+              onChange={onTimeChange}
+              allowEmpty={false}
+              showSecond={false}
+              use12Hours={lang === 'en'}
+              id={`${id}-time`}
+              format={moment.default
                 .localeData(toBackendLang(lang))
-                .longDateFormat('L')}
-              navPrev={<PrevIcon />}
-              navNext={<NextIcon />}
-              id={`${id}-date`}
-              placeholder={intl.formatMessage(messages.date)}
+                .longDateFormat('LT')}
+              placeholder={intl.formatMessage(messages.time)}
+              focusOnOpen
+              placement="bottomRight"
             />
           </div>
-          {!dateOnly && (
-            <div
-              className={cx('ui input time-input', {
-                'default-date': this.state.isDefault,
-              })}
-            >
-              <TimePicker
-                disabled={this.props.isDisabled}
-                defaultValue={datetime}
-                value={datetime}
-                onChange={this.onTimeChange}
-                allowEmpty={false}
-                showSecond={false}
-                use12Hours={lang === 'en'}
-                id={`${id}-time`}
-                format={moment
-                  .localeData(toBackendLang(lang))
-                  .longDateFormat('LT')}
-                placeholder={intl.formatMessage(messages.time)}
-                focusOnOpen
-                placement="bottomRight"
-              />
-            </div>
-          )}
-          {resettable && (
-            <button
-              // FF needs that the type is "button" in order to not POST the form
-              type="button"
-              disabled={this.props.isDisabled || !datetime}
-              onClick={() => this.onResetDates()}
-              className="item ui noborder button"
-            >
-              <Icon name={clearSVG} size="24px" className="close" />
-            </button>
-          )}
-        </div>
-      </FormFieldWrapper>
-    );
-  }
-}
+        )}
+        {resettable && (
+          <button
+            type="button"
+            disabled={isDisabled || !datetime}
+            onClick={onResetDates}
+            className="item ui noborder button"
+          >
+            <Icon name={clearSVG} size="24px" className="close" />
+          </button>
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+};
 
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
 DatetimeWidgetComponent.propTypes = {
   id: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
@@ -274,11 +230,6 @@ DatetimeWidgetComponent.propTypes = {
   resettable: PropTypes.bool,
 };
 
-/**
- * Default properties.
- * @property {Object} defaultProps Default properties.
- * @static
- */
 DatetimeWidgetComponent.defaultProps = {
   description: null,
   required: false,
@@ -289,10 +240,6 @@ DatetimeWidgetComponent.defaultProps = {
   resettable: true,
 };
 
-export default compose(
-  injectLazyLibs(['reactDates', 'moment']),
-  connect((state) => ({
-    lang: state.intl.locale,
-  })),
-  injectIntl,
-)(DatetimeWidgetComponent);
+export default injectLazyLibs(['reactDates', 'moment'])(
+  DatetimeWidgetComponent,
+);

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

@@ -3,7 +3,7 @@
  * @module components/manage/Widgets/EmailWidget
  */
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Input } from 'semantic-ui-react';

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

@@ -9,7 +9,8 @@ import { Button, Image, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import loadable from '@loadable/component';
 import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';
@@ -84,8 +85,8 @@ const FileWidget = (props) => {
   const imgsrc = value?.download
     ? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
     : null || value?.data
-    ? `data:${value['content-type']};${value.encoding},${value.data}`
-    : null;
+      ? `data:${value['content-type']};${value.encoding},${value.data}`
+      : null;
 
   /**
    * Drop handler
@@ -112,7 +113,7 @@ const FileWidget = (props) => {
       if (imageMimetypes.includes(fields[1])) {
         setFileType(true);
         let imagePreview = document.getElementById(`field-${id}-image`);
-        imagePreview.src = reader.result;
+        if (imagePreview) imagePreview.src = reader.result;
       } else {
         setFileType(false);
       }
@@ -170,9 +171,14 @@ const FileWidget = (props) => {
         )}
       </Dropzone>
       <div className="field-file-name">
-        {value && value.filename}
+        {value && (
+          <UniversalLink href={value.download} download={true}>
+            {value.filename}
+          </UniversalLink>
+        )}
         {value && (
           <Button
+            type="button"
             icon
             basic
             className="delete-button"

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

@@ -8,6 +8,8 @@ import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react';
 import { map } from 'lodash';
 import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
+import LanguageSVG from '@plone/volto/icons/language.svg';
+import { Icon } from '@plone/volto/components';
 
 const messages = defineMessages({
   edit: {
@@ -22,6 +24,11 @@ const messages = defineMessages({
     id: 'Language independent field.',
     defaultMessage: 'Language independent field.',
   },
+  language_independent_icon_title: {
+    id: 'Language independent icon title',
+    defaultMessage:
+      'This is a language independent field. Any value you enter here will overwrite the corresponding field of all members of the translation group when you save this form.',
+  },
 });
 /**
  * FormFieldWrapper component class.
@@ -91,6 +98,9 @@ class FormFieldWrapper extends Component {
       noForInFieldLabel,
       multilingual_options,
     } = this.props;
+
+    const languageIndependent = multilingual_options?.language_independent;
+
     const wdg = (
       <>
         {this.props.children}
@@ -107,14 +117,12 @@ class FormFieldWrapper extends Component {
       <Form.Field
         inline
         required={required}
-        error={error.length > 0}
+        error={error && error.length > 0}
         className={cx(
           description ? 'help' : '',
           className,
           `field-wrapper-${id}`,
-          multilingual_options?.language_independent
-            ? 'language-independent-field'
-            : null,
+          languageIndependent ? 'language-independent-field' : null,
         )}
       >
         <Grid>
@@ -133,6 +141,18 @@ class FormFieldWrapper extends Component {
                       />
                     )}
                     {title}
+                    {languageIndependent && (
+                      <div className="languageIndependent-icon">
+                        <Icon
+                          title={intl.formatMessage(
+                            messages.language_independent_icon_title,
+                          )}
+                          name={LanguageSVG}
+                          size="24px"
+                          color="#555"
+                        />
+                      </div>
+                    )}
                   </label>
                 </div>
               </Grid.Column>