@kaushverse/pickify 1.1.0 → 1.1.3
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 +35 -7
- package/dist/index.d.ts +35 -7
- package/dist/index.js +175 -8
- package/dist/index.mjs +169 -8
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React$1 from 'react';
|
|
3
|
-
import { TextStyle, ViewStyle } from 'react-native';
|
|
3
|
+
import { TextStyle, ViewStyle, Animated } from 'react-native';
|
|
4
4
|
|
|
5
5
|
type IconRenderer = (props: {
|
|
6
6
|
name?: string;
|
|
@@ -37,7 +37,7 @@ type PickerStyles = {
|
|
|
37
37
|
selectText?: TextStyle;
|
|
38
38
|
error?: TextStyle;
|
|
39
39
|
};
|
|
40
|
-
type Props = {
|
|
40
|
+
type Props$1 = {
|
|
41
41
|
labelStyle?: TextStyle;
|
|
42
42
|
selectBoxStyle?: ViewStyle;
|
|
43
43
|
selectTextStyle?: TextStyle;
|
|
@@ -57,7 +57,7 @@ type Props = {
|
|
|
57
57
|
onClose: () => void;
|
|
58
58
|
};
|
|
59
59
|
|
|
60
|
-
declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, labelStyle, selectBoxStyle, selectTextStyle, errorStyle, setVisible }: Props & {
|
|
60
|
+
declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, labelStyle, selectBoxStyle, selectTextStyle, errorStyle, setVisible }: Props$1 & {
|
|
61
61
|
label?: string;
|
|
62
62
|
placeholder?: string;
|
|
63
63
|
error?: string;
|
|
@@ -82,7 +82,7 @@ type MultiPickerItemProps = {
|
|
|
82
82
|
label: string;
|
|
83
83
|
selected: boolean;
|
|
84
84
|
onPress: () => void;
|
|
85
|
-
|
|
85
|
+
renderItemIcon?: IconRenderer;
|
|
86
86
|
styles?: MultiPickerItemStyles;
|
|
87
87
|
};
|
|
88
88
|
type MultiPickerGroupStyles = {
|
|
@@ -122,12 +122,40 @@ type MultiPickerProps = {
|
|
|
122
122
|
error?: string;
|
|
123
123
|
renderInputIcon?: IconRenderer;
|
|
124
124
|
renderGroupIcon?: IconRenderer;
|
|
125
|
+
renderItemIcon?: IconRenderer;
|
|
125
126
|
styles?: MultiPickerStyles;
|
|
126
127
|
};
|
|
127
128
|
|
|
128
|
-
declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
|
|
129
|
+
declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, renderItemIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
|
|
130
|
+
|
|
131
|
+
type Action = {
|
|
132
|
+
icon: string;
|
|
133
|
+
onPress: () => void;
|
|
134
|
+
};
|
|
135
|
+
type FloatingButtonStyles = {
|
|
136
|
+
container?: ViewStyle;
|
|
137
|
+
mainButton?: ViewStyle;
|
|
138
|
+
secondaryButton?: ViewStyle;
|
|
139
|
+
mainIcon?: TextStyle;
|
|
140
|
+
secondaryIcon?: TextStyle;
|
|
141
|
+
};
|
|
142
|
+
type Props = {
|
|
143
|
+
actions: Action[];
|
|
144
|
+
mode?: "vertical" | "horizontal" | "circle";
|
|
145
|
+
radius?: number;
|
|
146
|
+
renderIcon?: IconRenderer;
|
|
147
|
+
styles?: FloatingButtonStyles;
|
|
148
|
+
style?: ViewStyle;
|
|
149
|
+
};
|
|
150
|
+
declare class FloatingButton extends React$1.Component<Props> {
|
|
151
|
+
animation: Animated.Value;
|
|
152
|
+
open: boolean;
|
|
153
|
+
toggleMenu: () => void;
|
|
154
|
+
renderAction: (action: Action, index: number) => react_jsx_runtime.JSX.Element;
|
|
155
|
+
render(): react_jsx_runtime.JSX.Element;
|
|
156
|
+
}
|
|
129
157
|
|
|
130
|
-
declare function MultiPickerItem({ label, selected, onPress,
|
|
158
|
+
declare function MultiPickerItem({ label, selected, onPress, renderItemIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
|
|
131
159
|
|
|
132
160
|
declare function MultiPickerGroup({ label, children, renderGroupIcon, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
|
|
133
161
|
|
|
@@ -135,4 +163,4 @@ declare const toggleValue: (arr: string[], value: string) => string[];
|
|
|
135
163
|
|
|
136
164
|
declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
|
|
137
165
|
|
|
138
|
-
export { type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type MultiPickerStyles, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };
|
|
166
|
+
export { FloatingButton, type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type MultiPickerStyles, type Option, PickerModal, type PickerStyles, type Props$1 as Props, type Theme, groupOptions, toggleValue };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React$1 from 'react';
|
|
3
|
-
import { TextStyle, ViewStyle } from 'react-native';
|
|
3
|
+
import { TextStyle, ViewStyle, Animated } from 'react-native';
|
|
4
4
|
|
|
5
5
|
type IconRenderer = (props: {
|
|
6
6
|
name?: string;
|
|
@@ -37,7 +37,7 @@ type PickerStyles = {
|
|
|
37
37
|
selectText?: TextStyle;
|
|
38
38
|
error?: TextStyle;
|
|
39
39
|
};
|
|
40
|
-
type Props = {
|
|
40
|
+
type Props$1 = {
|
|
41
41
|
labelStyle?: TextStyle;
|
|
42
42
|
selectBoxStyle?: ViewStyle;
|
|
43
43
|
selectTextStyle?: TextStyle;
|
|
@@ -57,7 +57,7 @@ type Props = {
|
|
|
57
57
|
onClose: () => void;
|
|
58
58
|
};
|
|
59
59
|
|
|
60
|
-
declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, labelStyle, selectBoxStyle, selectTextStyle, errorStyle, setVisible }: Props & {
|
|
60
|
+
declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, labelStyle, selectBoxStyle, selectTextStyle, errorStyle, setVisible }: Props$1 & {
|
|
61
61
|
label?: string;
|
|
62
62
|
placeholder?: string;
|
|
63
63
|
error?: string;
|
|
@@ -82,7 +82,7 @@ type MultiPickerItemProps = {
|
|
|
82
82
|
label: string;
|
|
83
83
|
selected: boolean;
|
|
84
84
|
onPress: () => void;
|
|
85
|
-
|
|
85
|
+
renderItemIcon?: IconRenderer;
|
|
86
86
|
styles?: MultiPickerItemStyles;
|
|
87
87
|
};
|
|
88
88
|
type MultiPickerGroupStyles = {
|
|
@@ -122,12 +122,40 @@ type MultiPickerProps = {
|
|
|
122
122
|
error?: string;
|
|
123
123
|
renderInputIcon?: IconRenderer;
|
|
124
124
|
renderGroupIcon?: IconRenderer;
|
|
125
|
+
renderItemIcon?: IconRenderer;
|
|
125
126
|
styles?: MultiPickerStyles;
|
|
126
127
|
};
|
|
127
128
|
|
|
128
|
-
declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
|
|
129
|
+
declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, renderItemIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
|
|
130
|
+
|
|
131
|
+
type Action = {
|
|
132
|
+
icon: string;
|
|
133
|
+
onPress: () => void;
|
|
134
|
+
};
|
|
135
|
+
type FloatingButtonStyles = {
|
|
136
|
+
container?: ViewStyle;
|
|
137
|
+
mainButton?: ViewStyle;
|
|
138
|
+
secondaryButton?: ViewStyle;
|
|
139
|
+
mainIcon?: TextStyle;
|
|
140
|
+
secondaryIcon?: TextStyle;
|
|
141
|
+
};
|
|
142
|
+
type Props = {
|
|
143
|
+
actions: Action[];
|
|
144
|
+
mode?: "vertical" | "horizontal" | "circle";
|
|
145
|
+
radius?: number;
|
|
146
|
+
renderIcon?: IconRenderer;
|
|
147
|
+
styles?: FloatingButtonStyles;
|
|
148
|
+
style?: ViewStyle;
|
|
149
|
+
};
|
|
150
|
+
declare class FloatingButton extends React$1.Component<Props> {
|
|
151
|
+
animation: Animated.Value;
|
|
152
|
+
open: boolean;
|
|
153
|
+
toggleMenu: () => void;
|
|
154
|
+
renderAction: (action: Action, index: number) => react_jsx_runtime.JSX.Element;
|
|
155
|
+
render(): react_jsx_runtime.JSX.Element;
|
|
156
|
+
}
|
|
129
157
|
|
|
130
|
-
declare function MultiPickerItem({ label, selected, onPress,
|
|
158
|
+
declare function MultiPickerItem({ label, selected, onPress, renderItemIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
|
|
131
159
|
|
|
132
160
|
declare function MultiPickerGroup({ label, children, renderGroupIcon, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
|
|
133
161
|
|
|
@@ -135,4 +163,4 @@ declare const toggleValue: (arr: string[], value: string) => string[];
|
|
|
135
163
|
|
|
136
164
|
declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
|
|
137
165
|
|
|
138
|
-
export { type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type MultiPickerStyles, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };
|
|
166
|
+
export { FloatingButton, type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type MultiPickerStyles, type Option, PickerModal, type PickerStyles, type Props$1 as Props, type Theme, groupOptions, toggleValue };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,11 +17,20 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
18
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
29
|
|
|
20
30
|
// src/index.ts
|
|
21
31
|
var index_exports = {};
|
|
22
32
|
__export(index_exports, {
|
|
33
|
+
FloatingButton: () => FloatingButton,
|
|
23
34
|
MultiPickerGroup: () => MultiPickerGroup,
|
|
24
35
|
MultiPickerItem: () => MultiPickerItem,
|
|
25
36
|
MultiPickerModal: () => MultiPickerModal,
|
|
@@ -353,7 +364,7 @@ function MultiPickerItem({
|
|
|
353
364
|
label,
|
|
354
365
|
selected,
|
|
355
366
|
onPress,
|
|
356
|
-
|
|
367
|
+
renderItemIcon,
|
|
357
368
|
styles: customStyles
|
|
358
369
|
}) {
|
|
359
370
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
@@ -372,7 +383,7 @@ function MultiPickerItem({
|
|
|
372
383
|
customStyles?.circle,
|
|
373
384
|
selected && [defaultStyles2.active, customStyles?.activeCircle]
|
|
374
385
|
],
|
|
375
|
-
children: selected && (
|
|
386
|
+
children: selected && (renderItemIcon ? renderItemIcon({
|
|
376
387
|
name: "check",
|
|
377
388
|
size: 14,
|
|
378
389
|
color: "#fff"
|
|
@@ -428,6 +439,7 @@ function MultiPickerModal({
|
|
|
428
439
|
error,
|
|
429
440
|
renderInputIcon,
|
|
430
441
|
renderGroupIcon,
|
|
442
|
+
renderItemIcon,
|
|
431
443
|
styles: styles2
|
|
432
444
|
}) {
|
|
433
445
|
const [internalVisible, setInternalVisible] = (0, import_react3.useState)(false);
|
|
@@ -446,7 +458,7 @@ function MultiPickerModal({
|
|
|
446
458
|
onChange(updated);
|
|
447
459
|
};
|
|
448
460
|
const getLabel = () => {
|
|
449
|
-
if (selectedValues
|
|
461
|
+
if (!selectedValues?.length) return placeholder;
|
|
450
462
|
const all = groups.length ? groups.flatMap((g) => g.data) : options;
|
|
451
463
|
return all.filter((o) => selectedValues.includes(o.value)).map((o) => o.label).join(", ");
|
|
452
464
|
};
|
|
@@ -462,7 +474,9 @@ function MultiPickerModal({
|
|
|
462
474
|
{
|
|
463
475
|
label: item.label,
|
|
464
476
|
selected: selectedValues.includes(item.value),
|
|
465
|
-
onPress: () => handleSelect(item.value)
|
|
477
|
+
onPress: () => handleSelect(item.value),
|
|
478
|
+
renderItemIcon,
|
|
479
|
+
styles: styles2?.item
|
|
466
480
|
},
|
|
467
481
|
item.value
|
|
468
482
|
))
|
|
@@ -475,13 +489,15 @@ function MultiPickerModal({
|
|
|
475
489
|
{
|
|
476
490
|
label: item.label,
|
|
477
491
|
selected: selectedValues.includes(item.value),
|
|
478
|
-
onPress: () => handleSelect(item.value)
|
|
492
|
+
onPress: () => handleSelect(item.value),
|
|
493
|
+
renderItemIcon,
|
|
494
|
+
styles: styles2?.item
|
|
479
495
|
},
|
|
480
496
|
item.value
|
|
481
497
|
));
|
|
482
498
|
};
|
|
483
499
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
484
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.label, styles2?.label], children: label }),
|
|
500
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.label, styles2?.label], children: label }),
|
|
485
501
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
486
502
|
import_react_native4.TouchableOpacity,
|
|
487
503
|
{
|
|
@@ -497,9 +513,16 @@ function MultiPickerModal({
|
|
|
497
513
|
]
|
|
498
514
|
}
|
|
499
515
|
),
|
|
500
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.error, styles2?.error], children: error }),
|
|
516
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.error, styles2?.error], children: error }),
|
|
501
517
|
/* @__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: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [defaultStyles3.container, styles2?.container], children: [
|
|
502
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
518
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
519
|
+
import_react_native4.TouchableOpacity,
|
|
520
|
+
{
|
|
521
|
+
onPress: close,
|
|
522
|
+
style: [defaultStyles3.done, styles2?.doneBtn],
|
|
523
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" })
|
|
524
|
+
}
|
|
525
|
+
),
|
|
503
526
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.ScrollView, { children: renderList() })
|
|
504
527
|
] }) }) })
|
|
505
528
|
] });
|
|
@@ -552,6 +575,149 @@ var defaultStyles3 = import_react_native4.StyleSheet.create({
|
|
|
552
575
|
}
|
|
553
576
|
});
|
|
554
577
|
|
|
578
|
+
// src/core/FloatingButton.tsx
|
|
579
|
+
var import_react4 = __toESM(require("react"));
|
|
580
|
+
var import_react_native5 = require("react-native");
|
|
581
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
582
|
+
var FloatingButton = class extends import_react4.default.Component {
|
|
583
|
+
animation = new import_react_native5.Animated.Value(0);
|
|
584
|
+
open = false;
|
|
585
|
+
toggleMenu = () => {
|
|
586
|
+
import_react_native5.Animated.spring(this.animation, {
|
|
587
|
+
toValue: this.open ? 0 : 1,
|
|
588
|
+
useNativeDriver: true,
|
|
589
|
+
damping: 12,
|
|
590
|
+
mass: 0.6,
|
|
591
|
+
stiffness: 180
|
|
592
|
+
}).start();
|
|
593
|
+
this.open = !this.open;
|
|
594
|
+
};
|
|
595
|
+
renderAction = (action, index) => {
|
|
596
|
+
const {
|
|
597
|
+
mode = "vertical",
|
|
598
|
+
radius = 100,
|
|
599
|
+
actions,
|
|
600
|
+
renderIcon,
|
|
601
|
+
styles: styles2
|
|
602
|
+
} = this.props;
|
|
603
|
+
let translateX = 0;
|
|
604
|
+
let translateY = 0;
|
|
605
|
+
if (mode === "vertical") {
|
|
606
|
+
translateY = -60 * (index + 1);
|
|
607
|
+
}
|
|
608
|
+
if (mode === "horizontal") {
|
|
609
|
+
translateX = -60 * (index + 1);
|
|
610
|
+
}
|
|
611
|
+
if (mode === "circle") {
|
|
612
|
+
const angle = index / actions.length * Math.PI;
|
|
613
|
+
translateX = radius * Math.cos(angle);
|
|
614
|
+
translateY = -radius * Math.sin(angle);
|
|
615
|
+
}
|
|
616
|
+
const animStyle = {
|
|
617
|
+
transform: [
|
|
618
|
+
{
|
|
619
|
+
translateX: this.animation.interpolate({
|
|
620
|
+
inputRange: [0, 1],
|
|
621
|
+
outputRange: [0, translateX]
|
|
622
|
+
})
|
|
623
|
+
},
|
|
624
|
+
{
|
|
625
|
+
translateY: this.animation.interpolate({
|
|
626
|
+
inputRange: [0, 1],
|
|
627
|
+
outputRange: [0, translateY]
|
|
628
|
+
})
|
|
629
|
+
},
|
|
630
|
+
{
|
|
631
|
+
scale: this.animation.interpolate({
|
|
632
|
+
inputRange: [0, 0.5, 1],
|
|
633
|
+
outputRange: [0, 1.1, 1]
|
|
634
|
+
})
|
|
635
|
+
}
|
|
636
|
+
],
|
|
637
|
+
opacity: this.animation
|
|
638
|
+
};
|
|
639
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
640
|
+
import_react_native5.TouchableWithoutFeedback,
|
|
641
|
+
{
|
|
642
|
+
onPress: () => {
|
|
643
|
+
this.toggleMenu();
|
|
644
|
+
action.onPress();
|
|
645
|
+
},
|
|
646
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
647
|
+
import_react_native5.Animated.View,
|
|
648
|
+
{
|
|
649
|
+
style: [defaultStyles4.secondary, styles2?.secondaryButton, animStyle],
|
|
650
|
+
children: renderIcon?.({
|
|
651
|
+
name: action.icon,
|
|
652
|
+
size: 20,
|
|
653
|
+
color: "#FFF"
|
|
654
|
+
})
|
|
655
|
+
}
|
|
656
|
+
)
|
|
657
|
+
},
|
|
658
|
+
index
|
|
659
|
+
);
|
|
660
|
+
};
|
|
661
|
+
render() {
|
|
662
|
+
const { actions, renderIcon, styles: styles2, style } = this.props;
|
|
663
|
+
const rotation = {
|
|
664
|
+
transform: [
|
|
665
|
+
{
|
|
666
|
+
rotate: this.animation.interpolate({
|
|
667
|
+
inputRange: [0, 1],
|
|
668
|
+
outputRange: ["0deg", "45deg"]
|
|
669
|
+
})
|
|
670
|
+
}
|
|
671
|
+
]
|
|
672
|
+
};
|
|
673
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
674
|
+
import_react_native5.View,
|
|
675
|
+
{
|
|
676
|
+
style: [defaultStyles4.container, styles2?.container, this.props.style],
|
|
677
|
+
children: [
|
|
678
|
+
actions.map(this.renderAction),
|
|
679
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
680
|
+
import_react_native5.Animated.View,
|
|
681
|
+
{
|
|
682
|
+
style: [defaultStyles4.button, styles2?.mainButton, rotation],
|
|
683
|
+
children: renderIcon?.({
|
|
684
|
+
name: "plus",
|
|
685
|
+
size: 26,
|
|
686
|
+
color: "#FFF"
|
|
687
|
+
})
|
|
688
|
+
}
|
|
689
|
+
) })
|
|
690
|
+
]
|
|
691
|
+
}
|
|
692
|
+
);
|
|
693
|
+
}
|
|
694
|
+
};
|
|
695
|
+
var defaultStyles4 = import_react_native5.StyleSheet.create({
|
|
696
|
+
container: {
|
|
697
|
+
position: "absolute",
|
|
698
|
+
bottom: 110,
|
|
699
|
+
right: 20,
|
|
700
|
+
alignItems: "center"
|
|
701
|
+
},
|
|
702
|
+
button: {
|
|
703
|
+
width: 60,
|
|
704
|
+
height: 60,
|
|
705
|
+
borderRadius: 30,
|
|
706
|
+
backgroundColor: "#F02A4B",
|
|
707
|
+
alignItems: "center",
|
|
708
|
+
justifyContent: "center"
|
|
709
|
+
},
|
|
710
|
+
secondary: {
|
|
711
|
+
position: "absolute",
|
|
712
|
+
width: 48,
|
|
713
|
+
height: 48,
|
|
714
|
+
borderRadius: 24,
|
|
715
|
+
backgroundColor: "#F02A4B",
|
|
716
|
+
alignItems: "center",
|
|
717
|
+
justifyContent: "center"
|
|
718
|
+
}
|
|
719
|
+
});
|
|
720
|
+
|
|
555
721
|
// src/utils/groupOptions.ts
|
|
556
722
|
var groupOptions = (options, config) => {
|
|
557
723
|
return Object.entries(config).map(([label, values]) => ({
|
|
@@ -561,6 +727,7 @@ var groupOptions = (options, config) => {
|
|
|
561
727
|
};
|
|
562
728
|
// Annotate the CommonJS export names for ESM import in node:
|
|
563
729
|
0 && (module.exports = {
|
|
730
|
+
FloatingButton,
|
|
564
731
|
MultiPickerGroup,
|
|
565
732
|
MultiPickerItem,
|
|
566
733
|
MultiPickerModal,
|
package/dist/index.mjs
CHANGED
|
@@ -342,7 +342,7 @@ function MultiPickerItem({
|
|
|
342
342
|
label,
|
|
343
343
|
selected,
|
|
344
344
|
onPress,
|
|
345
|
-
|
|
345
|
+
renderItemIcon,
|
|
346
346
|
styles: customStyles
|
|
347
347
|
}) {
|
|
348
348
|
return /* @__PURE__ */ jsxs3(
|
|
@@ -361,7 +361,7 @@ function MultiPickerItem({
|
|
|
361
361
|
customStyles?.circle,
|
|
362
362
|
selected && [defaultStyles2.active, customStyles?.activeCircle]
|
|
363
363
|
],
|
|
364
|
-
children: selected && (
|
|
364
|
+
children: selected && (renderItemIcon ? renderItemIcon({
|
|
365
365
|
name: "check",
|
|
366
366
|
size: 14,
|
|
367
367
|
color: "#fff"
|
|
@@ -417,6 +417,7 @@ function MultiPickerModal({
|
|
|
417
417
|
error,
|
|
418
418
|
renderInputIcon,
|
|
419
419
|
renderGroupIcon,
|
|
420
|
+
renderItemIcon,
|
|
420
421
|
styles: styles2
|
|
421
422
|
}) {
|
|
422
423
|
const [internalVisible, setInternalVisible] = useState3(false);
|
|
@@ -435,7 +436,7 @@ function MultiPickerModal({
|
|
|
435
436
|
onChange(updated);
|
|
436
437
|
};
|
|
437
438
|
const getLabel = () => {
|
|
438
|
-
if (selectedValues
|
|
439
|
+
if (!selectedValues?.length) return placeholder;
|
|
439
440
|
const all = groups.length ? groups.flatMap((g) => g.data) : options;
|
|
440
441
|
return all.filter((o) => selectedValues.includes(o.value)).map((o) => o.label).join(", ");
|
|
441
442
|
};
|
|
@@ -451,7 +452,9 @@ function MultiPickerModal({
|
|
|
451
452
|
{
|
|
452
453
|
label: item.label,
|
|
453
454
|
selected: selectedValues.includes(item.value),
|
|
454
|
-
onPress: () => handleSelect(item.value)
|
|
455
|
+
onPress: () => handleSelect(item.value),
|
|
456
|
+
renderItemIcon,
|
|
457
|
+
styles: styles2?.item
|
|
455
458
|
},
|
|
456
459
|
item.value
|
|
457
460
|
))
|
|
@@ -464,13 +467,15 @@ function MultiPickerModal({
|
|
|
464
467
|
{
|
|
465
468
|
label: item.label,
|
|
466
469
|
selected: selectedValues.includes(item.value),
|
|
467
|
-
onPress: () => handleSelect(item.value)
|
|
470
|
+
onPress: () => handleSelect(item.value),
|
|
471
|
+
renderItemIcon,
|
|
472
|
+
styles: styles2?.item
|
|
468
473
|
},
|
|
469
474
|
item.value
|
|
470
475
|
));
|
|
471
476
|
};
|
|
472
477
|
return /* @__PURE__ */ jsxs4(Fragment2, { children: [
|
|
473
|
-
/* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.label, styles2?.label], children: label }),
|
|
478
|
+
label && /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.label, styles2?.label], children: label }),
|
|
474
479
|
/* @__PURE__ */ jsxs4(
|
|
475
480
|
TouchableOpacity4,
|
|
476
481
|
{
|
|
@@ -486,9 +491,16 @@ function MultiPickerModal({
|
|
|
486
491
|
]
|
|
487
492
|
}
|
|
488
493
|
),
|
|
489
|
-
/* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.error, styles2?.error], children: error }),
|
|
494
|
+
error && /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.error, styles2?.error], children: error }),
|
|
490
495
|
/* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ jsxs4(View4, { style: [defaultStyles3.container, styles2?.container], children: [
|
|
491
|
-
/* @__PURE__ */ jsx4(
|
|
496
|
+
/* @__PURE__ */ jsx4(
|
|
497
|
+
TouchableOpacity4,
|
|
498
|
+
{
|
|
499
|
+
onPress: close,
|
|
500
|
+
style: [defaultStyles3.done, styles2?.doneBtn],
|
|
501
|
+
children: /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" })
|
|
502
|
+
}
|
|
503
|
+
),
|
|
492
504
|
/* @__PURE__ */ jsx4(ScrollView2, { children: renderList() })
|
|
493
505
|
] }) }) })
|
|
494
506
|
] });
|
|
@@ -541,6 +553,154 @@ var defaultStyles3 = StyleSheet4.create({
|
|
|
541
553
|
}
|
|
542
554
|
});
|
|
543
555
|
|
|
556
|
+
// src/core/FloatingButton.tsx
|
|
557
|
+
import React4 from "react";
|
|
558
|
+
import {
|
|
559
|
+
Animated as Animated2,
|
|
560
|
+
StyleSheet as StyleSheet5,
|
|
561
|
+
TouchableWithoutFeedback,
|
|
562
|
+
View as View5
|
|
563
|
+
} from "react-native";
|
|
564
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
565
|
+
var FloatingButton = class extends React4.Component {
|
|
566
|
+
animation = new Animated2.Value(0);
|
|
567
|
+
open = false;
|
|
568
|
+
toggleMenu = () => {
|
|
569
|
+
Animated2.spring(this.animation, {
|
|
570
|
+
toValue: this.open ? 0 : 1,
|
|
571
|
+
useNativeDriver: true,
|
|
572
|
+
damping: 12,
|
|
573
|
+
mass: 0.6,
|
|
574
|
+
stiffness: 180
|
|
575
|
+
}).start();
|
|
576
|
+
this.open = !this.open;
|
|
577
|
+
};
|
|
578
|
+
renderAction = (action, index) => {
|
|
579
|
+
const {
|
|
580
|
+
mode = "vertical",
|
|
581
|
+
radius = 100,
|
|
582
|
+
actions,
|
|
583
|
+
renderIcon,
|
|
584
|
+
styles: styles2
|
|
585
|
+
} = this.props;
|
|
586
|
+
let translateX = 0;
|
|
587
|
+
let translateY = 0;
|
|
588
|
+
if (mode === "vertical") {
|
|
589
|
+
translateY = -60 * (index + 1);
|
|
590
|
+
}
|
|
591
|
+
if (mode === "horizontal") {
|
|
592
|
+
translateX = -60 * (index + 1);
|
|
593
|
+
}
|
|
594
|
+
if (mode === "circle") {
|
|
595
|
+
const angle = index / actions.length * Math.PI;
|
|
596
|
+
translateX = radius * Math.cos(angle);
|
|
597
|
+
translateY = -radius * Math.sin(angle);
|
|
598
|
+
}
|
|
599
|
+
const animStyle = {
|
|
600
|
+
transform: [
|
|
601
|
+
{
|
|
602
|
+
translateX: this.animation.interpolate({
|
|
603
|
+
inputRange: [0, 1],
|
|
604
|
+
outputRange: [0, translateX]
|
|
605
|
+
})
|
|
606
|
+
},
|
|
607
|
+
{
|
|
608
|
+
translateY: this.animation.interpolate({
|
|
609
|
+
inputRange: [0, 1],
|
|
610
|
+
outputRange: [0, translateY]
|
|
611
|
+
})
|
|
612
|
+
},
|
|
613
|
+
{
|
|
614
|
+
scale: this.animation.interpolate({
|
|
615
|
+
inputRange: [0, 0.5, 1],
|
|
616
|
+
outputRange: [0, 1.1, 1]
|
|
617
|
+
})
|
|
618
|
+
}
|
|
619
|
+
],
|
|
620
|
+
opacity: this.animation
|
|
621
|
+
};
|
|
622
|
+
return /* @__PURE__ */ jsx5(
|
|
623
|
+
TouchableWithoutFeedback,
|
|
624
|
+
{
|
|
625
|
+
onPress: () => {
|
|
626
|
+
this.toggleMenu();
|
|
627
|
+
action.onPress();
|
|
628
|
+
},
|
|
629
|
+
children: /* @__PURE__ */ jsx5(
|
|
630
|
+
Animated2.View,
|
|
631
|
+
{
|
|
632
|
+
style: [defaultStyles4.secondary, styles2?.secondaryButton, animStyle],
|
|
633
|
+
children: renderIcon?.({
|
|
634
|
+
name: action.icon,
|
|
635
|
+
size: 20,
|
|
636
|
+
color: "#FFF"
|
|
637
|
+
})
|
|
638
|
+
}
|
|
639
|
+
)
|
|
640
|
+
},
|
|
641
|
+
index
|
|
642
|
+
);
|
|
643
|
+
};
|
|
644
|
+
render() {
|
|
645
|
+
const { actions, renderIcon, styles: styles2, style } = this.props;
|
|
646
|
+
const rotation = {
|
|
647
|
+
transform: [
|
|
648
|
+
{
|
|
649
|
+
rotate: this.animation.interpolate({
|
|
650
|
+
inputRange: [0, 1],
|
|
651
|
+
outputRange: ["0deg", "45deg"]
|
|
652
|
+
})
|
|
653
|
+
}
|
|
654
|
+
]
|
|
655
|
+
};
|
|
656
|
+
return /* @__PURE__ */ jsxs5(
|
|
657
|
+
View5,
|
|
658
|
+
{
|
|
659
|
+
style: [defaultStyles4.container, styles2?.container, this.props.style],
|
|
660
|
+
children: [
|
|
661
|
+
actions.map(this.renderAction),
|
|
662
|
+
/* @__PURE__ */ jsx5(TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ jsx5(
|
|
663
|
+
Animated2.View,
|
|
664
|
+
{
|
|
665
|
+
style: [defaultStyles4.button, styles2?.mainButton, rotation],
|
|
666
|
+
children: renderIcon?.({
|
|
667
|
+
name: "plus",
|
|
668
|
+
size: 26,
|
|
669
|
+
color: "#FFF"
|
|
670
|
+
})
|
|
671
|
+
}
|
|
672
|
+
) })
|
|
673
|
+
]
|
|
674
|
+
}
|
|
675
|
+
);
|
|
676
|
+
}
|
|
677
|
+
};
|
|
678
|
+
var defaultStyles4 = StyleSheet5.create({
|
|
679
|
+
container: {
|
|
680
|
+
position: "absolute",
|
|
681
|
+
bottom: 110,
|
|
682
|
+
right: 20,
|
|
683
|
+
alignItems: "center"
|
|
684
|
+
},
|
|
685
|
+
button: {
|
|
686
|
+
width: 60,
|
|
687
|
+
height: 60,
|
|
688
|
+
borderRadius: 30,
|
|
689
|
+
backgroundColor: "#F02A4B",
|
|
690
|
+
alignItems: "center",
|
|
691
|
+
justifyContent: "center"
|
|
692
|
+
},
|
|
693
|
+
secondary: {
|
|
694
|
+
position: "absolute",
|
|
695
|
+
width: 48,
|
|
696
|
+
height: 48,
|
|
697
|
+
borderRadius: 24,
|
|
698
|
+
backgroundColor: "#F02A4B",
|
|
699
|
+
alignItems: "center",
|
|
700
|
+
justifyContent: "center"
|
|
701
|
+
}
|
|
702
|
+
});
|
|
703
|
+
|
|
544
704
|
// src/utils/groupOptions.ts
|
|
545
705
|
var groupOptions = (options, config) => {
|
|
546
706
|
return Object.entries(config).map(([label, values]) => ({
|
|
@@ -549,6 +709,7 @@ var groupOptions = (options, config) => {
|
|
|
549
709
|
})).filter((g) => g.data.length > 0);
|
|
550
710
|
};
|
|
551
711
|
export {
|
|
712
|
+
FloatingButton,
|
|
552
713
|
MultiPickerGroup,
|
|
553
714
|
MultiPickerItem,
|
|
554
715
|
MultiPickerModal,
|
package/package.json
CHANGED