@selfcommunity/react-ui/lib/esm/components/UserProfileEdit/UserProfileEdit.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 React from 'react';
import { styled } from '@mui/material/styles';
import { Box, Tab, Tabs } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import { DEFAULT_FIELDS, DEFAULT_SETTINGS } from '../../constants/UserProfile';
import PublicInfo from './Section/PublicInfo';
import Account from './Section/Account';
import Settings from './Section/Settings';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-root`,
    tabs: `${PREFIX}-tabs`,
    tabContent: `${PREFIX}-tab-content`,
    publicInfo: `${PREFIX}-public-info`,
    account: `${PREFIX}-account`,
    settings: `${PREFIX}-settings`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 * > API documentation for the Community-JS User Profile Edit component. Learn about the available props and the CSS API.
 *
 *
 * This component renders a section composed of different tabs where the user can edit the settings about its public information, account and notifications.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UserProfileEdit)

 #### Import

 ```jsx
 import {UserProfileEdit} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCUserProfileEdit` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCUserProfileEdit-root|Styles applied to the root element.|
 |tabs|.SCUserProfileEdit-tabs|Styles applied to the tab elements.|
 |tabsContent|.SCUserProfileEdit-tabs-content|Styles applied to tab content elements.|

 * @param inProps
 */
export default function UserProfileEdit(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { id = null, className = null, fields = [...DEFAULT_FIELDS], settings = [...DEFAULT_SETTINGS], UserProfileEditSectionPublicInfoProps = {}, UserProfileEditSectionAccountProps = {
        showCredentialsSection: true,
        showSocialAccountSection: true
    }, UserProfileEditSectionSettingsProps = {} } = props, rest = __rest(props, ["id", "className", "fields", "settings", "UserProfileEditSectionPublicInfoProps", "UserProfileEditSectionAccountProps", "UserProfileEditSectionSettingsProps"]);
    // STATE
    const [tab, setTab] = React.useState(0);
    const handleChange = (event, newValue) => {
        setTab(newValue);
    };
    // RENDER
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, variant: "scrollable", scrollButtons: "auto", allowScrollButtonsMobile: true }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.info", defaultMessage: "ui.userProfileEdit.info" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.account", defaultMessage: "ui.userProfileEdit.account" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.notification", defaultMessage: "ui.userProfileEdit.notification" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && _jsx(PublicInfo, Object.assign({ className: classes.publicInfo, fields: fields }, UserProfileEditSectionPublicInfoProps)), tab === 1 && _jsx(Account, Object.assign({ className: classes.account }, UserProfileEditSectionAccountProps)), tab === 2 && _jsx(Settings, Object.assign({ settings: settings, className: classes.settings }, UserProfileEditSectionSettingsProps))] }))] })));
}