@kaushverse/pickify 1.0.7 → 1.0.9
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/index.d.mts +47 -15
- package/dist/index.d.ts +47 -15
- package/dist/index.js +64 -33
- package/dist/index.mjs +62 -33
- package/package.json +2 -1
package/dist/index.d.mts
CHANGED
|
@@ -2,6 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import React$1 from 'react';
|
|
3
3
|
import { TextStyle, ViewStyle } from 'react-native';
|
|
4
4
|
|
|
5
|
+
type IconRenderer = (props: {
|
|
6
|
+
name: string;
|
|
7
|
+
size: number;
|
|
8
|
+
color: string;
|
|
9
|
+
}) => React.ReactNode;
|
|
10
|
+
|
|
5
11
|
type Option = {
|
|
6
12
|
label: string;
|
|
7
13
|
value: string;
|
|
@@ -46,11 +52,7 @@ type Props = {
|
|
|
46
52
|
renderTab?: (tab: Group, isActive: boolean, onPress: () => void) => React$1.ReactNode;
|
|
47
53
|
renderItem?: (item: Option, isSelected: boolean) => React$1.ReactNode;
|
|
48
54
|
renderContainer?: (children: React$1.ReactNode) => React$1.ReactNode;
|
|
49
|
-
renderIcon?:
|
|
50
|
-
name: string;
|
|
51
|
-
size: number;
|
|
52
|
-
color: string;
|
|
53
|
-
}) => React$1.ReactNode;
|
|
55
|
+
renderIcon?: IconRenderer;
|
|
54
56
|
onSelect: (value: string) => void;
|
|
55
57
|
onClose: () => void;
|
|
56
58
|
};
|
|
@@ -69,32 +71,62 @@ type MultiGroup = {
|
|
|
69
71
|
label: string;
|
|
70
72
|
data: MultiOption[];
|
|
71
73
|
};
|
|
74
|
+
type MultiPickerItemStyles = {
|
|
75
|
+
item?: ViewStyle;
|
|
76
|
+
label?: TextStyle;
|
|
77
|
+
circle?: ViewStyle;
|
|
78
|
+
activeCircle?: ViewStyle;
|
|
79
|
+
dot?: ViewStyle;
|
|
80
|
+
};
|
|
81
|
+
type MultiPickerItemProps = {
|
|
82
|
+
label: string;
|
|
83
|
+
selected: boolean;
|
|
84
|
+
onPress: () => void;
|
|
85
|
+
renderIcon?: IconRenderer;
|
|
86
|
+
styles?: MultiPickerItemStyles;
|
|
87
|
+
};
|
|
88
|
+
type MultiPickerGroupStyles = {
|
|
89
|
+
container?: ViewStyle;
|
|
90
|
+
header?: ViewStyle;
|
|
91
|
+
title?: TextStyle;
|
|
92
|
+
content?: ViewStyle;
|
|
93
|
+
icon?: ViewStyle;
|
|
94
|
+
};
|
|
95
|
+
type MultiPickerGroupProps = {
|
|
96
|
+
label: string;
|
|
97
|
+
children: React.ReactNode;
|
|
98
|
+
renderGroupIcon?: IconRenderer;
|
|
99
|
+
styles?: MultiPickerGroupStyles;
|
|
100
|
+
};
|
|
72
101
|
type MultiPickerProps = {
|
|
73
102
|
visible?: boolean;
|
|
74
103
|
setVisible?: (val: boolean) => void;
|
|
75
104
|
selectedValues: string[];
|
|
76
|
-
options
|
|
105
|
+
options?: MultiOption[];
|
|
77
106
|
groups?: MultiGroup[];
|
|
78
107
|
onChange: (val: string[]) => void;
|
|
79
108
|
label?: string;
|
|
80
109
|
placeholder?: string;
|
|
81
|
-
error?:
|
|
82
|
-
|
|
83
|
-
name: string;
|
|
84
|
-
size: number;
|
|
85
|
-
color: string;
|
|
86
|
-
}) => React.ReactNode;
|
|
110
|
+
error?: TextStyle;
|
|
111
|
+
renderInputIcon?: IconRenderer;
|
|
87
112
|
styles?: {
|
|
88
113
|
container?: ViewStyle;
|
|
89
114
|
selectBox?: ViewStyle;
|
|
90
115
|
selectText?: TextStyle;
|
|
91
116
|
};
|
|
117
|
+
errorStyle?: TextStyle;
|
|
92
118
|
};
|
|
93
119
|
|
|
94
|
-
declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error,
|
|
120
|
+
declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, errorStyle, }: MultiPickerProps & {
|
|
121
|
+
error: string;
|
|
122
|
+
}): react_jsx_runtime.JSX.Element;
|
|
123
|
+
|
|
124
|
+
declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
|
|
95
125
|
|
|
96
|
-
declare
|
|
126
|
+
declare function MultiPickerGroup({ label, children, renderGroupIcon, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
|
|
97
127
|
|
|
98
128
|
declare const toggleValue: (arr: string[], value: string) => string[];
|
|
99
129
|
|
|
100
|
-
|
|
130
|
+
declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
|
|
131
|
+
|
|
132
|
+
export { type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import React$1 from 'react';
|
|
3
3
|
import { TextStyle, ViewStyle } from 'react-native';
|
|
4
4
|
|
|
5
|
+
type IconRenderer = (props: {
|
|
6
|
+
name: string;
|
|
7
|
+
size: number;
|
|
8
|
+
color: string;
|
|
9
|
+
}) => React.ReactNode;
|
|
10
|
+
|
|
5
11
|
type Option = {
|
|
6
12
|
label: string;
|
|
7
13
|
value: string;
|
|
@@ -46,11 +52,7 @@ type Props = {
|
|
|
46
52
|
renderTab?: (tab: Group, isActive: boolean, onPress: () => void) => React$1.ReactNode;
|
|
47
53
|
renderItem?: (item: Option, isSelected: boolean) => React$1.ReactNode;
|
|
48
54
|
renderContainer?: (children: React$1.ReactNode) => React$1.ReactNode;
|
|
49
|
-
renderIcon?:
|
|
50
|
-
name: string;
|
|
51
|
-
size: number;
|
|
52
|
-
color: string;
|
|
53
|
-
}) => React$1.ReactNode;
|
|
55
|
+
renderIcon?: IconRenderer;
|
|
54
56
|
onSelect: (value: string) => void;
|
|
55
57
|
onClose: () => void;
|
|
56
58
|
};
|
|
@@ -69,32 +71,62 @@ type MultiGroup = {
|
|
|
69
71
|
label: string;
|
|
70
72
|
data: MultiOption[];
|
|
71
73
|
};
|
|
74
|
+
type MultiPickerItemStyles = {
|
|
75
|
+
item?: ViewStyle;
|
|
76
|
+
label?: TextStyle;
|
|
77
|
+
circle?: ViewStyle;
|
|
78
|
+
activeCircle?: ViewStyle;
|
|
79
|
+
dot?: ViewStyle;
|
|
80
|
+
};
|
|
81
|
+
type MultiPickerItemProps = {
|
|
82
|
+
label: string;
|
|
83
|
+
selected: boolean;
|
|
84
|
+
onPress: () => void;
|
|
85
|
+
renderIcon?: IconRenderer;
|
|
86
|
+
styles?: MultiPickerItemStyles;
|
|
87
|
+
};
|
|
88
|
+
type MultiPickerGroupStyles = {
|
|
89
|
+
container?: ViewStyle;
|
|
90
|
+
header?: ViewStyle;
|
|
91
|
+
title?: TextStyle;
|
|
92
|
+
content?: ViewStyle;
|
|
93
|
+
icon?: ViewStyle;
|
|
94
|
+
};
|
|
95
|
+
type MultiPickerGroupProps = {
|
|
96
|
+
label: string;
|
|
97
|
+
children: React.ReactNode;
|
|
98
|
+
renderGroupIcon?: IconRenderer;
|
|
99
|
+
styles?: MultiPickerGroupStyles;
|
|
100
|
+
};
|
|
72
101
|
type MultiPickerProps = {
|
|
73
102
|
visible?: boolean;
|
|
74
103
|
setVisible?: (val: boolean) => void;
|
|
75
104
|
selectedValues: string[];
|
|
76
|
-
options
|
|
105
|
+
options?: MultiOption[];
|
|
77
106
|
groups?: MultiGroup[];
|
|
78
107
|
onChange: (val: string[]) => void;
|
|
79
108
|
label?: string;
|
|
80
109
|
placeholder?: string;
|
|
81
|
-
error?:
|
|
82
|
-
|
|
83
|
-
name: string;
|
|
84
|
-
size: number;
|
|
85
|
-
color: string;
|
|
86
|
-
}) => React.ReactNode;
|
|
110
|
+
error?: TextStyle;
|
|
111
|
+
renderInputIcon?: IconRenderer;
|
|
87
112
|
styles?: {
|
|
88
113
|
container?: ViewStyle;
|
|
89
114
|
selectBox?: ViewStyle;
|
|
90
115
|
selectText?: TextStyle;
|
|
91
116
|
};
|
|
117
|
+
errorStyle?: TextStyle;
|
|
92
118
|
};
|
|
93
119
|
|
|
94
|
-
declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error,
|
|
120
|
+
declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, errorStyle, }: MultiPickerProps & {
|
|
121
|
+
error: string;
|
|
122
|
+
}): react_jsx_runtime.JSX.Element;
|
|
123
|
+
|
|
124
|
+
declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
|
|
95
125
|
|
|
96
|
-
declare
|
|
126
|
+
declare function MultiPickerGroup({ label, children, renderGroupIcon, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
|
|
97
127
|
|
|
98
128
|
declare const toggleValue: (arr: string[], value: string) => string[];
|
|
99
129
|
|
|
100
|
-
|
|
130
|
+
declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
|
|
131
|
+
|
|
132
|
+
export { type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };
|
package/dist/index.js
CHANGED
|
@@ -20,6 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
+
MultiPickerGroup: () => MultiPickerGroup,
|
|
24
|
+
MultiPickerItem: () => MultiPickerItem,
|
|
23
25
|
MultiPickerModal: () => MultiPickerModal,
|
|
24
26
|
PickerModal: () => PickerModal,
|
|
25
27
|
groupOptions: () => groupOptions,
|
|
@@ -37,7 +39,7 @@ function PickerModal({
|
|
|
37
39
|
selectedValue,
|
|
38
40
|
options,
|
|
39
41
|
groups = [],
|
|
40
|
-
styles:
|
|
42
|
+
styles: styles3,
|
|
41
43
|
theme,
|
|
42
44
|
renderTab,
|
|
43
45
|
renderItem,
|
|
@@ -95,7 +97,7 @@ function PickerModal({
|
|
|
95
97
|
style: [
|
|
96
98
|
defaultStyles.container,
|
|
97
99
|
{ backgroundColor: bg },
|
|
98
|
-
|
|
100
|
+
styles3?.container
|
|
99
101
|
],
|
|
100
102
|
children: [
|
|
101
103
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -104,10 +106,10 @@ function PickerModal({
|
|
|
104
106
|
style: [
|
|
105
107
|
defaultStyles.doneBtn,
|
|
106
108
|
{ backgroundColor: primary },
|
|
107
|
-
|
|
109
|
+
styles3?.doneBtn
|
|
108
110
|
],
|
|
109
111
|
onPress: handleClose,
|
|
110
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.doneText,
|
|
112
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.doneText, styles3?.doneText], children: "Done" })
|
|
111
113
|
}
|
|
112
114
|
),
|
|
113
115
|
hasGroups && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
|
|
@@ -120,7 +122,7 @@ function PickerModal({
|
|
|
120
122
|
{
|
|
121
123
|
style: [
|
|
122
124
|
defaultStyles.tab,
|
|
123
|
-
|
|
125
|
+
styles3?.tab,
|
|
124
126
|
isActive && { backgroundColor: primary }
|
|
125
127
|
],
|
|
126
128
|
onPress: () => setActiveTab(index),
|
|
@@ -130,7 +132,7 @@ function PickerModal({
|
|
|
130
132
|
style: [
|
|
131
133
|
defaultStyles.tabText,
|
|
132
134
|
{ color: isActive ? "#fff" : text },
|
|
133
|
-
|
|
135
|
+
styles3?.tabText
|
|
134
136
|
],
|
|
135
137
|
children: tab.label
|
|
136
138
|
}
|
|
@@ -161,14 +163,14 @@ function PickerModal({
|
|
|
161
163
|
}
|
|
162
164
|
);
|
|
163
165
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
164
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style:
|
|
165
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.label,
|
|
166
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles3?.inputContainer, children: [
|
|
167
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.label, styles3?.label, labelStyle], children: label }),
|
|
166
168
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
167
169
|
import_react_native.TouchableOpacity,
|
|
168
170
|
{
|
|
169
171
|
style: [
|
|
170
172
|
defaultStyles.selectBox,
|
|
171
|
-
|
|
173
|
+
styles3?.selectBox,
|
|
172
174
|
selectBoxStyle,
|
|
173
175
|
error && { borderColor: "red" }
|
|
174
176
|
],
|
|
@@ -179,7 +181,7 @@ function PickerModal({
|
|
|
179
181
|
{
|
|
180
182
|
style: [
|
|
181
183
|
defaultStyles.selectText,
|
|
182
|
-
|
|
184
|
+
styles3?.selectText,
|
|
183
185
|
selectTextStyle
|
|
184
186
|
],
|
|
185
187
|
children: getLabel() || placeholder
|
|
@@ -193,7 +195,7 @@ function PickerModal({
|
|
|
193
195
|
]
|
|
194
196
|
}
|
|
195
197
|
),
|
|
196
|
-
error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error,
|
|
198
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles3?.error, errorStyle], children: error })
|
|
197
199
|
] }),
|
|
198
200
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) })
|
|
199
201
|
] });
|
|
@@ -275,13 +277,13 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
|
275
277
|
function MultiPickerGroup({
|
|
276
278
|
label,
|
|
277
279
|
children,
|
|
278
|
-
|
|
280
|
+
renderGroupIcon
|
|
279
281
|
}) {
|
|
280
282
|
const [open, setOpen] = (0, import_react2.useState)(true);
|
|
281
283
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.group, children: [
|
|
282
284
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.TouchableOpacity, { style: styles.header, onPress: () => setOpen(!open), children: [
|
|
283
285
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.title, children: label }),
|
|
284
|
-
|
|
286
|
+
renderGroupIcon ? renderGroupIcon({
|
|
285
287
|
name: open ? "chevron-up" : "chevron-down",
|
|
286
288
|
size: 18,
|
|
287
289
|
color: "#6B7280"
|
|
@@ -315,14 +317,38 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
|
315
317
|
function MultiPickerItem({
|
|
316
318
|
label,
|
|
317
319
|
selected,
|
|
318
|
-
onPress
|
|
320
|
+
onPress,
|
|
321
|
+
renderIcon,
|
|
322
|
+
styles: customStyles
|
|
319
323
|
}) {
|
|
320
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
325
|
+
import_react_native3.TouchableOpacity,
|
|
326
|
+
{
|
|
327
|
+
style: [defaultStyles2.item, customStyles?.item],
|
|
328
|
+
onPress,
|
|
329
|
+
activeOpacity: 0.8,
|
|
330
|
+
children: [
|
|
331
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [defaultStyles2.label, customStyles?.label], children: label }),
|
|
332
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
333
|
+
import_react_native3.View,
|
|
334
|
+
{
|
|
335
|
+
style: [
|
|
336
|
+
defaultStyles2.circle,
|
|
337
|
+
customStyles?.circle,
|
|
338
|
+
selected && [defaultStyles2.active, customStyles?.activeCircle]
|
|
339
|
+
],
|
|
340
|
+
children: selected && (renderIcon ? renderIcon({
|
|
341
|
+
name: "check",
|
|
342
|
+
size: 14,
|
|
343
|
+
color: "#fff"
|
|
344
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [defaultStyles2.dot, customStyles?.dot] }))
|
|
345
|
+
}
|
|
346
|
+
)
|
|
347
|
+
]
|
|
348
|
+
}
|
|
349
|
+
);
|
|
324
350
|
}
|
|
325
|
-
var
|
|
351
|
+
var defaultStyles2 = import_react_native3.StyleSheet.create({
|
|
326
352
|
item: {
|
|
327
353
|
flexDirection: "row",
|
|
328
354
|
justifyContent: "space-between",
|
|
@@ -345,10 +371,11 @@ var styles2 = import_react_native3.StyleSheet.create({
|
|
|
345
371
|
backgroundColor: "#22c55e",
|
|
346
372
|
borderColor: "#22c55e"
|
|
347
373
|
},
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
374
|
+
dot: {
|
|
375
|
+
width: 8,
|
|
376
|
+
height: 8,
|
|
377
|
+
borderRadius: 999,
|
|
378
|
+
backgroundColor: "#fff"
|
|
352
379
|
}
|
|
353
380
|
});
|
|
354
381
|
|
|
@@ -364,7 +391,8 @@ function MultiPickerModal({
|
|
|
364
391
|
label,
|
|
365
392
|
placeholder = "Select",
|
|
366
393
|
error,
|
|
367
|
-
|
|
394
|
+
renderInputIcon,
|
|
395
|
+
errorStyle
|
|
368
396
|
}) {
|
|
369
397
|
const [internalVisible, setInternalVisible] = (0, import_react3.useState)(false);
|
|
370
398
|
const isControlled = visible !== void 0 && setVisible !== void 0;
|
|
@@ -409,23 +437,23 @@ function MultiPickerModal({
|
|
|
409
437
|
));
|
|
410
438
|
};
|
|
411
439
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
412
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style:
|
|
413
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.TouchableOpacity, { style:
|
|
414
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style:
|
|
415
|
-
|
|
440
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.label, children: label }),
|
|
441
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.TouchableOpacity, { style: styles2.box, onPress: open, children: [
|
|
442
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.text, children: getLabel() }),
|
|
443
|
+
renderInputIcon ? renderInputIcon({
|
|
416
444
|
name: "chevron-down",
|
|
417
445
|
size: 18,
|
|
418
446
|
color: "#6B7280"
|
|
419
|
-
}) :
|
|
447
|
+
}) : null
|
|
420
448
|
] }),
|
|
421
|
-
error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style:
|
|
422
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style:
|
|
423
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TouchableOpacity, { onPress: close, style:
|
|
449
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles2.error, styles2?.error, errorStyle], children: error }),
|
|
450
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles2.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles2.container, children: [
|
|
451
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TouchableOpacity, { onPress: close, style: styles2.done, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: { color: "#fff" }, children: "Done" }) }),
|
|
424
452
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.ScrollView, { children: renderList() })
|
|
425
453
|
] }) }) })
|
|
426
454
|
] });
|
|
427
455
|
}
|
|
428
|
-
var
|
|
456
|
+
var styles2 = import_react_native4.StyleSheet.create({
|
|
429
457
|
label: {
|
|
430
458
|
marginBottom: 6,
|
|
431
459
|
fontSize: 14
|
|
@@ -443,6 +471,7 @@ var styles3 = import_react_native4.StyleSheet.create({
|
|
|
443
471
|
},
|
|
444
472
|
error: {
|
|
445
473
|
color: "red",
|
|
474
|
+
fontSize: 12,
|
|
446
475
|
marginTop: 4
|
|
447
476
|
},
|
|
448
477
|
overlay: {
|
|
@@ -475,6 +504,8 @@ var groupOptions = (options, config) => {
|
|
|
475
504
|
};
|
|
476
505
|
// Annotate the CommonJS export names for ESM import in node:
|
|
477
506
|
0 && (module.exports = {
|
|
507
|
+
MultiPickerGroup,
|
|
508
|
+
MultiPickerItem,
|
|
478
509
|
MultiPickerModal,
|
|
479
510
|
PickerModal,
|
|
480
511
|
groupOptions,
|
package/dist/index.mjs
CHANGED
|
@@ -15,7 +15,7 @@ function PickerModal({
|
|
|
15
15
|
selectedValue,
|
|
16
16
|
options,
|
|
17
17
|
groups = [],
|
|
18
|
-
styles:
|
|
18
|
+
styles: styles3,
|
|
19
19
|
theme,
|
|
20
20
|
renderTab,
|
|
21
21
|
renderItem,
|
|
@@ -73,7 +73,7 @@ function PickerModal({
|
|
|
73
73
|
style: [
|
|
74
74
|
defaultStyles.container,
|
|
75
75
|
{ backgroundColor: bg },
|
|
76
|
-
|
|
76
|
+
styles3?.container
|
|
77
77
|
],
|
|
78
78
|
children: [
|
|
79
79
|
/* @__PURE__ */ jsx(
|
|
@@ -82,10 +82,10 @@ function PickerModal({
|
|
|
82
82
|
style: [
|
|
83
83
|
defaultStyles.doneBtn,
|
|
84
84
|
{ backgroundColor: primary },
|
|
85
|
-
|
|
85
|
+
styles3?.doneBtn
|
|
86
86
|
],
|
|
87
87
|
onPress: handleClose,
|
|
88
|
-
children: /* @__PURE__ */ jsx(Text, { style: [defaultStyles.doneText,
|
|
88
|
+
children: /* @__PURE__ */ jsx(Text, { style: [defaultStyles.doneText, styles3?.doneText], children: "Done" })
|
|
89
89
|
}
|
|
90
90
|
),
|
|
91
91
|
hasGroups && /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
|
|
@@ -98,7 +98,7 @@ function PickerModal({
|
|
|
98
98
|
{
|
|
99
99
|
style: [
|
|
100
100
|
defaultStyles.tab,
|
|
101
|
-
|
|
101
|
+
styles3?.tab,
|
|
102
102
|
isActive && { backgroundColor: primary }
|
|
103
103
|
],
|
|
104
104
|
onPress: () => setActiveTab(index),
|
|
@@ -108,7 +108,7 @@ function PickerModal({
|
|
|
108
108
|
style: [
|
|
109
109
|
defaultStyles.tabText,
|
|
110
110
|
{ color: isActive ? "#fff" : text },
|
|
111
|
-
|
|
111
|
+
styles3?.tabText
|
|
112
112
|
],
|
|
113
113
|
children: tab.label
|
|
114
114
|
}
|
|
@@ -139,14 +139,14 @@ function PickerModal({
|
|
|
139
139
|
}
|
|
140
140
|
);
|
|
141
141
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
142
|
-
/* @__PURE__ */ jsxs(View, { style:
|
|
143
|
-
label && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label,
|
|
142
|
+
/* @__PURE__ */ jsxs(View, { style: styles3?.inputContainer, children: [
|
|
143
|
+
label && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, styles3?.label, labelStyle], children: label }),
|
|
144
144
|
/* @__PURE__ */ jsxs(
|
|
145
145
|
TouchableOpacity,
|
|
146
146
|
{
|
|
147
147
|
style: [
|
|
148
148
|
defaultStyles.selectBox,
|
|
149
|
-
|
|
149
|
+
styles3?.selectBox,
|
|
150
150
|
selectBoxStyle,
|
|
151
151
|
error && { borderColor: "red" }
|
|
152
152
|
],
|
|
@@ -157,7 +157,7 @@ function PickerModal({
|
|
|
157
157
|
{
|
|
158
158
|
style: [
|
|
159
159
|
defaultStyles.selectText,
|
|
160
|
-
|
|
160
|
+
styles3?.selectText,
|
|
161
161
|
selectTextStyle
|
|
162
162
|
],
|
|
163
163
|
children: getLabel() || placeholder
|
|
@@ -171,7 +171,7 @@ function PickerModal({
|
|
|
171
171
|
]
|
|
172
172
|
}
|
|
173
173
|
),
|
|
174
|
-
error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error,
|
|
174
|
+
error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles3?.error, errorStyle], children: error })
|
|
175
175
|
] }),
|
|
176
176
|
/* @__PURE__ */ jsx(Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx(View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) })
|
|
177
177
|
] });
|
|
@@ -260,13 +260,13 @@ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
|
260
260
|
function MultiPickerGroup({
|
|
261
261
|
label,
|
|
262
262
|
children,
|
|
263
|
-
|
|
263
|
+
renderGroupIcon
|
|
264
264
|
}) {
|
|
265
265
|
const [open, setOpen] = useState2(true);
|
|
266
266
|
return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
|
|
267
267
|
/* @__PURE__ */ jsxs2(TouchableOpacity2, { style: styles.header, onPress: () => setOpen(!open), children: [
|
|
268
268
|
/* @__PURE__ */ jsx2(Text2, { style: styles.title, children: label }),
|
|
269
|
-
|
|
269
|
+
renderGroupIcon ? renderGroupIcon({
|
|
270
270
|
name: open ? "chevron-up" : "chevron-down",
|
|
271
271
|
size: 18,
|
|
272
272
|
color: "#6B7280"
|
|
@@ -300,14 +300,38 @@ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
|
300
300
|
function MultiPickerItem({
|
|
301
301
|
label,
|
|
302
302
|
selected,
|
|
303
|
-
onPress
|
|
303
|
+
onPress,
|
|
304
|
+
renderIcon,
|
|
305
|
+
styles: customStyles
|
|
304
306
|
}) {
|
|
305
|
-
return /* @__PURE__ */ jsxs3(
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
307
|
+
return /* @__PURE__ */ jsxs3(
|
|
308
|
+
TouchableOpacity3,
|
|
309
|
+
{
|
|
310
|
+
style: [defaultStyles2.item, customStyles?.item],
|
|
311
|
+
onPress,
|
|
312
|
+
activeOpacity: 0.8,
|
|
313
|
+
children: [
|
|
314
|
+
/* @__PURE__ */ jsx3(Text3, { style: [defaultStyles2.label, customStyles?.label], children: label }),
|
|
315
|
+
/* @__PURE__ */ jsx3(
|
|
316
|
+
View3,
|
|
317
|
+
{
|
|
318
|
+
style: [
|
|
319
|
+
defaultStyles2.circle,
|
|
320
|
+
customStyles?.circle,
|
|
321
|
+
selected && [defaultStyles2.active, customStyles?.activeCircle]
|
|
322
|
+
],
|
|
323
|
+
children: selected && (renderIcon ? renderIcon({
|
|
324
|
+
name: "check",
|
|
325
|
+
size: 14,
|
|
326
|
+
color: "#fff"
|
|
327
|
+
}) : /* @__PURE__ */ jsx3(View3, { style: [defaultStyles2.dot, customStyles?.dot] }))
|
|
328
|
+
}
|
|
329
|
+
)
|
|
330
|
+
]
|
|
331
|
+
}
|
|
332
|
+
);
|
|
309
333
|
}
|
|
310
|
-
var
|
|
334
|
+
var defaultStyles2 = StyleSheet3.create({
|
|
311
335
|
item: {
|
|
312
336
|
flexDirection: "row",
|
|
313
337
|
justifyContent: "space-between",
|
|
@@ -330,10 +354,11 @@ var styles2 = StyleSheet3.create({
|
|
|
330
354
|
backgroundColor: "#22c55e",
|
|
331
355
|
borderColor: "#22c55e"
|
|
332
356
|
},
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
357
|
+
dot: {
|
|
358
|
+
width: 8,
|
|
359
|
+
height: 8,
|
|
360
|
+
borderRadius: 999,
|
|
361
|
+
backgroundColor: "#fff"
|
|
337
362
|
}
|
|
338
363
|
});
|
|
339
364
|
|
|
@@ -349,7 +374,8 @@ function MultiPickerModal({
|
|
|
349
374
|
label,
|
|
350
375
|
placeholder = "Select",
|
|
351
376
|
error,
|
|
352
|
-
|
|
377
|
+
renderInputIcon,
|
|
378
|
+
errorStyle
|
|
353
379
|
}) {
|
|
354
380
|
const [internalVisible, setInternalVisible] = useState3(false);
|
|
355
381
|
const isControlled = visible !== void 0 && setVisible !== void 0;
|
|
@@ -394,23 +420,23 @@ function MultiPickerModal({
|
|
|
394
420
|
));
|
|
395
421
|
};
|
|
396
422
|
return /* @__PURE__ */ jsxs4(Fragment2, { children: [
|
|
397
|
-
label && /* @__PURE__ */ jsx4(Text4, { style:
|
|
398
|
-
/* @__PURE__ */ jsxs4(TouchableOpacity4, { style:
|
|
399
|
-
/* @__PURE__ */ jsx4(Text4, { style:
|
|
400
|
-
|
|
423
|
+
label && /* @__PURE__ */ jsx4(Text4, { style: styles2.label, children: label }),
|
|
424
|
+
/* @__PURE__ */ jsxs4(TouchableOpacity4, { style: styles2.box, onPress: open, children: [
|
|
425
|
+
/* @__PURE__ */ jsx4(Text4, { style: styles2.text, children: getLabel() }),
|
|
426
|
+
renderInputIcon ? renderInputIcon({
|
|
401
427
|
name: "chevron-down",
|
|
402
428
|
size: 18,
|
|
403
429
|
color: "#6B7280"
|
|
404
|
-
}) :
|
|
430
|
+
}) : null
|
|
405
431
|
] }),
|
|
406
|
-
error && /* @__PURE__ */ jsx4(Text4, { style:
|
|
407
|
-
/* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style:
|
|
408
|
-
/* @__PURE__ */ jsx4(TouchableOpacity4, { onPress: close, style:
|
|
432
|
+
error && /* @__PURE__ */ jsx4(Text4, { style: [styles2.error, styles2?.error, errorStyle], children: error }),
|
|
433
|
+
/* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style: styles2.overlay, children: /* @__PURE__ */ jsxs4(View4, { style: styles2.container, children: [
|
|
434
|
+
/* @__PURE__ */ jsx4(TouchableOpacity4, { onPress: close, style: styles2.done, children: /* @__PURE__ */ jsx4(Text4, { style: { color: "#fff" }, children: "Done" }) }),
|
|
409
435
|
/* @__PURE__ */ jsx4(ScrollView2, { children: renderList() })
|
|
410
436
|
] }) }) })
|
|
411
437
|
] });
|
|
412
438
|
}
|
|
413
|
-
var
|
|
439
|
+
var styles2 = StyleSheet4.create({
|
|
414
440
|
label: {
|
|
415
441
|
marginBottom: 6,
|
|
416
442
|
fontSize: 14
|
|
@@ -428,6 +454,7 @@ var styles3 = StyleSheet4.create({
|
|
|
428
454
|
},
|
|
429
455
|
error: {
|
|
430
456
|
color: "red",
|
|
457
|
+
fontSize: 12,
|
|
431
458
|
marginTop: 4
|
|
432
459
|
},
|
|
433
460
|
overlay: {
|
|
@@ -459,6 +486,8 @@ var groupOptions = (options, config) => {
|
|
|
459
486
|
})).filter((g) => g.data.length > 0);
|
|
460
487
|
};
|
|
461
488
|
export {
|
|
489
|
+
MultiPickerGroup,
|
|
490
|
+
MultiPickerItem,
|
|
462
491
|
MultiPickerModal,
|
|
463
492
|
PickerModal,
|
|
464
493
|
groupOptions,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kaushverse/pickify",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "A fully customizable React Native picker with search, multi-select, grouping, and async support.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
"react-native": ">=0.70"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
+
"@expo/vector-icons": "^15.1.1",
|
|
53
54
|
"@react-native-picker/picker": "^2.11.4"
|
|
54
55
|
},
|
|
55
56
|
"devDependencies": {
|