react月份选择控件_react-date-picker组件

感受小而美,放弃大而全!

动机:

市面上日期组件大多是功能是大而全,几乎满足了我们所有的需求,但是程序员搞出来无论多大而全的设计到了设计师和产品经理手中大多也都变成了不够看.但是那些大而全的组件并没有留给用户多少可扩展的空间,这是我决定封装一个可拆卸的日期组件

目标:

1)设计一款简单的可供开发者拆卸的日期组件

2)满足开发者逻辑需求

3)将ui还给开发者

正题:

整理需求:

一.组件构成

既然我们要将组件封装成可拆卸,那我们就得拆开日历组件看看,他有哪些部分组成,

antd的日期组件截图

饿了么eleme的日期组件截图

我们可以看出日期组件的构成

1)显示年月和切换年月的bar

2)显示星期的title

3)决定日期组件布局的box

4)具体的日期的dateItem

二.核心功能需求

1) 日期年月切换处理

2) 日期选中处理

既然代码结构和核心功能确定了,那么接下来就如进入代码书写阶段了.

代码编写

一.既然要将组件变成参数,那么我们就只有写高阶组件一条路可以走了

二.日期组件核心点,日期组件的核心我认为只有date与month,而其他统统都不是日历组件所关心的,若date是受外界控制的,那么日历组件的核心就只剩下month了,这决定了month永远是活在日历组件的生命周期内的,每次日期组件开启/month都是新的

由于date的受控/非受控,略有差别所有我就写了两个provider DatePickerProvider/DatePickerOfControlledProvider以供开发者选择

代码截图

1) DatePickerProvider该方法将将接受五个参数,前四个都有介绍,这边就不多做赘述了.而最后一个other,将留作开发者扩展.

2) 若选择非受控方式DatePickerProvider则在组件内部需要有一个onSelect方法去设置当前组件的日期,并且公布给调用方.若选择DatePickerOfControlledProvider,则在组件内部无此方法,组件内部若要通知外部改变,只需向内部传入onSelect方法即可(使用默认组件的前提是这样,若不使用默认组件,则用户自定义即可)

非受控组件代码截图

受控组件代码截图

provider的边缘配置项(常见的defaultDate,defaultMonth,就不做过多的阐述了.)

start:这个是确定面板中日期组件起始点(0:周日依次下去).因为该配置项影响到整个面板的月份日期组成,故而被我单独领出来,作为配置可供开发者选择

以上就是整个provider的核心功能.

三) 各个子组件

由于各个子组件都是无状态组件,各位看官老爷们,只要看一眼就都能明白了,在这里需要说明的是,很多常见的功能比如边界这种,我将他们都剥离到各个组件内,看官老爷们在自己定义组件的时候需要自己加上这些逻辑.

至此整个日历组件就介绍到这里

附上 github地址 ,此处尚是雏形,春节期间将文档跟测试不补上.若有更新,随时到此处通告