{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React from 'react';\nimport { Modal, Button, Input, FormControl } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-runtime\";\nexport function Example() {\n  var _React$useState = React.useState(false),\n      _React$useState2 = _slicedToArray(_React$useState, 2),\n      modalVisible = _React$useState2[0],\n      setModalVisible = _React$useState2[1];\n\n  var initialRef = React.useRef(null);\n  var finalRef = React.useRef(null);\n  return _jsxs(_Fragment, {\n    children: [_jsx(Modal, {\n      isOpen: modalVisible,\n      onClose: function onClose() {\n        return setModalVisible(false);\n      },\n      initialFocusRef: initialRef,\n      finalFocusRef: finalRef,\n      children: _jsxs(Modal.Content, {\n        children: [_jsx(Modal.CloseButton, {}), _jsx(Modal.Header, {\n          children: \"Contact Us\"\n        }), _jsxs(Modal.Body, {\n          children: [_jsxs(FormControl, {\n            children: [_jsx(FormControl.Label, {\n              children: \"Name\"\n            }), _jsx(Input, {\n              ref: initialRef\n            })]\n          }), _jsxs(FormControl, {\n            mt: \"3\",\n            children: [_jsx(FormControl.Label, {\n              children: \"Email\"\n            }), _jsx(Input, {})]\n          })]\n        }), _jsx(Modal.Footer, {\n          children: _jsxs(Button.Group, {\n            space: 2,\n            children: [_jsx(Button, {\n              variant: \"ghost\",\n              colorScheme: \"blueGray\",\n              onPress: function onPress() {\n                setModalVisible(false);\n              },\n              children: \"Cancel\"\n            }), _jsx(Button, {\n              onPress: function onPress() {\n                setModalVisible(false);\n              },\n              children: \"Save\"\n            })]\n          })\n        })]\n      })\n    }), _jsx(Button, {\n      onPress: function onPress() {\n        setModalVisible(!modalVisible);\n      },\n      children: \"Open Modal\"\n    }), _jsx(Input, {\n      w: {\n        base: '70%',\n        md: '25%'\n      },\n      mt: 4,\n      ref: finalRef,\n      placeholder: \"Enter the OTP\",\n      _light: {\n        placeholderTextColor: 'blueGray.700'\n      },\n      _dark: {\n        placeholderTextColor: 'blueGray.100'\n      }\n    })]\n  });\n}","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Modal/ModalRefEg.tsx"],"names":["React","Modal","Button","Input","FormControl","Example","useState","modalVisible","setModalVisible","initialRef","useRef","finalRef","base","md","placeholderTextColor"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,KAAT,EAAgBC,MAAhB,EAAwBC,KAAxB,EAA+BC,WAA/B;;;;AAEA,OAAO,SAASC,OAAT,GAAmB;AAAA,wBACgBL,KAAK,CAACM,QAAN,CAAe,KAAf,CADhB;AAAA;AAAA,MACjBC,YADiB;AAAA,MACHC,eADG;;AAExB,MAAMC,UAAU,GAAGT,KAAK,CAACU,MAAN,CAAa,IAAb,CAAnB;AACA,MAAMC,QAAQ,GAAGX,KAAK,CAACU,MAAN,CAAa,IAAb,CAAjB;AACA,SACE;AAAA,eACE,KAAC,KAAD;AACE,MAAA,MAAM,EAAEH,YADV;AAEE,MAAA,OAAO,EAAE;AAAA,eAAMC,eAAe,CAAC,KAAD,CAArB;AAAA,OAFX;AAGE,MAAA,eAAe,EAAEC,UAHnB;AAIE,MAAA,aAAa,EAAEE,QAJjB;AAAA,gBAME,MAAC,KAAD,CAAO,OAAP;AAAA,mBACE,KAAC,KAAD,CAAO,WAAP,KADF,EAEE,KAAC,KAAD,CAAO,MAAP;AAAA;AAAA,UAFF,EAGE,MAAC,KAAD,CAAO,IAAP;AAAA,qBACE,MAAC,WAAD;AAAA,uBACE,KAAC,WAAD,CAAa,KAAb;AAAA;AAAA,cADF,EAEE,KAAC,KAAD;AAAO,cAAA,GAAG,EAAEF;AAAZ,cAFF;AAAA,YADF,EAKE,MAAC,WAAD;AAAa,YAAA,EAAE,EAAC,GAAhB;AAAA,uBACE,KAAC,WAAD,CAAa,KAAb;AAAA;AAAA,cADF,EAEE,KAAC,KAAD,KAFF;AAAA,YALF;AAAA,UAHF,EAaE,KAAC,KAAD,CAAO,MAAP;AAAA,oBACE,MAAC,MAAD,CAAQ,KAAR;AAAc,YAAA,KAAK,EAAE,CAArB;AAAA,uBACE,KAAC,MAAD;AACE,cAAA,OAAO,EAAC,OADV;AAEE,cAAA,WAAW,EAAC,UAFd;AAGE,cAAA,OAAO,EAAE,mBAAM;AACbD,gBAAAA,eAAe,CAAC,KAAD,CAAf;AACD,eALH;AAAA;AAAA,cADF,EAUE,KAAC,MAAD;AACE,cAAA,OAAO,EAAE,mBAAM;AACbA,gBAAAA,eAAe,CAAC,KAAD,CAAf;AACD,eAHH;AAAA;AAAA,cAVF;AAAA;AADF,UAbF;AAAA;AANF,MADF,EA0CE,KAAC,MAAD;AACE,MAAA,OAAO,EAAE,mBAAM;AACbA,QAAAA,eAAe,CAAC,CAACD,YAAF,CAAf;AACD,OAHH;AAAA;AAAA,MA1CF,EAiDE,KAAC,KAAD;AACE,MAAA,CAAC,EAAE;AAAEK,QAAAA,IAAI,EAAE,KAAR;AAAeC,QAAAA,EAAE,EAAE;AAAnB,OADL;AAEE,MAAA,EAAE,EAAE,CAFN;AAGE,MAAA,GAAG,EAAEF,QAHP;AAIE,MAAA,WAAW,EAAC,eAJd;AAKE,MAAA,MAAM,EAAE;AAAEG,QAAAA,oBAAoB,EAAE;AAAxB,OALV;AAME,MAAA,KAAK,EAAE;AAAEA,QAAAA,oBAAoB,EAAE;AAAxB;AANT,MAjDF;AAAA,IADF;AA4DD","sourcesContent":["import React from 'react';\nimport { Modal, Button, Input, FormControl } from 'native-base';\n\nexport function Example() {\n  const [modalVisible, setModalVisible] = React.useState(false);\n  const initialRef = React.useRef(null);\n  const finalRef = React.useRef(null);\n  return (\n    <>\n      <Modal\n        isOpen={modalVisible}\n        onClose={() => setModalVisible(false)}\n        initialFocusRef={initialRef}\n        finalFocusRef={finalRef}\n      >\n        <Modal.Content>\n          <Modal.CloseButton />\n          <Modal.Header>Contact Us</Modal.Header>\n          <Modal.Body>\n            <FormControl>\n              <FormControl.Label>Name</FormControl.Label>\n              <Input ref={initialRef} />\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                  setModalVisible(false);\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onPress={() => {\n                  setModalVisible(false);\n                }}\n              >\n                Save\n              </Button>\n            </Button.Group>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n      <Button\n        onPress={() => {\n          setModalVisible(!modalVisible);\n        }}\n      >\n        Open Modal\n      </Button>\n      <Input\n        w={{ base: '70%', md: '25%' }}\n        mt={4}\n        ref={finalRef}\n        placeholder=\"Enter the OTP\"\n        _light={{ placeholderTextColor: 'blueGray.700' }}\n        _dark={{ placeholderTextColor: 'blueGray.100' }}\n      />\n    </>\n  );\n}\n"]},"metadata":{},"sourceType":"module"}