@onwave/ui/dist/components/Overlays/BottomSheet/index.js

onwave ui library

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import styled from "@emotion/styled";
import React, { useState } from "react";
export var BottomSheet = function (_a) {
    var title = _a.title, renderContent = _a.renderContent;
    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
    var handleToggle = function () {
        setIsOpen(function (prev) { return !prev; });
    };
    return (React.createElement(Container, { isOpen: isOpen },
        React.createElement(Header, { isOpen: isOpen, onClick: handleToggle },
            React.createElement(Title, null, title)),
        React.createElement(Content, null, renderContent)));
};
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 2001;\n  position: fixed;\n  width: 100vw;\n  height: 90vh;\n  bottom: calc(48px - 100%);\n  left: 0;\n  overflow: visible;\n  transition: transform 0.4s ease-in-out;\n  border-top-left-radius: 12px;\n  border-top-right-radius: 12px;\n  background-color: white;\n  box-shadow: 0 -1px 3px -1px rgba(41, 42, 43, 0.16),\n    0 0 1px 1px rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n  ", ";\n"], ["\n  z-index: 2001;\n  position: fixed;\n  width: 100vw;\n  height: 90vh;\n  bottom: calc(48px - 100%);\n  left: 0;\n  overflow: visible;\n  transition: transform 0.4s ease-in-out;\n  border-top-left-radius: 12px;\n  border-top-right-radius: 12px;\n  background-color: white;\n  box-shadow: 0 -1px 3px -1px rgba(41, 42, 43, 0.16),\n    0 0 1px 1px rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n  ",
    ";\n"])), function (_a) {
    var isOpen = _a.isOpen;
    return isOpen
        ? "transform: translateY(calc(48px - 100% + 1px));"
        : "transform: translateY(calc(-10% - 2px))";
});
var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 10px 24px;\n  cursor: pointer;\n  transition: padding 0.4s ease-in-out;\n  ", ";\n"], ["\n  padding: 10px 24px;\n  cursor: pointer;\n  transition: padding 0.4s ease-in-out;\n  ", ";\n"])), function (_a) {
    var isOpen = _a.isOpen;
    return (isOpen ? "padding-top: 24px;" : undefined);
});
var Title = styled.h2(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0px;\n"], ["\n  margin: 0px;\n"])));
var Content = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  height: calc((100% - 122px) - 4px);\n  padding: 0px 24px;\n"], ["\n  width: 100%;\n  height: calc((100% - 122px) - 4px);\n  padding: 0px 24px;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=index.js.map