etudes 0.32.0 → 0.34.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.
Files changed (5) hide show
  1. package/lib/Slider.js +1 -1
  2. package/lib/Slider.js.map +1 -1
  3. package/lib/StepwiseSlider.js +2 -2
  4. package/lib/StepwiseSlider.js.map +1 -1
  5. package/package.json +1 -1
package/lib/Slider.js CHANGED
@@ -176,7 +176,7 @@ function Slider(_a) {
176
176
  exports.default = Slider;
177
177
  var StyledGutter = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: #fff;\n position: absolute;\n\n ", "\n\n ", "\n"], ["\n background: #fff;\n position: absolute;\n\n ", "\n\n ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n "], ["\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n "], ["\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n "]))); }, function (props) { return props.css; });
178
178
  var StyledLabel = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: #000;\n font-size: ", "px;\n pointer-events: none;\n user-select: none;\n\n ", "\n"], ["\n color: #000;\n font-size: ", "px;\n pointer-events: none;\n user-select: none;\n\n ", "\n"])), function (props) { return props.knobHeight * .5; }, function (props) { return props.css; });
179
- var StyledKnobContainer = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n z-index: 1;\n transition-duration: 100ms;\n transition-property: top;\n transition-timing-function: ease-out;\n"], ["\n position: absolute;\n z-index: 1;\n transition-duration: 100ms;\n transition-property: top;\n transition-timing-function: ease-out;\n"])));
179
+ var StyledKnobContainer = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n z-index: 1;\n"], ["\n position: absolute;\n z-index: 1;\n"])));
180
180
  var StyledKnob = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ", "\n"], ["\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ", "\n"])), function (props) { return props.css; });
181
181
  var StyledRoot = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n box-sizing: border-box;\n display: block;\n height: ", ";\n position: relative;\n width: ", ";\n"], ["\n box-sizing: border-box;\n display: block;\n height: ", ";\n position: relative;\n width: ", ";\n"])), function (props) { return props.orientation === 'vertical' ? '300px' : '4px'; }, function (props) { return props.orientation === 'vertical' ? '4px' : '300px'; });
182
182
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/lib/Slider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:slider') : () => {}\n\nexport type Props = {\n /**\n * ID attribute of the root element.\n */\n id?: string\n\n /**\n * Class attribute of the root element.\n */\n className?: string\n\n /**\n * Inline style attribute of the root element.\n */\n style?: CSSProperties\n\n /**\n * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n * being the start.\n */\n isInverted?: boolean\n\n /**\n * Indicates if position change events are dispatched only when dragging ends. When disabled,\n * aforementioned events are fired repeatedly while dragging.\n */\n onlyDispatchesOnDragEnd?: boolean\n\n /**\n * A function that returns the label to be displayed at a given slider position.\n *\n * @param position - The current slider position.\n *\n * @returns The label.\n */\n labelProvider?: (position: number) => string\n\n /**\n * Padding between the gutter and the knob in pixels.\n */\n gutterPadding?: number\n\n /**\n * Height of the knob in pixels.\n */\n knobHeight?: number\n\n /**\n * Width of the knob in pixels.\n */\n knobWidth?: number\n\n /**\n * Orientation of the slider.\n */\n orientation?: Orientation\n\n /**\n * The current position.\n */\n position?: number\n\n /**\n * Handler invoked when position changes.\n *\n * @param position - The current slider position.\n * @param isDragging - Indicates if the position change is triggered by dragging the slider.\n */\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when dragging ends.\n */\n onDragEnd?: () => void\n\n /**\n * Handler invoked when dragging begins.\n */\n onDragStart?: () => void\n\n /**\n * Custom CSS provided to the gutter before the knob.\n */\n startingGutterCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the gutter after the knob.\n */\n endingGutterCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the knob.\n */\n knobCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the label inside the knob.\n */\n labelCSS?: CSSProp<any>\n}\n\n/**\n * A slider component that divides the scroll gutter into two different elements—one that is before\n * the knob and one that is after the knob. This allows for individual styling customizations. The\n * width and height of the root element of this component is inferred from CSS. The dimension of the\n * knob itself does not impact that of the root element. This component supports both horizontal and\n * vertical orientations.\n */\nexport default function Slider({\n id,\n className,\n style,\n isInverted = false,\n onlyDispatchesOnDragEnd = false,\n gutterPadding = 0,\n knobHeight = 30,\n knobWidth = 30,\n orientation = 'vertical',\n position = 0,\n labelProvider,\n onDragEnd,\n onDragStart,\n onPositionChange,\n startingGutterCSS,\n endingGutterCSS,\n knobCSS,\n labelCSS,\n}: Props) {\n /**\n * Initializes input interactivity of the knob.\n */\n function initInteractivity() {\n const knob = knobRef.current\n if (!knob || interact.isSet(knob)) return\n\n debug('Initializing interactivity...', 'OK')\n\n interact(knob).draggable({\n inertia: true,\n onstart: () => onKnobDragStart(),\n onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n onend: () => onKnobDragStop(),\n })\n }\n\n /**\n * Deinitializes input interactivity of the knob.\n */\n function deinitInteractivity() {\n const knob = knobRef.current\n if (!knob || !interact.isSet(knob)) return\n\n debug('Deinitializing interactivity...', 'OK')\n\n interact(knob).unset()\n }\n\n /**\n * Handler invoked when the knob starts dragging. Note that this is an event listener and does not\n * have read access to component states.\n */\n function onKnobDragStart() {\n debug('Handling drag start...', 'OK')\n setIsDragging(true)\n onDragStart?.()\n }\n\n /**\n * Handler invoked when the knob moves. Note that this is an event listener and does not have read\n * access to component states.\n *\n * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n */\n function onKnobDragMove(delta: number) {\n const rect = Rect.from(rootRef.current) ?? new Rect()\n const naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current\n const naturalNewPositionX = naturalPosition * rect.width + delta\n const naturalNewPositionY = naturalPosition * rect.height + delta\n const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n\n setIsDragging(true)\n setLivePosition(newPosition)\n }\n\n /**\n * Handler invoked when the knob stops dragging. Note that this is an event listener and does not\n * have read access to component states.\n */\n function onKnobDragStop() {\n debug('Handling drag stop...', 'OK')\n setIsDragging(false)\n onDragEnd?.()\n }\n\n /**\n * Sets the current live position. The live position is different from the position state value.\n * Because states are asynchronous by nature, this live position value is used to record position\n * changes when drag event happens. This position should be normalized. That is, inversion should\n * be taken care of prior to passing the new value to this method if `isInverted` is `true`.\n *\n * @param position - The value to set the live position to.\n */\n function setLivePosition(position: number) {\n if (livePosition.current === position) return\n livePosition.current = position\n // debug('Updating live position...', 'OK', position)\n _setPosition(position)\n }\n\n const rootRef = useRef<HTMLDivElement>(null)\n const knobRef = useRef<HTMLButtonElement>(null)\n\n const livePosition = useRef(position)\n\n const [_position, _setPosition] = useState(livePosition.current)\n const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n const naturalPosition = isInverted ? 1 - _position : _position\n\n useEffect(() => {\n initInteractivity()\n\n return () => {\n deinitInteractivity()\n }\n }, [])\n\n useEffect(() => {\n if (isDragging === true) return\n if (position === _position) return\n setIsDragging(undefined)\n setLivePosition(position)\n }, [position])\n\n useEffect(() => {\n if (isDragging === true && onlyDispatchesOnDragEnd) return\n onPositionChange?.(_position, isDragging === true)\n }, [_position])\n\n useEffect(() => {\n if (isDragging === false && onlyDispatchesOnDragEnd) {\n onPositionChange?.(_position, false)\n }\n }, [isDragging])\n\n return (\n <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n <StyledGutter orientation={orientation} css={startingGutterCSS}\n style={orientation === 'vertical' ? {\n top: 0,\n height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n } : {\n left: 0,\n width: `calc(${naturalPosition*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n }}\n />\n <StyledKnobContainer ref={knobRef} style={{\n transform: 'translate3d(-50%, -50%, 0)',\n ...(orientation === 'vertical' ? {\n left: '50%',\n top: `${naturalPosition*100}%`,\n transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n } : {\n left: `${naturalPosition*100}%`,\n top: '50%',\n transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n }),\n }}>\n <StyledKnob\n className={classNames({\n 'at-end': isInverted ? (_position === 0) : (_position === 1),\n 'at-start': isInverted ? (_position === 1) : (_position === 0),\n 'dragging': isDragging === true,\n })}\n css={knobCSS}\n style={{\n height: `${knobHeight}px`,\n width: `${knobWidth}px`,\n }}\n >\n {labelProvider && (\n <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(_position)}</StyledLabel>\n )}\n </StyledKnob>\n </StyledKnobContainer>\n <StyledGutter orientation={orientation} css={endingGutterCSS}\n style={orientation === 'vertical' ? {\n bottom: 0,\n height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n } : {\n right: 0,\n width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n }}\n />\n </StyledRoot>\n )\n}\n\nconst StyledGutter = styled.div<{ orientation: NonNullable<Props['orientation']> }>`\n background: #fff;\n position: absolute;\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\n\n ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n position: absolute;\n z-index: 1;\n transition-duration: 100ms;\n transition-property: top;\n transition-timing-function: ease-out;\n`\n\nconst StyledKnob = styled.div`\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n orientation: Orientation\n}>`\n box-sizing: border-box;\n display: block;\n height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n position: relative;\n width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}
1
+ {"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:slider') : () => {}\n\nexport type Props = {\n /**\n * ID attribute of the root element.\n */\n id?: string\n\n /**\n * Class attribute of the root element.\n */\n className?: string\n\n /**\n * Inline style attribute of the root element.\n */\n style?: CSSProperties\n\n /**\n * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n * being the start.\n */\n isInverted?: boolean\n\n /**\n * Indicates if position change events are dispatched only when dragging ends. When disabled,\n * aforementioned events are fired repeatedly while dragging.\n */\n onlyDispatchesOnDragEnd?: boolean\n\n /**\n * A function that returns the label to be displayed at a given slider position.\n *\n * @param position - The current slider position.\n *\n * @returns The label.\n */\n labelProvider?: (position: number) => string\n\n /**\n * Padding between the gutter and the knob in pixels.\n */\n gutterPadding?: number\n\n /**\n * Height of the knob in pixels.\n */\n knobHeight?: number\n\n /**\n * Width of the knob in pixels.\n */\n knobWidth?: number\n\n /**\n * Orientation of the slider.\n */\n orientation?: Orientation\n\n /**\n * The current position.\n */\n position?: number\n\n /**\n * Handler invoked when position changes.\n *\n * @param position - The current slider position.\n * @param isDragging - Indicates if the position change is triggered by dragging the slider.\n */\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when dragging ends.\n */\n onDragEnd?: () => void\n\n /**\n * Handler invoked when dragging begins.\n */\n onDragStart?: () => void\n\n /**\n * Custom CSS provided to the gutter before the knob.\n */\n startingGutterCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the gutter after the knob.\n */\n endingGutterCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the knob.\n */\n knobCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the label inside the knob.\n */\n labelCSS?: CSSProp<any>\n}\n\n/**\n * A slider component that divides the scroll gutter into two different elements—one that is before\n * the knob and one that is after the knob. This allows for individual styling customizations. The\n * width and height of the root element of this component is inferred from CSS. The dimension of the\n * knob itself does not impact that of the root element. This component supports both horizontal and\n * vertical orientations.\n */\nexport default function Slider({\n id,\n className,\n style,\n isInverted = false,\n onlyDispatchesOnDragEnd = false,\n gutterPadding = 0,\n knobHeight = 30,\n knobWidth = 30,\n orientation = 'vertical',\n position = 0,\n labelProvider,\n onDragEnd,\n onDragStart,\n onPositionChange,\n startingGutterCSS,\n endingGutterCSS,\n knobCSS,\n labelCSS,\n}: Props) {\n /**\n * Initializes input interactivity of the knob.\n */\n function initInteractivity() {\n const knob = knobRef.current\n if (!knob || interact.isSet(knob)) return\n\n debug('Initializing interactivity...', 'OK')\n\n interact(knob).draggable({\n inertia: true,\n onstart: () => onKnobDragStart(),\n onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n onend: () => onKnobDragStop(),\n })\n }\n\n /**\n * Deinitializes input interactivity of the knob.\n */\n function deinitInteractivity() {\n const knob = knobRef.current\n if (!knob || !interact.isSet(knob)) return\n\n debug('Deinitializing interactivity...', 'OK')\n\n interact(knob).unset()\n }\n\n /**\n * Handler invoked when the knob starts dragging. Note that this is an event listener and does not\n * have read access to component states.\n */\n function onKnobDragStart() {\n debug('Handling drag start...', 'OK')\n setIsDragging(true)\n onDragStart?.()\n }\n\n /**\n * Handler invoked when the knob moves. Note that this is an event listener and does not have read\n * access to component states.\n *\n * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n */\n function onKnobDragMove(delta: number) {\n const rect = Rect.from(rootRef.current) ?? new Rect()\n const naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current\n const naturalNewPositionX = naturalPosition * rect.width + delta\n const naturalNewPositionY = naturalPosition * rect.height + delta\n const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n\n setIsDragging(true)\n setLivePosition(newPosition)\n }\n\n /**\n * Handler invoked when the knob stops dragging. Note that this is an event listener and does not\n * have read access to component states.\n */\n function onKnobDragStop() {\n debug('Handling drag stop...', 'OK')\n setIsDragging(false)\n onDragEnd?.()\n }\n\n /**\n * Sets the current live position. The live position is different from the position state value.\n * Because states are asynchronous by nature, this live position value is used to record position\n * changes when drag event happens. This position should be normalized. That is, inversion should\n * be taken care of prior to passing the new value to this method if `isInverted` is `true`.\n *\n * @param position - The value to set the live position to.\n */\n function setLivePosition(position: number) {\n if (livePosition.current === position) return\n livePosition.current = position\n // debug('Updating live position...', 'OK', position)\n _setPosition(position)\n }\n\n const rootRef = useRef<HTMLDivElement>(null)\n const knobRef = useRef<HTMLButtonElement>(null)\n\n const livePosition = useRef(position)\n\n const [_position, _setPosition] = useState(livePosition.current)\n const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n const naturalPosition = isInverted ? 1 - _position : _position\n\n useEffect(() => {\n initInteractivity()\n\n return () => {\n deinitInteractivity()\n }\n }, [])\n\n useEffect(() => {\n if (isDragging === true) return\n if (position === _position) return\n setIsDragging(undefined)\n setLivePosition(position)\n }, [position])\n\n useEffect(() => {\n if (isDragging === true && onlyDispatchesOnDragEnd) return\n onPositionChange?.(_position, isDragging === true)\n }, [_position])\n\n useEffect(() => {\n if (isDragging === false && onlyDispatchesOnDragEnd) {\n onPositionChange?.(_position, false)\n }\n }, [isDragging])\n\n return (\n <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n <StyledGutter orientation={orientation} css={startingGutterCSS}\n style={orientation === 'vertical' ? {\n top: 0,\n height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n } : {\n left: 0,\n width: `calc(${naturalPosition*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n }}\n />\n <StyledKnobContainer ref={knobRef} style={{\n transform: 'translate3d(-50%, -50%, 0)',\n ...(orientation === 'vertical' ? {\n left: '50%',\n top: `${naturalPosition*100}%`,\n transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n } : {\n left: `${naturalPosition*100}%`,\n top: '50%',\n transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n }),\n }}>\n <StyledKnob\n className={classNames({\n 'at-end': isInverted ? (_position === 0) : (_position === 1),\n 'at-start': isInverted ? (_position === 1) : (_position === 0),\n 'dragging': isDragging === true,\n })}\n css={knobCSS}\n style={{\n height: `${knobHeight}px`,\n width: `${knobWidth}px`,\n }}\n >\n {labelProvider && (\n <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(_position)}</StyledLabel>\n )}\n </StyledKnob>\n </StyledKnobContainer>\n <StyledGutter orientation={orientation} css={endingGutterCSS}\n style={orientation === 'vertical' ? {\n bottom: 0,\n height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n } : {\n right: 0,\n width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n }}\n />\n </StyledRoot>\n )\n}\n\nconst StyledGutter = styled.div<{ orientation: NonNullable<Props['orientation']> }>`\n background: #fff;\n position: absolute;\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\n\n ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n position: absolute;\n z-index: 1;\n`\n\nconst StyledKnob = styled.div`\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n orientation: Orientation\n}>`\n box-sizing: border-box;\n display: block;\n height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n position: relative;\n width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}
package/lib/StepwiseSlider.js CHANGED
@@ -232,8 +232,8 @@ function StepwiseSlider(_a) {
232
232
  exports.default = StepwiseSlider;
233
233
  var StyledGutter = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: #fff;\n position: absolute;\n\n ", "\n\n ", "\n"], ["\n background: #fff;\n position: absolute;\n\n ", "\n\n ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n "], ["\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n "], ["\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n "]))); }, function (props) { return props.css; });
234
234
  var StyledLabel = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: #000;\n font-size: ", "px;\n pointer-events: none;\n user-select: none;\n\n ", "\n"], ["\n color: #000;\n font-size: ", "px;\n pointer-events: none;\n user-select: none;\n\n ", "\n"])), function (props) { return props.knobHeight * .5; }, function (props) { return props.css; });
235
- var StyledKnobContainer = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n z-index: 1;\n transition-duration: 100ms;\n transition-property: top;\n transition-timing-function: ease-out;\n"], ["\n position: absolute;\n z-index: 1;\n transition-duration: 100ms;\n transition-property: top;\n transition-timing-function: ease-out;\n"])));
236
- var StyledKnob = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 1;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ", "\n"], ["\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 1;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ", "\n"])), function (props) { return props.css; });
235
+ var StyledKnobContainer = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n z-index: 1;\n"], ["\n position: absolute;\n z-index: 1;\n"])));
236
+ var StyledKnob = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 1;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ", "\n"], ["\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 1;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ", "\n"])), function (props) { return props.css; });
237
237
  var StyledRoot = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n box-sizing: border-box;\n display: block;\n height: ", ";\n position: relative;\n width: ", ";\n"], ["\n box-sizing: border-box;\n display: block;\n height: ", ";\n position: relative;\n width: ", ";\n"])), function (props) { return props.orientation === 'vertical' ? '300px' : '4px'; }, function (props) { return props.orientation === 'vertical' ? '4px' : '300px'; });
238
238
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
239
239
  //# sourceMappingURL=StepwiseSlider.js.map
package/lib/StepwiseSlider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:stepwise-slider') : () => {}\n\nexport type Props = {\n /**\n * ID attribute of the root element.\n */\n id?: string\n\n /**\n * Class attribute of the root element.\n */\n className?: string\n\n /**\n * Inline style attribute of the root element.\n */\n style?: CSSProperties\n\n /**\n * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n * being the start.\n */\n isInverted?: boolean\n\n /**\n * Indicates if position/index change events are dispatched only when dragging ends. When\n * disabled, aforementioned events are fired repeatedly while dragging.\n */\n onlyDispatchesOnDragEnd?: boolean\n\n /**\n * A function that returns the label to be displayed at a given slider position and closest step\n * index (if steps are provided).\n *\n * @param position - The current slider position.\n * @param index - The nearest step index (if steps are provided), or -1 if no steps are provided.\n *\n * @returns The label.\n */\n labelProvider?: (position: number, index: number) => string\n\n /**\n * Padding between the gutter and the knob in pixels.\n */\n gutterPadding?: number\n\n /**\n * Height of the knob in pixels.\n */\n knobHeight?: number\n\n /**\n * Width of the knob in pixels.\n */\n knobWidth?: number\n\n /**\n * Orientation of the slider.\n */\n orientation?: Orientation\n\n /**\n * An array of step descriptors. A step is a position (0 - 1 inclusive) on the gutter where the\n * knob should snap to if dragging stops near it. Ensure that there are at least two steps: one\n * for the start of the gutter and one for the end.\n */\n steps?: readonly number[]\n\n /**\n * The current index.\n */\n index?: number\n\n /**\n * Handler invoked when index changes. This happens simultaneously with `onPositionChange`.\n *\n * @param index - The current step index.\n * @param isDragging - Indicates if the index change is triggered by dragging the slider..\n */\n onIndexChange?: (index: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when position changes.\n *\n * @param position - The current slider position.\n * @param isDragging - Indicates if the position change is triggered by dragging the slider.\n */\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when dragging ends.\n */\n onDragEnd?: () => void\n\n /**\n * Handler invoked when dragging begins.\n */\n onDragStart?: () => void\n\n /**\n * Custom CSS provided to the gutter before the knob.\n */\n startingGutterCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the gutter after the knob.\n */\n endingGutterCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the knob.\n */\n knobCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the label inside the knob.\n */\n labelCSS?: CSSProp<any>\n}\n\n/**\n * Generates a set of steps compatible with this component.\n *\n * @param length - The number of steps. This must be at least 2 because you must include the\n * starting and ending points.\n *\n * @returns An array of steps.\n */\nexport function generateSteps(length: number): readonly number[] {\n if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n const interval = 1 / (length - 1)\n\n return Array(length).fill(null).map((v, i) => {\n const position = interval * i\n return position\n })\n}\n\n/**\n * Gets the index of the step of which the specified position is closest to. If for whatever\n * reason the index cannot be computed, -1 is returned.\n *\n * @param position - The position (0 - 1, inclusive).\n * @param steps - The steps.\n *\n * @returns The nearest index.\n */\nexport function getNearestIndexByPosition(position: number, steps: readonly number[]): number {\n let index = -1\n let minDelta = NaN\n\n for (let i = 0, n = steps.length; i < n; i++) {\n const step = getPositionAt(i, steps)\n\n if (isNaN(step)) continue\n\n const delta = Math.abs(position - step)\n\n if (isNaN(minDelta) || (delta < minDelta)) {\n minDelta = delta\n index = i\n }\n }\n\n return index\n}\n\n/**\n * Gets the position by step index. This value ranges between 0 - 1, inclusive.\n *\n * @param index - The step index.\n * @param steps - The steps.\n *\n * @returns The position. If for whatever reason the position cannot be determined, `NaN` is\n * returned.\n */\nexport function getPositionAt(index: number, steps: readonly number[]): number {\n if (index >= steps.length) return NaN\n return steps[index]\n}\n\n/**\n * A \"stepwise\" slider component that automatically snaps to certain points on the slider. The\n * component divides the scroll gutter into two different elements—one that is before the knob and\n * one that is after the knob. This allows for individual styling customizations. The width and\n * height of the root element of this component is inferred from its CSS rules. The dimension of the\n * knob itself does not impact that of the root element. This component supports both horizontal and\n * vertical orientations.\n */\nexport default function StepwiseSlider({\n id,\n className,\n style,\n isInverted = false,\n onlyDispatchesOnDragEnd = false,\n gutterPadding = 0,\n knobHeight = 30,\n knobWidth = 30,\n orientation = 'vertical',\n labelProvider,\n onDragEnd,\n onDragStart,\n onPositionChange,\n startingGutterCSS,\n endingGutterCSS,\n knobCSS,\n labelCSS,\n steps = generateSteps(10),\n index = 0,\n onIndexChange,\n}: Props) {\n /**\n * Initializes input interactivity of the knob.\n */\n function initInteractivity() {\n const knob = knobRef.current\n if (!knob || interact.isSet(knob)) return\n\n debug('Initializing interactivity...', 'OK')\n\n interact(knob).draggable({\n inertia: true,\n onstart: () => onKnobDragStart(),\n onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n onend: () => onKnobDragStop(),\n })\n }\n\n /**\n * Deinitializes input interactivity of the knob.\n */\n function deinitInteractivity() {\n const knob = knobRef.current\n if (!knob || !interact.isSet(knob)) return\n\n debug('Deinitializing interactivity...', 'OK')\n\n interact(knob).unset()\n }\n\n /**\n * Handler invoked when the knob starts dragging. Note that this is an event listener and does not\n * have read access to component states.\n */\n function onKnobDragStart() {\n debug('Handling drag start...', 'OK')\n setIsDragging(true)\n onDragStart?.()\n }\n\n /**\n * Handler invoked when the knob moves. Note that this is an event listener and does not have read\n * access to component states.\n *\n * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n */\n function onKnobDragMove(delta: number) {\n const rect = Rect.from(rootRef.current) ?? new Rect()\n const naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current\n const naturalNewPositionX = naturalPosition * rect.width + delta\n const naturalNewPositionY = naturalPosition * rect.height + delta\n const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n const newIndex = getNearestIndexByPosition(newPosition, steps)\n\n setIsDragging(true)\n setLivePosition(newPosition)\n setLiveIndex(newIndex)\n }\n\n /**\n * Handler invoked when the knob stops dragging. Note that this is an event listener and does not\n * have read access to component states.\n */\n function onKnobDragStop() {\n debug('Handling drag stop...', 'OK')\n setIsDragging(false)\n onDragEnd?.()\n }\n\n /**\n * Sets the current live position. The live position is different from the position state value.\n * Because states are asynchronous by nature, this live position value is used to record position\n * changes when drag event happens. This position should be normalized. That is, inversion should\n * be taken care of prior to passing the new value to this method if `isInverted` is `true`.\n *\n * @param position - The value to set the live position to.\n */\n function setLivePosition(position: number) {\n if (livePosition.current === position) return\n livePosition.current = position\n // debug('Updating live position...', 'OK', position)\n _setPosition(position)\n }\n\n /**\n * Sets the current live index. The live index is different from the index state value. Because\n * states are asynchronous by nature, this live index value is used to record index changes when\n * drag event happens.\n *\n * @param index - The value to set the live index to.\n */\n function setLiveIndex(index: number) {\n if (liveIndex.current === index) return\n liveIndex.current = index\n // debug('Updating live index...', 'OK', index)\n _setIndex(index)\n }\n\n const rootRef = useRef<HTMLDivElement>(null)\n const knobRef = useRef<HTMLButtonElement>(null)\n\n const livePosition = useRef(getPositionAt(index, steps))\n const liveIndex = useRef(index)\n\n const [_position, _setPosition] = useState(livePosition.current)\n const [_index, _setIndex] = useState(liveIndex.current)\n const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n const naturalPosition = isInverted ? 1 - _position : _position\n\n useEffect(() => {\n initInteractivity()\n\n return () => {\n deinitInteractivity()\n }\n }, [])\n\n useEffect(() => {\n if (isDragging === true) return\n if (index === _index) return\n setIsDragging(undefined)\n setLivePosition(getPositionAt(index, steps))\n setLiveIndex(index)\n }, [index])\n\n useEffect(() => {\n if (isDragging === true && onlyDispatchesOnDragEnd) return\n onPositionChange?.(_position, isDragging !== undefined)\n }, [_position])\n\n useEffect(() => {\n if (isDragging === true && onlyDispatchesOnDragEnd) return\n onIndexChange?.(_index, isDragging !== undefined)\n }, [_index])\n\n useEffect(() => {\n if (isDragging !== false) return\n\n const nearestIndex = getNearestIndexByPosition(_position, steps)\n const nearestPosition = getPositionAt(nearestIndex, steps)\n setLivePosition(nearestPosition)\n\n if (onlyDispatchesOnDragEnd) {\n onIndexChange?.(_index, true)\n }\n }, [isDragging])\n\n return (\n <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n <StyledGutter orientation={orientation} css={startingGutterCSS}\n style={orientation === 'vertical' ? {\n top: 0,\n height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n } : {\n left: 0,\n width: `calc(${naturalPosition*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n }}\n />\n <StyledKnobContainer ref={knobRef} style={{\n transform: 'translate3d(-50%, -50%, 0)',\n ...(orientation === 'vertical' ? {\n left: '50%',\n top: `${naturalPosition*100}%`,\n transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n } : {\n left: `${naturalPosition*100}%`,\n top: '50%',\n transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n }),\n }}>\n <StyledKnob\n className={classNames({\n 'at-end': isInverted ? (_position === 0) : (_position === 1),\n 'at-start': isInverted ? (_position === 1) : (_position === 0),\n 'dragging': isDragging === true,\n })}\n css={knobCSS}\n style={{\n height: `${knobHeight}px`,\n width: `${knobWidth}px`,\n }}\n >\n {steps && labelProvider && (\n <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(_position, getNearestIndexByPosition(_position, steps))}</StyledLabel>\n )}\n </StyledKnob>\n </StyledKnobContainer>\n <StyledGutter orientation={orientation} css={endingGutterCSS}\n style={orientation === 'vertical' ? {\n bottom: 0,\n height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n } : {\n right: 0,\n width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n }}\n />\n </StyledRoot>\n )\n}\n\nconst StyledGutter = styled.div<{ orientation: NonNullable<Props['orientation']> }>`\n background: #fff;\n position: absolute;\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\n\n ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n position: absolute;\n z-index: 1;\n transition-duration: 100ms;\n transition-property: top;\n transition-timing-function: ease-out;\n`\n\nconst StyledKnob = styled.div`\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 1;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n orientation: Orientation\n}>`\n box-sizing: border-box;\n display: block;\n height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n position: relative;\n width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}
1
+ {"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:stepwise-slider') : () => {}\n\nexport type Props = {\n /**\n * ID attribute of the root element.\n */\n id?: string\n\n /**\n * Class attribute of the root element.\n */\n className?: string\n\n /**\n * Inline style attribute of the root element.\n */\n style?: CSSProperties\n\n /**\n * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n * being the start.\n */\n isInverted?: boolean\n\n /**\n * Indicates if position/index change events are dispatched only when dragging ends. When\n * disabled, aforementioned events are fired repeatedly while dragging.\n */\n onlyDispatchesOnDragEnd?: boolean\n\n /**\n * A function that returns the label to be displayed at a given slider position and closest step\n * index (if steps are provided).\n *\n * @param position - The current slider position.\n * @param index - The nearest step index (if steps are provided), or -1 if no steps are provided.\n *\n * @returns The label.\n */\n labelProvider?: (position: number, index: number) => string\n\n /**\n * Padding between the gutter and the knob in pixels.\n */\n gutterPadding?: number\n\n /**\n * Height of the knob in pixels.\n */\n knobHeight?: number\n\n /**\n * Width of the knob in pixels.\n */\n knobWidth?: number\n\n /**\n * Orientation of the slider.\n */\n orientation?: Orientation\n\n /**\n * An array of step descriptors. A step is a position (0 - 1 inclusive) on the gutter where the\n * knob should snap to if dragging stops near it. Ensure that there are at least two steps: one\n * for the start of the gutter and one for the end.\n */\n steps?: readonly number[]\n\n /**\n * The current index.\n */\n index?: number\n\n /**\n * Handler invoked when index changes. This happens simultaneously with `onPositionChange`.\n *\n * @param index - The current step index.\n * @param isDragging - Indicates if the index change is triggered by dragging the slider..\n */\n onIndexChange?: (index: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when position changes.\n *\n * @param position - The current slider position.\n * @param isDragging - Indicates if the position change is triggered by dragging the slider.\n */\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when dragging ends.\n */\n onDragEnd?: () => void\n\n /**\n * Handler invoked when dragging begins.\n */\n onDragStart?: () => void\n\n /**\n * Custom CSS provided to the gutter before the knob.\n */\n startingGutterCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the gutter after the knob.\n */\n endingGutterCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the knob.\n */\n knobCSS?: CSSProp<any>\n\n /**\n * Custom CSS provided to the label inside the knob.\n */\n labelCSS?: CSSProp<any>\n}\n\n/**\n * Generates a set of steps compatible with this component.\n *\n * @param length - The number of steps. This must be at least 2 because you must include the\n * starting and ending points.\n *\n * @returns An array of steps.\n */\nexport function generateSteps(length: number): readonly number[] {\n if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n const interval = 1 / (length - 1)\n\n return Array(length).fill(null).map((v, i) => {\n const position = interval * i\n return position\n })\n}\n\n/**\n * Gets the index of the step of which the specified position is closest to. If for whatever\n * reason the index cannot be computed, -1 is returned.\n *\n * @param position - The position (0 - 1, inclusive).\n * @param steps - The steps.\n *\n * @returns The nearest index.\n */\nexport function getNearestIndexByPosition(position: number, steps: readonly number[]): number {\n let index = -1\n let minDelta = NaN\n\n for (let i = 0, n = steps.length; i < n; i++) {\n const step = getPositionAt(i, steps)\n\n if (isNaN(step)) continue\n\n const delta = Math.abs(position - step)\n\n if (isNaN(minDelta) || (delta < minDelta)) {\n minDelta = delta\n index = i\n }\n }\n\n return index\n}\n\n/**\n * Gets the position by step index. This value ranges between 0 - 1, inclusive.\n *\n * @param index - The step index.\n * @param steps - The steps.\n *\n * @returns The position. If for whatever reason the position cannot be determined, `NaN` is\n * returned.\n */\nexport function getPositionAt(index: number, steps: readonly number[]): number {\n if (index >= steps.length) return NaN\n return steps[index]\n}\n\n/**\n * A \"stepwise\" slider component that automatically snaps to certain points on the slider. The\n * component divides the scroll gutter into two different elements—one that is before the knob and\n * one that is after the knob. This allows for individual styling customizations. The width and\n * height of the root element of this component is inferred from its CSS rules. The dimension of the\n * knob itself does not impact that of the root element. This component supports both horizontal and\n * vertical orientations.\n */\nexport default function StepwiseSlider({\n id,\n className,\n style,\n isInverted = false,\n onlyDispatchesOnDragEnd = false,\n gutterPadding = 0,\n knobHeight = 30,\n knobWidth = 30,\n orientation = 'vertical',\n labelProvider,\n onDragEnd,\n onDragStart,\n onPositionChange,\n startingGutterCSS,\n endingGutterCSS,\n knobCSS,\n labelCSS,\n steps = generateSteps(10),\n index = 0,\n onIndexChange,\n}: Props) {\n /**\n * Initializes input interactivity of the knob.\n */\n function initInteractivity() {\n const knob = knobRef.current\n if (!knob || interact.isSet(knob)) return\n\n debug('Initializing interactivity...', 'OK')\n\n interact(knob).draggable({\n inertia: true,\n onstart: () => onKnobDragStart(),\n onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n onend: () => onKnobDragStop(),\n })\n }\n\n /**\n * Deinitializes input interactivity of the knob.\n */\n function deinitInteractivity() {\n const knob = knobRef.current\n if (!knob || !interact.isSet(knob)) return\n\n debug('Deinitializing interactivity...', 'OK')\n\n interact(knob).unset()\n }\n\n /**\n * Handler invoked when the knob starts dragging. Note that this is an event listener and does not\n * have read access to component states.\n */\n function onKnobDragStart() {\n debug('Handling drag start...', 'OK')\n setIsDragging(true)\n onDragStart?.()\n }\n\n /**\n * Handler invoked when the knob moves. Note that this is an event listener and does not have read\n * access to component states.\n *\n * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n */\n function onKnobDragMove(delta: number) {\n const rect = Rect.from(rootRef.current) ?? new Rect()\n const naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current\n const naturalNewPositionX = naturalPosition * rect.width + delta\n const naturalNewPositionY = naturalPosition * rect.height + delta\n const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n const newIndex = getNearestIndexByPosition(newPosition, steps)\n\n setIsDragging(true)\n setLivePosition(newPosition)\n setLiveIndex(newIndex)\n }\n\n /**\n * Handler invoked when the knob stops dragging. Note that this is an event listener and does not\n * have read access to component states.\n */\n function onKnobDragStop() {\n debug('Handling drag stop...', 'OK')\n setIsDragging(false)\n onDragEnd?.()\n }\n\n /**\n * Sets the current live position. The live position is different from the position state value.\n * Because states are asynchronous by nature, this live position value is used to record position\n * changes when drag event happens. This position should be normalized. That is, inversion should\n * be taken care of prior to passing the new value to this method if `isInverted` is `true`.\n *\n * @param position - The value to set the live position to.\n */\n function setLivePosition(position: number) {\n if (livePosition.current === position) return\n livePosition.current = position\n // debug('Updating live position...', 'OK', position)\n _setPosition(position)\n }\n\n /**\n * Sets the current live index. The live index is different from the index state value. Because\n * states are asynchronous by nature, this live index value is used to record index changes when\n * drag event happens.\n *\n * @param index - The value to set the live index to.\n */\n function setLiveIndex(index: number) {\n if (liveIndex.current === index) return\n liveIndex.current = index\n // debug('Updating live index...', 'OK', index)\n _setIndex(index)\n }\n\n const rootRef = useRef<HTMLDivElement>(null)\n const knobRef = useRef<HTMLButtonElement>(null)\n\n const livePosition = useRef(getPositionAt(index, steps))\n const liveIndex = useRef(index)\n\n const [_position, _setPosition] = useState(livePosition.current)\n const [_index, _setIndex] = useState(liveIndex.current)\n const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n const naturalPosition = isInverted ? 1 - _position : _position\n\n useEffect(() => {\n initInteractivity()\n\n return () => {\n deinitInteractivity()\n }\n }, [])\n\n useEffect(() => {\n if (isDragging === true) return\n if (index === _index) return\n setIsDragging(undefined)\n setLivePosition(getPositionAt(index, steps))\n setLiveIndex(index)\n }, [index])\n\n useEffect(() => {\n if (isDragging === true && onlyDispatchesOnDragEnd) return\n onPositionChange?.(_position, isDragging !== undefined)\n }, [_position])\n\n useEffect(() => {\n if (isDragging === true && onlyDispatchesOnDragEnd) return\n onIndexChange?.(_index, isDragging !== undefined)\n }, [_index])\n\n useEffect(() => {\n if (isDragging !== false) return\n\n const nearestIndex = getNearestIndexByPosition(_position, steps)\n const nearestPosition = getPositionAt(nearestIndex, steps)\n setLivePosition(nearestPosition)\n\n if (onlyDispatchesOnDragEnd) {\n onIndexChange?.(_index, true)\n }\n }, [isDragging])\n\n return (\n <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n <StyledGutter orientation={orientation} css={startingGutterCSS}\n style={orientation === 'vertical' ? {\n top: 0,\n height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n } : {\n left: 0,\n width: `calc(${naturalPosition*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n }}\n />\n <StyledKnobContainer ref={knobRef} style={{\n transform: 'translate3d(-50%, -50%, 0)',\n ...(orientation === 'vertical' ? {\n left: '50%',\n top: `${naturalPosition*100}%`,\n transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n } : {\n left: `${naturalPosition*100}%`,\n top: '50%',\n transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n }),\n }}>\n <StyledKnob\n className={classNames({\n 'at-end': isInverted ? (_position === 0) : (_position === 1),\n 'at-start': isInverted ? (_position === 1) : (_position === 0),\n 'dragging': isDragging === true,\n })}\n css={knobCSS}\n style={{\n height: `${knobHeight}px`,\n width: `${knobWidth}px`,\n }}\n >\n {steps && labelProvider && (\n <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(_position, getNearestIndexByPosition(_position, steps))}</StyledLabel>\n )}\n </StyledKnob>\n </StyledKnobContainer>\n <StyledGutter orientation={orientation} css={endingGutterCSS}\n style={orientation === 'vertical' ? {\n bottom: 0,\n height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n } : {\n right: 0,\n width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n }}\n />\n </StyledRoot>\n )\n}\n\nconst StyledGutter = styled.div<{ orientation: NonNullable<Props['orientation']> }>`\n background: #fff;\n position: absolute;\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\n\n ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n position: absolute;\n z-index: 1;\n`\n\nconst StyledKnob = styled.div`\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 1;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n orientation: Orientation\n}>`\n box-sizing: border-box;\n display: block;\n height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n position: relative;\n width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "etudes",
3
- "version": "0.32.0",
3
+ "version": "0.34.0",
4
4
  "description": "A study of styled React components",
5
5
  "main": "lib",
6
6
  "scripts": {