@os-design/core 1.0.150 → 1.0.151

package/dist/cjs/Gallery/index.js

@@ -68,7 +68,7 @@ var GalleryHelp = _styled["default"].div(_templateObject3 || (_templateObject3 =
   return p.theme.borderRadius;
 });
 
-var MIN_DIST_PX = 10;
+var MIN_DIST_PX = 30;
 var MAX_ANGLE = 30;
 /**
  * The image gallery. Change the cursor/touch position to change images.
@@ -107,8 +107,7 @@ var Gallery = function Gallery(_ref) {
     setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);
   }, [imageIndex, urls]);
   var containerRef = (0, _react.useRef)(null);
-  var allowedRef = (0, _react.useRef)(false);
-  var startPosRef = (0, _react.useRef)(null);
+  var startTouchPosRef = (0, _react.useRef)(null);
   var size = (0, _utils.useSize)(containerRef);
   var sizeRef = (0, _react.useRef)(size);
   (0, _react.useEffect)(function () {
@@ -139,50 +138,63 @@ var Gallery = function Gallery(_ref) {
     var _e$touches$ = e.touches[0],
         clientX = _e$touches$.clientX,
         clientY = _e$touches$.clientY;
-    startPosRef.current = {
+    startTouchPosRef.current = {
       x: clientX,
       y: clientY
     };
   }, []);
   var touchMoveHandler = (0, _react.useCallback)(function (e) {
-    if (!allowedRef.current) {
-      if (!startPosRef.current) return;
-      var _startPosRef$current = startPosRef.current,
-          x = _startPosRef$current.x,
-          y = _startPosRef$current.y;
-      var _e$touches$2 = e.touches[0],
-          clientX = _e$touches$2.clientX,
-          clientY = _e$touches$2.clientY;
-      var diffX = Math.abs(x - clientX);
-      var diffY = Math.abs(y - clientY);
-      var diff = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
-      if (diff < MIN_DIST_PX) return;
-      var angle = Math.atan(diffY / diffX) * 180 / Math.PI;
-
-      if (angle > MAX_ANGLE) {
-        startPosRef.current = null;
-        return;
-      }
-
-      allowedRef.current = true;
+    if (!startTouchPosRef.current) return;
+    var _startTouchPosRef$cur = startTouchPosRef.current,
+        x = _startTouchPosRef$cur.x,
+        y = _startTouchPosRef$cur.y;
+    var _e$touches$2 = e.touches[0],
+        clientX = _e$touches$2.clientX,
+        clientY = _e$touches$2.clientY;
+    var diffX = Math.abs(x - clientX);
+    var diffY = Math.abs(y - clientY);
+    var diff = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
+    if (diff < MIN_DIST_PX) return;
+    var angle = Math.atan(diffY / diffX) * 180 / Math.PI;
+
+    if (angle > MAX_ANGLE) {
+      startTouchPosRef.current = null;
+      return;
     }
 
-    updateGalleryImage(e.touches[0].clientX);
-  }, [updateGalleryImage]);
+    var index = imageIndexRef.current;
+    if (index === null) return;
+
+    if (x < clientX) {
+      setImageIndex(index > 0 ? index - 1 : urls.length - 1);
+    } else {
+      setImageIndex(index < urls.length - 1 ? index + 1 : 0);
+    }
+
+    startTouchPosRef.current = null;
+  }, [urls.length]);
   var touchEndHandler = (0, _react.useCallback)(function () {
-    allowedRef.current = false;
-    startPosRef.current = null;
+    startTouchPosRef.current = null;
   }, []);
+  var handlers = (0, _react.useMemo)(function () {
+    if ((0, _utils.isTouchDevice)()) {
+      return {
+        onTouchStart: touchStartHandler,
+        onTouchMove: touchMoveHandler,
+        onTouchEnd: touchEndHandler
+      };
+    }
+
+    return {
+      onMouseMove: mouseMoveHandler
+    };
+  }, [mouseMoveHandler, touchEndHandler, touchMoveHandler, touchStartHandler]);
   return /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
     activeTheme: "dark"
   }, /*#__PURE__*/_react["default"].createElement(Container, _extends({
     ref: containerRef,
-    heightPercent: heightPercent,
-    onMouseMove: mouseMoveHandler,
-    onTouchStart: touchStartHandler,
-    onTouchMove: touchMoveHandler,
-    onTouchEnd: touchEndHandler
-  }, rest), /*#__PURE__*/_react["default"].createElement(StyledImage, _extends({
+    heightPercent: heightPercent
+  }, handlers, rest), /*#__PURE__*/_react["default"].createElement(StyledImage, _extends({
     url: imageUrl
   }, imageProps)), urls.length > 1 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, imageIndex !== null && /*#__PURE__*/_react["default"].createElement(_Status["default"], {
     count: urls.length,

package/dist/cjs/Gallery/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","heightPercent","clr","theme","galleryColorBg","borderRadius","StyledImage","Image","GalleryHelp","div","galleryHelpColorBg","galleryHelpColorText","sizes","small","MIN_DIST_PX","MAX_ANGLE","Gallery","urls","aspectRatio","help","imageProps","children","rest","useState","undefined","imageUrl","setImageUrl","length","imageIndex","setImageIndex","useMemo","Math","round","imageIndexRef","useRef","useEffect","current","containerRef","allowedRef","startPosRef","size","useSize","sizeRef","statusHeight","height","updateGalleryImage","useCallback","clientX","getBoundingClientRect","x","widthPerImage","width","xPos","nextIndex","floor","mouseMoveHandler","e","touchStartHandler","touches","clientY","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useSize } from '@os-design/utils';\nimport React, {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst GalleryHelp = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n\n  background-color: ${(p) => clr(p.theme.galleryHelpColorBg)};\n  color: ${(p) => clr(p.theme.galleryHelpColorText)};\n  backdrop-filter: blur(0.2em);\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n\n  border-bottom-left-radius: ${(p) => p.theme.borderRadius}em;\n  padding: 0.1em 0.5em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The help message that is displayed in the upper right corner.\n   */\n  help?: string;\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\nconst MIN_DIST_PX = 10;\nconst MAX_ANGLE = 30;\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery: React.FC<GalleryProps> = ({\n  urls,\n  aspectRatio = [16, 9],\n  help,\n  imageProps = {},\n  children,\n  ...rest\n}) => {\n  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n  const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n  const heightPercent = useMemo(\n    () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n    [aspectRatio]\n  );\n\n  const imageIndexRef = useRef(imageIndex);\n  useEffect(() => {\n    imageIndexRef.current = imageIndex;\n  }, [imageIndex]);\n\n  // Update the image if the index was changed\n  useEffect(() => {\n    setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n  }, [imageIndex, urls]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const allowedRef = useRef(false);\n  const startPosRef = useRef<{ x: number; y: number } | null>(null);\n\n  const size = useSize(containerRef);\n  const sizeRef = useRef(size);\n  useEffect(() => {\n    sizeRef.current = size;\n  }, [size]);\n\n  const statusHeight = useMemo(\n    () => Math.round(size.height / 70),\n    [size.height]\n  );\n\n  const updateGalleryImage = useCallback(\n    (clientX: number) => {\n      if (!containerRef.current) return;\n      const { x } = containerRef.current.getBoundingClientRect();\n      const widthPerImage = sizeRef.current.width / urls.length;\n      const xPos = clientX - x;\n      if (xPos < 0) return;\n      const nextIndex = Math.floor(xPos / widthPerImage);\n      if (imageIndexRef.current !== nextIndex) {\n        setImageIndex(nextIndex);\n      }\n    },\n    [urls.length]\n  );\n\n  const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (e) => updateGalleryImage(e.clientX),\n    [updateGalleryImage]\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { clientX, clientY } = e.touches[0];\n      startPosRef.current = { x: clientX, y: clientY };\n    },\n    []\n  );\n\n  const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      if (!allowedRef.current) {\n        if (!startPosRef.current) return;\n        const { x, y } = startPosRef.current;\n        const { clientX, clientY } = e.touches[0];\n        const diffX = Math.abs(x - clientX);\n        const diffY = Math.abs(y - clientY);\n        const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n        if (diff < MIN_DIST_PX) return;\n        const angle = (Math.atan(diffY / diffX) * 180) / Math.PI;\n        if (angle > MAX_ANGLE) {\n          startPosRef.current = null;\n          return;\n        }\n        allowedRef.current = true;\n      }\n      updateGalleryImage(e.touches[0].clientX);\n    },\n    [updateGalleryImage]\n  );\n\n  const touchEndHandler = useCallback<TouchEventHandler<HTMLDivElement>>(() => {\n    allowedRef.current = false;\n    startPosRef.current = null;\n  }, []);\n\n  return (\n    <ThemeOverrider activeTheme='dark'>\n      <Container\n        ref={containerRef}\n        heightPercent={heightPercent}\n        onMouseMove={mouseMoveHandler}\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n      >\n        <StyledImage url={imageUrl} {...imageProps} />\n        {urls.length > 1 && (\n          <>\n            {imageIndex !== null && (\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n            )}\n            {help && <GalleryHelp>{help}</GalleryHelp>}\n          </>\n        )}\n        {children}\n      </Container>\n    </ThemeOverrider>\n  );\n};\n\nexport default Gallery;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","heightPercent","clr","theme","galleryColorBg","borderRadius","StyledImage","Image","GalleryHelp","div","galleryHelpColorBg","galleryHelpColorText","sizes","small","MIN_DIST_PX","MAX_ANGLE","Gallery","urls","aspectRatio","help","imageProps","children","rest","useState","undefined","imageUrl","setImageUrl","length","imageIndex","setImageIndex","useMemo","Math","round","imageIndexRef","useRef","useEffect","current","containerRef","startTouchPosRef","size","useSize","sizeRef","statusHeight","height","updateGalleryImage","useCallback","clientX","getBoundingClientRect","x","widthPerImage","width","xPos","nextIndex","floor","mouseMoveHandler","e","touchStartHandler","touches","clientY","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","index","touchEndHandler","handlers","isTouchDevice","onTouchStart","onTouchMove","onTouchEnd","onMouseMove"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { isTouchDevice, omitEmotionProps, useSize } from '@os-design/utils';\nimport React, {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst GalleryHelp = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n\n  background-color: ${(p) => clr(p.theme.galleryHelpColorBg)};\n  color: ${(p) => clr(p.theme.galleryHelpColorText)};\n  backdrop-filter: blur(0.2em);\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n\n  border-bottom-left-radius: ${(p) => p.theme.borderRadius}em;\n  padding: 0.1em 0.5em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The help message that is displayed in the upper right corner.\n   */\n  help?: string;\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\nconst MIN_DIST_PX = 30;\nconst MAX_ANGLE = 30;\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery: React.FC<GalleryProps> = ({\n  urls,\n  aspectRatio = [16, 9],\n  help,\n  imageProps = {},\n  children,\n  ...rest\n}) => {\n  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n  const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n  const heightPercent = useMemo(\n    () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n    [aspectRatio]\n  );\n\n  const imageIndexRef = useRef(imageIndex);\n  useEffect(() => {\n    imageIndexRef.current = imageIndex;\n  }, [imageIndex]);\n\n  // Update the image if the index was changed\n  useEffect(() => {\n    setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n  }, [imageIndex, urls]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const startTouchPosRef = useRef<{ x: number; y: number } | null>(null);\n\n  const size = useSize(containerRef);\n  const sizeRef = useRef(size);\n  useEffect(() => {\n    sizeRef.current = size;\n  }, [size]);\n\n  const statusHeight = useMemo(\n    () => Math.round(size.height / 70),\n    [size.height]\n  );\n\n  const updateGalleryImage = useCallback(\n    (clientX: number) => {\n      if (!containerRef.current) return;\n      const { x } = containerRef.current.getBoundingClientRect();\n      const widthPerImage = sizeRef.current.width / urls.length;\n      const xPos = clientX - x;\n      if (xPos < 0) return;\n      const nextIndex = Math.floor(xPos / widthPerImage);\n      if (imageIndexRef.current !== nextIndex) {\n        setImageIndex(nextIndex);\n      }\n    },\n    [urls.length]\n  );\n\n  const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (e) => updateGalleryImage(e.clientX),\n    [updateGalleryImage]\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { clientX, clientY } = e.touches[0];\n      startTouchPosRef.current = { x: clientX, y: clientY };\n    },\n    []\n  );\n\n  const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      if (!startTouchPosRef.current) return;\n      const { x, y } = startTouchPosRef.current;\n      const { clientX, clientY } = e.touches[0];\n      const diffX = Math.abs(x - clientX);\n      const diffY = Math.abs(y - clientY);\n      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n      if (diff < MIN_DIST_PX) return;\n      const angle = (Math.atan(diffY / diffX) * 180) / Math.PI;\n      if (angle > MAX_ANGLE) {\n        startTouchPosRef.current = null;\n        return;\n      }\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      if (x < clientX) {\n        setImageIndex(index > 0 ? index - 1 : urls.length - 1);\n      } else {\n        setImageIndex(index < urls.length - 1 ? index + 1 : 0);\n      }\n      startTouchPosRef.current = null;\n    },\n    [urls.length]\n  );\n\n  const touchEndHandler = useCallback<TouchEventHandler<HTMLDivElement>>(() => {\n    startTouchPosRef.current = null;\n  }, []);\n\n  const handlers = useMemo(() => {\n    if (isTouchDevice()) {\n      return {\n        onTouchStart: touchStartHandler,\n        onTouchMove: touchMoveHandler,\n        onTouchEnd: touchEndHandler,\n      };\n    }\n    return {\n      onMouseMove: mouseMoveHandler,\n    };\n  }, [mouseMoveHandler, touchEndHandler, touchMoveHandler, touchStartHandler]);\n\n  return (\n    <ThemeOverrider activeTheme='dark'>\n      <Container\n        ref={containerRef}\n        heightPercent={heightPercent}\n        {...handlers}\n        {...rest}\n      >\n        <StyledImage url={imageUrl} {...imageProps} />\n        {urls.length > 1 && (\n          <>\n            {imageIndex !== null && (\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n            )}\n            {help && <GalleryHelp>{help}</GalleryHelp>}\n          </>\n        )}\n        {children}\n      </Container>\n    </ThemeOverrider>\n  );\n};\n\nexport default Gallery;\n"],"mappings":"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"}

package/dist/esm/Gallery/index.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import styled from '@emotion/styled';
 import { clr, ThemeOverrider } from '@os-design/theming';
-import { omitEmotionProps, useSize } from '@os-design/utils';
+import { isTouchDevice, omitEmotionProps, useSize } from '@os-design/utils';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Image from '../Image';
 import GalleryStatus from './Status';
@@ -38,7 +38,7 @@ const GalleryHelp = styled.div`
   border-bottom-left-radius: ${p => p.theme.borderRadius}em;
   padding: 0.1em 0.5em;
 `;
-const MIN_DIST_PX = 10;
+const MIN_DIST_PX = 30;
 const MAX_ANGLE = 30;
 /**
  * The image gallery. Change the cursor/touch position to change images.
@@ -65,8 +65,7 @@ const Gallery = ({
     setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);
   }, [imageIndex, urls]);
   const containerRef = useRef(null);
-  const allowedRef = useRef(false);
-  const startPosRef = useRef(null);
+  const startTouchPosRef = useRef(null);
   const size = useSize(containerRef);
   const sizeRef = useRef(size);
   useEffect(() => {
@@ -93,52 +92,65 @@ const Gallery = ({
       clientX,
       clientY
     } = e.touches[0];
-    startPosRef.current = {
+    startTouchPosRef.current = {
       x: clientX,
       y: clientY
     };
   }, []);
   const touchMoveHandler = useCallback(e => {
-    if (!allowedRef.current) {
-      if (!startPosRef.current) return;
-      const {
-        x,
-        y
-      } = startPosRef.current;
-      const {
-        clientX,
-        clientY
-      } = e.touches[0];
-      const diffX = Math.abs(x - clientX);
-      const diffY = Math.abs(y - clientY);
-      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
-      if (diff < MIN_DIST_PX) return;
-      const angle = Math.atan(diffY / diffX) * 180 / Math.PI;
+    if (!startTouchPosRef.current) return;
+    const {
+      x,
+      y
+    } = startTouchPosRef.current;
+    const {
+      clientX,
+      clientY
+    } = e.touches[0];
+    const diffX = Math.abs(x - clientX);
+    const diffY = Math.abs(y - clientY);
+    const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
+    if (diff < MIN_DIST_PX) return;
+    const angle = Math.atan(diffY / diffX) * 180 / Math.PI;
 
-      if (angle > MAX_ANGLE) {
-        startPosRef.current = null;
-        return;
-      }
+    if (angle > MAX_ANGLE) {
+      startTouchPosRef.current = null;
+      return;
+    }
 
-      allowedRef.current = true;
+    const index = imageIndexRef.current;
+    if (index === null) return;
+
+    if (x < clientX) {
+      setImageIndex(index > 0 ? index - 1 : urls.length - 1);
+    } else {
+      setImageIndex(index < urls.length - 1 ? index + 1 : 0);
     }
 
-    updateGalleryImage(e.touches[0].clientX);
-  }, [updateGalleryImage]);
+    startTouchPosRef.current = null;
+  }, [urls.length]);
   const touchEndHandler = useCallback(() => {
-    allowedRef.current = false;
-    startPosRef.current = null;
+    startTouchPosRef.current = null;
   }, []);
+  const handlers = useMemo(() => {
+    if (isTouchDevice()) {
+      return {
+        onTouchStart: touchStartHandler,
+        onTouchMove: touchMoveHandler,
+        onTouchEnd: touchEndHandler
+      };
+    }
+
+    return {
+      onMouseMove: mouseMoveHandler
+    };
+  }, [mouseMoveHandler, touchEndHandler, touchMoveHandler, touchStartHandler]);
   return /*#__PURE__*/React.createElement(ThemeOverrider, {
     activeTheme: "dark"
   }, /*#__PURE__*/React.createElement(Container, _extends({
     ref: containerRef,
-    heightPercent: heightPercent,
-    onMouseMove: mouseMoveHandler,
-    onTouchStart: touchStartHandler,
-    onTouchMove: touchMoveHandler,
-    onTouchEnd: touchEndHandler
-  }, rest), /*#__PURE__*/React.createElement(StyledImage, _extends({
+    heightPercent: heightPercent
+  }, handlers, rest), /*#__PURE__*/React.createElement(StyledImage, _extends({
     url: imageUrl
   }, imageProps)), urls.length > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, imageIndex !== null && /*#__PURE__*/React.createElement(GalleryStatus, {
     count: urls.length,

package/dist/esm/Gallery/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","clr","ThemeOverrider","omitEmotionProps","useSize","React","useCallback","useEffect","useMemo","useRef","useState","Image","GalleryStatus","Container","p","heightPercent","theme","galleryColorBg","borderRadius","StyledImage","GalleryHelp","div","galleryHelpColorBg","galleryHelpColorText","sizes","small","MIN_DIST_PX","MAX_ANGLE","Gallery","urls","aspectRatio","help","imageProps","children","rest","imageUrl","setImageUrl","undefined","imageIndex","setImageIndex","length","Math","round","imageIndexRef","current","containerRef","allowedRef","startPosRef","size","sizeRef","statusHeight","height","updateGalleryImage","clientX","x","getBoundingClientRect","widthPerImage","width","xPos","nextIndex","floor","mouseMoveHandler","e","touchStartHandler","clientY","touches","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useSize } from '@os-design/utils';\nimport React, {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst GalleryHelp = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n\n  background-color: ${(p) => clr(p.theme.galleryHelpColorBg)};\n  color: ${(p) => clr(p.theme.galleryHelpColorText)};\n  backdrop-filter: blur(0.2em);\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n\n  border-bottom-left-radius: ${(p) => p.theme.borderRadius}em;\n  padding: 0.1em 0.5em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The help message that is displayed in the upper right corner.\n   */\n  help?: string;\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\nconst MIN_DIST_PX = 10;\nconst MAX_ANGLE = 30;\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery: React.FC<GalleryProps> = ({\n  urls,\n  aspectRatio = [16, 9],\n  help,\n  imageProps = {},\n  children,\n  ...rest\n}) => {\n  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n  const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n  const heightPercent = useMemo(\n    () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n    [aspectRatio]\n  );\n\n  const imageIndexRef = useRef(imageIndex);\n  useEffect(() => {\n    imageIndexRef.current = imageIndex;\n  }, [imageIndex]);\n\n  // Update the image if the index was changed\n  useEffect(() => {\n    setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n  }, [imageIndex, urls]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const allowedRef = useRef(false);\n  const startPosRef = useRef<{ x: number; y: number } | null>(null);\n\n  const size = useSize(containerRef);\n  const sizeRef = useRef(size);\n  useEffect(() => {\n    sizeRef.current = size;\n  }, [size]);\n\n  const statusHeight = useMemo(\n    () => Math.round(size.height / 70),\n    [size.height]\n  );\n\n  const updateGalleryImage = useCallback(\n    (clientX: number) => {\n      if (!containerRef.current) return;\n      const { x } = containerRef.current.getBoundingClientRect();\n      const widthPerImage = sizeRef.current.width / urls.length;\n      const xPos = clientX - x;\n      if (xPos < 0) return;\n      const nextIndex = Math.floor(xPos / widthPerImage);\n      if (imageIndexRef.current !== nextIndex) {\n        setImageIndex(nextIndex);\n      }\n    },\n    [urls.length]\n  );\n\n  const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (e) => updateGalleryImage(e.clientX),\n    [updateGalleryImage]\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { clientX, clientY } = e.touches[0];\n      startPosRef.current = { x: clientX, y: clientY };\n    },\n    []\n  );\n\n  const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      if (!allowedRef.current) {\n        if (!startPosRef.current) return;\n        const { x, y } = startPosRef.current;\n        const { clientX, clientY } = e.touches[0];\n        const diffX = Math.abs(x - clientX);\n        const diffY = Math.abs(y - clientY);\n        const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n        if (diff < MIN_DIST_PX) return;\n        const angle = (Math.atan(diffY / diffX) * 180) / Math.PI;\n        if (angle > MAX_ANGLE) {\n          startPosRef.current = null;\n          return;\n        }\n        allowedRef.current = true;\n      }\n      updateGalleryImage(e.touches[0].clientX);\n    },\n    [updateGalleryImage]\n  );\n\n  const touchEndHandler = useCallback<TouchEventHandler<HTMLDivElement>>(() => {\n    allowedRef.current = false;\n    startPosRef.current = null;\n  }, []);\n\n  return (\n    <ThemeOverrider activeTheme='dark'>\n      <Container\n        ref={containerRef}\n        heightPercent={heightPercent}\n        onMouseMove={mouseMoveHandler}\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n      >\n        <StyledImage url={imageUrl} {...imageProps} />\n        {urls.length > 1 && (\n          <>\n            {imageIndex !== null && (\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n            )}\n            {help && <GalleryHelp>{help}</GalleryHelp>}\n          </>\n        )}\n        {children}\n      </Container>\n    </ThemeOverrider>\n  );\n};\n\nexport default Gallery;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","clr","ThemeOverrider","isTouchDevice","omitEmotionProps","useSize","React","useCallback","useEffect","useMemo","useRef","useState","Image","GalleryStatus","Container","p","heightPercent","theme","galleryColorBg","borderRadius","StyledImage","GalleryHelp","div","galleryHelpColorBg","galleryHelpColorText","sizes","small","MIN_DIST_PX","MAX_ANGLE","Gallery","urls","aspectRatio","help","imageProps","children","rest","imageUrl","setImageUrl","undefined","imageIndex","setImageIndex","length","Math","round","imageIndexRef","current","containerRef","startTouchPosRef","size","sizeRef","statusHeight","height","updateGalleryImage","clientX","x","getBoundingClientRect","widthPerImage","width","xPos","nextIndex","floor","mouseMoveHandler","e","touchStartHandler","clientY","touches","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","index","touchEndHandler","handlers","onTouchStart","onTouchMove","onTouchEnd","onMouseMove"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { isTouchDevice, omitEmotionProps, useSize } from '@os-design/utils';\nimport React, {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst GalleryHelp = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n\n  background-color: ${(p) => clr(p.theme.galleryHelpColorBg)};\n  color: ${(p) => clr(p.theme.galleryHelpColorText)};\n  backdrop-filter: blur(0.2em);\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n\n  border-bottom-left-radius: ${(p) => p.theme.borderRadius}em;\n  padding: 0.1em 0.5em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The help message that is displayed in the upper right corner.\n   */\n  help?: string;\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\nconst MIN_DIST_PX = 30;\nconst MAX_ANGLE = 30;\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery: React.FC<GalleryProps> = ({\n  urls,\n  aspectRatio = [16, 9],\n  help,\n  imageProps = {},\n  children,\n  ...rest\n}) => {\n  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n  const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n  const heightPercent = useMemo(\n    () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n    [aspectRatio]\n  );\n\n  const imageIndexRef = useRef(imageIndex);\n  useEffect(() => {\n    imageIndexRef.current = imageIndex;\n  }, [imageIndex]);\n\n  // Update the image if the index was changed\n  useEffect(() => {\n    setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n  }, [imageIndex, urls]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const startTouchPosRef = useRef<{ x: number; y: number } | null>(null);\n\n  const size = useSize(containerRef);\n  const sizeRef = useRef(size);\n  useEffect(() => {\n    sizeRef.current = size;\n  }, [size]);\n\n  const statusHeight = useMemo(\n    () => Math.round(size.height / 70),\n    [size.height]\n  );\n\n  const updateGalleryImage = useCallback(\n    (clientX: number) => {\n      if (!containerRef.current) return;\n      const { x } = containerRef.current.getBoundingClientRect();\n      const widthPerImage = sizeRef.current.width / urls.length;\n      const xPos = clientX - x;\n      if (xPos < 0) return;\n      const nextIndex = Math.floor(xPos / widthPerImage);\n      if (imageIndexRef.current !== nextIndex) {\n        setImageIndex(nextIndex);\n      }\n    },\n    [urls.length]\n  );\n\n  const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (e) => updateGalleryImage(e.clientX),\n    [updateGalleryImage]\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { clientX, clientY } = e.touches[0];\n      startTouchPosRef.current = { x: clientX, y: clientY };\n    },\n    []\n  );\n\n  const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      if (!startTouchPosRef.current) return;\n      const { x, y } = startTouchPosRef.current;\n      const { clientX, clientY } = e.touches[0];\n      const diffX = Math.abs(x - clientX);\n      const diffY = Math.abs(y - clientY);\n      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n      if (diff < MIN_DIST_PX) return;\n      const angle = (Math.atan(diffY / diffX) * 180) / Math.PI;\n      if (angle > MAX_ANGLE) {\n        startTouchPosRef.current = null;\n        return;\n      }\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      if (x < clientX) {\n        setImageIndex(index > 0 ? index - 1 : urls.length - 1);\n      } else {\n        setImageIndex(index < urls.length - 1 ? index + 1 : 0);\n      }\n      startTouchPosRef.current = null;\n    },\n    [urls.length]\n  );\n\n  const touchEndHandler = useCallback<TouchEventHandler<HTMLDivElement>>(() => {\n    startTouchPosRef.current = null;\n  }, []);\n\n  const handlers = useMemo(() => {\n    if (isTouchDevice()) {\n      return {\n        onTouchStart: touchStartHandler,\n        onTouchMove: touchMoveHandler,\n        onTouchEnd: touchEndHandler,\n      };\n    }\n    return {\n      onMouseMove: mouseMoveHandler,\n    };\n  }, [mouseMoveHandler, touchEndHandler, touchMoveHandler, touchStartHandler]);\n\n  return (\n    <ThemeOverrider activeTheme='dark'>\n      <Container\n        ref={containerRef}\n        heightPercent={heightPercent}\n        {...handlers}\n        {...rest}\n      >\n        <StyledImage url={imageUrl} {...imageProps} />\n        {urls.length > 1 && (\n          <>\n            {imageIndex !== null && (\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n            )}\n            {help && <GalleryHelp>{help}</GalleryHelp>}\n          </>\n        )}\n        {children}\n      </Container>\n    </ThemeOverrider>\n  );\n};\n\nexport default Gallery;\n"],"mappings":"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"}

package/dist/types/Gallery/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Gallery/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA4C7C,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,YAAa,SAAQ,WAAW;IAI/C,IAAI,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAKvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAI/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAKrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4HnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Gallery/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA4C7C,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,YAAa,SAAQ,WAAW;IAI/C,IAAI,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAKvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAI/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAKrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwInC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.150",
+  "version": "1.0.151",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -57,5 +57,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "5b1feb3671b98c041f2ed5e0780ad469f6475f2c"
+  "gitHead": "7717accc62f9aeed38cd821b27a1b6fc6084a5cd"
 }