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

@wix/design-system

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './SidePanel.st.css.js';
import Header from './components/Header';
import Content from './components/Content';
import Footer from './components/Footer';
import Divider from './components/Divider';
import Section from './components/Section';
import Field from './components/Field';
import { SidePanelContext } from './SidePanelAPI';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import deprecationLog from '../utils/deprecationLog';
class SidePanel extends PureComponent {
    render() {
        const { dataHook, skin = 'standard', children, className, width, height, maxHeight, draggable, 
        // Deprecated Props
        backButtonDescription, backButtonTooltipProps, onBackButtonClick, onCloseButtonClick, onHelpButtonClick, } = this.props;
        if (backButtonDescription) {
            deprecationLog('<SidePanel /> props "backButtonDescription" is deprecated and will be removed in next major release, please use "backButtonProps.description" instead');
        }
        if (backButtonTooltipProps) {
            deprecationLog('<SidePanel /> props "backButtonTooltipProps" is deprecated and will be removed in next major release, please use "backButtonProps.tooltipProps" instead');
        }
        if (onBackButtonClick) {
            deprecationLog('<SidePanel /> props "onBackButtonClick" is deprecated and will be removed in next major release, please use "backButtonProps.onClick" instead');
        }
        if (onCloseButtonClick) {
            deprecationLog('<SidePanel /> props "onCloseButtonClick" is deprecated and will be removed in next major release, please use "closeButtonProps.onClick" instead');
        }
        if (onHelpButtonClick) {
            deprecationLog('<SidePanel /> props "onHelpButtonClick" is deprecated and will be removed in next major release, please use "helpButtonProps.onClick" instead');
        }
        const helpButtonProps = {
            ...this.props.helpButtonProps,
            onClick: this.props.helpButtonProps?.onClick || onHelpButtonClick,
        };
        const closeButtonProps = {
            ...this.props.closeButtonProps,
            onClick: this.props.closeButtonProps?.onClick || onCloseButtonClick,
        };
        const backButtonProps = {
            ...this.props.backButtonProps,
            onClick: this.props.backButtonProps?.onClick || onBackButtonClick,
            description: this.props.backButtonProps?.description || backButtonDescription,
            tooltipProps: this.props.backButtonProps?.tooltipProps || backButtonTooltipProps,
        };
        const isDraggable = draggable && skin === 'floating';
        return (React.createElement(SidePanelContext.Provider, { value: {
                skin,
                isDraggable,
                closeButtonProps,
                helpButtonProps,
                backButtonProps,
            } },
            React.createElement("div", { className: st(classes.root, { skin }, className), "data-hook": dataHook, style: { width, height, maxHeight } }, children)));
    }
}
SidePanel.displayName = 'SidePanel';
SidePanel.Header = Header;
SidePanel.Content = Content;
SidePanel.Footer = Footer;
SidePanel.Divider = Divider;
SidePanel.Section = Section;
SidePanel.Field = Field;
SidePanel.propTypes = {
    className: PropTypes.string,
    dataHook: PropTypes.string,
    closeButtonProps: PropTypes.shape({
        ariaLabel: PropTypes.string,
        onClick: PropTypes.func,
        size: PropTypes.oneOf(['small', 'medium', 'large']),
        skin: PropTypes.oneOf([
            'standard',
            'standardFilled',
            'light',
            'lightFilled',
            'dark',
            'transparent',
        ]),
    }),
    helpButtonProps: PropTypes.shape({
        ariaLabel: PropTypes.string,
        onClick: PropTypes.func,
        size: PropTypes.oneOf(['small', 'medium', 'large']),
        skin: PropTypes.oneOf([
            'standard',
            'standardFilled',
            'light',
            'lightFilled',
            'dark',
            'transparent',
        ]),
    }),
    children: PropTypes.node,
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    skin: PropTypes.oneOf(['standard', 'floating']),
    draggable: PropTypes.bool,
    backButtonProps: PropTypes.shape({
        ariaLabel: PropTypes.string,
        onClick: PropTypes.func,
        description: PropTypes.node,
    }),
    /**
     * @deprecated use (backButtonProps/closeButtonProps/helpButtonProps) instead
     */
    onCloseButtonClick: PropTypes.func,
    onHelpButtonClick: PropTypes.func,
    onBackButtonClick: PropTypes.func,
    backButtonDescription: PropTypes.node,
    backButtonTooltipProps: PropTypes.shape(TooltipCommonProps),
};
SidePanel.defaultProps = {
    width: '420px',
    height: '100%',
};
export default SidePanel;
//# sourceMappingURL=SidePanel.js.map