@draftbit/core 48.0.2-6e7350.2 → 48.0.2-93ca3f.2
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/src/components/SectionList/SectionHeader.d.ts +16 -0
- package/lib/src/components/SectionList/SectionHeader.js +17 -0
- package/lib/src/components/SectionList/SectionHeader.js.map +1 -0
- package/lib/src/components/SectionList/SectionList.d.ts +19 -0
- package/lib/src/components/SectionList/SectionList.js +91 -0
- package/lib/src/components/SectionList/SectionList.js.map +1 -0
- package/lib/src/components/SectionList/index.d.ts +2 -0
- package/lib/src/components/SectionList/index.js +3 -0
- package/lib/src/components/SectionList/index.js.map +1 -0
- package/lib/src/index.d.ts +1 -0
- package/lib/src/index.js +1 -0
- package/lib/src/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/components/SectionList/SectionHeader.js +17 -0
- package/src/components/SectionList/SectionHeader.js.map +1 -0
- package/src/components/SectionList/SectionHeader.tsx +39 -0
- package/src/components/SectionList/SectionList.js +91 -0
- package/src/components/SectionList/SectionList.js.map +1 -0
- package/src/components/SectionList/SectionList.tsx +167 -0
- package/src/components/SectionList/index.js +3 -0
- package/src/components/SectionList/index.js.map +1 -0
- package/src/components/SectionList/index.tsx +2 -0
- package/src/index.js +1 -0
- package/src/index.js.map +1 -1
- package/src/index.tsx +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "48.0.2-
|
|
3
|
+
"version": "48.0.2-93ca3f.2+93ca3f7",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/src/index.js",
|
|
6
6
|
"types": "lib/src/index.d.ts",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@date-io/date-fns": "^1.3.13",
|
|
41
41
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
42
|
-
"@draftbit/types": "^48.0.2-
|
|
42
|
+
"@draftbit/types": "^48.0.2-93ca3f.2+93ca3f7",
|
|
43
43
|
"@expo/vector-icons": "^13.0.0",
|
|
44
44
|
"@material-ui/core": "^4.11.0",
|
|
45
45
|
"@material-ui/pickers": "^3.2.10",
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
"node_modules/",
|
|
80
80
|
"lib/"
|
|
81
81
|
],
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "93ca3f706390e6641f72b9127c2bdd41708791fd"
|
|
83
83
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View, Text } from "react-native";
|
|
3
|
+
import { withTheme } from "../../theming";
|
|
4
|
+
const SectionHeader = ({ style, children,
|
|
5
|
+
// @ts-ignore Used by parent component only, ignore warning
|
|
6
|
+
isSectionHeader = true, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
7
|
+
}) => React.createElement(View, { style: [style] }, children);
|
|
8
|
+
export const DefaultSectionHeader = withTheme(({ title, theme }) => {
|
|
9
|
+
return (React.createElement(Text, { style: {
|
|
10
|
+
color: theme.colors.background,
|
|
11
|
+
backgroundColor: theme.colors.primary,
|
|
12
|
+
fontSize: 16,
|
|
13
|
+
padding: 10,
|
|
14
|
+
} }, title));
|
|
15
|
+
});
|
|
16
|
+
export default SectionHeader;
|
|
17
|
+
//# sourceMappingURL=SectionHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SectionHeader.js","sourceRoot":"","sources":["SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAwB,IAAI,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAQ1C,MAAM,aAAa,GAA0D,CAAC,EAC5E,KAAK,EACL,QAAQ;AACR,2DAA2D;AAC3D,eAAe,GAAG,IAAI,EAAE,wDAAwD;EACjF,EAAE,EAAE,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,KAAK,CAAC,IAAG,QAAQ,CAAQ,CAAC;AAM9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,SAAS,CAC3C,CAAC,EAAE,KAAK,EAAE,KAAK,EAA6B,EAAE,EAAE;IAC9C,OAAO,CACL,oBAAC,IAAI,IACH,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;YAC9B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;YACrC,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;SACZ,IAEA,KAAK,CACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View, StyleProp, ViewStyle, Text } from "react-native";
|
|
3
|
+
import { withTheme } from "../../theming";
|
|
4
|
+
import type { Theme } from "../../styles/DefaultTheme";
|
|
5
|
+
|
|
6
|
+
export interface SectionHeaderProps {
|
|
7
|
+
style?: StyleProp<ViewStyle>;
|
|
8
|
+
isSectionHeader?: true; //Indicates to the parent SectionList that this is the section header component
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const SectionHeader: React.FC<React.PropsWithChildren<SectionHeaderProps>> = ({
|
|
12
|
+
style,
|
|
13
|
+
children,
|
|
14
|
+
// @ts-ignore Used by parent component only, ignore warning
|
|
15
|
+
isSectionHeader = true, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
16
|
+
}) => <View style={[style]}>{children}</View>;
|
|
17
|
+
|
|
18
|
+
interface DefaultSectionHeaderProps {
|
|
19
|
+
title: string;
|
|
20
|
+
theme: Theme;
|
|
21
|
+
}
|
|
22
|
+
export const DefaultSectionHeader = withTheme(
|
|
23
|
+
({ title, theme }: DefaultSectionHeaderProps) => {
|
|
24
|
+
return (
|
|
25
|
+
<Text
|
|
26
|
+
style={{
|
|
27
|
+
color: theme.colors.background,
|
|
28
|
+
backgroundColor: theme.colors.primary,
|
|
29
|
+
fontSize: 16,
|
|
30
|
+
padding: 10,
|
|
31
|
+
}}
|
|
32
|
+
>
|
|
33
|
+
{title}
|
|
34
|
+
</Text>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
export default SectionHeader;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { FlashList } from "@shopify/flash-list";
|
|
3
|
+
import { FlatList } from "react-native";
|
|
4
|
+
import SectionHeader, { DefaultSectionHeader, } from "./SectionHeader";
|
|
5
|
+
const SectionList = ({ sectionKey, listComponent = "FlatList", data: dataProp, renderItem: renderItemProp, ...rest }) => {
|
|
6
|
+
const data = React.useMemo(() => (dataProp || []), [dataProp]);
|
|
7
|
+
const instanceOfSectionHeaderProps = (element, object) => {
|
|
8
|
+
return element.type === SectionHeader || "isSectionHeader" in object;
|
|
9
|
+
};
|
|
10
|
+
const dataWithSections = React.useMemo(() => {
|
|
11
|
+
var _a;
|
|
12
|
+
const result = [];
|
|
13
|
+
const sectionDataItems = {};
|
|
14
|
+
for (const item of data) {
|
|
15
|
+
const section = ((_a = item[sectionKey]) === null || _a === void 0 ? void 0 : _a.toString()) || "Uncategorized";
|
|
16
|
+
if (sectionDataItems[section]) {
|
|
17
|
+
sectionDataItems[section].push(item);
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
sectionDataItems[section] = [item];
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
for (const section in sectionDataItems) {
|
|
24
|
+
result.push({ type: "SECTION_ITEM", title: section });
|
|
25
|
+
const sectionItems = sectionDataItems[section].map((item) => ({ type: "DATA_ITEM", data: item }));
|
|
26
|
+
result.push(...sectionItems);
|
|
27
|
+
}
|
|
28
|
+
return result;
|
|
29
|
+
}, [data, sectionKey]);
|
|
30
|
+
const extractSectionHeader = (element) => {
|
|
31
|
+
var _a;
|
|
32
|
+
const children = React.Children.toArray((_a = element.props) === null || _a === void 0 ? void 0 : _a.children).map((child) => child);
|
|
33
|
+
if (instanceOfSectionHeaderProps(element, element.props)) {
|
|
34
|
+
return element;
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
for (const child of children) {
|
|
38
|
+
if (instanceOfSectionHeaderProps(child, child.props)) {
|
|
39
|
+
return child;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return null;
|
|
44
|
+
};
|
|
45
|
+
const extractRemainingNonSectionHeader = (element) => {
|
|
46
|
+
var _a;
|
|
47
|
+
const children = React.Children.toArray((_a = element.props) === null || _a === void 0 ? void 0 : _a.children).map((child) => child);
|
|
48
|
+
if (instanceOfSectionHeaderProps(element, element.props)) {
|
|
49
|
+
return null;
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
const newChildren = [];
|
|
53
|
+
for (const child of children) {
|
|
54
|
+
if (!instanceOfSectionHeaderProps(child, child.props)) {
|
|
55
|
+
newChildren.push(child);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
return React.cloneElement(element, {
|
|
59
|
+
...element.props,
|
|
60
|
+
children: newChildren,
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
const renderItem = ({ item, index, }) => {
|
|
65
|
+
switch (item.type) {
|
|
66
|
+
case "SECTION_ITEM": {
|
|
67
|
+
const renderedItem = renderItemProp({
|
|
68
|
+
index,
|
|
69
|
+
section: item.title,
|
|
70
|
+
});
|
|
71
|
+
return (extractSectionHeader(renderedItem) || (React.createElement(DefaultSectionHeader, { title: item.title })));
|
|
72
|
+
}
|
|
73
|
+
case "DATA_ITEM": {
|
|
74
|
+
const renderedItem = renderItemProp({
|
|
75
|
+
item: item.data,
|
|
76
|
+
index,
|
|
77
|
+
section: item.data[sectionKey],
|
|
78
|
+
});
|
|
79
|
+
return extractRemainingNonSectionHeader(renderedItem);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
switch (listComponent) {
|
|
84
|
+
case "FlatList":
|
|
85
|
+
return (React.createElement(FlatList, { ...rest, data: dataWithSections, renderItem: renderItem }));
|
|
86
|
+
case "FlashList":
|
|
87
|
+
return (React.createElement(FlashList, { ...rest, data: dataWithSections, renderItem: renderItem }));
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
export default SectionList;
|
|
91
|
+
//# sourceMappingURL=SectionList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SectionList.js","sourceRoot":"","sources":["SectionList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { FlashListProps, FlashList } from "@shopify/flash-list";
|
|
3
|
+
import { FlatListProps, FlatList } from "react-native";
|
|
4
|
+
import SectionHeader, {
|
|
5
|
+
DefaultSectionHeader,
|
|
6
|
+
SectionHeaderProps,
|
|
7
|
+
} from "./SectionHeader";
|
|
8
|
+
|
|
9
|
+
type ListComponentType = "FlatList" | "FlashList";
|
|
10
|
+
|
|
11
|
+
interface AdditionalSectionListProps<T> {
|
|
12
|
+
sectionKey: string;
|
|
13
|
+
renderItem: (itemInfo: {
|
|
14
|
+
item?: T;
|
|
15
|
+
index: number;
|
|
16
|
+
section: string;
|
|
17
|
+
}) => JSX.Element;
|
|
18
|
+
listComponent?: ListComponentType;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
type FlatListSectionListProps<T> = Omit<FlatListProps<T>, "renderItem"> &
|
|
22
|
+
AdditionalSectionListProps<T>;
|
|
23
|
+
|
|
24
|
+
type FlashListSectionListProps<T> = Omit<FlashListProps<T>, "renderItem"> &
|
|
25
|
+
AdditionalSectionListProps<T>;
|
|
26
|
+
|
|
27
|
+
interface SectionListDataItem<T> {
|
|
28
|
+
type: "DATA_ITEM";
|
|
29
|
+
data: T;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
interface SectionListSectionItem {
|
|
33
|
+
type: "SECTION_ITEM";
|
|
34
|
+
title: string;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
type SectionListItem<T> = SectionListDataItem<T> | SectionListSectionItem;
|
|
38
|
+
|
|
39
|
+
const SectionList = <T extends { [key: string]: any }>({
|
|
40
|
+
sectionKey,
|
|
41
|
+
listComponent = "FlatList",
|
|
42
|
+
data: dataProp,
|
|
43
|
+
renderItem: renderItemProp,
|
|
44
|
+
...rest
|
|
45
|
+
}: FlatListSectionListProps<T> | FlashListSectionListProps<T>) => {
|
|
46
|
+
const data = React.useMemo(() => (dataProp || []) as T[], [dataProp]);
|
|
47
|
+
|
|
48
|
+
const instanceOfSectionHeaderProps = (
|
|
49
|
+
element: React.ReactElement,
|
|
50
|
+
object: any
|
|
51
|
+
): object is SectionHeaderProps => {
|
|
52
|
+
return element.type === SectionHeader || "isSectionHeader" in object;
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
const dataWithSections = React.useMemo(() => {
|
|
56
|
+
const result: SectionListItem<T>[] = [];
|
|
57
|
+
const sectionDataItems: { [key: string]: T[] } = {};
|
|
58
|
+
|
|
59
|
+
for (const item of data) {
|
|
60
|
+
const section = item[sectionKey]?.toString() || "Uncategorized";
|
|
61
|
+
if (sectionDataItems[section]) {
|
|
62
|
+
sectionDataItems[section].push(item);
|
|
63
|
+
} else {
|
|
64
|
+
sectionDataItems[section] = [item];
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
for (const section in sectionDataItems) {
|
|
69
|
+
result.push({ type: "SECTION_ITEM", title: section });
|
|
70
|
+
const sectionItems: SectionListDataItem<T>[] = sectionDataItems[
|
|
71
|
+
section
|
|
72
|
+
].map((item) => ({ type: "DATA_ITEM", data: item }));
|
|
73
|
+
result.push(...sectionItems);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return result;
|
|
77
|
+
}, [data, sectionKey]);
|
|
78
|
+
|
|
79
|
+
const extractSectionHeader = (element: JSX.Element): JSX.Element | null => {
|
|
80
|
+
const children = React.Children.toArray(element.props?.children).map(
|
|
81
|
+
(child) => child as React.ReactElement
|
|
82
|
+
);
|
|
83
|
+
if (instanceOfSectionHeaderProps(element, element.props)) {
|
|
84
|
+
return element;
|
|
85
|
+
} else {
|
|
86
|
+
for (const child of children) {
|
|
87
|
+
if (instanceOfSectionHeaderProps(child, child.props)) {
|
|
88
|
+
return child;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
return null;
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
const extractRemainingNonSectionHeader = (
|
|
96
|
+
element: JSX.Element
|
|
97
|
+
): JSX.Element | null => {
|
|
98
|
+
const children = React.Children.toArray(element.props?.children).map(
|
|
99
|
+
(child) => child as React.ReactElement
|
|
100
|
+
);
|
|
101
|
+
if (instanceOfSectionHeaderProps(element, element.props)) {
|
|
102
|
+
return null;
|
|
103
|
+
} else {
|
|
104
|
+
const newChildren = [];
|
|
105
|
+
for (const child of children) {
|
|
106
|
+
if (!instanceOfSectionHeaderProps(child, child.props)) {
|
|
107
|
+
newChildren.push(child);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
return React.cloneElement(element, {
|
|
111
|
+
...element.props,
|
|
112
|
+
children: newChildren,
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
const renderItem = ({
|
|
118
|
+
item,
|
|
119
|
+
index,
|
|
120
|
+
}: {
|
|
121
|
+
item: SectionListItem<T>;
|
|
122
|
+
index: number;
|
|
123
|
+
}) => {
|
|
124
|
+
switch (item.type) {
|
|
125
|
+
case "SECTION_ITEM": {
|
|
126
|
+
const renderedItem = renderItemProp({
|
|
127
|
+
index,
|
|
128
|
+
section: item.title,
|
|
129
|
+
});
|
|
130
|
+
return (
|
|
131
|
+
extractSectionHeader(renderedItem) || (
|
|
132
|
+
<DefaultSectionHeader title={item.title} />
|
|
133
|
+
)
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
case "DATA_ITEM": {
|
|
137
|
+
const renderedItem = renderItemProp({
|
|
138
|
+
item: item.data,
|
|
139
|
+
index,
|
|
140
|
+
section: item.data[sectionKey],
|
|
141
|
+
});
|
|
142
|
+
return extractRemainingNonSectionHeader(renderedItem);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
switch (listComponent) {
|
|
148
|
+
case "FlatList":
|
|
149
|
+
return (
|
|
150
|
+
<FlatList
|
|
151
|
+
{...(rest as FlatListProps<SectionListItem<T>>)}
|
|
152
|
+
data={dataWithSections}
|
|
153
|
+
renderItem={renderItem}
|
|
154
|
+
/>
|
|
155
|
+
);
|
|
156
|
+
case "FlashList":
|
|
157
|
+
return (
|
|
158
|
+
<FlashList
|
|
159
|
+
{...(rest as FlashListProps<SectionListItem<T>>)}
|
|
160
|
+
data={dataWithSections}
|
|
161
|
+
renderItem={renderItem}
|
|
162
|
+
/>
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
export default SectionList;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
package/src/index.js
CHANGED
|
@@ -35,6 +35,7 @@ export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
|
35
35
|
export { default as Picker } from "./components/Picker/Picker";
|
|
36
36
|
export { default as Slider } from "./components/Slider";
|
|
37
37
|
export { default as Stepper } from "./components/Stepper";
|
|
38
|
+
export { SectionList, SectionHeader } from "./components/SectionList";
|
|
38
39
|
/* Deprecated: Fix or Delete! */
|
|
39
40
|
export { default as AccordionItem } from "./deprecated-components/AccordionItem";
|
|
40
41
|
export { default as AvatarEdit } from "./deprecated-components/AvatarEdit";
|
package/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,cAAc,GACf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,aAAa,GACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,OAAO,IAAI,WAAW,GAEvB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"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"}
|
package/src/index.tsx
CHANGED
|
@@ -50,6 +50,7 @@ export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
|
50
50
|
export { default as Picker } from "./components/Picker/Picker";
|
|
51
51
|
export { default as Slider } from "./components/Slider";
|
|
52
52
|
export { default as Stepper } from "./components/Stepper";
|
|
53
|
+
export { SectionList, SectionHeader } from "./components/SectionList";
|
|
53
54
|
|
|
54
55
|
/* Deprecated: Fix or Delete! */
|
|
55
56
|
export { default as AccordionItem } from "./deprecated-components/AccordionItem";
|