etudes 2.5.0 → 2.7.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 +16 -7
- package/lib/Accordion.js +36 -11
- package/lib/Accordion.js.map +1 -1
- package/lib/BurgerButton.d.ts +2 -2
- package/lib/BurgerButton.js +1 -1
- package/lib/BurgerButton.js.map +1 -1
- package/lib/Conditional.d.ts +1 -1
- package/lib/Conditional.js.map +1 -1
- package/lib/DebugConsole.d.ts +1 -1
- package/lib/DebugConsole.js.map +1 -1
- package/lib/Dial.d.ts +1 -1
- package/lib/Dial.js.map +1 -1
- package/lib/Dropdown.d.ts +13 -4
- package/lib/Dropdown.js +36 -15
- package/lib/Dropdown.js.map +1 -1
- package/lib/Each.d.ts +1 -1
- package/lib/Each.js.map +1 -1
- package/lib/ExtractChild.d.ts +1 -1
- package/lib/ExtractChild.js.map +1 -1
- package/lib/ExtractChildren.d.ts +1 -1
- package/lib/ExtractChildren.js.map +1 -1
- package/lib/FlatSVG.d.ts +1 -1
- package/lib/FlatSVG.js.map +1 -1
- package/lib/List.d.ts +1 -1
- package/lib/List.js.map +1 -1
- package/lib/MasonryGrid.d.ts +1 -1
- package/lib/MasonryGrid.js +10 -10
- package/lib/MasonryGrid.js.map +1 -1
- package/lib/Panorama.d.ts +15 -15
- package/lib/Panorama.js.map +1 -1
- package/lib/PanoramaSlider.d.ts +8 -8
- package/lib/PanoramaSlider.js +6 -6
- package/lib/PanoramaSlider.js.map +1 -1
- package/lib/RangeSlider.d.ts +1 -1
- package/lib/RangeSlider.js.map +1 -1
- package/lib/Repeat.d.ts +1 -1
- package/lib/Repeat.js.map +1 -1
- package/lib/RotatingGallery.d.ts +5 -5
- package/lib/RotatingGallery.js +2 -2
- package/lib/RotatingGallery.js.map +1 -1
- package/lib/SelectableButton.d.ts +1 -1
- package/lib/SelectableButton.js.map +1 -1
- package/lib/Slider.d.ts +11 -11
- package/lib/Slider.js +4 -4
- package/lib/Slider.js.map +1 -1
- package/lib/StepwiseSlider.d.ts +18 -18
- package/lib/StepwiseSlider.js +9 -9
- package/lib/StepwiseSlider.js.map +1 -1
- package/lib/SwipeContainer.d.ts +1 -1
- package/lib/SwipeContainer.js.map +1 -1
- package/lib/TextField.d.ts +1 -1
- package/lib/TextField.js.map +1 -1
- package/lib/Video.d.ts +1 -1
- package/lib/Video.js.map +1 -1
- package/lib/WithTooltip.d.ts +1 -1
- package/lib/WithTooltip.js.map +1 -1
- package/lib/hooks/useDragEffect.d.ts +15 -15
- package/lib/hooks/useDragEffect.js +6 -6
- package/lib/hooks/useDragEffect.js.map +1 -1
- package/lib/hooks/useElementRect.d.ts +2 -2
- package/lib/hooks/useElementRect.js +1 -1
- package/lib/hooks/useElementRect.js.map +1 -1
- package/lib/hooks/useInterval.d.ts +5 -5
- package/lib/hooks/useInterval.js +4 -4
- package/lib/hooks/useInterval.js.map +1 -1
- package/lib/hooks/useLoadImageEffect.d.ts +6 -6
- package/lib/hooks/useLoadImageEffect.js +3 -3
- package/lib/hooks/useLoadImageEffect.js.map +1 -1
- package/lib/hooks/usePrevious.d.ts +1 -1
- package/lib/hooks/usePrevious.js +1 -1
- package/lib/hooks/usePrevious.js.map +1 -1
- package/lib/hooks/useResizeEffect.d.ts +5 -5
- package/lib/hooks/useResizeEffect.js +3 -3
- package/lib/hooks/useResizeEffect.js.map +1 -1
- package/lib/hooks/useSearchParamState.d.ts +7 -7
- package/lib/hooks/useSearchParamState.js +3 -3
- package/lib/hooks/useSearchParamState.js.map +1 -1
- package/lib/providers/ScrollPositionProvider.d.ts +1 -1
- package/lib/providers/ScrollPositionProvider.js.map +1 -1
- package/lib/utils/asComponentDict.d.ts +1 -1
- package/lib/utils/asComponentDict.js.map +1 -1
- package/lib/utils/asStyleDict.d.ts +1 -1
- package/lib/utils/asStyleDict.js.map +1 -1
- package/lib/utils/cloneStyledElement.d.ts +6 -6
- package/lib/utils/cloneStyledElement.js.map +1 -1
- package/lib/utils/styles.d.ts +1 -1
- package/lib/utils/styles.js.map +1 -1
- package/package.json +12 -12
package/lib/Accordion.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React, { ComponentType, HTMLAttributes, PropsWithChildren, ReactElement, Ref } from 'react';
|
|
2
|
-
import { ListItemProps } from './List';
|
|
1
|
+
import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
|
|
2
|
+
import { type ListItemProps } from './List';
|
|
3
3
|
type Orientation = 'horizontal' | 'vertical';
|
|
4
4
|
export type AccordionItemProps<T> = ListItemProps<T>;
|
|
5
|
-
export type
|
|
5
|
+
export type AccordionSectionData<T> = {
|
|
6
6
|
label: string;
|
|
7
7
|
items: T[];
|
|
8
8
|
};
|
|
@@ -10,7 +10,7 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildr
|
|
|
10
10
|
/**
|
|
11
11
|
* Data provided to each section.
|
|
12
12
|
*/
|
|
13
|
-
data:
|
|
13
|
+
data: AccordionSectionData<T>[];
|
|
14
14
|
/**
|
|
15
15
|
* Indicates if sections can be toggled, as in, once a section is expanded,
|
|
16
16
|
* it collapses when being selected again.
|
|
@@ -56,6 +56,10 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildr
|
|
|
56
56
|
* SVG markup to be put in the section header as the expand icon.
|
|
57
57
|
*/
|
|
58
58
|
expandIconSvg?: string;
|
|
59
|
+
/**
|
|
60
|
+
* SVG markup to be put in the section header as the collapse icon.
|
|
61
|
+
*/
|
|
62
|
+
collapseIconSvg?: string;
|
|
59
63
|
/**
|
|
60
64
|
* React component type to be used for generating items inside the component.
|
|
61
65
|
*/
|
|
@@ -73,7 +77,7 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
|
|
|
73
77
|
/**
|
|
74
78
|
* Data provided to each section.
|
|
75
79
|
*/
|
|
76
|
-
data:
|
|
80
|
+
data: AccordionSectionData<T>[];
|
|
77
81
|
/**
|
|
78
82
|
* Indicates if sections can be toggled, as in, once a section is expanded,
|
|
79
83
|
* it collapses when being selected again.
|
|
@@ -119,6 +123,10 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
|
|
|
119
123
|
* SVG markup to be put in the section header as the expand icon.
|
|
120
124
|
*/
|
|
121
125
|
expandIconSvg?: string | undefined;
|
|
126
|
+
/**
|
|
127
|
+
* SVG markup to be put in the section header as the collapse icon.
|
|
128
|
+
*/
|
|
129
|
+
collapseIconSvg?: string | undefined;
|
|
122
130
|
/**
|
|
123
131
|
* React component type to be used for generating items inside the component.
|
|
124
132
|
*/
|
|
@@ -137,5 +145,6 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
|
|
|
137
145
|
ref?: React.Ref<HTMLDivElement> | undefined;
|
|
138
146
|
}) => ReactElement;
|
|
139
147
|
export default _default;
|
|
140
|
-
export declare const AccordionHeader: ({ ...props }: HTMLAttributes<HTMLButtonElement>) => React.JSX.Element;
|
|
141
|
-
export declare const AccordionExpandIcon: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
|
|
148
|
+
export declare const AccordionHeader: ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => React.JSX.Element;
|
|
149
|
+
export declare const AccordionExpandIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
|
|
150
|
+
export declare const AccordionCollapseIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
|
package/lib/Accordion.js
CHANGED
|
@@ -73,7 +73,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
73
73
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
74
74
|
};
|
|
75
75
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
76
|
-
exports.AccordionExpandIcon = exports.AccordionHeader = void 0;
|
|
76
|
+
exports.AccordionCollapseIcon = exports.AccordionExpandIcon = exports.AccordionHeader = void 0;
|
|
77
77
|
var classnames_1 = __importDefault(require("classnames"));
|
|
78
78
|
var react_1 = __importStar(require("react"));
|
|
79
79
|
var Each_1 = __importDefault(require("./Each"));
|
|
@@ -85,7 +85,7 @@ 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
87
|
exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
88
|
-
var children = _a.children, className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, _c = _a.defaultExpandedSectionIndex, defaultExpandedSectionIndex = _c === void 0 ? -1 : _c, expandIconSvg = _a.expandIconSvg, _d = _a.isTogglable, isTogglable = _d === void 0 ? true : _d, itemComponentType = _a.itemComponentType, _e = _a.itemLength, itemLength = _e === void 0 ? 50 : _e, _f = _a.itemPadding, itemPadding = _f === void 0 ? 0 : _f, _g = _a.maxVisibleItems, maxVisibleItems = _g === void 0 ? -1 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.sectionPadding, sectionPadding = _j === void 0 ? 0 : _j, onItemIndexChange = _a.onItemIndexChange, onSectionIndexChange = _a.onSectionIndexChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "defaultExpandedSectionIndex", "expandIconSvg", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "onItemIndexChange", "onSectionIndexChange"]);
|
|
88
|
+
var children = _a.children, className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, _c = _a.defaultExpandedSectionIndex, defaultExpandedSectionIndex = _c === void 0 ? -1 : _c, expandIconSvg = _a.expandIconSvg, collapseIconSvg = _a.collapseIconSvg, _d = _a.isTogglable, isTogglable = _d === void 0 ? true : _d, itemComponentType = _a.itemComponentType, _e = _a.itemLength, itemLength = _e === void 0 ? 50 : _e, _f = _a.itemPadding, itemPadding = _f === void 0 ? 0 : _f, _g = _a.maxVisibleItems, maxVisibleItems = _g === void 0 ? -1 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.sectionPadding, sectionPadding = _j === void 0 ? 0 : _j, onItemIndexChange = _a.onItemIndexChange, onSectionIndexChange = _a.onSectionIndexChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "defaultExpandedSectionIndex", "expandIconSvg", "collapseIconSvg", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "onItemIndexChange", "onSectionIndexChange"]);
|
|
89
89
|
var isSectionSelectedAt = function (index) { return expandedSectionIndex === index; };
|
|
90
90
|
var toggleSectionAt = function (index) {
|
|
91
91
|
if (isTogglable && isSectionSelectedAt(index)) {
|
|
@@ -107,11 +107,13 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
107
107
|
var components = (0, asComponentDict_1.default)(children, {
|
|
108
108
|
header: exports.AccordionHeader,
|
|
109
109
|
expandIcon: exports.AccordionExpandIcon,
|
|
110
|
+
collapseIcon: exports.AccordionCollapseIcon,
|
|
110
111
|
});
|
|
111
112
|
var fixedClassNames = (0, asClassNameDict_1.default)({
|
|
112
113
|
root: (0, classnames_1.default)(orientation),
|
|
113
114
|
header: (0, classnames_1.default)(orientation),
|
|
114
115
|
expandIcon: (0, classnames_1.default)(orientation),
|
|
116
|
+
collapseIcon: (0, classnames_1.default)(orientation),
|
|
115
117
|
});
|
|
116
118
|
var fixedStyles = (0, asStyleDict_1.default)({
|
|
117
119
|
root: __assign({ alignItems: 'center', boxSizing: 'border-box', display: 'flex', flex: '0 0 auto', justifyContent: 'flex-start', padding: '0' }, orientation === 'vertical' ? {
|
|
@@ -146,6 +148,10 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
146
148
|
margin: '0',
|
|
147
149
|
padding: '0',
|
|
148
150
|
},
|
|
151
|
+
collapseIcon: {
|
|
152
|
+
margin: '0',
|
|
153
|
+
padding: '0',
|
|
154
|
+
},
|
|
149
155
|
list: __assign({ transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }, orientation === 'vertical' ? {
|
|
150
156
|
width: '100%',
|
|
151
157
|
transitionProperty: 'height, margin',
|
|
@@ -173,20 +179,34 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
173
179
|
transitionTimingFunction: 'ease-out',
|
|
174
180
|
width: '15px',
|
|
175
181
|
},
|
|
182
|
+
collapseIcon: {
|
|
183
|
+
boxSizing: 'border-box',
|
|
184
|
+
display: 'block',
|
|
185
|
+
fill: '#000',
|
|
186
|
+
height: '15px',
|
|
187
|
+
transformOrigin: 'center',
|
|
188
|
+
transitionDuration: '100ms',
|
|
189
|
+
transitionProperty: 'transform',
|
|
190
|
+
transitionTimingFunction: 'ease-out',
|
|
191
|
+
width: '15px',
|
|
192
|
+
},
|
|
176
193
|
});
|
|
177
194
|
return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
|
|
178
195
|
react_1.default.createElement(Each_1.default, { in: data }, function (section, sectionIdx) {
|
|
179
|
-
var _a, _b;
|
|
196
|
+
var _a, _b, _c;
|
|
180
197
|
var numItems = section.items.length;
|
|
181
198
|
var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
|
|
182
199
|
var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
|
|
183
200
|
var isCollapsed = !isSectionSelectedAt(sectionIdx);
|
|
201
|
+
var headerComponent = (_a = components.header) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.AccordionHeader, { style: defaultStyles.header });
|
|
202
|
+
var expandIconComponent = (_b = components.expandIcon) !== null && _b !== void 0 ? _b : (expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null));
|
|
203
|
+
var collapseIconComponent = (_c = components.collapseIcon) !== null && _c !== void 0 ? _c : (collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent);
|
|
184
204
|
return (react_1.default.createElement("div", { style: (0, styles_1.default)(fixedStyles.section, orientation === 'vertical' ? {
|
|
185
205
|
marginTop: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
|
|
186
206
|
} : {
|
|
187
207
|
marginLeft: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
|
|
188
208
|
}) },
|
|
189
|
-
cloneStyledElement_1.default.apply(void 0, __spreadArray([
|
|
209
|
+
cloneStyledElement_1.default.apply(void 0, __spreadArray([headerComponent, {
|
|
190
210
|
className: (0, classnames_1.default)(fixedClassNames.header, {
|
|
191
211
|
collapsed: isCollapsed,
|
|
192
212
|
expanded: !isCollapsed,
|
|
@@ -195,9 +215,9 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
195
215
|
onClick: function () { return toggleSectionAt(sectionIdx); },
|
|
196
216
|
}], [
|
|
197
217
|
react_1.default.createElement("label", { style: fixedStyles.headerLabel, dangerouslySetInnerHTML: { __html: section.label } }),
|
|
198
|
-
(0, cloneStyledElement_1.default)(
|
|
199
|
-
className: (0, classnames_1.default)(fixedClassNames.expandIcon),
|
|
200
|
-
style: (0, styles_1.default)(fixedStyles.expandIcon),
|
|
218
|
+
(0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
|
|
219
|
+
className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
|
|
220
|
+
style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
|
|
201
221
|
}),
|
|
202
222
|
], false)),
|
|
203
223
|
react_1.default.createElement(List_1.default, { style: (0, styles_1.default)(fixedStyles.list, orientation === 'vertical' ? {
|
|
@@ -220,13 +240,18 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
220
240
|
})));
|
|
221
241
|
});
|
|
222
242
|
var AccordionHeader = function (_a) {
|
|
223
|
-
var props = __rest(_a, []);
|
|
224
|
-
return react_1.default.createElement("button", __assign({}, props));
|
|
243
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
244
|
+
return react_1.default.createElement("button", __assign({}, props), children);
|
|
225
245
|
};
|
|
226
246
|
exports.AccordionHeader = AccordionHeader;
|
|
227
247
|
var AccordionExpandIcon = function (_a) {
|
|
228
|
-
var props = __rest(_a, []);
|
|
229
|
-
return react_1.default.createElement("div", __assign({}, props));
|
|
248
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
249
|
+
return react_1.default.createElement("div", __assign({}, props), children);
|
|
230
250
|
};
|
|
231
251
|
exports.AccordionExpandIcon = AccordionExpandIcon;
|
|
252
|
+
var AccordionCollapseIcon = function (_a) {
|
|
253
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
254
|
+
return react_1.default.createElement("div", __assign({}, props), children);
|
|
255
|
+
};
|
|
256
|
+
exports.AccordionCollapseIcon = AccordionCollapseIcon;
|
|
232
257
|
//# sourceMappingURL=Accordion.js.map
|
package/lib/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { ComponentType, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref, useEffect, useState } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { ListItemProps } from './List'\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\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type SectionData<T> = {\n label: string\n items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n /**\n * Data provided to each section.\n */\n data: SectionData<T>[]\n\n /**\n * Indicates if sections can be toggled, as in, once a section is expanded,\n * it collapses when being selected again.\n */\n isTogglable?: boolean\n\n /**\n * Index of the section that is selected by default. Any value less than 0\n * indicates that no section is selected by default.\n */\n defaultExpandedSectionIndex?: number\n\n /**\n * Length (in pixels) of each item. This does not apply to the section hedaer\n * itself. Length refers to the height in vertical orientation and width in\n * horizontal orientation.\n */\n itemLength?: number\n\n /**\n * Padding (in pixels) between each item.\n */\n itemPadding?: number\n\n /**\n * Padding (in pixels) between each section.\n */\n sectionPadding?: number\n\n /**\n * Maximum number of items that are viside when a section expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when a section expands.\n */\n maxVisibleItems?: number\n\n /**\n * Orientation of the component.\n */\n orientation?: Orientation\n\n /**\n * Thickness of the border (in pixels) of every item and the section header\n * itself. 0 indicates no borders.\n */\n borderThickness?: number\n\n /**\n * SVG markup to be put in the section header as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * React component type to be used for generating items inside the component.\n */\n itemComponentType: ComponentType<AccordionItemProps<T>>\n\n /**\n * Handler invoked when the selected item index of any section changes.\n */\n onItemIndexChange?: (index: number) => void\n\n /**\n * Handler invoked when the selected section index changes.\n */\n onSectionIndexChange?: (index: number) => void\n}>\n\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n defaultExpandedSectionIndex = -1,\n expandIconSvg,\n isTogglable = true,\n itemComponentType,\n itemLength = 50,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n sectionPadding = 0,\n onItemIndexChange,\n onSectionIndexChange,\n ...props\n}, ref) => {\n const isSectionSelectedAt = (index: number) => expandedSectionIndex === index\n\n const toggleSectionAt = (index: number) => {\n if (isTogglable && isSectionSelectedAt(index)) {\n setExpandedSectionIndex(-1)\n }\n else {\n setExpandedSectionIndex(index)\n }\n }\n\n const [expandedSectionIndex, setExpandedSectionIndex] = useState(defaultExpandedSectionIndex)\n const [selectedSectionIndex, setSelectedSectionIndex] = useState(-1)\n const [selectedItemIndex, setSelectedItemIndex] = useState(-1)\n\n useEffect(() => {\n onSectionIndexChange?.(expandedSectionIndex)\n }, [expandedSectionIndex])\n\n useEffect(() => {\n onItemIndexChange?.(selectedItemIndex)\n }, [selectedItemIndex])\n\n const components = asComponentDict(children, {\n header: AccordionHeader,\n expandIcon: AccordionExpandIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n header: classNames(orientation),\n expandIcon: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n height: 'auto',\n } : {\n flexDirection: 'row',\n width: 'auto',\n },\n },\n section: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n margin: '0',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n width: '100%',\n } : {\n flexDirection: 'row',\n height: '100%',\n },\n },\n header: {\n borderWidth: `${borderThickness}px`,\n margin: '0',\n outline: 'none',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n headerLabel: {\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n transition: 'inherit',\n },\n expandIcon: {\n margin: '0',\n padding: '0',\n },\n list: {\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n width: '100%',\n transitionProperty: 'height, margin',\n top: '100%',\n } : {\n height: '100%',\n transitionProperty: 'width, margin',\n left: '100%',\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n header: {\n alignItems: 'center',\n background: '#fff',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 10px',\n transitionDuration: '100ms',\n transitionProperty: 'transform, opacity, background, color',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n height: '50px',\n } : {\n width: '50px',\n },\n },\n expandIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n })\n\n return (\n <div\n {...props}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Each in={data}>\n {(section, sectionIdx) => {\n const numItems = section.items.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n const isCollapsed = !isSectionSelectedAt(sectionIdx)\n\n return (\n <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n } : {\n marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n })}>\n {cloneStyledElement(components.header ?? <AccordionHeader style={defaultStyles.header}/>, {\n className: classNames(fixedClassNames.header, {\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n style: styles(fixedStyles.header),\n onClick: () => toggleSectionAt(sectionIdx),\n }, ...[\n <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n cloneStyledElement(components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>), {\n className: classNames(fixedClassNames.expandIcon),\n style: styles(fixedStyles.expandIcon),\n }),\n ])}\n <List\n style={styles(fixedStyles.list, orientation === 'vertical' ? {\n height: isCollapsed ? '0px' : `${menuLength}px`,\n marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n } : {\n marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n })}\n borderThickness={borderThickness}\n data={section.items}\n isSelectable={true}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndex={selectedSectionIndex === sectionIdx ? selectedItemIndex : -1}\n onDeselectAt={() => {\n if (selectedSectionIndex !== sectionIdx) return\n setSelectedSectionIndex(-1)\n setSelectedItemIndex(-1)\n }}\n onSelectAt={itemIdx => {\n setSelectedSectionIndex(sectionIdx)\n setSelectedItemIndex(itemIdx)\n }}\n />\n </div>\n )\n }}\n </Each>\n </div>\n )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ ...props }: HTMLAttributes<HTMLButtonElement>) => <button {...props}/>\n\nexport const AccordionExpandIcon = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps } from './List'\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\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type AccordionSectionData<T> = {\n label: string\n items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n /**\n * Data provided to each section.\n */\n data: AccordionSectionData<T>[]\n\n /**\n * Indicates if sections can be toggled, as in, once a section is expanded,\n * it collapses when being selected again.\n */\n isTogglable?: boolean\n\n /**\n * Index of the section that is selected by default. Any value less than 0\n * indicates that no section is selected by default.\n */\n defaultExpandedSectionIndex?: number\n\n /**\n * Length (in pixels) of each item. This does not apply to the section hedaer\n * itself. Length refers to the height in vertical orientation and width in\n * horizontal orientation.\n */\n itemLength?: number\n\n /**\n * Padding (in pixels) between each item.\n */\n itemPadding?: number\n\n /**\n * Padding (in pixels) between each section.\n */\n sectionPadding?: number\n\n /**\n * Maximum number of items that are viside when a section expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when a section expands.\n */\n maxVisibleItems?: number\n\n /**\n * Orientation of the component.\n */\n orientation?: Orientation\n\n /**\n * Thickness of the border (in pixels) of every item and the section header\n * itself. 0 indicates no borders.\n */\n borderThickness?: number\n\n /**\n * SVG markup to be put in the section header as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * SVG markup to be put in the section header as the collapse icon.\n */\n collapseIconSvg?: string\n\n /**\n * React component type to be used for generating items inside the component.\n */\n itemComponentType: ComponentType<AccordionItemProps<T>>\n\n /**\n * Handler invoked when the selected item index of any section changes.\n */\n onItemIndexChange?: (index: number) => void\n\n /**\n * Handler invoked when the selected section index changes.\n */\n onSectionIndexChange?: (index: number) => void\n}>\n\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n defaultExpandedSectionIndex = -1,\n expandIconSvg,\n collapseIconSvg,\n isTogglable = true,\n itemComponentType,\n itemLength = 50,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n sectionPadding = 0,\n onItemIndexChange,\n onSectionIndexChange,\n ...props\n}, ref) => {\n const isSectionSelectedAt = (index: number) => expandedSectionIndex === index\n\n const toggleSectionAt = (index: number) => {\n if (isTogglable && isSectionSelectedAt(index)) {\n setExpandedSectionIndex(-1)\n }\n else {\n setExpandedSectionIndex(index)\n }\n }\n\n const [expandedSectionIndex, setExpandedSectionIndex] = useState(defaultExpandedSectionIndex)\n const [selectedSectionIndex, setSelectedSectionIndex] = useState(-1)\n const [selectedItemIndex, setSelectedItemIndex] = useState(-1)\n\n useEffect(() => {\n onSectionIndexChange?.(expandedSectionIndex)\n }, [expandedSectionIndex])\n\n useEffect(() => {\n onItemIndexChange?.(selectedItemIndex)\n }, [selectedItemIndex])\n\n const components = asComponentDict(children, {\n header: AccordionHeader,\n expandIcon: AccordionExpandIcon,\n collapseIcon: AccordionCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n header: classNames(orientation),\n expandIcon: classNames(orientation),\n collapseIcon: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n height: 'auto',\n } : {\n flexDirection: 'row',\n width: 'auto',\n },\n },\n section: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n margin: '0',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n width: '100%',\n } : {\n flexDirection: 'row',\n height: '100%',\n },\n },\n header: {\n borderWidth: `${borderThickness}px`,\n margin: '0',\n outline: 'none',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n headerLabel: {\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n transition: 'inherit',\n },\n expandIcon: {\n margin: '0',\n padding: '0',\n },\n collapseIcon: {\n margin: '0',\n padding: '0',\n },\n list: {\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n width: '100%',\n transitionProperty: 'height, margin',\n top: '100%',\n } : {\n height: '100%',\n transitionProperty: 'width, margin',\n left: '100%',\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n header: {\n alignItems: 'center',\n background: '#fff',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 10px',\n transitionDuration: '100ms',\n transitionProperty: 'transform, opacity, background, color',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n height: '50px',\n } : {\n width: '50px',\n },\n },\n expandIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n collapseIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n })\n\n return (\n <div\n {...props}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Each in={data}>\n {(section, sectionIdx) => {\n const numItems = section.items.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n const isCollapsed = !isSectionSelectedAt(sectionIdx)\n const headerComponent = components.header ?? <AccordionHeader style={defaultStyles.header}/>\n const expandIconComponent = components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>)\n const collapseIconComponent = components.collapseIcon ?? (collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent)\n\n return (\n <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n } : {\n marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n })}>\n {cloneStyledElement(headerComponent, {\n className: classNames(fixedClassNames.header, {\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n style: styles(fixedStyles.header),\n onClick: () => toggleSectionAt(sectionIdx),\n }, ...[\n <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n }),\n ])}\n <List\n style={styles(fixedStyles.list, orientation === 'vertical' ? {\n height: isCollapsed ? '0px' : `${menuLength}px`,\n marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n } : {\n marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n })}\n borderThickness={borderThickness}\n data={section.items}\n isSelectable={true}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndex={selectedSectionIndex === sectionIdx ? selectedItemIndex : -1}\n onDeselectAt={() => {\n if (selectedSectionIndex !== sectionIdx) return\n setSelectedSectionIndex(-1)\n setSelectedItemIndex(-1)\n }}\n onSelectAt={itemIdx => {\n setSelectedSectionIndex(sectionIdx)\n setSelectedItemIndex(itemIdx)\n }}\n />\n </div>\n )\n }}\n </Each>\n </div>\n )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const AccordionExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const AccordionCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}
|
package/lib/BurgerButton.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { HTMLAttributes, PropsWithChildren } from 'react';
|
|
1
|
+
import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
|
|
2
2
|
export type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{
|
|
3
3
|
height?: number;
|
|
4
4
|
isActive?: boolean;
|
|
@@ -14,7 +14,7 @@ export type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChi
|
|
|
14
14
|
* Three-striped burger button component that transforms into an "X" when
|
|
15
15
|
* selected.
|
|
16
16
|
*
|
|
17
|
-
* @exports BurgerButtonBar
|
|
17
|
+
* @exports BurgerButtonBar Component for each line on the burger button.
|
|
18
18
|
*/
|
|
19
19
|
declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & {
|
|
20
20
|
height?: number | undefined;
|
package/lib/BurgerButton.js
CHANGED
|
@@ -77,7 +77,7 @@ var styles_1 = __importDefault(require("./utils/styles"));
|
|
|
77
77
|
* Three-striped burger button component that transforms into an "X" when
|
|
78
78
|
* selected.
|
|
79
79
|
*
|
|
80
|
-
* @exports BurgerButtonBar
|
|
80
|
+
* @exports BurgerButtonBar Component for each line on the burger button.
|
|
81
81
|
*/
|
|
82
82
|
exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
83
83
|
var children = _a.children, className = _a.className, style = _a.style, _b = _a.height, height = _b === void 0 ? 20 : _b, _c = _a.isActive, externalIsActive = _c === void 0 ? false : _c, _d = _a.isDoubleJointed, isDoubleJointed = _d === void 0 ? false : _d, _e = _a.isLastBarHalfWidth, isLastBarHalfWidth = _e === void 0 ? false : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? 200 : _g, _h = _a.width, width = _h === void 0 ? 20 : _h, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate, props = __rest(_a, ["children", "className", "style", "height", "isActive", "isDoubleJointed", "isLastBarHalfWidth", "thickness", "transitionDuration", "width", "onActivate", "onDeactivate"]);
|
package/lib/BurgerButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,
|
|
1
|
+
{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAA2G;AAC3G,oDAA6B;AAC7B,4EAAqD;AACrD,4EAAqD;AACrD,oEAA6C;AAC7C,kFAA2D;AAC3D,0DAAmC;AAcnC;;;;;GAKG;AACH,kBAAe,IAAA,kBAAU,EAAuC,UAAC,EAchE,EAAE,GAAG;IAbJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA,EACL,cAAW,EAAX,MAAM,mBAAG,EAAE,KAAA,EACX,gBAAkC,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EAClC,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAA,EACb,0BAAwB,EAAxB,kBAAkB,mBAAG,GAAG,KAAA,EACxB,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,UAAU,gBAAA,EACV,YAAY,kBAAA,EACT,KAAK,cAbuD,2KAchE,CADS;IAEF,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EAAC,gBAAgB,CAAC,IAAA,EAAnD,QAAQ,QAAA,EAAE,WAAW,QAA8B,CAAA;IAE1D,IAAA,iBAAS,EAAC;QACR,IAAI,QAAQ,KAAK,gBAAgB,EAAE;YACjC,WAAW,CAAC,gBAAgB,CAAC,CAAA;SAC9B;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEtB,IAAA,iBAAS,EAAC;QACR,IAAI,QAAQ,EAAE;YACZ,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;aACI;YACH,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAA;SACjB;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAM,UAAU,GAAG,IAAA,yBAAe,EAAC,QAAQ,EAAE;QAC3C,GAAG,EAAE,uBAAe;KACrB,CAAC,CAAA;IAEF,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC;YACf,MAAM,EAAE,QAAQ;SACjB,CAAC;QACF,GAAG,EAAE,IAAA,oBAAU,EAAC;YACd,MAAM,EAAE,QAAQ;SACjB,CAAC;KACH,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,EAAE;YACJ,UAAU,EAAE,aAAa;YACzB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,OAAO;YAChB,MAAM,EAAE,UAAG,MAAM,OAAI;YACrB,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,UAAG,KAAK,OAAI;SACpB;QACD,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;SACxC;QACD,MAAM,EAAE;YACN,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,GAAG;SACT;QACD,MAAM,EAAE;YACN,KAAK,EAAE,GAAG;YACV,GAAG,EAAE,GAAG;SACT;QACD,GAAG,EAAE;YACH,MAAM,EAAE,UAAG,SAAS,OAAI;YACxB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;YACZ,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;SACd;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,GAAG;YACR,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,yBAAsB,CAAC,CAAC,CAAC,mCAAmC;YAClI,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;SAC7D;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,OAAI;YAC1C,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,+BAA+B;YACvF,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;SAC7D;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,SAAS,OAAI;YAC9B,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,SAAS,GAAG,GAAG,GAAG,MAAM,GAAG,GAAG,0BAAuB,CAAC,CAAC,CAAC,mCAAmC;YACnI,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;YAC5D,KAAK,EAAE,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAE;SACvF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,GAAG;YACR,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,0BAAuB,CAAC,CAAC,CAAC,mCAAmC;YACnI,eAAe,EAAE,aAAa;SAC/B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,OAAI;YAC1C,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,+BAA+B;YACvF,eAAe,EAAE,aAAa;SAC/B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,SAAS,OAAI;YAC9B,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,SAAS,GAAG,GAAG,GAAG,MAAM,GAAG,GAAG,yBAAsB,CAAC,CAAC,CAAC,mCAAmC;YAClI,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,kBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;SACtD;KACF,CAAC,CAAA;IAEF,IAAM,aAAa,GAAG,IAAA,qBAAW,EAAC;QAChC,GAAG,EAAE;YACH,UAAU,EAAE,MAAM;YAClB,kBAAkB,EAAE,OAAO;YAC3B,kBAAkB,EAAE,+CAA+C;YACnE,wBAAwB,EAAE,UAAU;SACrC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EACtD,KAAK,EAAE,IAAA,gBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,EACtC,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAtB,CAAsB;QAErC,8BAAC,gBAAM,IAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IACnC,UAAA,CAAC,IAAI,OAAA,CACJ,uCAAK,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,KAAK,EAAG,WAAmB,CAAC,eAAQ,CAAC,CAAE,CAAC,CAAC;YACtE,8BAAC,gBAAM,IAAC,KAAK,EAAE,CAAC,IACb,UAAA,CAAC;;gBAAI,OAAA,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,GAAG,mCAAI,8BAAC,uBAAe,IAAC,KAAK,EAAE,aAAa,CAAC,GAAG,GAAG,EAAE;oBACvF,WAAW,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,GAAG,CAAC;oBAC5C,OAAO,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,GAAG,EAAG,WAAmB,CAAC,aAAM,CAAC,SAAG,CAAC,CAAE,CAAC,CAAC;oBACrE,YAAY,EAAE,CAAC;iBAChB,CAAC,CAAA;aAAA,CACK,CACL,CACP,EAVK,CAUL,CACM,CACF,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEK,IAAM,eAAe,GAAG,UAAC,EAA6C;QAAxC,KAAK,cAAV,EAAY,CAAF;IAAwC,OAAA,mDAAU,KAAK,EAAG,CAAA;CAAA,CAAA;AAAvF,QAAA,eAAe,mBAAwE","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport Repeat from './Repeat'\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\nexport type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{\n height?: number\n isActive?: boolean\n isDoubleJointed?: boolean\n isLastBarHalfWidth?: boolean\n thickness?: number\n transitionDuration?: number\n width?: number\n onActivate?: () => void\n onDeactivate?: () => void\n}>\n\n/**\n * Three-striped burger button component that transforms into an \"X\" when\n * selected.\n *\n * @exports BurgerButtonBar Component for each line on the burger button.\n */\nexport default forwardRef<HTMLButtonElement, BurgerButtonProps>(({\n children,\n className,\n style,\n height = 20,\n isActive: externalIsActive = false,\n isDoubleJointed = false,\n isLastBarHalfWidth = false,\n thickness = 2,\n transitionDuration = 200,\n width = 20,\n onActivate,\n onDeactivate,\n ...props\n}, ref) => {\n const [isActive, setIsActive] = useState(externalIsActive)\n\n useEffect(() => {\n if (isActive !== externalIsActive) {\n setIsActive(externalIsActive)\n }\n }, [externalIsActive])\n\n useEffect(() => {\n if (isActive) {\n onActivate?.()\n }\n else {\n onDeactivate?.()\n }\n }, [isActive])\n\n const components = asComponentDict(children, {\n bar: BurgerButtonBar,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames({\n active: isActive,\n }),\n bar: classNames({\n active: isActive,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n background: 'transparent',\n border: 'none',\n display: 'block',\n height: `${height}px`,\n outline: 'none',\n width: `${width}px`,\n },\n joint: {\n height: '100%',\n position: 'absolute',\n width: isDoubleJointed ? '50%' : '100%',\n },\n joint0: {\n left: '0',\n top: '0',\n },\n joint1: {\n right: '0',\n top: '0',\n },\n bar: {\n height: `${thickness}px`,\n margin: '0',\n padding: '0',\n position: 'absolute',\n width: '100%',\n },\n bar00: {\n left: '0',\n top: '0',\n transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n transformOrigin: isDoubleJointed ? 'right center' : 'center',\n },\n bar01: {\n left: '0',\n top: `${height * 0.5 - thickness * 0.5}px`,\n transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',\n transformOrigin: isDoubleJointed ? 'right center' : 'center',\n },\n bar02: {\n left: '0',\n top: `${height - thickness}px`,\n transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n transformOrigin: isDoubleJointed ? 'right center' : 'center',\n width: isActive || isDoubleJointed ? '100%' : `${isLastBarHalfWidth ? '50%' : '100%'}`,\n },\n bar10: {\n left: '0',\n top: '0',\n transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n transformOrigin: 'left center',\n },\n bar11: {\n left: '0',\n top: `${height * 0.5 - thickness * 0.5}px`,\n transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',\n transformOrigin: 'left center',\n },\n bar12: {\n left: '0',\n top: `${height - thickness}px`,\n transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n transformOrigin: 'left center',\n width: isLastBarHalfWidth && !isActive ? '0' : '100%',\n },\n })\n\n const defaultStyles = asStyleDict({\n bar: {\n background: '#fff',\n transitionDuration: '100ms',\n transitionProperty: 'width, height, transform, opacity, background',\n transitionTimingFunction: 'ease-out',\n },\n })\n\n return (\n <button\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n onClick={() => setIsActive(!isActive)}\n >\n <Repeat count={isDoubleJointed ? 2 : 1}>\n {j => (\n <div style={styles(fixedStyles.joint, (fixedStyles as any)[`joint${j}`])}>\n <Repeat count={3}>\n {i => cloneStyledElement(components.bar ?? <BurgerButtonBar style={defaultStyles.bar}/>, {\n 'className': classNames(fixedClassNames.bar),\n 'style': styles(fixedStyles.bar, (fixedStyles as any)[`bar${j}${i}`]),\n 'data-index': i,\n })}\n </Repeat>\n </div>\n )}\n </Repeat>\n </button>\n )\n})\n\nexport const BurgerButtonBar = ({ ...props }: HTMLAttributes<HTMLSpanElement>) => <span {...props}/>\n"]}
|
package/lib/Conditional.d.ts
CHANGED
package/lib/Conditional.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Conditional.js","sourceRoot":"/","sources":["Conditional.tsx"],"names":[],"mappings":";;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Conditional.js","sourceRoot":"/","sources":["Conditional.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAqD;AAMrD,SAAwB,WAAW,CAAC,EAAoD;QAAlD,QAAQ,cAAA,EAAM,gBAAgB,QAAA;IAClE,QAAQ,OAAO,gBAAgB,EAAE;QAC/B,KAAK,SAAS;YACZ,OAAO,gBAAgB,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACnD,KAAK,UAAU;YACb,OAAO,gBAAgB,EAAE,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACrD;YACE,OAAO,CAAC,KAAK,CAAC,+DAAwD,gBAAgB,uBAAoB,CAAC,CAAA;YAE3G,OAAO,6DAAK,CAAA;KACf;AACH,CAAC;AAXD,8BAWC","sourcesContent":["import React, { type PropsWithChildren } from 'react'\n\nexport type ConditionalProps = PropsWithChildren<{\n if: boolean | (() => boolean)\n}>\n\nexport default function Conditional({ children, if: boolOrExpression }: ConditionalProps) {\n switch (typeof boolOrExpression) {\n case 'boolean':\n return boolOrExpression ? <>{children}</> : <></>\n case 'function':\n return boolOrExpression() ? <>{children}</> : <></>\n default:\n console.error(`[etudes::Conditional] The type of provided condition ${boolOrExpression} is not supported.`)\n\n return <></>\n }\n}\n"]}
|
package/lib/DebugConsole.d.ts
CHANGED
package/lib/DebugConsole.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["DebugConsole.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["DebugConsole.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef, useState, type CSSProperties, type HTMLAttributes } from 'react'\nimport Each from './Each'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\nexport type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {\n align?: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br'\n margin?: number\n maxEntries?: number\n message?: string\n title?: string\n}\n\nexport default forwardRef<HTMLDivElement, DebugConsoleProps>(({\n align = 'br',\n margin = 0,\n maxEntries = -1,\n message,\n style = {},\n title,\n ...props\n}, ref) => {\n const [messages, setMessages] = useState<string[]>([])\n const messagesRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (message === undefined) {\n setMessages([])\n }\n else {\n const numMessages = messages.length\n\n setMessages([\n ...maxEntries < 0\n ? messages\n : messages.slice(Math.max(0, numMessages - (maxEntries - 1)), numMessages),\n message,\n ])\n }\n }, [message])\n\n useEffect(() => {\n messagesRef.current?.scrollTo(0, messagesRef.current?.scrollHeight)\n }, [messages])\n\n const fixedStyles = asStyleDict({\n root: {\n background: '#000',\n fontFamily: 'monospace',\n position: 'fixed',\n width: '300px',\n },\n title: {\n background: '#fff',\n boxSizing: 'border-box',\n color: '#000',\n fontSize: '14px',\n fontWeight: '700',\n height: '30px',\n lineHeight: '30px',\n overflow: 'hidden',\n padding: '0 10px',\n textOverflow: 'ellipsis',\n textTransform: 'uppercase',\n whiteSpace: 'nowrap',\n width: '100%',\n },\n messages: {\n boxSizing: 'border-box',\n color: '#fff',\n fontSize: '12px',\n lineHeight: '150%',\n maxHeight: '200px',\n minHeight: '100px',\n overflowX: 'hidden',\n overflowY: 'scroll',\n padding: '10px',\n WebkitOverflowScrolling: 'touch',\n width: '100%',\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n style={styles(style, fixedStyles.root, getStyleByAlignment(align, margin))}\n >\n <div style={fixedStyles.title}>{title ?? 'Untitled'}</div>\n <div ref={messagesRef} style={fixedStyles.messages}>\n <Each in={messages} render={msg => <div dangerouslySetInnerHTML={{ __html: msg }}/>}/>\n </div>\n </div>\n )\n})\n\nfunction getStyleByAlignment(align: DebugConsoleProps['align'], margin: number): CSSProperties {\n switch (align) {\n case 'tl': return { top: `${margin}px`, left: `${margin}px` }\n case 'tc': return { top: `${margin}px`, left: 0, right: 0, margin: '0 auto' }\n case 'tr': return { top: `${margin}px`, right: `${margin}px` }\n case 'cl': return { top: 0, left: `${margin}px`, bottom: 0, margin: 'auto 0' }\n case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' }\n case 'cr': return { top: 0, bottom: 0, right: `${margin}px`, margin: 'auto 0' }\n case 'bl': return { bottom: `${margin}px`, left: `${margin}px` }\n case 'bc': return { bottom: `${margin}px`, left: 0, right: 0, margin: '0 auto' }\n default: return { bottom: `${margin}px`, right: `${margin}px` }\n }\n}\n"]}
|
package/lib/Dial.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { HTMLAttributes, PropsWithChildren, SVGAttributes } from 'react';
|
|
1
|
+
import React, { type HTMLAttributes, type PropsWithChildren, type SVGAttributes } from 'react';
|
|
2
2
|
export type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
|
|
3
3
|
/**
|
|
4
4
|
* Current angle reading of the compass, between 0.0 - 360.0 degrees,
|
package/lib/Dial.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, type HTMLAttributes, type PropsWithChildren, type SVGAttributes } from 'react'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n /**\n * Current angle reading of the compass, between 0.0 - 360.0 degrees,\n * inclusive.\n */\n angle?: number\n\n /**\n * Length of the knob along the track expressed in degrees, between 0.0 and\n * 360.0 degrees, exclusive. If set to 0 or 360, the knob disappears.\n *\n * @example Suppose the compass were to be used to control a photosphere of an\n * image that is 1000 x 500, and the window size is 500 x 500, that\n * would mean the FOV is 500 / 1000 * 360 = 180 degrees.\n */\n knobLength?: number\n\n /**\n * Radius of the compass.\n */\n radius?: number\n\n /**\n * The thickness of the knob, which is equivalent to the `stroke-width` of the\n * `<path>` element. Note that this overwrites the `stroke-width` set inside\n * `cssKnob`.\n */\n knobThickness?: number\n\n /**\n * The thickness of the circular track, which is equivalent to the\n * `stroke-width` of the `<circle>` element. Note that this overwrites the\n * `stroke-width` set inside `cssTrack`.\n */\n trackThickness?: number\n}>\n\n/**\n * A circular dial with a knob and a track.\n *\n * @exports DialKnob\n * @exports DialTrack\n */\nexport default forwardRef<HTMLDivElement, DialProps>(({\n angle = 0,\n children,\n knobLength = 30,\n knobThickness = 10,\n radius = 50,\n trackThickness = 2,\n style,\n ...props\n}, ref) => {\n const diameter = radius * 2\n const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n const components = asComponentDict(children, {\n track: DialTrack,\n knob: DialKnob,\n })\n\n const fixedStyles = asStyleDict({\n root: {\n height: `${diameter}px`,\n width: `${diameter}px`,\n },\n knobContainer: {\n backgroundPosition: 'center',\n backgroundRepeat: 'no-repeat',\n backgroundSize: '100%',\n height: '100%',\n left: '0',\n position: 'absolute',\n top: '0',\n transformOrigin: 'center',\n width: '100%',\n transform: `rotate(${(angle + 360) % 360}deg)`,\n },\n trackContainer: {\n height: '100%',\n left: '0',\n position: 'absolute',\n top: '0',\n transformOrigin: 'center',\n width: '100%',\n },\n svgContainer: {\n overflow: 'visible',\n position: 'absolute',\n right: '0',\n top: '0',\n },\n })\n\n const defaultStyles = asStyleDict({\n knob: {\n stroke: '#fff',\n },\n track: {\n strokeDasharray: '4',\n stroke: '#fff',\n },\n })\n\n return (\n <div {...props} ref={ref} style={styles(style, fixedStyles.root)}>\n <div style={fixedStyles.trackContainer}>\n <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`} style={fixedStyles.svgContainer}>\n {cloneStyledElement(components.track ?? <DialTrack style={defaultStyles.track}/>, {\n cx: radius,\n cy: radius,\n r: radius - trackThickness / 2,\n strokeWidth: trackThickness,\n })}\n </svg>\n </div>\n <div style={styles(fixedStyles.knobContainer)}>\n <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg' style={fixedStyles.svgContainer}>\n {cloneStyledElement(components.knob ?? <DialKnob style={defaultStyles.knob}/>, {\n strokeWidth: knobThickness,\n d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2),\n })}\n </svg>\n </div>\n </div>\n )\n})\n\nexport const DialTrack = ({ ...props }: SVGAttributes<SVGCircleElement>) => <circle {...props}/>\n\nexport const DialKnob = ({ ...props }: SVGAttributes<SVGPathElement>) => <path {...props}/>\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n return {\n x: centerX + radius * Math.cos(angleInRadians),\n y: centerY + radius * Math.sin(angleInRadians),\n }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n const start = polarToCartesian(x, y, radius, endAngle)\n const end = polarToCartesian(x, y, radius, startAngle)\n const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n const d = [\n 'M',\n start.x,\n start.y,\n 'A',\n radius,\n radius,\n 0,\n largeArcFlag,\n 0,\n end.x,\n end.y,\n ]\n\n return d.join(' ')\n}\n"]}
|
package/lib/Dropdown.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { ComponentType, HTMLAttributes, PropsWithChildren, ReactElement, Ref } from 'react';
|
|
2
|
-
import { ListItemProps } from './List';
|
|
1
|
+
import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
|
|
2
|
+
import { type ListItemProps } from './List';
|
|
3
3
|
type Orientation = 'horizontal' | 'vertical';
|
|
4
4
|
export type DropdownData = {
|
|
5
5
|
label?: string;
|
|
@@ -60,6 +60,10 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
|
|
|
60
60
|
* SVG markup to be put in the dropdown button as the expand icon.
|
|
61
61
|
*/
|
|
62
62
|
expandIconSvg?: string;
|
|
63
|
+
/**
|
|
64
|
+
* SVG markup to be put in the dropdown button as the collapse icon.
|
|
65
|
+
*/
|
|
66
|
+
collapseIconSvg?: string;
|
|
63
67
|
/**
|
|
64
68
|
* React component type to be used for generating items inside the component.
|
|
65
69
|
*/
|
|
@@ -129,6 +133,10 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
|
|
|
129
133
|
* SVG markup to be put in the dropdown button as the expand icon.
|
|
130
134
|
*/
|
|
131
135
|
expandIconSvg?: string | undefined;
|
|
136
|
+
/**
|
|
137
|
+
* SVG markup to be put in the dropdown button as the collapse icon.
|
|
138
|
+
*/
|
|
139
|
+
collapseIconSvg?: string | undefined;
|
|
132
140
|
/**
|
|
133
141
|
* React component type to be used for generating items inside the component.
|
|
134
142
|
*/
|
|
@@ -143,5 +151,6 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
|
|
|
143
151
|
ref?: React.Ref<HTMLDivElement> | undefined;
|
|
144
152
|
}) => ReactElement;
|
|
145
153
|
export default _default;
|
|
146
|
-
export declare const DropdownToggle: ({ ...props }: HTMLAttributes<HTMLButtonElement>) => React.JSX.Element;
|
|
147
|
-
export declare const DropdownExpandIcon: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
|
|
154
|
+
export declare const DropdownToggle: ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => React.JSX.Element;
|
|
155
|
+
export declare const DropdownExpandIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
|
|
156
|
+
export declare const DropdownCollapseIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
|