@plasmicpkgs/react-aria 0.0.43 → 0.0.44
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/dist/.tsbuildinfo +1 -1
- package/dist/contexts.d.ts +3 -1
- package/dist/react-aria.esm.js +226 -206
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +225 -205
- package/dist/react-aria.js.map +1 -1
- package/dist/registerSlider.d.ts +3 -20
- package/dist/registerSliderOutput.d.ts +1 -1
- package/dist/registerSliderThumb.d.ts +2 -2
- package/dist/registerSliderTrack.d.ts +3 -1
- package/package.json +2 -2
- package/skinny/contexts-3a98471a.cjs.js.map +1 -1
- package/skinny/contexts-87c261f6.esm.js.map +1 -1
- package/skinny/contexts.d.ts +3 -1
- package/skinny/registerSlider.cjs.js +305 -15
- package/skinny/registerSlider.cjs.js.map +1 -1
- package/skinny/registerSlider.d.ts +3 -20
- package/skinny/registerSlider.esm.js +303 -11
- package/skinny/registerSlider.esm.js.map +1 -1
- package/skinny/registerSliderOutput.cjs.js +1 -1
- package/skinny/registerSliderOutput.cjs.js.map +1 -1
- package/skinny/registerSliderOutput.d.ts +1 -1
- package/skinny/registerSliderOutput.esm.js +1 -1
- package/skinny/registerSliderOutput.esm.js.map +1 -1
- package/skinny/registerSliderThumb.cjs.js +1 -1
- package/skinny/registerSliderThumb.cjs.js.map +1 -1
- package/skinny/registerSliderThumb.d.ts +2 -2
- package/skinny/registerSliderThumb.esm.js +1 -1
- package/skinny/registerSliderThumb.esm.js.map +1 -1
- package/skinny/registerSliderTrack.cjs.js +188 -16
- package/skinny/registerSliderTrack.cjs.js.map +1 -1
- package/skinny/registerSliderTrack.d.ts +3 -1
- package/skinny/registerSliderTrack.esm.js +184 -13
- package/skinny/registerSliderTrack.esm.js.map +1 -1
- package/skinny/registerSlider-cd08b960.cjs.js +0 -473
- package/skinny/registerSlider-cd08b960.cjs.js.map +0 -1
- package/skinny/registerSlider-df0fdf82.esm.js +0 -460
- package/skinny/registerSlider-df0fdf82.esm.js.map +0 -1
|
@@ -1,23 +1,195 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
require('react');
|
|
4
|
-
require('react-aria');
|
|
5
|
-
require('react-aria-components');
|
|
6
|
-
require('react-keyed-flatten-children');
|
|
7
|
-
require('./contexts-3a98471a.cjs.js');
|
|
8
|
-
require('./
|
|
9
|
-
require('./
|
|
10
|
-
var registerSliderTrack = require('./registerSlider-cd08b960.cjs.js');
|
|
11
|
-
require('./registerSliderThumb.cjs.js');
|
|
12
|
-
require('./utils-d3708034.cjs.js');
|
|
13
|
-
require('./common-f51484c1.cjs.js');
|
|
14
|
-
require('./registerLabel.cjs.js');
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var reactAria = require('react-aria');
|
|
5
|
+
var reactAriaComponents = require('react-aria-components');
|
|
6
|
+
var flattenChildren = require('react-keyed-flatten-children');
|
|
7
|
+
var contexts = require('./contexts-3a98471a.cjs.js');
|
|
8
|
+
var interactionVariantUtils = require('./interaction-variant-utils-36f1b397.cjs.js');
|
|
9
|
+
var utils = require('./utils-d3708034.cjs.js');
|
|
15
10
|
require('@plasmicapp/host/registerComponent');
|
|
16
|
-
require('./registerSliderOutput.cjs.js');
|
|
17
11
|
|
|
12
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
13
|
|
|
14
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
15
|
+
var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
var __defProp = Object.defineProperty;
|
|
18
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
19
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
20
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
21
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
22
|
+
var __spreadValues = (a, b) => {
|
|
23
|
+
for (var prop in b || (b = {}))
|
|
24
|
+
if (__hasOwnProp.call(b, prop))
|
|
25
|
+
__defNormalProp(a, prop, b[prop]);
|
|
26
|
+
if (__getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
28
|
+
if (__propIsEnum.call(b, prop))
|
|
29
|
+
__defNormalProp(a, prop, b[prop]);
|
|
30
|
+
}
|
|
31
|
+
return a;
|
|
32
|
+
};
|
|
33
|
+
var __objRest = (source, exclude) => {
|
|
34
|
+
var target = {};
|
|
35
|
+
for (var prop in source)
|
|
36
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
37
|
+
target[prop] = source[prop];
|
|
38
|
+
if (source != null && __getOwnPropSymbols)
|
|
39
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
40
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
41
|
+
target[prop] = source[prop];
|
|
42
|
+
}
|
|
43
|
+
return target;
|
|
44
|
+
};
|
|
45
|
+
const SLIDER_TRACK_INTERACTION_VARIANTS = ["hovered"];
|
|
46
|
+
const { interactionVariants, withObservedValues } = interactionVariantUtils.pickAriaComponentVariants(
|
|
47
|
+
SLIDER_TRACK_INTERACTION_VARIANTS
|
|
48
|
+
);
|
|
49
|
+
function findMinMaxIndices(values) {
|
|
50
|
+
let minIndex = 0;
|
|
51
|
+
let maxIndex = 0;
|
|
52
|
+
if (Array.isArray(values)) {
|
|
53
|
+
for (let i = 1; i < values.length; i++) {
|
|
54
|
+
if (values[i] < values[minIndex]) {
|
|
55
|
+
minIndex = i;
|
|
56
|
+
}
|
|
57
|
+
if (values[i] > values[maxIndex]) {
|
|
58
|
+
maxIndex = i;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return { minIndex, maxIndex };
|
|
63
|
+
}
|
|
64
|
+
function isMultiValueGuard(value) {
|
|
65
|
+
return Array.isArray(value) && value.length > 1;
|
|
66
|
+
}
|
|
67
|
+
function BaseSliderTrack(props) {
|
|
68
|
+
const context = React__default.default.useContext(contexts.PlasmicSliderContext);
|
|
69
|
+
const isStandalone = !context;
|
|
70
|
+
const mergedProps = reactAria.mergeProps(context, props);
|
|
71
|
+
const _a = mergedProps, { children, progressBar, updateInteractionVariant } = _a, rest = __objRest(_a, ["children", "progressBar", "updateInteractionVariant"]);
|
|
72
|
+
const isMultiValue = isMultiValueGuard(mergedProps.value);
|
|
73
|
+
const { minIndex, maxIndex } = React.useMemo(() => {
|
|
74
|
+
if (!context || !Array.isArray(context.value) || context.value.length <= 1) {
|
|
75
|
+
return { minIndex: 0, maxIndex: 0 };
|
|
76
|
+
}
|
|
77
|
+
return findMinMaxIndices(context.value);
|
|
78
|
+
}, [context == null ? void 0 : context.value]);
|
|
79
|
+
const thumbs = React.useMemo(() => {
|
|
80
|
+
const thumbNodes = flattenChildren__default.default(children);
|
|
81
|
+
if (!thumbNodes || thumbNodes.length === 0 || !utils.isDefined(context == null ? void 0 : context.value)) {
|
|
82
|
+
return [];
|
|
83
|
+
}
|
|
84
|
+
const values = utils.isDefined(context) ? Array.isArray(context.value) ? context.value : [context.value] : [];
|
|
85
|
+
const lastThumb = thumbNodes[thumbNodes.length - 1];
|
|
86
|
+
return values.map((v, i) => {
|
|
87
|
+
const currentThumb = thumbNodes[i];
|
|
88
|
+
if (i >= thumbNodes.length) {
|
|
89
|
+
if (React__default.default.isValidElement(lastThumb)) {
|
|
90
|
+
return React__default.default.cloneElement(lastThumb, {
|
|
91
|
+
index: i
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
if (!React__default.default.isValidElement(currentThumb)) {
|
|
96
|
+
return null;
|
|
97
|
+
}
|
|
98
|
+
return React__default.default.cloneElement(currentThumb, {
|
|
99
|
+
index: i
|
|
100
|
+
});
|
|
101
|
+
});
|
|
102
|
+
}, [children, context == null ? void 0 : context.value]);
|
|
103
|
+
const track = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderTrack, __spreadValues({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, withObservedValues(
|
|
104
|
+
/* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
|
|
105
|
+
"div",
|
|
106
|
+
{
|
|
107
|
+
style: {
|
|
108
|
+
width: `${(!isMultiValue ? state.getThumbPercent(minIndex) : state.getThumbPercent(maxIndex) - state.getThumbPercent(minIndex)) * 100}%`,
|
|
109
|
+
height: "100%",
|
|
110
|
+
position: "absolute",
|
|
111
|
+
top: 0,
|
|
112
|
+
left: !isMultiValue ? 0 : state.getThumbPercent(minIndex) * 100 + "%"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
progressBar
|
|
116
|
+
), thumbs),
|
|
117
|
+
{
|
|
118
|
+
hovered: isHovered
|
|
119
|
+
},
|
|
120
|
+
updateInteractionVariant
|
|
121
|
+
)));
|
|
122
|
+
if (isStandalone) {
|
|
123
|
+
return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, { style: { height: "100%", width: "100%" } }, track);
|
|
124
|
+
}
|
|
125
|
+
return track;
|
|
126
|
+
}
|
|
127
|
+
const SLIDER_TRACK_COMPONENT_NAME = utils.makeComponentName("sliderTrack");
|
|
128
|
+
function registerSliderTrack(sliderThumbMeta, loader, overrides) {
|
|
129
|
+
return utils.registerComponentHelper(
|
|
130
|
+
loader,
|
|
131
|
+
BaseSliderTrack,
|
|
132
|
+
{
|
|
133
|
+
name: SLIDER_TRACK_COMPONENT_NAME,
|
|
134
|
+
displayName: "Aria Slider Track",
|
|
135
|
+
importPath: "@plasmicpkgs/react-aria/skinny/registerSliderTrack",
|
|
136
|
+
importName: "BaseSliderTrack",
|
|
137
|
+
interactionVariants,
|
|
138
|
+
defaultStyles: {
|
|
139
|
+
width: "stretch",
|
|
140
|
+
backgroundColor: "#aaa",
|
|
141
|
+
position: "relative",
|
|
142
|
+
height: "10px",
|
|
143
|
+
padding: 0
|
|
144
|
+
},
|
|
145
|
+
props: {
|
|
146
|
+
children: {
|
|
147
|
+
type: "slot",
|
|
148
|
+
displayName: "Thumbs",
|
|
149
|
+
description: "The thumbs of the slider. For range slider, you can add more than one thumb.",
|
|
150
|
+
allowedComponents: [sliderThumbMeta.name],
|
|
151
|
+
defaultValue: [
|
|
152
|
+
{
|
|
153
|
+
type: "component",
|
|
154
|
+
name: sliderThumbMeta.name
|
|
155
|
+
}
|
|
156
|
+
]
|
|
157
|
+
},
|
|
158
|
+
progressBar: {
|
|
159
|
+
type: "slot",
|
|
160
|
+
displayName: "Progress Bar",
|
|
161
|
+
defaultValue: [
|
|
162
|
+
{
|
|
163
|
+
type: "box",
|
|
164
|
+
styles: {
|
|
165
|
+
height: "100%",
|
|
166
|
+
width: "100%",
|
|
167
|
+
backgroundColor: "#ffa6a6",
|
|
168
|
+
padding: 0
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
onHoverStart: {
|
|
174
|
+
type: "eventHandler",
|
|
175
|
+
argTypes: [{ name: "event", type: "object" }]
|
|
176
|
+
},
|
|
177
|
+
onHoverEnd: {
|
|
178
|
+
type: "eventHandler",
|
|
179
|
+
argTypes: [{ name: "event", type: "object" }]
|
|
180
|
+
},
|
|
181
|
+
onHoverChange: {
|
|
182
|
+
type: "eventHandler",
|
|
183
|
+
argTypes: [{ name: "isHovering", type: "boolean" }]
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
trapsFocus: true
|
|
187
|
+
},
|
|
188
|
+
overrides
|
|
189
|
+
);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
exports.BaseSliderTrack = BaseSliderTrack;
|
|
193
|
+
exports.SLIDER_TRACK_COMPONENT_NAME = SLIDER_TRACK_COMPONENT_NAME;
|
|
194
|
+
exports.registerSliderTrack = registerSliderTrack;
|
|
23
195
|
//# sourceMappingURL=registerSliderTrack.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerSliderTrack.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"registerSliderTrack.cjs.js","sources":["../src/registerSliderTrack.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React, { useMemo } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport { Slider, SliderThumbProps, SliderTrack } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport {\n UpdateInteractionVariant,\n pickAriaComponentVariants,\n} from \"./interaction-variant-utils\";\nimport { BaseSliderThumbProps } from \"./registerSliderThumb\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n isDefined,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\n\nconst SLIDER_TRACK_INTERACTION_VARIANTS = [\"hovered\" as const];\n\nconst { interactionVariants, withObservedValues } = pickAriaComponentVariants(\n SLIDER_TRACK_INTERACTION_VARIANTS\n);\n\nexport interface BaseSliderTrackProps\n extends React.ComponentProps<typeof SliderTrack> {\n progressBar?: React.ReactNode;\n // Optional callback to update the interaction variant state\n // as it's only provided if the component is the root of a Studio component\n updateInteractionVariant?: UpdateInteractionVariant<\n typeof SLIDER_TRACK_INTERACTION_VARIANTS\n >;\n children?: React.ReactElement<HTMLElement>;\n}\n\n/**\n * Finds the index of the minimum and maximum values in the slider\n * @param values\n * @returns\n */\nfunction findMinMaxIndices(values: number[]): {\n minIndex: number;\n maxIndex: number;\n} {\n let minIndex = 0;\n let maxIndex = 0;\n\n if (Array.isArray(values)) {\n for (let i = 1; i < values.length; i++) {\n if (values[i] < values[minIndex]) {\n minIndex = i;\n }\n if (values[i] > values[maxIndex]) {\n maxIndex = i;\n }\n }\n }\n\n return { minIndex, maxIndex };\n}\n\nfunction isMultiValueGuard(value?: number | number[]): value is number[] {\n return Array.isArray(value) && value.length > 1;\n}\n\nexport function BaseSliderTrack(props: BaseSliderTrackProps) {\n const context = React.useContext(PlasmicSliderContext);\n const isStandalone = !context;\n const mergedProps = mergeProps(context, props);\n const { children, progressBar, updateInteractionVariant, ...rest } =\n mergedProps;\n\n const isMultiValue = isMultiValueGuard(mergedProps.value);\n\n const { minIndex, maxIndex } = useMemo(() => {\n if (\n !context ||\n !Array.isArray(context.value) ||\n context.value.length <= 1\n ) {\n return { minIndex: 0, maxIndex: 0 };\n }\n return findMinMaxIndices(context.value);\n }, [context?.value]);\n\n /**\n * Generates the thumb components based on the number of thumbs\n * and the number of values in the slider\n *\n * If the number of thumbs is less than the number of values, then\n * the last thumb is repeated for the remaining values\n *\n * If the number of thumbs is greater than the number of values, then\n * the additional thumbs are omitted\n */\n const thumbs = useMemo(() => {\n const thumbNodes = flattenChildren(children);\n if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context?.value)) {\n return [];\n }\n\n const values = isDefined(context)\n ? Array.isArray(context.value)\n ? context.value\n : [context.value]\n : [];\n\n // Last thumb be re-used if the number of thumbs is less than the number of values\n const lastThumb = thumbNodes[thumbNodes.length - 1];\n\n return values.map((v, i) => {\n const currentThumb = thumbNodes[i];\n // Re-use the last thumb if there are no more thumbs left ( this is for ease of use - the user can just add one more value to the initial-values array and see another thumb right away, without having to explicitly add a new thumb component )\n if (i >= thumbNodes.length) {\n if (React.isValidElement(lastThumb)) {\n return React.cloneElement(lastThumb, {\n index: i,\n } as SliderThumbProps);\n }\n }\n if (!React.isValidElement(currentThumb)) {\n return null;\n }\n return React.cloneElement(currentThumb, {\n index: i,\n } as SliderThumbProps);\n });\n }, [children, context?.value]);\n\n const track = (\n <SliderTrack style={{ position: \"relative\" }} {...rest}>\n {({ state, isHovered }) => (\n <>\n {withObservedValues(\n <>\n <div\n style={{\n width: `${\n (!isMultiValue\n ? state.getThumbPercent(minIndex)\n : state.getThumbPercent(maxIndex) -\n state.getThumbPercent(minIndex)) * 100\n }%`,\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: !isMultiValue\n ? 0\n : state.getThumbPercent(minIndex) * 100 + \"%\",\n }}\n >\n {progressBar}\n </div>\n {thumbs}\n </>,\n {\n hovered: isHovered,\n },\n updateInteractionVariant\n )}\n </>\n )}\n </SliderTrack>\n );\n\n if (isStandalone) {\n return <Slider style={{ height: \"100%\", width: \"100%\" }}>{track}</Slider>;\n }\n\n return track;\n}\n\nexport const SLIDER_TRACK_COMPONENT_NAME = makeComponentName(\"sliderTrack\");\n\nexport function registerSliderTrack(\n sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>,\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>\n) {\n return registerComponentHelper(\n loader,\n BaseSliderTrack,\n {\n name: SLIDER_TRACK_COMPONENT_NAME,\n displayName: \"Aria Slider Track\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderTrack\",\n importName: \"BaseSliderTrack\",\n interactionVariants,\n defaultStyles: {\n width: \"stretch\",\n backgroundColor: \"#aaa\",\n position: \"relative\",\n height: \"10px\",\n padding: 0,\n },\n props: {\n children: {\n type: \"slot\",\n displayName: \"Thumbs\",\n description:\n \"The thumbs of the slider. For range slider, you can add more than one thumb.\",\n allowedComponents: [sliderThumbMeta.name],\n defaultValue: [\n {\n type: \"component\",\n name: sliderThumbMeta.name,\n },\n ],\n },\n progressBar: {\n type: \"slot\",\n displayName: \"Progress Bar\",\n defaultValue: [\n {\n type: \"box\",\n styles: {\n height: \"100%\",\n width: \"100%\",\n backgroundColor: \"#ffa6a6\",\n padding: 0,\n },\n },\n ],\n },\n onHoverStart: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverEnd: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isHovering\", type: \"boolean\" }],\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","PlasmicSliderContext","mergeProps","useMemo","flattenChildren","isDefined","SliderTrack","Slider","makeComponentName","registerComponentHelper"],"mappings":"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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import { CodeComponentMeta } from "@plasmicapp/host";
|
|
1
2
|
import React from "react";
|
|
2
3
|
import { SliderTrack } from "react-aria-components";
|
|
3
4
|
import { UpdateInteractionVariant } from "./interaction-variant-utils";
|
|
5
|
+
import { BaseSliderThumbProps } from "./registerSliderThumb";
|
|
4
6
|
import { CodeComponentMetaOverrides, Registerable } from "./utils";
|
|
5
7
|
declare const SLIDER_TRACK_INTERACTION_VARIANTS: "hovered"[];
|
|
6
8
|
export interface BaseSliderTrackProps extends React.ComponentProps<typeof SliderTrack> {
|
|
@@ -10,5 +12,5 @@ export interface BaseSliderTrackProps extends React.ComponentProps<typeof Slider
|
|
|
10
12
|
}
|
|
11
13
|
export declare function BaseSliderTrack(props: BaseSliderTrackProps): React.JSX.Element;
|
|
12
14
|
export declare const SLIDER_TRACK_COMPONENT_NAME: string;
|
|
13
|
-
export declare function registerSliderTrack(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>):
|
|
15
|
+
export declare function registerSliderTrack(sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>, loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>): CodeComponentMeta<BaseSliderTrackProps>;
|
|
14
16
|
export {};
|
|
@@ -1,15 +1,186 @@
|
|
|
1
|
-
import 'react';
|
|
2
|
-
import 'react-aria';
|
|
3
|
-
import 'react-aria-components';
|
|
4
|
-
import 'react-keyed-flatten-children';
|
|
5
|
-
import './contexts-87c261f6.esm.js';
|
|
6
|
-
import './
|
|
7
|
-
import './
|
|
8
|
-
export { B as BaseSliderTrack, S as SLIDER_TRACK_COMPONENT_NAME, r as registerSliderTrack } from './registerSlider-df0fdf82.esm.js';
|
|
9
|
-
import './registerSliderThumb.esm.js';
|
|
10
|
-
import './utils-a1785802.esm.js';
|
|
11
|
-
import './common-96be13c3.esm.js';
|
|
12
|
-
import './registerLabel.esm.js';
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { mergeProps } from 'react-aria';
|
|
3
|
+
import { SliderTrack, Slider } from 'react-aria-components';
|
|
4
|
+
import flattenChildren from 'react-keyed-flatten-children';
|
|
5
|
+
import { h as PlasmicSliderContext } from './contexts-87c261f6.esm.js';
|
|
6
|
+
import { p as pickAriaComponentVariants } from './interaction-variant-utils-abd0c319.esm.js';
|
|
7
|
+
import { i as isDefined, a as makeComponentName, r as registerComponentHelper } from './utils-a1785802.esm.js';
|
|
13
8
|
import '@plasmicapp/host/registerComponent';
|
|
14
|
-
|
|
9
|
+
|
|
10
|
+
var __defProp = Object.defineProperty;
|
|
11
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
12
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
13
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
14
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
15
|
+
var __spreadValues = (a, b) => {
|
|
16
|
+
for (var prop in b || (b = {}))
|
|
17
|
+
if (__hasOwnProp.call(b, prop))
|
|
18
|
+
__defNormalProp(a, prop, b[prop]);
|
|
19
|
+
if (__getOwnPropSymbols)
|
|
20
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
21
|
+
if (__propIsEnum.call(b, prop))
|
|
22
|
+
__defNormalProp(a, prop, b[prop]);
|
|
23
|
+
}
|
|
24
|
+
return a;
|
|
25
|
+
};
|
|
26
|
+
var __objRest = (source, exclude) => {
|
|
27
|
+
var target = {};
|
|
28
|
+
for (var prop in source)
|
|
29
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
30
|
+
target[prop] = source[prop];
|
|
31
|
+
if (source != null && __getOwnPropSymbols)
|
|
32
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
33
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
34
|
+
target[prop] = source[prop];
|
|
35
|
+
}
|
|
36
|
+
return target;
|
|
37
|
+
};
|
|
38
|
+
const SLIDER_TRACK_INTERACTION_VARIANTS = ["hovered"];
|
|
39
|
+
const { interactionVariants, withObservedValues } = pickAriaComponentVariants(
|
|
40
|
+
SLIDER_TRACK_INTERACTION_VARIANTS
|
|
41
|
+
);
|
|
42
|
+
function findMinMaxIndices(values) {
|
|
43
|
+
let minIndex = 0;
|
|
44
|
+
let maxIndex = 0;
|
|
45
|
+
if (Array.isArray(values)) {
|
|
46
|
+
for (let i = 1; i < values.length; i++) {
|
|
47
|
+
if (values[i] < values[minIndex]) {
|
|
48
|
+
minIndex = i;
|
|
49
|
+
}
|
|
50
|
+
if (values[i] > values[maxIndex]) {
|
|
51
|
+
maxIndex = i;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
return { minIndex, maxIndex };
|
|
56
|
+
}
|
|
57
|
+
function isMultiValueGuard(value) {
|
|
58
|
+
return Array.isArray(value) && value.length > 1;
|
|
59
|
+
}
|
|
60
|
+
function BaseSliderTrack(props) {
|
|
61
|
+
const context = React.useContext(PlasmicSliderContext);
|
|
62
|
+
const isStandalone = !context;
|
|
63
|
+
const mergedProps = mergeProps(context, props);
|
|
64
|
+
const _a = mergedProps, { children, progressBar, updateInteractionVariant } = _a, rest = __objRest(_a, ["children", "progressBar", "updateInteractionVariant"]);
|
|
65
|
+
const isMultiValue = isMultiValueGuard(mergedProps.value);
|
|
66
|
+
const { minIndex, maxIndex } = useMemo(() => {
|
|
67
|
+
if (!context || !Array.isArray(context.value) || context.value.length <= 1) {
|
|
68
|
+
return { minIndex: 0, maxIndex: 0 };
|
|
69
|
+
}
|
|
70
|
+
return findMinMaxIndices(context.value);
|
|
71
|
+
}, [context == null ? void 0 : context.value]);
|
|
72
|
+
const thumbs = useMemo(() => {
|
|
73
|
+
const thumbNodes = flattenChildren(children);
|
|
74
|
+
if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context == null ? void 0 : context.value)) {
|
|
75
|
+
return [];
|
|
76
|
+
}
|
|
77
|
+
const values = isDefined(context) ? Array.isArray(context.value) ? context.value : [context.value] : [];
|
|
78
|
+
const lastThumb = thumbNodes[thumbNodes.length - 1];
|
|
79
|
+
return values.map((v, i) => {
|
|
80
|
+
const currentThumb = thumbNodes[i];
|
|
81
|
+
if (i >= thumbNodes.length) {
|
|
82
|
+
if (React.isValidElement(lastThumb)) {
|
|
83
|
+
return React.cloneElement(lastThumb, {
|
|
84
|
+
index: i
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
if (!React.isValidElement(currentThumb)) {
|
|
89
|
+
return null;
|
|
90
|
+
}
|
|
91
|
+
return React.cloneElement(currentThumb, {
|
|
92
|
+
index: i
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
}, [children, context == null ? void 0 : context.value]);
|
|
96
|
+
const track = /* @__PURE__ */ React.createElement(SliderTrack, __spreadValues({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React.createElement(React.Fragment, null, withObservedValues(
|
|
97
|
+
/* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
98
|
+
"div",
|
|
99
|
+
{
|
|
100
|
+
style: {
|
|
101
|
+
width: `${(!isMultiValue ? state.getThumbPercent(minIndex) : state.getThumbPercent(maxIndex) - state.getThumbPercent(minIndex)) * 100}%`,
|
|
102
|
+
height: "100%",
|
|
103
|
+
position: "absolute",
|
|
104
|
+
top: 0,
|
|
105
|
+
left: !isMultiValue ? 0 : state.getThumbPercent(minIndex) * 100 + "%"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
progressBar
|
|
109
|
+
), thumbs),
|
|
110
|
+
{
|
|
111
|
+
hovered: isHovered
|
|
112
|
+
},
|
|
113
|
+
updateInteractionVariant
|
|
114
|
+
)));
|
|
115
|
+
if (isStandalone) {
|
|
116
|
+
return /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track);
|
|
117
|
+
}
|
|
118
|
+
return track;
|
|
119
|
+
}
|
|
120
|
+
const SLIDER_TRACK_COMPONENT_NAME = makeComponentName("sliderTrack");
|
|
121
|
+
function registerSliderTrack(sliderThumbMeta, loader, overrides) {
|
|
122
|
+
return registerComponentHelper(
|
|
123
|
+
loader,
|
|
124
|
+
BaseSliderTrack,
|
|
125
|
+
{
|
|
126
|
+
name: SLIDER_TRACK_COMPONENT_NAME,
|
|
127
|
+
displayName: "Aria Slider Track",
|
|
128
|
+
importPath: "@plasmicpkgs/react-aria/skinny/registerSliderTrack",
|
|
129
|
+
importName: "BaseSliderTrack",
|
|
130
|
+
interactionVariants,
|
|
131
|
+
defaultStyles: {
|
|
132
|
+
width: "stretch",
|
|
133
|
+
backgroundColor: "#aaa",
|
|
134
|
+
position: "relative",
|
|
135
|
+
height: "10px",
|
|
136
|
+
padding: 0
|
|
137
|
+
},
|
|
138
|
+
props: {
|
|
139
|
+
children: {
|
|
140
|
+
type: "slot",
|
|
141
|
+
displayName: "Thumbs",
|
|
142
|
+
description: "The thumbs of the slider. For range slider, you can add more than one thumb.",
|
|
143
|
+
allowedComponents: [sliderThumbMeta.name],
|
|
144
|
+
defaultValue: [
|
|
145
|
+
{
|
|
146
|
+
type: "component",
|
|
147
|
+
name: sliderThumbMeta.name
|
|
148
|
+
}
|
|
149
|
+
]
|
|
150
|
+
},
|
|
151
|
+
progressBar: {
|
|
152
|
+
type: "slot",
|
|
153
|
+
displayName: "Progress Bar",
|
|
154
|
+
defaultValue: [
|
|
155
|
+
{
|
|
156
|
+
type: "box",
|
|
157
|
+
styles: {
|
|
158
|
+
height: "100%",
|
|
159
|
+
width: "100%",
|
|
160
|
+
backgroundColor: "#ffa6a6",
|
|
161
|
+
padding: 0
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
]
|
|
165
|
+
},
|
|
166
|
+
onHoverStart: {
|
|
167
|
+
type: "eventHandler",
|
|
168
|
+
argTypes: [{ name: "event", type: "object" }]
|
|
169
|
+
},
|
|
170
|
+
onHoverEnd: {
|
|
171
|
+
type: "eventHandler",
|
|
172
|
+
argTypes: [{ name: "event", type: "object" }]
|
|
173
|
+
},
|
|
174
|
+
onHoverChange: {
|
|
175
|
+
type: "eventHandler",
|
|
176
|
+
argTypes: [{ name: "isHovering", type: "boolean" }]
|
|
177
|
+
}
|
|
178
|
+
},
|
|
179
|
+
trapsFocus: true
|
|
180
|
+
},
|
|
181
|
+
overrides
|
|
182
|
+
);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
export { BaseSliderTrack, SLIDER_TRACK_COMPONENT_NAME, registerSliderTrack };
|
|
15
186
|
//# sourceMappingURL=registerSliderTrack.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerSliderTrack.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"registerSliderTrack.esm.js","sources":["../src/registerSliderTrack.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React, { useMemo } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport { Slider, SliderThumbProps, SliderTrack } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport {\n UpdateInteractionVariant,\n pickAriaComponentVariants,\n} from \"./interaction-variant-utils\";\nimport { BaseSliderThumbProps } from \"./registerSliderThumb\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n isDefined,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\n\nconst SLIDER_TRACK_INTERACTION_VARIANTS = [\"hovered\" as const];\n\nconst { interactionVariants, withObservedValues } = pickAriaComponentVariants(\n SLIDER_TRACK_INTERACTION_VARIANTS\n);\n\nexport interface BaseSliderTrackProps\n extends React.ComponentProps<typeof SliderTrack> {\n progressBar?: React.ReactNode;\n // Optional callback to update the interaction variant state\n // as it's only provided if the component is the root of a Studio component\n updateInteractionVariant?: UpdateInteractionVariant<\n typeof SLIDER_TRACK_INTERACTION_VARIANTS\n >;\n children?: React.ReactElement<HTMLElement>;\n}\n\n/**\n * Finds the index of the minimum and maximum values in the slider\n * @param values\n * @returns\n */\nfunction findMinMaxIndices(values: number[]): {\n minIndex: number;\n maxIndex: number;\n} {\n let minIndex = 0;\n let maxIndex = 0;\n\n if (Array.isArray(values)) {\n for (let i = 1; i < values.length; i++) {\n if (values[i] < values[minIndex]) {\n minIndex = i;\n }\n if (values[i] > values[maxIndex]) {\n maxIndex = i;\n }\n }\n }\n\n return { minIndex, maxIndex };\n}\n\nfunction isMultiValueGuard(value?: number | number[]): value is number[] {\n return Array.isArray(value) && value.length > 1;\n}\n\nexport function BaseSliderTrack(props: BaseSliderTrackProps) {\n const context = React.useContext(PlasmicSliderContext);\n const isStandalone = !context;\n const mergedProps = mergeProps(context, props);\n const { children, progressBar, updateInteractionVariant, ...rest } =\n mergedProps;\n\n const isMultiValue = isMultiValueGuard(mergedProps.value);\n\n const { minIndex, maxIndex } = useMemo(() => {\n if (\n !context ||\n !Array.isArray(context.value) ||\n context.value.length <= 1\n ) {\n return { minIndex: 0, maxIndex: 0 };\n }\n return findMinMaxIndices(context.value);\n }, [context?.value]);\n\n /**\n * Generates the thumb components based on the number of thumbs\n * and the number of values in the slider\n *\n * If the number of thumbs is less than the number of values, then\n * the last thumb is repeated for the remaining values\n *\n * If the number of thumbs is greater than the number of values, then\n * the additional thumbs are omitted\n */\n const thumbs = useMemo(() => {\n const thumbNodes = flattenChildren(children);\n if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context?.value)) {\n return [];\n }\n\n const values = isDefined(context)\n ? Array.isArray(context.value)\n ? context.value\n : [context.value]\n : [];\n\n // Last thumb be re-used if the number of thumbs is less than the number of values\n const lastThumb = thumbNodes[thumbNodes.length - 1];\n\n return values.map((v, i) => {\n const currentThumb = thumbNodes[i];\n // Re-use the last thumb if there are no more thumbs left ( this is for ease of use - the user can just add one more value to the initial-values array and see another thumb right away, without having to explicitly add a new thumb component )\n if (i >= thumbNodes.length) {\n if (React.isValidElement(lastThumb)) {\n return React.cloneElement(lastThumb, {\n index: i,\n } as SliderThumbProps);\n }\n }\n if (!React.isValidElement(currentThumb)) {\n return null;\n }\n return React.cloneElement(currentThumb, {\n index: i,\n } as SliderThumbProps);\n });\n }, [children, context?.value]);\n\n const track = (\n <SliderTrack style={{ position: \"relative\" }} {...rest}>\n {({ state, isHovered }) => (\n <>\n {withObservedValues(\n <>\n <div\n style={{\n width: `${\n (!isMultiValue\n ? state.getThumbPercent(minIndex)\n : state.getThumbPercent(maxIndex) -\n state.getThumbPercent(minIndex)) * 100\n }%`,\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: !isMultiValue\n ? 0\n : state.getThumbPercent(minIndex) * 100 + \"%\",\n }}\n >\n {progressBar}\n </div>\n {thumbs}\n </>,\n {\n hovered: isHovered,\n },\n updateInteractionVariant\n )}\n </>\n )}\n </SliderTrack>\n );\n\n if (isStandalone) {\n return <Slider style={{ height: \"100%\", width: \"100%\" }}>{track}</Slider>;\n }\n\n return track;\n}\n\nexport const SLIDER_TRACK_COMPONENT_NAME = makeComponentName(\"sliderTrack\");\n\nexport function registerSliderTrack(\n sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>,\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>\n) {\n return registerComponentHelper(\n loader,\n BaseSliderTrack,\n {\n name: SLIDER_TRACK_COMPONENT_NAME,\n displayName: \"Aria Slider Track\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderTrack\",\n importName: \"BaseSliderTrack\",\n interactionVariants,\n defaultStyles: {\n width: \"stretch\",\n backgroundColor: \"#aaa\",\n position: \"relative\",\n height: \"10px\",\n padding: 0,\n },\n props: {\n children: {\n type: \"slot\",\n displayName: \"Thumbs\",\n description:\n \"The thumbs of the slider. For range slider, you can add more than one thumb.\",\n allowedComponents: [sliderThumbMeta.name],\n defaultValue: [\n {\n type: \"component\",\n name: sliderThumbMeta.name,\n },\n ],\n },\n progressBar: {\n type: \"slot\",\n displayName: \"Progress Bar\",\n defaultValue: [\n {\n type: \"box\",\n styles: {\n height: \"100%\",\n width: \"100%\",\n backgroundColor: \"#ffa6a6\",\n padding: 0,\n },\n },\n ],\n },\n onHoverStart: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverEnd: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isHovering\", type: \"boolean\" }],\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|