{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nvar _jsxFileName = \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Modal/ModalRefEg.tsx\";\nimport React from 'react';\nimport { Modal, Button, Input, FormControl, HStack } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\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 React.createElement(React.Fragment, null, React.createElement(Modal, {\n    isOpen: modalVisible,\n    onClose: function onClose() {\n      return setModalVisible(false);\n    },\n    initialFocusRef: initialRef,\n    finalFocusRef: finalRef\n  }, React.createElement(Modal.Content, null, 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, {\n    ref: initialRef\n  })), 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      setModalVisible(false);\n    }\n  }, \"Cancel\"), React.createElement(Button, {\n    onPress: function onPress() {\n      setModalVisible(false);\n    }\n  }, \"Save\"))))), React.createElement(HStack, {\n    space: \"4\",\n    justifyContent: \"center\",\n    alignItems: \"center\"\n  }, React.createElement(Button, {\n    onPress: function onPress() {\n      setModalVisible(!modalVisible);\n    }\n  }, \"Open Modal\"), React.createElement(Input, {\n    w: \"32\",\n    ref: finalRef,\n    placeholder: \"Enter the OTP\",\n    _light: {\n      placeholderTextColor: 'blueGray.700'\n    },\n    _dark: {\n      placeholderTextColor: 'blueGray.100'\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","HStack","Example","useState","modalVisible","setModalVisible","initialRef","useRef","finalRef","placeholderTextColor"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,KAAT,EAAgBC,MAAhB,EAAwBC,KAAxB,EAA+BC,WAA/B,EAA4CC,MAA5C;AAEA,OAAO,SAASC,OAAT,GAAmB;AAAA,wBACgBN,KAAK,CAACO,QAAN,CAAe,KAAf,CADhB;AAAA;AAAA,MACjBC,YADiB;AAAA,MACHC,eADG;;AAExB,MAAMC,UAAU,GAAGV,KAAK,CAACW,MAAN,CAAa,IAAb,CAAnB;AACA,MAAMC,QAAQ,GAAGZ,KAAK,CAACW,MAAN,CAAa,IAAb,CAAjB;AACA,SACE,0CACE,oBAAC,KAAD;AACE,IAAA,MAAM,EAAEH,YADV;AAEE,IAAA,OAAO,EAAE;AAAA,aAAMC,eAAe,CAAC,KAAD,CAArB;AAAA,KAFX;AAGE,IAAA,eAAe,EAAEC,UAHnB;AAIE,IAAA,aAAa,EAAEE;AAJjB,KAME,oBAAC,KAAD,CAAO,OAAP,QACE,oBAAC,KAAD,CAAO,WAAP,OADF,EAEE,oBAAC,KAAD,CAAO,MAAP,qBAFF,EAGE,oBAAC,KAAD,CAAO,IAAP,QACE,oBAAC,WAAD,QACE,oBAAC,WAAD,CAAa,KAAb,eADF,EAEE,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAEF;AAAZ,IAFF,CADF,EAKE,oBAAC,WAAD;AAAa,IAAA,EAAE,EAAC;AAAhB,KACE,oBAAC,WAAD,CAAa,KAAb,gBADF,EAEE,oBAAC,KAAD,OAFF,CALF,CAHF,EAaE,oBAAC,KAAD,CAAO,MAAP,QACE,oBAAC,MAAD,CAAQ,KAAR;AAAc,IAAA,KAAK,EAAE;AAArB,KACE,oBAAC,MAAD;AACE,IAAA,OAAO,EAAC,OADV;AAEE,IAAA,WAAW,EAAC,UAFd;AAGE,IAAA,OAAO,EAAE,mBAAM;AACbD,MAAAA,eAAe,CAAC,KAAD,CAAf;AACD;AALH,cADF,EAUE,oBAAC,MAAD;AACE,IAAA,OAAO,EAAE,mBAAM;AACbA,MAAAA,eAAe,CAAC,KAAD,CAAf;AACD;AAHH,YAVF,CADF,CAbF,CANF,CADF,EA0CE,oBAAC,MAAD;AAAQ,IAAA,KAAK,EAAC,GAAd;AAAkB,IAAA,cAAc,EAAC,QAAjC;AAA0C,IAAA,UAAU,EAAC;AAArD,KACE,oBAAC,MAAD;AACE,IAAA,OAAO,EAAE,mBAAM;AACbA,MAAAA,eAAe,CAAC,CAACD,YAAF,CAAf;AACD;AAHH,kBADF,EAQE,oBAAC,KAAD;AACE,IAAA,CAAC,EAAC,IADJ;AAEE,IAAA,GAAG,EAAEI,QAFP;AAGE,IAAA,WAAW,EAAC,eAHd;AAIE,IAAA,MAAM,EAAE;AAAEC,MAAAA,oBAAoB,EAAE;AAAxB,KAJV;AAKE,IAAA,KAAK,EAAE;AAAEA,MAAAA,oBAAoB,EAAE;AAAxB;AALT,IARF,CA1CF,CADF;AA6DD","sourcesContent":["import React from 'react';\nimport { Modal, Button, Input, FormControl, HStack } 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      <HStack space=\"4\" justifyContent=\"center\" alignItems=\"center\">\n        <Button\n          onPress={() => {\n            setModalVisible(!modalVisible);\n          }}\n        >\n          Open Modal\n        </Button>\n        <Input\n          w=\"32\"\n          ref={finalRef}\n          placeholder=\"Enter the OTP\"\n          _light={{ placeholderTextColor: 'blueGray.700' }}\n          _dark={{ placeholderTextColor: 'blueGray.100' }}\n        />\n      </HStack>\n    </>\n  );\n}\n"]},"metadata":{},"sourceType":"module"}