wix-style-react
Version:
wix-style-react
58 lines • 2.58 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Start from './Start';
import Center from './Center';
import End from './End';
import { st, classes } from './PageFooter.st.css';
import Divider from '../Divider';
import { buildChildrenObject } from '../common/utils/buildChildrenObject';
/** Layout footer component of 3 columns */
const PageFooter = ({ divider = false, className, children, dataHook }) => {
const childrenObj = buildChildrenObject(children, {
Start: React.createElement(Start, { key: "start" }),
Center: React.createElement(Center, { key: "center" }),
End: React.createElement(End, { key: "end" }),
});
return (React.createElement("div", { className: classes.root },
divider && (React.createElement("div", { className: classes.divider },
React.createElement(Divider, null))),
React.createElement("div", { className: st(classes.container, className), children: Object.values(childrenObj), "data-hook": dataHook }, Object.values(childrenObj))));
};
PageFooter.displayName = 'Page.Footer';
PageFooter.propTypes = {
/** Accepts following elements as child items:
* - <PageFooter.Start />
* - <PageFooter.Center />
* - <PageFooter.End />
* - <Page.Footer.Start />
* - <Page.Footer.Center />
* - <Page.Footer.End />
<br/>
Each of these areas accept any component as their child. */
children: (props, propName) => {
const childrenArr = React.Children.toArray(props[propName]);
return childrenArr.reduce((err, child) => {
if (!err &&
child.type.displayName !== 'Page.Footer.Start' &&
child.type.displayName !== 'Page.Footer.Center' &&
child.type.displayName !== 'Page.Footer.End') {
return new Error(`Invalid children provided, unknown child <${child.type.displayName || child.type} /> supplied`);
}
return err;
}, false);
},
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.string,
/** Applies a CSS class to the component’s root element */
className: PropTypes.string,
/** Renders a full-width divider at the top of the footer */
divider: PropTypes.bool,
};
PageFooter.Start = Start;
PageFooter.Center = Center;
PageFooter.End = End;
PageFooter.Start.displayName = 'Page.Footer.Start';
PageFooter.Center.displayName = 'Page.Footer.Center';
PageFooter.End.displayName = 'Page.Footer.End';
export default PageFooter;
//# sourceMappingURL=PageFooter.js.map