@kaushverse/pickify 1.0.7 → 1.0.8
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 +50 -13
- package/dist/index.d.ts +50 -13
- package/dist/index.js +57 -28
- package/dist/index.mjs +55 -28
- 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,21 +71,44 @@ 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
|
+
renderIcon?: 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
110
|
error?: string;
|
|
82
|
-
renderIcon?:
|
|
83
|
-
name: string;
|
|
84
|
-
size: number;
|
|
85
|
-
color: string;
|
|
86
|
-
}) => React.ReactNode;
|
|
111
|
+
renderIcon?: IconRenderer;
|
|
87
112
|
styles?: {
|
|
88
113
|
container?: ViewStyle;
|
|
89
114
|
selectBox?: ViewStyle;
|
|
@@ -93,8 +118,20 @@ type MultiPickerProps = {
|
|
|
93
118
|
|
|
94
119
|
declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderIcon, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
|
|
95
120
|
|
|
96
|
-
declare
|
|
121
|
+
declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
|
|
122
|
+
|
|
123
|
+
declare function MultiPickerGroup({ label, children, renderIcon, }: {
|
|
124
|
+
label: string;
|
|
125
|
+
children: React$1.ReactNode;
|
|
126
|
+
renderIcon?: (props: {
|
|
127
|
+
name: string;
|
|
128
|
+
size: number;
|
|
129
|
+
color: string;
|
|
130
|
+
}) => React$1.ReactNode;
|
|
131
|
+
}): react_jsx_runtime.JSX.Element;
|
|
97
132
|
|
|
98
133
|
declare const toggleValue: (arr: string[], value: string) => string[];
|
|
99
134
|
|
|
100
|
-
|
|
135
|
+
declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
|
|
136
|
+
|
|
137
|
+
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,21 +71,44 @@ 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
|
+
renderIcon?: 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
110
|
error?: string;
|
|
82
|
-
renderIcon?:
|
|
83
|
-
name: string;
|
|
84
|
-
size: number;
|
|
85
|
-
color: string;
|
|
86
|
-
}) => React.ReactNode;
|
|
111
|
+
renderIcon?: IconRenderer;
|
|
87
112
|
styles?: {
|
|
88
113
|
container?: ViewStyle;
|
|
89
114
|
selectBox?: ViewStyle;
|
|
@@ -93,8 +118,20 @@ type MultiPickerProps = {
|
|
|
93
118
|
|
|
94
119
|
declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderIcon, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
|
|
95
120
|
|
|
96
|
-
declare
|
|
121
|
+
declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
|
|
122
|
+
|
|
123
|
+
declare function MultiPickerGroup({ label, children, renderIcon, }: {
|
|
124
|
+
label: string;
|
|
125
|
+
children: React$1.ReactNode;
|
|
126
|
+
renderIcon?: (props: {
|
|
127
|
+
name: string;
|
|
128
|
+
size: number;
|
|
129
|
+
color: string;
|
|
130
|
+
}) => React$1.ReactNode;
|
|
131
|
+
}): react_jsx_runtime.JSX.Element;
|
|
97
132
|
|
|
98
133
|
declare const toggleValue: (arr: string[], value: string) => string[];
|
|
99
134
|
|
|
100
|
-
|
|
135
|
+
declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
|
|
136
|
+
|
|
137
|
+
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
|
] });
|
|
@@ -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
|
|
|
@@ -409,23 +436,23 @@ function MultiPickerModal({
|
|
|
409
436
|
));
|
|
410
437
|
};
|
|
411
438
|
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:
|
|
439
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.label, children: label }),
|
|
440
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.TouchableOpacity, { style: styles2.box, onPress: open, children: [
|
|
441
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.text, children: getLabel() }),
|
|
415
442
|
renderIcon ? renderIcon({
|
|
416
443
|
name: "chevron-down",
|
|
417
444
|
size: 18,
|
|
418
445
|
color: "#6B7280"
|
|
419
446
|
}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { children: "\u2304" })
|
|
420
447
|
] }),
|
|
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:
|
|
448
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.error, children: error }),
|
|
449
|
+
/* @__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: [
|
|
450
|
+
/* @__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
451
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.ScrollView, { children: renderList() })
|
|
425
452
|
] }) }) })
|
|
426
453
|
] });
|
|
427
454
|
}
|
|
428
|
-
var
|
|
455
|
+
var styles2 = import_react_native4.StyleSheet.create({
|
|
429
456
|
label: {
|
|
430
457
|
marginBottom: 6,
|
|
431
458
|
fontSize: 14
|
|
@@ -475,6 +502,8 @@ var groupOptions = (options, config) => {
|
|
|
475
502
|
};
|
|
476
503
|
// Annotate the CommonJS export names for ESM import in node:
|
|
477
504
|
0 && (module.exports = {
|
|
505
|
+
MultiPickerGroup,
|
|
506
|
+
MultiPickerItem,
|
|
478
507
|
MultiPickerModal,
|
|
479
508
|
PickerModal,
|
|
480
509
|
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
|
] });
|
|
@@ -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
|
|
|
@@ -394,23 +419,23 @@ function MultiPickerModal({
|
|
|
394
419
|
));
|
|
395
420
|
};
|
|
396
421
|
return /* @__PURE__ */ jsxs4(Fragment2, { children: [
|
|
397
|
-
label && /* @__PURE__ */ jsx4(Text4, { style:
|
|
398
|
-
/* @__PURE__ */ jsxs4(TouchableOpacity4, { style:
|
|
399
|
-
/* @__PURE__ */ jsx4(Text4, { style:
|
|
422
|
+
label && /* @__PURE__ */ jsx4(Text4, { style: styles2.label, children: label }),
|
|
423
|
+
/* @__PURE__ */ jsxs4(TouchableOpacity4, { style: styles2.box, onPress: open, children: [
|
|
424
|
+
/* @__PURE__ */ jsx4(Text4, { style: styles2.text, children: getLabel() }),
|
|
400
425
|
renderIcon ? renderIcon({
|
|
401
426
|
name: "chevron-down",
|
|
402
427
|
size: 18,
|
|
403
428
|
color: "#6B7280"
|
|
404
429
|
}) : /* @__PURE__ */ jsx4(Text4, { children: "\u2304" })
|
|
405
430
|
] }),
|
|
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:
|
|
431
|
+
error && /* @__PURE__ */ jsx4(Text4, { style: styles2.error, children: error }),
|
|
432
|
+
/* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style: styles2.overlay, children: /* @__PURE__ */ jsxs4(View4, { style: styles2.container, children: [
|
|
433
|
+
/* @__PURE__ */ jsx4(TouchableOpacity4, { onPress: close, style: styles2.done, children: /* @__PURE__ */ jsx4(Text4, { style: { color: "#fff" }, children: "Done" }) }),
|
|
409
434
|
/* @__PURE__ */ jsx4(ScrollView2, { children: renderList() })
|
|
410
435
|
] }) }) })
|
|
411
436
|
] });
|
|
412
437
|
}
|
|
413
|
-
var
|
|
438
|
+
var styles2 = StyleSheet4.create({
|
|
414
439
|
label: {
|
|
415
440
|
marginBottom: 6,
|
|
416
441
|
fontSize: 14
|
|
@@ -459,6 +484,8 @@ var groupOptions = (options, config) => {
|
|
|
459
484
|
})).filter((g) => g.data.length > 0);
|
|
460
485
|
};
|
|
461
486
|
export {
|
|
487
|
+
MultiPickerGroup,
|
|
488
|
+
MultiPickerItem,
|
|
462
489
|
MultiPickerModal,
|
|
463
490
|
PickerModal,
|
|
464
491
|
groupOptions,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kaushverse/pickify",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
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": {
|