etudes 2.5.0 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Accordion.d.ts +16 -7
- package/lib/Accordion.js +36 -11
- package/lib/Accordion.js.map +1 -1
- package/lib/BurgerButton.d.ts +2 -2
- package/lib/BurgerButton.js +1 -1
- package/lib/BurgerButton.js.map +1 -1
- package/lib/Conditional.d.ts +1 -1
- package/lib/Conditional.js.map +1 -1
- package/lib/DebugConsole.d.ts +1 -1
- package/lib/DebugConsole.js.map +1 -1
- package/lib/Dial.d.ts +1 -1
- package/lib/Dial.js.map +1 -1
- package/lib/Dropdown.d.ts +13 -4
- package/lib/Dropdown.js +36 -15
- package/lib/Dropdown.js.map +1 -1
- package/lib/Each.d.ts +1 -1
- package/lib/Each.js.map +1 -1
- package/lib/ExtractChild.d.ts +1 -1
- package/lib/ExtractChild.js.map +1 -1
- package/lib/ExtractChildren.d.ts +1 -1
- package/lib/ExtractChildren.js.map +1 -1
- package/lib/FlatSVG.d.ts +1 -1
- package/lib/FlatSVG.js.map +1 -1
- package/lib/List.d.ts +1 -1
- package/lib/List.js.map +1 -1
- package/lib/MasonryGrid.d.ts +1 -1
- package/lib/MasonryGrid.js +10 -10
- package/lib/MasonryGrid.js.map +1 -1
- package/lib/Panorama.d.ts +15 -15
- package/lib/Panorama.js.map +1 -1
- package/lib/PanoramaSlider.d.ts +8 -8
- package/lib/PanoramaSlider.js +6 -6
- package/lib/PanoramaSlider.js.map +1 -1
- package/lib/RangeSlider.d.ts +1 -1
- package/lib/RangeSlider.js.map +1 -1
- package/lib/Repeat.d.ts +1 -1
- package/lib/Repeat.js.map +1 -1
- package/lib/RotatingGallery.d.ts +5 -5
- package/lib/RotatingGallery.js +2 -2
- package/lib/RotatingGallery.js.map +1 -1
- package/lib/SelectableButton.d.ts +1 -1
- package/lib/SelectableButton.js.map +1 -1
- package/lib/Slider.d.ts +11 -11
- package/lib/Slider.js +4 -4
- package/lib/Slider.js.map +1 -1
- package/lib/StepwiseSlider.d.ts +18 -18
- package/lib/StepwiseSlider.js +9 -9
- package/lib/StepwiseSlider.js.map +1 -1
- package/lib/SwipeContainer.d.ts +1 -1
- package/lib/SwipeContainer.js.map +1 -1
- package/lib/TextField.d.ts +1 -1
- package/lib/TextField.js.map +1 -1
- package/lib/Video.d.ts +1 -1
- package/lib/Video.js.map +1 -1
- package/lib/WithTooltip.d.ts +1 -1
- package/lib/WithTooltip.js.map +1 -1
- package/lib/hooks/useDragEffect.d.ts +15 -15
- package/lib/hooks/useDragEffect.js +6 -6
- package/lib/hooks/useDragEffect.js.map +1 -1
- package/lib/hooks/useElementRect.d.ts +2 -2
- package/lib/hooks/useElementRect.js +1 -1
- package/lib/hooks/useElementRect.js.map +1 -1
- package/lib/hooks/useInterval.d.ts +5 -5
- package/lib/hooks/useInterval.js +4 -4
- package/lib/hooks/useInterval.js.map +1 -1
- package/lib/hooks/useLoadImageEffect.d.ts +6 -6
- package/lib/hooks/useLoadImageEffect.js +3 -3
- package/lib/hooks/useLoadImageEffect.js.map +1 -1
- package/lib/hooks/usePrevious.d.ts +1 -1
- package/lib/hooks/usePrevious.js +1 -1
- package/lib/hooks/usePrevious.js.map +1 -1
- package/lib/hooks/useResizeEffect.d.ts +5 -5
- package/lib/hooks/useResizeEffect.js +3 -3
- package/lib/hooks/useResizeEffect.js.map +1 -1
- package/lib/hooks/useSearchParamState.d.ts +7 -7
- package/lib/hooks/useSearchParamState.js +3 -3
- package/lib/hooks/useSearchParamState.js.map +1 -1
- package/lib/providers/ScrollPositionProvider.d.ts +1 -1
- package/lib/providers/ScrollPositionProvider.js.map +1 -1
- package/lib/utils/asComponentDict.d.ts +1 -1
- package/lib/utils/asComponentDict.js.map +1 -1
- package/lib/utils/asStyleDict.d.ts +1 -1
- package/lib/utils/asStyleDict.js.map +1 -1
- package/lib/utils/cloneStyledElement.d.ts +6 -6
- package/lib/utils/cloneStyledElement.js.map +1 -1
- package/lib/utils/styles.d.ts +1 -1
- package/lib/utils/styles.js.map +1 -1
- package/package.json +12 -12
package/lib/Panorama.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { HTMLAttributes } from 'react';
|
|
1
|
+
import React, { type HTMLAttributes } from 'react';
|
|
2
2
|
import { Size } from 'spase';
|
|
3
3
|
export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
|
|
4
4
|
/**
|
|
@@ -26,8 +26,8 @@ export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
|
|
|
26
26
|
* Handler invoked when the positionchanges. This can either be invoked from
|
|
27
27
|
* the `angle` prop being changed or from the image being dragged.
|
|
28
28
|
*
|
|
29
|
-
* @param position
|
|
30
|
-
* @param isDragging
|
|
29
|
+
* @param position The current position.
|
|
30
|
+
* @param isDragging Specifies if the position change is due to dragging.
|
|
31
31
|
*/
|
|
32
32
|
onPositionChange?: (position: number, isDragging: boolean) => void;
|
|
33
33
|
/**
|
|
@@ -36,8 +36,8 @@ export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
|
|
|
36
36
|
* being double-binded, ensure that the value is only being set by this
|
|
37
37
|
* handler when `isDragging` is `true` to avoid potential update overflow.
|
|
38
38
|
*
|
|
39
|
-
* @param angle
|
|
40
|
-
* @param isDragging
|
|
39
|
+
* @param angle The current angle.
|
|
40
|
+
* @param isDragging Specifies if the angle change is due to dragging.
|
|
41
41
|
*/
|
|
42
42
|
onAngleChange?: (angle: number, isDragging: boolean) => void;
|
|
43
43
|
/**
|
|
@@ -55,7 +55,7 @@ export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
|
|
|
55
55
|
/**
|
|
56
56
|
* Handler invoked when the image is done loading.
|
|
57
57
|
*
|
|
58
|
-
* @param imageElement
|
|
58
|
+
* @param imageElement The loaded image element.
|
|
59
59
|
*/
|
|
60
60
|
onImageLoadComplete?: (imageElement: HTMLImageElement) => void;
|
|
61
61
|
/**
|
|
@@ -66,14 +66,14 @@ export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
|
|
|
66
66
|
* Handler invoked when the image size changes. This is the actual size of the
|
|
67
67
|
* loaded image. When no images are loaded yet, the size is `undefined`.
|
|
68
68
|
*
|
|
69
|
-
* @param size
|
|
69
|
+
* @param size The actual size of the loaded iamge. If no images are loaded
|
|
70
70
|
* yet, the size is `undefined`.
|
|
71
71
|
*/
|
|
72
72
|
onImageSizeChange?: (size?: Size) => void;
|
|
73
73
|
/**
|
|
74
74
|
* Handler invoked when the size of this component changes.
|
|
75
75
|
*
|
|
76
|
-
* @param size
|
|
76
|
+
* @param size The size of this component.
|
|
77
77
|
*/
|
|
78
78
|
onResize?: (size: Size) => void;
|
|
79
79
|
};
|
|
@@ -107,8 +107,8 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
|
|
|
107
107
|
* Handler invoked when the positionchanges. This can either be invoked from
|
|
108
108
|
* the `angle` prop being changed or from the image being dragged.
|
|
109
109
|
*
|
|
110
|
-
* @param position
|
|
111
|
-
* @param isDragging
|
|
110
|
+
* @param position The current position.
|
|
111
|
+
* @param isDragging Specifies if the position change is due to dragging.
|
|
112
112
|
*/
|
|
113
113
|
onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
|
|
114
114
|
/**
|
|
@@ -117,8 +117,8 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
|
|
|
117
117
|
* being double-binded, ensure that the value is only being set by this
|
|
118
118
|
* handler when `isDragging` is `true` to avoid potential update overflow.
|
|
119
119
|
*
|
|
120
|
-
* @param angle
|
|
121
|
-
* @param isDragging
|
|
120
|
+
* @param angle The current angle.
|
|
121
|
+
* @param isDragging Specifies if the angle change is due to dragging.
|
|
122
122
|
*/
|
|
123
123
|
onAngleChange?: ((angle: number, isDragging: boolean) => void) | undefined;
|
|
124
124
|
/**
|
|
@@ -136,7 +136,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
|
|
|
136
136
|
/**
|
|
137
137
|
* Handler invoked when the image is done loading.
|
|
138
138
|
*
|
|
139
|
-
* @param imageElement
|
|
139
|
+
* @param imageElement The loaded image element.
|
|
140
140
|
*/
|
|
141
141
|
onImageLoadComplete?: ((imageElement: HTMLImageElement) => void) | undefined;
|
|
142
142
|
/**
|
|
@@ -147,14 +147,14 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
|
|
|
147
147
|
* Handler invoked when the image size changes. This is the actual size of the
|
|
148
148
|
* loaded image. When no images are loaded yet, the size is `undefined`.
|
|
149
149
|
*
|
|
150
|
-
* @param size
|
|
150
|
+
* @param size The actual size of the loaded iamge. If no images are loaded
|
|
151
151
|
* yet, the size is `undefined`.
|
|
152
152
|
*/
|
|
153
153
|
onImageSizeChange?: ((size?: Size | undefined) => void) | undefined;
|
|
154
154
|
/**
|
|
155
155
|
* Handler invoked when the size of this component changes.
|
|
156
156
|
*
|
|
157
|
-
* @param size
|
|
157
|
+
* @param size The size of this component.
|
|
158
158
|
*/
|
|
159
159
|
onResize?: ((size: Size) => void) | undefined;
|
|
160
160
|
} & React.RefAttributes<HTMLDivElement>>;
|
package/lib/Panorama.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asStyleDict from './utils/asStyleDict'\n\nexport type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {\n /**\n * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or\n * 360, the left bound of the image is at the center of the component.\n */\n angle?: number\n\n /**\n * The panning speed. This is a multiplier to the number of pixels dragged,\n * i.e. when set to 1, the image will shift the same amount of pixels that\n * were dragged.\n */\n speed?: number\n\n /**\n * The source URL of the image.\n */\n src?: string\n\n /**\n * A decimal percentage of the component width indicating where 0° should be,\n * i.e. if `zeroAnchor` is `0`, the `angle` would be 0° when the left edge of\n * the image is at the left edge of the component.\n */\n zeroAnchor?: number\n\n /**\n * Handler invoked when the positionchanges. This can either be invoked from\n * the `angle` prop being changed or from the image being dragged.\n *\n * @param position - The current position.\n * @param isDragging - Specifies if the position change is due to dragging.\n */\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when the angle changes. This can either be invoked from the\n * `angle` prop being changed or from the image being dragged. When `angle` is\n * being double-binded, ensure that the value is only being set by this\n * handler when `isDragging` is `true` to avoid potential update overflow.\n *\n * @param angle - The current angle.\n * @param isDragging - Specifies if the angle change is due to dragging.\n */\n onAngleChange?: (angle: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when dragging starts.\n */\n onDragStart?: () => void\n\n /**\n * Handler invoked when dragging ends.\n */\n onDragEnd?: () => void\n\n /**\n * Handler invoked when the image begins loading.\n */\n onImageLoadStart?: () => void\n\n /**\n * Handler invoked when the image is done loading.\n *\n * @param imageElement - The loaded image element.\n */\n onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n /**\n * Handler invoked when there is an error loading the image.\n */\n onImageLoadError?: () => void\n\n /**\n * Handler invoked when the image size changes. This is the actual size of the\n * loaded image. When no images are loaded yet, the size is `undefined`.\n *\n * @param size - The actual size of the loaded iamge. If no images are loaded\n * yet, the size is `undefined`.\n */\n onImageSizeChange?: (size?: Size) => void\n\n /**\n * Handler invoked when the size of this component changes.\n *\n * @param size - The size of this component.\n */\n onResize?: (size: Size) => void\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports\n * two-way binding.\n */\nexport default forwardRef<HTMLDivElement, PanoramaProps>(({\n angle: externalAngle = 0,\n speed = 1,\n src,\n zeroAnchor = 0,\n onAngleChange,\n onPositionChange,\n onDragStart,\n onDragEnd,\n onImageLoadStart,\n onImageLoadComplete,\n onImageLoadError,\n onImageSizeChange,\n onResize,\n ...props\n}, ref) => {\n const mapDragPositionToDisplacement = (currentPosition: number, dx: number, dy: number): number => {\n const newDisplacement = currentPosition - dx * speed\n\n return newDisplacement\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const [size] = useResizeEffect(bodyRef, { onResize })\n const [angle, setAngle] = useState(externalAngle)\n\n const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n onImageLoadComplete,\n onImageLoadError,\n onImageSizeChange,\n })\n\n const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(bodyRef, {\n initialValue: 0,\n transform: mapDragPositionToDisplacement,\n onDragStart,\n onDragEnd,\n })\n\n useEffect(() => {\n if (isDragging || isLoading || !imageSize) return\n\n const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n if (newDisplacement !== displacement) {\n setDisplacement(newDisplacement)\n }\n\n if (externalAngle !== angle) {\n setAngle(externalAngle)\n }\n }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n useEffect(() => {\n if (!isDragging || !imageSize) return\n\n const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n if (angle !== newAngle) {\n setAngle(newAngle)\n }\n }, [displacement, imageSize, size, zeroAnchor])\n\n useEffect(() => {\n onAngleChange?.(angle, isDragging)\n onPositionChange?.(angle / 360, isDragging)\n }, [angle])\n\n const fixedStyles = asStyleDict({\n body: {\n backgroundImage: `url(${src})`,\n backgroundPositionX: `${-displacement}px`,\n backgroundRepeat: 'repeat',\n backgroundSize: 'auto 100%',\n height: '100%',\n touchAction: 'none',\n width: '100%',\n },\n })\n\n return (\n <div {...props} ref={ref}>\n <div ref={bodyRef} style={fixedStyles.body}/>\n </div>\n )\n})\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n const { width: originalWidth, height: originalHeight } = originalSize\n const { height: filledHeignt } = sizeToFill\n\n if (originalHeight <= 0) return new Size()\n\n const aspectRatio = filledHeignt / originalHeight\n const filledWidth = aspectRatio * originalWidth\n\n return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n const { width: componentWidth } = componentSize\n const offset = componentWidth * zeroAnchor\n\n return angle / 360 * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n const { width: componentWidth } = componentSize\n const offset = componentWidth * zeroAnchor\n\n let angle = (displacement + offset) % imageWidth / imageWidth * 360\n while (angle < 0) angle += 360\n\n return angle\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from 'react'\nimport { Size } from 'spase'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asStyleDict from './utils/asStyleDict'\n\nexport type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {\n /**\n * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or\n * 360, the left bound of the image is at the center of the component.\n */\n angle?: number\n\n /**\n * The panning speed. This is a multiplier to the number of pixels dragged,\n * i.e. when set to 1, the image will shift the same amount of pixels that\n * were dragged.\n */\n speed?: number\n\n /**\n * The source URL of the image.\n */\n src?: string\n\n /**\n * A decimal percentage of the component width indicating where 0° should be,\n * i.e. if `zeroAnchor` is `0`, the `angle` would be 0° when the left edge of\n * the image is at the left edge of the component.\n */\n zeroAnchor?: number\n\n /**\n * Handler invoked when the positionchanges. This can either be invoked from\n * the `angle` prop being changed or from the image being dragged.\n *\n * @param position The current position.\n * @param isDragging Specifies if the position change is due to dragging.\n */\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when the angle changes. This can either be invoked from the\n * `angle` prop being changed or from the image being dragged. When `angle` is\n * being double-binded, ensure that the value is only being set by this\n * handler when `isDragging` is `true` to avoid potential update overflow.\n *\n * @param angle The current angle.\n * @param isDragging Specifies if the angle change is due to dragging.\n */\n onAngleChange?: (angle: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when dragging starts.\n */\n onDragStart?: () => void\n\n /**\n * Handler invoked when dragging ends.\n */\n onDragEnd?: () => void\n\n /**\n * Handler invoked when the image begins loading.\n */\n onImageLoadStart?: () => void\n\n /**\n * Handler invoked when the image is done loading.\n *\n * @param imageElement The loaded image element.\n */\n onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n /**\n * Handler invoked when there is an error loading the image.\n */\n onImageLoadError?: () => void\n\n /**\n * Handler invoked when the image size changes. This is the actual size of the\n * loaded image. When no images are loaded yet, the size is `undefined`.\n *\n * @param size The actual size of the loaded iamge. If no images are loaded\n * yet, the size is `undefined`.\n */\n onImageSizeChange?: (size?: Size) => void\n\n /**\n * Handler invoked when the size of this component changes.\n *\n * @param size The size of this component.\n */\n onResize?: (size: Size) => void\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports\n * two-way binding.\n */\nexport default forwardRef<HTMLDivElement, PanoramaProps>(({\n angle: externalAngle = 0,\n speed = 1,\n src,\n zeroAnchor = 0,\n onAngleChange,\n onPositionChange,\n onDragStart,\n onDragEnd,\n onImageLoadStart,\n onImageLoadComplete,\n onImageLoadError,\n onImageSizeChange,\n onResize,\n ...props\n}, ref) => {\n const mapDragPositionToDisplacement = (currentPosition: number, dx: number, dy: number): number => {\n const newDisplacement = currentPosition - dx * speed\n\n return newDisplacement\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const [size] = useResizeEffect(bodyRef, { onResize })\n const [angle, setAngle] = useState(externalAngle)\n\n const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n onImageLoadComplete,\n onImageLoadError,\n onImageSizeChange,\n })\n\n const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(bodyRef, {\n initialValue: 0,\n transform: mapDragPositionToDisplacement,\n onDragStart,\n onDragEnd,\n })\n\n useEffect(() => {\n if (isDragging || isLoading || !imageSize) return\n\n const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n if (newDisplacement !== displacement) {\n setDisplacement(newDisplacement)\n }\n\n if (externalAngle !== angle) {\n setAngle(externalAngle)\n }\n }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n useEffect(() => {\n if (!isDragging || !imageSize) return\n\n const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n if (angle !== newAngle) {\n setAngle(newAngle)\n }\n }, [displacement, imageSize, size, zeroAnchor])\n\n useEffect(() => {\n onAngleChange?.(angle, isDragging)\n onPositionChange?.(angle / 360, isDragging)\n }, [angle])\n\n const fixedStyles = asStyleDict({\n body: {\n backgroundImage: `url(${src})`,\n backgroundPositionX: `${-displacement}px`,\n backgroundRepeat: 'repeat',\n backgroundSize: 'auto 100%',\n height: '100%',\n touchAction: 'none',\n width: '100%',\n },\n })\n\n return (\n <div {...props} ref={ref}>\n <div ref={bodyRef} style={fixedStyles.body}/>\n </div>\n )\n})\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n const { width: originalWidth, height: originalHeight } = originalSize\n const { height: filledHeignt } = sizeToFill\n\n if (originalHeight <= 0) return new Size()\n\n const aspectRatio = filledHeignt / originalHeight\n const filledWidth = aspectRatio * originalWidth\n\n return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n const { width: componentWidth } = componentSize\n const offset = componentWidth * zeroAnchor\n\n return angle / 360 * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n const { width: componentWidth } = componentSize\n const offset = componentWidth * zeroAnchor\n\n let angle = (displacement + offset) % imageWidth / imageWidth * 360\n while (angle < 0) angle += 360\n\n return angle\n}\n"]}
|
package/lib/PanoramaSlider.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React, { HTMLAttributes, PropsWithChildren } from 'react';
|
|
2
|
-
import { Size } from 'spase';
|
|
3
|
-
import { PanoramaProps } from './Panorama';
|
|
1
|
+
import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
|
|
2
|
+
import { type Size } from 'spase';
|
|
3
|
+
import { type PanoramaProps } from './Panorama';
|
|
4
4
|
export type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps & PropsWithChildren<{
|
|
5
5
|
/**
|
|
6
6
|
* Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of
|
|
@@ -27,11 +27,11 @@ export type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps
|
|
|
27
27
|
/**
|
|
28
28
|
* A slider for a {@link Panorama} component.
|
|
29
29
|
*
|
|
30
|
-
* @exports PanoramaSliderIndicator
|
|
31
|
-
*
|
|
32
|
-
* @exports PanoramaSliderReticle
|
|
33
|
-
*
|
|
34
|
-
* @exports PanoramaSliderTrack
|
|
30
|
+
* @exports PanoramaSliderIndicator The indicator that appears when the slider
|
|
31
|
+
* is being dragged.
|
|
32
|
+
* @exports PanoramaSliderReticle The reticle that indicates the FOV of the
|
|
33
|
+
* backing {@link Panorama}.
|
|
34
|
+
* @exports PanoramaSliderTrack The slide track.
|
|
35
35
|
*/
|
|
36
36
|
declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, "onResize"> & {
|
|
37
37
|
angle?: number | undefined;
|
package/lib/PanoramaSlider.js
CHANGED
|
@@ -67,8 +67,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
67
67
|
exports.PanoramaSliderIndicator = exports.PanoramaSliderReticle = exports.PanoramaSliderTrack = void 0;
|
|
68
68
|
var classnames_1 = __importDefault(require("classnames"));
|
|
69
69
|
var react_1 = __importStar(require("react"));
|
|
70
|
-
var useResizeEffect_1 = __importDefault(require("./hooks/useResizeEffect"));
|
|
71
70
|
var Panorama_1 = __importDefault(require("./Panorama"));
|
|
71
|
+
var useResizeEffect_1 = __importDefault(require("./hooks/useResizeEffect"));
|
|
72
72
|
var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
|
|
73
73
|
var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
|
|
74
74
|
var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
|
|
@@ -77,11 +77,11 @@ var styles_1 = __importDefault(require("./utils/styles"));
|
|
|
77
77
|
/**
|
|
78
78
|
* A slider for a {@link Panorama} component.
|
|
79
79
|
*
|
|
80
|
-
* @exports PanoramaSliderIndicator
|
|
81
|
-
*
|
|
82
|
-
* @exports PanoramaSliderReticle
|
|
83
|
-
*
|
|
84
|
-
* @exports PanoramaSliderTrack
|
|
80
|
+
* @exports PanoramaSliderIndicator The indicator that appears when the slider
|
|
81
|
+
* is being dragged.
|
|
82
|
+
* @exports PanoramaSliderReticle The reticle that indicates the FOV of the
|
|
83
|
+
* backing {@link Panorama}.
|
|
84
|
+
* @exports PanoramaSliderTrack The slide track.
|
|
85
85
|
*/
|
|
86
86
|
exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
87
87
|
var _b, _c, _d, _e;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanoramaSlider.js","sourceRoot":"/","sources":["PanoramaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport Panorama, { PanoramaProps } from './Panorama'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps & PropsWithChildren<{\n /**\n * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of\n * the reticle. 360 indicates the reticle covers the entire image. If this is\n * unspecified, the component will attempt to automatically calculate the FOV\n * using the `viewportSize` prop.\n */\n fov?: number\n\n /**\n * Specifies which length (width or height) should be automatically\n * calculated. The counterpart must be known (if `width` is specified here,\n * the component's height must be known, i.e. it is specified in the CSS).\n * Defaults to `width`.\n */\n autoDimension?: 'width' | 'height'\n\n /**\n * Size of the viewport that this component is controlling. A viewport can be\n * thought of as a DOM element containing an aspect-filled image. This is used\n * to automatically calculate the FOV if `fov` prop is not specified. If it\n * is, this prop is ignored.\n */\n viewportSize?: Size\n}>\n\n/**\n * A slider for a {@link Panorama} component.\n *\n * @exports PanoramaSliderIndicator - The indicator that appears when the slider\n * is being dragged.\n * @exports PanoramaSliderReticle - The reticle that indicates the FOV of the\n * backing {@link Panorama}.\n * @exports PanoramaSliderTrack - The slide track.\n */\nexport default forwardRef<HTMLDivElement, PanoramaSliderProps>(({\n className,\n style,\n angle = 0,\n autoDimension = 'width',\n children,\n fov,\n speed = 1,\n src,\n viewportSize,\n zeroAnchor = 0,\n onAngleChange,\n onDragEnd,\n onDragStart,\n onImageLoadComplete,\n onImageLoadError,\n onImageLoadStart,\n onImageSizeChange,\n onPositionChange,\n onResize,\n ...props\n}, ref) => {\n const getAspectRatio = () => {\n if (!imageSize) return 0\n const { width, height } = imageSize\n if (height === 0) return 0\n\n return width / height\n }\n\n const getReticleWidth = () => {\n const deg = Math.min(360, Math.max(0, fov ?? (viewportSize ? viewportSize.width / (viewportSize.height * aspectRatio) * 360 : 0)))\n\n return size.width * (deg / 360)\n }\n\n const getAdjustedZeroAnchor = () => {\n if (size.width <= 0) return zeroAnchor\n\n return ((size.width - reticleWidth) * 0.5 + zeroAnchor * reticleWidth) / size.width\n }\n\n const dragStartHandler = () => {\n setIsDragging(true)\n onDragStart?.()\n }\n\n const dragEndHandler = () => {\n setIsDragging(false)\n onDragEnd?.()\n }\n\n const panoramaRef = useRef<HTMLDivElement>(null)\n\n const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n const [isDragging, setIsDragging] = useState(false)\n\n const [size] = useResizeEffect(panoramaRef, { onResize })\n\n const aspectRatio = getAspectRatio()\n const reticleWidth = getReticleWidth()\n const adjustedZeroAnchor = getAdjustedZeroAnchor()\n\n const components = asComponentDict(children, {\n track: PanoramaSliderTrack,\n reticle: PanoramaSliderReticle,\n indicator: PanoramaSliderIndicator,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames({\n dragging: isDragging,\n }),\n track: classNames({\n dragging: isDragging,\n }),\n reticle: classNames({\n dragging: isDragging,\n }),\n indicator: classNames({\n dragging: isDragging,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n ...autoDimension === 'width' ? {\n width: `${size.height * aspectRatio}px`,\n } : {\n height: `${size.width / aspectRatio}px`,\n },\n },\n body: {\n height: '100%',\n left: '0',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n top: '0',\n width: '100%',\n },\n panorama: {\n height: '100%',\n width: '100%',\n },\n controls: {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'flex-start',\n left: '0',\n overflow: 'visible',\n position: 'absolute',\n top: '0',\n width: '100%',\n },\n track: {\n flex: '1 0 auto',\n },\n reticle: {\n width: `${reticleWidth}px`,\n },\n indicator: {\n width: `${reticleWidth}px`,\n },\n })\n\n const defaultStyles = asStyleDict({\n track: {\n background: 'rgba(0, 0, 0, .7)',\n height: '100%',\n },\n reticle: {\n background: `rgba(0, 0, 0, ${isDragging ? 0 : 0.3})`,\n flex: '0 0 auto',\n height: '100%',\n transitionDuration: '100ms',\n transitionProperty: 'background',\n transitionTimingFunction: 'ease-out',\n },\n indicator: {\n background: '#fff',\n borderRadius: '2px',\n bottom: '-10px',\n boxSizing: 'border-box',\n display: 'block',\n height: '2px',\n left: '0',\n margin: '0 auto',\n opacity: isDragging ? 1 : 0,\n position: 'absolute',\n right: '0',\n transition: 'opacity .3s ease-out',\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Panorama\n angle={angle}\n ref={panoramaRef}\n speed={speed}\n src={src}\n style={fixedStyles.panorama}\n zeroAnchor={adjustedZeroAnchor}\n onAngleChange={onAngleChange}\n onDragEnd={dragEndHandler}\n onDragStart={dragStartHandler}\n onImageLoadComplete={onImageLoadComplete}\n onImageLoadError={onImageLoadError}\n onImageLoadStart={onImageLoadStart}\n onImageSizeChange={setImageSize}\n onPositionChange={onPositionChange}\n />\n <div style={fixedStyles.body}>\n <div style={fixedStyles.controls}>\n {cloneStyledElement(components.track ?? <PanoramaSliderTrack style={defaultStyles.track}/>, {\n className: classNames(fixedClassNames.track),\n style: styles(fixedStyles.track),\n })}\n {cloneStyledElement(components.reticle ?? <PanoramaSliderReticle style={defaultStyles.reticle}/>, {\n className: classNames(fixedClassNames.reticle),\n style: styles(fixedStyles.reticle),\n })}\n {cloneStyledElement(components.track ?? <PanoramaSliderTrack style={defaultStyles.track}/>, {\n className: classNames(fixedClassNames.track),\n style: styles(fixedStyles.track),\n })}\n </div>\n </div>\n {cloneStyledElement(components.indicator ?? <PanoramaSliderIndicator style={defaultStyles.indicator}/>, {\n className: classNames(fixedClassNames.indicator),\n style: styles(fixedStyles.indicator),\n })}\n </div>\n )\n})\n\nexport const PanoramaSliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const PanoramaSliderReticle = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const PanoramaSliderIndicator = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
|
|
1
|
+
{"version":3,"file":"PanoramaSlider.js","sourceRoot":"/","sources":["PanoramaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useRef, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport { type Size } from 'spase'\nimport Panorama, { type PanoramaProps } from './Panorama'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps & PropsWithChildren<{\n /**\n * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of\n * the reticle. 360 indicates the reticle covers the entire image. If this is\n * unspecified, the component will attempt to automatically calculate the FOV\n * using the `viewportSize` prop.\n */\n fov?: number\n\n /**\n * Specifies which length (width or height) should be automatically\n * calculated. The counterpart must be known (if `width` is specified here,\n * the component's height must be known, i.e. it is specified in the CSS).\n * Defaults to `width`.\n */\n autoDimension?: 'width' | 'height'\n\n /**\n * Size of the viewport that this component is controlling. A viewport can be\n * thought of as a DOM element containing an aspect-filled image. This is used\n * to automatically calculate the FOV if `fov` prop is not specified. If it\n * is, this prop is ignored.\n */\n viewportSize?: Size\n}>\n\n/**\n * A slider for a {@link Panorama} component.\n *\n * @exports PanoramaSliderIndicator The indicator that appears when the slider\n * is being dragged.\n * @exports PanoramaSliderReticle The reticle that indicates the FOV of the\n * backing {@link Panorama}.\n * @exports PanoramaSliderTrack The slide track.\n */\nexport default forwardRef<HTMLDivElement, PanoramaSliderProps>(({\n className,\n style,\n angle = 0,\n autoDimension = 'width',\n children,\n fov,\n speed = 1,\n src,\n viewportSize,\n zeroAnchor = 0,\n onAngleChange,\n onDragEnd,\n onDragStart,\n onImageLoadComplete,\n onImageLoadError,\n onImageLoadStart,\n onImageSizeChange,\n onPositionChange,\n onResize,\n ...props\n}, ref) => {\n const getAspectRatio = () => {\n if (!imageSize) return 0\n const { width, height } = imageSize\n if (height === 0) return 0\n\n return width / height\n }\n\n const getReticleWidth = () => {\n const deg = Math.min(360, Math.max(0, fov ?? (viewportSize ? viewportSize.width / (viewportSize.height * aspectRatio) * 360 : 0)))\n\n return size.width * (deg / 360)\n }\n\n const getAdjustedZeroAnchor = () => {\n if (size.width <= 0) return zeroAnchor\n\n return ((size.width - reticleWidth) * 0.5 + zeroAnchor * reticleWidth) / size.width\n }\n\n const dragStartHandler = () => {\n setIsDragging(true)\n onDragStart?.()\n }\n\n const dragEndHandler = () => {\n setIsDragging(false)\n onDragEnd?.()\n }\n\n const panoramaRef = useRef<HTMLDivElement>(null)\n\n const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n const [isDragging, setIsDragging] = useState(false)\n\n const [size] = useResizeEffect(panoramaRef, { onResize })\n\n const aspectRatio = getAspectRatio()\n const reticleWidth = getReticleWidth()\n const adjustedZeroAnchor = getAdjustedZeroAnchor()\n\n const components = asComponentDict(children, {\n track: PanoramaSliderTrack,\n reticle: PanoramaSliderReticle,\n indicator: PanoramaSliderIndicator,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames({\n dragging: isDragging,\n }),\n track: classNames({\n dragging: isDragging,\n }),\n reticle: classNames({\n dragging: isDragging,\n }),\n indicator: classNames({\n dragging: isDragging,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n ...autoDimension === 'width' ? {\n width: `${size.height * aspectRatio}px`,\n } : {\n height: `${size.width / aspectRatio}px`,\n },\n },\n body: {\n height: '100%',\n left: '0',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n top: '0',\n width: '100%',\n },\n panorama: {\n height: '100%',\n width: '100%',\n },\n controls: {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'flex-start',\n left: '0',\n overflow: 'visible',\n position: 'absolute',\n top: '0',\n width: '100%',\n },\n track: {\n flex: '1 0 auto',\n },\n reticle: {\n width: `${reticleWidth}px`,\n },\n indicator: {\n width: `${reticleWidth}px`,\n },\n })\n\n const defaultStyles = asStyleDict({\n track: {\n background: 'rgba(0, 0, 0, .7)',\n height: '100%',\n },\n reticle: {\n background: `rgba(0, 0, 0, ${isDragging ? 0 : 0.3})`,\n flex: '0 0 auto',\n height: '100%',\n transitionDuration: '100ms',\n transitionProperty: 'background',\n transitionTimingFunction: 'ease-out',\n },\n indicator: {\n background: '#fff',\n borderRadius: '2px',\n bottom: '-10px',\n boxSizing: 'border-box',\n display: 'block',\n height: '2px',\n left: '0',\n margin: '0 auto',\n opacity: isDragging ? 1 : 0,\n position: 'absolute',\n right: '0',\n transition: 'opacity .3s ease-out',\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Panorama\n angle={angle}\n ref={panoramaRef}\n speed={speed}\n src={src}\n style={fixedStyles.panorama}\n zeroAnchor={adjustedZeroAnchor}\n onAngleChange={onAngleChange}\n onDragEnd={dragEndHandler}\n onDragStart={dragStartHandler}\n onImageLoadComplete={onImageLoadComplete}\n onImageLoadError={onImageLoadError}\n onImageLoadStart={onImageLoadStart}\n onImageSizeChange={setImageSize}\n onPositionChange={onPositionChange}\n />\n <div style={fixedStyles.body}>\n <div style={fixedStyles.controls}>\n {cloneStyledElement(components.track ?? <PanoramaSliderTrack style={defaultStyles.track}/>, {\n className: classNames(fixedClassNames.track),\n style: styles(fixedStyles.track),\n })}\n {cloneStyledElement(components.reticle ?? <PanoramaSliderReticle style={defaultStyles.reticle}/>, {\n className: classNames(fixedClassNames.reticle),\n style: styles(fixedStyles.reticle),\n })}\n {cloneStyledElement(components.track ?? <PanoramaSliderTrack style={defaultStyles.track}/>, {\n className: classNames(fixedClassNames.track),\n style: styles(fixedStyles.track),\n })}\n </div>\n </div>\n {cloneStyledElement(components.indicator ?? <PanoramaSliderIndicator style={defaultStyles.indicator}/>, {\n className: classNames(fixedClassNames.indicator),\n style: styles(fixedStyles.indicator),\n })}\n </div>\n )\n})\n\nexport const PanoramaSliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const PanoramaSliderReticle = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const PanoramaSliderIndicator = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
|
package/lib/RangeSlider.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { HTMLAttributes, PropsWithChildren } from 'react';
|
|
1
|
+
import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
|
|
2
2
|
type Orientation = 'horizontal' | 'vertical';
|
|
3
3
|
type Range = [number, number];
|
|
4
4
|
export type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
|
package/lib/RangeSlider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren, useEffect, useRef, useState } from 'react'\nimport useDragEffect from './hooks/useDragEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\ntype Range = [number, number]\n\nexport type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n areLabelsVisible?: boolean\n decimalPlaces?: number\n knobPadding?: number\n max: number\n min: number\n orientation?: Orientation\n range?: Range\n steps?: number\n onRangeChange?: (range: Range) => void\n}>\n\nexport default forwardRef<HTMLDivElement, RangeSliderProps>(({\n children,\n className,\n areLabelsVisible = true,\n decimalPlaces = 2,\n knobPadding = 20,\n max: maxValue,\n min: minValue,\n orientation = 'vertical',\n range: externalRange,\n steps = -1,\n onRangeChange,\n ...props\n}, ref) => {\n const getPositionByValue = (value: number) => (value - minValue) / (maxValue - minValue)\n const getPositionByDisplacement = (displacement: number) => displacement / (orientation === 'horizontal' ? size.width : size.height)\n const getValueByPosition = (position: number) => position * (maxValue - minValue) + minValue\n const getValueByDisplacement = (displacement: number) => getValueByPosition(getPositionByDisplacement(displacement))\n const getDisplacementByPosition = (position: number) => position * (orientation === 'horizontal' ? size.width : size.height)\n const getDisplacementByValue = (value: number) => getDisplacementByPosition(getPositionByValue(value))\n\n const getClosestSteppedValue = (value: number) => {\n const n = breakpoints.length\n let idx = 0\n let diff = Infinity\n\n for (let i = 0; i < n; i++) {\n const t = breakpoints[i]\n const d = Math.abs(value - t)\n\n if (d < diff) {\n diff = d\n idx = i\n }\n }\n\n return breakpoints[idx]\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const startKnobRef = useRef<HTMLDivElement>(null)\n const endKnobRef = useRef<HTMLDivElement>(null)\n\n const [size] = useResizeEffect(bodyRef)\n\n const [range, setRange] = useState<Range>(externalRange ?? [minValue, maxValue])\n\n const { isDragging: [isDraggingStartKnob], isReleasing: [isReleasingStartKnob], value: [startValue, setStartValue] } = useDragEffect(startKnobRef, {\n initialValue: externalRange?.[0] ?? minValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(minValue)\n const dMax = getDisplacementByValue(range[1])\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [minValue, orientation, size, range[1]])\n\n const { isDragging: [isDraggingEndKnob], isReleasing: [isReleasingEndKnob], value: [endValue, setEndValue] } = useDragEffect(endKnobRef, {\n initialValue: externalRange?.[1] ?? maxValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(range[0])\n const dMax = getDisplacementByValue(maxValue)\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [maxValue, orientation, size, range[0]])\n\n const breakpoints = [minValue, ...[...Array(steps)].map((v, i) => minValue + (i + 1) * (maxValue - minValue) / (1 + steps)), maxValue]\n const [start, end] = range.map(getDisplacementByValue)\n const highlightLength = end - start\n\n useEffect(() => {\n if (range[0] === startValue) return\n setRange([startValue, range[1]])\n onRangeChange?.(range)\n }, [startValue])\n\n useEffect(() => {\n if (range[1] === endValue) return\n setRange([range[0], endValue])\n onRangeChange?.(range)\n }, [endValue])\n\n useEffect(() => {\n if (isDraggingStartKnob || isDraggingEndKnob || isEqual(externalRange, range)) return\n setRange(externalRange ?? [minValue, maxValue])\n }, [externalRange])\n\n useEffect(() => {\n if (steps < 0) return\n setStartValue(getClosestSteppedValue(startValue))\n }, [isReleasingStartKnob])\n\n useEffect(() => {\n if (steps < 0 || !isReleasingEndKnob) return\n setEndValue(getClosestSteppedValue(endValue))\n }, [isReleasingEndKnob])\n\n const components = asComponentDict(children, {\n gutter: RangeSliderGutter,\n highlight: RangeSliderHighlight,\n knob: RangeSliderKnob,\n label: RangeSliderLabel,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n gutter: classNames(orientation),\n highlight: classNames(orientation),\n knob: classNames(orientation),\n label: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n body: {\n height: '100%',\n width: '100%',\n },\n gutter: {\n display: 'block',\n top: '0',\n left: '0',\n position: 'absolute',\n width: '100%',\n height: '100%',\n },\n highlight: {\n height: '100%',\n left: '0',\n position: 'absolute',\n top: '0',\n ...orientation === 'horizontal' ? {\n width: `${highlightLength}px`,\n transform: `translate3d(${start}px, 0, 0)`,\n } : {\n height: `${highlightLength}px`,\n transform: `translate3d(0, ${start}px, 0)`,\n },\n },\n knob: {\n bottom: '0',\n left: '0',\n margin: 'auto',\n position: 'absolute',\n right: '0',\n top: '0',\n touchAction: 'none',\n zIndex: '1',\n },\n knobHitbox: {\n background: 'transparent',\n height: `calc(100% + ${knobPadding * 2}px)`,\n left: `-${knobPadding}px`,\n padding: `${knobPadding}px`,\n position: 'absolute',\n top: `-${knobPadding}px`,\n width: `calc(100% + ${knobPadding * 2}px)`,\n },\n label: {\n pointerEvents: 'none',\n position: 'relative',\n userSelect: 'none',\n },\n })\n\n const defaultStyles = asStyleDict({\n gutter: {\n background: 'rgba(255, 255, 255, .2)',\n },\n highlight: {\n background: '#fff',\n transitionDuration: '100ms',\n transitionProperty: (isReleasingStartKnob ? !isReleasingEndKnob : isReleasingEndKnob) ? 'opacity, width, transform' : 'opacity',\n transitionTimingFunction: 'ease-out',\n },\n knob: {\n alignItems: 'center',\n background: '#fff',\n borderRadius: '10px',\n boxSizing: 'border-box',\n display: 'flex',\n height: '20px',\n justifyContent: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n width: '20px',\n },\n label: {\n background: 'transparent',\n color: '#fff',\n textAlign: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'horizontal' ? {\n top: 'calc(100% + 10px)',\n } : {\n left: 'calc(100% + 10px)',\n },\n },\n })\n\n return (\n <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n <div ref={bodyRef} style={fixedStyles.body}>\n {cloneStyledElement(components.gutter ?? <RangeSliderGutter style={defaultStyles.gutter}/>, {\n className: classNames(fixedClassNames.gutter),\n style: styles(fixedStyles.gutter),\n })}\n {cloneStyledElement(components.highlight ?? <RangeSliderHighlight style={defaultStyles.highlight}/>, {\n className: classNames(fixedClassNames.highlight),\n style: styles(fixedStyles.highlight),\n })}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: startKnobRef,\n disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingStartKnob,\n releasing: isReleasingStartKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isEqual([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${start}px`,\n } : {\n marginTop: `${start}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingStartKnob || isDraggingEndKnob,\n releasing: isReleasingStartKnob || isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(startValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: endKnobRef,\n disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingEndKnob,\n releasing: isDraggingEndKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isEqual([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${end}px`,\n } : {\n marginTop: `${end}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingEndKnob,\n releasing: isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(endValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n </div>\n </div>\n )\n})\n\nexport const RangeSliderGutter = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderHighlight = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderKnob = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ ...props }, ref) => <div {...props} ref={ref}/>)\n"]}
|
|
1
|
+
{"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport useDragEffect from './hooks/useDragEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\ntype Range = [number, number]\n\nexport type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n areLabelsVisible?: boolean\n decimalPlaces?: number\n knobPadding?: number\n max: number\n min: number\n orientation?: Orientation\n range?: Range\n steps?: number\n onRangeChange?: (range: Range) => void\n}>\n\nexport default forwardRef<HTMLDivElement, RangeSliderProps>(({\n children,\n className,\n areLabelsVisible = true,\n decimalPlaces = 2,\n knobPadding = 20,\n max: maxValue,\n min: minValue,\n orientation = 'vertical',\n range: externalRange,\n steps = -1,\n onRangeChange,\n ...props\n}, ref) => {\n const getPositionByValue = (value: number) => (value - minValue) / (maxValue - minValue)\n const getPositionByDisplacement = (displacement: number) => displacement / (orientation === 'horizontal' ? size.width : size.height)\n const getValueByPosition = (position: number) => position * (maxValue - minValue) + minValue\n const getValueByDisplacement = (displacement: number) => getValueByPosition(getPositionByDisplacement(displacement))\n const getDisplacementByPosition = (position: number) => position * (orientation === 'horizontal' ? size.width : size.height)\n const getDisplacementByValue = (value: number) => getDisplacementByPosition(getPositionByValue(value))\n\n const getClosestSteppedValue = (value: number) => {\n const n = breakpoints.length\n let idx = 0\n let diff = Infinity\n\n for (let i = 0; i < n; i++) {\n const t = breakpoints[i]\n const d = Math.abs(value - t)\n\n if (d < diff) {\n diff = d\n idx = i\n }\n }\n\n return breakpoints[idx]\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const startKnobRef = useRef<HTMLDivElement>(null)\n const endKnobRef = useRef<HTMLDivElement>(null)\n\n const [size] = useResizeEffect(bodyRef)\n\n const [range, setRange] = useState<Range>(externalRange ?? [minValue, maxValue])\n\n const { isDragging: [isDraggingStartKnob], isReleasing: [isReleasingStartKnob], value: [startValue, setStartValue] } = useDragEffect(startKnobRef, {\n initialValue: externalRange?.[0] ?? minValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(minValue)\n const dMax = getDisplacementByValue(range[1])\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [minValue, orientation, size, range[1]])\n\n const { isDragging: [isDraggingEndKnob], isReleasing: [isReleasingEndKnob], value: [endValue, setEndValue] } = useDragEffect(endKnobRef, {\n initialValue: externalRange?.[1] ?? maxValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(range[0])\n const dMax = getDisplacementByValue(maxValue)\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [maxValue, orientation, size, range[0]])\n\n const breakpoints = [minValue, ...[...Array(steps)].map((v, i) => minValue + (i + 1) * (maxValue - minValue) / (1 + steps)), maxValue]\n const [start, end] = range.map(getDisplacementByValue)\n const highlightLength = end - start\n\n useEffect(() => {\n if (range[0] === startValue) return\n setRange([startValue, range[1]])\n onRangeChange?.(range)\n }, [startValue])\n\n useEffect(() => {\n if (range[1] === endValue) return\n setRange([range[0], endValue])\n onRangeChange?.(range)\n }, [endValue])\n\n useEffect(() => {\n if (isDraggingStartKnob || isDraggingEndKnob || isEqual(externalRange, range)) return\n setRange(externalRange ?? [minValue, maxValue])\n }, [externalRange])\n\n useEffect(() => {\n if (steps < 0) return\n setStartValue(getClosestSteppedValue(startValue))\n }, [isReleasingStartKnob])\n\n useEffect(() => {\n if (steps < 0 || !isReleasingEndKnob) return\n setEndValue(getClosestSteppedValue(endValue))\n }, [isReleasingEndKnob])\n\n const components = asComponentDict(children, {\n gutter: RangeSliderGutter,\n highlight: RangeSliderHighlight,\n knob: RangeSliderKnob,\n label: RangeSliderLabel,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n gutter: classNames(orientation),\n highlight: classNames(orientation),\n knob: classNames(orientation),\n label: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n body: {\n height: '100%',\n width: '100%',\n },\n gutter: {\n display: 'block',\n top: '0',\n left: '0',\n position: 'absolute',\n width: '100%',\n height: '100%',\n },\n highlight: {\n height: '100%',\n left: '0',\n position: 'absolute',\n top: '0',\n ...orientation === 'horizontal' ? {\n width: `${highlightLength}px`,\n transform: `translate3d(${start}px, 0, 0)`,\n } : {\n height: `${highlightLength}px`,\n transform: `translate3d(0, ${start}px, 0)`,\n },\n },\n knob: {\n bottom: '0',\n left: '0',\n margin: 'auto',\n position: 'absolute',\n right: '0',\n top: '0',\n touchAction: 'none',\n zIndex: '1',\n },\n knobHitbox: {\n background: 'transparent',\n height: `calc(100% + ${knobPadding * 2}px)`,\n left: `-${knobPadding}px`,\n padding: `${knobPadding}px`,\n position: 'absolute',\n top: `-${knobPadding}px`,\n width: `calc(100% + ${knobPadding * 2}px)`,\n },\n label: {\n pointerEvents: 'none',\n position: 'relative',\n userSelect: 'none',\n },\n })\n\n const defaultStyles = asStyleDict({\n gutter: {\n background: 'rgba(255, 255, 255, .2)',\n },\n highlight: {\n background: '#fff',\n transitionDuration: '100ms',\n transitionProperty: (isReleasingStartKnob ? !isReleasingEndKnob : isReleasingEndKnob) ? 'opacity, width, transform' : 'opacity',\n transitionTimingFunction: 'ease-out',\n },\n knob: {\n alignItems: 'center',\n background: '#fff',\n borderRadius: '10px',\n boxSizing: 'border-box',\n display: 'flex',\n height: '20px',\n justifyContent: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n width: '20px',\n },\n label: {\n background: 'transparent',\n color: '#fff',\n textAlign: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'horizontal' ? {\n top: 'calc(100% + 10px)',\n } : {\n left: 'calc(100% + 10px)',\n },\n },\n })\n\n return (\n <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n <div ref={bodyRef} style={fixedStyles.body}>\n {cloneStyledElement(components.gutter ?? <RangeSliderGutter style={defaultStyles.gutter}/>, {\n className: classNames(fixedClassNames.gutter),\n style: styles(fixedStyles.gutter),\n })}\n {cloneStyledElement(components.highlight ?? <RangeSliderHighlight style={defaultStyles.highlight}/>, {\n className: classNames(fixedClassNames.highlight),\n style: styles(fixedStyles.highlight),\n })}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: startKnobRef,\n disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingStartKnob,\n releasing: isReleasingStartKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isEqual([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${start}px`,\n } : {\n marginTop: `${start}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingStartKnob || isDraggingEndKnob,\n releasing: isReleasingStartKnob || isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(startValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: endKnobRef,\n disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingEndKnob,\n releasing: isDraggingEndKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isEqual([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${end}px`,\n } : {\n marginTop: `${end}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingEndKnob,\n releasing: isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(endValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n </div>\n </div>\n )\n})\n\nexport const RangeSliderGutter = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderHighlight = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderKnob = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ ...props }, ref) => <div {...props} ref={ref}/>)\n"]}
|
package/lib/Repeat.d.ts
CHANGED
package/lib/Repeat.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Repeat.js","sourceRoot":"/","sources":["Repeat.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Repeat.js","sourceRoot":"/","sources":["Repeat.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuD;AAQvD;;;GAGG;AACH,SAAwB,MAAM,CAAC,EAIjB;QAHZ,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,OAAO,CACL,8DACG,yBAAI,KAAK,CAAC,KAAK,CAAC,UAAE,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAC/B,8BAAC,gBAAQ,IAAC,GAAG,EAAE,kBAAW,CAAC,CAAE,IAC1B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CACpE,CACZ,EAJgC,CAIhC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAdD,yBAcC","sourcesContent":["import React, { Fragment, type ReactNode } from 'react'\n\nexport type RepeatProps = {\n children?: ReactNode | ((index: number) => ReactNode)\n count?: number\n render?: (index: number) => ReactNode\n}\n\n/**\n * A tag-less component that repeats its children, automatically assigning each\n * a unique key.\n */\nexport default function Repeat({\n count = 1,\n children,\n render,\n}: RepeatProps) {\n return (\n <>\n {[...Array(count)].map((v, i) => (\n <Fragment key={`element-${i}`}>\n {render ? render(i) : typeof children === 'function' ? children(i) : children}\n </Fragment>\n ))}\n </>\n )\n}\n"]}
|
package/lib/RotatingGallery.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { HTMLAttributes, PropsWithChildren } from 'react';
|
|
1
|
+
import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
|
|
2
2
|
export type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
|
|
3
3
|
/**
|
|
4
4
|
* Current image index. An error is thrown if the index is invalid (must be
|
|
@@ -23,15 +23,15 @@ export type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChi
|
|
|
23
23
|
/**
|
|
24
24
|
* Handler invoked when the image index changes.
|
|
25
25
|
*
|
|
26
|
-
* @param index
|
|
26
|
+
* @param index The current image index.
|
|
27
27
|
*/
|
|
28
28
|
onIndexChange?: (index: number) => void;
|
|
29
29
|
}>;
|
|
30
30
|
/**
|
|
31
31
|
* A component displaying rotating images.
|
|
32
32
|
*
|
|
33
|
-
* @exports RotatingGalleryImage
|
|
34
|
-
*
|
|
33
|
+
* @exports RotatingGalleryImage Component for each rotating image, classes:
|
|
34
|
+
* `entering`, `entered`, `exiting`, `exited`.
|
|
35
35
|
*/
|
|
36
36
|
declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
37
37
|
/**
|
|
@@ -57,7 +57,7 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
|
|
|
57
57
|
/**
|
|
58
58
|
* Handler invoked when the image index changes.
|
|
59
59
|
*
|
|
60
|
-
* @param index
|
|
60
|
+
* @param index The current image index.
|
|
61
61
|
*/
|
|
62
62
|
onIndexChange?: ((index: number) => void) | undefined;
|
|
63
63
|
} & {
|
package/lib/RotatingGallery.js
CHANGED
|
@@ -77,8 +77,8 @@ var styles_1 = __importDefault(require("./utils/styles"));
|
|
|
77
77
|
/**
|
|
78
78
|
* A component displaying rotating images.
|
|
79
79
|
*
|
|
80
|
-
* @exports RotatingGalleryImage
|
|
81
|
-
*
|
|
80
|
+
* @exports RotatingGalleryImage Component for each rotating image, classes:
|
|
81
|
+
* `entering`, `entered`, `exiting`, `exited`.
|
|
82
82
|
*/
|
|
83
83
|
exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
84
84
|
var children = _a.children, _b = _a.index, externalIndex = _b === void 0 ? 0 : _b, rotationDuration = _a.rotationDuration, _c = _a.srcs, srcs = _c === void 0 ? [] : _c, _d = _a.transitionDuration, transitionDuration = _d === void 0 ? 500 : _d, onIndexChange = _a.onIndexChange, props = __rest(_a, ["children", "index", "rotationDuration", "srcs", "transitionDuration", "onIndexChange"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RotatingGallery.js","sourceRoot":"/","sources":["RotatingGallery.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,
|
|
1
|
+
{"version":3,"file":"RotatingGallery.js","sourceRoot":"/","sources":["RotatingGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport { Transition } from 'react-transition-group'\nimport Each from './Each'\nimport useInterval from './hooks/useInterval'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n /**\n * Current image index. An error is thrown if the index is invalid (must be\n * between 0 and length of `srcs` - 1, inclusive). This prop supports two-way\n * binding.\n */\n index?: number\n\n /**\n * An array of image paths.\n */\n srcs?: string[]\n\n /**\n * The duration of one rotation in milliseconds (how long one image stays\n * before transitioning to the next). Specifying `NaN` or a negative number\n * will prevent the component from automatically rotating.\n */\n rotationDuration?: number\n\n /**\n * The duration of an image transition in milliseconds.\n */\n transitionDuration?: number\n\n /**\n * Handler invoked when the image index changes.\n *\n * @param index The current image index.\n */\n onIndexChange?: (index: number) => void\n}>\n\n/**\n * A component displaying rotating images.\n *\n * @exports RotatingGalleryImage Component for each rotating image, classes:\n * `entering`, `entered`, `exiting`, `exited`.\n */\nexport default forwardRef<HTMLDivElement, RotatingGalleryProps>(({\n children,\n index: externalIndex = 0,\n rotationDuration,\n srcs = [],\n transitionDuration = 500,\n onIndexChange,\n ...props\n}, ref) => {\n const [index, setIndex] = useState(externalIndex)\n\n useInterval(() => {\n setIndex((index + 1) % srcs.length)\n }, rotationDuration, undefined, [index])\n\n useEffect(() => {\n if (externalIndex === index) return\n setIndex(externalIndex)\n }, [externalIndex])\n\n useEffect(() => {\n onIndexChange?.(index)\n }, [index])\n\n const components = asComponentDict(children, {\n image: RotatingGalleryImage,\n })\n\n const fixedStyles = asStyleDict({\n image: {\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n height: '100%',\n left: '0',\n position: 'absolute',\n top: '0',\n width: '100%',\n transitionDuration: `${transitionDuration}ms`,\n },\n })\n\n const defaultStyles = asStyleDict({\n image: {\n transitionProperty: 'opacity',\n transitionTimingFunction: 'ease-out',\n },\n })\n\n return (\n <div {...props} ref={ref}>\n <Each in={srcs}>\n {(src, idx) => (\n <Transition in={idx === index} timeout={transitionDuration}>\n {state => cloneStyledElement(components.image ?? <RotatingGalleryImage style={styles(\n defaultStyles.image,\n state === 'entering' && { opacity: '1' },\n state === 'exiting' && { opacity: '0' },\n )}/>, {\n className: classNames(state),\n style: styles(fixedStyles.image, {\n backgroundImage: `url(${src})`,\n }),\n })}\n </Transition>\n )}\n </Each>\n </div>\n )\n})\n\nexport const RotatingGalleryImage = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { HTMLAttributes, ReactNode } from 'react';
|
|
1
|
+
import React, { type HTMLAttributes, type ReactNode } from 'react';
|
|
2
2
|
export type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
|
|
3
3
|
children?: (props: Pick<SelectableButtonProps, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode;
|
|
4
4
|
isDeselectable?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableButton.js","sourceRoot":"/","sources":["SelectableButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"SelectableButton.js","sourceRoot":"/","sources":["SelectableButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmG;AAYnG,kBAAe,IAAA,kBAAU,EAA2C,UAAC,EASpE,EAAE,GAAG;;IARJ,IAAA,QAAQ,cAAA,EACR,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,kBAAsC,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EACtC,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA,EACL,KAAK,cAR2D,6FASpE,CADS;IAEF,IAAA,KAAA,OAA8B,IAAA,gBAAQ,EAAC,kBAAkB,CAAC,IAAA,EAAzD,UAAU,QAAA,EAAE,aAAa,QAAgC,CAAA;IAEhE,IAAM,eAAe,GAAG;QACtB,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,cAAc;gBAAE,OAAM;YAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;aACI;YACH,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;SACb;IACH,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,aAAa,CAAC,kBAAkB,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,cAAM,OAAA,eAAe,EAAE,EAAjB,CAAiB,EAAE,QAAQ,EAAE,UAAU,IAAI,UAAU,IAAI,CAAC,cAAc,KAEtF,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,cAAc,gBAAA,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,KAAK,OAAA,EAAE,CAAC,mCAAI,KAAK,CAChE,CACV,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { forwardRef, useEffect, useState, type HTMLAttributes, type ReactNode } from 'react'\n\nexport type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {\n children?: (props: Pick<SelectableButtonProps, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode\n isDeselectable?: boolean\n isDisabled?: boolean\n isSelected?: boolean\n label?: string\n onDeselect?: () => void\n onSelect?: () => void\n}\n\nexport default forwardRef<HTMLButtonElement, SelectableButtonProps>(({\n children,\n isDeselectable = false,\n isDisabled = false,\n isSelected: externalIsSelected = false,\n label,\n onDeselect,\n onSelect,\n ...props\n}, ref) => {\n const [isSelected, setIsSelected] = useState(externalIsSelected)\n\n const toggleSelection = () => {\n if (isDisabled) return\n\n if (isSelected) {\n if (!isDeselectable) return\n setIsSelected(false)\n onDeselect?.()\n }\n else {\n setIsSelected(true)\n onSelect?.()\n }\n }\n\n useEffect(() => {\n setIsSelected(externalIsSelected)\n }, [externalIsSelected])\n\n return (\n <button\n {...props}\n ref={ref}\n onClick={() => toggleSelection()} disabled={isDisabled || isSelected && !isDeselectable}\n >\n {children?.({ isDeselectable, isDisabled, isSelected, label }) ?? label}\n </button>\n )\n})\n"]}
|
package/lib/Slider.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { HTMLAttributes, PropsWithChildren } from 'react';
|
|
1
|
+
import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
|
|
2
2
|
type Orientation = 'horizontal' | 'vertical';
|
|
3
3
|
export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
|
|
4
4
|
/**
|
|
@@ -40,7 +40,7 @@ export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
|
|
|
40
40
|
* A function that returns the label to be displayed at a given slider
|
|
41
41
|
* position.
|
|
42
42
|
*
|
|
43
|
-
* @param position
|
|
43
|
+
* @param position The current slider position.
|
|
44
44
|
*
|
|
45
45
|
* @returns The label.
|
|
46
46
|
*/
|
|
@@ -52,8 +52,8 @@ export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
|
|
|
52
52
|
* `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
|
|
53
53
|
* still `true`.
|
|
54
54
|
*
|
|
55
|
-
* @param position
|
|
56
|
-
* @param isDragging
|
|
55
|
+
* @param position The current slider position.
|
|
56
|
+
* @param isDragging Specifies if the position change is due to dragging.
|
|
57
57
|
*/
|
|
58
58
|
onPositionChange?: (position: number, isDragging: boolean) => void;
|
|
59
59
|
/**
|
|
@@ -74,10 +74,10 @@ export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
|
|
|
74
74
|
* width and height of the knob are set via props (`knobWidth` and `knobHeight`,
|
|
75
75
|
* respectively). The size of the knob does not impact the size of the slider.
|
|
76
76
|
*
|
|
77
|
-
* @exports SliderKnob
|
|
78
|
-
* @exports SliderLabel
|
|
79
|
-
* @exports SliderTrack
|
|
80
|
-
*
|
|
77
|
+
* @exports SliderKnob The component for the knob.
|
|
78
|
+
* @exports SliderLabel The component for the label on the knob.
|
|
79
|
+
* @exports SliderTrack The component for the slide track on either side of the
|
|
80
|
+
* knob.
|
|
81
81
|
*/
|
|
82
82
|
declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
83
83
|
/**
|
|
@@ -119,7 +119,7 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
|
|
|
119
119
|
* A function that returns the label to be displayed at a given slider
|
|
120
120
|
* position.
|
|
121
121
|
*
|
|
122
|
-
* @param position
|
|
122
|
+
* @param position The current slider position.
|
|
123
123
|
*
|
|
124
124
|
* @returns The label.
|
|
125
125
|
*/
|
|
@@ -131,8 +131,8 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
|
|
|
131
131
|
* `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
|
|
132
132
|
* still `true`.
|
|
133
133
|
*
|
|
134
|
-
* @param position
|
|
135
|
-
* @param isDragging
|
|
134
|
+
* @param position The current slider position.
|
|
135
|
+
* @param isDragging Specifies if the position change is due to dragging.
|
|
136
136
|
*/
|
|
137
137
|
onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
|
|
138
138
|
/**
|
package/lib/Slider.js
CHANGED
|
@@ -83,10 +83,10 @@ var styles_1 = __importDefault(require("./utils/styles"));
|
|
|
83
83
|
* width and height of the knob are set via props (`knobWidth` and `knobHeight`,
|
|
84
84
|
* respectively). The size of the knob does not impact the size of the slider.
|
|
85
85
|
*
|
|
86
|
-
* @exports SliderKnob
|
|
87
|
-
* @exports SliderLabel
|
|
88
|
-
* @exports SliderTrack
|
|
89
|
-
*
|
|
86
|
+
* @exports SliderKnob The component for the knob.
|
|
87
|
+
* @exports SliderLabel The component for the label on the knob.
|
|
88
|
+
* @exports SliderTrack The component for the slide track on either side of the
|
|
89
|
+
* knob.
|
|
90
90
|
*/
|
|
91
91
|
exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
92
92
|
var _b, _c, _d, _e;
|