feat: add `count` for customize count logic by zombieJ · Pull Request #47 · react-component/input

zombieJ · 2023-09-27T06:31:05Z

贴一下之前同步会讨论的结论：

对于 Input 和 TextArea 将 showCount 的计算逻辑还原给原生的计算逻辑。让 count 和 maxLength 保持同步。
对于有需要定制化计算逻辑的场景（普遍是中文 or emoji 场景），提供定制接口允许开发者自行定义。

该 PR：

继上述结论，提取 count 接口：

interface CountConfig {
  // 代理 `max` 逻辑，当开发者没有提供裁剪逻辑时参考 InputNumber 提供错误样式。
  max?: number;
  // 计数策略，不提供时以原生 `string.length` 处理。反之可定制自己的逻辑，如 emoji 始终占据一个长度。
  strategy?: (value: string) => number;
  // 同 `showCount`，不再复述
  show?: boolean | ShowCountFormatter;
  // 当超出 `max` 范围时处理逻辑，允许开发者额外定制裁剪逻辑。该方法会略过 `composition` 事件以防止被输入法卡住的情况。
  exceedFormatter?: ExceedFormatter;
}

exceedFormatter

src/hooks/useCount.ts

codecov · 2023-09-27T06:35:35Z

Codecov Report

Merging #47 (e399b09) into master (aa08e91) will decrease coverage by 3.45%.
The diff coverage is 89.58%.

❗ Current head e399b09 differs from pull request most recent head 5c95ff5. Consider uploading reports for the commit 5c95ff5 to get more accurate results

@@             Coverage Diff             @@
##            master      #47      +/-   ##
===========================================
- Coverage   100.00%   96.55%   -3.45%     
===========================================
  Files            4        5       +1     
  Lines          143      174      +31     
  Branches        55       68      +13     
===========================================
+ Hits           143      168      +25     
- Misses           0        6       +6

Files	Coverage Δ
src/Input.tsx	`100.00% <100.00%> (ø)`
src/utils/commonUtils.ts	`97.14% <ø> (-2.86%)`	⬇️
src/hooks/useCount.ts	`70.58% <70.58%> (ø)`

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

crazyair · 2023-09-27T06:38:46Z

docs/examples/show-count.tsx

+        count={{
+          show: true,
+          max: 5,
+          strategy: (val) =>


一定要用专业名词吗，可以简单点吗，比如 getCount

一定要用专业名词吗，可以简单点吗，比如 getCount

其实习惯了就好了 😂

词不达意才更麻烦. 词越精确越好, 只不过我们非英语母语而已.

这个和 @MadCcc 讨论下来，count 本身就是属性名里面再套一个 count 就重复了。所以复用了 Tree TreeSelect Cascader 的 strategy 的 API 名。

这个可以参考 echarts，每个配置都有 formatter 自定义返回，对于图表或者组件，自定义方法的使用场景非常多，api 应该有个规范

复用没问题，关键复用前第一次这个地方用的合不合适，比如 Table 的 dataIndex 对应的 render，这个就没定义成 strategy

按照 Naming Standard，render 系列命名需要带上 render 或为 xxxRender。其次，在固定规则外，复用现有命名 API，不额外创造。这个是符合我们的命名规范的。

https://github.com/ant-design/ant-design/wiki/API-Naming-rules

另外，自定义计数和 formatter 是没有强相关的。开发者可以配置为 max + strategy 仅做超出警示，而不需要去做裁剪。参考一下这个截图：

感觉这个有问题啊，当 {max: 2} 用户只能输入2个字符，当 {max: 2, strategy:()=> 2}，用户应该一个字符都不能输入

用户自己写了 2 那就认为当前输入的值长度为 2，自然是可以继续输入的。因为永远都不会超出长度。可以看一下 ant-design/ant-design#37733 过一下为什么要交给用户处理的上下文。

crazyair · 2023-09-27T06:41:17Z

docs/examples/show-count.tsx

+        count={{
+          show: true,
+          max: 5,
+          exceedFormatter: (val, { max }) => {


exceed 只体现了超出，没说明超出哪个，api 应该加上 max

这个感觉没必要，exceed 本来就是超出，能超出的自然只有 max 了

这个strategy会写到文档里，或者还会增加一个 demo，用户能认知strategy 可以解决什么问题，在这基础上，如果 api 名称为 getMax: (value) => number 则是 max 的自定义方法，一举两得。

如果要通过自定义方法的返回控制用户是否可以继续输入，或者右侧显示 1/2内容，都可以收成一个方法

// 当超出 max 范围时处理逻辑，允许开发者额外定制裁剪逻辑。该方法会略过 composition 事件以防止被输入法卡住的情况。
exceedFormatter?: ExceedFormatter;

最早就是一个，后来发现有输入法收不起来，所以拆了一个裁剪方法。

在 composition 阶段，用户输入超出长度是正常的。裁剪只有在 composition 结束时才能处理。比如 你好 限制 2，在输入 nihao 的时候长度是 5 ，你不能拦住它输入。输入完后才能裁剪。

clone 本地测试了了下，体验来说没问题

crazyair · 2023-09-27T06:42:49Z

src/Input.tsx

+    if (
+      !compositionRef.current &&
+      countConfig.exceedFormatter &&
+      countConfig.max &&
+      countConfig.strategy(currentValue) > countConfig.max
+    ) {
+      cutValue = countConfig.exceedFormatter(currentValue, {
+        max: countConfig.max,
+      });
    }


这部分没有抽离到 useCount 吗

useCount 里是合成 countConfig 的，它本身不处理 change 逻辑~

crazyair · 2023-09-27T07:24:34Z

docs/examples/show-count.tsx

+        prefixCls="rc-input"
+        defaultValue="🔥"
+        count={{
+          show: true,


这个不应该默认是 true 吗，因为外层 count={{}} 是真值

不是的，原本是 showCount 默认为真。现在改名叫 count 是做计数使用。可以配置 strategy + max 仅做限制而不展示数字。

crazyair · 2023-09-27T07:33:51Z

tests/count.test.tsx

+import Input from '../src';
+
+const getSegments = (val: string) => [
+  ...new (Intl as any).Segmenter().segment(val),


Segmenter 这个可以改 tsconfig "lib": ["dom", "es2017", "es2022"]

学到了 👍

zombieJ added 7 commits September 26, 2023 17:41

chore: init of len

aaba78e

chore: support len of demo

8e8416e

feat: support cuter

acb514c

test: add test case

d790f11

test: use rc-test

4d1bfc7

test: update snapshot

3201aec

test: add test case

b268c69

github-advanced-security bot found potential problems Sep 27, 2023

View reviewed changes

src/hooks/useCount.ts Fixed Show fixed Hide fixed

chore: clean up

5c95ff5

MadCcc approved these changes Sep 27, 2023

View reviewed changes

crazyair reviewed Sep 27, 2023

View reviewed changes

zombieJ merged commit f135900 into master Sep 27, 2023

delete-merged-branch bot deleted the len branch September 27, 2023 07:10

crazyair reviewed Sep 27, 2023

View reviewed changes

This was referenced Sep 27, 2023

chore: adjust ts #48

Merged

feat: support count react-component/textarea#47

Merged

Conversation

zombieJ commented Sep 27, 2023

exceedFormatter

Uh oh!

Uh oh!

codecov bot commented Sep 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crazyair Sep 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crazyair Sep 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crazyair Sep 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov bot commented Sep 27, 2023 •

edited

Loading

crazyair Sep 27, 2023 •

edited

Loading

crazyair Sep 27, 2023 •

edited

Loading

crazyair Sep 27, 2023 •

edited

Loading