nano-jsx/lib/ui/sheet.js

SSR first, lightweight 1kB JSX library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Sheet = void 0;
const component_js_1 = require("../component.js");
const core_js_1 = require("../core.js");
const _config_js_1 = require("./_config.js");
const _helpers_js_1 = require("./_helpers.js");
class Sheet extends component_js_1.Component {
    static show(sheet) {
        document.body.appendChild((0, core_js_1.render)(sheet));
    }
    static close() {
        const el = document.querySelector('[class^=sheet_container]');
        if (el)
            el.remove();
    }
    render() {
        const { mode = 'custom', title, subtitle } = this.props;
        const cssHash = (0, core_js_1.strToHash)(`sheet${mode}`);
        const isSide = mode === 'side' || mode === 'right' || mode === 'left';
        const isBottom = mode === 'bottom';
        const fadeIn = mode === 'side' ? 'left' : mode;
        const borderRadius = mode === 'bottom' ? 'border-radius: 4px;' : '';
        let sheetStyles = '';
        if (isSide) {
            sheetStyles += `
        min-width: 256px;
        max-width: calc(100vw - 56px);
        height: 100vh;

        top: 0;
        ${mode === 'right' ? 'right' : 'left'}: 0;`;
        }
        if (isBottom) {
            sheetStyles += `
        width: 100vw;
        bottom: 0px;      
        left: 0;`;
        }
        const styles = `
      @keyframes sheet_fadein_${fadeIn}-${cssHash} {
        from {${fadeIn}: -100%;}
        to {${fadeIn}: 0;}
      }

      .sheet_container-${cssHash} {
      }

      .sheet_sheet-${cssHash} {
        overflow: scroll;
        max-height: 100vh;

        ${sheetStyles}
        background: white;
        position: fixed;

        ${borderRadius}

        box-sizing: border-box;
        ${_config_js_1.boxShadow}

        z-index: ${_config_js_1.zIndex.sheet}

        animation-name: sheet_fadein_${fadeIn}-${cssHash};
        animation-duration: 0.2s;

        transition: top 2s, right 2s, bottom 2s, left 2s;
      }

      .sheet_background-${cssHash} {
        background: #00000070;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        z-index: ${_config_js_1.zIndex.sheet}

        animation-name: sheet-background-fadein;
        animation-duration: 0.2s;
      }

      @keyframes sheet-background-fadein {
        from {opacity: 0;}
        to {opacity: 1;}
      }
      
      .sheet_title-${cssHash} {
        padding: 20px 16px 0px;
        font-size: 24px;
      }
      
      .sheet_subtitle-${cssHash} {
        padding: 8px 16px;
        font-size: 14px;
        color: #000000b0;
      }`;
        (0, _helpers_js_1.addStylesToHead)(styles, cssHash);
        const background = (0, core_js_1.h)('div', {
            class: `sheet_background-${cssHash}`,
            onClick: () => {
                element.remove();
            }
        });
        const t = title ? (0, core_js_1.h)('div', { class: `sheet_title-${cssHash}` }, title) : null;
        const s = subtitle ? (0, core_js_1.h)('div', { class: `sheet_subtitle-${cssHash}` }, subtitle) : null;
        // @ts-ignore
        const sh = (0, core_js_1.h)('div', { class: `sheet_sheet-${cssHash}` }, t, s, this.props.children);
        const element = (0, core_js_1.h)('div', { class: `sheet_container-${cssHash}` }, background, sh);
        return element;
    }
}
exports.Sheet = Sheet;
//# sourceMappingURL=sheet.js.map