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

@wix/design-system

import React, { PureComponent } from 'react';
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 deprecationLog from '../utils/deprecationLog';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
class SidePanel extends PureComponent {
    render() {
        const { dataHook, skin = 'standard', children, className, width, height, maxHeight, draggable, hideOverflow, 
        // 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';
        const { contextClassName } = this.context;
        return (React.createElement(SidePanelContext.Provider, { value: {
                skin,
                isDraggable,
                closeButtonProps,
                helpButtonProps,
                backButtonProps,
            } },
            React.createElement("div", { className: st(classes.root, { skin, hideOverflow }, className, contextClassName), "data-hook": dataHook, style: { width, height, maxHeight } }, children)));
    }
}
SidePanel.displayName = 'SidePanel';
SidePanel.contextType = WixDesignSystemContext;
SidePanel.Header = Header;
SidePanel.Content = Content;
SidePanel.Footer = Footer;
SidePanel.Divider = Divider;
SidePanel.Section = Section;
SidePanel.Field = Field;
SidePanel.defaultProps = {
    width: '420px',
    height: '100%',
};
export default SidePanel;
//# sourceMappingURL=SidePanel.js.map