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

Layout.Sider add onBreakpoint porp support #10750

merged 5 commits into from Jun 3, 2018

Layout.Sider add onBreakpoint porp support #10750

merged 5 commits into from Jun 3, 2018


Copy link

@nuintun nuintun commented Jun 3, 2018

When on breakpoint changes, onCollapse does not trigger every time, so need a callback support more user custom configure.

Extra checklist:

  • Update API docs for the component.
  • Update/Add demo to demonstrate new feature.
  • Update TypeScript definition for the component.
  • Add unit tests for the feature.

Copy link

Deploy preview for ant-design ready!

Built with commit eac2423

Copy link

codecov bot commented Jun 3, 2018

Codecov Report

Merging #10750 into master will increase coverage by 0.19%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #10750      +/-   ##
+ Coverage   91.57%   91.76%   +0.19%     
  Files         194      194              
  Lines        4759     4762       +3     
  Branches     1328     1329       +1     
+ Hits         4358     4370      +12     
+ Misses        397      388       -9     
  Partials        4        4
Impacted Files Coverage Δ
components/layout/Sider.tsx 88.09% <100%> (+11.55%) ⬆️

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 37d5f89...eac2423. Read the comment docs.

Copy link

afc163 commented Jun 3, 2018

发到 feature-3.7.0 分支吧

@nuintun nuintun changed the base branch from master to feature-3.7.0 June 3, 2018 04:56
Copy link
Contributor Author

nuintun commented Jun 3, 2018

@afc163 已经推到 feature-3.7.0

@afc163 afc163 merged commit ff24f1a into ant-design:feature-3.7.0 Jun 3, 2018
bors bot added a commit to mozilla/delivery-console that referenced this pull request Jul 16, 2018
310: Update dependency antd to v3.7.0 r=rehandalal a=renovate[bot]

This Pull Request updates dependency [antd]( from `v3.6.6` to `v3.7.0`

<summary>Release Notes</summary>

### [`v3.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]( [#&#8203;10791](`ant-design/ant-design#10791)
- 🌟 Horizontal menu automatically collapses when there is no enough space. [#&#8203;11234](`ant-design/ant-design#11234)
- 🌟 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)


- 🔥 增加抽屉组件 : [`Drawer`]( [#&#8203;10791](`ant-design/ant-design#10791)
- 🔥 Menu 增加一个横向菜单在空间不足时溢出部分自动收起的特性。[#&#8203;11234](`ant-design/ant-design#11234)
- 🔥 新增 `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)




This PR has been generated by [Renovate Bot](

Co-authored-by: Renovate Bot <>
Copy link

nibiru2O12 commented Aug 23, 2018

does this support multiple breakpoint? also is there an example on using the breakpoint + custom trigger?

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

Successfully merging this pull request may close these issues.

None yet

4 participants