@tamagui/demos 1.0.2 → 1.0.4
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/SheetDemo.js +13 -9
- package/dist/cjs/SheetDemo.js.map +2 -2
- package/dist/cjs/SliderDemo.js.map +2 -2
- package/dist/esm/SheetDemo.js +13 -9
- package/dist/esm/SheetDemo.js.map +2 -2
- package/dist/esm/SliderDemo.js.map +2 -2
- package/dist/jsx/SheetDemo.js +4 -2
- package/dist/jsx/SheetDemo.js.map +2 -2
- package/dist/jsx/SliderDemo.js.map +2 -2
- package/package.json +16 -16
- package/src/SheetDemo.tsx +12 -7
- package/src/SliderDemo.tsx +1 -2
package/dist/cjs/SheetDemo.js
CHANGED
|
@@ -72,15 +72,19 @@ const SheetDemo = () => {
|
|
|
72
72
|
icon: import_lucide_icons.ChevronDown,
|
|
73
73
|
onPress: () => setOpen(false)
|
|
74
74
|
}),
|
|
75
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
75
|
+
modal && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerSheet, {
|
|
78
|
+
open: innerOpen,
|
|
79
|
+
onOpenChange: setInnerOpen
|
|
80
|
+
}),
|
|
81
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
|
|
82
|
+
size: "$6",
|
|
83
|
+
circular: true,
|
|
84
|
+
icon: import_lucide_icons.ChevronUp,
|
|
85
|
+
onPress: () => setInnerOpen(true)
|
|
86
|
+
})
|
|
87
|
+
]
|
|
84
88
|
})
|
|
85
89
|
]
|
|
86
90
|
})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n const [position, setPosition] = useState(0)\n const [open, setOpen] = useState(false)\n const [modal, setModal] = useState(false)\n const [innerOpen, setInnerOpen] = useState(false)\n\n return (\n <>\n <XStack space>\n <Button onPress={() => setOpen(true)}>Open</Button>\n <Button onPress={() => setModal((x) => !x)}>\n {modal ? 'Type: Modal' : 'Type: Inline'}\n </Button>\n </XStack>\n\n <Sheet\n forceRemoveScrollEnabled={open}\n modal={modal}\n open={open}\n onOpenChange={setOpen}\n snapPoints={[85, 50, 25]}\n dismissOnSnapToBottom\n position={position}\n onPositionChange={setPosition}\n zIndex={100_000}\n >\n <Sheet.Overlay />\n <Sheet.Handle />\n <Sheet.Frame f={1} p=\"$4\" jc=\"center\" ai=\"center\" space=\"$5\">\n <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n <Button\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n const [position, setPosition] = useState(0)\n const [open, setOpen] = useState(false)\n const [modal, setModal] = useState(false)\n const [innerOpen, setInnerOpen] = useState(false)\n\n return (\n <>\n <XStack space>\n <Button onPress={() => setOpen(true)}>Open</Button>\n <Button onPress={() => setModal((x) => !x)}>\n {modal ? 'Type: Modal' : 'Type: Inline'}\n </Button>\n </XStack>\n\n <Sheet\n forceRemoveScrollEnabled={open}\n modal={modal}\n open={open}\n onOpenChange={setOpen}\n snapPoints={[85, 50, 25]}\n dismissOnSnapToBottom\n position={position}\n onPositionChange={setPosition}\n zIndex={100_000}\n >\n <Sheet.Overlay />\n <Sheet.Handle />\n <Sheet.Frame f={1} p=\"$4\" jc=\"center\" ai=\"center\" space=\"$5\">\n <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n\n {modal && (\n <>\n <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />\n <Button\n size=\"$6\"\n circular\n icon={ChevronUp}\n onPress={() => setInnerOpen(true)}\n ></Button>\n </>\n )}\n </Sheet.Frame>\n </Sheet>\n </>\n )\n}\n\nfunction InnerSheet(props: SheetProps) {\n return (\n <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>\n <Sheet.Overlay />\n <Sheet.Handle />\n <Sheet.Frame f={1} jc=\"center\" ai=\"center\" space=\"$5\">\n <Sheet.ScrollView p=\"$4\" space>\n <Button\n size=\"$8\"\n circular\n als=\"center\"\n icon={ChevronDown}\n onPress={() => props.onOpenChange?.(false)}\n />\n <H1>Hello world</H1>\n <H2>You can scroll me</H2>\n {[1, 2, 3].map((i) => (\n <Paragraph key={i} size=\"$10\">\n Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad\n pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation\n ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat\n ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco\n velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.\n </Paragraph>\n ))}\n </Sheet.ScrollView>\n </Sheet.Frame>\n </Sheet>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM;AAdN,0BAAuC;AACvC,mBAAsB;AAEtB,mBAAyB;AACzB,qBAAkD;AAE3C,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,SACE;AAAA,IACE;AAAA,mDAAC;AAAA,QAAO,OAAK;AAAA,QACX;AAAA,sDAAC;AAAA,YAAO,SAAS,MAAM,QAAQ,IAAI;AAAA,YAAG;AAAA,WAAI;AAAA,UAC1C,4CAAC;AAAA,YAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC;AAAA,YACtC,kBAAQ,gBAAgB;AAAA,WAC3B;AAAA;AAAA,OACF;AAAA,MAEA,6CAAC;AAAA,QACC,0BAA0B;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,QACvB,uBAAqB;AAAA,QACrB;AAAA,QACA,kBAAkB;AAAA,QAClB,QAAQ;AAAA,QAER;AAAA,sDAAC,mBAAM,SAAN,EAAc;AAAA,UACf,4CAAC,mBAAM,QAAN,EAAa;AAAA,UACd,6CAAC,mBAAM,OAAN;AAAA,YAAY,GAAG;AAAA,YAAG,GAAE;AAAA,YAAK,IAAG;AAAA,YAAS,IAAG;AAAA,YAAS,OAAM;AAAA,YACtD;AAAA,0DAAC;AAAA,gBAAO,MAAK;AAAA,gBAAK,UAAQ;AAAA,gBAAC,MAAM;AAAA,gBAAa,SAAS,MAAM,QAAQ,KAAK;AAAA,eAAG;AAAA,cAE5E,SACC;AAAA,gBACE;AAAA,8DAAC;AAAA,oBAAW,MAAM;AAAA,oBAAW,cAAc;AAAA,mBAAc;AAAA,kBACzD,4CAAC;AAAA,oBACC,MAAK;AAAA,oBACL,UAAQ;AAAA,oBACR,MAAM;AAAA,oBACN,SAAS,MAAM,aAAa,IAAI;AAAA,mBACjC;AAAA;AAAA,eACH;AAAA;AAAA,WAEJ;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,6CAAC;AAAA,IAAM,OAAK;AAAA,IAAC,YAAY,CAAC,EAAE;AAAA,IAAG,uBAAqB;AAAA,IAAE,GAAG;AAAA,IACvD;AAAA,kDAAC,mBAAM,SAAN,EAAc;AAAA,MACf,4CAAC,mBAAM,QAAN,EAAa;AAAA,MACd,4CAAC,mBAAM,OAAN;AAAA,QAAY,GAAG;AAAA,QAAG,IAAG;AAAA,QAAS,IAAG;AAAA,QAAS,OAAM;AAAA,QAC/C,uDAAC,mBAAM,YAAN;AAAA,UAAiB,GAAE;AAAA,UAAK,OAAK;AAAA,UAC5B;AAAA,wDAAC;AAAA,cACC,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,KAAI;AAAA,cACJ,MAAM;AAAA,cACN,SAAS,MAAG;AAlExB;AAkE2B,mCAAM,iBAAN,+BAAqB;AAAA;AAAA,aACtC;AAAA,YACA,4CAAC;AAAA,cAAG;AAAA,aAAW;AAAA,YACf,4CAAC;AAAA,cAAG;AAAA,aAAiB;AAAA,YACpB,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,4CAAC;AAAA,cAAkB,MAAK;AAAA,cAAM;AAAA,eAAd,CAMhB,CACD;AAAA;AAAA,SACH;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SliderDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n return (\n <XStack height={200} ai=\"center\" space=\"$8\">\n <SimpleSlider height={200} orientation=\"vertical\" />\n <SimpleSlider width={200} />\n </XStack>\n )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n return (\n <Slider defaultValue={[50]} max={100} step={1} {...props}>\n <Slider.Track>\n <Slider.TrackActive />\n </Slider.Track>\n <Slider.Thumb bordered circular elevate index={0} />\n {children}\n </Slider>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAoD;AAE7C,SAAS,aAAa;AAC3B,SACE,6CAAC;AAAA,IAAO,QAAQ;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,IACrC;AAAA,kDAAC;AAAA,QAAa,QAAQ;AAAA,QAAK,aAAY;AAAA,OAAW;AAAA,MAClD,4CAAC;AAAA,QAAa,OAAO;AAAA,OAAK;AAAA;AAAA,GAC5B;AAEJ;AAEA,SAAS,aAAa,EAAE,aAAa,MAAM,GAAgB;AACzD,SACE,6CAAC;AAAA,IAAO,cAAc,CAAC,EAAE;AAAA,IAAG,KAAK;AAAA,IAAK,MAAM;AAAA,IAAI,GAAG;AAAA,IACjD;AAAA,kDAAC,sBAAO,OAAP;AAAA,QACC,sDAAC,sBAAO,aAAP,EAAmB;AAAA,OACtB;AAAA,MACA,4CAAC,sBAAO,OAAP;AAAA,QAAa,UAAQ;AAAA,QAAC,UAAQ;AAAA,QAAC,SAAO;AAAA,QAAC,OAAO;AAAA,OAAG;AAAA,MACjD;AAAA;AAAA,GACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SheetDemo.js
CHANGED
|
@@ -49,15 +49,19 @@ const SheetDemo = () => {
|
|
|
49
49
|
icon: ChevronDown,
|
|
50
50
|
onPress: () => setOpen(false)
|
|
51
51
|
}),
|
|
52
|
-
/* @__PURE__ */
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
52
|
+
modal && /* @__PURE__ */ jsxs(Fragment, {
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ jsx(InnerSheet, {
|
|
55
|
+
open: innerOpen,
|
|
56
|
+
onOpenChange: setInnerOpen
|
|
57
|
+
}),
|
|
58
|
+
/* @__PURE__ */ jsx(Button, {
|
|
59
|
+
size: "$6",
|
|
60
|
+
circular: true,
|
|
61
|
+
icon: ChevronUp,
|
|
62
|
+
onPress: () => setInnerOpen(true)
|
|
63
|
+
})
|
|
64
|
+
]
|
|
61
65
|
})
|
|
62
66
|
]
|
|
63
67
|
})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n const [position, setPosition] = useState(0)\n const [open, setOpen] = useState(false)\n const [modal, setModal] = useState(false)\n const [innerOpen, setInnerOpen] = useState(false)\n\n return (\n <>\n <XStack space>\n <Button onPress={() => setOpen(true)}>Open</Button>\n <Button onPress={() => setModal((x) => !x)}>\n {modal ? 'Type: Modal' : 'Type: Inline'}\n </Button>\n </XStack>\n\n <Sheet\n forceRemoveScrollEnabled={open}\n modal={modal}\n open={open}\n onOpenChange={setOpen}\n snapPoints={[85, 50, 25]}\n dismissOnSnapToBottom\n position={position}\n onPositionChange={setPosition}\n zIndex={100_000}\n >\n <Sheet.Overlay />\n <Sheet.Handle />\n <Sheet.Frame f={1} p=\"$4\" jc=\"center\" ai=\"center\" space=\"$5\">\n <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n <Button\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n const [position, setPosition] = useState(0)\n const [open, setOpen] = useState(false)\n const [modal, setModal] = useState(false)\n const [innerOpen, setInnerOpen] = useState(false)\n\n return (\n <>\n <XStack space>\n <Button onPress={() => setOpen(true)}>Open</Button>\n <Button onPress={() => setModal((x) => !x)}>\n {modal ? 'Type: Modal' : 'Type: Inline'}\n </Button>\n </XStack>\n\n <Sheet\n forceRemoveScrollEnabled={open}\n modal={modal}\n open={open}\n onOpenChange={setOpen}\n snapPoints={[85, 50, 25]}\n dismissOnSnapToBottom\n position={position}\n onPositionChange={setPosition}\n zIndex={100_000}\n >\n <Sheet.Overlay />\n <Sheet.Handle />\n <Sheet.Frame f={1} p=\"$4\" jc=\"center\" ai=\"center\" space=\"$5\">\n <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n\n {modal && (\n <>\n <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />\n <Button\n size=\"$6\"\n circular\n icon={ChevronUp}\n onPress={() => setInnerOpen(true)}\n ></Button>\n </>\n )}\n </Sheet.Frame>\n </Sheet>\n </>\n )\n}\n\nfunction InnerSheet(props: SheetProps) {\n return (\n <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>\n <Sheet.Overlay />\n <Sheet.Handle />\n <Sheet.Frame f={1} jc=\"center\" ai=\"center\" space=\"$5\">\n <Sheet.ScrollView p=\"$4\" space>\n <Button\n size=\"$8\"\n circular\n als=\"center\"\n icon={ChevronDown}\n onPress={() => props.onOpenChange?.(false)}\n />\n <H1>Hello world</H1>\n <H2>You can scroll me</H2>\n {[1, 2, 3].map((i) => (\n <Paragraph key={i} size=\"$10\">\n Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad\n pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation\n ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat\n ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco\n velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.\n </Paragraph>\n ))}\n </Sheet.ScrollView>\n </Sheet.Frame>\n </Sheet>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAcM,SAwBM,UAvBJ,KADF;AAdN,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,WAAW,cAAc;AAE3C,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IACE;AAAA,2BAAC;AAAA,QAAO,OAAK;AAAA,QACX;AAAA,8BAAC;AAAA,YAAO,SAAS,MAAM,QAAQ,IAAI;AAAA,YAAG;AAAA,WAAI;AAAA,UAC1C,oBAAC;AAAA,YAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC;AAAA,YACtC,kBAAQ,gBAAgB;AAAA,WAC3B;AAAA;AAAA,OACF;AAAA,MAEA,qBAAC;AAAA,QACC,0BAA0B;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,QACvB,uBAAqB;AAAA,QACrB;AAAA,QACA,kBAAkB;AAAA,QAClB,QAAQ;AAAA,QAER;AAAA,8BAAC,MAAM,SAAN,EAAc;AAAA,UACf,oBAAC,MAAM,QAAN,EAAa;AAAA,UACd,qBAAC,MAAM,OAAN;AAAA,YAAY,GAAG;AAAA,YAAG,GAAE;AAAA,YAAK,IAAG;AAAA,YAAS,IAAG;AAAA,YAAS,OAAM;AAAA,YACtD;AAAA,kCAAC;AAAA,gBAAO,MAAK;AAAA,gBAAK,UAAQ;AAAA,gBAAC,MAAM;AAAA,gBAAa,SAAS,MAAM,QAAQ,KAAK;AAAA,eAAG;AAAA,cAE5E,SACC;AAAA,gBACE;AAAA,sCAAC;AAAA,oBAAW,MAAM;AAAA,oBAAW,cAAc;AAAA,mBAAc;AAAA,kBACzD,oBAAC;AAAA,oBACC,MAAK;AAAA,oBACL,UAAQ;AAAA,oBACR,MAAM;AAAA,oBACN,SAAS,MAAM,aAAa,IAAI;AAAA,mBACjC;AAAA;AAAA,eACH;AAAA;AAAA,WAEJ;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,qBAAC;AAAA,IAAM,OAAK;AAAA,IAAC,YAAY,CAAC,EAAE;AAAA,IAAG,uBAAqB;AAAA,IAAE,GAAG;AAAA,IACvD;AAAA,0BAAC,MAAM,SAAN,EAAc;AAAA,MACf,oBAAC,MAAM,QAAN,EAAa;AAAA,MACd,oBAAC,MAAM,OAAN;AAAA,QAAY,GAAG;AAAA,QAAG,IAAG;AAAA,QAAS,IAAG;AAAA,QAAS,OAAM;AAAA,QAC/C,+BAAC,MAAM,YAAN;AAAA,UAAiB,GAAE;AAAA,UAAK,OAAK;AAAA,UAC5B;AAAA,gCAAC;AAAA,cACC,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,KAAI;AAAA,cACJ,MAAM;AAAA,cACN,SAAS,MAAG;AAlExB;AAkE2B,mCAAM,iBAAN,+BAAqB;AAAA;AAAA,aACtC;AAAA,YACA,oBAAC;AAAA,cAAG;AAAA,aAAW;AAAA,YACf,oBAAC;AAAA,cAAG;AAAA,aAAiB;AAAA,YACpB,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,oBAAC;AAAA,cAAkB,MAAK;AAAA,cAAM;AAAA,eAAd,CAMhB,CACD;AAAA;AAAA,SACH;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SliderDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n return (\n <XStack height={200} ai=\"center\" space=\"$8\">\n <SimpleSlider height={200} orientation=\"vertical\" />\n <SimpleSlider width={200} />\n </XStack>\n )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n return (\n <Slider defaultValue={[50]} max={100} step={1} {...props}>\n <Slider.Track>\n <Slider.TrackActive />\n </Slider.Track>\n <Slider.Thumb bordered circular elevate index={0} />\n {children}\n </Slider>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,qBAAC;AAAA,IAAO,QAAQ;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,IACrC;AAAA,0BAAC;AAAA,QAAa,QAAQ;AAAA,QAAK,aAAY;AAAA,OAAW;AAAA,MAClD,oBAAC;AAAA,QAAa,OAAO;AAAA,OAAK;AAAA;AAAA,GAC5B;AAEJ;AAEA,SAAS,aAAa,EAAE,aAAa,MAAM,GAAgB;AACzD,SACE,qBAAC;AAAA,IAAO,cAAc,CAAC,EAAE;AAAA,IAAG,KAAK;AAAA,IAAK,MAAM;AAAA,IAAI,GAAG;AAAA,IACjD;AAAA,0BAAC,OAAO,OAAP;AAAA,QACC,8BAAC,OAAO,aAAP,EAAmB;AAAA,OACtB;AAAA,MACA,oBAAC,OAAO,OAAP;AAAA,QAAa,UAAQ;AAAA,QAAC,UAAQ;AAAA,QAAC,SAAO;AAAA,QAAC,OAAO;AAAA,OAAG;AAAA,MACjD;AAAA;AAAA,GACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/SheetDemo.js
CHANGED
|
@@ -17,8 +17,10 @@ const SheetDemo = () => {
|
|
|
17
17
|
<Sheet.Handle />
|
|
18
18
|
<Sheet.Frame f={1} p="$4" jc="center" ai="center" space="$5">
|
|
19
19
|
<Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
{modal && <>
|
|
21
|
+
<InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
|
|
22
|
+
<Button size="$6" circular icon={ChevronUp} onPress={() => setInnerOpen(true)} />
|
|
23
|
+
</>}
|
|
22
24
|
</Sheet.Frame>
|
|
23
25
|
</Sheet>
|
|
24
26
|
</>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n const [position, setPosition] = useState(0)\n const [open, setOpen] = useState(false)\n const [modal, setModal] = useState(false)\n const [innerOpen, setInnerOpen] = useState(false)\n\n return (\n <>\n <XStack space>\n <Button onPress={() => setOpen(true)}>Open</Button>\n <Button onPress={() => setModal((x) => !x)}>\n {modal ? 'Type: Modal' : 'Type: Inline'}\n </Button>\n </XStack>\n\n <Sheet\n forceRemoveScrollEnabled={open}\n modal={modal}\n open={open}\n onOpenChange={setOpen}\n snapPoints={[85, 50, 25]}\n dismissOnSnapToBottom\n position={position}\n onPositionChange={setPosition}\n zIndex={100_000}\n >\n <Sheet.Overlay />\n <Sheet.Handle />\n <Sheet.Frame f={1} p=\"$4\" jc=\"center\" ai=\"center\" space=\"$5\">\n <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n <Button\n
|
|
5
|
-
"mappings": "AAAA,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,WAAW,cAAc;AAE3C,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IACE,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,EAAzC;AAAA,MACD,CAAC,OAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,IACtC,QAAQ,gBAAgB,eAC3B,EAFC;AAAA,IAGH,EALC;AAAA,IAOD,CAAC,MACC,0BAA0B,MAC1B,OAAO,OACP,MAAM,MACN,cAAc,SACd,YAAY,CAAC,IAAI,IAAI,EAAE,GACvB,sBACA,UAAU,UACV,kBAAkB,aAClB,QAAQ;AAAA,MAER,CAAC,MAAM,QAAQ;AAAA,MACf,CAAC,MAAM,OAAO;AAAA,MACd,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,MAAM;AAAA,QACtD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,
|
|
4
|
+
"sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n const [position, setPosition] = useState(0)\n const [open, setOpen] = useState(false)\n const [modal, setModal] = useState(false)\n const [innerOpen, setInnerOpen] = useState(false)\n\n return (\n <>\n <XStack space>\n <Button onPress={() => setOpen(true)}>Open</Button>\n <Button onPress={() => setModal((x) => !x)}>\n {modal ? 'Type: Modal' : 'Type: Inline'}\n </Button>\n </XStack>\n\n <Sheet\n forceRemoveScrollEnabled={open}\n modal={modal}\n open={open}\n onOpenChange={setOpen}\n snapPoints={[85, 50, 25]}\n dismissOnSnapToBottom\n position={position}\n onPositionChange={setPosition}\n zIndex={100_000}\n >\n <Sheet.Overlay />\n <Sheet.Handle />\n <Sheet.Frame f={1} p=\"$4\" jc=\"center\" ai=\"center\" space=\"$5\">\n <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n\n {modal && (\n <>\n <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />\n <Button\n size=\"$6\"\n circular\n icon={ChevronUp}\n onPress={() => setInnerOpen(true)}\n ></Button>\n </>\n )}\n </Sheet.Frame>\n </Sheet>\n </>\n )\n}\n\nfunction InnerSheet(props: SheetProps) {\n return (\n <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>\n <Sheet.Overlay />\n <Sheet.Handle />\n <Sheet.Frame f={1} jc=\"center\" ai=\"center\" space=\"$5\">\n <Sheet.ScrollView p=\"$4\" space>\n <Button\n size=\"$8\"\n circular\n als=\"center\"\n icon={ChevronDown}\n onPress={() => props.onOpenChange?.(false)}\n />\n <H1>Hello world</H1>\n <H2>You can scroll me</H2>\n {[1, 2, 3].map((i) => (\n <Paragraph key={i} size=\"$10\">\n Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad\n pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation\n ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat\n ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco\n velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.\n </Paragraph>\n ))}\n </Sheet.ScrollView>\n </Sheet.Frame>\n </Sheet>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,WAAW,cAAc;AAE3C,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IACE,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,EAAzC;AAAA,MACD,CAAC,OAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,IACtC,QAAQ,gBAAgB,eAC3B,EAFC;AAAA,IAGH,EALC;AAAA,IAOD,CAAC,MACC,0BAA0B,MAC1B,OAAO,OACP,MAAM,MACN,cAAc,SACd,YAAY,CAAC,IAAI,IAAI,EAAE,GACvB,sBACA,UAAU,UACV,kBAAkB,aAClB,QAAQ;AAAA,MAER,CAAC,MAAM,QAAQ;AAAA,MACf,CAAC,MAAM,OAAO;AAAA,MACd,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,MAAM;AAAA,QACtD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,SAE5E,SACC;AAAA,UACE,CAAC,WAAW,MAAM,WAAW,cAAc,cAAc;AAAA,UACzD,CAAC,OACC,KAAK,KACL,SACA,MAAM,WACN,SAAS,MAAM,aAAa,IAAI,GACjC;AAAA,QACH;AAAA,MAEJ,EAdC,MAAM;AAAA,IAeT,EA5BC;AAAA,EA6BH;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,CAAC,MAAM,MAAM,YAAY,CAAC,EAAE,GAAG,0BAA0B;AAAA,IACvD,CAAC,MAAM,QAAQ;AAAA,IACf,CAAC,MAAM,OAAO;AAAA,IACd,CAAC,MAAM,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,SAAS,MAAM,KAC/C,CAAC,MAAM,WAAW,EAAE,KAAK;AAAA,MACvB,CAAC,OACC,KAAK,KACL,SACA,IAAI,SACJ,MAAM,aACN,SAAS,MAAM,MAAM,eAAe,KAAK,GAC3C;AAAA,MACA,CAAC,GAAG,WAAW,EAAd;AAAA,MACD,CAAC,GAAG,iBAAiB,EAApB;AAAA,OACA,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,CAAC,UAAU,KAAK,GAAG,KAAK,MAAM,0WAM9B,EANC,UAOF;AAAA,IACH,EAnBC,MAAM,WAoBT,EArBC,MAAM;AAAA,EAsBT,EAzBC;AA2BL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SliderDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n return (\n <XStack height={200} ai=\"center\" space=\"$8\">\n <SimpleSlider height={200} orientation=\"vertical\" />\n <SimpleSlider width={200} />\n </XStack>\n )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n return (\n <Slider defaultValue={[50]} max={100} step={1} {...props}>\n <Slider.Track>\n <Slider.TrackActive />\n </Slider.Track>\n <Slider.Thumb bordered circular elevate index={0} />\n {children}\n </Slider>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,GAAG,SAAS,MAAM;AAAA,IACrC,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,SAAS,aAAa,EAAE,aAAa,MAAM,GAAgB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,SAAS,SAAS,QAAQ,OAAO,GAAG;AAAA,KACjD;AAAA,EACH,EANC;AAQL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/demos",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -28,27 +28,27 @@
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@tamagui/avatar": "^1.0.
|
|
32
|
-
"@tamagui/button": "^1.0.
|
|
33
|
-
"@tamagui/config-base": "^1.0.
|
|
34
|
-
"@tamagui/core": "^1.0.
|
|
35
|
-
"@tamagui/list-item": "^1.0.
|
|
36
|
-
"@tamagui/logo": "^1.0.
|
|
37
|
-
"@tamagui/menu": "^1.0.
|
|
38
|
-
"@tamagui/popover": "^1.0.
|
|
39
|
-
"@tamagui/progress": "^1.0.
|
|
40
|
-
"@tamagui/select": "^1.0.
|
|
41
|
-
"@tamagui/sheet": "^1.0.
|
|
42
|
-
"@tamagui/slider": "^1.0.
|
|
43
|
-
"@tamagui/stacks": "^1.0.
|
|
44
|
-
"tamagui": "^1.0.
|
|
31
|
+
"@tamagui/avatar": "^1.0.4",
|
|
32
|
+
"@tamagui/button": "^1.0.4",
|
|
33
|
+
"@tamagui/config-base": "^1.0.4",
|
|
34
|
+
"@tamagui/core": "^1.0.4",
|
|
35
|
+
"@tamagui/list-item": "^1.0.4",
|
|
36
|
+
"@tamagui/logo": "^1.0.4",
|
|
37
|
+
"@tamagui/menu": "^1.0.4",
|
|
38
|
+
"@tamagui/popover": "^1.0.4",
|
|
39
|
+
"@tamagui/progress": "^1.0.4",
|
|
40
|
+
"@tamagui/select": "^1.0.4",
|
|
41
|
+
"@tamagui/sheet": "^1.0.4",
|
|
42
|
+
"@tamagui/slider": "^1.0.4",
|
|
43
|
+
"@tamagui/stacks": "^1.0.4",
|
|
44
|
+
"tamagui": "^1.0.4"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"react": "*",
|
|
48
48
|
"react-dom": "*"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@tamagui/build": "^1.0.
|
|
51
|
+
"@tamagui/build": "^1.0.4",
|
|
52
52
|
"react": "^18.2.0",
|
|
53
53
|
"react-dom": "^18.2.0"
|
|
54
54
|
},
|
package/src/SheetDemo.tsx
CHANGED
|
@@ -34,13 +34,18 @@ export const SheetDemo = () => {
|
|
|
34
34
|
<Sheet.Handle />
|
|
35
35
|
<Sheet.Frame f={1} p="$4" jc="center" ai="center" space="$5">
|
|
36
36
|
<Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
|
|
38
|
+
{modal && (
|
|
39
|
+
<>
|
|
40
|
+
<InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
|
|
41
|
+
<Button
|
|
42
|
+
size="$6"
|
|
43
|
+
circular
|
|
44
|
+
icon={ChevronUp}
|
|
45
|
+
onPress={() => setInnerOpen(true)}
|
|
46
|
+
></Button>
|
|
47
|
+
</>
|
|
48
|
+
)}
|
|
44
49
|
</Sheet.Frame>
|
|
45
50
|
</Sheet>
|
|
46
51
|
</>
|
package/src/SliderDemo.tsx
CHANGED