etudes 0.27.0 → 0.28.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 (4) hide show
  1. package/lib/Slider.d.ts +11 -18
  2. package/lib/Slider.js +47 -73
  3. package/lib/Slider.js.map +1 -1
  4. package/package.json +4 -1
package/lib/Slider.d.ts CHANGED
@@ -1,26 +1,20 @@
1
1
  import { CSSProperties } from 'react';
2
- import { ExtendedCSSFunction, Orientation } from './types';
3
- export declare type KnobCSSProps = Readonly<{
4
- isAtBeginning: boolean;
5
- isAtEnd: boolean;
6
- isDragging?: boolean;
7
- }>;
2
+ import { CSSProp } from 'styled-components';
3
+ import { Orientation } from './types';
8
4
  export declare type GutterCSSProps = Readonly<{
9
5
  orientation: Orientation;
10
6
  }>;
11
7
  export declare type LabelCSSProps = Readonly<{
12
8
  knobHeight: number;
13
9
  }>;
14
- export declare type BreakpointDescriptor = {
15
- label?: string;
16
- position?: number;
17
- };
18
10
  export declare type Props = {
19
11
  id?: string;
20
12
  className?: string;
21
13
  style?: CSSProperties;
22
14
  isInverted?: boolean;
23
15
  onlyDispatchesOnDragEnd?: boolean;
16
+ isLabelVisible?: boolean;
17
+ labelProvider?: (position: number, index: number) => string;
24
18
  gutterPadding?: number;
25
19
  knobHeight?: number;
26
20
  knobWidth?: number;
@@ -29,15 +23,14 @@ export declare type Props = {
29
23
  onDragEnd?: () => void;
30
24
  onDragStart?: () => void;
31
25
  onPositionChange?: (position: number) => void;
32
- startingGutterCSS?: ExtendedCSSFunction<GutterCSSProps>;
33
- endingGutterCSS?: ExtendedCSSFunction<GutterCSSProps>;
34
- knobCSS?: ExtendedCSSFunction<KnobCSSProps>;
35
- labelCSS?: ExtendedCSSFunction<LabelCSSProps>;
36
- breakpoints?: readonly BreakpointDescriptor[];
26
+ startingGutterCSS?: CSSProp<any>;
27
+ endingGutterCSS?: CSSProp<any>;
28
+ knobCSS?: CSSProp<any>;
29
+ labelCSS?: CSSProp<any>;
30
+ breakpoints?: readonly number[];
37
31
  autoSnap?: boolean;
38
- isLabelVisible?: boolean;
39
32
  defaultIndex?: number;
40
33
  onIndexChange?: (index: number) => void;
41
34
  };
42
- export declare function sliderBreakpointsFactory(length: number, labelIterator?: (index: number, position: number) => string): readonly BreakpointDescriptor[];
43
- export default function Slider({ id, className, style, isInverted, onlyDispatchesOnDragEnd, gutterPadding, knobHeight, knobWidth, orientation, defaultPosition, onDragEnd, onDragStart, onPositionChange, startingGutterCSS, endingGutterCSS, knobCSS, labelCSS, breakpoints, autoSnap, isLabelVisible, defaultIndex, onIndexChange, }: Props): JSX.Element;
35
+ export declare function generateBreakpoints(length: number): readonly number[];
36
+ export default function Slider({ id, className, style, isInverted, onlyDispatchesOnDragEnd, gutterPadding, knobHeight, knobWidth, orientation, defaultPosition, isLabelVisible, labelProvider, onDragEnd, onDragStart, onPositionChange, startingGutterCSS, endingGutterCSS, knobCSS, labelCSS, breakpoints, autoSnap, defaultIndex, onIndexChange, }: Props): JSX.Element;
package/lib/Slider.js CHANGED
@@ -53,93 +53,59 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
53
53
  return (mod && mod.__esModule) ? mod : { "default": mod };
54
54
  };
55
55
  Object.defineProperty(exports, "__esModule", { value: true });
56
- exports.sliderBreakpointsFactory = void 0;
56
+ exports.generateBreakpoints = void 0;
57
+ var classnames_1 = __importDefault(require("classnames"));
57
58
  var interactjs_1 = __importDefault(require("interactjs"));
58
59
  var react_1 = __importStar(require("react"));
59
60
  var spase_1 = require("spase");
60
61
  var styled_components_1 = __importStar(require("styled-components"));
61
- function sliderBreakpointsFactory(length, labelIterator) {
62
+ function generateBreakpoints(length) {
62
63
  if (length <= 1)
63
64
  throw new Error('`length` value must be greater than or equal to 2');
64
65
  if (Math.round(length) !== length)
65
66
  throw new Error('`length` value must be an integer');
66
67
  var interval = 1 / (length - 1);
67
68
  return Array(length).fill(null).map(function (v, i) {
68
- var _a;
69
69
  var pos = interval * i;
70
- return {
71
- label: (_a = labelIterator === null || labelIterator === void 0 ? void 0 : labelIterator(i, pos)) !== null && _a !== void 0 ? _a : undefined,
72
- position: pos,
73
- };
70
+ return pos;
74
71
  });
75
72
  }
76
- exports.sliderBreakpointsFactory = sliderBreakpointsFactory;
73
+ exports.generateBreakpoints = generateBreakpoints;
77
74
  function Slider(_a) {
78
- var _b;
79
- var id = _a.id, className = _a.className, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, _e = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _e === void 0 ? false : _e, _f = _a.gutterPadding, gutterPadding = _f === void 0 ? 0 : _f, _g = _a.knobHeight, knobHeight = _g === void 0 ? 30 : _g, _h = _a.knobWidth, knobWidth = _h === void 0 ? 30 : _h, _j = _a.orientation, orientation = _j === void 0 ? 'vertical' : _j, _k = _a.defaultPosition, defaultPosition = _k === void 0 ? 0 : _k, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, _l = _a.startingGutterCSS, startingGutterCSS = _l === void 0 ? function (props) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""]))); } : _l, _m = _a.endingGutterCSS, endingGutterCSS = _m === void 0 ? function (props) { return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""]))); } : _m, _o = _a.knobCSS, knobCSS = _o === void 0 ? function (props) { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""]))); } : _o, _p = _a.labelCSS, labelCSS = _p === void 0 ? function (props) { return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""]))); } : _p, _q = _a.breakpoints, breakpoints = _q === void 0 ? sliderBreakpointsFactory(10, function (index, position) { return "".concat(index); }) : _q, _r = _a.autoSnap, autoSnap = _r === void 0 ? true : _r, _s = _a.isLabelVisible, isLabelVisible = _s === void 0 ? true : _s, defaultIndex = _a.defaultIndex, onIndexChange = _a.onIndexChange;
80
- function updateRect() {
81
- var _a;
82
- setRect((_a = spase_1.Rect.from(rootRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect());
83
- }
84
- function updateKnobPosition() {
85
- var naturalPosition = getPosition(true);
86
- if (orientation === 'vertical') {
87
- setKnobPosition(naturalPosition * rect.height);
88
- }
89
- else {
90
- setKnobPosition(naturalPosition * rect.width);
91
- }
92
- }
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;
93
76
  function getPosition(natural) {
94
77
  if (natural === void 0) { natural = false; }
95
- if (natural) {
78
+ if (natural)
96
79
  return isInverted ? (1 - position.current) : position.current;
97
- }
98
- else {
99
- return position.current;
100
- }
80
+ return position.current;
101
81
  }
102
82
  function setPosition(value) {
103
83
  position.current = value;
104
- updateKnobPosition();
105
84
  if (onlyDispatchesOnDragEnd && isDragging)
106
85
  return;
107
86
  onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(position.current);
108
87
  if (breakpoints)
109
88
  onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(getClosestIndex());
110
89
  }
111
- function getStartingGutterLength() {
112
- var naturalPosition = getPosition(true);
113
- var knobLength = orientation === 'vertical' ? knobHeight : knobWidth;
114
- var sliderLength = orientation === 'vertical' ? rect.height : rect.width;
115
- return Math.max(0, naturalPosition * sliderLength - (knobLength / 2) - gutterPadding);
116
- }
117
- function getEndingGutterLength() {
118
- var naturalPosition = getPosition(true);
119
- var knobLength = orientation === 'vertical' ? knobHeight : knobWidth;
120
- var sliderLength = orientation === 'vertical' ? rect.height : rect.width;
121
- return Math.max(0, (1 - naturalPosition) * sliderLength - (knobLength / 2) - gutterPadding);
122
- }
123
90
  function getClosestIndex() {
124
91
  if (!breakpoints)
125
92
  return -1;
126
- var idx = 0;
127
- var delta = NaN;
93
+ var index = 0;
94
+ var minDelta = NaN;
128
95
  for (var i = 0, n = breakpoints.length; i < n; i++) {
129
96
  var breakpoint = getPositionByIndex(i);
130
- var d = Math.abs(getPosition() - breakpoint);
131
- if (isNaN(delta) || (d < delta)) {
132
- delta = d;
133
- idx = i;
97
+ var delta = Math.abs(getPosition() - breakpoint);
98
+ if (isNaN(minDelta) || (delta < minDelta)) {
99
+ minDelta = delta;
100
+ index = i;
134
101
  }
135
102
  }
136
- return idx;
103
+ return index;
137
104
  }
138
105
  function getPositionByIndex(index) {
139
- var _a;
140
106
  if (!breakpoints)
141
107
  return NaN;
142
- return (_a = breakpoints[index].position) !== null && _a !== void 0 ? _a : (index / (breakpoints.length - 1));
108
+ return breakpoints[index];
143
109
  }
144
110
  function initInteractivity() {
145
111
  var knob = knobRef.current;
@@ -166,6 +132,8 @@ function Slider(_a) {
166
132
  onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
167
133
  }
168
134
  function onKnobDragMove(delta) {
135
+ var _a;
136
+ var rect = (_a = spase_1.Rect.from(rootRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
169
137
  var naturalPosition = getPosition(true);
170
138
  var naturalNewPositionX = naturalPosition * rect.width + delta;
171
139
  var naturalNewPositionY = naturalPosition * rect.height + delta;
@@ -188,47 +156,53 @@ function Slider(_a) {
188
156
  var rootRef = (0, react_1.useRef)(null);
189
157
  var knobRef = (0, react_1.useRef)(null);
190
158
  var position = (0, react_1.useRef)(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition);
191
- var _t = __read((0, react_1.useState)(new spase_1.Rect()), 2), rect = _t[0], setRect = _t[1];
192
- var _u = __read((0, react_1.useState)(undefined), 2), isDragging = _u[0], setIsDragging = _u[1];
193
- var _v = __read((0, react_1.useState)(NaN), 2), knobPosition = _v[0], setKnobPosition = _v[1];
194
- (0, react_1.useEffect)(function () {
195
- updateRect();
196
- }, [orientation, rootRef]);
159
+ var _l = __read((0, react_1.useState)(undefined), 2), isDragging = _l[0], setIsDragging = _l[1];
197
160
  (0, react_1.useEffect)(function () {
198
161
  initInteractivity();
199
- updateKnobPosition();
200
162
  return function () {
201
163
  deinitInteractivity();
202
164
  };
203
- }, [rect]);
165
+ }, []);
204
166
  (0, react_1.useEffect)(function () {
205
167
  snapToClosestBreakpointIfNeeded();
206
168
  }, [autoSnap]);
207
169
  return (react_1.default.createElement(StyledRoot, { ref: rootRef, id: id, className: className, orientation: orientation, style: style },
208
- react_1.default.createElement(StyledGutter, { orientation: orientation, extendedCSS: startingGutterCSS, style: orientation === 'vertical' ? {
170
+ react_1.default.createElement(StyledGutter, { orientation: orientation, css: startingGutterCSS, style: orientation === 'vertical' ? {
209
171
  top: 0,
210
- height: "".concat(getStartingGutterLength(), "px"),
172
+ height: "calc(".concat(getPosition(true) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
211
173
  } : {
212
174
  left: 0,
213
- width: "".concat(getStartingGutterLength(), "px"),
175
+ width: "calc(".concat(getPosition(true) * 100, "% - ").concat(knobWidth * .5, "px - ").concat(gutterPadding, "px)"),
214
176
  } }),
215
- react_1.default.createElement(StyledKnob, { ref: knobRef, isAtEnd: isInverted ? (position.current === 0) : (position.current === 1), isAtBeginning: isInverted ? (position.current === 1) : (position.current === 0), isDragging: isDragging, extendedCSS: knobCSS, style: __assign({ height: "".concat(knobHeight, "px"), position: 'absolute', width: "".concat(knobWidth, "px"), zIndex: 1 }, (orientation === 'vertical' ? {
216
- margin: "".concat(-knobHeight / 2 + knobPosition, "px 0 0 ").concat((rect.width - knobWidth) / 2, "px"),
177
+ react_1.default.createElement(StyledKnobContainer, { ref: knobRef, style: __assign({ transform: 'translate3d(-50%, -50%, 0)' }, (orientation === 'vertical' ? {
178
+ top: "".concat(position.current * 100, "%"),
179
+ transition: isDragging === false ? 'top 100ms ease-out' : 'none',
217
180
  } : {
218
- margin: "".concat((rect.height - knobHeight) / 2, "px 0 0 ").concat(-knobWidth / 2 + knobPosition, "px"),
219
- })) }, breakpoints && isLabelVisible && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, extendedCSS: labelCSS }, (_b = breakpoints[getClosestIndex()].label) !== null && _b !== void 0 ? _b : ''))),
220
- react_1.default.createElement(StyledGutter, { orientation: orientation, extendedCSS: endingGutterCSS, style: orientation === 'vertical' ? {
181
+ left: "".concat(position.current * 100, "%"),
182
+ transition: isDragging === false ? 'left 100ms ease-out' : 'none',
183
+ })) },
184
+ 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),
187
+ 'dragging': isDragging === true,
188
+ 'idle': isDragging === false,
189
+ }), css: knobCSS, style: {
190
+ height: "".concat(knobHeight, "px"),
191
+ width: "".concat(knobWidth, "px"),
192
+ } }, breakpoints && isLabelVisible && labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: labelCSS }, labelProvider(getPosition(), getClosestIndex()))))),
193
+ react_1.default.createElement(StyledGutter, { orientation: orientation, css: endingGutterCSS, style: orientation === 'vertical' ? {
221
194
  bottom: 0,
222
- height: "".concat(getEndingGutterLength(), "px"),
195
+ height: "calc(".concat((1 - getPosition(true)) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
223
196
  } : {
224
197
  right: 0,
225
- width: "".concat(getEndingGutterLength(), "px"),
198
+ width: "calc(".concat((1 - getPosition(true)) * 100, "% - ").concat(knobWidth * .5, "px - ").concat(gutterPadding, "px)"),
226
199
  } })));
227
200
  }
228
201
  exports.default = Slider;
229
- var StyledGutter = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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_5 || (templateObject_5 = __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_6 || (templateObject_6 = __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.extendedCSS(props); });
230
- var StyledLabel = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __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.extendedCSS(props); });
231
- var StyledKnob = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __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: ", ";\n touch-action: none;\n transition-duration: 100ms;\n transition-property: ", ";\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: ", ";\n touch-action: none;\n transition-duration: 100ms;\n transition-property: ", ";\n transition-timing-function: ease-out;\n\n ", "\n"])), function (props) { return props.isDragging ? .6 : 1; }, function (props) { return props.isDragging === false ? 'background, color, opacity, margin, transform' : 'background, color, transform, opacity'; }, function (props) { return props.extendedCSS(props); });
232
- var StyledRoot = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __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'; });
233
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
202
+ var StyledGutter = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: #fff;\n position: absolute;\n\n ", "\n"], ["\n background: #fff;\n position: absolute;\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 "]))); });
203
+ 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 color: #000;\n font-size: ", "px;\n pointer-events: none;\n user-select: none;\n"])), function (props) { return props.knobHeight * .5; });
204
+ 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"])));
205
+ 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 &.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 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"])));
206
+ 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'; });
207
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
234
208
  //# sourceMappingURL=Slider.js.map
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 interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css } from 'styled-components'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nexport type KnobCSSProps = Readonly<{\n isAtBeginning: boolean\n isAtEnd: boolean\n isDragging?: boolean\n}>\n\nexport type GutterCSSProps = Readonly<{\n orientation: Orientation\n}>\n\nexport type LabelCSSProps = Readonly<{\n knobHeight: number\n}>\n\nexport type BreakpointDescriptor = {\n label?: string\n position?: 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 * 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 onPositionChange?: (position: number) => void\n\n /**\n * Custom CSS provided to the gutter before the knob.\n */\n startingGutterCSS?: ExtendedCSSFunction<GutterCSSProps>\n\n /**\n * Custom CSS provided to the gutter after the knob.\n */\n endingGutterCSS?: ExtendedCSSFunction<GutterCSSProps>\n\n /**\n * Custom CSS provided to the knob.\n */\n knobCSS?: ExtendedCSSFunction<KnobCSSProps>\n\n /**\n * Custom CSS provided to the label inside the knob.\n */\n labelCSS?: ExtendedCSSFunction<LabelCSSProps>\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. You can associate a label with a\n * breakpoint so it can be displayed in the knob. If breakpoints are to be specified, ensure that\n * there are at least two: one for the start of the gutter and one for the end.\n */\n breakpoints?: readonly BreakpointDescriptor[]\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 * Indicates if the breakpoint label is visible by the knob. Note that this is only applicable if\n * breakpoints are provided.\n */\n isLabelVisible?: 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 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 * @param labelIterator - Iterator function used for generating the label for each breakpoint.\n *\n * @returns An array of breakpoints.\n */\nexport function sliderBreakpointsFactory(length: number, labelIterator?: (index: number, position: number) => string): readonly BreakpointDescriptor[] {\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\n return {\n label: labelIterator?.(i, pos) ?? undefined,\n position: pos,\n }\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 onDragEnd,\n onDragStart,\n onPositionChange,\n startingGutterCSS = props => css``,\n endingGutterCSS = props => css``,\n knobCSS = props => css``,\n labelCSS = props => css``,\n breakpoints = sliderBreakpointsFactory(10, (index: number, position: number) => `${index}`),\n autoSnap = true,\n isLabelVisible = true,\n defaultIndex,\n onIndexChange,\n}: Props) {\n /**\n * Updates the calculated rect of this slider. If the root element is not rendered yet, the\n * calculated rect will be zero.\n */\n function updateRect() {\n setRect(Rect.from(rootRef.current) ?? new Rect())\n }\n\n /**\n * Updates the current knob position of the slider.\n */\n function updateKnobPosition() {\n const naturalPosition = getPosition(true)\n\n if (orientation === 'vertical') {\n setKnobPosition(naturalPosition * rect.height)\n }\n else {\n setKnobPosition(naturalPosition * rect.width)\n }\n }\n\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) {\n return isInverted ? (1 - position.current) : position.current\n }\n else {\n return position.current\n }\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 updateKnobPosition()\n\n if (onlyDispatchesOnDragEnd && isDragging) return\n\n onPositionChange?.(position.current)\n\n if (breakpoints) onIndexChange?.(getClosestIndex())\n }\n\n /**\n * Length of the gutter before the knob in pixels. If the orientation of the slider is horizontal,\n * this refers to the width, else this refers to the height.\n *\n * @returns The gutter length.\n */\n function getStartingGutterLength(): number {\n const naturalPosition = getPosition(true)\n const knobLength = orientation === 'vertical' ? knobHeight : knobWidth\n const sliderLength = orientation === 'vertical' ? rect.height : rect.width\n return Math.max(0, naturalPosition * sliderLength - (knobLength / 2) - gutterPadding)\n }\n\n /**\n * Length of the gutter after the knob in pixels. If the orientation of the slider is horizontal,\n * this refers to the width, else this refers to the height.\n *\n * @returns The gutter length.\n */\n function getEndingGutterLength(): number {\n const naturalPosition = getPosition(true)\n const knobLength = orientation === 'vertical' ? knobHeight : knobWidth\n const sliderLength = orientation === 'vertical' ? rect.height : rect.width\n return Math.max(0, (1 - naturalPosition) * sliderLength - (knobLength / 2) - gutterPadding)\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 idx = 0\n let delta = NaN\n\n for (let i = 0, n = breakpoints.length; i < n; i++) {\n const breakpoint = getPositionByIndex(i)\n const d = Math.abs(getPosition() - breakpoint)\n\n if (isNaN(delta) || (d < delta)) {\n delta = d\n idx = i\n }\n }\n\n return idx\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].position ?? (index / (breakpoints.length - 1))\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 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\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(null)\n const knobRef = useRef(null)\n const position = useRef(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition)\n\n const [rect, setRect] = useState(new Rect())\n const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n const [knobPosition, setKnobPosition] = useState(NaN)\n\n useEffect(() => {\n updateRect()\n }, [orientation, rootRef])\n\n useEffect(() => {\n initInteractivity()\n updateKnobPosition()\n\n return () => {\n deinitInteractivity()\n }\n }, [rect])\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} extendedCSS={startingGutterCSS} style={orientation === 'vertical' ? {\n top: 0,\n height: `${getStartingGutterLength()}px`,\n } : {\n left: 0,\n width: `${getStartingGutterLength()}px`,\n }}\n />\n <StyledKnob\n ref={knobRef}\n isAtEnd={isInverted ? (position.current === 0) : (position.current === 1)}\n isAtBeginning={isInverted ? (position.current === 1) : (position.current === 0)}\n isDragging={isDragging}\n extendedCSS={knobCSS}\n style={{\n height: `${knobHeight}px`,\n position: 'absolute',\n width: `${knobWidth}px`,\n zIndex: 1,\n ...(orientation === 'vertical' ? {\n margin: `${-knobHeight / 2 + knobPosition}px 0 0 ${(rect.width - knobWidth) / 2}px`,\n } : {\n margin: `${(rect.height - knobHeight) / 2}px 0 0 ${-knobWidth / 2 + knobPosition}px`,\n }),\n }}\n >\n {breakpoints && isLabelVisible && (\n <StyledLabel knobHeight={knobHeight} extendedCSS={labelCSS}>{breakpoints[getClosestIndex()].label ?? ''}</StyledLabel>\n )}\n </StyledKnob>\n <StyledGutter orientation={orientation} extendedCSS={endingGutterCSS} style={orientation === 'vertical' ? {\n bottom: 0,\n height: `${getEndingGutterLength()}px`,\n } : {\n right: 0,\n width: `${getEndingGutterLength()}px`,\n }}\n />\n </StyledRoot>\n )\n}\n\nconst StyledGutter = styled.div<GutterCSSProps & ExtendedCSSProps<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 ${props => props.extendedCSS(props)}\n`\n\nconst StyledLabel = styled.label<LabelCSSProps & ExtendedCSSProps<LabelCSSProps>>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\n\n ${props => props.extendedCSS(props)}\n`\n\nconst StyledKnob = styled.div<KnobCSSProps & ExtendedCSSProps<KnobCSSProps>>`\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: ${props => props.isDragging ? .6 : 1};\n touch-action: none;\n transition-duration: 100ms;\n transition-property: ${props => props.isDragging === false ? 'background, color, opacity, margin, transform' : 'background, color, transform, opacity'};\n transition-timing-function: ease-out;\n\n ${props => props.extendedCSS(props)}\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 = 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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "etudes",
3
- "version": "0.27.0",
3
+ "version": "0.28.0",
4
4
  "description": "A study of styled React components",
5
5
  "main": "lib",
6
6
  "scripts": {
@@ -79,5 +79,8 @@
79
79
  "dirty-dom": "^7.0.0",
80
80
  "interactjs": "1.10.11",
81
81
  "spase": "^6.2.0"
82
+ },
83
+ "dependencies": {
84
+ "classnames": "^2.3.1"
82
85
  }
83
86
  }