@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
64 lines (55 loc) • 3.25 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled } from '@mui/material/styles';
import { Box, ButtonBase, Typography } from '@mui/material';
import classNames from 'classnames';
import Widget from '../../components/Widget';
import { useThemeProps } from '@mui/system';
const PREFIX = 'SCBaseItemButton';
const classes = {
root: `${PREFIX}-root`,
withActions: `${PREFIX}-with-actions`,
content: `${PREFIX}-content`,
image: `${PREFIX}-image`,
text: `${PREFIX}-text`,
primary: `${PREFIX}-primary`,
secondary: `${PREFIX}-secondary`,
actions: `${PREFIX}-actions`
};
const Root = styled(Widget, {
name: PREFIX,
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
/**
* > API documentation for the Community-JS BaseItemButton component. Learn about the available props and the CSS API.
#### Import
```jsx
import {BaseItemButton} from '@selfcommunity/react-ui';
```
#### Component Name
The name `BaseItemButton` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCBaseItemButton-root|Styles applied to the root element.|
|content|.SCBaseItemButton-content|Styles applied to the content element.|
|image|.SCBaseItemButton-image|Styles applied to image section.|
|text|.SCBaseItemButton-text|Styles applied to text section.|
|primary|.SCBaseItemButton-primary|Styles applied to primary section.|
|secondary|.SCBaseItemButton-secondary|Styles applied to secondary section.|
|actions|.SCBaseItemButton-actions|Styles applied to actions section.|
* @param inProps
*/
export default function BaseItemButton(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { id = null, className = null, ButtonBaseProps = {}, image = null, disableTypography = false, primary = null, primaryTypographyProps = { component: 'span', variant: 'body1' }, secondary = null, secondaryTypographyProps = { component: 'p', variant: 'body2' }, actions = null } = props, rest = __rest(props, ["id", "className", "ButtonBaseProps", "image", "disableTypography", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps", "actions"]);
// RENDER
return (_jsxs(Root, Object.assign({ id: id }, rest, { className: classNames(classes.root, className, { [classes.withActions]: Boolean(actions) }) }, { children: [_jsxs(ButtonBase, Object.assign({ className: classes.content }, ButtonBaseProps, { children: [image && _jsx(Box, Object.assign({ className: classes.image }, { children: image })), _jsxs(Box, Object.assign({ className: classes.text }, { children: [primary &&
(disableTypography ? (primary) : (_jsx(Typography, Object.assign({ className: classes.primary }, primaryTypographyProps, { children: primary })))), secondary &&
(disableTypography ? (secondary) : (_jsx(Typography, Object.assign({ className: classes.secondary }, secondaryTypographyProps, { children: secondary }))))] }))] })), actions && _jsx(Box, Object.assign({ className: classes.actions }, { children: actions }))] })));
}