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

@wix/design-system

import React from 'react';
import ClosablePopover from './ClosablePopover/ClosablePopover';
import FloatingHelperContent from './FloatingHelperContent/FloatingHelperContent';
import { classes } from './FloatingHelper.st.css.js';
import { dataHooks, floatingHelperSkin } from './constants';
import CloseButton from '../CloseButton';
import { SKINS as CloseButtonSkins, SIZES as CloseButtonSizes, } from '../CloseButton/CloseButton.constants';
import deprecationLog from '../utils/deprecationLog';
class FloatingHelper extends React.Component {
    constructor() {
        super(...arguments);
        this.open = () => this.closablePopoverRef.open();
        this.close = () => this.closablePopoverRef.close();
    }
    _isControlled() {
        return this.props.opened !== undefined;
    }
    _getCloseButtonHandler(closableActions) {
        return this._isControlled()
            ? this.props.onClose
                ? this.props.onClose
                : () => null
            : closableActions.close;
    }
    _renderContent(closableActions, { width, content, skin }) {
        return (React.createElement("div", { "data-hook": dataHooks.contentWrapper, style: { width } },
            React.createElement("div", { "data-hook": dataHooks.innerContent, className: classes.innerContent },
                React.createElement(CloseButton, { className: classes.closeButton, dataHook: dataHooks.closeButton, onClick: () => this._getCloseButtonHandler(closableActions)(), skin: skin === floatingHelperSkin.dark
                        ? CloseButtonSkins.light
                        : CloseButtonSkins.dark, size: CloseButtonSizes.medium }),
                React.cloneElement(content, { skin }))));
    }
    render() {
        const { children, width, content, appearance, ...rest } = this.props;
        const skin = this.props.skin || appearance;
        if (appearance) {
            deprecationLog('<FloatingHelper/> - prop "appearance" is deprecated and will be removed in next major release, please use "skin" property instead.');
        }
        const renderContent = closableActions => this._renderContent(closableActions, {
            width,
            content,
            skin,
        });
        const closablePopoverProps = {
            ...rest,
            skin,
            content: renderContent,
            showArrow: true,
            closeOnMouseLeave: false,
        };
        return (React.createElement(ClosablePopover, { ...closablePopoverProps, ref: ref => {
                this.closablePopoverRef = ref;
            }, className: classes.root }));
    }
}
FloatingHelper.displayName = 'FloatingHelper';
FloatingHelper.defaultProps = {
    appendTo: 'window',
    width: '444px',
    initiallyOpened: true,
    appearance: 'dark', // TODO: add default skin prop once appearance is removed
};
FloatingHelper.Content = FloatingHelperContent;
export default FloatingHelper;
//# sourceMappingURL=FloatingHelper.js.map