Merge pull request #29 from ilb/update-library-and-add-props-unoptimized

update library and add props unoptimized

Author: dmitryi698

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilb/classifiercomponent",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "",
   "main": "src/index.js",
   "scripts": {

src/classifier/client/components/Classifier.mjs

@@ -32,6 +32,7 @@ const Classifier = ({
   schema,
   hiddenTabs = [],
   readonlyClassifier = null,
+  unoptimized = true,
   defaultTab = 'classifier'
 }) => {
   const [classifier, setClassifier] = useState(schema.classifier);
@@ -433,6 +434,7 @@ const Classifier = ({
               srcSet={selectedDocument}
               onRemove={handlePageDelete}
               active={activeDraggable}
+              unoptimized={unoptimized}
             />
           </Dimmer.Dimmable>
         </Grid.Column>

src/classifier/client/components/gallery/GalleryItem/GalleryItem.js

@@ -19,7 +19,8 @@ const GalleryItem = React.memo(
         onClick,
         attributes,
         listeners,
-        errors
+        errors,
+        unoptimized
       },
       ref
     ) => {
@@ -74,7 +75,7 @@ const GalleryItem = React.memo(
                     height={height}
                     layout="responsive"
                     quality={10}
-                    unoptimized={true}
+                    unoptimized={unoptimized}
                     onClick={onClick}
                     className="img-ofit"
                     style={{

src/classifier/client/components/gallery/GalleryItem/SegmentItem.js

@@ -2,7 +2,7 @@ import Image from 'next/image';
 import React, { useEffect, useRef, useState } from 'react';
 import ScrollContainer from 'react-indiana-drag-scroll';
 
-const SegmentItem = ({ src, onClick, rotation, scale }) => {
+const SegmentItem = ({ src, onClick, rotation, scale, unoptimized }) => {
   const [[width, height], setWidthHeight] = useState([460, 600]);
   const contentRef = useRef(null);
   useEffect(() => {
@@ -26,6 +26,7 @@ const SegmentItem = ({ src, onClick, rotation, scale }) => {
           src={src}
           //width={width * scale}
           //height={height * scale}
+          unoptimized={unoptimized}
           width={rotation === 0 || rotation === 180 ? width * scale : height * scale}
           height={rotation === 90 || rotation === 270 ? width * scale : height * scale}
           layout="fixed"

src/classifier/client/components/gallery/SortableGallery.js

@@ -7,7 +7,7 @@ import SegmentItem from './GalleryItem/SegmentItem';
 import React, { useEffect, useState } from 'react';
 import ControlsMenu from '../gallery/GalleryItem/ControlsMenu';
 
-const SortableGallery = ({ srcSet, active, onRemove, tab, pageErrors }) => {
+const SortableGallery = ({ srcSet, active, onRemove, tab, pageErrors, unoptimized }) => {
   const [state, setState] = useState({
     scale: 1,
     rotation: 0,
@@ -92,6 +92,7 @@ const SortableGallery = ({ srcSet, active, onRemove, tab, pageErrors }) => {
                     tablet={8}
                     mobile={16}>
                     <SortableGalleryItem
+                      unoptimized={unoptimized}
                       src={src}
                       errors={pageErrors[src.uuid]}
                       disabled={tab.readonly}
@@ -109,6 +110,7 @@ const SortableGallery = ({ srcSet, active, onRemove, tab, pageErrors }) => {
           )}
           {state.previewOpen && (
             <SegmentItem
+              unoptimized={unoptimized}
               src={state.src}
               rotation={state.rotation}
               scale={state.scale}

src/classifier/client/components/gallery/SortableGalleryItem.js

@@ -2,7 +2,16 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import GalleryItem from './GalleryItem/GalleryItem';
 
-const SortableGalleryItem = ({ src, width, height, onRemove, onClick, disabled, errors }) => {
+const SortableGalleryItem = ({
+  src,
+  width,
+  height,
+  onRemove,
+  onClick,
+  disabled,
+  errors,
+  unoptimized
+}) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: src.id,
     disabled: !src.type.includes('image/') || disabled
@@ -29,6 +38,7 @@ const SortableGalleryItem = ({ src, width, height, onRemove, onClick, disabled,
       attributes={attributes}
       listeners={listeners}
       errors={errors}
+      unoptimized={unoptimized}
     />
   );
 };