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

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

import { classnames, PropTypes, React, SimpleBar } from '@gravityforms/libraries';
import { ConditionalWrapper } from '@gravityforms/react-utils';
import Layout from '../Layout';

const { forwardRef } = React;

/**
 * @module ModularSidebar
 * @description A layout component with a header, primary and secondary sidebars and a content area.
 *
 * @since 1.1.15
 *
 * @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.PrimarySideBarChildren   The primary sidebar element.
 * @param {JSX.Element}         props.SecondarySideBarChildren The secondary sidebar element.
 *
 * @return {JSX.Element} The ModularSidebar component.
 * @example
 * import { ModularSidebar } from '@gravityforms/admin';
 *
 * <ModularSidebar
 *    Header={ <h1>Header</h1> }
 *    PrimarySideBarChildren={ <div>Primary Sidebar</div> }
 *    SecondarySideBarChildren={ <div>Secondary Sidebar</div> }
 *    customClasses={ 'my-custom-class' }
 *    customAttributes={ { 'data-custom-attribute': 'custom' } }
 *    layoutTagName={ 'section' }
 * >
 *
 */
const ModularSidebar = forwardRef( ( {
	children = null,
	customAttributes = {},
	customClasses = {},
	Header = null,
	layoutTagName = 'div',
	PrimarySideBarChildren = null,
	SecondarySideBarChildren = null,
	simplebarContent = true,
	simpleBarRef = null,
	...props
}, ref ) => {
	const modularSidebarProps = {
		customClasses: classnames( {
			'gform-layout--modular-sidebar': true,
		}, customClasses ),
		...customAttributes,
		ref,
		tagName: layoutTagName,
	};

	return (
		<Layout { ...modularSidebarProps }>
			{ Header && <Header customClasses={ [ 'gform-modular-sidebar__header' ] } { ...props } /> }
			<div className="gform-modular-sidebar__body" data-testid="gform-modular-sidebar-body">
				{ PrimarySideBarChildren &&
				<div
					className="gform-modular-sidebar__primary-sidebar"
					data-testid="gform-modular-sidebar-primary-sidebar"
				>
					<PrimarySideBarChildren { ...props } />
				</div> }
				{ SecondarySideBarChildren &&
				<div
					className="gform-modular-sidebar__secondary-sidebar"
					data-testid="gform-modular-sidebar-secondary-sidebar"
				>
					<SecondarySideBarChildren { ...props } />
				</div> }
				<div className="gform-modular-sidebar__content" data-testid="gform-modular-sidebar-content">
					<ConditionalWrapper
						condition={ simplebarContent }
						wrapper={ ( ch ) => <SimpleBar scrollableNodeProps={ { ref: simpleBarRef } }>{ ch }</SimpleBar> }
					>
						{ children }
					</ConditionalWrapper>
				</div>
			</div>
		</Layout>
	);
} );

ModularSidebar.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,
	PrimarySideBarChildren: PropTypes.func,
	SecondarySideBarChildren: PropTypes.func,
};

ModularSidebar.displayName = 'ModularSidebar';

export default ModularSidebar;