New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add new component : Drawer #10791

Merged
merged 46 commits into from Jul 13, 2018

Conversation

Projects
None yet
@chenshuai2144
Contributor

chenshuai2144 commented Jun 5, 2018

look #8898 and #10488

@yesmeck

This comment has been minimized.

Member

yesmeck commented Jun 5, 2018

@ant-design-bot

This comment has been minimized.

ant-design-bot commented Jun 5, 2018

Deploy preview for ant-design ready!

Built with commit 65eedf3

https://deploy-preview-10791--ant-design.netlify.com

| React.MouseEvent<HTMLDivElement>
| React.MouseEvent<HTMLButtonElement>;

export interface IDrawerProps {

This comment has been minimized.

@yesmeck

yesmeck Jun 5, 2018

Member

不要 I

This comment has been minimized.

@chenshuai2144

chenshuai2144 Jun 5, 2018

Contributor

I才是对的

This comment has been minimized.

@yesmeck

yesmeck Jun 5, 2018

Member

按已有的风格来

@jljsj33

This comment has been minimized.

Member

jljsj33 commented Jun 6, 2018

依赖改成 "rc-drawer": "~1.2.0"

@codecov

This comment has been minimized.

codecov bot commented Jun 6, 2018

Codecov Report

Merging #10791 into feature-3.7.0 will decrease coverage by 0.05%.
The diff coverage is 86%.

Impacted file tree graph

@@                Coverage Diff                @@
##           feature-3.7.0   #10791      +/-   ##
=================================================
- Coverage          91.81%   91.76%   -0.06%     
=================================================
  Files                197      199       +2     
  Lines               4950     5000      +50     
  Branches            1387     1401      +14     
=================================================
+ Hits                4545     4588      +43     
- Misses               401      407       +6     
- Partials               4        5       +1
Impacted Files Coverage Δ
components/index.tsx 100% <ø> (ø) ⬆️
components/_util/isNumeric.ts 100% <100%> (ø)
components/drawer/index.tsx 85.41% <85.41%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4ed7872...65eedf3. Read the comment docs.

| width | Width of the Drawer dialog | string\|number | 520 |
| wrapClassName | The class name of the container of the Drawer dialog | string | - |
| zIndex | The `z-index` of the Drawer | Number | 1000 |
| placement | The direction of the Drawer | 'left' | 'right' | 'left'

This comment has been minimized.

@afc163

afc163 Jun 6, 2018

Member

默认应该是 right 吧?

@@ -0,0 +1,146 @@
import * as React from 'react';
import RcDrawer from 'rc-drawer-menu';
import { isNull, isNumber } from 'util';

This comment has been minimized.

@afc163

afc163 Jun 6, 2018

Member

util 是啥依赖,貌似不存在。

This comment has been minimized.

@chenshuai2144

chenshuai2144 Jun 6, 2018

Contributor

是 node.js 的库之一。为了补全 js 的缺陷搞出来的,只要是 node 环境就有的。打包的时候回自动打包进去

This comment has been minimized.

@afc163

afc163 Jun 6, 2018

Member

不能这么用,前端不能用 node 的库

This comment has been minimized.

@picodoth

picodoth Jun 7, 2018

Contributor

lodash了解一下?

This comment has been minimized.

@yesmeck

yesmeck Jun 7, 2018

Member

其实没必要做类型判断,已经有 PropType 和 TS 的类型约束了了。

This comment has been minimized.

@chenshuai2144

chenshuai2144 Jun 7, 2018

Contributor

就是为了不到入库才用的这个,node 的这些是可以在前端中使用的,和lodash差不多

@chenshuai2144 chenshuai2144 force-pushed the drawer branch 2 times, most recently from 427419f to e59acba Jun 6, 2018

@@ -60,7 +59,7 @@ export default class Drawer extends React.Component<
prevState: IDrawerState,
) {
const nextState: IDrawerState = {};
if (!isNull(nextProps.visible) && nextProps.visible !== prevState.visible) {
if (nextProps.visible !== null && nextProps.visible !== prevState.visible) {

This comment has been minimized.

@afc163

afc163 Jun 7, 2018

Member

nextProps.visible !== undefined

@@ -72,7 +71,7 @@ export default class Drawer extends React.Component<
};
}
close = (e: EventType) => {
if (!isNull(this.props.visible)) {
if (this.props.visible !== null) {

This comment has been minimized.

@afc163

afc163 Jun 7, 2018

Member

undefined

## When To Use

* Create or edit an object.
* Carrying subtasks. In order to keep the subtasks still in the context of the main task, the subtasks are too complex for the Bubble Popover to use large drawers to carry.

This comment has been minimized.

@picodoth

picodoth Jun 7, 2018

Contributor

still

showMask={this.props.mask}
placement={this.props.placement}
style={{ zIndex: zIndex }}

This comment has been minimized.

@picodoth

picodoth Jun 7, 2018

Contributor

空行

onMaskClick={this.close}
showMask={this.props.mask}
placement={this.props.placement}
style={{ zIndex: zIndex }}

This comment has been minimized.

@afc163

afc163 Jun 7, 2018

Member

zIndex 简写。

onMaskClick={this.close}
showMask={this.props.mask}
placement={this.props.placement}
style={{ zIndex: zIndex }}

This comment has been minimized.

@picodoth

picodoth Jun 7, 2018

Contributor

style={{ zIndex }}

| mask | 是否展示遮罩 | Boolean | true |
| maskStyle | 遮罩样式 | object | {} |
| style | 可用于设置 Drawer 的样式,调整浮层位置等 | object | - |
| title | 标题 | string \| ReactNode | 无 |

This comment has been minimized.

@afc163

afc163 Jun 7, 2018

Member

无都写成 - 吧。

left: 0;
bottom: 0;
display: none;
background-color: #373737;

This comment has been minimized.

@afc163

afc163 Jun 7, 2018

Member

这个可以删掉。

title: Drawer
---

A drawer is a panel that is overlaid on a parent form and slides in from the outside of the parent form's border to carry information or action collections. The drawer interacts without leaving the parent form, and the user is in context and can handle tasks more easily and clearly.

This comment has been minimized.

@picodoth

picodoth Jun 7, 2018

Contributor

这里用form好么,form一般指表单吧?我觉得要不然用panel吧

}
}
&.@{dawer-prefix-cls}-open {
& .@{dawer-prefix-cls} {

This comment has been minimized.

@picodoth

picodoth Jun 7, 2018

Contributor

前面需要这个&么?

This comment has been minimized.

@afc163

afc163 Jul 13, 2018

Member

这个 & 是多余的吧

@@ -0,0 +1,5 @@
import '../../style/index.less';
import './index.less';

This comment has been minimized.

@picodoth

picodoth Jun 7, 2018

Contributor

这个地方为啥不一起把components/drawer/style/index.less里的东西都import进来?

This comment has been minimized.

@chenshuai2144

chenshuai2144 Jun 27, 2018

Contributor

这个是为了换主题功能 拆分了一堆出来


## API

| 参数 | 说明 | 类型 | 默认值 |

This comment has been minimized.

@picodoth

picodoth Jun 7, 2018

Contributor

Property Description Type Default

| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not | boolean | true |
| destroyOnClose | Whether to unmount child compenents on onClose | boolean | false |
| getContainer | Return the mount node for Drawer | (instance): HTMLElement | () => document.body |
| mask | Whether show mask or not. | Boolean | true |

This comment has been minimized.

@picodoth

picodoth Jun 7, 2018

Contributor

Whether to show ...

| mask | Whether show mask or not. | Boolean | true |
| maskClosable | Whether to close the Drawer dialog when the mask (area outside the Drawer) is clicked | boolean | true |
| maskStyle | Style for Drawer's mask element. | object | {} |
| style | Style of floating layer, typically used at least for adjusting the position. | object | - |

This comment has been minimized.

@picodoth

picodoth Jun 7, 2018

Contributor

at least

@yoyo837

This comment has been minimized.

Contributor

yoyo837 commented Jun 12, 2018

Waiting for this to be merged.

@chenshuai2144 chenshuai2144 force-pushed the drawer branch 2 times, most recently from 05d9850 to fd1eabf Jun 18, 2018

@@ -34,7 +33,7 @@ class DrawerTester extends React.Component {
}

describe('Drawer', () => {
it('render correctly', () => {
fit('render correctly', () => {

This comment has been minimized.

@afc163

afc163 Jun 22, 2018

Member

记得改回来

@@ -37,7 +37,7 @@ export default class Drawer extends React.Component<
static propTypes = {
closable: PropTypes.bool,
destroyOnClose: PropTypes.bool,
getContainer: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
getContainer: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func, PropTypes.bool]),

This comment has been minimized.

@afc163

afc163 Jun 26, 2018

Member

getContainer bool 是什么意思

This comment has been minimized.

@chenshuai2144

chenshuai2144 Jun 26, 2018

Contributor

直接挂载到当前位置,应该使用 null

@chenshuai2144 chenshuai2144 merged commit 0ee58eb into feature-3.7.0 Jul 13, 2018

3 of 5 checks passed

continuous-integration/travis-ci/push The Travis CI build failed
Details
WIP work in progress
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
deploy/netlify Deploy preview ready!
Details
security/snyk - package.json No new issues
Details

@chenshuai2144 chenshuai2144 deleted the drawer branch Jul 13, 2018

@chenshuai2144 chenshuai2144 changed the title from [WIP] add new component : Drawer to add new component : Drawer Jul 13, 2018

bors bot added a commit to mozilla/delivery-console that referenced this pull request Jul 16, 2018

Merge #310
310: Update dependency antd to v3.7.0 r=rehandalal a=renovate[bot]

This Pull Request updates dependency [antd](https://github.com/ant-design/ant-design) from `v3.6.6` to `v3.7.0`



<details>
<summary>Release Notes</summary>

### [`v3.7.0`](https://github.com/ant-design/ant-design/releases/3.7.0)
[Compare Source](ant-design/ant-design@3.6.6...3.7.0)
3.7.0 is a heavy update that brings a lot of exciting changes and new features.  
Here are some highlights :
- 🌟 Add drawer component : [Drawer](https://ant.design/components/drawer-cn/). [#&#8203;10791](`ant-design/ant-design#10791)
- 🌟 Horizontal menu automatically collapses when there is no enough space. [#&#8203;11234](`ant-design/ant-design#11234)
![demo](https://user-images.githubusercontent.com/1731837/42550555-0fef7878-8505-11e8-9d2f-f708fec66b44.gif)
- 🌟 Add `Tree.DirectoryTree` component as the built-in directory tree. [#&#8203;7749](`ant-design/ant-design#7749)
Component Fixes / Enhancements:
- Upgrade `rc-tree-select` to `2.0.5` for TreeSelect, refactored to fix the logic of the check.
  - 🌟 Add `autoClearSearchValue` prop to clear the value of search input when multiple select is selected or deselected. [10996](`ant-design/ant-design#10996)
  - 🌟 Add `searchValue` prop to set the value of search input. [6ff7dd8](ant-design/ant-design@6ff7dd8#diff-1e8e47abbdbe6e12d009aa61619ab22f)
  - 🌟 Add `maxTagCount` prop to set the max count of visible tags. [fb96c9d](ant-design/ant-design@fb96c9d)
  - 🌟 Add `maxTagPlaceholder` prop to set the content when the tag is hidden. [fb96c9d](ant-design/ant-design@fb96c9d)
  - 🌟 Search input now supports case sensitive search. [#&#8203;10990](`ant-design/ant-design#10990)
  - 🗑 Remove `label` prop and use `title` prop instead in the `treeData`. 
- Upgrade `rc-upload` to `2.5.0` for Upload. 
  - 🌟 Add `directory` prop to support folder uploading. [#&#8203;7315](`ant-design/ant-design#7315)
  - 🌟 `action` prop supports to be the a function which returns a Promise object. [fd96967](ant-design/ant-design@fd96967)
- Dropdown
  - 🌟 Provide default margin for icon in the menu item. [8e60a59](ant-design/ant-design@8e60a59)
  - 🌟 Be able to adjust the menu position for the trigger mode of `contextMenu` automatically. [16e4260](ant-design/ant-design@16e4260)
- Upgrade `rc-table` to `6.2.2` for Table. [f2fddff](ant-design/ant-design@f2fddff)
  - 🌟 Add `expanded` as the fourth param of `expandedRowRender` prop to get the expanded state of current row. [#&#8203;10379](`ant-design/ant-design#10379)
  - 🌟 Add the ability to override the filter menu without the fully controlled component. [59cc3a8](ant-design/ant-design@59cc3a8) [@&#8203;chrvadala]
  - 🌟 `filterIcon` prop  supports to be a render function which returns ReactNode. [1af4392](ant-design/ant-design@1af4392)
  - 🐞 Fix the row dislocation problem when the column is fixed. [#&#8203;10392](`ant-design/ant-design#10392)
- 🌟 Allow to pass `data-*`, `aria-*` and `role-*` props to the inner for Alert. [f0b684d](ant-design/ant-design@f0b684d)
- 🌟 Add `alt` prop for Avatar to set the text when the image is unable to display. [#&#8203;10798](`ant-design/ant-design#10798)
- 🌟 Allow to pass `data-*`, `aria-*` and `role-*` props to the inner Input for DatePicker. [e63f9d4](ant-design/ant-design@e63f9d4)
- 🌟 Add `event` object as the second param of `onSearch` prop for Input.Search. [#&#8203;11015](`ant-design/ant-design#11015)
- 🌟 Add `onBreakPoint` prop for Layout.Sider to be the callback function when breakpoint is triggered. [#&#8203;10750](`ant-design/ant-design#10750) [@&#8203;nuintun]
- 🌟 Add `okButtonProps` prop to set the props of ok button and add `cancelButtonProps` prop to set the props of cancal button for Modal. [#&#8203;10955](`ant-design/ant-design#10955) [@&#8203;djyde]
- 🌟 Add `strokeColor` prop to set the color of progress bar for Progress. [#&#8203;10725](`ant-design/ant-design#10725)
- 🌟 Add `buttonStyle` prop whose optional value is `outline` or `solid` to set the Radio.Group style. [60e3cfa](ant-design/ant-design@60e3cfa#diff-c2ee8b5a368a121e9d2cc2661212045d)
- 🌟 Add `setDefaultIndicator` static function to set global indicator for Spin. [#&#8203;10787](`ant-design/ant-design#10787)
- 🌟 Add `visible` prop to set the visibility for `Tag`. [4ac0277](ant-design/ant-design@4ac0277)
- Upgrade `rc-tree` to `1.12.0` for Tree
  - 🌟 Add `loadedKeys` prop to set the loaded nodes, which usually works with loadData prop. [#&#8203;10666](`ant-design/ant-design#10666)
  - 🌟 Add `onLoad` prop to be the callback function when all the nodes are loaded. [c488aca](ant-design/ant-design@c488aca)
- 🗑 Deprecate `combobox` value for `Select[mode]` and please replace it with `AutoComplete`. [53046a4](ant-design/ant-design@53046a4)
- 🐞 Cascader adds `fieldNames` and discards the misspelled `filedNames`. [#&#8203;10896](`ant-design/ant-design#10896)
- 🐞 Fix Timeline dot not working with Tooltip. [0e3b67e](ant-design/ant-design@0e3b67e)
- 🐞 Fix border radius when avatar has custom size. [e1e6523](ant-design/ant-design@e1e6523)
- 🌟 Add `okButtonDisabled` and `cancelButtonDisabled` props to disable ok button and cancel button. [#&#8203;10955](`ant-design/ant-design#10955)


---


3.7.0是一个重磅更新,带来了很多激动人心的变化和新特性。  
以下是一些亮点:
- 🔥 增加抽屉组件 : [`Drawer`](https://ant.design/components/drawer-cn/) [#&#8203;10791](`ant-design/ant-design#10791)
- 🔥 Menu 增加一个横向菜单在空间不足时溢出部分自动收起的特性。[#&#8203;11234](`ant-design/ant-design#11234)
![demo](https://user-images.githubusercontent.com/1731837/42550555-0fef7878-8505-11e8-9d2f-f708fec66b44.gif)
- 🔥 新增 `Tree.DirectoryTree` 组件,作为内置的目录树。[#&#8203;7749](`ant-design/ant-design#7749)
组件修复/功能增强:
- TreeSelect 组件升级 `rc-tree-select` 到 `2.0.5`,进行了重构,修复了 check 的逻辑。
  - 🌟 新增 `autoClearSearchValue` 属性,当多选模式下值被选择,用于自动清空搜索框。[10996](`ant-design/ant-design#10996)
  - 🌟 新增 `searchValue` 属性,用于设置搜索框的值。[6ff7dd8](ant-design/ant-design@6ff7dd8#diff-1e8e47abbdbe6e12d009aa61619ab22f)
  - 🌟 新增 `maxTagCount` 属性,用于设置显示标签的最大数量。[fb96c9d](ant-design/ant-design@fb96c9d)
  - 🌟 新增 `maxTagPlaceholder` 属性,用于设置标签隐藏时显示的内容。[fb96c9d](ant-design/ant-design@fb96c9d)
  - 🌟 搜索框支持大小写敏感。[#&#8203;10990](`ant-design/ant-design#10990)
  - 🗑 `treeData` 数据格式中的 `label` 属性被废弃,使用 `title` 属性代替。
- Upload 组件升级 `rc-upload` 到 `2.5.0`
  - 🌟 新增 `directory` 属性,支持上传一个文件夹。[#&#8203;7315](`ant-design/ant-design#7315)
  - 🌟 `action` 属性支持作为一个返回 `Promise` 对象的函数,使用更加灵活。[fd96967](ant-design/ant-design@fd96967)
- Dropdown 增加新特性,可以做为右键菜单来使用。
  - 🌟 给菜单项的 icon 提供默认的外间距样式。[8e60a59](ant-design/ant-design@8e60a59)
  - 🌟 触发方式为 `contextMenu` 时自动调整菜单的位置。[16e4260](ant-design/ant-design@16e4260)
- Table 组件升级 `rc-table` 到 `6.2.2`。 [f2fddff](ant-design/ant-design@f2fddff)
  - 🌟 新增 `expanded` 作为 `expandedRowRender` 属性函数的第四个参数,用于获取当前行是否展开。[#&#8203;10379](`ant-design/ant-design#10379)
  - 🌟 新增无须使用完全受控组件也能覆盖筛选菜单的能力。[59cc3a8](ant-design/ant-design@59cc3a8) [@&#8203;chrvadala]
  - 🌟 `filterIcon` 属性支持作为一个返回 `ReactNode` 的函数。[1af4392](ant-design/ant-design@1af4392)
  - 🐞 修复在固定列时导致的行错位的问题。[#&#8203;10392](`ant-design/ant-design#10392)
  - 🐞 修复在组件中使用 `combobox` 模式的 `Select` 导致的重影问题。[#&#8203;10828](`ant-design/ant-design#10828)
  - 🐞 修复 components 属性值不能变化的问题。 [c380186](ant-design/ant-design@c380186)
- 🗑 Select 组件废弃了 `combobox` 模式,请使用 `AutoComplete` 组件代替。[53046a4](ant-design/ant-design@53046a4)
- 🌟 Alert 组件允许传递 `data-*`、`aria-*` 和 `role-*` 属性到组件内部。[f0b684d](ant-design/ant-design@f0b684d)
- 🌟 Avatar 组件新增 `alt` 属性,用于设置图像无法显示时的替代文本。[#&#8203;10798](`ant-design/ant-design#10798)
- 🌟 DatePicker 组件允许传递 `data-*`、`aria-*` 和 `role-*` 属性到组件内部的 `Input`。[e63f9d4](ant-design/ant-design@e63f9d4)
- 🌟 Input.Search 组件新增 `event` 事件对象作为 `onSearch` 属性函数的第二个参数。[#&#8203;11015](`ant-design/ant-design#11015)
- 🌟 Layout.Sider 组件新增 `onBreakPoint` 属性,用作响应式布局的断点触发时的回调函数。[#&#8203;10750](`ant-design/ant-design#10750) [@&#8203;nuintun]
- 🌟 Modal 组件新增 `okButtonProps` 和 `cancelButtonProps` 属性,分别用于设置 `取消` 按钮和 `确定` 按钮的属性。[#&#8203;10955](`ant-design/ant-design#10955) [@&#8203;djyde]
- 🌟 Progress 组件新增 `strokeColor` 属性,用于设置进度条的颜色。[#&#8203;10725](`ant-design/ant-design#10725)
- 🌟 Radio.Group 组件新增 `buttonStyle` 属性 (可选值 `outline | solid`),用于设置 `RadioButton` 的风格样式。[60e3cfa](ant-design/ant-design@60e3cfa#diff-c2ee8b5a368a121e9d2cc2661212045d)
- 🌟 Spin 组件新增 `setDefaultIndicator` 静态方法,用于设置全局的加载指示符。[#&#8203;10787](`ant-design/ant-design#10787)
- 🌟 Tag 组件新增 `visible` 属性,用于设置是否显示标签。[4ac0277](ant-design/ant-design@4ac0277)
- Tree 组件升级 `rc-tree` 到 `1.12.0`
  - 🌟 新增 `loadedKeys` 属性,用于设置已经加载的节点,需要配合 `loadData` 使用。[#&#8203;10666](`ant-design/ant-design#10666)
  - 🌟 新增 `onLoad` 属性,作为节点加载完毕时的回调函数。[c488aca](ant-design/ant-design@c488aca)
- 🌟 增加 `okButtonDisabled` and `cancelButtonDisabled` 属性用于禁用确定和取消按钮。[#&#8203;10955](`ant-design/ant-design#10955)
- 🌟 Cascader 新增 fieldNames 并废弃拼写错误的 filedNames。 [#&#8203;10896](`ant-design/ant-design#10896)
- 🐞 修复时间轴不能与`Tooltip`一起使用的问题。  [0e3b67e](ant-design/ant-design@0e3b67e)
- 🐞 修复当 Avata 自定义大小时,圆角不改变的问题。[e1e6523](ant-design/ant-design@e1e6523)

---

</details>




---

This PR has been generated by [Renovate Bot](https://renovatebot.com).

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment