Closed YumoImer closed 2 weeks ago
genCalc API 由原 https://github.com/ant-design/ant-design/tree/master/components/theme/util/calc 迁移至 @ant-design/cssinjs
genCalc
@ant-design/cssinjs
在 antd 中书写组件样式时,均统一使用 repo 中的 genStyleHooks、mergeToken、genPresetColor、genSubStyleComponent等 API,目前都统一存放于 https://github.com/ant-design/ant-design/tree/master/components/theme/util 目录下。
genStyleHooks
mergeToken
genPresetColor
genSubStyleComponent
当前 antd 有类似@ant-design/web3、@ant-design/x 等生态库,在生态库中编写组件样式时目前几种选择:
@ant-design/web3
@ant-design/x
对于方式一,并不可取,不同的库同样的代码,这会给后续的维护造成负担。
方式二,使用了当前已有的 @ant-design/cssinjs API,如 useStyleRegister 等,详见:https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/theme/useStyle/index.ts
useStyleRegister
方式三,将通用的工具、逻辑抽离至 @ant-design/cssinjs,尽可能减少重复代码。该 RFC 仅迁移工具函数 genCalc 及其对应抽象类 AbstractCalculator
AbstractCalculator
type GenCalcType = (type: 'css' | 'js', unitlessCssVar: Set<string>) => (num: number | string | AbstractCalculator) => CSSCalculator | NumCalculator
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; }
import { genCalc } from '@ant-design/cssinjs'; genCalc('js', new Set()); genCalc('css', new Set());
import type { AbstractCalculator } from '@ant-design/cssinjs';
由于 antd 中常用API genStyleHooks 调用 genSubStyleComponent 调用 genCalc,迁移 genCalc 仅解决部分代码重复问题,后续仍需要持续优化。
另外,需要在 antd 中提 PR 对此次变更兼容。后续将补充。
🎊 PR Preview 1e06d3f81dc267c0fcadc0bf0a4c7fe4952e9478 has been successfully built and deployed to https://ant-design-cssinjs-preview-pr-184.surge.sh
🕐 Build time: 92.05s
🤖 By surge-preview
[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
等生态库,在生态库中编写组件样式时目前几种选择:@ant-design/cssinjs
简单实现类似的功能封装@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 AbstractCalculator
Basic Example
genCalc
type AbstractCalculator
Unresolved questions
由于 antd 中常用API
genStyleHooks
调用genSubStyleComponent
调用genCalc
,迁移genCalc
仅解决部分代码重复问题,后续仍需要持续优化。另外,需要在 antd 中提 PR 对此次变更兼容。后续将补充。