Skip to content
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

style: Drawer get container #18167

Merged
merged 9 commits into from Aug 10, 2019
Merged

style: Drawer get container #18167

merged 9 commits into from Aug 10, 2019

Conversation

jljsj33
Copy link
Member

@jljsj33 jljsj33 commented Aug 8, 2019

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English
🇨🇳 Chinese 1. 更改 drawer 的 position,wrapper 和 mask 用 absolute。
2. 增加 getContainer 的使用 demo。

☑️ Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

View rendered components/drawer/demo/get-container.md

@netlify
Copy link

netlify bot commented Aug 8, 2019

Deploy preview for ant-design ready!

Built with commit ec6b60d

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

@jljsj33 jljsj33 requested a review from zombieJ Aug 8, 2019

## en-US

Custom Container.
Copy link
Member

@afc163 afc163 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

英文。

Copy link
Member Author

@jljsj33 jljsj33 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

自定义容器啊,,没错啊。。


## zh-CN

自定义挂载,点击触发按钮抽屉从相应的位置滑出,点击遮罩区关闭
Copy link
Member

@afc163 afc163 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

句号。

import { Drawer, Button, Radio } from 'antd';

class App extends React.Component {
state = { visible: false, value: '.main-wrapper', };
Copy link
Contributor

@ztplz ztplz Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

一行会有lint错误吗 用户都是直接copy的

Copy link
Member Author

@jljsj33 jljsj33 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

逗号去了不会报错了。。。我已经去了。。。

closable={false}
onClose={this.onClose}
visible={this.state.visible}
getContainer={this.state.value}
Copy link
Member

@afc163 afc163 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

例子不要展示变化,给一个固定值就行了。

Copy link
Member Author

@jljsj33 jljsj33 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个就这样吧,,免得又有人来找我,,这样子可以说明这个属性是多样化的。。

Copy link
Member Author

@jljsj33 jljsj33 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

搞个多个参数后,用户才会去看 api,,一般都吖的不看的。。。

Copy link
Member

@afc163 afc163 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

动态变化没什么意义

Copy link
Member Author

@jljsj33 jljsj33 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

有意义啊,,支持切换 getContainer 没错的啊,有使用场景的啊。。。

Copy link
Member Author

@jljsj33 jljsj33 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

比如说弹框里也可以放抽屉啊,,弹框没开时就在侧边啊。。大千世界是无奇不有的。。哈哈

Copy link
Member

@afc163 afc163 Aug 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不是常见需求,demo 里不要这么演示,把事情搞复杂了。

Copy link
Member Author

@jljsj33 jljsj33 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

按你的意思是要搞两个 deom??这个性质跟自定义位置是一样的。。。。留着吧,,还是有意义的。。。。

Copy link
Member

@afc163 afc163 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<Drawer
          title="Basic Drawer"
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}
          getContainer={xxx}

就可以了,没必要搞个 state。

Copy link
Member Author

@jljsj33 jljsj33 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

说实话,目前看来 false 是用的最有用的。。。最初设计这个 api 时 false 和其它的渲染方式是不一样的,,而且别人反馈也是因为没有把 false 做 demo 才导至不会用的。。

@jljsj33
Copy link
Member Author

jljsj33 commented Aug 8, 2019

这 ci 啥子情况,,,@zombieJ

@jljsj33 jljsj33 changed the title Drawer get container style: Drawer get container Aug 8, 2019
@afc163
Copy link
Member

afc163 commented Aug 9, 2019

image

样式美化一下,加点边距啥的。


## zh-CN

渲染在当前 dom 里。自定义容器,查看 getContainer API。
Copy link
Member

@afc163 afc163 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getContainer

Copy link
Member Author

@jljsj33 jljsj33 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

又打错字了?


render() {
return (
<div>
Copy link
Member

@afc163 afc163 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个 div 没啥用。

closable={false}
onClose={this.onClose}
visible={this.state.visible}
getContainer={false}
Copy link
Member

@afc163 afc163 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

直接设置成 #components-drawer-demo-render-in-current .code-box-demo 这个 dom 会不会好一点。

Copy link
Member Author

@jljsj33 jljsj33 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个 demo 讲的就是 false,设置这个又是 Selectors 了

Copy link
Member

@afc163 afc163 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

让开发者指定比较好,false 也就是相当于 node => node.parentNode

Copy link
Member Author

@jljsj33 jljsj33 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

false 是不用走 portal。。跟你说了放 select ,你又不放,,你要咋样??

Copy link
Member

@afc163 afc163 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌,你就改样式就好了。

@jljsj33
Copy link
Member Author

jljsj33 commented Aug 9, 2019

这 form 倒底又搞什么了?? @afc163

@buildsize
Copy link

buildsize bot commented Aug 9, 2019

File name Previous Size New Size Change
package-lock.json 822.65 KB 821.76 KB -911 bytes (0%)

@codecov
Copy link

codecov bot commented Aug 9, 2019

Codecov Report

Merging #18167 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master   #18167   +/-   ##
=======================================
  Coverage   96.28%   96.28%           
=======================================
  Files         276      276           
  Lines        7520     7520           
  Branches     2048     2048           
=======================================
  Hits         7241     7241           
  Misses        277      277           
  Partials        2        2

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 8163c98...ec6b60d. Read the comment docs.

onClose={this.onClose}
visible={this.state.visible}
getContainer={false}
style={{ position: 'absolute' }}
Copy link
Member

@afc163 afc163 Aug 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里比较奇怪。

@afc163 afc163 merged commit 33a5da4 into master Aug 10, 2019
22 checks passed
@afc163 afc163 deleted the drawer-get-container branch Aug 10, 2019
@jaryway
Copy link

jaryway commented Sep 18, 2019

  1. 更改 drawer 的 position,wrapper 和 mask 用 absolute。
    这样改之后,drawer 的width只能写固定值了,原来是支持百分比的,用着好别扭!能不能改成只有 getContainer=false 时才把position设置成 absolute?

@jaryway
Copy link

jaryway commented Sep 18, 2019

@j3l11234 原来好多都是设置百分比,这下又得改好多代码了

@jljsj33
Copy link
Member Author

jljsj33 commented Sep 19, 2019

use vw or vh

@j3l11234
Copy link
Contributor

j3l11234 commented Sep 20, 2019

  1. 更改 drawer 的 position,wrapper 和 mask 用 absolute。
    这样改之后,drawer 的width只能写固定值了,原来是支持百分比的,用着好别扭!能不能改成只有 getContainer=false 时才把position设置成 absolute?

@jaryway 你咋@到我了?

@jaryway
Copy link

jaryway commented Sep 20, 2019

@j3l11234 回复里面就可以@人哦。感觉这样改有点断层。虽然可以改成 vw、vh,但是如果之前是用%还是要改代码

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants