fix: create new blockss

RedTurtle · Nov 20, 2023 · 18b721f · 18b721f
1 parent d9123f6
commit 18b721f
Show file tree

Hide file tree

Showing 26 changed files with 580 additions and 399 deletions.
diff --git a/src/components/Image/Image.jsx b/src/components/Image/Image.jsx
@@ -38,90 +38,91 @@ const Image = ({
   sizes = '100vw',
   ...imageProps
 }) => {
-  const { src, srcSet, width, height, aspectRatio } = getImageAttributes(
-    image,
-    {
-      itemUrl,
-      imageField,
-      maxSize,
-      useOriginal,
-      minSize,
-    },
-  );
-  const imageRef = useRef();
-  const [actualSrcSet, setActualSrcSet] = useState(
-    critical && srcSet ? srcSet.join(', ') : null,
-  );
-  // TODO: serve a qualcuno questo?
-  const imageHasLoaded = imageRef?.current?.complete;
+  if (image) {
+    const { src, srcSet, width, height, aspectRatio } = getImageAttributes(
+      image,
+      {
+        itemUrl,
+        imageField,
+        maxSize,
+        useOriginal,
+        minSize,
+      },
+    );
+    const imageRef = useRef();
+    const [actualSrcSet, setActualSrcSet] = useState(
+      critical && srcSet ? srcSet.join(', ') : null,
+    );
+    // TODO: serve a qualcuno questo?
+    const imageHasLoaded = imageRef?.current?.complete;
 
-  //picture classname
-  let pictureClassName = `volto-image${
-    containerClassName ? ` ${containerClassName}` : ''
-  }`;
-  if (floated) {
-    pictureClassName = `${pictureClassName} floated ${floated}`;
-  }
-  if (size) {
-    pictureClassName = `${pictureClassName} ${size}`;
-  }
+    //picture classname
+    let pictureClassName = `volto-image${
+      containerClassName ? ` ${containerClassName}` : ''
+    }`;
+    if (floated) {
+      pictureClassName = `${pictureClassName} floated ${floated}`;
+    }
+    if (size) {
+      pictureClassName = `${pictureClassName} ${size}`;
+    }
 
-  if (responsive) {
-    pictureClassName = `${pictureClassName} responsive`;
-  }
+    if (responsive) {
+      pictureClassName = `${pictureClassName} responsive`;
+    }
 
-  //intersection observer
-  useEffect(() => {
-    const applySrcSet = () => {
-      setActualSrcSet(srcSet.join(', '));
-    };
+    //intersection observer
+    useEffect(() => {
+      const applySrcSet = () => {
+        setActualSrcSet(srcSet.join(', '));
+      };
 
-    if (srcSet && !critical) {
-      if ('IntersectionObserver' in window) {
-        const observer = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting && !actualSrcSet) {
-                applySrcSet();
-                if (imageRef.current instanceof Element) {
-                  observer.unobserve(imageRef.current);
+      if (srcSet && !critical) {
+        if ('IntersectionObserver' in window) {
+          const observer = new IntersectionObserver(
+            (entries) => {
+              entries.forEach((entry) => {
+                if (entry.isIntersecting && !actualSrcSet) {
+                  applySrcSet();
+                  if (imageRef.current instanceof Element) {
+                    observer.unobserve(imageRef.current);
+                  }
                 }
-              }
-            });
-          },
-          { threshold: [0], rootMargin: '100px' },
-        );
-        observer.observe(imageRef.current);
-      } else {
-        applySrcSet();
+              });
+            },
+            { threshold: [0], rootMargin: '100px' },
+          );
+          observer.observe(imageRef.current);
+        } else {
+          applySrcSet();
+        }
       }
-    }
-  }, [imageHasLoaded, srcSet, actualSrcSet, critical]);
+    }, [imageHasLoaded, srcSet, actualSrcSet, critical]);
 
-  return (
-    <>
-      <picture className={pictureClassName}>
-        {actualSrcSet?.length > 0 && (
-          <source srcSet={actualSrcSet} sizes={sizes} />
-        )}
-        <img
-          src={src}
-          alt={alt}
-          className={className}
-          role={role}
-          // removed because this is for the placeholder. Lazy loading is made using intersectionObserver
-          // loading={critical ? 'eager' : 'lazy'}
-          width={width}
-          height={height}
-          style={aspectRatio ? { aspectRatio } : null}
-          {...imageProps}
-          ref={imageRef}
-        />
-      </picture>
-      {!critical && (
-        <noscript
-          dangerouslySetInnerHTML={{
-            __html: `
+    return (
+      <>
+        <picture className={pictureClassName}>
+          {actualSrcSet?.length > 0 && (
+            <source srcSet={actualSrcSet} sizes={sizes} />
+          )}
+          <img
+            src={src}
+            alt={alt}
+            className={className}
+            role={role}
+            // removed because this is for the placeholder. Lazy loading is made using intersectionObserver
+            // loading={critical ? 'eager' : 'lazy'}
+            width={width}
+            height={height}
+            style={aspectRatio ? { aspectRatio } : null}
+            {...imageProps}
+            ref={imageRef}
+          />
+        </picture>
+        {!critical && (
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `
               <img
                 src="${src}"
                 ${srcSet?.length && `srcset="${srcSet.join(', ')}"`}
@@ -132,11 +133,14 @@ const Image = ({
                 ${height ? `height="${height}` : ''}
                 loading="lazy"
             `,
-          }}
-        />
-      )}
-    </>
-  );
+            }}
+          />
+        )}
+      </>
+    );
+  } else {
+    return <></>;
+  }
 };
 
 Image.propTypes = {

diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx
@@ -99,9 +99,9 @@ class EditBlock extends SubblockEdit {
                   messages.titlePlaceholder,
                 )}
                 selected={this.props.selected && this.state.focusOn === 'title'}
-                setSelected={() => {
+                setSelected={(f) => {
                   this.setState({
-                    focusOn: 'title',
+                    focusOn: f,
                   });
                 }}
                 focusNextField={() => {
@@ -139,7 +139,7 @@ class EditBlock extends SubblockEdit {
                   onChangeBlock={(block, _data) => {
                     this.onChange(_data);
                   }}
-                  setSelected={() => this.setState({ focusOn: 'text' })}
+                  setSelected={(f) => this.setState({ focusOn: f })}
                   focusNextField={
                     !this.props.isLast
                       ? () => {

diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx
@@ -14,6 +14,7 @@ import {
 } from 'volto-subblocks';
 
 import { SidebarPortal } from '@plone/volto/components';
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 import Sidebar from './Sidebar.jsx';
 
 import { defineMessages } from 'react-intl';
@@ -39,6 +40,42 @@ class Edit extends SubblocksEdit {
       this.onSubblockChangeFocus(-1);
     }
   }
+
+  handleEnter = (e) => {
+    if (this.props.selected && this.state.subIndexSelected < 0) {
+      handleKeyDownOwnFocusManagement(e, this.props);
+    }
+  };
+
+  componentDidMount() {
+    const blockNode = this.props.blockNode;
+
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    if (this.state.subblocks.length === 0) {
+      this.addSubblock();
+    }
+
+    if (blockNode && blockNode.current) {
+      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    const blockNode = this.props.blockNode;
+    if (blockNode && blockNode.current) {
+      blockNode.current.removeEventListener('keydown', this.handleEnter, false);
+    }
+  }
   /**
    * Render method.
    * @method render
@@ -49,7 +86,7 @@ class Edit extends SubblocksEdit {
       return <div />;
     }
     return (
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1">
         <div className="full-width section section-muted section-inset-shadow py-5 is-edit-mode">
           <Container className="px-md-4">
             <Card className="card-bg rounded" noWrapper={false} space tag="div">