-
Notifications
You must be signed in to change notification settings - Fork 142
/
index.ts
88 lines (80 loc) · 2.22 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import type React from 'react';
import { useContext } from 'react';
import type { CSSInterpolation } from '@ant-design/cssinjs';
import { useStyleRegister } from '@ant-design/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import { ConfigProvider as AntdConfigProvider, theme as AntTheme } from 'antd';
import type { GlobalToken } from 'antd';
const { useToken } = AntTheme;
/**
* Set alpha for a color
* @example (#fff, 0.5) => rgba(255, 255, 255, 0.5)
* @param baseColor {string}
* @param alpha {0-1}
* @returns rgba {string}
*/
export const setAlpha = (baseColor: string, alpha: number) =>
new TinyColor(baseColor).setAlpha(alpha).toRgbString();
/**
* Lighten a color
* @example (#000, 50) => #808080
* @param baseColor {string}
* @param brightness {0-100}
* @returns hexColor {string}
*/
export const lighten = (baseColor: string, brightness: number) => {
const instance = new TinyColor(baseColor);
return instance.lighten(brightness).toHexString();
};
export type GenerateStyle<
ComponentToken extends object = GlobalToken,
ReturnType = CSSInterpolation,
> = (token: ComponentToken, ...rest: any[]) => ReturnType;
export type UseStyleResult = {
wrapSSR: (node: React.ReactElement) => React.ReactElement;
hashId: string;
};
export type Web3AliasToken = GlobalToken & {
/**
* className for web3 components
* @type {string}
* @example .ant-pro
*/
web3ComponentsCls: string;
/**
* antd 的 className
* @type {string}
* @example .ant
*/
antCls: string;
};
/**
* useStyle for css in js
* @param componentName {string} 组件的名字
* @param styleFn {GenerateStyle} 生成样式的函数
* @returns UseStyleResult
*/
export function useStyle(
componentName: string,
styleFn: (token: Web3AliasToken) => CSSInterpolation,
) {
const { theme, token, hashId } = useToken();
const { getPrefixCls } = useContext(AntdConfigProvider.ConfigContext);
const web3Token = {
...token,
web3ComponentsCls: `.${getPrefixCls('web3')}`,
antCls: `.${getPrefixCls()}`,
};
return {
wrapSSR: useStyleRegister(
{
theme,
token: web3Token,
hashId,
path: [componentName],
},
() => styleFn(web3Token as Web3AliasToken),
),
hashId,
};
}