@wix/design-system/dist/esm/FloatingNotification/FloatingNotification.js

@wix/design-system

import React from 'react';
import isEmpty from 'lodash/isEmpty';
import Text from '../Text';
import TextButton from '../TextButton';
import Button from '../Button';
import CloseButton from '../CloseButton/CloseButton';
import deprecationLog from '../utils/deprecationLog';
import { TYPES, dataHooks } from './constants';
import { st, classes } from './FloatingNotification.st.css.js';
/**
 * @deprecated FloatingNotification is deprecated and will be removed in the next major version. Please use SectionHelper instead.
 */
class FloatingNotification extends React.PureComponent {
    constructor(props) {
        super(props);
        deprecationLog('<FloatingNotification/> is deprecated and will be removed in the next major version. Please use <SectionHelper/> instead.');
    }
    render() {
        const { type, className, dataHook, width, fullWidth } = this.props;
        const icon = this._getIcon();
        const content = this._getContent();
        const textButton = this._getTextButton();
        const button = this._getButton();
        const close = this._getClose();
        const style = { width };
        width && (style.maxWidth = width);
        return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, { fullWidth, type }, className), style: style },
            icon,
            content,
            textButton,
            button,
            React.createElement("div", { className: classes.gap }),
            close));
    }
    _getIcon() {
        const { prefixIcon, type } = this.props;
        return prefixIcon ? (React.createElement("div", { className: st(classes.icon, { type }) }, prefixIcon)) : null;
    }
    _getContent() {
        const { text, type } = this.props;
        return (React.createElement(Text, { size: "small", ellipsis: true, light: type === TYPES.dark, dataHook: dataHooks.notificationText, className: classes.text }, text));
    }
    _getTextButton() {
        const { textButtonProps, type } = this.props;
        const { label, ...rest } = textButtonProps ?? {};
        return !isEmpty(textButtonProps) ? (React.createElement(TextButton, { ...rest, underline: "always", skin: type !== TYPES.dark ? 'dark' : 'light', size: "small", className: classes.textButton, dataHook: dataHooks.textButton }, label)) : null;
    }
    _getButton() {
        const { buttonProps, type } = this.props;
        const { label, ...rest } = buttonProps ?? {};
        return !isEmpty(buttonProps) ? (React.createElement(Button, { ...rest, className: classes.button, size: "tiny", priority: type !== TYPES.dark ? 'secondary' : 'primary', skin: type !== TYPES.dark ? 'dark' : 'standard', dataHook: dataHooks.button }, label)) : null;
    }
    _getClose() {
        const { showCloseButton, onClose, type } = this.props;
        return showCloseButton ? (React.createElement(CloseButton, { size: "medium", skin: type !== TYPES.dark ? 'dark' : 'light', className: classes.close, dataHook: dataHooks.closeButton, onClick: onClose })) : null;
    }
}
FloatingNotification.displayName = 'FloatingNotification';
FloatingNotification.defaultProps = {
    type: 'standard',
    buttonProps: {},
    textButtonProps: {},
    showCloseButton: true,
};
export default FloatingNotification;
//# sourceMappingURL=FloatingNotification.js.map