Skip to content

Commit

Permalink
update: v0.1.2
Browse files Browse the repository at this point in the history
  • Loading branch information
hibiki-matsumoto committed Dec 2, 2023
1 parent 98ac345 commit 00d3512
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 208 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mycel-widget",
"version": "0.1.1",
"version": "0.1.2",
"type": "module",
"description": "Widget powered by mycel",
"main": "./dist/index.umd.cjs",
Expand Down
92 changes: 46 additions & 46 deletions src/UI/Drawer/Drawer.tsx
Original file line number Diff line number Diff line change
@@ -1,88 +1,88 @@
import React from 'react';
import { styled } from '../../theme';
import { CloseIcon } from '../Icon';
import { Typography } from '../Typography';
import { createPortal } from 'react-dom';
import React from "react";
import { styled } from "../../theme";
import { CloseIcon } from "../Icon";
import { Typography } from "../Typography";
import { createPortal } from "react-dom";

export interface PropTypes {
title?: string;
open: boolean;
onClose: () => void;
content: React.ReactNode;
containerStyle?: React.CSSProperties;
anchor?: 'bottom' | 'left' | 'right' | 'top';
anchor?: "bottom" | "left" | "right" | "top";
showClose?: boolean;
footer?: React.ReactNode;
container: Element | null;
}

const BackDrop = styled('div', {
position: 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%',
const BackDrop = styled("div", {
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "100%",
zIndex: 9999999,
backgroundColor: 'rgba(0,0,0,.1)',
borderRadius: '$10',
backgroundColor: "rgba(0,0,0,.1)",
borderRadius: "$10",
});

const DrawerContainer = styled('div', {
position: 'absolute',
boxShadow: '$s',
background: '$background',
padding: '$20',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
const DrawerContainer = styled("div", {
position: "absolute",
boxShadow: "$s",
background: "$background",
padding: "$20",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
zIndex: 9999999,
borderRadius: '$10',
borderRadius: "$10",

variants: {
anchor: {
left: {
top: 0,
left: 0,
height: '100%',
minWidth: '300px',
maxWidth: '90%',
height: "100%",
minWidth: "300px",
maxWidth: "90%",
},
right: {
top: 0,
right: 0,
height: '100%',
minWidth: '300px',
maxWidth: '90%',
height: "100%",
minWidth: "300px",
maxWidth: "90%",
},
bottom: {
bottom: 0,
width: '100%',
maxHeight: '90%',
width: "100%",
maxHeight: "90%",
},
top: {
top: 0,
width: '100%',
maxHeight: '90%',
width: "100%",
maxHeight: "90%",
},
},
},
});

const DrawerHeader = styled('div', {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
position: 'relative',
marginBottom: '$16',
const DrawerHeader = styled("div", {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
position: "relative",
marginBottom: "$16",
});

const Body = styled('div', {
overflowY: 'auto',
height: '100%',
const Body = styled("div", {
overflowY: "auto",
height: "100%",
});
const Footer = styled('footer', {
width: '100%',
marginTop: '$28',
const Footer = styled("footer", {
width: "100%",
marginTop: "$28",
});

export function Drawer(props: PropTypes) {
Expand All @@ -92,7 +92,7 @@ export function Drawer(props: PropTypes) {
open,
onClose,
containerStyle,
anchor = 'bottom',
anchor = "bottom",
showClose = false,
footer,
container,
Expand Down
Loading

0 comments on commit 00d3512

Please sign in to comment.