@os-design/core 1.0.154 → 1.0.156

package/dist/cjs/Gallery/index.js

@@ -23,7 +23,7 @@ var _Image = _interopRequireDefault(require("../Image"));
 
 var _Status = _interopRequireDefault(require("./Status"));
 
-var _excluded = ["urls", "aspectRatio", "imageProps", "children"];
+var _excluded = ["urls", "aspectRatio", "imageProps", "hideArrows", "children"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
@@ -77,6 +77,8 @@ var Gallery = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       aspectRatio = _ref$aspectRatio === void 0 ? [16, 9] : _ref$aspectRatio,
       _ref$imageProps = _ref.imageProps,
       imageProps = _ref$imageProps === void 0 ? {} : _ref$imageProps,
+      _ref$hideArrows = _ref.hideArrows,
+      hideArrows = _ref$hideArrows === void 0 ? false : _ref$hideArrows,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -140,6 +142,14 @@ var Gallery = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (index === null) return;
     setImageIndex(index < urls.length - 1 ? index + 1 : 0);
   }, [urls.length]);
+  var left = (0, _react.useCallback)(function (e) {
+    prev();
+    e.preventDefault();
+  }, [prev]);
+  var right = (0, _react.useCallback)(function (e) {
+    next();
+    e.preventDefault();
+  }, [next]);
   var mouseMoveHandler = (0, _react.useCallback)(function (e) {
     return updateGalleryImage(e.clientX);
   }, [updateGalleryImage]);
@@ -202,7 +212,7 @@ var Gallery = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     count: urls.length,
     current: imageIndex,
     height: statusHeight
-  }), (0, _utils.isTouchDevice)() && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
+  }), (0, _utils.isTouchDevice)() && !hideArrows && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
     overrides: {
       colorPrimary: [0, 0, 100]
     }
@@ -210,12 +220,12 @@ var Gallery = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     type: "ghost",
     wide: "never",
     size: "small",
-    onClick: prev
+    onClick: left
   }, /*#__PURE__*/_react["default"].createElement(_icons.Left, null)), /*#__PURE__*/_react["default"].createElement(RightButton, {
     type: "ghost",
     wide: "never",
     size: "small",
-    onClick: next
+    onClick: right
   }, /*#__PURE__*/_react["default"].createElement(_icons.Right, null)))), children));
 });
 var _default = Gallery;

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","NavButton","Button","LeftButton","RightButton","MIN_DIST_PX","MAX_ANGLE","Gallery","forwardRef","ref","urls","aspectRatio","imageProps","children","rest","useForwardedRef","innerContainerRef","mergedContainerRef","useState","undefined","imageUrl","setImageUrl","length","imageIndex","setImageIndex","useMemo","Math","round","imageIndexRef","useRef","useEffect","current","startTouchPosRef","size","useSize","sizeRef","statusHeight","height","updateGalleryImage","useCallback","clientX","getBoundingClientRect","x","widthPerImage","width","xPos","nextIndex","floor","prev","index","next","mouseMoveHandler","e","touchStartHandler","touches","clientY","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler","handlers","isTouchDevice","onTouchStart","onTouchMove","onTouchEnd","onMouseMove","colorPrimary"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Left, Right } from '@os-design/icons';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSize,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\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 NavButton = styled(Button)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n\n  background-color: hsla(0, 0%, 0%, 0.5);\n  backdrop-filter: blur(0.2em);\n`;\n\nconst LeftButton = styled(NavButton)`\n  left: 0.2em;\n`;\n\nconst RightButton = styled(NavButton)`\n  right: 0.2em;\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 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 = forwardRef<HTMLDivElement, GalleryProps>(\n  (\n    { urls, aspectRatio = [16, 9], imageProps = {}, children, ...rest },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] = useForwardedRef(ref);\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 startTouchPosRef = useRef<{ x: number; y: number } | null>(null);\n\n    const size = useSize(innerContainerRef);\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 (!innerContainerRef.current) return;\n        const { x } = innerContainerRef.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      [innerContainerRef, urls.length]\n    );\n\n    const prev = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index > 0 ? index - 1 : urls.length - 1);\n    }, [urls.length]);\n\n    const next = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index < urls.length - 1 ? index + 1 : 0);\n    }, [urls.length]);\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        if (x < clientX) prev();\n        else next();\n        startTouchPosRef.current = null;\n      },\n      [next, prev]\n    );\n\n    const touchEndHandler = useCallback<\n      TouchEventHandler<HTMLDivElement>\n    >(() => {\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    }, [\n      mouseMoveHandler,\n      touchEndHandler,\n      touchMoveHandler,\n      touchStartHandler,\n    ]);\n\n    return (\n      <ThemeOverrider activeTheme='dark'>\n        <Container\n          heightPercent={heightPercent}\n          {...handlers}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <StyledImage url={imageUrl} {...imageProps} />\n          {urls.length > 1 && imageIndex !== null && (\n            <>\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n              {isTouchDevice() && (\n                <ThemeOverrider overrides={{ colorPrimary: [0, 0, 100] }}>\n                  <LeftButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={prev}\n                  >\n                    <Left />\n                  </LeftButton>\n                  <RightButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={next}\n                  >\n                    <Right />\n                  </RightButton>\n                </ThemeOverrider>\n              )}\n            </>\n          )}\n          {children}\n        </Container>\n      </ThemeOverrider>\n    );\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","NavButton","Button","LeftButton","RightButton","MIN_DIST_PX","MAX_ANGLE","Gallery","forwardRef","ref","urls","aspectRatio","imageProps","hideArrows","children","rest","useForwardedRef","innerContainerRef","mergedContainerRef","useState","undefined","imageUrl","setImageUrl","length","imageIndex","setImageIndex","useMemo","Math","round","imageIndexRef","useRef","useEffect","current","startTouchPosRef","size","useSize","sizeRef","statusHeight","height","updateGalleryImage","useCallback","clientX","getBoundingClientRect","x","widthPerImage","width","xPos","nextIndex","floor","prev","index","next","left","e","preventDefault","right","mouseMoveHandler","touchStartHandler","touches","clientY","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler","handlers","isTouchDevice","onTouchStart","onTouchMove","onTouchEnd","onMouseMove","colorPrimary"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Left, Right } from '@os-design/icons';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSize,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\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 NavButton = styled(Button)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n\n  background-color: hsla(0, 0%, 0%, 0.5);\n  backdrop-filter: blur(0.2em);\n`;\n\nconst LeftButton = styled(NavButton)`\n  left: 0.2em;\n`;\n\nconst RightButton = styled(NavButton)`\n  right: 0.2em;\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 props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * Whether the navigation buttons is shown.\n   */\n  hideArrows?: boolean;\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 = forwardRef<HTMLDivElement, GalleryProps>(\n  (\n    {\n      urls,\n      aspectRatio = [16, 9],\n      imageProps = {},\n      hideArrows = false,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] = useForwardedRef(ref);\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 startTouchPosRef = useRef<{ x: number; y: number } | null>(null);\n\n    const size = useSize(innerContainerRef);\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 (!innerContainerRef.current) return;\n        const { x } = innerContainerRef.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      [innerContainerRef, urls.length]\n    );\n\n    const prev = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index > 0 ? index - 1 : urls.length - 1);\n    }, [urls.length]);\n\n    const next = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index < urls.length - 1 ? index + 1 : 0);\n    }, [urls.length]);\n\n    const left = useCallback<MouseEventHandler>(\n      (e) => {\n        prev();\n        e.preventDefault();\n      },\n      [prev]\n    );\n\n    const right = useCallback<MouseEventHandler>(\n      (e) => {\n        next();\n        e.preventDefault();\n      },\n      [next]\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        if (x < clientX) prev();\n        else next();\n        startTouchPosRef.current = null;\n      },\n      [next, prev]\n    );\n\n    const touchEndHandler = useCallback<\n      TouchEventHandler<HTMLDivElement>\n    >(() => {\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    }, [\n      mouseMoveHandler,\n      touchEndHandler,\n      touchMoveHandler,\n      touchStartHandler,\n    ]);\n\n    return (\n      <ThemeOverrider activeTheme='dark'>\n        <Container\n          heightPercent={heightPercent}\n          {...handlers}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <StyledImage url={imageUrl} {...imageProps} />\n          {urls.length > 1 && imageIndex !== null && (\n            <>\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n              {isTouchDevice() && !hideArrows && (\n                <ThemeOverrider overrides={{ colorPrimary: [0, 0, 100] }}>\n                  <LeftButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={left}\n                  >\n                    <Left />\n                  </LeftButton>\n                  <RightButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={right}\n                  >\n                    <Right />\n                  </RightButton>\n                </ThemeOverrider>\n              )}\n            </>\n          )}\n          {children}\n        </Container>\n      </ThemeOverrider>\n    );\n  }\n);\n\nexport default Gallery;\n"],"mappings":"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"}

package/dist/esm/Gallery/index.js

@@ -50,6 +50,7 @@ const Gallery = /*#__PURE__*/forwardRef(({
   urls,
   aspectRatio = [16, 9],
   imageProps = {},
+  hideArrows = false,
   children,
   ...rest
 }, ref) => {
@@ -96,6 +97,14 @@ const Gallery = /*#__PURE__*/forwardRef(({
     if (index === null) return;
     setImageIndex(index < urls.length - 1 ? index + 1 : 0);
   }, [urls.length]);
+  const left = useCallback(e => {
+    prev();
+    e.preventDefault();
+  }, [prev]);
+  const right = useCallback(e => {
+    next();
+    e.preventDefault();
+  }, [next]);
   const mouseMoveHandler = useCallback(e => updateGalleryImage(e.clientX), [updateGalleryImage]);
   const touchStartHandler = useCallback(e => {
     const {
@@ -159,7 +168,7 @@ const Gallery = /*#__PURE__*/forwardRef(({
     count: urls.length,
     current: imageIndex,
     height: statusHeight
-  }), isTouchDevice() && /*#__PURE__*/React.createElement(ThemeOverrider, {
+  }), isTouchDevice() && !hideArrows && /*#__PURE__*/React.createElement(ThemeOverrider, {
     overrides: {
       colorPrimary: [0, 0, 100]
     }
@@ -167,12 +176,12 @@ const Gallery = /*#__PURE__*/forwardRef(({
     type: "ghost",
     wide: "never",
     size: "small",
-    onClick: prev
+    onClick: left
   }, /*#__PURE__*/React.createElement(Left, null)), /*#__PURE__*/React.createElement(RightButton, {
     type: "ghost",
     wide: "never",
     size: "small",
-    onClick: next
+    onClick: right
   }, /*#__PURE__*/React.createElement(Right, null)))), children));
 });
 export default Gallery;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","Left","Right","clr","ThemeOverrider","isTouchDevice","omitEmotionProps","useForwardedRef","useSize","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Image","GalleryStatus","Container","p","heightPercent","theme","galleryColorBg","borderRadius","StyledImage","NavButton","LeftButton","RightButton","MIN_DIST_PX","MAX_ANGLE","Gallery","urls","aspectRatio","imageProps","children","rest","ref","innerContainerRef","mergedContainerRef","imageUrl","setImageUrl","undefined","imageIndex","setImageIndex","length","Math","round","imageIndexRef","current","startTouchPosRef","size","sizeRef","statusHeight","height","updateGalleryImage","clientX","x","getBoundingClientRect","widthPerImage","width","xPos","nextIndex","floor","prev","index","next","mouseMoveHandler","e","touchStartHandler","clientY","touches","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler","handlers","onTouchStart","onTouchMove","onTouchEnd","onMouseMove","colorPrimary"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Left, Right } from '@os-design/icons';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSize,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\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 NavButton = styled(Button)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n\n  background-color: hsla(0, 0%, 0%, 0.5);\n  backdrop-filter: blur(0.2em);\n`;\n\nconst LeftButton = styled(NavButton)`\n  left: 0.2em;\n`;\n\nconst RightButton = styled(NavButton)`\n  right: 0.2em;\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 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 = forwardRef<HTMLDivElement, GalleryProps>(\n  (\n    { urls, aspectRatio = [16, 9], imageProps = {}, children, ...rest },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] = useForwardedRef(ref);\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 startTouchPosRef = useRef<{ x: number; y: number } | null>(null);\n\n    const size = useSize(innerContainerRef);\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 (!innerContainerRef.current) return;\n        const { x } = innerContainerRef.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      [innerContainerRef, urls.length]\n    );\n\n    const prev = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index > 0 ? index - 1 : urls.length - 1);\n    }, [urls.length]);\n\n    const next = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index < urls.length - 1 ? index + 1 : 0);\n    }, [urls.length]);\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        if (x < clientX) prev();\n        else next();\n        startTouchPosRef.current = null;\n      },\n      [next, prev]\n    );\n\n    const touchEndHandler = useCallback<\n      TouchEventHandler<HTMLDivElement>\n    >(() => {\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    }, [\n      mouseMoveHandler,\n      touchEndHandler,\n      touchMoveHandler,\n      touchStartHandler,\n    ]);\n\n    return (\n      <ThemeOverrider activeTheme='dark'>\n        <Container\n          heightPercent={heightPercent}\n          {...handlers}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <StyledImage url={imageUrl} {...imageProps} />\n          {urls.length > 1 && imageIndex !== null && (\n            <>\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n              {isTouchDevice() && (\n                <ThemeOverrider overrides={{ colorPrimary: [0, 0, 100] }}>\n                  <LeftButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={prev}\n                  >\n                    <Left />\n                  </LeftButton>\n                  <RightButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={next}\n                  >\n                    <Right />\n                  </RightButton>\n                </ThemeOverrider>\n              )}\n            </>\n          )}\n          {children}\n        </Container>\n      </ThemeOverrider>\n    );\n  }\n);\n\nexport default Gallery;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AACA,SAASC,GAAT,EAAcC,cAAd,QAAoC,oBAApC;AACA,SACEC,aADF,EAEEC,gBAFF,EAGEC,eAHF,EAIEC,OAJF,QAKO,kBALP;AAMA,OAAOC,KAAP,IACEC,UADF,EAIEC,WAJF,EAKEC,SALF,EAMEC,OANF,EAOEC,MAPF,EAQEC,QARF,QASO,OATP;AAUA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,KAAP,MAAkC,UAAlC;AACA,OAAOC,aAAP,MAA0B,UAA1B;AAKA,MAAMC,SAAS,GAAGnB,MAAM,CACtB,KADsB,EAEtBM,gBAAgB,CAAC,eAAD,CAFM,CAGN;AAClB;AACA,oBAAqBc,CAAD,IAAOA,CAAC,CAACC,aAAc;AAC3C;AACA;AACA;AACA;AACA,sBAAuBD,CAAD,IAAOjB,GAAG,CAACiB,CAAC,CAACE,KAAF,CAAQC,cAAT,CAAyB;AACzD,mBAAoBH,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQE,YAAa;AAC/C;AACA,CAbA;AAeA,MAAMC,WAAW,GAAGzB,MAAM,CAACiB,KAAD,CAAQ;AAClC;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMS,SAAS,GAAG1B,MAAM,CAACgB,MAAD,CAAS;AACjC;AACA;AACA;AACA;AACA;AACA;AACA,CAPA;AASA,MAAMW,UAAU,GAAG3B,MAAM,CAAC0B,SAAD,CAAY;AACrC;AACA,CAFA;AAIA,MAAME,WAAW,GAAG5B,MAAM,CAAC0B,SAAD,CAAY;AACtC;AACA,CAFA;AA0BA,MAAMG,WAAW,GAAG,EAApB;AACA,MAAMC,SAAS,GAAG,EAAlB;AAEA;AACA;AACA;AACA;;AACA,MAAMC,OAAO,gBAAGrB,UAAU,CACxB,CACE;EAAEsB,IAAF;EAAQC,WAAW,GAAG,CAAC,EAAD,EAAK,CAAL,CAAtB;EAA+BC,UAAU,GAAG,EAA5C;EAAgDC,QAAhD;EAA0D,GAAGC;AAA7D,CADF,EAEEC,GAFF,KAGK;EACH,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0ChC,eAAe,CAAC8B,GAAD,CAA/D;EAEA,MAAM,CAACG,QAAD,EAAWC,WAAX,IAA0B1B,QAAQ,CAAqB2B,SAArB,CAAxC;EACA,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B7B,QAAQ,CAACiB,IAAI,CAACa,MAAL,GAAc,CAAd,GAAkB,CAAlB,GAAsB,IAAvB,CAA5C;EAEA,MAAMxB,aAAa,GAAGR,OAAO,CAC3B,MAAMiC,IAAI,CAACC,KAAL,CAAYd,WAAW,CAAC,CAAD,CAAX,GAAiBA,WAAW,CAAC,CAAD,CAA7B,GAAoC,OAA/C,IAA0D,KADrC,EAE3B,CAACA,WAAD,CAF2B,CAA7B;EAKA,MAAMe,aAAa,GAAGlC,MAAM,CAAC6B,UAAD,CAA5B;EACA/B,SAAS,CAAC,MAAM;IACdoC,aAAa,CAACC,OAAd,GAAwBN,UAAxB;EACD,CAFQ,EAEN,CAACA,UAAD,CAFM,CAAT,CAZG,CAgBH;;EACA/B,SAAS,CAAC,MAAM;IACd6B,WAAW,CAACE,UAAU,KAAK,IAAf,GAAsBX,IAAI,CAACW,UAAD,CAA1B,GAAyCD,SAA1C,CAAX;EACD,CAFQ,EAEN,CAACC,UAAD,EAAaX,IAAb,CAFM,CAAT;EAIA,MAAMkB,gBAAgB,GAAGpC,MAAM,CAAkC,IAAlC,CAA/B;EAEA,MAAMqC,IAAI,GAAG3C,OAAO,CAAC8B,iBAAD,CAApB;EACA,MAAMc,OAAO,GAAGtC,MAAM,CAACqC,IAAD,CAAtB;EACAvC,SAAS,CAAC,MAAM;IACdwC,OAAO,CAACH,OAAR,GAAkBE,IAAlB;EACD,CAFQ,EAEN,CAACA,IAAD,CAFM,CAAT;EAIA,MAAME,YAAY,GAAGxC,OAAO,CAC1B,MAAMiC,IAAI,CAACC,KAAL,CAAWI,IAAI,CAACG,MAAL,GAAc,EAAzB,CADoB,EAE1B,CAACH,IAAI,CAACG,MAAN,CAF0B,CAA5B;EAKA,MAAMC,kBAAkB,GAAG5C,WAAW,CACnC6C,OAAD,IAAqB;IACnB,IAAI,CAAClB,iBAAiB,CAACW,OAAvB,EAAgC;IAChC,MAAM;MAAEQ;IAAF,IAAQnB,iBAAiB,CAACW,OAAlB,CAA0BS,qBAA1B,EAAd;IACA,MAAMC,aAAa,GAAGP,OAAO,CAACH,OAAR,CAAgBW,KAAhB,GAAwB5B,IAAI,CAACa,MAAnD;IACA,MAAMgB,IAAI,GAAGL,OAAO,GAAGC,CAAvB;IACA,IAAII,IAAI,GAAG,CAAX,EAAc;IACd,MAAMC,SAAS,GAAGhB,IAAI,CAACiB,KAAL,CAAWF,IAAI,GAAGF,aAAlB,CAAlB;;IACA,IAAIX,aAAa,CAACC,OAAd,KAA0Ba,SAA9B,EAAyC;MACvClB,aAAa,CAACkB,SAAD,CAAb;IACD;EACF,CAXmC,EAYpC,CAACxB,iBAAD,EAAoBN,IAAI,CAACa,MAAzB,CAZoC,CAAtC;EAeA,MAAMmB,IAAI,GAAGrD,WAAW,CAAC,MAAM;IAC7B,MAAMsD,KAAK,GAAGjB,aAAa,CAACC,OAA5B;IACA,IAAIgB,KAAK,KAAK,IAAd,EAAoB;IACpBrB,aAAa,CAACqB,KAAK,GAAG,CAAR,GAAYA,KAAK,GAAG,CAApB,GAAwBjC,IAAI,CAACa,MAAL,GAAc,CAAvC,CAAb;EACD,CAJuB,EAIrB,CAACb,IAAI,CAACa,MAAN,CAJqB,CAAxB;EAMA,MAAMqB,IAAI,GAAGvD,WAAW,CAAC,MAAM;IAC7B,MAAMsD,KAAK,GAAGjB,aAAa,CAACC,OAA5B;IACA,IAAIgB,KAAK,KAAK,IAAd,EAAoB;IACpBrB,aAAa,CAACqB,KAAK,GAAGjC,IAAI,CAACa,MAAL,GAAc,CAAtB,GAA0BoB,KAAK,GAAG,CAAlC,GAAsC,CAAvC,CAAb;EACD,CAJuB,EAIrB,CAACjC,IAAI,CAACa,MAAN,CAJqB,CAAxB;EAMA,MAAMsB,gBAAgB,GAAGxD,WAAW,CACjCyD,CAAD,IAAOb,kBAAkB,CAACa,CAAC,CAACZ,OAAH,CADS,EAElC,CAACD,kBAAD,CAFkC,CAApC;EAKA,MAAMc,iBAAiB,GAAG1D,WAAW,CAClCyD,CAAD,IAAO;IACL,MAAM;MAAEZ,OAAF;MAAWc;IAAX,IAAuBF,CAAC,CAACG,OAAF,CAAU,CAAV,CAA7B;IACArB,gBAAgB,CAACD,OAAjB,GAA2B;MAAEQ,CAAC,EAAED,OAAL;MAAcgB,CAAC,EAAEF;IAAjB,CAA3B;EACD,CAJkC,EAKnC,EALmC,CAArC;EAQA,MAAMG,gBAAgB,GAAG9D,WAAW,CACjCyD,CAAD,IAAO;IACL,IAAI,CAAClB,gBAAgB,CAACD,OAAtB,EAA+B;IAC/B,MAAM;MAAEQ,CAAF;MAAKe;IAAL,IAAWtB,gBAAgB,CAACD,OAAlC;IACA,MAAM;MAAEO,OAAF;MAAWc;IAAX,IAAuBF,CAAC,CAACG,OAAF,CAAU,CAAV,CAA7B;IACA,MAAMG,KAAK,GAAG5B,IAAI,CAAC6B,GAAL,CAASlB,CAAC,GAAGD,OAAb,CAAd;IACA,MAAMoB,KAAK,GAAG9B,IAAI,CAAC6B,GAAL,CAASH,CAAC,GAAGF,OAAb,CAAd;IACA,MAAMO,IAAI,GAAG/B,IAAI,CAACgC,IAAL,CAAUJ,KAAK,IAAI,CAAT,GAAaE,KAAK,IAAI,CAAhC,CAAb;IACA,IAAIC,IAAI,GAAGhD,WAAX,EAAwB;IACxB,MAAMkD,KAAK,GAAIjC,IAAI,CAACkC,IAAL,CAAUJ,KAAK,GAAGF,KAAlB,IAA2B,GAA5B,GAAmC5B,IAAI,CAACmC,EAAtD;;IACA,IAAIF,KAAK,GAAGjD,SAAZ,EAAuB;MACrBoB,gBAAgB,CAACD,OAAjB,GAA2B,IAA3B;MACA;IACD;;IACD,IAAIQ,CAAC,GAAGD,OAAR,EAAiBQ,IAAI,GAArB,KACKE,IAAI;IACThB,gBAAgB,CAACD,OAAjB,GAA2B,IAA3B;EACD,CAjBiC,EAkBlC,CAACiB,IAAD,EAAOF,IAAP,CAlBkC,CAApC;EAqBA,MAAMkB,eAAe,GAAGvE,WAAW,CAEjC,MAAM;IACNuC,gBAAgB,CAACD,OAAjB,GAA2B,IAA3B;EACD,CAJkC,EAIhC,EAJgC,CAAnC;EAMA,MAAMkC,QAAQ,GAAGtE,OAAO,CAAC,MAAM;IAC7B,IAAIR,aAAa,EAAjB,EAAqB;MACnB,OAAO;QACL+E,YAAY,EAAEf,iBADT;QAELgB,WAAW,EAAEZ,gBAFR;QAGLa,UAAU,EAAEJ;MAHP,CAAP;IAKD;;IACD,OAAO;MACLK,WAAW,EAAEpB;IADR,CAAP;EAGD,CAXuB,EAWrB,CACDA,gBADC,EAEDe,eAFC,EAGDT,gBAHC,EAIDJ,iBAJC,CAXqB,CAAxB;EAkBA,oBACE,oBAAC,cAAD;IAAgB,WAAW,EAAC;EAA5B,gBACE,oBAAC,SAAD;IACE,aAAa,EAAEhD;EADjB,GAEM8D,QAFN,EAGM/C,IAHN;IAIE,GAAG,EAAEG;EAJP,iBAME,oBAAC,WAAD;IAAa,GAAG,EAAEC;EAAlB,GAAgCN,UAAhC,EANF,EAOGF,IAAI,CAACa,MAAL,GAAc,CAAd,IAAmBF,UAAU,KAAK,IAAlC,iBACC,uDACE,oBAAC,aAAD;IACE,KAAK,EAAEX,IAAI,CAACa,MADd;IAEE,OAAO,EAAEF,UAFX;IAGE,MAAM,EAAEU;EAHV,EADF,EAMGhD,aAAa,mBACZ,oBAAC,cAAD;IAAgB,SAAS,EAAE;MAAEmF,YAAY,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,GAAP;IAAhB;EAA3B,gBACE,oBAAC,UAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,IAAI,EAAC,OAHP;IAIE,OAAO,EAAExB;EAJX,gBAME,oBAAC,IAAD,OANF,CADF,eASE,oBAAC,WAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,IAAI,EAAC,OAHP;IAIE,OAAO,EAAEE;EAJX,gBAME,oBAAC,KAAD,OANF,CATF,CAPJ,CARJ,EAoCG/B,QApCH,CADF,CADF;AA0CD,CArKuB,CAA1B;AAwKA,eAAeJ,OAAf"}
+{"version":3,"file":"index.js","names":["styled","Left","Right","clr","ThemeOverrider","isTouchDevice","omitEmotionProps","useForwardedRef","useSize","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Image","GalleryStatus","Container","p","heightPercent","theme","galleryColorBg","borderRadius","StyledImage","NavButton","LeftButton","RightButton","MIN_DIST_PX","MAX_ANGLE","Gallery","urls","aspectRatio","imageProps","hideArrows","children","rest","ref","innerContainerRef","mergedContainerRef","imageUrl","setImageUrl","undefined","imageIndex","setImageIndex","length","Math","round","imageIndexRef","current","startTouchPosRef","size","sizeRef","statusHeight","height","updateGalleryImage","clientX","x","getBoundingClientRect","widthPerImage","width","xPos","nextIndex","floor","prev","index","next","left","e","preventDefault","right","mouseMoveHandler","touchStartHandler","clientY","touches","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler","handlers","onTouchStart","onTouchMove","onTouchEnd","onMouseMove","colorPrimary"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Left, Right } from '@os-design/icons';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSize,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\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 NavButton = styled(Button)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n\n  background-color: hsla(0, 0%, 0%, 0.5);\n  backdrop-filter: blur(0.2em);\n`;\n\nconst LeftButton = styled(NavButton)`\n  left: 0.2em;\n`;\n\nconst RightButton = styled(NavButton)`\n  right: 0.2em;\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 props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * Whether the navigation buttons is shown.\n   */\n  hideArrows?: boolean;\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 = forwardRef<HTMLDivElement, GalleryProps>(\n  (\n    {\n      urls,\n      aspectRatio = [16, 9],\n      imageProps = {},\n      hideArrows = false,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] = useForwardedRef(ref);\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 startTouchPosRef = useRef<{ x: number; y: number } | null>(null);\n\n    const size = useSize(innerContainerRef);\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 (!innerContainerRef.current) return;\n        const { x } = innerContainerRef.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      [innerContainerRef, urls.length]\n    );\n\n    const prev = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index > 0 ? index - 1 : urls.length - 1);\n    }, [urls.length]);\n\n    const next = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index < urls.length - 1 ? index + 1 : 0);\n    }, [urls.length]);\n\n    const left = useCallback<MouseEventHandler>(\n      (e) => {\n        prev();\n        e.preventDefault();\n      },\n      [prev]\n    );\n\n    const right = useCallback<MouseEventHandler>(\n      (e) => {\n        next();\n        e.preventDefault();\n      },\n      [next]\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        if (x < clientX) prev();\n        else next();\n        startTouchPosRef.current = null;\n      },\n      [next, prev]\n    );\n\n    const touchEndHandler = useCallback<\n      TouchEventHandler<HTMLDivElement>\n    >(() => {\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    }, [\n      mouseMoveHandler,\n      touchEndHandler,\n      touchMoveHandler,\n      touchStartHandler,\n    ]);\n\n    return (\n      <ThemeOverrider activeTheme='dark'>\n        <Container\n          heightPercent={heightPercent}\n          {...handlers}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <StyledImage url={imageUrl} {...imageProps} />\n          {urls.length > 1 && imageIndex !== null && (\n            <>\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n              {isTouchDevice() && !hideArrows && (\n                <ThemeOverrider overrides={{ colorPrimary: [0, 0, 100] }}>\n                  <LeftButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={left}\n                  >\n                    <Left />\n                  </LeftButton>\n                  <RightButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={right}\n                  >\n                    <Right />\n                  </RightButton>\n                </ThemeOverrider>\n              )}\n            </>\n          )}\n          {children}\n        </Container>\n      </ThemeOverrider>\n    );\n  }\n);\n\nexport default Gallery;\n"],"mappings":"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"}

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

@@ -5,6 +5,7 @@ export interface GalleryProps extends JsxDivProps {
     urls: string[] | ReadonlyArray<string>;
     aspectRatio?: [number, number];
     imageProps?: Omit<ImageProps, 'url'>;
+    hideArrows?: boolean;
     children?: React.ReactNode;
 }
 declare const Gallery: React.ForwardRefExoticComponent<GalleryProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Gallery/index.tsx"],"names":[],"mappings":"AASA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA6C7C,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,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAKrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,QAAA,MAAM,OAAO,qFAsKZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Gallery/index.tsx"],"names":[],"mappings":"AASA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA6C7C,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,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAIrC,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,QAAA,MAAM,OAAO,qFA6LZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.154",
+  "version": "1.0.156",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -30,14 +30,14 @@
   },
   "dependencies": {
     "@os-design/date-picker-utils": "^1.0.9",
-    "@os-design/icons": "^1.0.40",
+    "@os-design/icons": "^1.0.41",
     "@os-design/input-number-utils": "^1.0.16",
     "@os-design/media": "^1.0.15",
     "@os-design/menu-utils": "^1.0.10",
     "@os-design/portal": "^1.0.6",
-    "@os-design/styles": "^1.0.38",
-    "@os-design/theming": "^1.0.36",
-    "@os-design/utils": "^1.0.54",
+    "@os-design/styles": "^1.0.39",
+    "@os-design/theming": "^1.0.37",
+    "@os-design/utils": "^1.0.55",
     "@os-team/password-score": "^1.0.3",
     "facepaint": "^1.2.1",
     "react-focus-lock": "^2.9.1",
@@ -57,5 +57,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "d8cec89f4a8a654a6b20562ef89d68e88cff06b0"
+  "gitHead": "5a2a0d8ca15882259f4f84a52faca3e43f79841b"
 }