etudes 0.28.0 → 0.29.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 (3) hide show
  1. package/lib/Slider.js +30 -29
  2. package/lib/Slider.js.map +1 -1
  3. package/package.json +4 -2
package/lib/Slider.js CHANGED
@@ -72,20 +72,10 @@ function generateBreakpoints(length) {
72
72
  }
73
73
  exports.generateBreakpoints = generateBreakpoints;
74
74
  function Slider(_a) {
75
- var id = _a.id, className = _a.className, style = _a.style, _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _c === void 0 ? false : _c, _d = _a.gutterPadding, gutterPadding = _d === void 0 ? 0 : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 30 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 30 : _f, _g = _a.orientation, orientation = _g === void 0 ? 'vertical' : _g, _h = _a.defaultPosition, defaultPosition = _h === void 0 ? 0 : _h, _j = _a.isLabelVisible, isLabelVisible = _j === void 0 ? true : _j, labelProvider = _a.labelProvider, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, startingGutterCSS = _a.startingGutterCSS, endingGutterCSS = _a.endingGutterCSS, knobCSS = _a.knobCSS, labelCSS = _a.labelCSS, breakpoints = _a.breakpoints, _k = _a.autoSnap, autoSnap = _k === void 0 ? true : _k, defaultIndex = _a.defaultIndex, onIndexChange = _a.onIndexChange;
76
- function getPosition(natural) {
77
- if (natural === void 0) { natural = false; }
78
- if (natural)
79
- return isInverted ? (1 - position.current) : position.current;
80
- return position.current;
81
- }
82
- function setPosition(value) {
83
- position.current = value;
84
- if (onlyDispatchesOnDragEnd && isDragging)
85
- return;
86
- onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(position.current);
87
- if (breakpoints)
88
- onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(getClosestIndex());
75
+ var id = _a.id, className = _a.className, style = _a.style, _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _c === void 0 ? false : _c, _d = _a.gutterPadding, gutterPadding = _d === void 0 ? 0 : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 30 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 30 : _f, _g = _a.orientation, orientation = _g === void 0 ? 'vertical' : _g, _h = _a.defaultPosition, defaultPosition = _h === void 0 ? 0 : _h, _j = _a.isLabelVisible, isLabelVisible = _j === void 0 ? true : _j, labelProvider = _a.labelProvider, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, startingGutterCSS = _a.startingGutterCSS, endingGutterCSS = _a.endingGutterCSS, knobCSS = _a.knobCSS, labelCSS = _a.labelCSS, breakpoints = _a.breakpoints, _k = _a.autoSnap, autoSnap = _k === void 0 ? false : _k, defaultIndex = _a.defaultIndex, onIndexChange = _a.onIndexChange;
76
+ function setLivePosition(value) {
77
+ livePosition.current = value;
78
+ setPosition(value);
89
79
  }
90
80
  function getClosestIndex() {
91
81
  if (!breakpoints)
@@ -94,7 +84,7 @@ function Slider(_a) {
94
84
  var minDelta = NaN;
95
85
  for (var i = 0, n = breakpoints.length; i < n; i++) {
96
86
  var breakpoint = getPositionByIndex(i);
97
- var delta = Math.abs(getPosition() - breakpoint);
87
+ var delta = Math.abs(position - breakpoint);
98
88
  if (isNaN(minDelta) || (delta < minDelta)) {
99
89
  minDelta = delta;
100
90
  index = i;
@@ -134,13 +124,13 @@ function Slider(_a) {
134
124
  function onKnobDragMove(delta) {
135
125
  var _a;
136
126
  var rect = (_a = spase_1.Rect.from(rootRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
137
- var naturalPosition = getPosition(true);
127
+ var naturalPosition = isInverted ? (1 - livePosition.current) : livePosition.current;
138
128
  var naturalNewPositionX = naturalPosition * rect.width + delta;
139
129
  var naturalNewPositionY = naturalPosition * rect.height + delta;
140
130
  var naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width));
141
131
  var newPosition = isInverted ? (1 - naturalNewPosition) : naturalNewPosition;
142
132
  setIsDragging(true);
143
- setPosition(newPosition);
133
+ setLivePosition(newPosition);
144
134
  }
145
135
  function onKnobDragStop() {
146
136
  setIsDragging(false);
@@ -151,12 +141,14 @@ function Slider(_a) {
151
141
  if (!autoSnap || !breakpoints)
152
142
  return;
153
143
  var position = getPositionByIndex(getClosestIndex());
154
- setPosition(position);
144
+ setLivePosition(position);
155
145
  }
156
146
  var rootRef = (0, react_1.useRef)(null);
157
147
  var knobRef = (0, react_1.useRef)(null);
158
- var position = (0, react_1.useRef)(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition);
159
- var _l = __read((0, react_1.useState)(undefined), 2), isDragging = _l[0], setIsDragging = _l[1];
148
+ var livePosition = (0, react_1.useRef)(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition);
149
+ var _l = __read((0, react_1.useState)(livePosition.current), 2), position = _l[0], setPosition = _l[1];
150
+ var _m = __read((0, react_1.useState)(undefined), 2), isDragging = _m[0], setIsDragging = _m[1];
151
+ var naturalPosition = isInverted ? 1 - position : position;
160
152
  (0, react_1.useEffect)(function () {
161
153
  initInteractivity();
162
154
  return function () {
@@ -166,36 +158,45 @@ function Slider(_a) {
166
158
  (0, react_1.useEffect)(function () {
167
159
  snapToClosestBreakpointIfNeeded();
168
160
  }, [autoSnap]);
161
+ (0, react_1.useEffect)(function () {
162
+ if (onlyDispatchesOnDragEnd && isDragging)
163
+ return;
164
+ onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(position);
165
+ if (breakpoints)
166
+ onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(getClosestIndex());
167
+ }, [position]);
169
168
  return (react_1.default.createElement(StyledRoot, { ref: rootRef, id: id, className: className, orientation: orientation, style: style },
170
169
  react_1.default.createElement(StyledGutter, { orientation: orientation, css: startingGutterCSS, style: orientation === 'vertical' ? {
171
170
  top: 0,
172
- height: "calc(".concat(getPosition(true) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
171
+ height: "calc(".concat(naturalPosition * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
173
172
  } : {
174
173
  left: 0,
175
- width: "calc(".concat(getPosition(true) * 100, "% - ").concat(knobWidth * .5, "px - ").concat(gutterPadding, "px)"),
174
+ width: "calc(".concat(naturalPosition * 100, "% - ").concat(knobWidth * .5, "px - ").concat(gutterPadding, "px)"),
176
175
  } }),
177
176
  react_1.default.createElement(StyledKnobContainer, { ref: knobRef, style: __assign({ transform: 'translate3d(-50%, -50%, 0)' }, (orientation === 'vertical' ? {
178
- top: "".concat(position.current * 100, "%"),
177
+ left: '50%',
178
+ top: "".concat(position * 100, "%"),
179
179
  transition: isDragging === false ? 'top 100ms ease-out' : 'none',
180
180
  } : {
181
- left: "".concat(position.current * 100, "%"),
181
+ left: "".concat(position * 100, "%"),
182
+ top: '50%',
182
183
  transition: isDragging === false ? 'left 100ms ease-out' : 'none',
183
184
  })) },
184
185
  react_1.default.createElement(StyledKnob, { className: (0, classnames_1.default)({
185
- 'at-end': isInverted ? (position.current === 0) : (position.current === 1),
186
- 'at-start': isInverted ? (position.current === 1) : (position.current === 0),
186
+ 'at-end': isInverted ? (position === 0) : (position === 1),
187
+ 'at-start': isInverted ? (position === 1) : (position === 0),
187
188
  'dragging': isDragging === true,
188
189
  'idle': isDragging === false,
189
190
  }), css: knobCSS, style: {
190
191
  height: "".concat(knobHeight, "px"),
191
192
  width: "".concat(knobWidth, "px"),
192
- } }, breakpoints && isLabelVisible && labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: labelCSS }, labelProvider(getPosition(), getClosestIndex()))))),
193
+ } }, breakpoints && isLabelVisible && labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: labelCSS }, labelProvider(position, getClosestIndex()))))),
193
194
  react_1.default.createElement(StyledGutter, { orientation: orientation, css: endingGutterCSS, style: orientation === 'vertical' ? {
194
195
  bottom: 0,
195
- height: "calc(".concat((1 - getPosition(true)) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
196
+ height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
196
197
  } : {
197
198
  right: 0,
198
- width: "calc(".concat((1 - getPosition(true)) * 100, "% - ").concat(knobWidth * .5, "px - ").concat(gutterPadding, "px)"),
199
+ width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobWidth * .5, "px - ").concat(gutterPadding, "px)"),
199
200
  } })));
200
201
  }
201
202
  exports.default = Slider;
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\nexport type GutterCSSProps = Readonly<{\n orientation: Orientation\n}>\n\nexport type LabelCSSProps = Readonly<{\n knobHeight: number\n}>\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 * Indicates if the label is visible by the knob. Note that this is only applicable if\n * `labelProvider` is set.\n */\n isLabelVisible?: boolean\n\n /**\n * A function that returns the label to be displayed (if `isLabelVisible` is `true`) at a given\n * slider position and cloest breakpoint index (if breakpoints are provided).\n *\n * @param position - The current slider position.\n * @praam index - The nearest breakpoint index (if breakpoints are provided), or -1 if no\n * breakpoints 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 * The default position. This is ignored if `defaultIndex` and breakpoints are provided.\n */\n defaultPosition?: number\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 * Handler invoked when position changes.\n *\n * @param position - The current slider position.\n */\n onPositionChange?: (position: number) => 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 // The following props are only used if `breakpoints` are provided.\n\n /**\n * An array of breakpoint descriptors. A breakpoint is a position (0 - 1 inclusive) on the gutter\n * where the knob should snap to if dragging stops near it. If breakpoints are to be specified,\n * ensure that there are at least two: one for the start of the gutter and one for the end.\n */\n breakpoints?: readonly number[]\n\n /**\n * Indicates whether the knob automatically snaps to the nearest breakpoint, if breakpoints are\n * provided.\n */\n autoSnap?: boolean\n\n /**\n * The default index. This is only used if breakpoints are provided. On the other hand, if\n * breakpoints are provided, the default position will be calculated based on this value, making\n * `defaultPosition` irrelevant.\n */\n defaultIndex?: number\n\n /**\n * Handler invoked when index changes. This happens simultaneously with `onPositionChange`. Note\n * that this is only invoked if breakpoints are provided, because otherwise there will be no\n * indexes.\n *\n * @param index - The current breakpoint index.\n */\n onIndexChange?: (index: number) => void\n}\n\n/**\n * Generates a set of breakpoints compatible with this component.\n *\n * @param length - The number of breakpoints. This must be at least 2 because you must include the\n * starting and ending points.\n *\n * @returns An array of breakpoints.\n */\nexport function generateBreakpoints(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 pos = interval * i\n return pos\n })\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 taken from the aggregated rect of both\n * gutter parts. The dimension of the knob itself does not impact that of the root element. In\n * addition to the tranditional behavior of a scrollbar, this component allows you to provide\n * breakpoints along the gutter so the knob can automatically snap to them (if feature is enabled)\n * when dragging ends near the breakpoint positions. You can also supply a label to each breakpoint\n * and have it display on the knob when the current position is close to the breakpoint. This\n * component supports both horizontal and 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 defaultPosition = 0,\n isLabelVisible = true,\n labelProvider,\n onDragEnd,\n onDragStart,\n onPositionChange,\n startingGutterCSS,\n endingGutterCSS,\n knobCSS,\n labelCSS,\n breakpoints,\n autoSnap = true,\n defaultIndex,\n onIndexChange,\n}: Props) {\n /**\n * Gets the current position. If `natural` is `true`, the uninverted (if `isInverted` is set to\n * `true`) position will be returned.\n *\n * @param natural - Specifies if the natural position should be returned in case `isInverted` is\n * specified.\n *\n * @returns The current position.\n */\n function getPosition(natural = false): number {\n if (natural) return isInverted ? (1 - position.current) : position.current\n return position.current\n }\n\n /**\n * Sets the current position. The position should be normalized. That is, inversion should be\n * taken care of prior to passing the new value to this method if `isInverted` is `true`.\n *\n * @param value - The value to set the position to.\n */\n function setPosition(value: number) {\n position.current = value\n\n if (onlyDispatchesOnDragEnd && isDragging) return\n onPositionChange?.(position.current)\n if (breakpoints) onIndexChange?.(getClosestIndex())\n }\n\n /**\n * Gets the index of the breakpoint of which the current position is closest to. If for whatever\n * reason the index cannot be computed (i.e. no breakpoints were provided), -1 is returned.\n *\n * @returns The closest index.\n */\n function getClosestIndex(): number {\n if (!breakpoints) return -1\n\n let index = 0\n let minDelta = NaN\n\n for (let i = 0, n = breakpoints.length; i < n; i++) {\n const breakpoint = getPositionByIndex(i)\n const delta = Math.abs(getPosition() - breakpoint)\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 breakpoint index. This value ranges between 0 - 1, inclusive.\n *\n * @param index - The breakpoint index.\n *\n * @returns The position. If for whatever reason the position cannot be determined, NaN is\n * returned.\n */\n function getPositionByIndex(index: number): number {\n if (!breakpoints) return NaN\n return breakpoints[index]\n }\n\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 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) return\n\n interact(knob).unset()\n }\n\n /**\n * Handler invoked when the knob starts dragging.\n */\n function onKnobDragStart() {\n setIsDragging(true)\n\n onDragStart?.()\n }\n\n /**\n * Handler invoked when the knob moves.\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 = getPosition(true)\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 setPosition(newPosition)\n }\n\n /**\n * Handler invoked when the knob stops dragging.\n */\n function onKnobDragStop() {\n setIsDragging(false)\n snapToClosestBreakpointIfNeeded()\n\n onDragEnd?.()\n }\n\n /**\n * Snaps the knob to the closest breakpoint. Note that if there are no breakpoints or\n * auto-snapping feature is disabled, this method does nothing.\n */\n function snapToClosestBreakpointIfNeeded() {\n if (!autoSnap || !breakpoints) return\n const position = getPositionByIndex(getClosestIndex())\n setPosition(position)\n }\n\n const rootRef = useRef<HTMLDivElement>(null)\n const knobRef = useRef<HTMLButtonElement>(null)\n const position = useRef(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition)\n\n const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n useEffect(() => {\n initInteractivity()\n\n return () => {\n deinitInteractivity()\n }\n }, [])\n\n useEffect(() => {\n snapToClosestBreakpointIfNeeded()\n }, [autoSnap])\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(${getPosition(true)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n } : {\n left: 0,\n width: `calc(${getPosition(true)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n }}\n />\n <StyledKnobContainer ref={knobRef} style={{\n transform: 'translate3d(-50%, -50%, 0)',\n ...(orientation === 'vertical' ? {\n top: `${position.current * 100}%`,\n transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n } : {\n left: `${position.current * 100}%`,\n transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n }),\n }}>\n <StyledKnob\n className={classNames({\n 'at-end': isInverted ? (position.current === 0) : (position.current === 1),\n 'at-start': isInverted ? (position.current === 1) : (position.current === 0),\n 'dragging': isDragging === true,\n 'idle': isDragging === false,\n })}\n css={knobCSS}\n style={{\n height: `${knobHeight}px`,\n width: `${knobWidth}px`,\n }}\n >\n {breakpoints && isLabelVisible && labelProvider && (\n <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(getPosition(), getClosestIndex())}</StyledLabel>\n )}\n </StyledKnob>\n </StyledKnobContainer>\n <StyledGutter orientation={orientation} css={endingGutterCSS}\n style={orientation === 'vertical' ? {\n bottom: 0,\n height: `calc(${(1 - getPosition(true))*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n } : {\n right: 0,\n width: `calc(${(1 - getPosition(true))*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n }}\n />\n </StyledRoot>\n )\n}\n\nconst StyledGutter = styled.div<GutterCSSProps>`\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\nconst StyledLabel = styled.label<LabelCSSProps>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\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 &.idle {\n opacity: 1;\n transition-property: background, color, opacity, margin, transform;\n }\n\n &.dragging {\n opacity: .6;\n transition-property: background, color, transform, opacity;\n }\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\nexport type GutterCSSProps = Readonly<{\n orientation: Orientation\n}>\n\nexport type LabelCSSProps = Readonly<{\n knobHeight: number\n}>\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 * Indicates if the label is visible by the knob. Note that this is only applicable if\n * `labelProvider` is set.\n */\n isLabelVisible?: boolean\n\n /**\n * A function that returns the label to be displayed (if `isLabelVisible` is `true`) at a given\n * slider position and cloest breakpoint index (if breakpoints are provided).\n *\n * @param position - The current slider position.\n * @praam index - The nearest breakpoint index (if breakpoints are provided), or -1 if no\n * breakpoints 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 * The default position. This is ignored if `defaultIndex` and breakpoints are provided.\n */\n defaultPosition?: number\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 * Handler invoked when position changes.\n *\n * @param position - The current slider position.\n */\n onPositionChange?: (position: number) => 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 // The following props are only used if `breakpoints` are provided.\n\n /**\n * An array of breakpoint descriptors. A breakpoint is a position (0 - 1 inclusive) on the gutter\n * where the knob should snap to if dragging stops near it. If breakpoints are to be specified,\n * ensure that there are at least two: one for the start of the gutter and one for the end.\n */\n breakpoints?: readonly number[]\n\n /**\n * Indicates whether the knob automatically snaps to the nearest breakpoint, if breakpoints are\n * provided.\n */\n autoSnap?: boolean\n\n /**\n * The default index. This is only used if breakpoints are provided. On the other hand, if\n * breakpoints are provided, the default position will be calculated based on this value, making\n * `defaultPosition` irrelevant.\n */\n defaultIndex?: number\n\n /**\n * Handler invoked when index changes. This happens simultaneously with `onPositionChange`. Note\n * that this is only invoked if breakpoints are provided, because otherwise there will be no\n * indexes.\n *\n * @param index - The current breakpoint index.\n */\n onIndexChange?: (index: number) => void\n}\n\n/**\n * Generates a set of breakpoints compatible with this component.\n *\n * @param length - The number of breakpoints. This must be at least 2 because you must include the\n * starting and ending points.\n *\n * @returns An array of breakpoints.\n */\nexport function generateBreakpoints(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 pos = interval * i\n return pos\n })\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 taken from the aggregated rect of both\n * gutter parts. The dimension of the knob itself does not impact that of the root element. In\n * addition to the tranditional behavior of a scrollbar, this component allows you to provide\n * breakpoints along the gutter so the knob can automatically snap to them (if feature is enabled)\n * when dragging ends near the breakpoint positions. You can also supply a label to each breakpoint\n * and have it display on the knob when the current position is close to the breakpoint. This\n * component supports both horizontal and 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 defaultPosition = 0,\n isLabelVisible = true,\n labelProvider,\n onDragEnd,\n onDragStart,\n onPositionChange,\n startingGutterCSS,\n endingGutterCSS,\n knobCSS,\n labelCSS,\n breakpoints,\n autoSnap = false,\n defaultIndex,\n onIndexChange,\n}: Props) {\n /**\n * Sets the current position. The position should be normalized. That is, inversion should be\n * taken care of prior to passing the new value to this method if `isInverted` is `true`.\n *\n * @param value - The value to set the position to.\n */\n function setLivePosition(value: number) {\n livePosition.current = value\n setPosition(value)\n }\n\n /**\n * Gets the index of the breakpoint of which the current position is closest to. If for whatever\n * reason the index cannot be computed (i.e. no breakpoints were provided), -1 is returned.\n *\n * @returns The closest index.\n */\n function getClosestIndex(): number {\n if (!breakpoints) return -1\n\n let index = 0\n let minDelta = NaN\n\n for (let i = 0, n = breakpoints.length; i < n; i++) {\n const breakpoint = getPositionByIndex(i)\n const delta = Math.abs(position - breakpoint)\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 breakpoint index. This value ranges between 0 - 1, inclusive.\n *\n * @param index - The breakpoint index.\n *\n * @returns The position. If for whatever reason the position cannot be determined, NaN is\n * returned.\n */\n function getPositionByIndex(index: number): number {\n if (!breakpoints) return NaN\n return breakpoints[index]\n }\n\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 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) return\n\n interact(knob).unset()\n }\n\n /**\n * Handler invoked when the knob starts dragging.\n */\n function onKnobDragStart() {\n setIsDragging(true)\n\n onDragStart?.()\n }\n\n /**\n * Handler invoked when the knob moves.\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.\n */\n function onKnobDragStop() {\n setIsDragging(false)\n snapToClosestBreakpointIfNeeded()\n\n onDragEnd?.()\n }\n\n /**\n * Snaps the knob to the closest breakpoint. Note that if there are no breakpoints or\n * auto-snapping feature is disabled, this method does nothing.\n */\n function snapToClosestBreakpointIfNeeded() {\n if (!autoSnap || !breakpoints) return\n const position = getPositionByIndex(getClosestIndex())\n setLivePosition(position)\n }\n\n const rootRef = useRef<HTMLDivElement>(null)\n const knobRef = useRef<HTMLButtonElement>(null)\n const livePosition = useRef(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition)\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 snapToClosestBreakpointIfNeeded()\n }, [autoSnap])\n\n useEffect(() => {\n if (onlyDispatchesOnDragEnd && isDragging) return\n onPositionChange?.(position)\n if (breakpoints) onIndexChange?.(getClosestIndex())\n }, [position])\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: `${position*100}%`,\n transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n } : {\n left: `${position*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 'idle': isDragging === false,\n })}\n css={knobCSS}\n style={{\n height: `${knobHeight}px`,\n width: `${knobWidth}px`,\n }}\n >\n {breakpoints && isLabelVisible && labelProvider && (\n <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(position, getClosestIndex())}</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<GutterCSSProps>`\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\nconst StyledLabel = styled.label<LabelCSSProps>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\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 &.idle {\n opacity: 1;\n transition-property: background, color, opacity, margin, transform;\n }\n\n &.dragging {\n opacity: .6;\n transition-property: background, color, transform, opacity;\n }\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.28.0",
3
+ "version": "0.29.0",
4
4
  "description": "A study of styled React components",
5
5
  "main": "lib",
6
6
  "scripts": {
@@ -8,7 +8,7 @@
8
8
  "prebuild": "npm run lint",
9
9
  "build": "npm run clean && tsc -p tsconfig.json",
10
10
  "pages": "rimraf .gh-pages && webpack --config demo/config/build.conf.ts",
11
- "demo": "cross-env NODE_ENV=development webpack-cli serve --mode development --hot --config demo/config/build.conf.ts",
11
+ "demo": "npm run clean && concurrently \"npm run build -- --watch\" \"wait-on lib && cross-env NODE_ENV=development webpack-cli serve --mode development --hot --config demo/config/build.conf.ts\"",
12
12
  "test": "echo \"No tests yet :)\"",
13
13
  "lint": "eslint --ext .ts --ext .tsx src demo",
14
14
  "lint:fix": "npm run lint -- --fix"
@@ -48,6 +48,7 @@
48
48
  "@typescript-eslint/parser": "^5.4.0",
49
49
  "babel-loader": "^8.2.3",
50
50
  "babel-plugin-styled-components": "^2.0.1",
51
+ "concurrently": "^6.4.0",
51
52
  "cross-env": "^7.0.3",
52
53
  "debug": "^4.3.2",
53
54
  "dirty-dom": "^7.0.0",
@@ -67,6 +68,7 @@
67
68
  "ts-node": "^10.4.0",
68
69
  "typescript": "^4.5.2",
69
70
  "url-loader": "^4.1.1",
71
+ "wait-on": "^6.0.0",
70
72
  "webpack": "^5.64.3",
71
73
  "webpack-cli": "^4.9.1",
72
74
  "webpack-dev-server": "^4.5.0"