feat: add util genCalc and type AbstractCalculator

[YumoImer]

[RFC] Migrate the genCalc util from antd repo

Summary

genCalc API 由原 https://github.com/ant-design/ant-design/tree/master/components/theme/util/calc 迁移至 @ant-design/cssinjs

Motivation

在 antd 中书写组件样式时，均统一使用 repo 中的 genStyleHooks、mergeToken、genPresetColor、genSubStyleComponent等 API，目前都统一存放于 https://github.com/ant-design/ant-design/tree/master/components/theme/util 目录下。

当前 antd 有类似@ant-design/web3、@ant-design/x 等生态库，在生态库中编写组件样式时目前几种选择：

1. 照搬 antd repo 中的代码至各生态库
2. 生态库内仅使用 @ant-design/cssinjs 简单实现类似的功能封装
3. 将可抽离的通用逻辑迁移至 @ant-design/cssinjs ，尽可能减少重复代码

对于方式一，并不可取，不同的库同样的代码，这会给后续的维护造成负担。

方式二，使用了当前已有的 @ant-design/cssinjs API，如 useStyleRegister 等，详见：https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/theme/useStyle/index.ts

方式三，将通用的工具、逻辑抽离至 @ant-design/cssinjs，尽可能减少重复代码。该 RFC 仅迁移工具函数 genCalc 及其对应抽象类 AbstractCalculator

API

genCalc

type GenCalcType = (type: 'css' | 'js', unitlessCssVar: Set<string>) => (num: number | string | AbstractCalculator) => CSSCalculator | NumCalculator

type AbstractCalculator

abstract class AbstractCalculator {
  /**
   * @descCN 计算两数的和，例如：1 + 2
   * @descEN Calculate the sum of two numbers, e.g. 1 + 2
   */
  abstract add(num: number | string | AbstractCalculator): this;

  /**
   * @descCN 计算两数的差，例如：1 - 2
   * @descEN Calculate the difference between two numbers, e.g. 1 - 2
   */
  abstract sub(num: number | string | AbstractCalculator): this;

  /**
   * @descCN 计算两数的积，例如：1 * 2
   * @descEN Calculate the product of two numbers, e.g. 1 * 2
   */
  abstract mul(num: number | string | AbstractCalculator): this;

  /**
   * @descCN 计算两数的商，例如：1 / 2
   * @descEN Calculate the quotient of two numbers, e.g. 1 / 2
   */
  abstract div(num: number | string | AbstractCalculator): this;

  /**
   * @descCN 获取计算结果
   * @descEN Get the calculation result
   */
  abstract equal(options?: { unit?: boolean }): string | number;
}

Basic Example

genCalc

import { genCalc } from '@ant-design/cssinjs';

genCalc('js', new Set());

genCalc('css', new Set());

type AbstractCalculator

import type { AbstractCalculator } from '@ant-design/cssinjs';

Unresolved questions

由于 antd 中常用API genStyleHooks 调用 genSubStyleComponent 调用 genCalc,迁移 genCalc 仅解决部分代码重复问题，后续仍需要持续优化。

另外，需要在 antd 中提 PR 对此次变更兼容。后续将补充。

[github-actions]

🎊 PR Preview 1e06d3f has been successfully built and deployed to https://ant-design-cssinjs-preview-pr-184.surge.sh

🕐 Build time: 92.05s

_{🤖 By surge-preview}

[MadCcc]

这个不用 export 了吧

[YumoImer]

https://github.com/search?q=repo%3Aant-design%2Fant-design%20AbstractCalculator&type=code

这里导出的原因是，除了 calc 目录下还有其他地方引用如：https://github.com/ant-design/ant-design/blob/7389fe8cc4c6341058046b35f75715ed21681926/components/theme/util/genComponentStyleHook.tsx#L20

[MadCcc]

• @ant-design/[email protected]