{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\n\nvar _this = this,\n    _jsxFileName = \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Modal/ModalPlacement.tsx\";\n\nimport React from 'react';\nimport { Button, Modal, Stack, FormControl, Input } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nimport { useState } from 'react';\nexport var Example = function Example() {\n  var _useState = useState(undefined),\n      _useState2 = _slicedToArray(_useState, 2),\n      placement = _useState2[0],\n      setPlacement = _useState2[1];\n\n  var _useState3 = useState(false),\n      _useState4 = _slicedToArray(_useState3, 2),\n      open = _useState4[0],\n      setOpen = _useState4[1];\n\n  var openModal = function openModal(placement) {\n    setOpen(true);\n    setPlacement(placement);\n  };\n\n  return React.createElement(React.Fragment, null, React.createElement(Stack, {\n    direction: {\n      base: 'column',\n      md: 'row'\n    },\n    space: 2\n  }, React.createElement(Button, {\n    onPress: function onPress() {\n      return openModal('top');\n    }\n  }, \"Top\"), React.createElement(Button, {\n    onPress: function onPress() {\n      return openModal('bottom');\n    }\n  }, \"Bottom\"), React.createElement(Button, {\n    onPress: function onPress() {\n      return openModal('center');\n    }\n  }, \"Center\"), React.createElement(Button, {\n    onPress: function onPress() {\n      return openModal('left');\n    }\n  }, \"Left\"), React.createElement(Button, {\n    onPress: function onPress() {\n      return openModal('right');\n    }\n  }, \"Right\")), React.createElement(Modal, {\n    isOpen: open,\n    onClose: function onClose() {\n      return setOpen(false);\n    },\n    mt: 12\n  }, React.createElement(Modal.Content, _extends({\n    maxWidth: \"350\"\n  }, styles[placement]), React.createElement(Modal.CloseButton, null), React.createElement(Modal.Header, null, \"Contact Us\"), React.createElement(Modal.Body, null, React.createElement(FormControl, null, React.createElement(FormControl.Label, null, \"Name\"), React.createElement(Input, null)), React.createElement(FormControl, {\n    mt: \"3\"\n  }, React.createElement(FormControl.Label, null, \"Email\"), React.createElement(Input, null))), React.createElement(Modal.Footer, null, React.createElement(Button.Group, {\n    space: 2\n  }, React.createElement(Button, {\n    variant: \"ghost\",\n    colorScheme: \"blueGray\",\n    onPress: function onPress() {\n      setOpen(false);\n    }\n  }, \"Cancel\"), React.createElement(Button, {\n    onPress: function onPress() {\n      setOpen(false);\n    }\n  }, \"Save\"))))));\n};\nvar styles = {\n  top: {\n    marginBottom: 'auto',\n    marginTop: 0\n  },\n  bottom: {\n    marginBottom: 0,\n    marginTop: 'auto'\n  },\n  left: {\n    marginLeft: 0,\n    marginRight: 'auto'\n  },\n  right: {\n    marginLeft: 'auto',\n    marginRight: 0\n  },\n  center: {}\n};","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Modal/ModalPlacement.tsx"],"names":["React","Button","Modal","Stack","FormControl","Input","useState","Example","undefined","placement","setPlacement","open","setOpen","openModal","base","md","styles","top","marginBottom","marginTop","bottom","left","marginLeft","marginRight","right","center"],"mappings":"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","sourcesContent":["//@ts-nocheck\nimport React from 'react';\nimport { Button, Modal, Stack, FormControl, Input } from 'native-base';\nimport { useState } from 'react';\n\nexport const Example = () => {\n  const [placement, setPlacement] = useState(undefined);\n  const [open, setOpen] = useState(false);\n  const openModal = (placement) => {\n    setOpen(true);\n    setPlacement(placement);\n  };\n\n  return (\n    <>\n      <Stack direction={{ base: 'column', md: 'row' }} space={2}>\n        <Button onPress={() => openModal('top')}>Top</Button>\n        <Button onPress={() => openModal('bottom')}>Bottom</Button>\n        <Button onPress={() => openModal('center')}>Center</Button>\n        <Button onPress={() => openModal('left')}>Left</Button>\n        <Button onPress={() => openModal('right')}>Right</Button>\n      </Stack>\n      <Modal isOpen={open} onClose={() => setOpen(false)} mt={12}>\n        <Modal.Content maxWidth=\"350\" {...styles[placement]}>\n          <Modal.CloseButton />\n          <Modal.Header>Contact Us</Modal.Header>\n          <Modal.Body>\n            <FormControl>\n              <FormControl.Label>Name</FormControl.Label>\n              <Input />\n            </FormControl>\n            <FormControl mt=\"3\">\n              <FormControl.Label>Email</FormControl.Label>\n              <Input />\n            </FormControl>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button.Group space={2}>\n              <Button\n                variant=\"ghost\"\n                colorScheme=\"blueGray\"\n                onPress={() => {\n                  setOpen(false);\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onPress={() => {\n                  setOpen(false);\n                }}\n              >\n                Save\n              </Button>\n            </Button.Group>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n    </>\n  );\n};\n\nconst styles = {\n  top: {\n    marginBottom: 'auto',\n    marginTop: 0,\n  },\n  bottom: {\n    marginBottom: 0,\n    marginTop: 'auto',\n  },\n  left: {\n    marginLeft: 0,\n    marginRight: 'auto',\n  },\n  right: {\n    marginLeft: 'auto',\n    marginRight: 0,\n  },\n  center: {},\n};\n"]},"metadata":{},"sourceType":"module"}