@multiplatform.one/components 0.7.4 → 0.7.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/cjs/panels/SimplePopover/SimplePopover.stories.js +5 -38
- package/dist/cjs/panels/SimplePopover/SimplePopover.stories.js.map +1 -1
- package/dist/cjs/panels/SimplePopover/SimplePopover.stories.native.js +6 -38
- package/dist/cjs/panels/SimplePopover/SimplePopover.stories.native.js.map +1 -1
- package/dist/cjs/panels/SimplePopover/index.js +14 -23
- package/dist/cjs/panels/SimplePopover/index.js.map +2 -2
- package/dist/cjs/panels/SimplePopover/index.native.js +15 -23
- package/dist/cjs/panels/SimplePopover/index.native.js.map +2 -2
- package/dist/esm/panels/SimplePopover/SimplePopover.stories.js +6 -38
- package/dist/esm/panels/SimplePopover/SimplePopover.stories.js.map +1 -1
- package/dist/esm/panels/SimplePopover/SimplePopover.stories.native.js +7 -38
- package/dist/esm/panels/SimplePopover/SimplePopover.stories.native.js.map +1 -1
- package/dist/esm/panels/SimplePopover/index.js +13 -22
- package/dist/esm/panels/SimplePopover/index.js.map +1 -1
- package/dist/esm/panels/SimplePopover/index.native.js +14 -22
- package/dist/esm/panels/SimplePopover/index.native.js.map +1 -1
- package/dist/jsx/panels/SimplePopover/SimplePopover.stories.js +6 -21
- package/dist/jsx/panels/SimplePopover/SimplePopover.stories.js.map +1 -1
- package/dist/jsx/panels/SimplePopover/SimplePopover.stories.native.js +6 -21
- package/dist/jsx/panels/SimplePopover/SimplePopover.stories.native.js.map +1 -1
- package/dist/jsx/panels/SimplePopover/index.js +13 -19
- package/dist/jsx/panels/SimplePopover/index.js.map +1 -1
- package/dist/jsx/panels/SimplePopover/index.native.js +13 -19
- package/dist/jsx/panels/SimplePopover/index.native.js.map +1 -1
- package/package.json +2 -2
- package/src/panels/SimplePopover/SimplePopover.stories.tsx +6 -44
- package/src/panels/SimplePopover/index.tsx +26 -59
- package/types/panels/SimplePopover/SimplePopover.stories.d.ts +0 -1
- package/types/panels/SimplePopover/SimplePopover.stories.d.ts.map +1 -1
- package/types/panels/SimplePopover/index.d.ts +6 -13
- package/types/panels/SimplePopover/index.d.ts.map +1 -1
|
@@ -17,7 +17,6 @@ __export(SimplePopover_stories_exports, {
|
|
|
17
17
|
closeOnHoverOut: () => closeOnHoverOut,
|
|
18
18
|
default: () => SimplePopover_stories_default,
|
|
19
19
|
main: () => main,
|
|
20
|
-
openOnAnyCondition: () => openOnAnyCondition,
|
|
21
20
|
openOnChangingTheCondition: () => openOnChangingTheCondition,
|
|
22
21
|
openOnHover: () => openOnHover
|
|
23
22
|
});
|
|
@@ -27,25 +26,16 @@ const meta = {
|
|
|
27
26
|
title: "panels/SimplePopover",
|
|
28
27
|
component: import_index.SimplePopover,
|
|
29
28
|
parameters: { status: { type: "beta" } }
|
|
30
|
-
}, main = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
31
|
-
import_index.SimplePopover,
|
|
32
|
-
{
|
|
33
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, { children: "popover content" }) })
|
|
34
|
-
}
|
|
35
|
-
), closeOnHoverOut = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
36
|
-
import_index.SimplePopover,
|
|
37
|
-
{
|
|
38
|
-
closeOnHoverOut: !0,
|
|
39
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, { children: "popover content will close on hoverOut" }) })
|
|
40
|
-
}
|
|
41
|
-
);
|
|
29
|
+
}, main = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.SimplePopover, { trigger: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Click here to get a Popover" }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, { children: "popover content" }) }) }), closeOnHoverOut = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.SimplePopover, { trigger: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "click here" }), closeOnHoverOut: !0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, { children: "popover content will close on hoverOut" }) }) });
|
|
42
30
|
function Open() {
|
|
43
31
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
44
32
|
import_index.SimplePopover,
|
|
45
33
|
{
|
|
34
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "hover on it to get Popover" }),
|
|
46
35
|
triggerOnHover: !0,
|
|
47
36
|
arrow: !1,
|
|
48
37
|
triggerStyle: { als: "center", ai: "center" },
|
|
38
|
+
closeOnHoverOut: !0,
|
|
49
39
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, { children: i }, i)) })
|
|
50
40
|
}
|
|
51
41
|
);
|
|
@@ -58,37 +48,14 @@ const openOnHover = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ta
|
|
|
58
48
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: !0, children: [
|
|
59
49
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { children: "change the switch to get popover" }),
|
|
60
50
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch, { checked: props.open, onCheckedChange: setOpen }),
|
|
61
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
|
-
import_index.SimplePopover,
|
|
63
|
-
{
|
|
64
|
-
open,
|
|
65
|
-
onOpenChange: setOpen,
|
|
66
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, { children: "Conditional popover" })
|
|
67
|
-
}
|
|
68
|
-
)
|
|
51
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.SimplePopover, { open, onOpenChange: setOpen, trigger: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Popup will open here" }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, { children: "Conditional popover" }) })
|
|
69
52
|
] });
|
|
70
|
-
}, openOnChangingTheCondition = (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OnCondition, { ...args })
|
|
71
|
-
const [open, setOpen] = (0, import_react.useState)(!1), [inputVal, setInputVal] = (0, import_react.useState)("");
|
|
72
|
-
function handleInput(val) {
|
|
73
|
-
setOpen(val === "show"), setInputVal(val);
|
|
74
|
-
}
|
|
75
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { space: !0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
76
|
-
import_index.SimplePopover,
|
|
77
|
-
{
|
|
78
|
-
open,
|
|
79
|
-
onOpenChange: setOpen,
|
|
80
|
-
triggerElement: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { value: inputVal, onChangeText: handleInput, placeholder: "type show to get popup" }) }),
|
|
81
|
-
arrow: !0,
|
|
82
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, { children: "Conditional popover" })
|
|
83
|
-
}
|
|
84
|
-
) });
|
|
85
|
-
}, openOnAnyCondition = (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConditionalPopover, { ...args });
|
|
53
|
+
}, openOnChangingTheCondition = (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OnCondition, { ...args });
|
|
86
54
|
var SimplePopover_stories_default = meta;
|
|
87
55
|
// Annotate the CommonJS export names for ESM import in node:
|
|
88
56
|
0 && (module.exports = {
|
|
89
57
|
closeOnHoverOut,
|
|
90
58
|
main,
|
|
91
|
-
openOnAnyCondition,
|
|
92
59
|
openOnChangingTheCondition,
|
|
93
60
|
openOnHover
|
|
94
61
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/panels/SimplePopover/SimplePopover.stories.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA,mBAAgC,kBAChC,eAA8B,oBAC9B,iBAAmE,oBAUzC;AAP1B,MAAM,OAAa;AAAA,EACjB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,EAAE;AACzC,GAEa,OAAO,MAClB,4CAAC,8BAAc,SAAS,4CAAC,yBAAO,yCAA2B,GACzD,sDAAC,yBACC,sDAAC,uBAAK,6BAAe,GACvB,GACF,GAGW,kBAAkB,MAC7B,4CAAC,8BAAc,SAAS,4CAAC,yBAAO,wBAAU,GAAW,iBAAe,IAClE,sDAAC,yBACC,sDAAC,uBAAK,oDAAsC,GAC9C,GACF;AAGF,SAAS,OAAO;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,4CAAC,yBAAO,wCAA0B;AAAA,MAC3C,gBAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc,EAAE,KAAK,UAAU,IAAI,SAAS;AAAA,MAC5C,iBAAe;AAAA,MAEf,sDAAC,yBACE,WAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,EAAE,IAAI,CAAC,MACpC,4CAAC,uBAAc,eAAJ,CAAM,CAClB,GACH;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,cAAc,MACzB,6CAAC,yBAAO,IAAG,gBACT;AAAA,8CAAC,QAAK;AAAA,EACN,4CAAC,QAAK;AAAA,GACR,GAGI,cAAc,CAAC,UAAU;AAC7B,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,EAAK;AACtC,SACE,6CAAC,yBAAO,OAAK,IACX;AAAA,gDAAC,wBAAM,8CAAgC;AAAA,IACvC,4CAAC,yBAAO,SAAS,MAAM,MAAM,iBAAiB,SAAS;AAAA,IACvD,4CAAC,8BAAc,MAAY,cAAc,SAAS,SAAS,4CAAC,yBAAO,kCAAoB,GACrF,sDAAC,uBAAK,iCAAmB,GAC3B;AAAA,KACF;AAEJ,GAEa,6BAA6B,CAAC,SAAS,4CAAC,eAAa,GAAG,MAAM;AAE3E,IAAO,gCAAQ;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -25,7 +25,6 @@ __export(SimplePopover_stories_exports, {
|
|
|
25
25
|
closeOnHoverOut: () => closeOnHoverOut,
|
|
26
26
|
default: () => SimplePopover_stories_default,
|
|
27
27
|
main: () => main,
|
|
28
|
-
openOnAnyCondition: () => openOnAnyCondition,
|
|
29
28
|
openOnChangingTheCondition: () => openOnChangingTheCondition,
|
|
30
29
|
openOnHover: () => openOnHover
|
|
31
30
|
});
|
|
@@ -35,60 +34,29 @@ const meta = {
|
|
|
35
34
|
title: "panels/SimplePopover",
|
|
36
35
|
component: import_index.SimplePopover,
|
|
37
36
|
parameters: { status: { type: "beta" } }
|
|
38
|
-
}, main = () => /* @__PURE__ */ import_react.default.createElement(
|
|
39
|
-
import_index.SimplePopover,
|
|
40
|
-
null,
|
|
41
|
-
/* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Text, null, "popover content"))
|
|
42
|
-
), closeOnHoverOut = () => /* @__PURE__ */ import_react.default.createElement(
|
|
43
|
-
import_index.SimplePopover,
|
|
44
|
-
{
|
|
45
|
-
closeOnHoverOut: !0
|
|
46
|
-
},
|
|
47
|
-
/* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Text, null, "popover content will close on hoverOut"))
|
|
48
|
-
);
|
|
37
|
+
}, main = () => /* @__PURE__ */ import_react.default.createElement(import_index.SimplePopover, { trigger: /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, null, "Click here to get a Popover") }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Text, null, "popover content"))), closeOnHoverOut = () => /* @__PURE__ */ import_react.default.createElement(import_index.SimplePopover, { trigger: /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, null, "click here"), closeOnHoverOut: !0 }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Text, null, "popover content will close on hoverOut")));
|
|
49
38
|
function Open() {
|
|
50
39
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
51
40
|
import_index.SimplePopover,
|
|
52
41
|
{
|
|
42
|
+
trigger: /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, null, "hover on it to get Popover"),
|
|
53
43
|
triggerOnHover: !0,
|
|
54
44
|
arrow: !1,
|
|
55
|
-
triggerStyle: { als: "center", ai: "center" }
|
|
45
|
+
triggerStyle: { als: "center", ai: "center" },
|
|
46
|
+
closeOnHoverOut: !0
|
|
56
47
|
},
|
|
57
48
|
/* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, null, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => /* @__PURE__ */ import_react.default.createElement(import_tamagui.Text, { key: i }, i)))
|
|
58
49
|
);
|
|
59
50
|
}
|
|
60
51
|
const openOnHover = () => /* @__PURE__ */ import_react.default.createElement(import_tamagui.XStack, { jc: "space-around" }, /* @__PURE__ */ import_react.default.createElement(Open, null), /* @__PURE__ */ import_react.default.createElement(Open, null)), OnCondition = (props) => {
|
|
61
52
|
const [open, setOpen] = (0, import_react.useState)(!1);
|
|
62
|
-
return /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, { space: !0 }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Label, null, "change the switch to get popover"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Switch, { checked: props.open, onCheckedChange: setOpen }), /* @__PURE__ */ import_react.default.createElement(
|
|
63
|
-
|
|
64
|
-
{
|
|
65
|
-
open,
|
|
66
|
-
onOpenChange: setOpen
|
|
67
|
-
},
|
|
68
|
-
/* @__PURE__ */ import_react.default.createElement(import_tamagui.Text, null, "Conditional popover")
|
|
69
|
-
));
|
|
70
|
-
}, openOnChangingTheCondition = (args) => /* @__PURE__ */ import_react.default.createElement(OnCondition, { ...args }), ConditionalPopover = () => {
|
|
71
|
-
const [open, setOpen] = (0, import_react.useState)(!1), [inputVal, setInputVal] = (0, import_react.useState)("");
|
|
72
|
-
function handleInput(val) {
|
|
73
|
-
setOpen(val === "show"), setInputVal(val);
|
|
74
|
-
}
|
|
75
|
-
return /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, { space: !0 }, /* @__PURE__ */ import_react.default.createElement(
|
|
76
|
-
import_index.SimplePopover,
|
|
77
|
-
{
|
|
78
|
-
open,
|
|
79
|
-
onOpenChange: setOpen,
|
|
80
|
-
triggerElement: /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Input, { value: inputVal, onChangeText: handleInput, placeholder: "type show to get popup" })),
|
|
81
|
-
arrow: !0
|
|
82
|
-
},
|
|
83
|
-
/* @__PURE__ */ import_react.default.createElement(import_tamagui.Text, null, "Conditional popover")
|
|
84
|
-
));
|
|
85
|
-
}, openOnAnyCondition = (args) => /* @__PURE__ */ import_react.default.createElement(ConditionalPopover, { ...args });
|
|
53
|
+
return /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, { space: !0 }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Label, null, "change the switch to get popover"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Switch, { checked: props.open, onCheckedChange: setOpen }), /* @__PURE__ */ import_react.default.createElement(import_index.SimplePopover, { open, onOpenChange: setOpen, trigger: /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, null, "Popup will open here") }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Text, null, "Conditional popover")));
|
|
54
|
+
}, openOnChangingTheCondition = (args) => /* @__PURE__ */ import_react.default.createElement(OnCondition, { ...args });
|
|
86
55
|
var SimplePopover_stories_default = meta;
|
|
87
56
|
// Annotate the CommonJS export names for ESM import in node:
|
|
88
57
|
0 && (module.exports = {
|
|
89
58
|
closeOnHoverOut,
|
|
90
59
|
main,
|
|
91
|
-
openOnAnyCondition,
|
|
92
60
|
openOnChangingTheCondition,
|
|
93
61
|
openOnHover
|
|
94
62
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/panels/SimplePopover/SimplePopover.stories.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA,mBAAgC,2BAChC,eAA8B,oBAC9B,iBAAmE;AAGnE,MAAM,OAAa;AAAA,EACjB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,EAAE;AACzC,GAEa,OAAO,MAClB,6BAAAA,QAAA,cAAC,8BAAc,SAAS,6BAAAA,QAAA,cAAC,6BAAO,6BAA2B,KACzD,6BAAAA,QAAA,cAAC,6BACC,6BAAAA,QAAA,cAAC,2BAAK,iBAAe,CACvB,CACF,GAGW,kBAAkB,MAC7B,6BAAAA,QAAA,cAAC,8BAAc,SAAS,6BAAAA,QAAA,cAAC,6BAAO,YAAU,GAAW,iBAAe,MAClE,6BAAAA,QAAA,cAAC,6BACC,6BAAAA,QAAA,cAAC,2BAAK,wCAAsC,CAC9C,CACF;AAGF,SAAS,OAAO;AACd,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,6BAAAA,QAAA,cAAC,6BAAO,4BAA0B;AAAA,MAC3C,gBAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc,EAAE,KAAK,UAAU,IAAI,SAAS;AAAA,MAC5C,iBAAe;AAAA;AAAA,IAEf,6BAAAA,QAAA,cAAC,6BACE,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,EAAE,IAAI,CAAC,MACpC,6BAAAA,QAAA,cAAC,uBAAK,KAAK,KAAI,CAAE,CAClB,CACH;AAAA,EACF;AAEJ;AAEO,MAAM,cAAc,MACzB,6BAAAA,QAAA,cAAC,yBAAO,IAAG,kBACT,6BAAAA,QAAA,cAAC,UAAK,GACN,6BAAAA,QAAA,cAAC,UAAK,CACR,GAGI,cAAc,CAAC,UAAU;AAC7B,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,EAAK;AACtC,SACE,6BAAAA,QAAA,cAAC,yBAAO,OAAK,MACX,6BAAAA,QAAA,cAAC,4BAAM,kCAAgC,GACvC,6BAAAA,QAAA,cAAC,yBAAO,SAAS,MAAM,MAAM,iBAAiB,SAAS,GACvD,6BAAAA,QAAA,cAAC,8BAAc,MAAY,cAAc,SAAS,SAAS,6BAAAA,QAAA,cAAC,6BAAO,sBAAoB,KACrF,6BAAAA,QAAA,cAAC,2BAAK,qBAAmB,CAC3B,CACF;AAEJ,GAEa,6BAA6B,CAAC,SAAS,6BAAAA,QAAA,cAAC,eAAa,GAAG,MAAM;AAE3E,IAAO,gCAAQ;",
|
|
5
5
|
"names": ["React"]
|
|
6
6
|
}
|
|
@@ -22,24 +22,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
22
22
|
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
23
23
|
var SimplePopover_exports = {};
|
|
24
24
|
__export(SimplePopover_exports, {
|
|
25
|
-
SimplePopover: () => SimplePopover
|
|
26
|
-
SimplePopoverTrigger: () => SimplePopoverTrigger
|
|
25
|
+
SimplePopover: () => SimplePopover
|
|
27
26
|
});
|
|
28
27
|
module.exports = __toCommonJS(SimplePopover_exports);
|
|
29
|
-
var import_tamagui = require("tamagui"), import_react = __toESM(require("react")),
|
|
30
|
-
const SimplePopoverTrigger = import_react.default.forwardRef((props, forwardedRef) => {
|
|
31
|
-
const context = (0, import_tamagui.usePopoverContext)(), composedTriggerRef = (0, import_tamagui.useComposedRefs)(forwardedRef, context.triggerRef), trigger = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
32
|
-
import_tamagui.View,
|
|
33
|
-
{
|
|
34
|
-
"aria-haspopup": "dialog",
|
|
35
|
-
"aria-expanded": context.open,
|
|
36
|
-
"data-state": (0, import_tamagui.getState)(context.open),
|
|
37
|
-
...props,
|
|
38
|
-
ref: composedTriggerRef
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
return context.hasCustomAnchor ? trigger : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.PopperAnchor, { asChild: !0, children: trigger });
|
|
42
|
-
});
|
|
28
|
+
var import_tamagui = require("tamagui"), import_react = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
|
|
43
29
|
function SimplePopover({
|
|
44
30
|
children,
|
|
45
31
|
contentStyle,
|
|
@@ -48,12 +34,18 @@ function SimplePopover({
|
|
|
48
34
|
arrow = !0,
|
|
49
35
|
triggerOnHover,
|
|
50
36
|
closeOnHoverOut,
|
|
37
|
+
trigger,
|
|
51
38
|
...props
|
|
52
39
|
}) {
|
|
53
|
-
const [open, setOpen] = import_react.default.useState(!1)
|
|
40
|
+
const [open, setOpen] = import_react.default.useState(!1);
|
|
41
|
+
function handleHoverIn(e) {
|
|
42
|
+
triggerOnHover && (setOpen(!0), contentStyle != null && contentStyle.onHoverIn && (contentStyle == null || contentStyle.onHoverIn(e)), triggerStyle != null && triggerStyle.onHoverIn && triggerStyle.onHoverIn(e));
|
|
43
|
+
}
|
|
44
|
+
function handleHoverOut(e) {
|
|
45
|
+
closeOnHoverOut && (setOpen(!1), contentStyle != null && contentStyle.onHoverOut && contentStyle.onHoverOut(e), triggerStyle != null && triggerStyle.onHoverOut && triggerStyle.onHoverOut(e));
|
|
46
|
+
}
|
|
54
47
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, { size: "$5", allowFlip: !0, open, onOpenChange: setOpen, ...props, children: [
|
|
55
|
-
|
|
56
|
-
!trigger && "triggerElement" in props && "open" in props && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SimplePopoverTrigger, { asChild: !0, children: props.triggerElement }),
|
|
48
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, { asChild: !0, ...triggerStyle, onHoverIn: handleHoverIn, onHoverOut: handleHoverOut, children: trigger }),
|
|
57
49
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Sheet, { modal: !0, dismissOnSnapToBottom: !0, children: [
|
|
58
50
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Sheet.Frame, { padding: "$4", onMouseEnter: () => setOpen(!0), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {}) }),
|
|
59
51
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Sheet.Overlay, {})
|
|
@@ -77,10 +69,10 @@ function SimplePopover({
|
|
|
77
69
|
}
|
|
78
70
|
],
|
|
79
71
|
elevate: !0,
|
|
80
|
-
onHoverIn: triggerOnHover ? () => setOpen(!0) : void 0,
|
|
81
|
-
onHoverOut: triggerOnHover || closeOnHoverOut ? () => setOpen(!1) : void 0,
|
|
82
72
|
zi: 9999999999,
|
|
83
73
|
...contentStyle,
|
|
74
|
+
onHoverIn: handleHoverIn,
|
|
75
|
+
onHoverOut: handleHoverOut,
|
|
84
76
|
children: [
|
|
85
77
|
arrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor", ...arrowStyle }),
|
|
86
78
|
children
|
|
@@ -91,7 +83,6 @@ function SimplePopover({
|
|
|
91
83
|
}
|
|
92
84
|
// Annotate the CommonJS export names for ESM import in node:
|
|
93
85
|
0 && (module.exports = {
|
|
94
|
-
SimplePopover
|
|
95
|
-
SimplePopoverTrigger
|
|
86
|
+
SimplePopover
|
|
96
87
|
});
|
|
97
88
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/panels/SimplePopover/index.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
5
|
-
"names": ["
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA,qBAA+B,oBAC/B,eAAkB,2BA4CZ;AA7BC,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,CAAC,MAAM,OAAO,IAAI,aAAAA,QAAM,SAAS,EAAK;AAE5C,WAAS,cAAc,GAAG;AACxB,IAAK,mBACL,QAAQ,EAAI,GACR,qCAAc,cAAW,qCAAc,UAAU,KACjD,qCAAc,aAAW,aAAa,UAAU,CAAC;AAAA,EACvD;AAEA,WAAS,eAAe,GAAG;AACzB,IAAK,oBACL,QAAQ,EAAK,GACT,qCAAc,cAAY,aAAa,WAAW,CAAC,GACnD,qCAAc,cAAY,aAAa,WAAW,CAAC;AAAA,EACzD;AAEA,SACE,6CAAC,0BAAQ,MAAK,MAAK,WAAS,IAAC,MAAY,cAAc,SAAU,GAAG,OAClE;AAAA,gDAAC,uBAAQ,SAAR,EAAgB,SAAO,IAAE,GAAG,cAAc,WAAW,eAAe,YAAY,gBAC9E,mBACH;AAAA,IACA,4CAAC,wBAAM,MAAK,MAAK,UAAS,SACxB,uDAAC,uBAAQ,OAAR,EAAc,OAAK,IAAC,uBAAqB,IACxC;AAAA,kDAAC,uBAAQ,MAAM,OAAd,EAAoB,SAAQ,MAAK,cAAc,MAAM,QAAQ,EAAI,GAChE,sDAAC,qBAAM,UAAN,EAAe,GAClB;AAAA,MACA,4CAAC,uBAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IACA;AAAA,MAAC,uBAAQ;AAAA,MAAR;AAAA,QACC,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,QACvC,WAAY,iBAAgD,SAA/B,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,QACxD,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,QACT,WACG,iBASG,SARA;AAAA,UACE;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QAGN,SAAO;AAAA,QACP,IAAI;AAAA,QACH,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,YAAY;AAAA,QAEX;AAAA,mBAAS,4CAAC,uBAAQ,OAAR,EAAc,aAAa,GAAG,aAAY,gBAAgB,GAAG,YAAY;AAAA,UACnF;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
|
|
5
|
+
"names": ["React"]
|
|
6
6
|
}
|
|
@@ -22,24 +22,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
22
22
|
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
23
23
|
var SimplePopover_exports = {};
|
|
24
24
|
__export(SimplePopover_exports, {
|
|
25
|
-
SimplePopover: () => SimplePopover
|
|
26
|
-
SimplePopoverTrigger: () => SimplePopoverTrigger
|
|
25
|
+
SimplePopover: () => SimplePopover
|
|
27
26
|
});
|
|
28
27
|
module.exports = __toCommonJS(SimplePopover_exports);
|
|
29
|
-
var import_tamagui = require("tamagui"), import_react = __toESM(require("react"))
|
|
30
|
-
const SimplePopoverTrigger = import_react.default.forwardRef((props, forwardedRef) => {
|
|
31
|
-
const context = (0, import_tamagui.usePopoverContext)(), composedTriggerRef = (0, import_tamagui.useComposedRefs)(forwardedRef, context.triggerRef), trigger = /* @__PURE__ */ import_react.default.createElement(
|
|
32
|
-
import_tamagui.View,
|
|
33
|
-
{
|
|
34
|
-
"aria-haspopup": "dialog",
|
|
35
|
-
"aria-expanded": context.open,
|
|
36
|
-
"data-state": (0, import_tamagui.getState)(context.open),
|
|
37
|
-
...props,
|
|
38
|
-
ref: composedTriggerRef
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
return context.hasCustomAnchor ? trigger : /* @__PURE__ */ import_react.default.createElement(import_tamagui.PopperAnchor, { asChild: !0 }, trigger);
|
|
42
|
-
});
|
|
28
|
+
var import_tamagui = require("tamagui"), import_react = __toESM(require("react"));
|
|
43
29
|
function SimplePopover({
|
|
44
30
|
children,
|
|
45
31
|
contentStyle,
|
|
@@ -48,10 +34,17 @@ function SimplePopover({
|
|
|
48
34
|
arrow = !0,
|
|
49
35
|
triggerOnHover,
|
|
50
36
|
closeOnHoverOut,
|
|
37
|
+
trigger,
|
|
51
38
|
...props
|
|
52
39
|
}) {
|
|
53
|
-
const [open, setOpen] = import_react.default.useState(!1)
|
|
54
|
-
|
|
40
|
+
const [open, setOpen] = import_react.default.useState(!1);
|
|
41
|
+
function handleHoverIn(e) {
|
|
42
|
+
triggerOnHover && (setOpen(!0), contentStyle != null && contentStyle.onHoverIn && (contentStyle == null || contentStyle.onHoverIn(e)), triggerStyle != null && triggerStyle.onHoverIn && triggerStyle.onHoverIn(e));
|
|
43
|
+
}
|
|
44
|
+
function handleHoverOut(e) {
|
|
45
|
+
closeOnHoverOut && (setOpen(!1), contentStyle != null && contentStyle.onHoverOut && contentStyle.onHoverOut(e), triggerStyle != null && triggerStyle.onHoverOut && triggerStyle.onHoverOut(e));
|
|
46
|
+
}
|
|
47
|
+
return /* @__PURE__ */ import_react.default.createElement(import_tamagui.Popover, { size: "$5", allowFlip: !0, open, onOpenChange: setOpen, ...props }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Popover.Trigger, { asChild: !0, ...triggerStyle, onHoverIn: handleHoverIn, onHoverOut: handleHoverOut }, trigger), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Adapt, { when: "sm", platform: "touch" }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Popover.Sheet, { modal: !0, dismissOnSnapToBottom: !0 }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Popover.Sheet.Frame, { padding: "$4", onMouseEnter: () => setOpen(!0) }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Adapt.Contents, null)), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Popover.Sheet.Overlay, null))), /* @__PURE__ */ import_react.default.createElement(
|
|
55
48
|
import_tamagui.Popover.Content,
|
|
56
49
|
{
|
|
57
50
|
borderWidth: 1,
|
|
@@ -70,10 +63,10 @@ function SimplePopover({
|
|
|
70
63
|
}
|
|
71
64
|
],
|
|
72
65
|
elevate: !0,
|
|
73
|
-
onHoverIn: triggerOnHover ? () => setOpen(!0) : void 0,
|
|
74
|
-
onHoverOut: triggerOnHover || closeOnHoverOut ? () => setOpen(!1) : void 0,
|
|
75
66
|
zi: 9999999999,
|
|
76
|
-
...contentStyle
|
|
67
|
+
...contentStyle,
|
|
68
|
+
onHoverIn: handleHoverIn,
|
|
69
|
+
onHoverOut: handleHoverOut
|
|
77
70
|
},
|
|
78
71
|
arrow && /* @__PURE__ */ import_react.default.createElement(import_tamagui.Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor", ...arrowStyle }),
|
|
79
72
|
children
|
|
@@ -81,7 +74,6 @@ function SimplePopover({
|
|
|
81
74
|
}
|
|
82
75
|
// Annotate the CommonJS export names for ESM import in node:
|
|
83
76
|
0 && (module.exports = {
|
|
84
|
-
SimplePopover
|
|
85
|
-
SimplePopoverTrigger
|
|
77
|
+
SimplePopover
|
|
86
78
|
});
|
|
87
79
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/panels/SimplePopover/index.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
5
|
-
"names": ["
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA,qBAA+B,oBAC/B,eAAkB;AAeX,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,CAAC,MAAM,OAAO,IAAI,aAAAA,QAAM,SAAS,EAAK;AAE5C,WAAS,cAAc,GAAG;AACxB,IAAK,mBACL,QAAQ,EAAI,GACR,qCAAc,cAAW,qCAAc,UAAU,KACjD,qCAAc,aAAW,aAAa,UAAU,CAAC;AAAA,EACvD;AAEA,WAAS,eAAe,GAAG;AACzB,IAAK,oBACL,QAAQ,EAAK,GACT,qCAAc,cAAY,aAAa,WAAW,CAAC,GACnD,qCAAc,cAAY,aAAa,WAAW,CAAC;AAAA,EACzD;AAEA,SACE,6BAAAA,QAAA,cAAC,0BAAQ,MAAK,MAAK,WAAS,IAAC,MAAY,cAAc,SAAU,GAAG,SAClE,6BAAAA,QAAA,cAAC,uBAAQ,SAAR,EAAgB,SAAO,IAAE,GAAG,cAAc,WAAW,eAAe,YAAY,kBAC9E,OACH,GACA,6BAAAA,QAAA,cAAC,wBAAM,MAAK,MAAK,UAAS,WACxB,6BAAAA,QAAA,cAAC,uBAAQ,OAAR,EAAc,OAAK,IAAC,uBAAqB,MACxC,6BAAAA,QAAA,cAAC,uBAAQ,MAAM,OAAd,EAAoB,SAAQ,MAAK,cAAc,MAAM,QAAQ,EAAI,KAChE,6BAAAA,QAAA,cAAC,qBAAM,UAAN,IAAe,CAClB,GACA,6BAAAA,QAAA,cAAC,uBAAQ,MAAM,SAAd,IAAsB,CACzB,CACF,GACA,6BAAAA,QAAA;AAAA,IAAC,uBAAQ;AAAA,IAAR;AAAA,MACC,aAAa;AAAA,MACb,aAAY;AAAA,MACZ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,MACvC,WAAY,iBAAgD,SAA/B,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,MACxD,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,WACG,iBASG,SARA;AAAA,QACE;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,MAGN,SAAO;AAAA,MACP,IAAI;AAAA,MACH,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,YAAY;AAAA;AAAA,IAEX,SAAS,6BAAAA,QAAA,cAAC,uBAAQ,OAAR,EAAc,aAAa,GAAG,aAAY,gBAAgB,GAAG,YAAY;AAAA,IACnF;AAAA,EACH,CACF;AAEJ;",
|
|
5
|
+
"names": ["React"]
|
|
6
6
|
}
|
|
@@ -1,30 +1,21 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
2
|
import { SimplePopover } from "./index";
|
|
3
|
-
import { Text, YStack, XStack, Switch,
|
|
3
|
+
import { Text, YStack, XStack, Switch, Label, Button } from "tamagui";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
const meta = {
|
|
6
6
|
title: "panels/SimplePopover",
|
|
7
7
|
component: SimplePopover,
|
|
8
8
|
parameters: { status: { type: "beta" } }
|
|
9
|
-
}, main = () => /* @__PURE__ */ jsx(
|
|
10
|
-
SimplePopover,
|
|
11
|
-
{
|
|
12
|
-
children: /* @__PURE__ */ jsx(YStack, { children: /* @__PURE__ */ jsx(Text, { children: "popover content" }) })
|
|
13
|
-
}
|
|
14
|
-
), closeOnHoverOut = () => /* @__PURE__ */ jsx(
|
|
15
|
-
SimplePopover,
|
|
16
|
-
{
|
|
17
|
-
closeOnHoverOut: !0,
|
|
18
|
-
children: /* @__PURE__ */ jsx(YStack, { children: /* @__PURE__ */ jsx(Text, { children: "popover content will close on hoverOut" }) })
|
|
19
|
-
}
|
|
20
|
-
);
|
|
9
|
+
}, main = () => /* @__PURE__ */ jsx(SimplePopover, { trigger: /* @__PURE__ */ jsx(Button, { children: "Click here to get a Popover" }), children: /* @__PURE__ */ jsx(YStack, { children: /* @__PURE__ */ jsx(Text, { children: "popover content" }) }) }), closeOnHoverOut = () => /* @__PURE__ */ jsx(SimplePopover, { trigger: /* @__PURE__ */ jsx(Button, { children: "click here" }), closeOnHoverOut: !0, children: /* @__PURE__ */ jsx(YStack, { children: /* @__PURE__ */ jsx(Text, { children: "popover content will close on hoverOut" }) }) });
|
|
21
10
|
function Open() {
|
|
22
11
|
return /* @__PURE__ */ jsx(
|
|
23
12
|
SimplePopover,
|
|
24
13
|
{
|
|
14
|
+
trigger: /* @__PURE__ */ jsx(Button, { children: "hover on it to get Popover" }),
|
|
25
15
|
triggerOnHover: !0,
|
|
26
16
|
arrow: !1,
|
|
27
17
|
triggerStyle: { als: "center", ai: "center" },
|
|
18
|
+
closeOnHoverOut: !0,
|
|
28
19
|
children: /* @__PURE__ */ jsx(YStack, { children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => /* @__PURE__ */ jsx(Text, { children: i }, i)) })
|
|
29
20
|
}
|
|
30
21
|
);
|
|
@@ -37,37 +28,14 @@ const openOnHover = () => /* @__PURE__ */ jsxs(XStack, { jc: "space-around", chi
|
|
|
37
28
|
return /* @__PURE__ */ jsxs(YStack, { space: !0, children: [
|
|
38
29
|
/* @__PURE__ */ jsx(Label, { children: "change the switch to get popover" }),
|
|
39
30
|
/* @__PURE__ */ jsx(Switch, { checked: props.open, onCheckedChange: setOpen }),
|
|
40
|
-
/* @__PURE__ */ jsx(
|
|
41
|
-
SimplePopover,
|
|
42
|
-
{
|
|
43
|
-
open,
|
|
44
|
-
onOpenChange: setOpen,
|
|
45
|
-
children: /* @__PURE__ */ jsx(Text, { children: "Conditional popover" })
|
|
46
|
-
}
|
|
47
|
-
)
|
|
31
|
+
/* @__PURE__ */ jsx(SimplePopover, { open, onOpenChange: setOpen, trigger: /* @__PURE__ */ jsx(Button, { children: "Popup will open here" }), children: /* @__PURE__ */ jsx(Text, { children: "Conditional popover" }) })
|
|
48
32
|
] });
|
|
49
|
-
}, openOnChangingTheCondition = (args) => /* @__PURE__ */ jsx(OnCondition, { ...args })
|
|
50
|
-
const [open, setOpen] = useState(!1), [inputVal, setInputVal] = useState("");
|
|
51
|
-
function handleInput(val) {
|
|
52
|
-
setOpen(val === "show"), setInputVal(val);
|
|
53
|
-
}
|
|
54
|
-
return /* @__PURE__ */ jsx(YStack, { space: !0, children: /* @__PURE__ */ jsx(
|
|
55
|
-
SimplePopover,
|
|
56
|
-
{
|
|
57
|
-
open,
|
|
58
|
-
onOpenChange: setOpen,
|
|
59
|
-
triggerElement: /* @__PURE__ */ jsx(YStack, { children: /* @__PURE__ */ jsx(Input, { value: inputVal, onChangeText: handleInput, placeholder: "type show to get popup" }) }),
|
|
60
|
-
arrow: !0,
|
|
61
|
-
children: /* @__PURE__ */ jsx(Text, { children: "Conditional popover" })
|
|
62
|
-
}
|
|
63
|
-
) });
|
|
64
|
-
}, openOnAnyCondition = (args) => /* @__PURE__ */ jsx(ConditionalPopover, { ...args });
|
|
33
|
+
}, openOnChangingTheCondition = (args) => /* @__PURE__ */ jsx(OnCondition, { ...args });
|
|
65
34
|
var SimplePopover_stories_default = meta;
|
|
66
35
|
export {
|
|
67
36
|
closeOnHoverOut,
|
|
68
37
|
SimplePopover_stories_default as default,
|
|
69
38
|
main,
|
|
70
|
-
openOnAnyCondition,
|
|
71
39
|
openOnChangingTheCondition,
|
|
72
40
|
openOnHover
|
|
73
41
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/panels/SimplePopover/SimplePopover.stories.tsx"],
|
|
4
|
-
"mappings": "AAqBA,SAAgB,gBAAgB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,MAAM,QAAQ,QAAQ,
|
|
4
|
+
"mappings": "AAqBA,SAAgB,gBAAgB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,MAAM,QAAQ,QAAQ,QAAe,OAAO,cAAc;AAUzC,cAkCxB,YAlCwB;AAP1B,MAAM,OAAa;AAAA,EACjB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,EAAE;AACzC,GAEa,OAAO,MAClB,oBAAC,iBAAc,SAAS,oBAAC,UAAO,yCAA2B,GACzD,8BAAC,UACC,8BAAC,QAAK,6BAAe,GACvB,GACF,GAGW,kBAAkB,MAC7B,oBAAC,iBAAc,SAAS,oBAAC,UAAO,wBAAU,GAAW,iBAAe,IAClE,8BAAC,UACC,8BAAC,QAAK,oDAAsC,GAC9C,GACF;AAGF,SAAS,OAAO;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,oBAAC,UAAO,wCAA0B;AAAA,MAC3C,gBAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc,EAAE,KAAK,UAAU,IAAI,SAAS;AAAA,MAC5C,iBAAe;AAAA,MAEf,8BAAC,UACE,WAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,EAAE,IAAI,CAAC,MACpC,oBAAC,QAAc,eAAJ,CAAM,CAClB,GACH;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,cAAc,MACzB,qBAAC,UAAO,IAAG,gBACT;AAAA,sBAAC,QAAK;AAAA,EACN,oBAAC,QAAK;AAAA,GACR,GAGI,cAAc,CAAC,UAAU;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAK;AACtC,SACE,qBAAC,UAAO,OAAK,IACX;AAAA,wBAAC,SAAM,8CAAgC;AAAA,IACvC,oBAAC,UAAO,SAAS,MAAM,MAAM,iBAAiB,SAAS;AAAA,IACvD,oBAAC,iBAAc,MAAY,cAAc,SAAS,SAAS,oBAAC,UAAO,kCAAoB,GACrF,8BAAC,QAAK,iCAAmB,GAC3B;AAAA,KACF;AAEJ,GAEa,6BAA6B,CAAC,SAAS,oBAAC,eAAa,GAAG,MAAM;AAE3E,IAAO,gCAAQ;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -1,64 +1,33 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import { SimplePopover } from "./index";
|
|
3
|
-
import { Text, YStack, XStack, Switch,
|
|
3
|
+
import { Text, YStack, XStack, Switch, Label, Button } from "tamagui";
|
|
4
4
|
const meta = {
|
|
5
5
|
title: "panels/SimplePopover",
|
|
6
6
|
component: SimplePopover,
|
|
7
7
|
parameters: { status: { type: "beta" } }
|
|
8
|
-
}, main = () => /* @__PURE__ */ React.createElement(
|
|
9
|
-
SimplePopover,
|
|
10
|
-
null,
|
|
11
|
-
/* @__PURE__ */ React.createElement(YStack, null, /* @__PURE__ */ React.createElement(Text, null, "popover content"))
|
|
12
|
-
), closeOnHoverOut = () => /* @__PURE__ */ React.createElement(
|
|
13
|
-
SimplePopover,
|
|
14
|
-
{
|
|
15
|
-
closeOnHoverOut: !0
|
|
16
|
-
},
|
|
17
|
-
/* @__PURE__ */ React.createElement(YStack, null, /* @__PURE__ */ React.createElement(Text, null, "popover content will close on hoverOut"))
|
|
18
|
-
);
|
|
8
|
+
}, main = () => /* @__PURE__ */ React.createElement(SimplePopover, { trigger: /* @__PURE__ */ React.createElement(Button, null, "Click here to get a Popover") }, /* @__PURE__ */ React.createElement(YStack, null, /* @__PURE__ */ React.createElement(Text, null, "popover content"))), closeOnHoverOut = () => /* @__PURE__ */ React.createElement(SimplePopover, { trigger: /* @__PURE__ */ React.createElement(Button, null, "click here"), closeOnHoverOut: !0 }, /* @__PURE__ */ React.createElement(YStack, null, /* @__PURE__ */ React.createElement(Text, null, "popover content will close on hoverOut")));
|
|
19
9
|
function Open() {
|
|
20
10
|
return /* @__PURE__ */ React.createElement(
|
|
21
11
|
SimplePopover,
|
|
22
12
|
{
|
|
13
|
+
trigger: /* @__PURE__ */ React.createElement(Button, null, "hover on it to get Popover"),
|
|
23
14
|
triggerOnHover: !0,
|
|
24
15
|
arrow: !1,
|
|
25
|
-
triggerStyle: { als: "center", ai: "center" }
|
|
16
|
+
triggerStyle: { als: "center", ai: "center" },
|
|
17
|
+
closeOnHoverOut: !0
|
|
26
18
|
},
|
|
27
19
|
/* @__PURE__ */ React.createElement(YStack, null, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => /* @__PURE__ */ React.createElement(Text, { key: i }, i)))
|
|
28
20
|
);
|
|
29
21
|
}
|
|
30
22
|
const openOnHover = () => /* @__PURE__ */ React.createElement(XStack, { jc: "space-around" }, /* @__PURE__ */ React.createElement(Open, null), /* @__PURE__ */ React.createElement(Open, null)), OnCondition = (props) => {
|
|
31
23
|
const [open, setOpen] = useState(!1);
|
|
32
|
-
return /* @__PURE__ */ React.createElement(YStack, { space: !0 }, /* @__PURE__ */ React.createElement(Label, null, "change the switch to get popover"), /* @__PURE__ */ React.createElement(Switch, { checked: props.open, onCheckedChange: setOpen }), /* @__PURE__ */ React.createElement(
|
|
33
|
-
|
|
34
|
-
{
|
|
35
|
-
open,
|
|
36
|
-
onOpenChange: setOpen
|
|
37
|
-
},
|
|
38
|
-
/* @__PURE__ */ React.createElement(Text, null, "Conditional popover")
|
|
39
|
-
));
|
|
40
|
-
}, openOnChangingTheCondition = (args) => /* @__PURE__ */ React.createElement(OnCondition, { ...args }), ConditionalPopover = () => {
|
|
41
|
-
const [open, setOpen] = useState(!1), [inputVal, setInputVal] = useState("");
|
|
42
|
-
function handleInput(val) {
|
|
43
|
-
setOpen(val === "show"), setInputVal(val);
|
|
44
|
-
}
|
|
45
|
-
return /* @__PURE__ */ React.createElement(YStack, { space: !0 }, /* @__PURE__ */ React.createElement(
|
|
46
|
-
SimplePopover,
|
|
47
|
-
{
|
|
48
|
-
open,
|
|
49
|
-
onOpenChange: setOpen,
|
|
50
|
-
triggerElement: /* @__PURE__ */ React.createElement(YStack, null, /* @__PURE__ */ React.createElement(Input, { value: inputVal, onChangeText: handleInput, placeholder: "type show to get popup" })),
|
|
51
|
-
arrow: !0
|
|
52
|
-
},
|
|
53
|
-
/* @__PURE__ */ React.createElement(Text, null, "Conditional popover")
|
|
54
|
-
));
|
|
55
|
-
}, openOnAnyCondition = (args) => /* @__PURE__ */ React.createElement(ConditionalPopover, { ...args });
|
|
24
|
+
return /* @__PURE__ */ React.createElement(YStack, { space: !0 }, /* @__PURE__ */ React.createElement(Label, null, "change the switch to get popover"), /* @__PURE__ */ React.createElement(Switch, { checked: props.open, onCheckedChange: setOpen }), /* @__PURE__ */ React.createElement(SimplePopover, { open, onOpenChange: setOpen, trigger: /* @__PURE__ */ React.createElement(Button, null, "Popup will open here") }, /* @__PURE__ */ React.createElement(Text, null, "Conditional popover")));
|
|
25
|
+
}, openOnChangingTheCondition = (args) => /* @__PURE__ */ React.createElement(OnCondition, { ...args });
|
|
56
26
|
var SimplePopover_stories_default = meta;
|
|
57
27
|
export {
|
|
58
28
|
closeOnHoverOut,
|
|
59
29
|
SimplePopover_stories_default as default,
|
|
60
30
|
main,
|
|
61
|
-
openOnAnyCondition,
|
|
62
31
|
openOnChangingTheCondition,
|
|
63
32
|
openOnHover
|
|
64
33
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/panels/SimplePopover/SimplePopover.stories.tsx"],
|
|
4
|
-
"mappings": "AAqBA,OAAO,SAAS,gBAAgB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,MAAM,QAAQ,QAAQ,
|
|
4
|
+
"mappings": "AAqBA,OAAO,SAAS,gBAAgB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,MAAM,QAAQ,QAAQ,QAAe,OAAO,cAAc;AAGnE,MAAM,OAAa;AAAA,EACjB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,EAAE;AACzC,GAEa,OAAO,MAClB,oCAAC,iBAAc,SAAS,oCAAC,cAAO,6BAA2B,KACzD,oCAAC,cACC,oCAAC,YAAK,iBAAe,CACvB,CACF,GAGW,kBAAkB,MAC7B,oCAAC,iBAAc,SAAS,oCAAC,cAAO,YAAU,GAAW,iBAAe,MAClE,oCAAC,cACC,oCAAC,YAAK,wCAAsC,CAC9C,CACF;AAGF,SAAS,OAAO;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,oCAAC,cAAO,4BAA0B;AAAA,MAC3C,gBAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc,EAAE,KAAK,UAAU,IAAI,SAAS;AAAA,MAC5C,iBAAe;AAAA;AAAA,IAEf,oCAAC,cACE,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,EAAE,IAAI,CAAC,MACpC,oCAAC,QAAK,KAAK,KAAI,CAAE,CAClB,CACH;AAAA,EACF;AAEJ;AAEO,MAAM,cAAc,MACzB,oCAAC,UAAO,IAAG,kBACT,oCAAC,UAAK,GACN,oCAAC,UAAK,CACR,GAGI,cAAc,CAAC,UAAU;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAK;AACtC,SACE,oCAAC,UAAO,OAAK,MACX,oCAAC,aAAM,kCAAgC,GACvC,oCAAC,UAAO,SAAS,MAAM,MAAM,iBAAiB,SAAS,GACvD,oCAAC,iBAAc,MAAY,cAAc,SAAS,SAAS,oCAAC,cAAO,sBAAoB,KACrF,oCAAC,YAAK,qBAAmB,CAC3B,CACF;AAEJ,GAEa,6BAA6B,CAAC,SAAS,oCAAC,eAAa,GAAG,MAAM;AAE3E,IAAO,gCAAQ;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -1,20 +1,6 @@
|
|
|
1
|
-
import { Adapt, Popover
|
|
1
|
+
import { Adapt, Popover } from "tamagui";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import { YStack } from "tamagui";
|
|
4
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
const SimplePopoverTrigger = React.forwardRef((props, forwardedRef) => {
|
|
6
|
-
const context = usePopoverContext(), composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef), trigger = /* @__PURE__ */ jsx(
|
|
7
|
-
View,
|
|
8
|
-
{
|
|
9
|
-
"aria-haspopup": "dialog",
|
|
10
|
-
"aria-expanded": context.open,
|
|
11
|
-
"data-state": getState(context.open),
|
|
12
|
-
...props,
|
|
13
|
-
ref: composedTriggerRef
|
|
14
|
-
}
|
|
15
|
-
);
|
|
16
|
-
return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(PopperAnchor, { asChild: !0, children: trigger });
|
|
17
|
-
});
|
|
18
4
|
function SimplePopover({
|
|
19
5
|
children,
|
|
20
6
|
contentStyle,
|
|
@@ -23,12 +9,18 @@ function SimplePopover({
|
|
|
23
9
|
arrow = !0,
|
|
24
10
|
triggerOnHover,
|
|
25
11
|
closeOnHoverOut,
|
|
12
|
+
trigger,
|
|
26
13
|
...props
|
|
27
14
|
}) {
|
|
28
|
-
const [open, setOpen] = React.useState(!1)
|
|
15
|
+
const [open, setOpen] = React.useState(!1);
|
|
16
|
+
function handleHoverIn(e) {
|
|
17
|
+
triggerOnHover && (setOpen(!0), contentStyle?.onHoverIn && contentStyle?.onHoverIn(e), triggerStyle?.onHoverIn && triggerStyle.onHoverIn(e));
|
|
18
|
+
}
|
|
19
|
+
function handleHoverOut(e) {
|
|
20
|
+
closeOnHoverOut && (setOpen(!1), contentStyle?.onHoverOut && contentStyle.onHoverOut(e), triggerStyle?.onHoverOut && triggerStyle.onHoverOut(e));
|
|
21
|
+
}
|
|
29
22
|
return /* @__PURE__ */ jsxs(Popover, { size: "$5", allowFlip: !0, open, onOpenChange: setOpen, ...props, children: [
|
|
30
|
-
|
|
31
|
-
!trigger && "triggerElement" in props && "open" in props && /* @__PURE__ */ jsx(SimplePopoverTrigger, { asChild: !0, children: props.triggerElement }),
|
|
23
|
+
/* @__PURE__ */ jsx(Popover.Trigger, { asChild: !0, ...triggerStyle, onHoverIn: handleHoverIn, onHoverOut: handleHoverOut, children: trigger }),
|
|
32
24
|
/* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Popover.Sheet, { modal: !0, dismissOnSnapToBottom: !0, children: [
|
|
33
25
|
/* @__PURE__ */ jsx(Popover.Sheet.Frame, { padding: "$4", onMouseEnter: () => setOpen(!0), children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
|
|
34
26
|
/* @__PURE__ */ jsx(Popover.Sheet.Overlay, {})
|
|
@@ -52,10 +44,10 @@ function SimplePopover({
|
|
|
52
44
|
}
|
|
53
45
|
],
|
|
54
46
|
elevate: !0,
|
|
55
|
-
onHoverIn: triggerOnHover ? () => setOpen(!0) : void 0,
|
|
56
|
-
onHoverOut: triggerOnHover || closeOnHoverOut ? () => setOpen(!1) : void 0,
|
|
57
47
|
zi: 9999999999,
|
|
58
48
|
...contentStyle,
|
|
49
|
+
onHoverIn: handleHoverIn,
|
|
50
|
+
onHoverOut: handleHoverOut,
|
|
59
51
|
children: [
|
|
60
52
|
arrow && /* @__PURE__ */ jsx(Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor", ...arrowStyle }),
|
|
61
53
|
children
|
|
@@ -65,7 +57,6 @@ function SimplePopover({
|
|
|
65
57
|
] });
|
|
66
58
|
}
|
|
67
59
|
export {
|
|
68
|
-
SimplePopover
|
|
69
|
-
SimplePopoverTrigger
|
|
60
|
+
SimplePopover
|
|
70
61
|
};
|
|
71
62
|
//# sourceMappingURL=index.js.map
|