feat: add hideRequiredMark attribute types and add demo #20263

txp1035 · 2019-12-15T00:45:09Z

🤔 This is a ...

🔗 Related issue link

#20221

💡 Background and solution

hideRequiredMark属性本来是为了方便去掉*的，现在需要在去掉星号的同时其他未必选的label后加副标题。

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese	hideRequiredMark属性增加选填功能

☑️ Self Check before Merge

Doc is updated/provided
Demo is updated/provided
TypeScript definition is updated/provided
Changelog is provided

netlify · 2019-12-15T00:45:18Z

Deploy preview for ant-design ready!

Built with commit cdb3a06

https://deploy-preview-20263--ant-design.netlify.com

txp1035 · 2019-12-15T00:45:43Z

关于需求理解：Form中增加可选字段labelSelectiveFilling，类型为Boolean值，当有这个字段的时候，如果没有配置规则必填则为选填，如果配置了必填则不显示选填。@ycjcl868

txp1035 · 2019-12-15T00:46:06Z

我感觉字段名应该还需要讨论下。

codesandbox-ci · 2019-12-15T00:51:40Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cdb3a06:

Sandbox	Source
antd reproduction template	Configuration

codecov · 2019-12-15T00:51:46Z

Codecov Report

Merging #20263 into feat-form-rule will decrease coverage by <.01%.
The diff coverage is 100%.

@@                Coverage Diff                 @@
##           feat-form-rule   #20263      +/-   ##
==================================================
- Coverage           97.56%   97.55%   -0.01%     
==================================================
  Files                 294      294              
  Lines                6845     6836       -9     
  Branches             1880     1837      -43     
==================================================
- Hits                 6678     6669       -9     
  Misses                167      167

Impacted Files	Coverage Δ
components/form/Form.tsx	`100% <ø> (ø)`	⬆️
components/form/context.tsx	`100% <ø> (ø)`	⬆️
components/form/FormItemLabel.tsx	`100% <100%> (ø)`	⬆️
components/modal/confirm.tsx	`94.33% <0%> (-0.21%)`	⬇️
components/select/index.tsx	`97.36% <0%> (-0.2%)`	⬇️
components/avatar/index.tsx	`98.38% <0%> (-0.06%)`	⬇️
components/result/index.tsx	`100% <0%> (ø)`	⬆️
components/input/Input.tsx	`100% <0%> (ø)`	⬆️
components/button/button.tsx	`100% <0%> (ø)`	⬆️

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 007af07...cdb3a06. Read the comment docs.

ycjcl868 · 2019-12-15T01:40:44Z

字段名后面再改也可以

txp1035 · 2019-12-15T03:41:11Z

待讨论问题：
1、属性名字：目前是labelSelectiveFilling，感觉太长了。又想了个labelOptional
2、demo位置，目前排在第4，order和布局一样都是3，需要调整这个值吗？

3、目前需求逻辑是否正确

ycjcl868 · 2019-12-16T02:17:26Z

2、这个 PR #20235 ，我加了 max-width，rebase 下就可以了

ycjcl868 · 2019-12-16T02:17:47Z

/rebase

ycjcl868 · 2019-12-16T02:18:40Z

components/form/FormItemLabel.tsx

@@ -64,6 +67,9 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required: boolean; prefixCl
              title={typeof label === 'string' ? label : ''}
            >
              {labelChildren}
+              {!required && labelSelectiveFilling && (
+                <span className={`${labelClsBasic}-tag`}>（选填）</span>


这里要用国际化

加一个中文和英文，剩下的再补充。

ant-design/components/locale/zh_CN.tsx

Lines 59 to 61 in d7d4beb

PageHeader: {

back: '返回',

},

afc163 · 2019-12-16T02:25:41Z

components/form/Form.tsx

@@ -71,6 +73,7 @@ const InternalForm: React.FC<FormProps> = (props, ref) => {
        name,
        labelAlign,
        labelCol,
+        labelSelectiveFilling,


这个属性是什么意思？

#20221 (comment)

改成 showLabelOptionalText，当这一项为 true 时，hideRequiredMark 默认为 true。

<Form hideRequiredMark /> <Form hideRequiredMark={false} /> <Form hideRequiredMark={{ showLabelOptionalText: true }} />

这样吧，不存在既要 * 又要 （可选） 的情况。

hideRequiredMark这个功能有了吗

txp1035 · 2019-12-17T05:03:28Z

components/form/FormItemLabel.tsx

+              {typeof hideRequiredMark === 'object' &&
+                Object.prototype.toString.call(hideRequiredMark) === '[object Object]' &&
+                hideRequiredMark.showLabelOptionalText && (


typeof hideRequiredMark === 'object'这一段ts能识别，Object.prototype.toString.call(hideRequiredMark) === '[object Object]'这一段才是真正判断，有好的写法吗？

@afc163 @ycjcl868

typeof hideRequiredMark === 'object'，够用就行。

填个null就gg了

Object.prototype.toString.call(hideRequiredMark) === '[object Object]' && (hideRequiredMark as object).showLabelOptionalTextts不识别或者断言？

填 null ts 会报错的。

哈哈哈，呆了，前面还有类型定义 😛

txp1035 · 2019-12-17T05:07:42Z

components/form/FormItemLabel.tsx

+                  <LocaleReceiver componentName="Form" defaultLocale={defaultLocale.Form}>
+                    {(locale: { optionalText: string }) => (


defaultLocale时间处理建议统一收口掉？感觉自动识别时区来做默认值更好？关于本地类型也能通过cli自动生成收口在一个位置方便使用？

txp1035 · 2019-12-17T05:23:37Z

请问每次测试都必须全量更新快照吗？有更快的方法吗？

afc163 · 2019-12-17T06:30:55Z

npm test -- components/form -u
npm test -- components/form/__tests__/index.test.js -u
npm test -- --watch -u

ycjcl868 · 2019-12-17T08:38:06Z

components/form/demo/hide-required-mark.md

+
+## zh-CN
+
+隐藏必选标记


Suggested change

隐藏必选标记

隐藏必选标记，展示（可选）

afc163 · 2019-12-17T09:00:17Z

PR 的标题修改一下，覆盖率需要提升上来。

txp1035 · 2019-12-17T09:03:46Z

标题修改一下，覆盖率需要提升上来。

没有变更呢

Co-Authored-By: 偏右 <afc163@gmail.com>

components/form/demo/hide-required-mark.md

Co-Authored-By: 偏右 <afc163@gmail.com>

components/form/demo/hide-required-mark.md

Co-Authored-By: 偏右 <afc163@gmail.com>

components/form/FormItemLabel.tsx

ycjcl868 · 2019-12-18T03:49:46Z

components/form/context.tsx

  wrapperCol?: ColProps;
 }

+export interface HideRequiredMarkProps {
+  showLabelOptionalText: boolean;


labelOptionalText: string | ReactNode

optionalMark 如何？

afc163 · 2019-12-18T04:06:54Z

这里的信息补充一下。

txp1035 · 2019-12-18T04:44:25Z

我想到一个点：hideRequiredMark属性只是对样式的修改吗？我今天正好在用这个，我以为为true会自动过滤掉必选规则。 @afc163 @ycjcl868
hideRequiredMark只是显示隐藏*没什么问题，现在加上可选的话，用户设定了必选规则，样式上是可选，结果是会验证，表单下方还是会有一行红字提示

afc163 · 2019-12-18T05:17:18Z

只是对样式的修改，不涉及校验规则。

（可选） 字样不能在 required 为 true 的表单项上加。

txp1035 · 2019-12-18T05:56:07Z

变更点：
1、修复必选规则后展示可选文字问题
2、关于可选文字是默认值还是开放扩展问题亦或两者都需要讨论
@ycjcl868 @afc163 @zombieJ

ycjcl868 · 2019-12-18T12:19:47Z

ci broken

ycjcl868 · 2019-12-18T13:01:28Z

components/form/FormItemLabel.tsx

@@ -22,6 +25,9 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required: boolean; prefixCl
  required,
 }) => {
  if (!label) return null;
+  console.log(label, required);


ycjcl868 · 2019-12-18T13:02:39Z

components/locale/default.tsx

@@ -60,4 +60,7 @@ export default {
  PageHeader: {
    back: 'Back',
  },
+  Form: {
+    optionalText: ' (optional)',


Suggested change

optionalText: ' (optional)',

optionalText: '(optional)',

这里是因为偏右故意加的空格

feat: add labelSelectiveFilling

0a28736

auto-add-label bot added the enhancement label Dec 15, 2019

txp1035 mentioned this pull request Dec 15, 2019

4.0 Form rule edit #20221

Closed

5 tasks

txp1035 added 2 commits December 15, 2019 10:15

docs: 增加标签选填示例

ddc0fdd

fix: ci

e4220c3

txp1035 changed the title ~~[WIP] feat: add labelSelectiveFilling~~ feat: add labelSelectiveFilling Dec 15, 2019

pr-triage bot added the PR: unreviewed label Dec 15, 2019

ycjcl868 reviewed Dec 16, 2019

View reviewed changes

afc163 reviewed Dec 16, 2019

View reviewed changes

feat: 选填功能修改

0c84596

txp1035 commented Dec 17, 2019

View reviewed changes

fix: ci

3bd4f2e

fix: 覆盖率、类型判断

71876e3

ycjcl868 reviewed Dec 17, 2019

View reviewed changes

txp1035 added 2 commits December 17, 2019 16:58

fix: demo文案

98a4430

fix: demo文案

8c7661b

txp1035 changed the title ~~feat: add labelSelectiveFilling~~ feat: 隐藏必选标记，展示（可选）demo补充和展示（可选）功能 Dec 17, 2019

Update components/form/demo/hide-required-mark.md

c0de272

Co-Authored-By: 偏右 <afc163@gmail.com>

afc163 reviewed Dec 17, 2019

View reviewed changes

components/form/demo/hide-required-mark.md Outdated Show resolved Hide resolved

Update components/locale/default.tsx

606e5a5

Co-Authored-By: 偏右 <afc163@gmail.com>

afc163 reviewed Dec 17, 2019

View reviewed changes

components/form/demo/hide-required-mark.md Outdated Show resolved Hide resolved

txp1035 and others added 6 commits December 17, 2019 18:04

fix: hide *

8c31eb2

Co-Authored-By: 偏右 <afc163@gmail.com>

fix: 文案

f436236

Co-Authored-By: 偏右 <afc163@gmail.com>

fix: 文案

1543c29

Co-Authored-By: 偏右 <afc163@gmail.com>

fix: 文案

d818b11

Co-Authored-By: 偏右 <afc163@gmail.com>

fix: 多余div和快照

48a8290

fix: 颜色使用变量

5c89ad7

ycjcl868 reviewed Dec 18, 2019

View reviewed changes

components/form/FormItemLabel.tsx Show resolved Hide resolved

ycjcl868 reviewed Dec 18, 2019

View reviewed changes

txp1035 changed the title ~~feat: add hideRequiredMark attribute types and add demo~~ [WIP]feat: add hideRequiredMark attribute types and add demo Dec 18, 2019

pr-triage bot removed the PR: unreviewed label Dec 18, 2019

fix: 修复必选规则后展示可选文字问题

8fd1241

fix: ci & add showLabelOptionalText=>optionalMark

d1be1f4

txp1035 changed the title ~~[WIP]feat: add hideRequiredMark attribute types and add demo~~ feat: add hideRequiredMark attribute types and add demo Dec 18, 2019

pr-triage bot added the PR: unreviewed label Dec 18, 2019

ycjcl868 reviewed Dec 18, 2019

View reviewed changes

fix: 清理log

cdb3a06

ycjcl868 merged commit 3f34650 into ant-design:feat-form-rule Dec 18, 2019

pr-triage bot added PR: merged and removed PR: unreviewed labels Dec 18, 2019

weekly-digest bot mentioned this pull request Dec 22, 2019

Weekly Digest (15 December, 2019 - 22 December, 2019) #20377

Closed

		<LocaleReceiver componentName="Form" defaultLocale={defaultLocale.Form}>
		{(locale: { optionalText: string }) => (

feat: add hideRequiredMark attribute types and add demo #20263

feat: add hideRequiredMark attribute types and add demo #20263

Conversation

txp1035 commented Dec 15, 2019 • edited

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

netlify bot commented Dec 15, 2019 • edited

txp1035 commented Dec 15, 2019

txp1035 commented Dec 15, 2019

codesandbox-ci bot commented Dec 15, 2019 • edited

codecov bot commented Dec 15, 2019 • edited

Codecov Report

ycjcl868 commented Dec 15, 2019

txp1035 commented Dec 15, 2019 • edited

ycjcl868 commented Dec 16, 2019 • edited

ycjcl868 commented Dec 16, 2019

Choose a reason for hiding this comment

ycjcl868 Dec 16, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

txp1035 Dec 17, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

txp1035 Dec 17, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

txp1035 commented Dec 17, 2019

afc163 commented Dec 17, 2019

Choose a reason for hiding this comment

afc163 commented Dec 17, 2019 • edited

txp1035 commented Dec 17, 2019

ycjcl868 Dec 18, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 commented Dec 18, 2019

txp1035 commented Dec 18, 2019 • edited

afc163 commented Dec 18, 2019 • edited

txp1035 commented Dec 18, 2019 • edited

ycjcl868 commented Dec 18, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

txp1035 Dec 18, 2019 • edited

Choose a reason for hiding this comment

txp1035 commented Dec 15, 2019 •

edited

netlify bot commented Dec 15, 2019 •

edited

codesandbox-ci bot commented Dec 15, 2019 •

edited

codecov bot commented Dec 15, 2019 •

edited

txp1035 commented Dec 15, 2019 •

edited

ycjcl868 commented Dec 16, 2019 •

edited

ycjcl868 Dec 16, 2019 •

edited

txp1035 Dec 17, 2019 •

edited

txp1035 Dec 17, 2019 •

edited

afc163 commented Dec 17, 2019 •

edited

ycjcl868 Dec 18, 2019 •

edited

txp1035 commented Dec 18, 2019 •

edited

afc163 commented Dec 18, 2019 •

edited

txp1035 commented Dec 18, 2019 •

edited

txp1035 Dec 18, 2019 •

edited