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

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

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from 'react';
import { useThemeProps } from '@mui/system';
import { styled } from '@mui/material/styles';
import { Box, Button, Typography } from '@mui/material';
import classNames from 'classnames';
import { CustomMenuService } from '@selfcommunity/api-services';
import { Logger, sortByAttr } from '@selfcommunity/utils';
import { Link, SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
import { SCOPE_SC_UI } from '../../constants/Errors';
import FooterSkeleton from './Skeleton';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-root`,
    itemList: `${PREFIX}-item-list`,
    item: `${PREFIX}-item`,
    copyright: `${PREFIX}-copyright`
};
const Root = styled(Box, {
    name: 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
 */
export default function Footer(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, menu = null, startActions = null, endActions = null } = props, rest = __rest(props, ["className", "menu", "startActions", "endActions"]);
    // PREFERENCES
    const scPreferences = useSCPreferences();
    const copyright = useMemo(() => {
        return scPreferences.preferences && SCPreferences.TEXT_APPLICATION_COPYRIGHT in scPreferences.preferences
            ? scPreferences.preferences[SCPreferences.TEXT_APPLICATION_COPYRIGHT].value.replace('$year', new Date().getFullYear())
            : null;
    }, [scPreferences.preferences]);
    // STATE
    const [_menu, setMenu] = useState(menu);
    const [loading, setLoading] = useState(!menu);
    /**
     * Fetches custom pages
     */
    function fetchMenu() {
        setLoading(true);
        CustomMenuService.getBaseCustomMenu()
            .then((menu) => {
            setMenu(menu);
        })
            .catch((error) => {
            Logger.error(SCOPE_SC_UI, error);
        })
            .then(() => setLoading(false));
    }
    /**
     * On mount, fetches legal and custom pages
     */
    useEffect(() => {
        if (_menu) {
            return;
        }
        fetchMenu();
    }, []);
    /**
     * Renders root object
     */
    if (loading) {
        return _jsx(FooterSkeleton, {});
    }
    return (_jsxs(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: [startActions, _jsx(Box, Object.assign({ className: classes.itemList }, { children: sortByAttr(_menu.items, 'order').map((item, index) => (_jsx(Button, Object.assign({ component: Link, className: classes.item, to: item.url, variant: "text" }, { children: item.label }), item.id))) })), endActions, _jsx(Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })] })));
}