react-controlled-dialog
Version:
A declarative interface for the native dialog element
1 lines • 17.9 kB
JSON
{"id":"fancyModal.js","dependencies":[{"name":"/Users/kylepeacock/code/react-controlled-dialog/.babelrc","includedInParent":true,"mtime":1543269169411},{"name":"/Users/kylepeacock/code/react-controlled-dialog/package.json","includedInParent":true,"mtime":1543272905037},{"name":"react","loc":{"line":1,"column":32},"parent":"/Users/kylepeacock/code/react-controlled-dialog/examples/fancyModal.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/react/index.js"},{"name":"../lib/ReactControlledDialog","loc":{"line":2,"column":19},"parent":"/Users/kylepeacock/code/react-controlled-dialog/examples/fancyModal.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/lib/ReactControlledDialog.js"},{"name":"styled-components","loc":{"line":3,"column":19},"parent":"/Users/kylepeacock/code/react-controlled-dialog/examples/fancyModal.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js"},{"name":"./close.svg","loc":{"line":4,"column":18},"parent":"/Users/kylepeacock/code/react-controlled-dialog/examples/fancyModal.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/examples/close.svg"}],"generated":{"js":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _react = _interopRequireWildcard(require(\"react\"));\n\nvar _ReactControlledDialog = _interopRequireDefault(require(\"../lib/ReactControlledDialog\"));\n\nvar _styledComponents = _interopRequireDefault(require(\"styled-components\"));\n\nvar _close = _interopRequireDefault(require(\"./close.svg\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"\\n height: 50vh;\\n width: 60vw;\\n padding: 1em;\\n border-radius: 10px;\\n border-color: #acacac;\\n &::backdrop,\\n &.backdrop {\\n background-color: rgba(0, 0, 0, 0.65);\\n }\\n button[aria-label=\\\"Close\\\"] {\\n position: absolute;\\n top: 1em;\\n right: 1em;\\n height: 1.5em;\\n width: 1.5em;\\n background-image: url(\", \");\\n background-repeat: no-repeat;\\n background-position: center;\\n border: none;\\n }\\n\"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nvar StyledModal = _styledComponents.default.dialog(_templateObject(), _close.default);\n\nvar CloseButton = function CloseButton(_ref) {\n var onClick = _ref.onClick;\n return _react.default.createElement(\"button\", {\n onClick: onClick,\n \"aria-label\": \"Close\"\n });\n};\n\nvar FancyModal = function FancyModal() {\n var _useState = (0, _react.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n isOpen = _useState2[0],\n setOpen = _useState2[1];\n\n return _react.default.createElement(\"div\", {\n id: \"fancy\"\n }, _react.default.createElement(\"h2\", null, \"Fancy Modal Example\"), _react.default.createElement(\"button\", {\n onClick: function onClick() {\n return setOpen(true);\n }\n }, \"Fancy Modal\"), _react.default.createElement(_ReactControlledDialog.default, {\n isOpen: isOpen,\n setOpen: setOpen,\n type: \"modal\",\n closeOnBackdropClick: true,\n DialogComponent: StyledModal,\n CloseButton: CloseButton\n }, \"foobar\"));\n};\n\nvar _default = FancyModal;\nexports.default = _default;","map":{"mappings":[{"generated":{"line":8,"column":0},"source":"fancyModal.js","original":{"line":1,"column":0}},{"generated":{"line":10,"column":0},"source":"fancyModal.js","original":{"line":2,"column":0}},{"generated":{"line":12,"column":0},"source":"fancyModal.js","original":{"line":3,"column":0}},{"generated":{"line":14,"column":0},"source":"fancyModal.js","original":{"line":4,"column":0}},{"generated":{"line":40,"column":0},"source":"fancyModal.js","original":{"line":6,"column":0}},{"name":"StyledModal","generated":{"line":40,"column":4},"source":"fancyModal.js","original":{"line":6,"column":6}},{"generated":{"line":40,"column":15},"source":"fancyModal.js","original":{"line":6,"column":17}},{"name":"styled","generated":{"line":40,"column":18},"source":"fancyModal.js","original":{"line":6,"column":20}},{"name":"dialog","generated":{"line":40,"column":44},"source":"fancyModal.js","original":{"line":6,"column":27}},{"generated":{"line":40,"column":50},"source":"fancyModal.js","original":{"line":6,"column":17}},{"name":"close","generated":{"line":40,"column":70},"source":"fancyModal.js","original":{"line":22,"column":28}},{"generated":{"line":40,"column":84},"source":"fancyModal.js","original":{"line":6,"column":17}},{"generated":{"line":40,"column":85},"source":"fancyModal.js","original":{"line":6,"column":0}},{"generated":{"line":42,"column":0},"source":"fancyModal.js","original":{"line":29,"column":0}},{"name":"CloseButton","generated":{"line":42,"column":4},"source":"fancyModal.js","original":{"line":29,"column":4}},{"generated":{"line":42,"column":15},"source":"fancyModal.js","original":{"line":29,"column":15}},{"generated":{"line":42,"column":18},"source":"fancyModal.js","original":{"line":29,"column":18}},{"name":"CloseButton","generated":{"line":42,"column":27},"source":"fancyModal.js","original":{"line":29,"column":4}},{"generated":{"line":42,"column":38},"source":"fancyModal.js","original":{"line":29,"column":18}},{"generated":{"line":43,"column":0},"source":"fancyModal.js","original":{"line":29,"column":18}},{"name":"onClick","generated":{"line":43,"column":6},"source":"fancyModal.js","original":{"line":29,"column":21}},{"generated":{"line":43,"column":13},"source":"fancyModal.js","original":{"line":29,"column":18}},{"name":"onClick","generated":{"line":43,"column":21},"source":"fancyModal.js","original":{"line":29,"column":21}},{"generated":{"line":43,"column":28},"source":"fancyModal.js","original":{"line":29,"column":18}},{"generated":{"line":44,"column":0},"source":"fancyModal.js","original":{"line":29,"column":18}},{"generated":{"line":44,"column":9},"source":"fancyModal.js","original":{"line":30,"column":2}},{"generated":{"line":45,"column":0},"source":"fancyModal.js","original":{"line":30,"column":10}},{"generated":{"line":45,"column":4},"source":"fancyModal.js","original":{"line":30,"column":10}},{"generated":{"line":45,"column":11},"source":"fancyModal.js","original":{"line":30,"column":17}},{"name":"onClick","generated":{"line":45,"column":13},"source":"fancyModal.js","original":{"line":30,"column":19}},{"generated":{"line":45,"column":20},"source":"fancyModal.js","original":{"line":30,"column":2}},{"generated":{"line":46,"column":0},"source":"fancyModal.js","original":{"line":30,"column":28}},{"generated":{"line":46,"column":18},"source":"fancyModal.js","original":{"line":30,"column":39}},{"generated":{"line":47,"column":0},"source":"fancyModal.js","original":{"line":30,"column":2}},{"generated":{"line":47,"column":4},"source":"fancyModal.js","original":{"line":29,"column":18}},{"generated":{"line":48,"column":0},"source":"fancyModal.js","original":{"line":29,"column":18}},{"generated":{"line":48,"column":1},"source":"fancyModal.js","original":{"line":29,"column":0}},{"generated":{"line":50,"column":0},"source":"fancyModal.js","original":{"line":32,"column":0}},{"name":"FancyModal","generated":{"line":50,"column":4},"source":"fancyModal.js","original":{"line":32,"column":6}},{"generated":{"line":50,"column":14},"source":"fancyModal.js","original":{"line":32,"column":16}},{"generated":{"line":50,"column":17},"source":"fancyModal.js","original":{"line":32,"column":19}},{"name":"FancyModal","generated":{"line":50,"column":26},"source":"fancyModal.js","original":{"line":32,"column":6}},{"generated":{"line":50,"column":36},"source":"fancyModal.js","original":{"line":32,"column":19}},{"generated":{"line":50,"column":39},"source":"fancyModal.js","original":{"line":32,"column":25}},{"generated":{"line":51,"column":0},"source":"fancyModal.js","original":{"line":32,"column":25}},{"generated":{"line":51,"column":18},"source":"fancyModal.js","original":{"line":33,"column":28}},{"generated":{"line":51,"column":39},"source":"fancyModal.js","original":{"line":33,"column":37}},{"generated":{"line":51,"column":44},"source":"fancyModal.js","original":{"line":33,"column":28}},{"generated":{"line":51,"column":45},"source":"fancyModal.js","original":{"line":32,"column":25}},{"generated":{"line":52,"column":0},"source":"fancyModal.js","original":{"line":32,"column":25}},{"generated":{"line":53,"column":0},"source":"fancyModal.js","original":{"line":32,"column":25}},{"name":"isOpen","generated":{"line":53,"column":6},"source":"fancyModal.js","original":{"line":33,"column":9}},{"generated":{"line":53,"column":12},"source":"fancyModal.js","original":{"line":32,"column":25}},{"generated":{"line":54,"column":0},"source":"fancyModal.js","original":{"line":32,"column":25}},{"name":"setOpen","generated":{"line":54,"column":6},"source":"fancyModal.js","original":{"line":33,"column":17}},{"generated":{"line":54,"column":13},"source":"fancyModal.js","original":{"line":32,"column":25}},{"generated":{"line":56,"column":0},"source":"fancyModal.js","original":{"line":34,"column":2}},{"generated":{"line":56,"column":9},"source":"fancyModal.js","original":{"line":35,"column":4}},{"generated":{"line":57,"column":0},"source":"fancyModal.js","original":{"line":35,"column":9}},{"generated":{"line":57,"column":4},"source":"fancyModal.js","original":{"line":35,"column":9}},{"generated":{"line":57,"column":6},"source":"fancyModal.js","original":{"line":35,"column":11}},{"generated":{"line":57,"column":8},"source":"fancyModal.js","original":{"line":35,"column":12}},{"generated":{"line":58,"column":0},"source":"fancyModal.js","original":{"line":35,"column":4}},{"generated":{"line":58,"column":5},"source":"fancyModal.js","original":{"line":36,"column":6}},{"generated":{"line":58,"column":68},"source":"fancyModal.js","original":{"line":35,"column":4}},{"generated":{"line":58,"column":70},"source":"fancyModal.js","original":{"line":37,"column":6}},{"generated":{"line":59,"column":0},"source":"fancyModal.js","original":{"line":37,"column":14}},{"generated":{"line":59,"column":4},"source":"fancyModal.js","original":{"line":37,"column":14}},{"generated":{"line":59,"column":11},"source":"fancyModal.js","original":{"line":37,"column":21}},{"generated":{"line":59,"column":13},"source":"fancyModal.js","original":{"line":37,"column":23}},{"generated":{"line":60,"column":0},"source":"fancyModal.js","original":{"line":37,"column":23}},{"name":"setOpen","generated":{"line":60,"column":13},"source":"fancyModal.js","original":{"line":37,"column":29}},{"generated":{"line":60,"column":20},"source":"fancyModal.js","original":{"line":37,"column":36}},{"generated":{"line":60,"column":21},"source":"fancyModal.js","original":{"line":37,"column":37}},{"generated":{"line":60,"column":25},"source":"fancyModal.js","original":{"line":37,"column":36}},{"generated":{"line":60,"column":26},"source":"fancyModal.js","original":{"line":37,"column":23}},{"generated":{"line":61,"column":0},"source":"fancyModal.js","original":{"line":37,"column":23}},{"generated":{"line":62,"column":0},"source":"fancyModal.js","original":{"line":37,"column":6}},{"generated":{"line":62,"column":19},"source":"fancyModal.js","original":{"line":35,"column":4}},{"generated":{"line":62,"column":21},"source":"fancyModal.js","original":{"line":38,"column":6}},{"generated":{"line":62,"column":50},"source":"fancyModal.js","original":{"line":38,"column":7}},{"generated":{"line":62,"column":80},"source":"fancyModal.js","original":{"line":38,"column":6}},{"generated":{"line":63,"column":0},"source":"fancyModal.js","original":{"line":39,"column":8}},{"generated":{"line":63,"column":4},"source":"fancyModal.js","original":{"line":39,"column":8}},{"generated":{"line":63,"column":10},"source":"fancyModal.js","original":{"line":39,"column":14}},{"name":"isOpen","generated":{"line":63,"column":12},"source":"fancyModal.js","original":{"line":39,"column":16}},{"generated":{"line":63,"column":18},"source":"fancyModal.js","original":{"line":38,"column":6}},{"generated":{"line":64,"column":0},"source":"fancyModal.js","original":{"line":40,"column":8}},{"generated":{"line":64,"column":4},"source":"fancyModal.js","original":{"line":40,"column":8}},{"generated":{"line":64,"column":11},"source":"fancyModal.js","original":{"line":40,"column":15}},{"name":"setOpen","generated":{"line":64,"column":13},"source":"fancyModal.js","original":{"line":40,"column":17}},{"generated":{"line":64,"column":20},"source":"fancyModal.js","original":{"line":38,"column":6}},{"generated":{"line":65,"column":0},"source":"fancyModal.js","original":{"line":41,"column":8}},{"generated":{"line":65,"column":4},"source":"fancyModal.js","original":{"line":41,"column":8}},{"generated":{"line":65,"column":8},"source":"fancyModal.js","original":{"line":41,"column":12}},{"generated":{"line":65,"column":10},"source":"fancyModal.js","original":{"line":41,"column":13}},{"generated":{"line":65,"column":17},"source":"fancyModal.js","original":{"line":38,"column":6}},{"generated":{"line":66,"column":0},"source":"fancyModal.js","original":{"line":42,"column":8}},{"generated":{"line":66,"column":4},"source":"fancyModal.js","original":{"line":42,"column":8}},{"generated":{"line":66,"column":24},"source":"fancyModal.js","original":{"line":42,"column":28}},{"generated":{"line":66,"column":30},"source":"fancyModal.js","original":{"line":38,"column":6}},{"generated":{"line":67,"column":0},"source":"fancyModal.js","original":{"line":43,"column":8}},{"generated":{"line":67,"column":4},"source":"fancyModal.js","original":{"line":43,"column":8}},{"generated":{"line":67,"column":19},"source":"fancyModal.js","original":{"line":43,"column":23}},{"name":"StyledModal","generated":{"line":67,"column":21},"source":"fancyModal.js","original":{"line":43,"column":25}},{"generated":{"line":67,"column":32},"source":"fancyModal.js","original":{"line":38,"column":6}},{"generated":{"line":68,"column":0},"source":"fancyModal.js","original":{"line":44,"column":8}},{"generated":{"line":68,"column":4},"source":"fancyModal.js","original":{"line":44,"column":8}},{"generated":{"line":68,"column":15},"source":"fancyModal.js","original":{"line":44,"column":19}},{"name":"CloseButton","generated":{"line":68,"column":17},"source":"fancyModal.js","original":{"line":44,"column":21}},{"generated":{"line":69,"column":0},"source":"fancyModal.js","original":{"line":38,"column":6}},{"generated":{"line":69,"column":14},"source":"fancyModal.js","original":{"line":35,"column":4}},{"generated":{"line":69,"column":15},"source":"fancyModal.js","original":{"line":34,"column":2}},{"generated":{"line":70,"column":0},"source":"fancyModal.js","original":{"line":50,"column":1}},{"generated":{"line":70,"column":1},"source":"fancyModal.js","original":{"line":32,"column":0}},{"name":"FancyModal","generated":{"line":72,"column":15},"source":"fancyModal.js","original":{"line":52,"column":15}}],"sources":{"fancyModal.js":"import React, { useState } from \"react\";\nimport Dialog from \"../lib/ReactControlledDialog\";\nimport styled from \"styled-components\";\nimport close from \"./close.svg\";\n\nconst StyledModal = styled.dialog`\n height: 50vh;\n width: 60vw;\n padding: 1em;\n border-radius: 10px;\n border-color: #acacac;\n &::backdrop,\n &.backdrop {\n background-color: rgba(0, 0, 0, 0.65);\n }\n button[aria-label=\"Close\"] {\n position: absolute;\n top: 1em;\n right: 1em;\n height: 1.5em;\n width: 1.5em;\n background-image: url(${close});\n background-repeat: no-repeat;\n background-position: center;\n border: none;\n }\n`;\n\nlet CloseButton = ({ onClick }) => (\n <button onClick={onClick} aria-label=\"Close\" />\n);\nconst FancyModal = () => {\n const [isOpen, setOpen] = useState(false);\n return (\n <div id=\"fancy\">\n <h2>Fancy Modal Example</h2>\n <button onClick={() => setOpen(true)}>Fancy Modal</button>\n <Dialog\n isOpen={isOpen}\n setOpen={setOpen}\n type=\"modal\"\n closeOnBackdropClick\n DialogComponent={StyledModal}\n CloseButton={CloseButton}\n >\n foobar\n </Dialog>\n </div>\n );\n};\n\nexport default FancyModal;\n"},"lineCount":null}},"hash":"155c439468dfeb6c652ea9ee59182db2","cacheData":{"env":{}}}