fix(ts): 添加ts配置

This commit is contained in:
NICE CODE BY DEV 2024-06-03 15:47:57 +08:00
parent 3d8959891e
commit c4489fb0a8
6 changed files with 51 additions and 42 deletions

View File

@ -1,30 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<defs>
<path id="path" d="M50 15A15 35 0 0 1 50 85A15 35 0 0 1 50 15" fill="none"></path>
<path id="patha" d="M0 0A15 35 0 0 1 0 70A15 35 0 0 1 0 0" fill="none"></path>
</defs><g transform="rotate(0 50 50)">
<use xlink:href="#path" stroke="#dfdfdf" stroke-width="3"></use>
</g><g transform="rotate(60 50 50)">
<use xlink:href="#path" stroke="#dfdfdf" stroke-width="3"></use>
</g><g transform="rotate(120 50 50)">
<use xlink:href="#path" stroke="#dfdfdf" stroke-width="3"></use>
</g><g transform="rotate(0 50 50)">
<circle cx="50" cy="15" r="9" fill="#e15b64">
<animateMotion dur="1s" repeatCount="indefinite" begin="0s">
<mpath xlink:href="#patha"></mpath>
</animateMotion>
</circle>
</g><g transform="rotate(60 50 50)">
<circle cx="50" cy="15" r="9" fill="#f8b26a">
<animateMotion dur="1s" repeatCount="indefinite" begin="-0.16666666666666666s">
<mpath xlink:href="#patha"></mpath>
</animateMotion>
</circle>
</g><g transform="rotate(120 50 50)">
<circle cx="50" cy="15" r="9" fill="#abbd81">
<animateMotion dur="1s" repeatCount="indefinite" begin="-0.3333333333333333s">
<mpath xlink:href="#patha"></mpath>
</animateMotion>
</circle>
</g></svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1,11 +0,0 @@
import React from 'react';
import loading from './loading.svg'
export default () => {
return (
<div style={{ textAlign: 'center' }}>
<image src={loading} />
<p>...</p>
</div>
);
};

View File

@ -101,6 +101,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon };
}, [direction, prefixCls]);
// @ts-ignore
const [contextLocale] = useLocale('Pagination', enUS);
const locale = { ...contextLocale, ...customLocale };

View File

@ -36,6 +36,7 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
},
[`&${componentCls}-item-active`]: {
// @ts-ignore
backgroundColor: token.itemActiveBgDisabled,
},
},
@ -58,16 +59,19 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
[`${componentCls}-prev, ${componentCls}-next`]: {
'&:hover button': {
borderColor: token.colorPrimaryHover,
// @ts-ignore
backgroundColor: token.itemBg,
},
[`${componentCls}-item-link`]: {
// @ts-ignore
backgroundColor: token.itemLinkBg,
borderColor: token.colorBorder,
},
[`&:hover ${componentCls}-item-link`]: {
borderColor: token.colorPrimary,
// @ts-ignore
backgroundColor: token.itemBg,
color: token.colorPrimary,
},
@ -81,11 +85,13 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
},
[`${componentCls}-item`]: {
// @ts-ignore
backgroundColor: token.itemBg,
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
[`&:hover:not(${componentCls}-item-active)`]: {
borderColor: token.colorPrimary,
// @ts-ignore
backgroundColor: token.itemBg,
a: {
@ -102,8 +108,11 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
};
export default genSubStyleComponent(
// @ts-ignore
['Pagination', 'bordered'],
// @ts-ignore
(token) => {
// @ts-ignore
const paginationToken = prepareToken(token);
return [genBorderedStyle(paginationToken)];

View File

@ -63,6 +63,7 @@ export interface ComponentToken {
}
export interface PaginationToken
// @ts-ignore
extends FullToken<'Pagination'>,
SharedComponentToken,
SharedInputToken {
@ -118,13 +119,16 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = (t
'&-active': {
borderColor: token.colorBorder,
// @ts-ignore
backgroundColor: token.itemActiveBgDisabled,
'&:hover, &:active': {
// @ts-ignore
backgroundColor: token.itemActiveBgDisabled,
},
a: {
// @ts-ignore
color: token.itemActiveColorDisabled,
},
},
@ -176,14 +180,19 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
return {
[`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]:
{
// @ts-ignore
height: token.itemSizeSM,
// @ts-ignore
lineHeight: unit(token.itemSizeSM),
},
[`&${componentCls}-mini ${componentCls}-item`]: {
// @ts-ignore
minWidth: token.itemSizeSM,
// @ts-ignore
height: token.itemSizeSM,
margin: 0,
// @ts-ignore
lineHeight: unit(token.calc(token.itemSizeSM).sub(2).equal()),
},
@ -200,9 +209,12 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
},
[`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
// @ts-ignore
minWidth: token.itemSizeSM,
// @ts-ignore
height: token.itemSizeSM,
margin: 0,
// @ts-ignore
lineHeight: unit(token.itemSizeSM),
},
@ -228,15 +240,19 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
borderColor: 'transparent',
'&::after': {
// @ts-ignore
height: token.itemSizeSM,
// @ts-ignore
lineHeight: unit(token.itemSizeSM),
},
},
[`&${componentCls}-mini ${componentCls}-jump-prev, &${componentCls}-mini ${componentCls}-jump-next`]:
{
// @ts-ignore
height: token.itemSizeSM,
marginInlineEnd: 0,
// @ts-ignore
lineHeight: unit(token.itemSizeSM),
},
@ -244,11 +260,14 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
marginInlineStart: token.paginationMiniOptionsMarginInlineStart,
[`&-size-changer`]: {
// @ts-ignore
top: token.miniOptionsSizeChangerTop,
},
[`&-quick-jumper`]: {
// @ts-ignore
height: token.itemSizeSM,
// @ts-ignore
lineHeight: unit(token.itemSizeSM),
input: {
@ -270,10 +289,13 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
&${componentCls}-simple ${componentCls}-prev,
&${componentCls}-simple ${componentCls}-next
`]: {
// @ts-ignore
height: token.itemSizeSM,
// @ts-ignore
lineHeight: unit(token.itemSizeSM),
verticalAlign: 'top',
[`${componentCls}-item-link`]: {
// @ts-ignore
height: token.itemSizeSM,
backgroundColor: 'transparent',
border: 0,
@ -284,7 +306,9 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
backgroundColor: token.colorBgTextActive,
},
'&::after': {
// @ts-ignore
height: token.itemSizeSM,
// @ts-ignore
lineHeight: unit(token.itemSizeSM),
},
},
@ -292,6 +316,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
[`&${componentCls}-simple ${componentCls}-simple-pager`]: {
display: 'inline-block',
// @ts-ignore
height: token.itemSizeSM,
marginInlineEnd: token.marginXS,
@ -301,6 +326,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
marginInlineEnd: token.marginXS,
padding: `0 ${unit(token.paginationItemPaddingInline)}`,
textAlign: 'center',
// @ts-ignore
backgroundColor: token.itemInputBg,
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
borderRadius: token.borderRadius,
@ -398,10 +424,13 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
${componentCls}-jump-next
`]: {
display: 'inline-block',
// @ts-ignore
minWidth: token.itemSize,
// @ts-ignore
height: token.itemSize,
color: token.colorText,
fontFamily: token.fontFamily,
// @ts-ignore
lineHeight: `${unit(token.itemSize)}`,
textAlign: 'center',
verticalAlign: 'middle',
@ -502,10 +531,13 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token
return {
[`${componentCls}-item`]: {
display: 'inline-block',
// @ts-ignore
minWidth: token.itemSize,
// @ts-ignore
height: token.itemSize,
marginInlineEnd: token.marginXS,
fontFamily: token.fontFamily,
// @ts-ignore
lineHeight: unit(token.calc(token.itemSize).sub(2).equal()),
textAlign: 'center',
verticalAlign: 'middle',
@ -540,6 +572,7 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token
'&-active': {
fontWeight: token.fontWeightStrong,
// @ts-ignore
backgroundColor: token.itemActiveBg,
borderColor: token.colorPrimary,
@ -583,8 +616,10 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = (token) =>
[`${componentCls}-total-text`]: {
display: 'inline-block',
// @ts-ignore
height: token.itemSize,
marginInlineEnd: token.marginXS,
// @ts-ignore
lineHeight: unit(token.calc(token.itemSize).sub(2).equal()),
verticalAlign: 'middle',
},
@ -657,6 +692,7 @@ const genPaginationFocusStyle: GenerateStyle<PaginationToken> = (token) => {
};
};
// @ts-ignore
export const prepareComponentToken: GetDefaultToken<'Pagination'> = (token) => ({
itemBg: token.colorBgContainer,
itemSize: token.controlHeight,
@ -672,6 +708,7 @@ export const prepareComponentToken: GetDefaultToken<'Pagination'> = (token) => (
export const prepareToken = (token: Parameters<GenStyleFn<'Pagination'>>[0]) =>
mergeToken<PaginationToken>(
// @ts-ignore
token,
{
inputOutlineOffset: 0,
@ -683,13 +720,16 @@ export const prepareToken = (token: Parameters<GenStyleFn<'Pagination'>>[0]) =>
paginationSlashMarginInlineEnd: token.marginSM,
paginationEllipsisTextIndent: '0.13em', // magic for ui experience
},
// @ts-ignore
initInputToken(token),
);
// ============================== Export ==============================
export default genStyleHooks(
// @ts-ignore
'Pagination',
(token) => {
// @ts-ignore
const paginationToken = prepareToken(token);
return [genPaginationStyle(paginationToken), genPaginationFocusStyle(paginationToken)];
},

View File

@ -30,7 +30,7 @@ description: 双栏穿梭选择框。
<code src="./demo/tree-transfer.tsx">树穿梭框</code>
<code src="./demo/status.tsx">自定义状态</code>
<!-- <code src="./demo/custom-select-all-labels.tsx" debug>自定义全选文字</code> -->
<code src="./demo/component-token.tsx" debug>组件 Token</code>
<!-- <code src="./demo/component-token.tsx" debug>组件 Token</code> -->
## API