UNPKG

@selfcommunity/react-ui

Version:

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

69 lines (64 loc) 2.38 kB
import { __rest } from "tslib"; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import React, { useContext } from 'react'; import { useThemeProps } from '@mui/system'; import { styled } from '@mui/material/styles'; import Dialog from '@mui/material/Dialog'; import ConsentSolution from '../ConsentSolution'; import { Button } from '@mui/material'; import { FormattedMessage } from 'react-intl'; import { SCUserContext } from '@selfcommunity/react-core'; const PREFIX = 'SCConsentSolutionButton'; const classes = { root: `${PREFIX}-root` }; const Root = styled(Dialog, { name: PREFIX, slot: 'Root', overridesResolver: (props, styles) => styles.root })(({ theme }) => ({})); /** *> API documentation for the Community-JS ConsentSolutionButton component. Learn about the available props and the CSS API. * #### Import ```jsx import {ConsentSolutionButton} from '@selfcommunity/react-ui'; ``` #### Component Name The name `SCConsentSolutionButton` can be used when providing style overrides in the theme. #### CSS |Rule Name|Global class|Description| |---|---|---| |root|.SCConsentSolution-root|Styles applied to the root element.| * @param inProps */ export default function ConsentSolutionButton(inProps) { //PROPS const props = useThemeProps({ props: inProps, name: PREFIX }); const { className, ConsentSolutionProps = {} } = props, rest = __rest(props, ["className", "ConsentSolutionProps"]); // CONTEXT const scUserContext = useContext(SCUserContext); // STATE const [open, setOpen] = React.useState(false); // CONST const authUserId = scUserContext.user ? scUserContext.user.id : null; /** * Handle click on button */ const handleClick = () => { setOpen((p) => !p); }; /** * If there's no authUserId, component is hidden. */ if (!authUserId) { return null; } /** * Renders root object */ return (_jsxs(React.Fragment, { children: [_jsx(Button, Object.assign({ onClick: handleClick, size: "small", variant: "outlined" }, rest, { children: _jsx(FormattedMessage, { id: "ui.consentSolutionButton.viewStateButton", defaultMessage: "ui.consentSolutionButton.viewStateButton" }) })), open && _jsx(ConsentSolution, Object.assign({}, ConsentSolutionProps, { open: true, onClose: handleClick }))] })); }