{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nvar _jsxFileName = \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Popover/PopoverPositions.tsx\";\nimport React, { useState } from 'react';\nimport { Popover, Button, VStack, Select, CheckIcon, Box } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nexport function Example() {\n  var _this = this;\n\n  var _useState = useState('auto'),\n      _useState2 = _slicedToArray(_useState, 2),\n      position = _useState2[0],\n      setPosition = _useState2[1];\n\n  var _useState3 = useState(false),\n      _useState4 = _slicedToArray(_useState3, 2),\n      isOpen = _useState4[0],\n      setIsOpen = _useState4[1];\n\n  return React.createElement(Box, {\n    h: \"60%\",\n    w: \"100%\",\n    alignItems: \"center\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 9,\n      columnNumber: 5\n    }\n  }, React.createElement(VStack, {\n    space: 6,\n    alignSelf: \"flex-start\",\n    w: \"100%\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 10,\n      columnNumber: 7\n    }\n  }, React.createElement(Popover, {\n    placement: position === 'auto' ? undefined : position,\n    trigger: function trigger(triggerProps) {\n      return React.createElement(Button, _extends({\n        colorScheme: \"danger\",\n        alignSelf: \"center\"\n      }, triggerProps, {\n        onPress: function onPress() {\n          return setIsOpen(true);\n        },\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 16,\n          columnNumber: 15\n        }\n      }), \"Delete Customer\");\n    },\n    isOpen: isOpen,\n    onClose: function onClose() {\n      return setIsOpen(!isOpen);\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 11,\n      columnNumber: 9\n    }\n  }, React.createElement(Popover.Content, {\n    w: \"56\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 29,\n      columnNumber: 11\n    }\n  }, React.createElement(Popover.Arrow, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 30,\n      columnNumber: 13\n    }\n  }), React.createElement(Popover.CloseButton, {\n    onPress: function onPress() {\n      return setIsOpen(false);\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 31,\n      columnNumber: 13\n    }\n  }), React.createElement(Popover.Header, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 32,\n      columnNumber: 13\n    }\n  }, \"Delete Customer\"), React.createElement(Popover.Body, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 33,\n      columnNumber: 13\n    }\n  }, \"This will remove all data relating to Alex. This action cannot be reversed. Deleted data can not be recovered.\"), React.createElement(Popover.Footer, {\n    justifyContent: \"flex-end\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 37,\n      columnNumber: 13\n    }\n  }, React.createElement(Button.Group, {\n    space: 2,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 38,\n      columnNumber: 15\n    }\n  }, React.createElement(Button, {\n    colorScheme: \"coolGray\",\n    variant: \"ghost\",\n    onPress: function onPress() {\n      return setIsOpen(false);\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 39,\n      columnNumber: 17\n    }\n  }, \"Cancel\"), React.createElement(Button, {\n    colorScheme: \"danger\",\n    onPress: function onPress() {\n      return setIsOpen(false);\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 46,\n      columnNumber: 17\n    }\n  }, \"Delete\"))))), React.createElement(Select, {\n    selectedValue: position,\n    mx: {\n      base: 0,\n      md: 'auto'\n    },\n    accessibilityLabel: \"Select a position for Popover\",\n    onValueChange: function onValueChange(nextValue) {\n      return setPosition(nextValue);\n    },\n    _selectedItem: {\n      bg: 'cyan.600',\n      endIcon: React.createElement(CheckIcon, {\n        size: 4,\n        __self: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 61,\n          columnNumber: 22\n        }\n      })\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 54,\n      columnNumber: 9\n    }\n  }, React.createElement(Select.Item, {\n    label: \"auto\",\n    value: \"auto\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 64,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Top Left\",\n    value: \"top left\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 65,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Top\",\n    value: \"top\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 66,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Top Right\",\n    value: \"top right\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 67,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Right Top\",\n    value: \"right top\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 68,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Right\",\n    value: \"right\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 69,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Right Bottom\",\n    value: \"right bottom\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 70,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Bottom Left\",\n    value: \"bottom left\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 71,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Bottom\",\n    value: \"bottom\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 72,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Bottom Right\",\n    value: \"bottom right\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 73,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Left Top\",\n    value: \"left top\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 74,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Left\",\n    value: \"left\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 75,\n      columnNumber: 11\n    }\n  }), React.createElement(Select.Item, {\n    label: \"Left Bottom\",\n    value: \"left bottom\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 76,\n      columnNumber: 11\n    }\n  }))));\n}","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Popover/PopoverPositions.tsx"],"names":["React","useState","Popover","Button","VStack","Select","CheckIcon","Box","Example","position","setPosition","isOpen","setIsOpen","undefined","triggerProps","base","md","nextValue","bg","endIcon"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,OAAT,EAAkBC,MAAlB,EAA0BC,MAA1B,EAAkCC,MAAlC,EAA0CC,SAA1C,EAAqDC,GAArD;AAEA,OAAO,SAASC,OAAT,GAAmB;AAAA;;AACxB,kBAAgCP,QAAQ,CAAC,MAAD,CAAxC;AAAA;AAAA,MAAOQ,QAAP;AAAA,MAAiBC,WAAjB;;AACA,mBAA4BT,QAAQ,CAAC,KAAD,CAApC;AAAA;AAAA,MAAOU,MAAP;AAAA,MAAeC,SAAf;;AAEA,SACE,oBAAC,GAAD;AAAK,IAAA,CAAC,EAAC,KAAP;AAAa,IAAA,CAAC,EAAC,MAAf;AAAsB,IAAA,UAAU,EAAC,QAAjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,oBAAC,MAAD;AAAQ,IAAA,KAAK,EAAE,CAAf;AAAkB,IAAA,SAAS,EAAC,YAA5B;AAAyC,IAAA,CAAC,EAAC,MAA3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,oBAAC,OAAD;AAEE,IAAA,SAAS,EAAEH,QAAQ,KAAK,MAAb,GAAsBI,SAAtB,GAAkCJ,QAF/C;AAGE,IAAA,OAAO,EAAE,iBAACK,YAAD,EAAkB;AACzB,aACE,oBAAC,MAAD;AACE,QAAA,WAAW,EAAC,QADd;AAEE,QAAA,SAAS,EAAC;AAFZ,SAGMA,YAHN;AAIE,QAAA,OAAO,EAAE;AAAA,iBAAMF,SAAS,CAAC,IAAD,CAAf;AAAA,SAJX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BADF;AAUD,KAdH;AAeE,IAAA,MAAM,EAAED,MAfV;AAgBE,IAAA,OAAO,EAAE;AAAA,aAAMC,SAAS,CAAC,CAACD,MAAF,CAAf;AAAA,KAhBX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAkBE,oBAAC,OAAD,CAAS,OAAT;AAAiB,IAAA,CAAC,EAAC,IAAnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,oBAAC,OAAD,CAAS,KAAT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEE,oBAAC,OAAD,CAAS,WAAT;AAAqB,IAAA,OAAO,EAAE;AAAA,aAAMC,SAAS,CAAC,KAAD,CAAf;AAAA,KAA9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFF,EAGE,oBAAC,OAAD,CAAS,MAAT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAHF,EAIE,oBAAC,OAAD,CAAS,IAAT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sHAJF,EAQE,oBAAC,OAAD,CAAS,MAAT;AAAgB,IAAA,cAAc,EAAC,UAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,oBAAC,MAAD,CAAQ,KAAR;AAAc,IAAA,KAAK,EAAE,CAArB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,oBAAC,MAAD;AACE,IAAA,WAAW,EAAC,UADd;AAEE,IAAA,OAAO,EAAC,OAFV;AAGE,IAAA,OAAO,EAAE;AAAA,aAAMA,SAAS,CAAC,KAAD,CAAf;AAAA,KAHX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cADF,EAQE,oBAAC,MAAD;AAAQ,IAAA,WAAW,EAAC,QAApB;AAA6B,IAAA,OAAO,EAAE;AAAA,aAAMA,SAAS,CAAC,KAAD,CAAf;AAAA,KAAtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cARF,CADF,CARF,CAlBF,CADF,EA4CE,oBAAC,MAAD;AACE,IAAA,aAAa,EAAEH,QADjB;AAEE,IAAA,EAAE,EAAE;AAAEM,MAAAA,IAAI,EAAE,CAAR;AAAWC,MAAAA,EAAE,EAAE;AAAf,KAFN;AAGE,IAAA,kBAAkB,EAAC,+BAHrB;AAIE,IAAA,aAAa,EAAE,uBAACC,SAAD;AAAA,aAAeP,WAAW,CAACO,SAAD,CAA1B;AAAA,KAJjB;AAKE,IAAA,aAAa,EAAE;AACbC,MAAAA,EAAE,EAAE,UADS;AAEbC,MAAAA,OAAO,EAAE,oBAAC,SAAD;AAAW,QAAA,IAAI,EAAE,CAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAFI,KALjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAUE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,MAAnB;AAA0B,IAAA,KAAK,EAAC,MAAhC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAVF,EAWE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,UAAnB;AAA8B,IAAA,KAAK,EAAC,UAApC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAXF,EAYE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,KAAnB;AAAyB,IAAA,KAAK,EAAC,KAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAZF,EAaE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,WAAnB;AAA+B,IAAA,KAAK,EAAC,WAArC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAbF,EAcE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,WAAnB;AAA+B,IAAA,KAAK,EAAC,WAArC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAdF,EAeE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,OAAnB;AAA2B,IAAA,KAAK,EAAC,OAAjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAfF,EAgBE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,cAAnB;AAAkC,IAAA,KAAK,EAAC,cAAxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAhBF,EAiBE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,aAAnB;AAAiC,IAAA,KAAK,EAAC,aAAvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAjBF,EAkBE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,QAAnB;AAA4B,IAAA,KAAK,EAAC,QAAlC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAlBF,EAmBE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,cAAnB;AAAkC,IAAA,KAAK,EAAC,cAAxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAnBF,EAoBE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,UAAnB;AAA8B,IAAA,KAAK,EAAC,UAApC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IApBF,EAqBE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,MAAnB;AAA0B,IAAA,KAAK,EAAC,MAAhC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IArBF,EAsBE,oBAAC,MAAD,CAAQ,IAAR;AAAa,IAAA,KAAK,EAAC,aAAnB;AAAiC,IAAA,KAAK,EAAC,aAAvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAtBF,CA5CF,CADF,CADF;AAyED","sourcesContent":["import React, { useState } from 'react';\nimport { Popover, Button, VStack, Select, CheckIcon, Box } from 'native-base';\n\nexport function Example() {\n  const [position, setPosition] = useState('auto');\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Box h=\"60%\" w=\"100%\" alignItems=\"center\">\n      <VStack space={6} alignSelf=\"flex-start\" w=\"100%\">\n        <Popover\n          // @ts-ignore\n          placement={position === 'auto' ? undefined : position}\n          trigger={(triggerProps) => {\n            return (\n              <Button\n                colorScheme=\"danger\"\n                alignSelf=\"center\"\n                {...triggerProps}\n                onPress={() => setIsOpen(true)}\n              >\n                Delete Customer\n              </Button>\n            );\n          }}\n          isOpen={isOpen}\n          onClose={() => setIsOpen(!isOpen)}\n        >\n          <Popover.Content w=\"56\">\n            <Popover.Arrow />\n            <Popover.CloseButton onPress={() => setIsOpen(false)} />\n            <Popover.Header>Delete Customer</Popover.Header>\n            <Popover.Body>\n              This will remove all data relating to Alex. This action cannot be\n              reversed. Deleted data can not be recovered.\n            </Popover.Body>\n            <Popover.Footer justifyContent=\"flex-end\">\n              <Button.Group space={2}>\n                <Button\n                  colorScheme=\"coolGray\"\n                  variant=\"ghost\"\n                  onPress={() => setIsOpen(false)}\n                >\n                  Cancel\n                </Button>\n                <Button colorScheme=\"danger\" onPress={() => setIsOpen(false)}>\n                  Delete\n                </Button>\n              </Button.Group>\n            </Popover.Footer>\n          </Popover.Content>\n        </Popover>\n\n        <Select\n          selectedValue={position}\n          mx={{ base: 0, md: 'auto' }}\n          accessibilityLabel=\"Select a position for Popover\"\n          onValueChange={(nextValue) => setPosition(nextValue)}\n          _selectedItem={{\n            bg: 'cyan.600',\n            endIcon: <CheckIcon size={4} />,\n          }}\n        >\n          <Select.Item label=\"auto\" value=\"auto\" />\n          <Select.Item label=\"Top Left\" value=\"top left\" />\n          <Select.Item label=\"Top\" value=\"top\" />\n          <Select.Item label=\"Top Right\" value=\"top right\" />\n          <Select.Item label=\"Right Top\" value=\"right top\" />\n          <Select.Item label=\"Right\" value=\"right\" />\n          <Select.Item label=\"Right Bottom\" value=\"right bottom\" />\n          <Select.Item label=\"Bottom Left\" value=\"bottom left\" />\n          <Select.Item label=\"Bottom\" value=\"bottom\" />\n          <Select.Item label=\"Bottom Right\" value=\"bottom right\" />\n          <Select.Item label=\"Left Top\" value=\"left top\" />\n          <Select.Item label=\"Left\" value=\"left\" />\n          <Select.Item label=\"Left Bottom\" value=\"left bottom\" />\n        </Select>\n      </VStack>\n    </Box>\n  );\n}\n"]},"metadata":{},"sourceType":"module"}