elfen-component-drawer/Drawer.js

elfen component drawer

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var styled_components_1 = require("styled-components");
var elfen_component_mask_1 = require("elfen-component-mask");
;
;
var Container = (_a = ["\n\n"], _a.raw = ["\n\n"], styled_components_1.default.div(_a));
var Wrapper = (_b = ["\n  position: ", ";\n  transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1);\n  background-color: #fff;\n  z-index: 1001;\n\n  &.elfen-drawer-left {\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: ", "px;\n    transform: translate(-", "px, 0px);\n  }\n\n  &.elfen-drawer-right {\n    top: 0;\n    right: 0;\n    height: 100%;\n    width: ", "px;\n    transform: translate(", "px, 0px);\n  }\n\n  &.elfen-drawer-top {\n    top: 0;\n    left: 0;\n    height: ", "px;\n    width: 100%;\n    transform: translate(0px, -", "px);\n  }\n\n  &.elfen-drawer-bottom {\n    bottom: 0;\n    left: 0;\n    height: ", "px;\n    width: 100%;\n    transform: translate(0px, ", "px);\n  }\n"], _b.raw = ["\n  position: ", ";\n  transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1);\n  background-color: #fff;\n  z-index: 1001;\n\n  &.elfen-drawer-left {\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: ", "px;\n    transform: translate(-", "px, 0px);\n  }\n\n  &.elfen-drawer-right {\n    top: 0;\n    right: 0;\n    height: 100%;\n    width: ", "px;\n    transform: translate(", "px, 0px);\n  }\n\n  &.elfen-drawer-top {\n    top: 0;\n    left: 0;\n    height: ", "px;\n    width: 100%;\n    transform: translate(0px, -", "px);\n  }\n\n  &.elfen-drawer-bottom {\n    bottom: 0;\n    left: 0;\n    height: ", "px;\n    width: 100%;\n    transform: translate(0px, ", "px);\n  }\n"], styled_components_1.default.div(_b, function (props) { return props.position || 'fixed'; }, function (props) { return props['data-width']; }, function (props) { return !props.open ? props['data-width'] : 0; }, function (props) { return props['data-width']; }, function (props) { return !props.open ? props['data-width'] : 0; }, function (props) { return props['data-width']; }, function (props) { return !props.open ? props['data-width'] : 0; }, function (props) { return props['data-width']; }, function (props) { return !props.open ? props['data-width'] : 0; }));
var Drawer = (function (_super) {
    __extends(Drawer, _super);
    function Drawer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Drawer.prototype.render = function () {
        var _a = this.props, style = _a.style, _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, position = _a.position, open = _a.open, direction = _a.direction, contentWidth = _a.contentWidth, onClose = _a.onClose;
        return (React.createElement(Container, null,
            React.createElement(elfen_component_mask_1.default, { position: position, active: open, onClick: onClose }),
            React.createElement(Wrapper, { position: position, open: open, style: style, className: "elfen-drawer-" + direction + " " + className, "data-width": contentWidth }, children)));
    };
    Drawer.defaultProps = {
        open: false,
        direction: 'left',
        contentWidth: 200,
    };
    return Drawer;
}(React.PureComponent));
exports.default = Drawer;
var _a, _b;