@eeacms/volto-clms-theme 1.0.105 → 1.0.108

package/CHANGELOG.md

@@ -4,8 +4,39 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.108](https://github.com/eea/volto-clms-theme/compare/1.0.107...1.0.108)
+
+- EmailWidget fix [`cd56839`](https://github.com/eea/volto-clms-theme/commit/cd5683951ae27f7ceb51703593e898e33928bf0e)
+
+#### [1.0.107](https://github.com/eea/volto-clms-theme/compare/1.0.106...1.0.107)
+
+> 14 July 2022
+
+- Develop [`#278`](https://github.com/eea/volto-clms-theme/pull/278)
+- Minor fixes [`#277`](https://github.com/eea/volto-clms-theme/pull/277)
+- remove unused import [`dc57cf5`](https://github.com/eea/volto-clms-theme/commit/dc57cf5d5a3c1537edd762854be35ae076fc0359)
+- unify related items in one component [`87fa84f`](https://github.com/eea/volto-clms-theme/commit/87fa84f78c06ec666b2a5ae720e6faa76df9ed1d)
+- show related products/datasets always [`a35faad`](https://github.com/eea/volto-clms-theme/commit/a35faad04dc54e78afa9fc47fe9545ff7fe36303)
+- show only File items [`abb4859`](https://github.com/eea/volto-clms-theme/commit/abb48592819a4bf338fc34aebdc1f1ecd920a226)
+
+#### [1.0.106](https://github.com/eea/volto-clms-theme/compare/1.0.105...1.0.106)
+
+> 13 July 2022
+
+- Develop [`#276`](https://github.com/eea/volto-clms-theme/pull/276)
+- new field types for form [`a452429`](https://github.com/eea/volto-clms-theme/commit/a452429eff799806d58e05e3e4164bc885d6eeb9)
+- handle SelectWidget choices until the vocabulary is loaded [`0614fb5`](https://github.com/eea/volto-clms-theme/commit/0614fb584f52571d15e37fbe921e0694594a01f4)
+- EmailWidget fix and ImageWidget created for form block [`fc1d16b`](https://github.com/eea/volto-clms-theme/commit/fc1d16baf2466dec09d835147fc3df839811e409)
+- lint fix [`af5f960`](https://github.com/eea/volto-clms-theme/commit/af5f9605ec147cb010245a58696087abaed55c35)
+- EmailWidget override for correct anguage and size limitation [`8a6c253`](https://github.com/eea/volto-clms-theme/commit/8a6c253f590fcf753d1a274e8ab7767f366d8c1e)
+- number of current filters [`195cc43`](https://github.com/eea/volto-clms-theme/commit/195cc43d351d0e9793a0f462ecf8bdf9433a1def)
+- subscription modal block [`30db876`](https://github.com/eea/volto-clms-theme/commit/30db876826dd53db6bbb11507de11af10a71a4eb)
+
 #### [1.0.105](https://github.com/eea/volto-clms-theme/compare/1.0.104...1.0.105)
 
+> 11 July 2022
+
+- Develop [`#275`](https://github.com/eea/volto-clms-theme/pull/275)
 - File card [`#274`](https://github.com/eea/volto-clms-theme/pull/274)
 - sort items taxonomy items [`#272`](https://github.com/eea/volto-clms-theme/pull/272)
 - Changes in download cart [`#271`](https://github.com/eea/volto-clms-theme/pull/271)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.105",
+  "version": "1.0.108",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclSubscriptionBlock/SubscriptionEdit.jsx

@@ -1,4 +1,4 @@
-import { SubscriptionView } from '@eeacms/volto-clms-theme/components/CLMSSubscriptionView';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import { SidebarPortal } from '@plone/volto/components';
 import { SubscriptionSchema } from './schema';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
@@ -16,7 +16,7 @@ const SubscriptionBlockEdit = (props) => {
           aria-hidden="true"
         />
       </div>
-      <SubscriptionView type={data.type || 'events'} />
+      <CclButton mode={'filled'}>{data.title || 'Text example...'}</CclButton>
       <SidebarPortal selected={selected}>
         <InlineForm
           schema={SubscriptionSchema()}

package/src/components/Blocks/CclSubscriptionBlock/SubscriptionView.jsx

@@ -1,9 +1,20 @@
 import { SubscriptionView } from '@eeacms/volto-clms-theme/components/CLMSSubscriptionView';
+import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 
 const SubscriptionBlockView = (props) => {
   const { data } = props;
 
-  return <SubscriptionView type={data.type || 'events'} />;
+  return (
+    <CclModal
+      trigger={
+        <CclButton mode={'filled'}>{data.title || 'Text example...'}</CclButton>
+      }
+      size="small"
+    >
+      <SubscriptionView type={data.type || 'events'} />
+    </CclModal>
+  );
 };
 
 export default SubscriptionBlockView;

package/src/components/Blocks/CclSubscriptionBlock/schema.js

@@ -4,7 +4,7 @@ export const SubscriptionSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['type'],
+      fields: ['type', 'title'],
     },
   ],
   properties: {
@@ -16,6 +16,10 @@ export const SubscriptionSchema = () => ({
         ['newsletter', 'newsletter'],
       ],
     },
+    title: {
+      title: 'Title',
+      type: 'string',
+    },
   },
   required: ['product'],
 });

package/src/components/Blocks/CustomTemplates/VoltoFormBlock/VocabularyWidget.jsx

@@ -45,11 +45,13 @@ const VocabularyWidget = ({
       getVocabulary={() => {}}
       getVocabularyTokenTitle={() => {}}
       choices={
-        vocabItems?.loaded && [
-          ...vocabItems.items.map((item) => {
-            return [item.label, item.label];
-          }),
-        ]
+        vocabItems?.loaded
+          ? [
+              ...vocabItems.items.map((item) => {
+                return [item.label, item.label];
+              }),
+            ]
+          : []
       }
       value={value}
       onChange={onChange}

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/FilterList.jsx

@@ -25,7 +25,7 @@ const FilterList = (props) => {
         (v) =>
           v[1] &&
           baseFacets.length > 0 &&
-          !baseFacets.map((bf) => bf.field?.value).includes(v[0]),
+          baseFacets.map((bf) => bf.field?.value).includes(v[0]),
       ),
   );
 

package/src/components/Blocks/customBlocks.js

@@ -65,6 +65,7 @@ import homeBand from '@plone/volto/icons/image-wide.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import navSVG from '@plone/volto/icons/nav.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
+import ImageWidget from '@eeacms/volto-clms-theme/components/Widgets/ImageWidget';
 
 export const customGroupBlocksOrder = [
   {
@@ -474,6 +475,31 @@ const customBlocks = (config) => ({
             isMulti: true,
           }),
       },
+      {
+        id: 'topic_vocabulary',
+        label: 'Topics Vocabulary',
+        component: (props) =>
+          VocabularyWidget({
+            ...props,
+            vocabulary: 'clms.types.TopicsVocabulary',
+            isMulti: true,
+          }),
+      },
+      {
+        id: 'spatial_coverage_vocabulary',
+        label: 'Spatial Coverage Vocabulary',
+        component: (props) =>
+          VocabularyWidget({
+            ...props,
+            vocabulary: 'clms.types.UseCaseSpatialCoverageVocabulary',
+            isMulti: true,
+          }),
+      },
+      {
+        id: 'image_field_widget',
+        label: 'Image Field Widget',
+        component: ImageWidget,
+      },
     ],
   },
 });

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -1,7 +1,7 @@
 import './meetingstyles.less';
 
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { Header, Image, Message, Segment, Grid } from 'semantic-ui-react';
+import { Header, Image, Message, Segment } from 'semantic-ui-react';
 import { Icon, Toast } from '@plone/volto/components';
 import {
   Recurrence,
@@ -23,6 +23,7 @@ import CclListingCards from '@eeacms/volto-clms-theme/components/Blocks/CustomTe
 import config from '@plone/volto/registry';
 import AnimateHeight from 'react-animate-height';
 import { Accordion } from 'semantic-ui-react';
+import { CLMSRelatedItems } from '../CLMSRelatedItems';
 
 export const CLMSMeetingView = (props) => {
   const { content, intl } = props;
@@ -112,15 +113,9 @@ export const CLMSMeetingView = (props) => {
     );
     history.push(props.location.pathname + '/form');
   }
-
-  const files =
-    content.items !== undefined
-      ? content.items.map((item) => (item['@type'] === 'File' ? item : null))
-      : [];
-  const index = files.indexOf(null);
-  if (index > -1) {
-    files.splice(index, 1);
-  }
+  const files = content.items
+    ? content.items.filter((item) => item['@type'] === 'File')
+    : [];
   const RegistrationButton = ({ rContent, rMeeting_register, rIsLoggedIn }) => {
     return (
       <>
@@ -425,6 +420,7 @@ export const CLMSMeetingView = (props) => {
         )}
         <StringToHTML string={content.text?.data || ''} />
         <LightGalleryListing />
+
         {files.length > 0 && (
           <CclListingCards
             variation="file"
@@ -456,36 +452,7 @@ export const CLMSMeetingView = (props) => {
               </Accordion.Title>
               <Accordion.Content active={activeIndex.includes(0)}>
                 <AnimateHeight animateOpacity duration={500} height={'auto'}>
-                  <ul>
-                    {content.products.map((product, key) => (
-                      <li key={key}>
-                        <Grid columns={2}>
-                          <Grid.Column width={2}>
-                            {product.image_field && (
-                              <img
-                                src={
-                                  product.image_field
-                                    ? `${product['@id']}/@@images/image`
-                                    : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                                }
-                                alt={
-                                  product.image_field
-                                    ? product.image?.filename
-                                    : 'Placeholder'
-                                }
-                              />
-                            )}
-                          </Grid.Column>
-                          <Grid.Column width={10}>
-                            <a href={product['@id']}>
-                              <strong>{product.title}</strong>
-                            </a>
-                            <p>{product.description}</p>
-                          </Grid.Column>
-                        </Grid>
-                      </li>
-                    ))}
-                  </ul>
+                  <CLMSRelatedItems items={content.products} />
                 </AnimateHeight>
               </Accordion.Content>
             </Accordion>
@@ -512,36 +479,7 @@ export const CLMSMeetingView = (props) => {
               </Accordion.Title>
               <Accordion.Content active={activeDatasetIndex.includes(0)}>
                 <AnimateHeight animateOpacity duration={500} height={'auto'}>
-                  <ul>
-                    {content.datasets.map((dataset, key) => (
-                      <li key={key}>
-                        <Grid columns={2}>
-                          <Grid.Column width={2}>
-                            {dataset.image_field && (
-                              <img
-                                src={
-                                  dataset.image_field
-                                    ? `${dataset['@id']}/@@images/image`
-                                    : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                                }
-                                alt={
-                                  dataset.image_field
-                                    ? dataset.image?.filename
-                                    : 'Placeholder'
-                                }
-                              />
-                            )}
-                          </Grid.Column>
-                          <Grid.Column width={10}>
-                            <a href={dataset['@id']}>
-                              <strong>{dataset.title}</strong>
-                            </a>
-                            <p>{dataset.description}</p>
-                          </Grid.Column>
-                        </Grid>
-                      </li>
-                    ))}
-                  </ul>
+                  <CLMSRelatedItems items={content.datasets} />
                 </AnimateHeight>
               </Accordion.Content>
             </Accordion>

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -8,18 +8,14 @@ import CclListingCards from '@eeacms/volto-clms-theme/components/Blocks/CustomTe
 import config from '@plone/volto/registry';
 import { Icon } from '@plone/volto/components';
 import AnimateHeight from 'react-animate-height';
-import { Accordion, Grid } from 'semantic-ui-react';
+import { Accordion } from 'semantic-ui-react';
+import { CLMSRelatedItems } from '../CLMSRelatedItems';
 
 const CLMSNewsItemView = (props) => {
   const { content } = props;
-  const files =
-    content.items !== undefined
-      ? content.items.map((item) => (item['@type'] === 'File' ? item : null))
-      : [];
-  const index = files.indexOf(null);
-  if (index > -1) {
-    files.splice(index, 1);
-  }
+  const files = content.items
+    ? content.items.filter((item) => item['@type'] === 'File')
+    : [];
   const [activeIndex, setActiveIndex] = React.useState([99]);
 
   const handleClick = ({ index }) => {
@@ -80,128 +76,58 @@ const CLMSNewsItemView = (props) => {
               <StringToHTML string={content.text?.data || ''} />
             </div>
             <LightGalleryListing />
-            {files.length > 0 && (
-              <CclListingCards
-                variation="file"
-                items={files}
-                linkHref={`${files['@id']}/@@download/file`}
-              />
-            )}
-            {content?.products?.length > 0 && (
-              <Accordion fluid styled>
-                <Accordion.Title
-                  as={'h2'}
-                  onClick={() => handleClick({ index: 0 })}
-                  className={'accordion-title align-arrow-right'}
-                >
-                  {activeIndex.includes(0) ? (
-                    <Icon
-                      name={iconName(content, titleIcons.opened)}
-                      size="24px"
-                    />
-                  ) : (
-                    <Icon
-                      name={iconName(content, titleIcons.closed)}
-                      size="24px"
-                    />
-                  )}
-                  <span>Related products</span>
-                </Accordion.Title>
-                <Accordion.Content active={activeIndex.includes(0)}>
-                  <AnimateHeight animateOpacity duration={500} height={'auto'}>
-                    <ul>
-                      {content.products.map((product, key) => (
-                        <li key={key}>
-                          <Grid columns={2}>
-                            <Grid.Column width={2}>
-                              {product.image_field && (
-                                <img
-                                  src={
-                                    product.image_field
-                                      ? `${product['@id']}/@@images/image`
-                                      : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                                  }
-                                  alt={
-                                    product.image_field
-                                      ? product.image?.filename
-                                      : 'Placeholder'
-                                  }
-                                />
-                              )}
-                            </Grid.Column>
-                            <Grid.Column width={10}>
-                              <a href={product['@id']}>
-                                <strong>{product.title}</strong>
-                              </a>
-                              <p>{product.description}</p>
-                            </Grid.Column>
-                          </Grid>
-                        </li>
-                      ))}
-                    </ul>
-                  </AnimateHeight>
-                </Accordion.Content>
-              </Accordion>
-            )}
-            {content?.datasets?.length > 0 && (
-              <Accordion fluid styled>
-                <Accordion.Title
-                  as={'h2'}
-                  onClick={() => handleDatasetClick({ datasetindex: 0 })}
-                  className={'accordion-title align-arrow-right'}
-                >
-                  {activeDatasetIndex.includes(0) ? (
-                    <Icon
-                      name={iconName(content, titleIcons.opened)}
-                      size="24px"
-                    />
-                  ) : (
-                    <Icon
-                      name={iconName(content, titleIcons.closed)}
-                      size="24px"
-                    />
-                  )}
-                  <span>Related datasets</span>
-                </Accordion.Title>
-                <Accordion.Content active={activeDatasetIndex.includes(0)}>
-                  <AnimateHeight animateOpacity duration={500} height={'auto'}>
-                    <ul>
-                      {content.datasets.map((dataset, key) => (
-                        <li key={key}>
-                          <Grid columns={2}>
-                            <Grid.Column width={2}>
-                              {dataset.image_field && (
-                                <img
-                                  src={
-                                    dataset.image_field
-                                      ? `${dataset['@id']}/@@images/image`
-                                      : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                                  }
-                                  alt={
-                                    dataset.image_field
-                                      ? dataset.image?.filename
-                                      : 'Placeholder'
-                                  }
-                                />
-                              )}
-                            </Grid.Column>
-                            <Grid.Column width={10}>
-                              <a href={dataset['@id']}>
-                                <strong>{dataset.title}</strong>
-                              </a>
-                              <p>{dataset.description}</p>
-                            </Grid.Column>
-                          </Grid>
-                        </li>
-                      ))}
-                    </ul>
-                  </AnimateHeight>
-                </Accordion.Content>
-              </Accordion>
-            )}
           </div>
         </>
       )}
+      {files.length > 0 && (
+        <CclListingCards
+          variation="file"
+          items={files}
+          linkHref={`${files['@id']}/@@download/file`}
+        />
+      )}
+      {content?.products?.length > 0 && (
+        <Accordion fluid styled>
+          <Accordion.Title
+            as={'h2'}
+            onClick={() => handleClick({ index: 0 })}
+            className={'accordion-title align-arrow-right'}
+          >
+            {activeIndex.includes(0) ? (
+              <Icon name={iconName(content, titleIcons.opened)} size="24px" />
+            ) : (
+              <Icon name={iconName(content, titleIcons.closed)} size="24px" />
+            )}
+            <span>Related products</span>
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex.includes(0)}>
+            <AnimateHeight animateOpacity duration={500} height={'auto'}>
+              <CLMSRelatedItems items={content.products} />
+            </AnimateHeight>
+          </Accordion.Content>
+        </Accordion>
+      )}
+      {content?.datasets?.length > 0 && (
+        <Accordion fluid styled>
+          <Accordion.Title
+            as={'h2'}
+            onClick={() => handleDatasetClick({ datasetindex: 0 })}
+            className={'accordion-title align-arrow-right'}
+          >
+            {activeDatasetIndex.includes(0) ? (
+              <Icon name={iconName(content, titleIcons.opened)} size="24px" />
+            ) : (
+              <Icon name={iconName(content, titleIcons.closed)} size="24px" />
+            )}
+            <span>Related datasets</span>
+          </Accordion.Title>
+          <Accordion.Content active={activeDatasetIndex.includes(0)}>
+            <AnimateHeight animateOpacity duration={500} height={'auto'}>
+              <CLMSRelatedItems items={content.datasets} />
+            </AnimateHeight>
+          </Accordion.Content>
+        </Accordion>
+      )}
     </div>
   );
 };

package/src/components/CLMSRelatedItems/CLMSRelatedItems.jsx

@@ -0,0 +1,39 @@
+import { Grid, Image } from 'semantic-ui-react';
+import PlaceHolder from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-thumbnail-placeholder.jpg';
+
+const CLMSRelatedItems = (props) => {
+  const { items } = props;
+
+  return (
+    <>
+      {items.map((item, key) => (
+        <>
+          <Grid columns="2">
+            <Grid.Column width={3} key={key}>
+              {item.mage_field ? (
+                <Image
+                  src={`${item['@id']}/@@images/image/mini`}
+                  alt={item?.title || 'Placeholder'}
+                />
+              ) : (
+                <Image
+                  fluid="true"
+                  src={PlaceHolder}
+                  alt={item?.title || 'Placeholder'}
+                />
+              )}
+            </Grid.Column>
+            <Grid.Column width={9}>
+              <a href={item['@id']}>
+                <strong>{item.title}</strong>
+              </a>
+              {item?.description && <p>{item.description}</p>}
+            </Grid.Column>
+          </Grid>
+        </>
+      ))}
+    </>
+  );
+};
+
+export { CLMSRelatedItems };

package/src/components/CLMSRelatedItems/index.js

@@ -0,0 +1,3 @@
+import { CLMSRelatedItems } from './CLMSRelatedItems';
+
+export { CLMSRelatedItems };

package/src/components/CclModal/CclModal.jsx

@@ -27,7 +27,7 @@ function CclModal(props) {
       onOpen={() => openModal()}
       open={open}
       trigger={trigger}
-      className={'modal-clms'}
+      className={'modal-clms-container'}
       size={size}
     >
       <div className={'modal-close modal-clms-close'}>

package/src/components/Widgets/ImageWidget.jsx

@@ -0,0 +1,239 @@
+/**
+ * FileWidget component.
+ * @module components/manage/Widgets/FileWidget
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+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 loadable from '@loadable/component';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { defineMessages, useIntl } from 'react-intl';
+
+const imageMimetypes = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/jpg',
+  'image/gif',
+  'image/svg+xml',
+];
+const Dropzone = loadable(() => import('react-dropzone'));
+
+const messages = defineMessages({
+  releaseDrag: {
+    id: 'Drop images here ...',
+    defaultMessage: 'Drop images here ...',
+  },
+  editFile: {
+    id: 'Drop image here to replace the existing image',
+    defaultMessage: 'Drop image here to replace the existing image',
+  },
+  fileDrag: {
+    id: 'Drop image here to upload a new image',
+    defaultMessage: 'Drop image here to upload a new image',
+  },
+  replaceFile: {
+    id: 'Replace existing image',
+    defaultMessage: 'Replace existing image',
+  },
+  addNewFile: {
+    id: 'Choose a image',
+    defaultMessage: 'Choose a image',
+  },
+  invalid_file: {
+    id: 'The uploaded file is not valid',
+    defaultMessage: 'The uploaded file must be an image',
+  },
+});
+
+/**
+ * FileWidget component class.
+ * @function FileWidget
+ * @returns {string} Markup of the component.
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "File",
+ *  widget: 'file',
+ * }
+ * ```
+ * or:
+ *
+ * ```jsx
+ * {
+ *  title: "File",
+ *  type: 'object',
+ * }
+ * ```
+ *
+ */
+const FileWidget = (props) => {
+  const { id, value, onChange } = props;
+  const [fileType, setFileType] = React.useState(false);
+  const intl = useIntl();
+
+  React.useEffect(() => {
+    if (value && imageMimetypes.includes(value['content-type'])) {
+      setFileType(true);
+    }
+  }, [value]);
+
+  const imgsrc = value?.download
+    ? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
+    : null || value?.data
+    ? `data:${value['content-type']};${value.encoding},${value.data}`
+    : null;
+
+  /**
+   * Drop handler
+   * @method onDrop
+   * @param {array} files File objects
+   * @returns {undefined}
+   */
+  const onDrop = (files) => {
+    const file = files[0];
+    readAsDataURL(file).then((data) => {
+      const fields = data.match(/^data:(.*);(.*),(.*)$/);
+      if (
+        fields[0] !== 'image/png' ||
+        'image/jpeg' ||
+        'image/webp' ||
+        'image/jpg' ||
+        'image/gif' ||
+        'image/svg+xml'
+      ) {
+        // eslint-disable-next-line no-alert
+        alert(intl.formatMessage(messages.invalid_file));
+        return;
+      } else {
+        onChange(id, {
+          data: fields[3],
+          encoding: fields[2],
+          'content-type': fields[1],
+          filename: file.name,
+        });
+      }
+    });
+
+    let reader = new FileReader();
+    reader.onload = function () {
+      const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
+      if (imageMimetypes.includes(fields[1])) {
+        setFileType(true);
+        let imagePreview = document.getElementById(`field-${id}-image`);
+        imagePreview.src = reader.result;
+      } else {
+        setFileType(false);
+      }
+    };
+    reader.readAsDataURL(files[0]);
+  };
+
+  return (
+    <FormFieldWrapper {...props}>
+      <Dropzone onDrop={onDrop}>
+        {({ getRootProps, getInputProps, isDragActive }) => (
+          <div className="file-widget-dropzone" {...getRootProps()}>
+            {isDragActive && <Dimmer active></Dimmer>}
+            {fileType ? (
+              <Image
+                className="image-preview"
+                id={`field-${id}-image`}
+                size="small"
+                src={imgsrc}
+              />
+            ) : (
+              <div className="dropzone-placeholder">
+                {isDragActive ? (
+                  <p className="dropzone-text">
+                    {intl.formatMessage(messages.releaseDrag)}
+                  </p>
+                ) : value ? (
+                  <p className="dropzone-text">
+                    {intl.formatMessage(messages.editFile)}
+                  </p>
+                ) : (
+                  <p className="dropzone-text">
+                    {intl.formatMessage(messages.fileDrag)}
+                  </p>
+                )}
+              </div>
+            )}
+
+            <label className="label-file-widget-input">
+              {value
+                ? intl.formatMessage(messages.replaceFile)
+                : intl.formatMessage(messages.addNewFile)}
+            </label>
+            <input
+              {...getInputProps({
+                type: 'file',
+                style: { display: 'none' },
+              })}
+              id={`field-${id}`}
+              name={id}
+              type="file"
+            />
+          </div>
+        )}
+      </Dropzone>
+      <div className="field-file-name">
+        {value && value.filename}
+        {value && (
+          <Button
+            icon
+            basic
+            className="delete-button"
+            aria-label="delete file"
+            onClick={() => {
+              onChange(id, null);
+              setFileType(false);
+            }}
+          >
+            <Icon name={deleteSVG} size="20px" />
+          </Button>
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+FileWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.shape({
+    '@type': PropTypes.string,
+    title: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  wrapped: PropTypes.bool,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+FileWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+};
+
+export default injectIntl(FileWidget);

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

@@ -0,0 +1,126 @@
+/**
+ * EmailWidget component.
+ * @module components/manage/Widgets/EmailWidget
+ */
+
+import { FormFieldWrapper } from '@plone/volto/components';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+/** EmailWidget, a widget for email addresses
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Email",
+ *  widget: 'email',
+ * }
+ * ```
+ */
+const EmailWidget = (props) => {
+  const {
+    id,
+    value = '',
+    onChange,
+    onBlur,
+    onClick,
+    minLength,
+    placeholder,
+    isDisabled,
+  } = props;
+  const inputId = `field-${id}`;
+  const intl = useIntl();
+
+  const messages = defineMessages({
+    invalid_email: {
+      id: 'The entered email address is not valid',
+      defaultMessage: 'The entered email address is not valid',
+    },
+  });
+
+  const email =
+    typeof window !== 'undefined' && document.getElementById(inputId) !== null
+      ? document.getElementById(inputId).value
+      : '';
+  // email.addEventListener('input', function (e) {
+  React.useEffect(() => {
+    if (email !== '') {
+      if (email.validity !== undefined) {
+        if (email.validity.typeMismatch) {
+          email.setCustomValidity(intl.formatMessage(messages.invalid_email));
+          email.reportValidity();
+        } else {
+          email.setCustomValidity('');
+        }
+      }
+    } else {
+      return;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [email.value]);
+  // });
+
+  return (
+    <FormFieldWrapper {...props} className="email">
+      <input
+        className="ui input"
+        id={inputId}
+        name={id}
+        type="email"
+        value={value || ''}
+        disabled={isDisabled}
+        placeholder={placeholder}
+        onChange={({ target }) =>
+          onChange(id, target.value === '' ? undefined : target.value)
+        }
+        onBlur={({ target }) =>
+          onBlur(id, target.value === '' ? undefined : target.value)
+        }
+        onClick={() => onClick()}
+        minLength={minLength || null}
+        maxLength={200}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+/**
+ * Property types
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+EmailWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+  placeholder: PropTypes.string,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+EmailWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+  minLength: null,
+  maxLength: null,
+};
+
+export default EmailWidget;