nice-ui/lib/5-block/NextBlock/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NextBlock = void 0;
const React = require("react");
const iconista_1 = require("iconista");
const nano_theme_1 = require("nano-theme");
const useWindowSize_1 = require("react-use/lib/useWindowSize");
const use_t_1 = require("use-t");
const Link_1 = require("../../1-inline/Link");
const Paper_1 = require("../../4-card/Paper");
const Ripple_1 = require("../../misc/Ripple");
const Space_1 = require("../../3-list-item/Space");
const blockClass = (0, nano_theme_1.rule)({
    d: 'flex',
});
const getNoteClass = (0, nano_theme_1.drule)({
    ...nano_theme_1.theme.font.ui3,
    d: 'block',
    fz: '14px',
    '@media only screen and (max-width: 500px)': {
        fz: '11px',
    },
});
const getTitleClass = (0, nano_theme_1.drule)({
    ...nano_theme_1.theme.font.ui2.bold,
    pad: '8px 0 0',
    d: 'block',
    fz: '20px',
    '@media only screen and (max-width: 500px)': {
        fz: '16px',
    },
});
const getCardClass = (0, nano_theme_1.drule)({
    d: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    bxz: 'border-box',
    pad: '16px',
    '@media only screen and (max-width: 500px)': {
        padl: '12px',
        padr: '12px',
    },
});
const arrowClass = (0, nano_theme_1.rule)({
    w: '24px',
});
const arrowLeftClass = (0, nano_theme_1.rule)({
    padl: '16px',
    trs: 'padding .1s ease-out',
    [`.${String(getCardClass).trim()}:hover &`]: {
        padl: '8px',
    },
});
const arrowRightClass = (0, nano_theme_1.rule)({
    padr: '16px',
    trs: 'padding .1s ease-out',
    [`.${String(getCardClass).trim()}:hover &`]: {
        padr: '8px',
    },
});
const NextBlock = ({ left, right }) => {
    const [t] = (0, use_t_1.useT)();
    const { width } = (0, useWindowSize_1.default)();
    const theme = (0, nano_theme_1.useTheme)();
    const noteClass = getNoteClass({
        col: theme.g(0.6),
        [`.${String(getCardClass).trim()}:hover &`]: {
            col: theme.g(0.4),
        },
    });
    const titleClass = getTitleClass({
        col: theme.g(0.1),
        [`.${String(getCardClass).trim()}:hover &`]: {
            col: theme.g(0),
        },
    });
    const cardClass = getCardClass({
        svg: {
            fill: theme.g(0.6),
        },
        '&:hover': {
            svg: {
                fill: theme.g(0.3),
            },
        },
    });
    const leftElement = !left ? null : (
    // <Link key={left.to} a to={left.to} style={{flex: '1 1 100%'}} preload>
    React.createElement(Link_1.Link, { key: left.to, a: true, to: left.to, style: { flex: '1 1 100%' } },
        React.createElement(Paper_1.Paper, { as: 'span', hoverElevate: true },
            React.createElement(Ripple_1.Ripple, { ms: 700 },
                React.createElement("span", { className: cardClass },
                    width < 400 ? (React.createElement("span", null)) : (React.createElement("span", { className: arrowRightClass + arrowLeftClass },
                        React.createElement(iconista_1.default, { set: "ibm_16", icon: "arrow--left", width: 24, height: 24 }))),
                    React.createElement("span", null,
                        React.createElement("span", { className: noteClass, style: { textAlign: 'right' } }, t('Previous')),
                        React.createElement("span", { className: titleClass, style: { textAlign: 'right' } }, left.title)))))));
    const rightElement = !right ? null : (React.createElement(Link_1.Link, { key: right.to, a: true, to: right.to, style: { flex: '1 1 100%' } },
        React.createElement(Paper_1.Paper, { as: 'span', hoverElevate: true },
            React.createElement(Ripple_1.Ripple, { ms: 700 },
                React.createElement("span", { className: cardClass },
                    React.createElement("span", null,
                        React.createElement("span", { className: noteClass }, t('Next')),
                        React.createElement("span", { className: titleClass }, right.title)),
                    width < 400 ? (React.createElement("span", null)) : (React.createElement("span", { className: arrowClass + arrowRightClass },
                        React.createElement(iconista_1.default, { set: "ibm_16", icon: "arrow--right", width: 24, height: 24 }))))))));
    if (!leftElement && !rightElement)
        return null;
    if (!leftElement)
        return rightElement;
    if (!rightElement)
        return React.createElement("div", { style: { width: '50%' } }, leftElement);
    if (width < 800) {
        return (React.createElement("div", { className: '' },
            rightElement,
            React.createElement(Space_1.Space, null),
            leftElement));
    }
    return (React.createElement("div", { className: blockClass },
        leftElement,
        React.createElement("div", { style: { width: 32, flex: '1 1 32px' } }),
        rightElement));
};
exports.NextBlock = NextBlock;