@fluido/react-components/dist/snackbar/index.js

Fluido webapp components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const classnames_1 = __importDefault(require("classnames"));
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const button_1 = __importDefault(require("../button"));
const StyledSnackbar = styled_components_1.default.div `
  position: relative;
  background-color: var(--on-surface-high-emphasis);
  color: var(--surface);
  display: flex;
  align-items: flex-start;
  padding: 0 0.5rem 4px;
  box-shadow: 0px 5px 6px -3px var(--elevation-umbra),
    0px 9px 12px 1px var(--elevation-penumbra),
    0px 3px 16px 2px var(--elevation-ambient);

  &.with-timer {
    animation: snack-opacity 0.25s linear,
      snack-opacity 0.25s calc(var(--timer-value, 3s) + 0.25s) linear reverse
        forwards;
  }

  &.type-error {
    background-color: var(--error);
    color: var(--on-error);
  }
  &.type-warning {
    background-color: var(--warning);
    color: var(--on-warning);
  }
  &.type-success {
    background-color: var(--success);
    color: var(--on-success);
  }

  .icon {
    margin-right: 0.75rem 0.5rem;
    padding: 0.5rem 0.25rem 0;
  }
  .content {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;

    & > p {
      flex: 1 1 fit-content;
      padding: 0.75rem 0.5rem;
    }
  }
  .action {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-left: auto;
  }

  .snack-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: currentColor;
    opacity: 0.5;
    animation: loading-snack var(--timer-value, 3s) linear;
  }

  @keyframes loading-snack {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }
  @keyframes snack-opacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
`;
const Snackbar = ({ snack, message, actionLabel, action, icon, type = 'default', onClose, }) => {
    if (snack) {
        react_1.useEffect(() => {
            const tId = setTimeout(onClose, snack.duration.value + 500 /* extra para animação */);
            return () => {
                clearTimeout(tId);
            };
        }, []);
    }
    const timer = snack ? snack.duration.value : 0;
    const tType = snack ? snack.type.value : type;
    const tIcon = snack ? snack.icon.value : icon;
    const tMessage = snack ? snack.message.value : message;
    const tActionLabel = snack ? snack.actionLabel.value : actionLabel;
    const tAction = snack ? snack.action.value : action;
    return (jsx_runtime_1.jsxs(StyledSnackbar, Object.assign({ className: classnames_1.default(`type-${tType}`, {
            'with-timer': !!timer,
        }), style: {
            '--timer-value': `${timer}ms`,
        } }, { children: [tIcon && jsx_runtime_1.jsx("div", Object.assign({ className: 'icon' }, { children: tIcon }), void 0),
            jsx_runtime_1.jsxs("div", Object.assign({ className: 'content' }, { children: [jsx_runtime_1.jsx("p", { children: tMessage }, void 0),
                    tActionLabel && (jsx_runtime_1.jsx("div", Object.assign({ className: 'action' }, { children: jsx_runtime_1.jsx(button_1.default, Object.assign({ color: 'clear', onClick: () => {
                                if (onClose)
                                    onClose();
                                if (tAction)
                                    tAction();
                            } }, { children: tActionLabel }), void 0) }), void 0))] }), void 0),
            jsx_runtime_1.jsx("div", { className: 'snack-timer' }, void 0)] }), void 0));
};
exports.default = Snackbar;