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.

Sign up for GitHub

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

Jump to bottom

feat: supprt custom format #142

Merged
merged 3 commits into from
Sep 18, 2020
Merged

feat: supprt custom format #142

merged 3 commits into from
Sep 18, 2020

Conversation

kerm1it
Copy link
Member

@kerm1it kerm1it commented Sep 16, 2020

close #17222

@vercel
Copy link

vercel bot commented Sep 16, 2020 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/react-component/picker/55dnvn147
✅ Preview: https://picker-git-feat-17222.react-component.vercel.app

@kerm1it kerm1it changed the title [WIP] ✨ feat: supprt custom format [WIP] feat: supprt custom format Sep 16, 2020
@codecov
Copy link

codecov bot commented Sep 16, 2020 •
edited
Loading

Codecov Report

Merging #142 into master will increase coverage by 0.00%.
The diff coverage is 100.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #142   +/-   ##
=======================================
  Coverage   99.59%   99.59%           
=======================================
  Files          45       45           
  Lines        1989     1994    +5     
  Branches      591      596    +5     
=======================================
+ Hits         1981     1986    +5     
  Misses          6        6           
  Partials        2        2
Impacted Files Coverage Δ
src/Picker.tsx 100.00% <100.00%> (ø)
src/RangePicker.tsx 100.00% <100.00%> (ø)
src/hooks/useValueTexts.ts 100.00% <100.00%> (ø)
src/utils/dateUtil.ts 100.00% <100.00%> (ø)
src/utils/uiUtil.ts 100.00% <100.00%> (ø)

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 3cf5b9b...8b00e60. Read the comment docs.

@kerm1it kerm1it changed the title [WIP] feat: supprt custom format feat: supprt custom format Sep 17, 2020
@kerm1it
Copy link
Member Author

kerm1it commented Sep 17, 2020 •
edited
Loading

  • format 支持自定义函数: (value: DateType) => string
  • format 为函数时输入框不支持输入，readonly 强制设为 true(无法反向解析值)

@afc163 @zombieJ 看看还有什么问题？

@kerm1it kerm1it marked this pull request as ready for review September 17, 2020 05:44
@kerm1it
Copy link
Member Author

kerm1it commented Sep 17, 2020

ping~ @afc163 @zombieJ

@afc163
Copy link
Member

afc163 commented Sep 17, 2020

format 为函数时输入框不支持输入，readonly 为 true(无法解析值)

指的是 inputReadonly?

afc163
afc163 reviewed Sep 17, 2020
View reviewed changes
tests/range.spec.tsx
it('custom format', () => {
const wrapper = mount(
<MomentRangePicker
format={[(val: Moment) => `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']}
Copy link
Member

Choose a reason for hiding this comment

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

(val: Moment) => 'YYYYMMDD'

和

(val: Moment) => val.format('YYYYMMDD')

是等价的么？

Copy link
Member Author

Choose a reason for hiding this comment

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

不等价，返回的字符串直接作为显示用，前者会直接显示为 'YYYYMMDD'。

Copy link
Member

Choose a reason for hiding this comment

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

感觉比较怪。

"YYYY-MM-DD" 和 () => "YYYY-MM-DD" 容易认为是等价的。

Copy link
Member

Choose a reason for hiding this comment

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

format={(val: Moment) => `custom format:${val.format('YYYYMMDD')}`}

前后两个 format。感觉前面的 format 更像是 inputRender，而不是 moment.format 需要的第一个参数。

Copy link
Member Author

Choose a reason for hiding this comment

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

你是想我们需要再对函数的返回值中的 "YYYY-MM-DD" 进行过滤然后二次 format？

这样的话复杂度就大了很多，需要对返回的字符串中类似'YYYY-MM-DD' 的所有这些日期格式 token 进行筛选替换。

Copy link
Member Author

Choose a reason for hiding this comment

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

感觉我们去做不太实际，像 Moment、Dayjs、dateFns 这些库支持的日期格式可能不尽相同。

Copy link
Member

Choose a reason for hiding this comment

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

功能上现在这种写法是更友好的，但是语义上我担心有歧义。

Copy link
Member Author

Choose a reason for hiding this comment

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

那到时可以写个例子，说明一下

Copy link
Member

Choose a reason for hiding this comment

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

我是倾向于 format 作为 function 全部交给用户来自定义，不再帮转。禁止套娃。

@kerm1it
Copy link
Member Author

kerm1it commented Sep 17, 2020

inputReadonly

不是，意思是 format 为函数时，此时输入框里面的值是未知的，无法根据输入的文本做反向解析，所以就把 input 的 readonly 强制设为了 true，只能从面板选择。

@kerm1it
Copy link
Member Author

kerm1it commented Sep 18, 2020

那就暂定这样了，到时我在 antd 里面写个 demo 说明一下。

@kerm1it kerm1it merged commit f547043 into master Sep 18, 2020
@kerm1it kerm1it deleted the feat-17222 branch September 18, 2020 08:41
@kerm1it kerm1it mentioned this pull request Sep 18, 2020
Closed
@kerm1it
Copy link
Member Author

kerm1it commented Sep 18, 2020

发完版本后我再去 antd 里面改一下。

@zombieJ
Copy link
Member

zombieJ commented Sep 20, 2020

+ rc-picker@2.2.0

@yoyo837 yoyo837 mentioned this pull request Oct 9, 2020
Merged
19 tasks
@afc163
Copy link
Member

afc163 commented Oct 9, 2020

@kermit-xuan 要在 antd 中升级并补充一下文档。

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

@afc163 afc163 afc163 left review comments

@zombieJ zombieJ zombieJ approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

DatePicker 的format 属性支持函数
3 participants
@kerm1it @afc163 @zombieJ