{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\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 _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    w: \"100%\",\n    alignItems: \"center\"\n  }, React.createElement(VStack, {\n    space: 6,\n    alignSelf: \"flex-start\",\n    w: \"100%\"\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      }), \"Delete Customer\");\n    },\n    isOpen: isOpen,\n    onClose: function onClose() {\n      return setIsOpen(!isOpen);\n    }\n  }, React.createElement(Popover.Content, {\n    w: \"56\"\n  }, React.createElement(Popover.Arrow, null), React.createElement(Popover.CloseButton, {\n    onPress: function onPress() {\n      return setIsOpen(false);\n    }\n  }), React.createElement(Popover.Header, null, \"Delete Customer\"), React.createElement(Popover.Body, null, \"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  }, React.createElement(Button.Group, {\n    space: 2\n  }, React.createElement(Button, {\n    colorScheme: \"coolGray\",\n    variant: \"ghost\",\n    onPress: function onPress() {\n      return setIsOpen(false);\n    }\n  }, \"Cancel\"), React.createElement(Button, {\n    colorScheme: \"danger\",\n    onPress: function onPress() {\n      return setIsOpen(false);\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      })\n    }\n  }, React.createElement(Select.Item, {\n    label: \"auto\",\n    value: \"auto\"\n  }), React.createElement(Select.Item, {\n    label: \"Top Left\",\n    value: \"top left\"\n  }), React.createElement(Select.Item, {\n    label: \"Top\",\n    value: \"top\"\n  }), React.createElement(Select.Item, {\n    label: \"Top Right\",\n    value: \"top right\"\n  }), React.createElement(Select.Item, {\n    label: \"Right Top\",\n    value: \"right top\"\n  }), React.createElement(Select.Item, {\n    label: \"Right\",\n    value: \"right\"\n  }), React.createElement(Select.Item, {\n    label: \"Right Bottom\",\n    value: \"right bottom\"\n  }), React.createElement(Select.Item, {\n    label: \"Bottom Left\",\n    value: \"bottom left\"\n  }), React.createElement(Select.Item, {\n    label: \"Bottom\",\n    value: \"bottom\"\n  }), React.createElement(Select.Item, {\n    label: \"Bottom Right\",\n    value: \"bottom right\"\n  }), React.createElement(Select.Item, {\n    label: \"Left Top\",\n    value: \"left top\"\n  }), React.createElement(Select.Item, {\n    label: \"Left\",\n    value: \"left\"\n  }), React.createElement(Select.Item, {\n    label: \"Left Bottom\",\n    value: \"left bottom\"\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":"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","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 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"}