forked from mui/material-ui
/
Sheet.tsx
124 lines (113 loc) · 3.8 KB
/
Sheet.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { unstable_composeClasses as composeClasses } from '@mui/base';
import { OverridableComponent } from '@mui/types';
import { unstable_capitalize as capitalize } from '@mui/utils';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import * as React from 'react';
import { useThemeProps } from '../styles';
import styled from '../styles/styled';
import { resolveSxValue } from '../styles/styleUtils';
import { getSheetUtilityClass } from './sheetClasses';
import { SheetProps, SheetTypeMap } from './SheetProps';
const useUtilityClasses = (ownerState: SheetProps) => {
const { variant, color } = ownerState;
const slots = {
root: [
'root',
variant && `variant${capitalize(variant)}`,
color && `color${capitalize(color)}`,
],
};
return composeClasses(slots, getSheetUtilityClass, {});
};
const SheetRoot = styled('div', {
name: 'JoySheet',
slot: 'Root',
overridesResolver: (props, styles) => styles.root,
})<{ ownerState: SheetProps }>(({ theme, ownerState }) => {
const variantStyle = theme.variants[ownerState.variant!]?.[ownerState.color!];
const childRadius = resolveSxValue({ theme, ownerState }, 'borderRadius');
return [
{
'--List-item-stickyBackground':
variantStyle?.backgroundColor ||
variantStyle?.background ||
theme.vars.palette.background.body, // for sticky List
'--List-radius': `calc(${childRadius} - var(--variant-borderWidth, 0px))`,
'--internal-action-radius': childRadius,
// TODO: discuss the theme transition.
// This value is copied from mui-material Sheet.
transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
backgroundColor: theme.vars.palette.background.body,
position: 'relative',
},
variantStyle,
];
});
const Sheet = React.forwardRef(function Sheet(inProps, ref) {
const props = useThemeProps<typeof inProps & SheetProps>({
props: inProps,
name: 'JoySheet',
});
const { className, color = 'neutral', component = 'div', variant = 'plain', ...other } = props;
const ownerState = {
...props,
color,
component,
variant,
};
const classes = useUtilityClasses(ownerState);
return (
<SheetRoot
as={component}
ownerState={ownerState}
className={clsx(classes.root, className)}
ref={ref}
{...other}
/>
);
}) as OverridableComponent<SheetTypeMap>;
Sheet.propTypes /* remove-proptypes */ = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
* @default 'neutral'
*/
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
PropTypes.string,
]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
PropTypes.func,
PropTypes.object,
]),
/**
* The variant to use.
* @default 'plain'
*/
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
PropTypes.string,
]),
} as any;
export default Sheet;