@selfcommunity/react-ui/lib/cjs/components/Footer/Footer.js

React UI Components to integrate a Community created with SelfCommunity Platform.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const system_1 = require("@mui/system");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const api_services_1 = require("@selfcommunity/api-services");
const utils_1 = require("@selfcommunity/utils");
const react_core_1 = require("@selfcommunity/react-core");
const Errors_1 = require("../../constants/Errors");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const constants_1 = require("./constants");
const classes = {
    root: `${constants_1.PREFIX}-root`,
    itemList: `${constants_1.PREFIX}-item-list`,
    item: `${constants_1.PREFIX}-item`,
    copyright: `${constants_1.PREFIX}-copyright`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'Root'
})(({ theme }) => ({}));
/**
 * > API documentation for the Community-JS Footer component. Learn about the available props and the CSS API.
 *
 *
 * This component renders the application footer, which contains the links to reach specific sections, and the application copyright.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Footer)

 #### Import
 ```jsx
 import {Footer} from '@selfcommunity/react-ui';
 ```

 #### Component Name
 The name `SCFooter` can be used when providing style overrides in the theme.

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCFooter-root|Styles applied to the root element.|
 |item|.SCFooter-item|Styles applied to the item element.|
 |itemList|.SCFooter-item-list|Styles applied to the item list element.|
 |copyright|.SCFooter-copyright|Styles applied to the copyright section.|

 * @param inProps
 */
function Footer(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { className, menu = null, startActions = null, endActions = null } = props, rest = tslib_1.__rest(props, ["className", "menu", "startActions", "endActions"]);
    // PREFERENCES
    const scPreferences = (0, react_core_1.useSCPreferences)();
    const copyright = (0, react_1.useMemo)(() => {
        return scPreferences.preferences && react_core_1.SCPreferences.TEXT_APPLICATION_COPYRIGHT in scPreferences.preferences
            ? scPreferences.preferences[react_core_1.SCPreferences.TEXT_APPLICATION_COPYRIGHT].value.replace('$year', new Date().getFullYear())
            : null;
    }, [scPreferences.preferences]);
    // STATE
    const [_menu, setMenu] = (0, react_1.useState)(menu);
    const [loading, setLoading] = (0, react_1.useState)(!menu);
    /**
     * Fetches custom pages
     */
    function fetchMenu() {
        setLoading(true);
        api_services_1.CustomMenuService.getBaseCustomMenu()
            .then((menu) => {
            setMenu(menu);
        })
            .catch((error) => {
            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
        })
            .then(() => setLoading(false));
    }
    /**
     * On mount, fetches legal and custom pages
     */
    (0, react_1.useEffect)(() => {
        if (_menu) {
            return;
        }
        fetchMenu();
    }, []);
    /**
     * Renders root object
     */
    if (loading) {
        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
    }
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: [startActions, (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.itemList }, { children: (0, utils_1.sortByAttr)(_menu.items, 'order').map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, className: classes.item, to: item.url, variant: "text" }, { children: item.label }), item.id))) })), endActions, (0, jsx_runtime_1.jsx)(material_1.Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })] })));
}
exports.default = Footer;