BottomSheet 底部滑出

docs/docs/components-apis/bottomSheet.mdx

@@ -0,0 +1,28 @@
+---
+id: bottomSheet
+title: BottomSheet
+---
+
+BottomSheet 底部滑出组件。
+
+## 引用方式
+
+```tsx
+import BottomSheet from '@sinoui/core/BottomSheet';
+```
+
+## API
+
+BottomSheet 组件属性：
+
+| 参数名称           | 参数类型        | 默认值 | 说明                         |
+| ------------------ | --------------- | ------ | ---------------------------- |
+| open               | boolean         | false  | 是否显示                     |
+| backdropClick      | boolean         | true   | 是否响应点击遮罩层事件       |
+| onBackdropClick    | ()=>void        |        | 点击遮罩层事件触发的回调函数 |
+| transitionDuration | number          | 300    | 动画延长时间                 |
+| color              | string          |        | 指定背景颜色                 |
+| children           | React.ReactNode |        | 子元素                       |
+| className          | string          |        | 添加自定义类名               |
+
+更多使用示例，请参考[BottomSheet Demos](/docs/components/bottomSheet)

docs/docs/components-apis/dialog.mdx

@@ -0,0 +1,88 @@
+---
+id: dialog
+title: Dialog
+---
+
+弹窗。
+
+## Dialog
+
+包裹整个弹窗的根组件。
+
+引用方式：
+
+```tsx
+import Dialog from '@sinoui/core/Dialog';
+```
+
+Dialog 组件属性：
+
+| 参数名称        | 参数类型        | 默认值 | 说明                     |
+| --------------- | --------------- | ------ | ------------------------ |
+| children        | React.ReactNode |        | 子元素                   |
+| open            | boolean         | false  | 是否显示 Dialog          |
+| backdrop        | boolean         | true   | 是否显示遮罩层           |
+| showCloseIcon   | boolean         | false  | 是否显示关闭图标         |
+| onRequestClose  | ()=>void        |        | 点击关闭按钮的回调函数   |
+| draggable       | boolean         | true   | 是否弹窗可以拖拽         |
+| backdropClick   | boolean         | false  | 是否开启遮罩层的点击事件 |
+| onBackdropClick | ()=>void        |        | 点击遮罩层的回调函数     |
+| absolute        | boolean         | false  | 布局方式                 |
+| fullScreen      | boolean         | false  | 设置全屏显示             |
+| fullWidth       | boolean         | false  | 设置最大宽度显示         |
+| autoWidth       | boolean         | false  | 设置宽度自适应           |
+| className       | string          |        | 自定义类名               |
+
+## DialogTitle
+
+弹窗标题组件。
+
+引用方式：
+
+```tsx
+import DialogTitle from '@sinoui/core/DialogTitle';
+```
+
+DialogTitle 组件属性：
+
+| 参数名称  | 参数类型        | 默认值 | 说明       |
+| --------- | --------------- | ------ | ---------- |
+| children  | React.ReactNode |        | 子元素     |
+| className | string          |        | 自定义类名 |
+
+## DialogContent
+
+弹窗内容组件。
+
+引用方式：
+
+```tsx
+import DialogContent from '@sinoui/core/DialogContent';
+```
+
+DialogContent 组件属性：
+
+| 参数名称  | 参数类型        | 默认值 | 说明       |
+| --------- | --------------- | ------ | ---------- |
+| children  | React.ReactNode |        | 子元素     |
+| className | string          |        | 自定义类名 |
+
+## DialogActions
+
+弹窗按钮组件。
+
+引用方式：
+
+```tsx
+import DialogActions from '@sinoui/core/DialogActions';
+```
+
+DialogActions 组件属性：
+
+| 参数名称  | 参数类型        | 默认值 | 说明         |
+| --------- | --------------- | ------ | ------------ |
+| children  | React.ReactNode |        | 子元素       |
+| column    | boolean         | false  | 是否垂直显示 |
+| className | string          |        | 自定义类名   |
+
+更多示例，请参考[Dialog Demos](/docs/components/Dialog)

docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import Button from '@sinoui/core/Button';
+import BottomSheet from '@sinoui/core/BottomSheet';
+import List from '@sinoui/core/List';
+import ListItem from '@sinoui/core/ListItem';
+import ListItemText from '@sinoui/core/ListItemText';
+import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
+import SvgIcon from '@sinoui/core/SvgIcon';
+import { MdShare, MdInsertLink, MdModeEdit, MdDelete } from 'react-icons/md';
+
+const listData = [
+  { icon: MdShare, text: 'Share' },
+  { icon: MdInsertLink, text: 'Get link' },
+  { icon: MdShare, text: 'Share' },
+  { icon: MdModeEdit, text: 'Edit name' },
+  { icon: MdDelete, text: 'Delete collection' },
+];
+
+const listScrollData = listData.concat(listData, listData);
+
+const Content = (props: any) => {
+  const { data, onClick } = props;
+  return (
+    <List>
+      {data.map((item: any, index: number) => (
+        <React.Fragment key={index.toString()}>
+          <ListItem onClick={onClick}>
+            <ListItemPrimaryAction>
+              <SvgIcon as={item.icon} color="textSecondary" />
+            </ListItemPrimaryAction>
+            <ListItemText>{item.text}</ListItemText>
+          </ListItem>
+        </React.Fragment>
+      ))}
+    </List>
+  );
+};
+
+function BottomSheetDemo(props: any) {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+
+  const { backdrop: backdropProps, listScroll } = props;
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <div style={{ width: '300px' }}>
+        <Button onClick={onClick}>CLICK</Button>
+        <BottomSheet
+          open={open}
+          onBackdropClick={onBackdropClick}
+          backdrop={backdropProps}
+          {...props}
+        >
+          <Content
+            onClick={onItemClick}
+            data={listScroll ? listScrollData : listData}
+          />
+        </BottomSheet>
+      </div>
+    </ThemeProvider>
+  );
+}
+
+export default BottomSheetDemo;

docs/docs/components/bottomSheet.mdx

@@ -0,0 +1,135 @@
+---
+id: bottomSheet
+title: bottomSheet 底部滑出
+---
+
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import BottomSheet from '@sinoui/core/BottomSheet';
+import BottomSheetDemo from './bottomSheet-demos/BottomSheetDemo';
+
+## 基本使用
+
+```tsx
+import BottomSheet from '@sinoui/core/BottomSheet';
+
+const listData = [
+  { icon: MdShare, text: 'Share' },
+  { icon: MdInsertLink, text: 'Get link' },
+  { icon: MdShare, text: 'Share' },
+  { icon: MdModeEdit, text: 'Edit name' },
+  { icon: MdDelete, text: 'Delete collection' },
+];
+
+const Content = (props: any) => {
+  return (
+    <List>
+      {listData.map((item: any, index) => (
+        <React.Fragment key={index.toString()}>
+          <ListItem onClick={props.onClick}>
+            <ListItemPrimaryAction>
+              <SvgIcon as={item.icon} color="textSecondary" />
+            </ListItemPrimaryAction>
+            <ListItemText>{item.text}</ListItemText>
+          </ListItem>
+        </React.Fragment>
+      ))}
+    </List>
+  );
+};
+
+function BottomSheetDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open} onBackdropClick={onBackdropClick}>
+        <Content onClick={onItemClick} />
+      </BottomSheet>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<BottomSheetDemo />
+
+## 内容超出屏幕一半显示滚动条
+
+```tsx
+import BottomSheet from '@sinoui/core/BottomSheet';
+
+const listData = [
+  { icon: MdShare, text: 'Share' },
+  { icon: MdInsertLink, text: 'Get link' },
+  { icon: MdShare, text: 'Share' },
+  { icon: MdModeEdit, text: 'Edit name' },
+  { icon: MdDelete, text: 'Delete collection' },
+];
+
+const listScrollData = listData.concat(listData, listData);
+
+const Content = (props: any) => {
+  return (
+    <List>
+      {listScrollData.map((item: any, index) => (
+        <React.Fragment key={index.toString()}>
+          <ListItem onClick={props.onClick}>
+            <ListItemPrimaryAction>
+              <SvgIcon as={item.icon} color="textSecondary" />
+            </ListItemPrimaryAction>
+            <ListItemText>{item.text}</ListItemText>
+          </ListItem>
+        </React.Fragment>
+      ))}
+    </List>
+  );
+};
+
+function BottomSheetDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open} onBackdropClick={onBackdropClick}>
+        <Content onClick={onItemClick} />
+      </BottomSheet>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<BottomSheetDemo listScroll />
+
+## API
+
+查看[BottomSheet 组件 API](/docs/components-apis/bottomSheet)

docs/docs/components/dialog-demos/DialogDemo.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+export default function DialogDemo(props: any) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>CLICK</Button>
+      <Dialog
+        open={open}
+        {...props}
+        onRequestClose={() => props.onRequestClose && setOpen(false)}
+        onBackdropClick={() => props.onBackdropClick && setOpen(false)}
+      >
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}