@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
91 lines • 4.92 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FooterStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const aria_1 = require("../../utils/aria/aria");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
// inner components
const footerSection_1 = require("./components/footerSection");
const footer_styled_1 = require("./footer.styled");
const direction_1 = require("./types/direction");
const footer_1 = require("./types/footer");
const position_1 = require("./types/position");
const getOrderConfiguration_1 = require("./utils/getOrderConfiguration");
// simple container tag
const FOOTER = 'footer';
const DEFAULT_SORT = {
column: footer_1.FooterMobileColumnFlow.DEFAULT,
firstContent: position_1.FooterPositionType.LEFT,
secondContent: position_1.FooterPositionType.CENTER,
thirdContent: position_1.FooterPositionType.RIGHT,
};
const FooterStandAloneComponent = ({ orderInverse = [], footerMobileSortConfig = DEFAULT_SORT, dataTestId = 'footer', ...props }, ref) => {
if (!props.children) {
return null;
}
const ariaProps = (0, aria_1.pickAriaProps)(props);
const asFooter = props.simpleContainer ? undefined : FOOTER;
// START CONTENT: Remove when footerMobileSortConfig is removed
if (footerMobileSortConfig?.column === footer_1.FooterMobileColumnFlow.REVERSE) {
orderInverse.push(breakpoints_1.DeviceBreakpointsType.MOBILE);
}
// END CONTENT
const setVertical = props.contentDirection === direction_1.ContentDirectionType.VERTICAL ||
// START CONTENT: Remove when forceVertical is removed
props.forceVertical;
// END CONTENT
const orderConfiguration = (0, getOrderConfiguration_1.getOrderConfiguration)(props.tabInverse || [], orderInverse);
const renderChildren = (children) => {
const childrenArray = react_1.default.Children.toArray(children);
const positions = {
[position_1.FooterPositionType.LEFT]: [],
[position_1.FooterPositionType.CENTER]: [],
[position_1.FooterPositionType.RIGHT]: [],
};
let defaultPositionCounter = 0;
childrenArray.forEach((child) => {
let position = child?.props?.['data-position'];
// START CONTENT: Remove when footerMobileSortConfig is removed
if (footerMobileSortConfig && props.device === breakpoints_1.DeviceBreakpointsType.MOBILE) {
const { firstContent, secondContent, thirdContent } = footerMobileSortConfig;
if (position === firstContent) {
positions[position_1.FooterPositionType.LEFT].push(child);
return;
}
else if (position === secondContent) {
positions[position_1.FooterPositionType.CENTER].push(child);
return;
}
else if (position === thirdContent) {
positions[position_1.FooterPositionType.RIGHT].push(child);
return;
}
}
// END CONTENT
if (!position) {
if (defaultPositionCounter === 0) {
position = position_1.FooterPositionType.LEFT;
}
else if (defaultPositionCounter === 1) {
position = position_1.FooterPositionType.RIGHT;
}
defaultPositionCounter++;
}
if (positions[position]) {
positions[position].push(child);
}
});
const sections = Object.entries(positions).map(([position, children]) => ((0, jsx_runtime_1.jsx)(footerSection_1.FooterSection, { alignItems: props.alignItems, orderConfiguration: {
flexReverse: orderConfiguration[props.device].flexReverse,
reverse: orderConfiguration[props.device].reverse,
}, position: position, setVertical: setVertical, styles: props.styles, children: children }, position)));
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: orderConfiguration[props.device].reverse ? sections.reverse() : sections });
};
return ((0, jsx_runtime_1.jsx)(footer_styled_1.FooterStyled, { ...ariaProps, ...props, ref: ref, "$flexReverse": orderConfiguration[props.device].flexReverse, "$setVertical": setVertical, as: asFooter, "data-testid": dataTestId, lineSeparatorLineStyles: props.lineSeparatorLineStyles, role: props.role, styles: props.styles, children: renderChildren(props.children) }));
};
exports.FooterStandAlone = react_1.default.forwardRef(FooterStandAloneComponent);
//# sourceMappingURL=footerStandAlone.js.map