@pushwoosh/smart-components-kit 1.22.0 → 1.23.0

package/MediaStorage/CreateCropDrawer.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Button, Chip, Drawer, DrawerBody, DrawerHeader, DrawerTitle, ModalConfirm, NativeInput, useToast } from '@pushwoosh/dumb-components';
+import { Color } from '@pushwoosh/kit-constants';
 import { Columns, Vertical } from '@pushwoosh/kit-helpers';
 import { CloseIcon, TrashIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
@@ -10,7 +11,7 @@ import { CENTER_FOCAL, getCropWindow, getRequestedSize, getStoredOrigin, getStor
 import { useDeleteMediaFile } from './hooks';
 import { getAspectRatio, getCropCaption, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { Chips, CropStrip, CropThumb, CropThumbButton, CropThumbCaption, CropThumbDelete, CropThumbImage, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, SizeInput } from './styles';
+import { Chips, CropStrip, CropThumb, CropThumbButton, CropThumbCaption, CropThumbDelete, CropThumbImage, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, SizeInput } from './styles';
 const RATIOS = [{
   value: 'ASPECT_RATIO_1_1',
   label: '1:1',
@@ -58,6 +59,15 @@ const RATIOS = [{
 }];
 const DEFAULT_SIZE = '1080';
 const DEFAULT_QUALITY = '90';
+const flashRecalculated = input => {
+  if (!input || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+  input.animate([{
+    color: Color.PRIMARY
+  }, {}], {
+    duration: 600,
+    easing: 'ease-out'
+  });
+};
 export const CreateCropDrawer = ({
   application,
   original,
@@ -76,7 +86,7 @@ export const CreateCropDrawer = ({
   } = useToast();
   const deleteMediaFile = useDeleteMediaFile(application);
   const [ratio, setRatio] = useState('original');
-  const [dimension, setDimension] = useState('width');
+  const [lastEdited, setLastEdited] = useState('width');
   const [size, setSize] = useState(DEFAULT_SIZE);
   const [quality, setQuality] = useState(DEFAULT_QUALITY);
   const [isCreating, setIsCreating] = useState(false);
@@ -89,7 +99,7 @@ export const CreateCropDrawer = ({
   useEffect(() => {
     if (original) {
       setRatio('original');
-      setDimension('width');
+      setLastEdited('width');
       setSize(DEFAULT_SIZE);
       setQuality(DEFAULT_QUALITY);
       setViewedCrop(null);
@@ -119,7 +129,7 @@ export const CreateCropDrawer = ({
   const {
     width: outputWidth,
     height: outputHeight
-  } = getRequestedSize(ratioW, ratioH, dimension, sizeValue);
+  } = getRequestedSize(ratioW, ratioH, lastEdited, sizeValue);
   const srcW = originalMeta?.width ?? 0;
   const srcH = originalMeta?.height ?? 0;
   const canPlaceWindow = !isOriginalView && srcW > 0 && srcH > 0;
@@ -134,20 +144,34 @@ export const CreateCropDrawer = ({
     height: outputHeight
   };
   const isCapped = storedSize.width !== outputWidth || storedSize.height !== outputHeight;
-  // Both inputs are always visible: the driving one is editable, the other is
-  // read-only and shows the value computed from the aspect ratio.
+  // Both inputs are editable; the last edited one drives the size, the other follows the ratio.
   const computedText = value => isSizeValid ? String(value) : '';
-  const widthText = dimension === 'width' ? size : computedText(outputWidth);
-  const heightText = dimension === 'height' ? size : computedText(outputHeight);
-  const handleDimensionChange = next => {
-    if (next === dimension) return;
-    // Seed the newly editable field with its computed value so the visible
-    // numbers stay put and only editability swaps.
-    if (isSizeValid) {
-      setSize(String(next === 'width' ? outputWidth : outputHeight));
-    }
-    setDimension(next);
+  const widthText = lastEdited === 'width' ? size : computedText(outputWidth);
+  const heightText = lastEdited === 'height' ? size : computedText(outputHeight);
+  const handleSizeChange = (edited, value) => {
+    setLastEdited(edited);
+    setSize(value);
   };
+  const widthInputRef = useRef(null);
+  const heightInputRef = useRef(null);
+  const prevSizeRef = useRef({
+    original,
+    ratio,
+    width: widthText,
+    height: heightText
+  });
+  useLayoutEffect(() => {
+    const prev = prevSizeRef.current;
+    prevSizeRef.current = {
+      original,
+      ratio,
+      width: widthText,
+      height: heightText
+    };
+    if (isOriginalView || prev.original !== original || prev.ratio === 'original') return;
+    if (lastEdited === 'width' && heightText && heightText !== prev.height) flashRecalculated(heightInputRef.current);
+    if (lastEdited === 'height' && widthText && widthText !== prev.width) flashRecalculated(widthInputRef.current);
+  }, [original, ratio, isOriginalView, lastEdited, widthText, heightText]);
   // A crop is the same one only at the same ratio, output size and window position.
   const duplicateExists = !isOriginalView && isSizeValid && existingCrops.some(crop => {
     if (crop.meta?.type !== 'imageMeta') return false;
@@ -172,7 +196,7 @@ export const CreateCropDrawer = ({
         uuid: parent.uuid,
         ratio,
         size: {
-          type: dimension,
+          type: lastEdited,
           data: sizeValue
         },
         ...(isJpeg ? {
@@ -265,45 +289,31 @@ export const CreateCropDrawer = ({
               message: 'SMART.MEDIA_STORAGE.CREATE_CROP.SIZE_LABEL'
             })
           }), _jsxs(Columns, {
-            "$sizes": "auto 1fr 1fr",
+            "$sizes": "1fr auto 1fr",
             "$gap": 8,
             "$alignItems": "center",
-            children: [_jsxs(Segment, {
-              children: [_jsx(SegmentItem, {
-                type: "button",
-                "$active": dimension === 'width',
-                onClick: () => handleDimensionChange('width'),
-                children: lang({
-                  message: 'SMART.MEDIA_STORAGE.CREATE_CROP.WIDTH'
-                })
-              }), _jsx(SegmentItem, {
-                type: "button",
-                "$active": dimension === 'height',
-                onClick: () => handleDimensionChange('height'),
-                children: lang({
-                  message: 'SMART.MEDIA_STORAGE.CREATE_CROP.HEIGHT'
-                })
-              })]
-            }), _jsx(SizeInput, {
+            children: [_jsx(SizeInput, {
               type: "number",
               min: 1,
               value: widthText,
-              readOnly: dimension !== 'width',
-              "$isErrored": dimension === 'width' && !isSizeValid,
+              "$isErrored": lastEdited === 'width' && !isSizeValid,
+              ref: widthInputRef,
               "aria-label": lang({
                 message: 'SMART.MEDIA_STORAGE.CREATE_CROP.WIDTH'
               }),
-              onChange: event => setSize(event.target.value)
+              onChange: event => handleSizeChange('width', event.target.value)
+            }), _jsx(Text, {
+              children: "\u00D7"
             }), _jsx(SizeInput, {
               type: "number",
               min: 1,
               value: heightText,
-              readOnly: dimension !== 'height',
-              "$isErrored": dimension === 'height' && !isSizeValid,
+              "$isErrored": lastEdited === 'height' && !isSizeValid,
+              ref: heightInputRef,
               "aria-label": lang({
                 message: 'SMART.MEDIA_STORAGE.CREATE_CROP.HEIGHT'
               }),
-              onChange: event => setSize(event.target.value)
+              onChange: event => handleSizeChange('height', event.target.value)
             })]
           })]
         }), _jsxs(Vertical, {

package/MediaStorage/styles.js

@@ -115,7 +115,7 @@ export const FieldLabel = styled.div.withConfig({
 export const SizeInput = styled(NativeInput).withConfig({
   displayName: "SizeInput",
   componentId: "sc-uu3cbo-25"
-})(["&[readonly]{background:", ";color:", ";}"], Color.SOFT_LIGHT, Color.LOCKED);
+})(["-webkit-text-fill-color:currentColor;"]);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
   componentId: "sc-uu3cbo-26"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",