Skip to content

Commit

Permalink
feat(Drawer): add new component Drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
@youluna
youluna committed Aug 7, 2019
1 parent 57f7b2f commit 2ca6f17
Show file tree
Hide file tree
Showing 17 changed files with 705 additions and 2 deletions.
67 changes: 67 additions & 0 deletions docs/drawer/demo/basic.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
# 基本

- order: 0

第一个抽屉

:::lang=en-us
# Basic

- order: 0

First drawer
:::
---

````jsx
import { Radio, Button, Drawer } from '@alifd/next';

class Demo extends React.Component {
state = {
visible: false,
placement: 'right'
};

onOpen = () => {
this.setState({
visible: true
});
};

onVisibleChange = (visible, reason, e) => {
console.log(reason, visible);

this.setState({
visible
});
};

onPlacementChange = dir => {
this.setState({
placement: dir
});
}

render() {
return (
<div>
<Radio.Group
dataSource={['right', 'bottom', 'left', 'top']}
defaultValue={'right'}
onChange={this.onPlacementChange}
/> &nbsp;&nbsp;&nbsp;&nbsp;
<Button type="primary" onClick={this.onOpen}> open </Button>
<Drawer
id="tessss"
visible={this.state.visible}
placement={this.state.placement}
onVisibleChange={this.onVisibleChange}>
Start your business here by searching a popular product
</Drawer>
</div>
);
}
}

ReactDOM.render(<Demo />, mountNode);
````
63 changes: 63 additions & 0 deletions docs/drawer/demo/select.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# 抽屉式选择

- order: 1

将 Select 的弹出模式换成 Drawer

:::lang=en-us
# Drawer Select

- order: 1

Select width drawer
:::
---

````jsx
import { Radio, Drawer, Select } from '@alifd/next';

const Option = Select.Option;

const onChange = function (value) {
console.log(value);
};
const onBlur = function (e) {
console.log(/onblur/,e);
};

const onToggleHighlightItem = function (item, type) {
console.log(item, type);
};

class Demo extends React.Component {
state = {
placement: 'right'
};

onPlacementChange = dir => {
this.setState({
placement: dir
});
}

render() {
return (
<div>
<Radio.Group
dataSource={['right', 'bottom', 'left', 'top']}
defaultValue={'right'}
onChange={this.onPlacementChange}
/> &nbsp;&nbsp;&nbsp;&nbsp;

<Select id="basic-demo" popupProps={{placement: this.state.placement }} onChange={onChange} onBlur={onBlur} onToggleHighlightItem={onToggleHighlightItem} defaultValue="jack" aria-label="name is" showSearch hasClear>
<Option value="jack">Jack</Option>
<Option value="frank">Frank</Option>
<Option value="hugo">Hugo</Option>
</Select>
</div>
);
}
}

ReactDOM.render(<Demo />, mountNode);
````
37 changes: 37 additions & 0 deletions docs/drawer/index.en-us.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
# Drawer

- chinese: 抽屉
- family: Feedback
- category: Components
- type: 弹层

---

## Guide

## When To Use

The Drawer is used to provide the user with an auxiliary window for quickly performing a simple operation, confirming user information, or providing a feedback prompt without leaving the main path.

## API

### Drawer

| Param | Descripiton | Type | Default Value |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | --------------------------------------------------------------------------------- |
| trigger | trigger the overlay to show or hide elements | ReactElement | - |
| triggerType | trigger the overlay to show or hide operations, either 'click', 'hover', 'focus', or an array of them, such as ['hover', 'focus'] | String/Array | 'hover' |
| visible | whether the overlay is visiible currently | Boolean | - |
| animation | configure animation, support the {in: 'enter-class', out: 'leave-class' } object parameters, if set to false, do not play the animation. Refer to `Animate` component documentation for available animations. | Object/Boolean | { in: 'expandInDown', out: 'expandOutUp' } |
| hasMask | whether to show the mask | Boolean | false |
| closeable | controls how the dialog is closed. The value can be either a String or Boolean, where the string consists of the following values: <br>**close** clicking the close button can close the dialog <br>**mask** clicking the mask can close the dialog <br>**esc** pressing the esc key can close the dialog <br> such as 'close' or 'close,esc,mask'<br>If set to true, all of the above close methods take effect <br>If set to false, all of the above close methods will fail | String/Boolean | 'esc,close' |
| onVisibleChange | callback function triggered when the ovlery is visible or hidden<br><br>**signatures**:<br>Function(visible: Boolean, type: String, e: Object) => void<br>**params**:<br>_visible_: {Boolean} whether the overlay is visible<br>_type_: {String} the reason that triggers the overlay to show or hide<br>_e_: {Object} DOM event | Function | func.noop |
| placement | placement of the drawer <br><br>**options**:<br>'top', 'right', 'bottom', 'left' | Enum | 'right' |

## ARIA and Keyboard

| Keyboard | Descripiton |
| :-------- | :--------------------------------------- |
| esc | pressing ESC will close dialog |
| tab | focus on any element that can be focused, the focus remains in the dialog when the dialog is displayed |
| shift+tab | back focus on any element that can be focused, the focus remains in the dialog when the dialog is displayed |
39 changes: 39 additions & 0 deletions docs/drawer/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# Drawer

- chinese: 抽屉
- family: Feedback
- category: Components
- type: 弹层

---

## 使用指南

抽屉

### 何时使用

抽屉是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。

## API

### Drawer

| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------- |
| trigger | 触发弹层显示或隐藏的元素 | ReactElement | null |
| triggerType | 触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，'focus'，或者它们组成的数组，如 ['hover', 'focus'] | String/Array | 'click' |
| visible | 是否显示 | Boolean | - |
| hasMask | 是否显示遮罩 | Boolean | true |
| closeable | 控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：<br>**mask** 表示点击遮罩区域可以关闭对话框<br>**esc** 表示按下 esc 键可以关闭对话框<br>如 'mask' 或 'esc,mask'<br>如果设置为 true，则以上关闭方式全部生效<br>如果设置为 false，则以上关闭方式全部失效 | String/Boolean | true |
| placement | 位于页面的位置<br><br>**可选值**:<br>'top', 'right', 'bottom', 'left' | Enum | 'right' |
| onVisibleChange | 弹层显示或隐藏时触发的回调<br><br>**签名**:<br>Function(visible: Boolean, type: String) => void<br>**参数**:<br>_visible_: {Boolean} 弹层是否显示<br>_type_: {String} 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发 | Function | - |
| animation | 显示隐藏时动画的播放方式 | Object/Boolean | - |

## ARIA and Keyboard

| 键盘 | 说明 |
| :-------- | :--------------------------------------- |
| esc | 按下ESC键将会关闭dialog而不触发任何的动作 |
| tab | 正向聚焦到任何可以被聚焦的元素， 在Dialog显示的时候，焦点始终保持在框体内 |
| shift+tab | 反向聚焦到任何可以被聚焦的元素，在Dialog显示的时候，焦点始终保持在框体内 |
1 change: 1 addition & 0 deletions index-noreset.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
@import "lib/config-provider/index.scss";
@import "lib/date-picker/index.scss";
@import "lib/dialog/index.scss";
@import "lib/drawer/index.scss";
@import "lib/dropdown/index.scss";
@import "lib/field/index.scss";
@import "lib/form/index.scss";
Expand Down
1 change: 1 addition & 0 deletions scripts/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ module.exports = {
'core',
'date-picker',
'dialog',
'drawer',
'dropdown',
'field',
'form',
Expand Down
Loading

0 comments on commit 2ca6f17

Please sign in to comment.