etudes 3.3.1 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Accordion.d.ts +58 -41
- package/lib/Accordion.js +89 -46
- package/lib/Accordion.js.map +1 -1
- package/lib/Dropdown.d.ts +21 -14
- package/lib/Dropdown.js +42 -24
- package/lib/Dropdown.js.map +1 -1
- package/lib/List.d.ts +31 -14
- package/lib/List.js +24 -22
- package/lib/List.js.map +1 -1
- package/lib/RangeSlider.js +32 -32
- package/lib/RangeSlider.js.map +1 -1
- package/lib/hooks/useDragEffect.js +11 -11
- package/lib/hooks/useDragEffect.js.map +1 -1
- package/package.json +1 -1
package/lib/RangeSlider.js
CHANGED
|
@@ -75,8 +75,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
75
75
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
76
76
|
exports.RangeSliderKnob = exports.RangeSliderHighlight = exports.RangeSliderLabel = exports.RangeSliderGutter = void 0;
|
|
77
77
|
var classnames_1 = __importDefault(require("classnames"));
|
|
78
|
-
var
|
|
79
|
-
var
|
|
78
|
+
var react_1 = __importDefault(require("fast-deep-equal/react"));
|
|
79
|
+
var react_2 = __importStar(require("react"));
|
|
80
80
|
var useDragEffect_1 = __importDefault(require("./hooks/useDragEffect"));
|
|
81
81
|
var useResizeEffect_1 = __importDefault(require("./hooks/useResizeEffect"));
|
|
82
82
|
var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
|
|
@@ -84,7 +84,7 @@ var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
|
|
|
84
84
|
var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
|
|
85
85
|
var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
|
|
86
86
|
var styles_1 = __importDefault(require("./utils/styles"));
|
|
87
|
-
exports.default = (0,
|
|
87
|
+
exports.default = (0, react_2.forwardRef)(function (_a, ref) {
|
|
88
88
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
89
89
|
var children = _a.children, className = _a.className, _k = _a.areLabelsVisible, areLabelsVisible = _k === void 0 ? true : _k, _l = _a.decimalPlaces, decimalPlaces = _l === void 0 ? 2 : _l, _m = _a.knobPadding, knobPadding = _m === void 0 ? 20 : _m, maxValue = _a.max, minValue = _a.min, _o = _a.orientation, orientation = _o === void 0 ? 'vertical' : _o, externalRange = _a.range, _p = _a.steps, steps = _p === void 0 ? -1 : _p, onRangeChange = _a.onRangeChange, props = __rest(_a, ["children", "className", "areLabelsVisible", "decimalPlaces", "knobPadding", "max", "min", "orientation", "range", "steps", "onRangeChange"]);
|
|
90
90
|
var getPositionByValue = function (value) { return (value - minValue) / (maxValue - minValue); };
|
|
@@ -107,11 +107,11 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
107
107
|
}
|
|
108
108
|
return breakpoints[idx];
|
|
109
109
|
};
|
|
110
|
-
var bodyRef = (0,
|
|
111
|
-
var startKnobRef = (0,
|
|
112
|
-
var endKnobRef = (0,
|
|
110
|
+
var bodyRef = (0, react_2.useRef)(null);
|
|
111
|
+
var startKnobRef = (0, react_2.useRef)(null);
|
|
112
|
+
var endKnobRef = (0, react_2.useRef)(null);
|
|
113
113
|
var _q = __read((0, useResizeEffect_1.default)(bodyRef), 1), size = _q[0];
|
|
114
|
-
var _r = __read((0,
|
|
114
|
+
var _r = __read((0, react_2.useState)(externalRange !== null && externalRange !== void 0 ? externalRange : [minValue, maxValue]), 2), range = _r[0], setRange = _r[1];
|
|
115
115
|
var _s = (0, useDragEffect_1.default)(startKnobRef, {
|
|
116
116
|
initialValue: (_b = externalRange === null || externalRange === void 0 ? void 0 : externalRange[0]) !== null && _b !== void 0 ? _b : minValue,
|
|
117
117
|
transform: function (value, dx, dy) {
|
|
@@ -135,29 +135,29 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
135
135
|
var breakpoints = __spreadArray(__spreadArray([minValue], __read(__spreadArray([], __read(Array(steps)), false).map(function (v, i) { return minValue + (i + 1) * (maxValue - minValue) / (1 + steps); })), false), [maxValue], false);
|
|
136
136
|
var _0 = __read(range.map(getDisplacementByValue), 2), start = _0[0], end = _0[1];
|
|
137
137
|
var highlightLength = end - start;
|
|
138
|
-
(0,
|
|
138
|
+
(0, react_2.useEffect)(function () {
|
|
139
139
|
if (range[0] === startValue)
|
|
140
140
|
return;
|
|
141
141
|
setRange([startValue, range[1]]);
|
|
142
142
|
onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
|
|
143
143
|
}, [startValue]);
|
|
144
|
-
(0,
|
|
144
|
+
(0, react_2.useEffect)(function () {
|
|
145
145
|
if (range[1] === endValue)
|
|
146
146
|
return;
|
|
147
147
|
setRange([range[0], endValue]);
|
|
148
148
|
onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
|
|
149
149
|
}, [endValue]);
|
|
150
|
-
(0,
|
|
151
|
-
if (isDraggingStartKnob || isDraggingEndKnob || (0,
|
|
150
|
+
(0, react_2.useEffect)(function () {
|
|
151
|
+
if (isDraggingStartKnob || isDraggingEndKnob || (0, react_1.default)(externalRange, range))
|
|
152
152
|
return;
|
|
153
153
|
setRange(externalRange !== null && externalRange !== void 0 ? externalRange : [minValue, maxValue]);
|
|
154
154
|
}, [externalRange]);
|
|
155
|
-
(0,
|
|
155
|
+
(0, react_2.useEffect)(function () {
|
|
156
156
|
if (steps < 0)
|
|
157
157
|
return;
|
|
158
158
|
setStartValue(getClosestSteppedValue(startValue));
|
|
159
159
|
}, [isReleasingStartKnob]);
|
|
160
|
-
(0,
|
|
160
|
+
(0, react_2.useEffect)(function () {
|
|
161
161
|
if (steps < 0 || !isReleasingEndKnob)
|
|
162
162
|
return;
|
|
163
163
|
setEndValue(getClosestSteppedValue(endValue));
|
|
@@ -248,34 +248,34 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
248
248
|
left: 'calc(100% + 10px)',
|
|
249
249
|
}),
|
|
250
250
|
});
|
|
251
|
-
return (
|
|
252
|
-
|
|
253
|
-
(0, cloneStyledElement_1.default)((_d = components.gutter) !== null && _d !== void 0 ? _d :
|
|
251
|
+
return (react_2.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root) }),
|
|
252
|
+
react_2.default.createElement("div", { ref: bodyRef, style: fixedStyles.body },
|
|
253
|
+
(0, cloneStyledElement_1.default)((_d = components.gutter) !== null && _d !== void 0 ? _d : react_2.default.createElement(exports.RangeSliderGutter, { style: defaultStyles.gutter }), {
|
|
254
254
|
className: (0, classnames_1.default)(fixedClassNames.gutter),
|
|
255
255
|
style: (0, styles_1.default)(fixedStyles.gutter),
|
|
256
256
|
}),
|
|
257
|
-
(0, cloneStyledElement_1.default)((_e = components.highlight) !== null && _e !== void 0 ? _e :
|
|
257
|
+
(0, cloneStyledElement_1.default)((_e = components.highlight) !== null && _e !== void 0 ? _e : react_2.default.createElement(exports.RangeSliderHighlight, { style: defaultStyles.highlight }), {
|
|
258
258
|
className: (0, classnames_1.default)(fixedClassNames.highlight),
|
|
259
259
|
style: (0, styles_1.default)(fixedStyles.highlight),
|
|
260
260
|
}),
|
|
261
|
-
(0, cloneStyledElement_1.default)((_f = components.knob) !== null && _f !== void 0 ? _f :
|
|
261
|
+
(0, cloneStyledElement_1.default)((_f = components.knob) !== null && _f !== void 0 ? _f : react_2.default.createElement(exports.RangeSliderKnob, { style: (0, styles_1.default)(defaultStyles.knob, {
|
|
262
262
|
transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',
|
|
263
263
|
}) }), {
|
|
264
264
|
ref: startKnobRef,
|
|
265
|
-
disabled: (0,
|
|
265
|
+
disabled: (0, react_1.default)([startValue, endValue], [maxValue, maxValue]),
|
|
266
266
|
className: (0, classnames_1.default)(fixedClassNames.knob, {
|
|
267
267
|
dragging: isDraggingStartKnob,
|
|
268
268
|
releasing: isReleasingStartKnob,
|
|
269
269
|
}),
|
|
270
270
|
style: (0, styles_1.default)(fixedStyles.knob, {
|
|
271
|
-
pointerEvents: (0,
|
|
271
|
+
pointerEvents: (0, react_1.default)([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',
|
|
272
272
|
}, orientation === 'horizontal' ? {
|
|
273
273
|
marginLeft: "".concat(start, "px"),
|
|
274
274
|
} : {
|
|
275
275
|
marginTop: "".concat(start, "px"),
|
|
276
276
|
}),
|
|
277
|
-
},
|
|
278
|
-
(0, cloneStyledElement_1.default)((_g = components.label) !== null && _g !== void 0 ? _g :
|
|
277
|
+
}, react_2.default.createElement("div", { style: fixedStyles.knobHitbox }), areLabelsVisible &&
|
|
278
|
+
(0, cloneStyledElement_1.default)((_g = components.label) !== null && _g !== void 0 ? _g : react_2.default.createElement(exports.RangeSliderLabel, { style: (0, styles_1.default)(defaultStyles.label, {
|
|
279
279
|
transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',
|
|
280
280
|
}) }), {
|
|
281
281
|
className: (0, classnames_1.default)(fixedClassNames.label, {
|
|
@@ -284,24 +284,24 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
284
284
|
}),
|
|
285
285
|
style: (0, styles_1.default)(fixedStyles.label),
|
|
286
286
|
}, Number(startValue.toFixed(decimalPlaces)).toLocaleString())),
|
|
287
|
-
(0, cloneStyledElement_1.default)((_h = components.knob) !== null && _h !== void 0 ? _h :
|
|
287
|
+
(0, cloneStyledElement_1.default)((_h = components.knob) !== null && _h !== void 0 ? _h : react_2.default.createElement(exports.RangeSliderKnob, { style: (0, styles_1.default)(defaultStyles.knob, {
|
|
288
288
|
transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',
|
|
289
289
|
}) }), {
|
|
290
290
|
ref: endKnobRef,
|
|
291
|
-
disabled: (0,
|
|
291
|
+
disabled: (0, react_1.default)([startValue, endValue], [maxValue, maxValue]),
|
|
292
292
|
className: (0, classnames_1.default)(fixedClassNames.knob, {
|
|
293
293
|
dragging: isDraggingEndKnob,
|
|
294
294
|
releasing: isDraggingEndKnob,
|
|
295
295
|
}),
|
|
296
296
|
style: (0, styles_1.default)(fixedStyles.knob, {
|
|
297
|
-
pointerEvents: (0,
|
|
297
|
+
pointerEvents: (0, react_1.default)([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',
|
|
298
298
|
}, orientation === 'horizontal' ? {
|
|
299
299
|
marginLeft: "".concat(end, "px"),
|
|
300
300
|
} : {
|
|
301
301
|
marginTop: "".concat(end, "px"),
|
|
302
302
|
}),
|
|
303
|
-
},
|
|
304
|
-
(0, cloneStyledElement_1.default)((_j = components.label) !== null && _j !== void 0 ? _j :
|
|
303
|
+
}, react_2.default.createElement("div", { style: fixedStyles.knobHitbox }), areLabelsVisible &&
|
|
304
|
+
(0, cloneStyledElement_1.default)((_j = components.label) !== null && _j !== void 0 ? _j : react_2.default.createElement(exports.RangeSliderLabel, { style: (0, styles_1.default)(defaultStyles.label, {
|
|
305
305
|
transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',
|
|
306
306
|
}) }), {
|
|
307
307
|
className: (0, classnames_1.default)(fixedClassNames.label, {
|
|
@@ -313,21 +313,21 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
313
313
|
});
|
|
314
314
|
var RangeSliderGutter = function (_a) {
|
|
315
315
|
var props = __rest(_a, []);
|
|
316
|
-
return
|
|
316
|
+
return react_2.default.createElement("div", __assign({}, props));
|
|
317
317
|
};
|
|
318
318
|
exports.RangeSliderGutter = RangeSliderGutter;
|
|
319
319
|
var RangeSliderLabel = function (_a) {
|
|
320
320
|
var props = __rest(_a, []);
|
|
321
|
-
return
|
|
321
|
+
return react_2.default.createElement("div", __assign({}, props));
|
|
322
322
|
};
|
|
323
323
|
exports.RangeSliderLabel = RangeSliderLabel;
|
|
324
324
|
var RangeSliderHighlight = function (_a) {
|
|
325
325
|
var props = __rest(_a, []);
|
|
326
|
-
return
|
|
326
|
+
return react_2.default.createElement("div", __assign({}, props));
|
|
327
327
|
};
|
|
328
328
|
exports.RangeSliderHighlight = RangeSliderHighlight;
|
|
329
|
-
exports.RangeSliderKnob = (0,
|
|
329
|
+
exports.RangeSliderKnob = (0, react_2.forwardRef)(function (_a, ref) {
|
|
330
330
|
var props = __rest(_a, []);
|
|
331
|
-
return
|
|
331
|
+
return react_2.default.createElement("div", __assign({}, props, { ref: ref }));
|
|
332
332
|
});
|
|
333
333
|
//# sourceMappingURL=RangeSlider.js.map
|
package/lib/RangeSlider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport useDragEffect from './hooks/useDragEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\ntype Range = [number, number]\n\nexport type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n areLabelsVisible?: boolean\n decimalPlaces?: number\n knobPadding?: number\n max: number\n min: number\n orientation?: Orientation\n range?: Range\n steps?: number\n onRangeChange?: (range: Range) => void\n}>\n\nexport default forwardRef<HTMLDivElement, RangeSliderProps>(({\n children,\n className,\n areLabelsVisible = true,\n decimalPlaces = 2,\n knobPadding = 20,\n max: maxValue,\n min: minValue,\n orientation = 'vertical',\n range: externalRange,\n steps = -1,\n onRangeChange,\n ...props\n}, ref) => {\n const getPositionByValue = (value: number) => (value - minValue) / (maxValue - minValue)\n const getPositionByDisplacement = (displacement: number) => displacement / (orientation === 'horizontal' ? size.width : size.height)\n const getValueByPosition = (position: number) => position * (maxValue - minValue) + minValue\n const getValueByDisplacement = (displacement: number) => getValueByPosition(getPositionByDisplacement(displacement))\n const getDisplacementByPosition = (position: number) => position * (orientation === 'horizontal' ? size.width : size.height)\n const getDisplacementByValue = (value: number) => getDisplacementByPosition(getPositionByValue(value))\n\n const getClosestSteppedValue = (value: number) => {\n const n = breakpoints.length\n let idx = 0\n let diff = Infinity\n\n for (let i = 0; i < n; i++) {\n const t = breakpoints[i]\n const d = Math.abs(value - t)\n\n if (d < diff) {\n diff = d\n idx = i\n }\n }\n\n return breakpoints[idx]\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const startKnobRef = useRef<HTMLDivElement>(null)\n const endKnobRef = useRef<HTMLDivElement>(null)\n\n const [size] = useResizeEffect(bodyRef)\n\n const [range, setRange] = useState<Range>(externalRange ?? [minValue, maxValue])\n\n const { isDragging: [isDraggingStartKnob], isReleasing: [isReleasingStartKnob], value: [startValue, setStartValue] } = useDragEffect(startKnobRef, {\n initialValue: externalRange?.[0] ?? minValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(minValue)\n const dMax = getDisplacementByValue(range[1])\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [minValue, orientation, size, range[1]])\n\n const { isDragging: [isDraggingEndKnob], isReleasing: [isReleasingEndKnob], value: [endValue, setEndValue] } = useDragEffect(endKnobRef, {\n initialValue: externalRange?.[1] ?? maxValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(range[0])\n const dMax = getDisplacementByValue(maxValue)\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [maxValue, orientation, size, range[0]])\n\n const breakpoints = [minValue, ...[...Array(steps)].map((v, i) => minValue + (i + 1) * (maxValue - minValue) / (1 + steps)), maxValue]\n const [start, end] = range.map(getDisplacementByValue)\n const highlightLength = end - start\n\n useEffect(() => {\n if (range[0] === startValue) return\n setRange([startValue, range[1]])\n onRangeChange?.(range)\n }, [startValue])\n\n useEffect(() => {\n if (range[1] === endValue) return\n setRange([range[0], endValue])\n onRangeChange?.(range)\n }, [endValue])\n\n useEffect(() => {\n if (isDraggingStartKnob || isDraggingEndKnob || isEqual(externalRange, range)) return\n setRange(externalRange ?? [minValue, maxValue])\n }, [externalRange])\n\n useEffect(() => {\n if (steps < 0) return\n setStartValue(getClosestSteppedValue(startValue))\n }, [isReleasingStartKnob])\n\n useEffect(() => {\n if (steps < 0 || !isReleasingEndKnob) return\n setEndValue(getClosestSteppedValue(endValue))\n }, [isReleasingEndKnob])\n\n const components = asComponentDict(children, {\n gutter: RangeSliderGutter,\n highlight: RangeSliderHighlight,\n knob: RangeSliderKnob,\n label: RangeSliderLabel,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n gutter: classNames(orientation),\n highlight: classNames(orientation),\n knob: classNames(orientation),\n label: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n body: {\n height: '100%',\n width: '100%',\n },\n gutter: {\n display: 'block',\n top: '0',\n left: '0',\n position: 'absolute',\n width: '100%',\n height: '100%',\n },\n highlight: {\n height: '100%',\n left: '0',\n position: 'absolute',\n top: '0',\n ...orientation === 'horizontal' ? {\n width: `${highlightLength}px`,\n transform: `translate3d(${start}px, 0, 0)`,\n } : {\n height: `${highlightLength}px`,\n transform: `translate3d(0, ${start}px, 0)`,\n },\n },\n knob: {\n bottom: '0',\n left: '0',\n margin: 'auto',\n position: 'absolute',\n right: '0',\n top: '0',\n touchAction: 'none',\n zIndex: '1',\n },\n knobHitbox: {\n background: 'transparent',\n height: `calc(100% + ${knobPadding * 2}px)`,\n left: `-${knobPadding}px`,\n padding: `${knobPadding}px`,\n position: 'absolute',\n top: `-${knobPadding}px`,\n width: `calc(100% + ${knobPadding * 2}px)`,\n },\n label: {\n pointerEvents: 'none',\n position: 'relative',\n userSelect: 'none',\n },\n })\n\n const defaultStyles = asStyleDict({\n gutter: {\n background: 'rgba(255, 255, 255, .2)',\n },\n highlight: {\n background: '#fff',\n transitionDuration: '100ms',\n transitionProperty: (isReleasingStartKnob ? !isReleasingEndKnob : isReleasingEndKnob) ? 'opacity, width, transform' : 'opacity',\n transitionTimingFunction: 'ease-out',\n },\n knob: {\n alignItems: 'center',\n background: '#fff',\n borderRadius: '10px',\n boxSizing: 'border-box',\n display: 'flex',\n height: '20px',\n justifyContent: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n width: '20px',\n },\n label: {\n background: 'transparent',\n color: '#fff',\n textAlign: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'horizontal' ? {\n top: 'calc(100% + 10px)',\n } : {\n left: 'calc(100% + 10px)',\n },\n },\n })\n\n return (\n <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n <div ref={bodyRef} style={fixedStyles.body}>\n {cloneStyledElement(components.gutter ?? <RangeSliderGutter style={defaultStyles.gutter}/>, {\n className: classNames(fixedClassNames.gutter),\n style: styles(fixedStyles.gutter),\n })}\n {cloneStyledElement(components.highlight ?? <RangeSliderHighlight style={defaultStyles.highlight}/>, {\n className: classNames(fixedClassNames.highlight),\n style: styles(fixedStyles.highlight),\n })}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: startKnobRef,\n disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingStartKnob,\n releasing: isReleasingStartKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isEqual([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${start}px`,\n } : {\n marginTop: `${start}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingStartKnob || isDraggingEndKnob,\n releasing: isReleasingStartKnob || isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(startValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: endKnobRef,\n disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingEndKnob,\n releasing: isDraggingEndKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isEqual([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${end}px`,\n } : {\n marginTop: `${end}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingEndKnob,\n releasing: isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(endValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n </div>\n </div>\n )\n})\n\nexport const RangeSliderGutter = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderHighlight = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderKnob = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ ...props }, ref) => <div {...props} ref={ref}/>)\n"]}
|
|
1
|
+
{"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport useDragEffect from './hooks/useDragEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\ntype Range = [number, number]\n\nexport type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n areLabelsVisible?: boolean\n decimalPlaces?: number\n knobPadding?: number\n max: number\n min: number\n orientation?: Orientation\n range?: Range\n steps?: number\n onRangeChange?: (range: Range) => void\n}>\n\nexport default forwardRef<HTMLDivElement, RangeSliderProps>(({\n children,\n className,\n areLabelsVisible = true,\n decimalPlaces = 2,\n knobPadding = 20,\n max: maxValue,\n min: minValue,\n orientation = 'vertical',\n range: externalRange,\n steps = -1,\n onRangeChange,\n ...props\n}, ref) => {\n const getPositionByValue = (value: number) => (value - minValue) / (maxValue - minValue)\n const getPositionByDisplacement = (displacement: number) => displacement / (orientation === 'horizontal' ? size.width : size.height)\n const getValueByPosition = (position: number) => position * (maxValue - minValue) + minValue\n const getValueByDisplacement = (displacement: number) => getValueByPosition(getPositionByDisplacement(displacement))\n const getDisplacementByPosition = (position: number) => position * (orientation === 'horizontal' ? size.width : size.height)\n const getDisplacementByValue = (value: number) => getDisplacementByPosition(getPositionByValue(value))\n\n const getClosestSteppedValue = (value: number) => {\n const n = breakpoints.length\n let idx = 0\n let diff = Infinity\n\n for (let i = 0; i < n; i++) {\n const t = breakpoints[i]\n const d = Math.abs(value - t)\n\n if (d < diff) {\n diff = d\n idx = i\n }\n }\n\n return breakpoints[idx]\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const startKnobRef = useRef<HTMLDivElement>(null)\n const endKnobRef = useRef<HTMLDivElement>(null)\n\n const [size] = useResizeEffect(bodyRef)\n\n const [range, setRange] = useState<Range>(externalRange ?? [minValue, maxValue])\n\n const { isDragging: [isDraggingStartKnob], isReleasing: [isReleasingStartKnob], value: [startValue, setStartValue] } = useDragEffect(startKnobRef, {\n initialValue: externalRange?.[0] ?? minValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(minValue)\n const dMax = getDisplacementByValue(range[1])\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [minValue, orientation, size, range[1]])\n\n const { isDragging: [isDraggingEndKnob], isReleasing: [isReleasingEndKnob], value: [endValue, setEndValue] } = useDragEffect(endKnobRef, {\n initialValue: externalRange?.[1] ?? maxValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(range[0])\n const dMax = getDisplacementByValue(maxValue)\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [maxValue, orientation, size, range[0]])\n\n const breakpoints = [minValue, ...[...Array(steps)].map((v, i) => minValue + (i + 1) * (maxValue - minValue) / (1 + steps)), maxValue]\n const [start, end] = range.map(getDisplacementByValue)\n const highlightLength = end - start\n\n useEffect(() => {\n if (range[0] === startValue) return\n setRange([startValue, range[1]])\n onRangeChange?.(range)\n }, [startValue])\n\n useEffect(() => {\n if (range[1] === endValue) return\n setRange([range[0], endValue])\n onRangeChange?.(range)\n }, [endValue])\n\n useEffect(() => {\n if (isDraggingStartKnob || isDraggingEndKnob || isDeepEqual(externalRange, range)) return\n setRange(externalRange ?? [minValue, maxValue])\n }, [externalRange])\n\n useEffect(() => {\n if (steps < 0) return\n setStartValue(getClosestSteppedValue(startValue))\n }, [isReleasingStartKnob])\n\n useEffect(() => {\n if (steps < 0 || !isReleasingEndKnob) return\n setEndValue(getClosestSteppedValue(endValue))\n }, [isReleasingEndKnob])\n\n const components = asComponentDict(children, {\n gutter: RangeSliderGutter,\n highlight: RangeSliderHighlight,\n knob: RangeSliderKnob,\n label: RangeSliderLabel,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n gutter: classNames(orientation),\n highlight: classNames(orientation),\n knob: classNames(orientation),\n label: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n body: {\n height: '100%',\n width: '100%',\n },\n gutter: {\n display: 'block',\n top: '0',\n left: '0',\n position: 'absolute',\n width: '100%',\n height: '100%',\n },\n highlight: {\n height: '100%',\n left: '0',\n position: 'absolute',\n top: '0',\n ...orientation === 'horizontal' ? {\n width: `${highlightLength}px`,\n transform: `translate3d(${start}px, 0, 0)`,\n } : {\n height: `${highlightLength}px`,\n transform: `translate3d(0, ${start}px, 0)`,\n },\n },\n knob: {\n bottom: '0',\n left: '0',\n margin: 'auto',\n position: 'absolute',\n right: '0',\n top: '0',\n touchAction: 'none',\n zIndex: '1',\n },\n knobHitbox: {\n background: 'transparent',\n height: `calc(100% + ${knobPadding * 2}px)`,\n left: `-${knobPadding}px`,\n padding: `${knobPadding}px`,\n position: 'absolute',\n top: `-${knobPadding}px`,\n width: `calc(100% + ${knobPadding * 2}px)`,\n },\n label: {\n pointerEvents: 'none',\n position: 'relative',\n userSelect: 'none',\n },\n })\n\n const defaultStyles = asStyleDict({\n gutter: {\n background: 'rgba(255, 255, 255, .2)',\n },\n highlight: {\n background: '#fff',\n transitionDuration: '100ms',\n transitionProperty: (isReleasingStartKnob ? !isReleasingEndKnob : isReleasingEndKnob) ? 'opacity, width, transform' : 'opacity',\n transitionTimingFunction: 'ease-out',\n },\n knob: {\n alignItems: 'center',\n background: '#fff',\n borderRadius: '10px',\n boxSizing: 'border-box',\n display: 'flex',\n height: '20px',\n justifyContent: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n width: '20px',\n },\n label: {\n background: 'transparent',\n color: '#fff',\n textAlign: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'horizontal' ? {\n top: 'calc(100% + 10px)',\n } : {\n left: 'calc(100% + 10px)',\n },\n },\n })\n\n return (\n <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n <div ref={bodyRef} style={fixedStyles.body}>\n {cloneStyledElement(components.gutter ?? <RangeSliderGutter style={defaultStyles.gutter}/>, {\n className: classNames(fixedClassNames.gutter),\n style: styles(fixedStyles.gutter),\n })}\n {cloneStyledElement(components.highlight ?? <RangeSliderHighlight style={defaultStyles.highlight}/>, {\n className: classNames(fixedClassNames.highlight),\n style: styles(fixedStyles.highlight),\n })}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: startKnobRef,\n disabled: isDeepEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingStartKnob,\n releasing: isReleasingStartKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isDeepEqual([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${start}px`,\n } : {\n marginTop: `${start}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingStartKnob || isDraggingEndKnob,\n releasing: isReleasingStartKnob || isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(startValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: endKnobRef,\n disabled: isDeepEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingEndKnob,\n releasing: isDraggingEndKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isDeepEqual([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${end}px`,\n } : {\n marginTop: `${end}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingEndKnob,\n releasing: isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(endValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n </div>\n </div>\n )\n})\n\nexport const RangeSliderGutter = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderHighlight = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderKnob = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ ...props }, ref) => <div {...props} ref={ref}/>)\n"]}
|
|
@@ -50,9 +50,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
50
50
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
51
51
|
};
|
|
52
52
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
53
|
-
var
|
|
53
|
+
var react_1 = __importDefault(require("fast-deep-equal/react"));
|
|
54
54
|
var interactjs_1 = __importDefault(require("interactjs"));
|
|
55
|
-
var
|
|
55
|
+
var react_2 = require("react");
|
|
56
56
|
/**
|
|
57
57
|
* Hook for adding effectful dragging interaction to an element.
|
|
58
58
|
*
|
|
@@ -77,17 +77,17 @@ function useDragEffect(targetRef, _a, deps) {
|
|
|
77
77
|
* @returns `true` if the value was set, `false` otherwise.
|
|
78
78
|
*/
|
|
79
79
|
var setValueRef = function (value) {
|
|
80
|
-
if ((0,
|
|
80
|
+
if ((0, react_1.default)(valueRef.current, value))
|
|
81
81
|
return false;
|
|
82
82
|
valueRef.current = value;
|
|
83
83
|
return true;
|
|
84
84
|
};
|
|
85
|
-
var valueRef = (0,
|
|
86
|
-
var _b = __read((0,
|
|
87
|
-
var _c = __read((0,
|
|
88
|
-
var _d = __read((0,
|
|
89
|
-
var _e = __read((0,
|
|
90
|
-
(0,
|
|
85
|
+
var valueRef = (0, react_2.useRef)(initialValue);
|
|
86
|
+
var _b = __read((0, react_2.useState)(false), 2), hasDragged = _b[0], setHasDragged = _b[1];
|
|
87
|
+
var _c = __read((0, react_2.useState)(false), 2), isDragging = _c[0], setIsDragging = _c[1];
|
|
88
|
+
var _d = __read((0, react_2.useState)(false), 2), isReleasing = _d[0], setIsReleasing = _d[1];
|
|
89
|
+
var _e = __read((0, react_2.useState)(initialValue), 2), value = _e[0], setValue = _e[1];
|
|
90
|
+
(0, react_2.useEffect)(function () {
|
|
91
91
|
if (targetRef.current && !interactjs_1.default.isSet(targetRef.current)) {
|
|
92
92
|
// Do not consume states in these listeners as they will remain their
|
|
93
93
|
// initial values within the scope of the listeners.
|
|
@@ -117,12 +117,12 @@ function useDragEffect(targetRef, _a, deps) {
|
|
|
117
117
|
}
|
|
118
118
|
};
|
|
119
119
|
}, __spreadArray([], __read(deps ? deps : []), false));
|
|
120
|
-
(0,
|
|
120
|
+
(0, react_2.useEffect)(function () {
|
|
121
121
|
if (hasDragged)
|
|
122
122
|
return;
|
|
123
123
|
setValue(initialValue);
|
|
124
124
|
}, [initialValue]);
|
|
125
|
-
(0,
|
|
125
|
+
(0, react_2.useEffect)(function () {
|
|
126
126
|
setValueRef(value);
|
|
127
127
|
}, [value]);
|
|
128
128
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDragEffect.js","sourceRoot":"/","sources":["hooks/useDragEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"useDragEffect.js","sourceRoot":"/","sources":["hooks/useDragEffect.ts"],"names":[],"mappings":"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","sourcesContent":["import isDeepEqual from 'fast-deep-equal/react'\nimport interact from 'interactjs'\nimport { useEffect, useRef, useState, type DependencyList, type Dispatch, type RefObject, type SetStateAction } from 'react'\n\ntype ReturnedStates<T> = {\n isDragging: [boolean, Dispatch<SetStateAction<boolean>>]\n isReleasing: [boolean, Dispatch<SetStateAction<boolean>>]\n value: [T, Dispatch<SetStateAction<T>>]\n}\n\ntype InteractDraggableOptions = Parameters<Interact.Interactable['draggable']>[0]\n\ntype Options<T> = Omit<InteractDraggableOptions, 'onstart' | 'onmove' | 'onend'> & {\n /**\n * The initial associated value of this hook.\n */\n initialValue: T\n\n /**\n * A function that transforms the drag move delta values to the associated\n * value of this hook.\n *\n * @param currentValue The current associated value.\n * @param dx The displacement on the x-axis (in pixels) since the last emitted\n * drag move event.\n * @param dy The displacement on the y-axis (in pixels) since the last emitted\n * drag move event.\n *\n * @returns The transformed value.\n */\n transform: (currentValue: T, dx: number, dy: number) => T\n\n /**\n * Handler invoked when dragging starts.\n */\n onDragStart?: () => void\n\n /**\n * Handler invoked when dragging.\n *\n * @param dx The displacement on the x-axis (in pixels) since the last emitted\n * drag move event.\n * @param dy The displacement on the y-axis (in pixels) since the last emitted\n * drag move event.\n */\n onDragMove?: (dx: number, dy: number) => void\n\n /**\n * Handler invoked when dragging ends.\n */\n onDragEnd?: () => void\n}\n\n/**\n * Hook for adding effectful dragging interaction to an element.\n *\n * @param targetRef The reference to the target element to add drag interaction\n * to.\n * @param options Additional options which include options for\n * `module:interactjs.draggable`.\n * @param deps Dependencies that trigger this effect.\n *\n * @returns The states created for this effect.\n */\nexport default function useDragEffect<T = [number, number]>(targetRef: RefObject<HTMLElement>, {\n initialValue,\n transform,\n onDragStart,\n onDragMove,\n onDragEnd,\n ...options\n}: Options<T>, deps?: DependencyList): ReturnedStates<T> {\n /**\n * Sets the current associated value reference. This reference object is equal\n * to the `value` state but differs slightly in how they are set. Because\n * states are asynchronous by nature, this reference object is used to cache\n * time-sensitive value changes while drag event happens.\n *\n * @param value The value to set the associated value to.\n *\n * @returns `true` if the value was set, `false` otherwise.\n */\n const setValueRef = (value: T): boolean => {\n if (isDeepEqual(valueRef.current, value)) return false\n valueRef.current = value\n\n return true\n }\n\n const valueRef = useRef<T>(initialValue)\n const [hasDragged, setHasDragged] = useState<boolean>(false)\n const [isDragging, setIsDragging] = useState<boolean>(false)\n const [isReleasing, setIsReleasing] = useState<boolean>(false)\n const [value, setValue] = useState(initialValue)\n\n useEffect(() => {\n if (targetRef.current && !interact.isSet(targetRef.current)) {\n // Do not consume states in these listeners as they will remain their\n // initial values within the scope of the listeners.\n interact(targetRef.current).draggable({\n inertia: true,\n ...options,\n onstart: () => {\n setHasDragged(true)\n setIsDragging(true)\n setIsReleasing(false)\n onDragStart?.()\n },\n onmove: ({ dx, dy }) => {\n const newValue = transform(valueRef.current, dx, dy)\n\n if (setValueRef(newValue)) {\n setValue(newValue)\n }\n\n setIsDragging(true)\n setIsReleasing(false)\n onDragMove?.(dx, dy)\n },\n onend: () => {\n setIsDragging(false)\n setIsReleasing(true)\n onDragEnd?.()\n },\n })\n }\n\n return () => {\n if (targetRef.current && interact.isSet(targetRef.current)) {\n interact(targetRef.current).unset()\n }\n }\n }, [...deps ? deps : []])\n\n useEffect(() => {\n if (hasDragged) return\n setValue(initialValue)\n }, [initialValue])\n\n useEffect(() => {\n setValueRef(value)\n }, [value])\n\n return {\n isDragging: [isDragging, setIsDragging],\n isReleasing: [isReleasing, setIsReleasing],\n value: [value, setValue],\n }\n}\n"]}
|