Skip to content

Commit

Permalink
feat(sheet): new Sheet modal component
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 27, 2021
1 parent 79c323e commit 15af2f7
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 0 deletions.
76 changes: 76 additions & 0 deletions src/react/components/Sheet.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React from 'react';
import { cls } from '../shared/cls.js';
import { positionClass } from '../shared/position-class.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';

const Sheet = (props) => {
const {
component = 'div',
className,
colors: colorsProp,

opened,
backdrop = true,
onBackdropClick,

ios,
material,

// Children
children,

// Rest
...rest
} = props;

const state = opened ? 'opened' : 'closed';

const Component = component;

const attrs = {
...rest,
};

const colors = {
bg: 'bg-white dark:bg-black',
...colorsProp,
};

const themeClasses = useThemeClasses({ ios, material });

const c = themeClasses(
{
base: {
common: cls(
'left-0 top-full transition-transform duration-400 z-40 overflow-hidden',
colors.bg,
positionClass('fixed', className)
),
ios: '',
material: 'shadow-2xl',
opened: '-translate-y-full',
closed: '',
},
backdrop: {
common:
'fixed z-40 w-full h-full left-0 top-0 bg-black bg-opacity-50 duration-400',
opened: '',
closed: 'opacity-0 pointer-events-none',
},
},
className
);

return (
<>
{backdrop && (
<div className={c.backdrop[state]} onClick={onBackdropClick} />
)}
<Component className={c.base[state]} {...attrs}>
{children}
</Component>
</>
);
};

export default Sheet;
2 changes: 2 additions & 0 deletions src/react/tailwind-mobile-react.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import Radio from './components/Radio.jsx';
import Range from './components/Range.jsx';
import Segmented from './components/Segmented.jsx';
import SegmentedButton from './components/SegmentedButton.jsx';
import Sheet from './components/Sheet.jsx';
import Stepper from './components/Stepper.jsx';
import Tabbar from './components/Tabbar.jsx';
import TabbarLink from './components/TabbarLink.jsx';
Expand Down Expand Up @@ -75,6 +76,7 @@ export {
Range,
Segmented,
SegmentedButton,
Sheet,
Stepper,
Tabbar,
TabbarLink,
Expand Down

0 comments on commit 15af2f7

Please sign in to comment.