Controlled Panels #284
Controlled Panels #284
Conversation
|
面板受控后，可以支持更多的业务场景： DatePicker[mode="month"] => MonthPicker
DatePicker[mode="year"] => YearPicker
RangePicker[mode=["month", "month"]] => RangeMonthPicker
RangePicker[mode=["year", "year"]] => RangeYearPicker |
|
Changes Unknown when pulling f51ed13 on feat-controllec-panel into ** on master**. |
|
|
@benjycui LGTM, this api is convenient. But, the |
Nope, you can still import Calendar or RangeCalendar only. |
|
Changes Unknown when pulling 13eb1db on feat-controllec-panel into ** on master**. |
|
Changes Unknown when pulling 0d2048c on feat-controllec-panel into ** on master**. |
| @@ -212,6 +212,18 @@ http://react-component.github.io/calendar/examples/index.html | |||
| <td></td> | |||
| <td>date input's placeholder</td> | |||
| </tr> | |||
| <tr> | |||
There was a problem hiding this comment.
新增 API mode & onPanelChange 用于控制当前展示的面板。
| @@ -348,6 +360,18 @@ http://react-component.github.io/calendar/examples/index.html | |||
| <td>both</td> | |||
| <td>whether fix start or end selected value. check start-end-range example</td> | |||
| </tr> | |||
| <tr> | |||
| <td>mode</td> | |||
| <td>enum('date', 'month', 'year', 'decade')[]</td> | |||
There was a problem hiding this comment.
RangeCalendar 还不支持受控展示 timePicker，交互有点冲突。
|
合并后发个 minor， antd 那边需要处理下。 |
|
Changes Unknown when pulling 1d4409b on feat-controllec-panel into ** on master**. |
|
@benjycui 都舍得写用例，干脆 example 也加下啊 |
|
@benjycui demo 我加了 |
| }; | ||
| }, | ||
| getInitialState() { | ||
| return { | ||
| showTimePicker: false, | ||
| mode: this.props.mode || 'date', |
There was a problem hiding this comment.
高阶用法，就不提供非受控的模式了。
我更新下。
There was a problem hiding this comment.
这里还是不能改，mode 这种可是受控属性，不能设置默认值的。
由于受控面板属于高阶用法，也不准备支持 defaultMode
src/Calendar.jsx
Outdated
| }; | ||
| }, | ||
| componentWillReceiveProps(nextProps) { | ||
| if ('mode' in nextProps) { |
There was a problem hiding this comment.
判断一下 nextProps.mode !== this.state.mode 再 setState 吧，vdom 的计算也是成本
| if (!('mode' in props)) { | ||
| this.setState({ mode }); | ||
| } | ||
| props.onPanelChange(state.value, mode); |
There was a problem hiding this comment.
这里其实有个小争议点，文档写的 onPanelChange 是 panel change 的回到。
但比如我刚加的 demo， 在 受控模式下，认为的改变 props.mode 引发的 panel change 是否要触发这个回调呢？目前是没有的
There was a problem hiding this comment.
但比如我刚加的 demo， 在 受控模式下，认为的改变 props.mode 引发的 panel change 是否要触发这个回调呢？目前是没有的
这种先忽略，目前我们不少的表单控件都不会因为人工重置 value 而触发 onChange
|
Changes Unknown when pulling 0b43012 on feat-controllec-panel into ** on master**. |
| this.setState({ | ||
| showTimePicker: false, | ||
| }); | ||
| this.onPanelChange('date'); |
There was a problem hiding this comment.
这里可以把默认的 mode 抽离成全局变量 defaultMode = 'date', 可维护性好一点
There was a problem hiding this comment.
这个 +1，不过现在 rc-calendar 里面直接使用字符串的地方太多了，你后边再单独一个 commit 更新这些 code style 吧，顺便熟悉 rc-calendar 的代码。
src/Calendar.jsx
Outdated
| @@ -210,7 +220,8 @@ const Calendar = createReactClass({ | |||
| disabledTime, | |||
| } = props; | |||
| const state = this.state; | |||
src/RangeCalendar.js
Outdated
| @@ -316,6 +334,10 @@ const RangeCalendar = createReactClass({ | |||
| isAllowedDate(selectedValue[1], this.props.disabledDate, this.disabledEndTime); | |||
| }, | |||
|
|
|||
| isMonthYearPanelShow(mode) { | |||
| return ['month', 'year', 'decade'].includes(mode); | |||
There was a problem hiding this comment.
includes 是 es6 的方法 http://kangax.github.io/compat-table/es2016plus/
改用 indexOf ?
There was a problem hiding this comment.
现在 antd 会要求低版本浏览器引入 polyfill 的。
There was a problem hiding this comment.
这里还是建议改一下，毕竟是底层的 rc-components, 小坑埋得越少越好
|
Changes Unknown when pulling d6ec3ce on feat-controllec-panel into ** on master**. |
benjycui
force-pushed
the
feat-controllec-panel
branch
from
d6ec3ce to
bf8c611
Compare
|
Updated. |
|
Changes Unknown when pulling bf8c611 on feat-controllec-panel into ** on master**. |
Ref: ant-design/ant-design#5190