@gravityforms/components/react/admin/modules/Layouts/RightSidebar/index.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { classnames, PropTypes, React } from '@gravityforms/libraries';
import Layout from '../Layout';

const { forwardRef } = React;

/**
 * @module RightSidebar
 * @description A layout component with a header, sidebar and a content area with two split content options.
 *
 * @since 3.3.0
 *
 * @param {object}              props                          Component props.
 * @param {JSX.Element}         props.children                 React element children.
 * @param {object}              props.customAttributes         Custom attributes for the layout.
 * @param {string|Array|object} props.customClasses            Custom classes for the layout.
 * @param {JSX.Element}         props.Header                   The header element.
 * @param {string}              props.layoutTagName            The tag name for the layout.
 * @param {JSX.Element}         props.SecondaryContentChildren The secondary content element.
 * @param {JSX.Element}         props.SideBarChildren          The sidebar element.
 * @param {string}              props.sidebarMobilePosition    The position of the sidebar on mobile (start, middle, end).
 *
 * @return {JSX.Element} The ModularSidebar component.
 * @example
 * import RightSidebar from '@gravityforms/components/react/admin/modules/Layouts/RightSidebar';
 *
 * <RightSidebar
 *    Header={ <h1>Header</h1> }
 *    SideBarChildren={ <div>Primary Sidebar</div> }
 *    SecondaryContentChildren={ <div>Secondary Sidebar</div> }
 *    customClasses={ 'my-custom-class' }
 *    customAttributes={ { 'data-custom-attribute': 'custom' } }
 *    layoutTagName={ 'section' }
 *    sidebarMobilePosition="start"
 * >
 *   <div>Content</div>
 * </RightSidebar>
 *
 */
const RightSidebar = forwardRef( ( {
	children = null,
	customAttributes = {},
	customClasses = {},
	Header = null,
	layoutTagName = 'div',
	SecondaryContentChildren = null,
	SideBarChildren = null,
	sidebarMobilePosition = 'middle',
	...props
}, ref ) => {
	const layoutProps = {
		customClasses: classnames( {
			'gform-layout--right-sidebar': true,
			[ `gform-layout--sidebar-${ sidebarMobilePosition }` ]: true,
		}, customClasses ),
		...customAttributes,
		ref,
		tagName: layoutTagName,
	};

	return (
		<Layout { ...layoutProps }>
			{ Header && <div className="gform-right-sidebar__header" data-testid="gform-right-sidebar-header"><Header customClasses={ [ 'gform-right-sidebar__header' ] } { ...props } /></div> }
			<div className="gform-right-sidebar__body" data-testid="gform-right-sidebar-body">
				{ sidebarMobilePosition === 'start' && SideBarChildren &&
					<div
						className="gform-right-sidebar__sidebar"
						data-testid="gform-right-sidebar-sidebar"
					>
						<SideBarChildren { ...props } />
					</div> }
				<div className="gform-right-sidebar__content" data-testid="gform-right-sidebar-content">
					{ children }
				</div>
				{ sidebarMobilePosition === 'middle' && SideBarChildren &&
					<div
						className="gform-right-sidebar__sidebar"
						data-testid="gform-right-sidebar-sidebar"
					>
						<SideBarChildren { ...props } />
					</div> }
				{ SecondaryContentChildren &&
					<div
						className="gform-right-sidebar__secondary-content"
						data-testid="gform-right-sidebar-secondary-content"
					>
						<SecondaryContentChildren { ...props } />
					</div> }
				{ sidebarMobilePosition === 'end' && SideBarChildren &&
					<div
						className="gform-right-sidebar__sidebar"
						data-testid="gform-right-sidebar-sidebar"
					>
						<SideBarChildren { ...props } />
					</div> }
			</div>
		</Layout>
	);
} );

RightSidebar.propTypes = {
	children: PropTypes.oneOfType( [
		PropTypes.arrayOf( PropTypes.node ),
		PropTypes.node,
	] ),
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	Header: PropTypes.func,
	layoutTagName: PropTypes.string,
	SecondaryContentChildren: PropTypes.func,
	SideBarChildren: PropTypes.func,
	sidebarMobilePosition: PropTypes.oneOf( [ 'start', 'middle', 'end' ] ),
};

RightSidebar.displayName = 'RightSidebar';

export default RightSidebar;