"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = require("@storybook/react");

var _react2 = _interopRequireWildcard(require("react"));

var _reactLoremComponent = _interopRequireDefault(require("react-lorem-component"));

var _ = require(".");

var _Box = require("../Box");

var _Button = require("../Button");

var _ButtonGroup = require("../ButtonGroup");

var _FormControl = require("../FormControl");

var _FormLabel = require("../FormLabel");

var _useDisclosure2 = require("../hooks/useDisclosure");

var _Input = require("../Input");

var _Transition = require("../Transition");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Modal', module);
stories.addDecorator(function (story) {
  return __jsx(_Box.Box, {
    maxWidth: "lg",
    mx: "auto",
    mt: 6,
    p: 6
  }, story());
});
stories.add('Default', function () {
  var SampleModal = function SampleModal() {
    var _useState = (0, _react2.useState)(false),
        isOpen = _useState[0],
        setIsOpen = _useState[1];

    var close = function close() {
      return setIsOpen(false);
    };

    var firstField = (0, _react2.useRef)();
    return __jsx(_react2["default"].Fragment, null, __jsx(_.Modal, {
      initialFocusRef: firstField,
      isOpen: isOpen,
      onClose: close
    }, __jsx(_.ModalOverlay, null), __jsx(_.ModalContent, null, __jsx(_.ModalHeader, null, "Create your account"), __jsx(_.ModalCloseButton, {
      onClick: close,
      position: "absolute",
      top: "8px",
      right: "12px"
    }), __jsx(_.ModalBody, {
      pb: 6
    }, __jsx(_FormControl.FormControl, {
      mb: "spacing"
    }, __jsx(_FormLabel.FormLabel, null, "First name"), __jsx(_Input.Input, {
      ref: firstField,
      placeholder: "Type here..."
    }))), __jsx(_.ModalFooter, null, __jsx(_ButtonGroup.ButtonGroup, null, __jsx(_Button.Button, {
      variant: "tertiary",
      onClick: close
    }, "Cancel"), __jsx(_Button.Button, {
      onClick: close
    }, "Save"))))), __jsx(_Button.Button, {
      onClick: function onClick() {
        return setIsOpen(true);
      }
    }, "Open Modal"));
  };

  return __jsx(SampleModal, null);
});
stories.add('with slide transition', function () {
  var SampleModal = function SampleModal() {
    var _useState2 = (0, _react2.useState)(false),
        isOpen = _useState2[0],
        setIsOpen = _useState2[1];

    var btnRef = (0, _react2.useRef)();
    return __jsx(_react2["default"].Fragment, null, __jsx(_Button.Button, {
      ref: btnRef,
      onClick: function onClick() {
        return setIsOpen(true);
      }
    }, "Trigger modal"), __jsx(_Transition.SlideIn, {
      offset: "10px",
      "in": isOpen
    }, function (styles) {
      return __jsx(_.Modal, {
        isOpen: true,
        onClose: function onClose() {
          return setIsOpen(false);
        },
        finalFocusRef: btnRef
      }, __jsx(_.ModalOverlay, {
        opacity: styles.opacity
      }), __jsx(_.ModalContent, (0, _extends2["default"])({}, styles, {
        pb: 5
      }), __jsx(_.ModalHeader, null, "Login now"), __jsx(_.ModalCloseButton, null), __jsx(_.ModalBody, null, __jsx(_reactLoremComponent["default"], {
        count: 2
      }))));
    }));
  };

  return __jsx(SampleModal, null);
});
stories.add('with preserve scrollbar', function () {
  var SampleModal = function SampleModal() {
    var _useState3 = (0, _react2.useState)(false),
        isOpen = _useState3[0],
        setIsOpen = _useState3[1];

    var btnRef = (0, _react2.useRef)();
    return __jsx(_react2["default"].Fragment, null, __jsx(_Button.Button, {
      ref: btnRef,
      onClick: function onClick() {
        return setIsOpen(true);
      }
    }, "Trigger modal"), __jsx(_reactLoremComponent["default"], {
      count: 5
    }), __jsx(_Transition.SlideIn, {
      offset: "10px",
      "in": isOpen
    }, function (styles) {
      return __jsx(_.Modal, {
        isOpen: true,
        onClose: function onClose() {
          return setIsOpen(false);
        },
        finalFocusRef: btnRef,
        preserveScrollBarGap: true
      }, __jsx(_.ModalOverlay, {
        opacity: styles.opacity
      }), __jsx(_.ModalContent, (0, _extends2["default"])({}, styles, {
        pb: 5
      }), __jsx(_.ModalHeader, null, "Login now"), __jsx(_.ModalCloseButton, null), __jsx(_.ModalBody, null, __jsx(_reactLoremComponent["default"], {
        count: 2
      }))));
    }));
  };

  return __jsx(SampleModal, null);
});
stories.add('with scale transition', function () {
  var SampleModal = function SampleModal() {
    var _useState4 = (0, _react2.useState)(false),
        isOpen = _useState4[0],
        setIsOpen = _useState4[1];

    var btnRef = (0, _react2.useRef)();
    return __jsx(_react2["default"].Fragment, null, __jsx(_Button.Button, {
      ref: btnRef,
      onClick: function onClick() {
        return setIsOpen(true);
      }
    }, "Trigger modal"), __jsx(_Transition.Scale, {
      "in": isOpen
    }, function (styles) {
      return __jsx(_.Modal, {
        isOpen: true,
        onClose: function onClose() {
          return setIsOpen(false);
        },
        finalFocusRef: btnRef
      }, __jsx(_.ModalOverlay, {
        opacity: styles.opacity
      }), __jsx(_.ModalContent, (0, _extends2["default"])({}, styles, {
        pb: 5
      }), __jsx(_.ModalHeader, null, "Login now"), __jsx(_.ModalCloseButton, null), __jsx(_.ModalBody, null, __jsx(_reactLoremComponent["default"], {
        count: 2
      }))));
    }));
  };

  return __jsx(SampleModal, null);
});
stories.add('Basic usage', function () {
  var SampleModal = function SampleModal() {
    var _useState5 = (0, _react2.useState)(false),
        isOpen = _useState5[0],
        setIsOpen = _useState5[1];

    return __jsx(_react2["default"].Fragment, null, __jsx(_Button.Button, {
      onClick: function onClick() {
        return setIsOpen(true);
      }
    }, "Trigger modal"), __jsx(_.Modal, {
      onClose: function onClose() {
        return setIsOpen(false);
      },
      isOpen: isOpen
    }, __jsx(_.ModalOverlay, null), __jsx(_.ModalContent, {
      pb: 5
    }, __jsx(_.ModalHeader, null, "Login now"), __jsx(_.ModalCloseButton, null), __jsx(_.ModalBody, null, __jsx(_reactLoremComponent["default"], {
      count: 2
    })))));
  };

  return __jsx(SampleModal, null);
});
stories.add('Scroll inside', function () {
  var SampleModal = function SampleModal() {
    var _useState6 = (0, _react2.useState)(false),
        isOpen = _useState6[0],
        setIsOpen = _useState6[1];

    var btnRef = (0, _react2.useRef)();
    return __jsx(_react2["default"].Fragment, null, __jsx(_Button.Button, {
      ref: btnRef,
      onClick: function onClick() {
        return setIsOpen(true);
      }
    }, "Trigger modal"), __jsx(_.Modal, {
      onClose: function onClose() {
        return setIsOpen(false);
      },
      finalFocusRef: btnRef,
      isOpen: isOpen,
      blockScrollOnMount: true,
      isCentered: true,
      scrollBehavior: "inside"
    }, __jsx(_.ModalOverlay, null), __jsx(_.ModalContent, null, __jsx(_.ModalHeader, null, "Modal Title"), __jsx(_.ModalCloseButton, null), __jsx(_.ModalBody, null, __jsx(_reactLoremComponent["default"], {
      size: 5
    })), __jsx(_.ModalFooter, null, __jsx(_Button.Button, null, "Close")))));
  };

  return __jsx(SampleModal, null);
});
stories.add('Scroll outside', function () {
  var SampleModal = function SampleModal() {
    var _useState7 = (0, _react2.useState)(false),
        isOpen = _useState7[0],
        setIsOpen = _useState7[1];

    var btnRef = (0, _react2.useRef)();
    return __jsx(_react2["default"].Fragment, null, __jsx(_Button.Button, {
      ref: btnRef,
      onClick: function onClick() {
        return setIsOpen(true);
      }
    }, "Trigger modal"), __jsx(_.Modal, {
      onClose: function onClose() {
        return setIsOpen(false);
      },
      finalFocusRef: btnRef,
      isOpen: isOpen,
      blockScrollOnMount: true,
      scrollBehavior: "outside"
    }, __jsx(_.ModalOverlay, null), __jsx(_.ModalContent, null, __jsx(_.ModalHeader, null, "Modal Title"), __jsx(_.ModalCloseButton, null), __jsx(_.ModalBody, null, __jsx(_reactLoremComponent["default"], {
      size: 5
    })), __jsx(_.ModalFooter, null, __jsx(_Button.Button, null, "Close")))));
  };

  return __jsx(SampleModal, null);
});
stories.add('no close on overlay click', function () {
  function ManualClose() {
    var _React$useState = _react2["default"].useState(false),
        _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
        isOpen = _React$useState2[0],
        setIsOpen = _React$useState2[1];

    var close = function close() {
      return setIsOpen(false);
    };

    var open = function open() {
      return setIsOpen(true);
    };

    return __jsx(_react2["default"].Fragment, null, __jsx(_Button.Button, {
      onClick: open
    }, "Open Modal"), __jsx(_.Modal, {
      closeOnOverlayClick: false,
      isOpen: isOpen,
      onClose: close
    }, __jsx(_.ModalOverlay, {
      zIndex: 7
    }), __jsx(_.ModalContent, {
      zIndex: 8
    }, __jsx(_.ModalHeader, {
      onClose: close
    }, "Create your account"), __jsx(_.ModalCloseButton, null), __jsx(_.ModalBody, {
      pb: 6
    }, __jsx(_reactLoremComponent["default"], {
      count: 2
    })), __jsx(_.ModalFooter, null, __jsx(_ButtonGroup.ButtonGroup, null, __jsx(_Button.Button, null, "Save"), __jsx(_Button.Button, {
      onClick: close
    }, "Cancel"))))));
  }

  return __jsx(ManualClose, null);
});
stories.add('initial and final focus ref', function () {
  function InitialFocus() {
    var _React$useState3 = _react2["default"].useState(false),
        _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
        isOpen = _React$useState4[0],
        setIsOpen = _React$useState4[1];

    var close = function close() {
      return setIsOpen(false);
    };

    var open = function open() {
      return setIsOpen(true);
    };

    var initialRef = _react2["default"].useRef();

    var finalRef = _react2["default"].useRef();

    return __jsx(_react2["default"].Fragment, null, __jsx(_Button.Button, {
      onClick: open
    }, "Open Modal"), __jsx(_Button.Button, {
      ml: "spacing",
      ref: finalRef
    }, "I'll receive focus on close"), __jsx(_.Modal, {
      initialFocusRef: initialRef,
      finalFocusRef: finalRef,
      isOpen: isOpen,
      onClose: close
    }, __jsx(_.ModalOverlay, {
      zIndex: 7
    }), __jsx(_.ModalContent, {
      zIndex: 8
    }, __jsx(_.ModalHeader, {
      onClose: close
    }, "Create your account"), __jsx(_.ModalCloseButton, null), __jsx(_.ModalBody, {
      pb: 6
    }, __jsx(_FormControl.FormControl, null, __jsx(_FormLabel.FormLabel, null, "First name"), __jsx(_Input.Input, {
      ref: initialRef,
      placeholder: "First name"
    })), __jsx(_FormControl.FormControl, {
      mt: "spacing"
    }, __jsx(_FormLabel.FormLabel, null, "Last name"), __jsx(_Input.Input, {
      placeholder: "Last name"
    }))), __jsx(_.ModalFooter, null, __jsx(_ButtonGroup.ButtonGroup, null, __jsx(_Button.Button, null, "Save"), __jsx(_Button.Button, {
      onClick: close
    }, "Cancel"))))));
  }

  return __jsx(InitialFocus, null);
});

function App() {
  var _useDisclosure = (0, _useDisclosure2.useDisclosure)(),
      isOpen = _useDisclosure.isOpen,
      onOpen = _useDisclosure.onOpen,
      onClose = _useDisclosure.onClose;

  var _useState8 = (0, _react2.useState)(),
      firstName = _useState8[0],
      setFirstName = _useState8[1];

  var _useState9 = (0, _react2.useState)(),
      lastName = _useState9[0],
      setLastName = _useState9[1];

  return __jsx(_react2["default"].Fragment, null, __jsx(_Button.Button, {
    onClick: onOpen
  }, "Open Modal"), __jsx(_.Modal, {
    isOpen: isOpen,
    onClose: onClose
  }, __jsx(_.ModalOverlay, null), __jsx(_.ModalContent, null, __jsx(_.ModalHeader, null, "Test"), __jsx(_.ModalCloseButton, null), __jsx(_.ModalBody, null, __jsx(_FormControl.FormControl, {
    isRequired: true
  }, __jsx(_FormLabel.FormLabel, {
    htmlFor: "firstName"
  }, "First Name"), __jsx(_Input.Input, {
    name: "firstName",
    value: firstName,
    onChange: function onChange(event) {
      return setFirstName(event.target.value);
    }
  })), __jsx(_FormControl.FormControl, null, __jsx(_FormLabel.FormLabel, {
    htmlFor: "lastName"
  }, "Last Name"), __jsx(_Input.Input, {
    name: "lastName",
    value: lastName,
    onChange: function onChange(event) {
      return setLastName(event.target.value);
    }
  }))), __jsx(_.ModalFooter, null, __jsx(_Button.Button, {
    onClick: onClose
  }, "Close")))));
}

stories.add('bug', function () {
  return __jsx(App, null);
});
//# sourceMappingURL=examples.js.map