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

Conversation

@jljsj33
Copy link
Member

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

@pr-triage pr-triage bot added the PR: unreviewed label Aug 8, 2019

@netlify

This comment has been minimized.

Copy link

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.

This comment has been minimized.

Copy link
@afc163

afc163 Aug 8, 2019

Member

英文。

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 8, 2019

Author Member

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


## zh-CN

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

This comment has been minimized.

Copy link
@afc163

afc163 Aug 8, 2019

Member

句号。

import { Drawer, Button, Radio } from 'antd';
class App extends React.Component {
state = { visible: false, value: '.main-wrapper', };

This comment has been minimized.

Copy link
@ztplz

ztplz Aug 8, 2019

Collaborator

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

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 8, 2019

Author Member

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

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

This comment has been minimized.

Copy link
@afc163

afc163 Aug 8, 2019

Member

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

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 8, 2019

Author Member

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

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 8, 2019

Author Member

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

This comment has been minimized.

Copy link
@afc163

afc163 Aug 8, 2019

Member

动态变化没什么意义

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 8, 2019

Author Member

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

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 8, 2019

Author Member

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

This comment has been minimized.

Copy link
@afc163

afc163 Aug 8, 2019

Member

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

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 9, 2019

Author Member

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

This comment has been minimized.

Copy link
@afc163

afc163 Aug 9, 2019

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

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

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 9, 2019

Author Member

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

@jljsj33

This comment has been minimized.

Copy link
Member Author

commented Aug 8, 2019

这 ci 啥子情况,,,@zombieJ

@jljsj33 jljsj33 changed the title Drawer get container style: Drawer get container Aug 8, 2019

@afc163

This comment has been minimized.

Copy link
Member

commented Aug 9, 2019

image

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


## zh-CN

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

This comment has been minimized.

Copy link
@afc163

afc163 Aug 9, 2019

Member

getContainer

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 9, 2019

Author Member

又打错字了?

render() {
return (
<div>

This comment has been minimized.

Copy link
@afc163

afc163 Aug 9, 2019

Member

这个 div 没啥用。

closable={false}
onClose={this.onClose}
visible={this.state.visible}
getContainer={false}

This comment has been minimized.

Copy link
@afc163

afc163 Aug 9, 2019

Member

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

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 9, 2019

Author Member

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

This comment has been minimized.

Copy link
@afc163

afc163 Aug 9, 2019

Member

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

This comment has been minimized.

Copy link
@jljsj33

jljsj33 Aug 9, 2019

Author Member

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

This comment has been minimized.

Copy link
@afc163

afc163 Aug 9, 2019

Member

👌,你就改样式就好了。

@jljsj33 jljsj33 force-pushed the drawer-get-container branch from 41d5016 to c7acb9a Aug 9, 2019

@jljsj33

This comment has been minimized.

Copy link
Member Author

commented Aug 9, 2019

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

@buildsize

This comment has been minimized.

Copy link

commented Aug 9, 2019

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

This comment has been minimized.

Copy link

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' }}

This comment has been minimized.

Copy link
@afc163

afc163 Aug 9, 2019

Member

这里比较奇怪。

@afc163 afc163 merged commit 33a5da4 into master Aug 10, 2019

25 of 28 checks passed

Header rules - ant-design No header rules processed
Details
LGTM analysis: JavaScript No code changes detected
Details
Pages changed - ant-design 223 new files uploaded
Details
License Compliance All checks passed.
Details
Mixed content - ant-design No mixed content detected
Details
Redirect rules - ant-design 18 redirect rules processed
Details
Semantic Pull Request ready to be squashed
Details
WIP Ready for review
Details
ant-design.ant-design #ant design succeeded
Details
buildsize Significant change of package-lock.json down by 911 bytes (0.11%)
Details
ci/circleci: compile Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_dist Your tests passed on CircleCI!
Details
ci/circleci: test_dist_15 Your tests passed on CircleCI!
Details
ci/circleci: test_dom Your tests passed on CircleCI!
Details
ci/circleci: test_dom_15 Your tests passed on CircleCI!
Details
ci/circleci: test_es Your tests passed on CircleCI!
Details
ci/circleci: test_es_15 Your tests passed on CircleCI!
Details
ci/circleci: test_lib Your tests passed on CircleCI!
Details
ci/circleci: test_lib_15 Your tests passed on CircleCI!
Details
ci/circleci: test_node Your tests passed on CircleCI!
Details
ci/circleci: test_node_15 Your tests passed on CircleCI!
Details
codecov/patch Coverage not affected when comparing 8163c98...ec6b60d
Details
codecov/project 96.28% remains the same compared to 8163c98
Details
netlify/ant-design/deploy-preview Deploy preview ready!
Details
security/snyk - package.json (paranoidjk) No manifest changes detected

@afc163 afc163 deleted the drawer-get-container branch Aug 10, 2019

@jaryway

This comment has been minimized.

Copy link

commented Sep 18, 2019

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

This comment has been minimized.

Copy link

commented Sep 18, 2019

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

@jljsj33

This comment has been minimized.

Copy link
Member Author

commented Sep 19, 2019

use vw or vh

@j3l11234

This comment has been minimized.

Copy link
Contributor

commented Sep 20, 2019

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

@jaryway 你咋@到我了?

@jaryway

This comment has been minimized.

Copy link

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
Projects
None yet
5 participants
You can’t perform that action at this time.