ant-design/components/upload/style/list.ts

130 lines
3.4 KiB
TypeScript
Raw Normal View History

import type { UploadToken } from '.';
import { clearFix, textEllipsis } from '../../style';
chore: migrate to vitest (#42506) * chore: migrate to vitest * chore: update ci * fix: test correctly * test: support puppeteer * chore: update coverage * chore: update include/exclude * chore: update config * test: update incorrect tests * chore: update script * chore: update * fix: should close browser at the ended * chore: improve * fix: test cause tsc error * fix: eslint error * chore: exclude correctly * test: update snap and fix some tests * chore: update test config * fix: countup.js * fix: incorrect test * chore: update reference * test: update * fix: countup.js * fix: timeout * chore: update site test * fix: fixed countup version * chore: remove unsed code * test: update * test: update demo timeout * test: update timeout * chore: update image test * chore: update threads * fix: image/svg+xml test failed * chore: limits threads * test: update test coverage include * chore: remove jest files * chore: rename jest to vi * chore: update document * chore: fix missing @types/jsdom * chore: update coverage * chore: update snap * fix:watermark test cases are incorrect * feat: update ignore comment * test: fix test case * test: reset body scrollTop * test: clean up * test: use vi * test: update snapshot * test: update snapshot * test: fix dropdown test failed * fix: toHaveStyle cause test fail * test: improve test case * test: fix * fix: color failed, refer to https://github.com/jsdom/jsdom/pull/3560 * test: fix * test: fix * test: fix circular import * test: revert * ci: coverage failed * test: fix c8 ignore comment * chore: incorrect config * chore: fix ignore ci * test: revert svg+xml * test: fix realTimers * feat: rc-trigger should be remove * test: fix some failed test * chore: remove unused deps and configure eslint-plugin-vitest * test: update snap * chore: remove jest * test: fix lint error --------- Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
2023-06-07 11:54:50 +08:00
import type { GenerateStyle } from '../../theme/internal';
const genListStyle: GenerateStyle<UploadToken> = (token) => {
const { componentCls, antCls, iconCls, fontSize, lineHeight } = token;
const itemCls = `${componentCls}-list-item`;
const actionsCls = `${itemCls}-actions`;
const actionCls = `${itemCls}-action`;
const listItemHeightSM = Math.round(fontSize * lineHeight);
return {
[`${componentCls}-wrapper`]: {
[`${componentCls}-list`]: {
...clearFix(),
lineHeight: token.lineHeight,
[itemCls]: {
position: 'relative',
height: token.lineHeight * fontSize,
marginTop: token.marginXS,
fontSize,
display: 'flex',
alignItems: 'center',
transition: `background-color ${token.motionDurationSlow}`,
'&:hover': {
backgroundColor: token.controlItemBgHover,
},
[`${itemCls}-name`]: {
...textEllipsis,
padding: `0 ${token.paddingXS}px`,
lineHeight,
flex: 'auto',
transition: `all ${token.motionDurationSlow}`,
},
[actionsCls]: {
[actionCls]: {
opacity: 0,
},
[`${actionCls}${antCls}-btn-sm`]: {
height: listItemHeightSM,
border: 0,
lineHeight: 1,
// FIXME: should not override small button
'> span': {
transform: 'scale(1)',
},
},
[`
${actionCls}:focus-visible,
&.picture ${actionCls}
`]: {
opacity: 1,
},
[iconCls]: {
color: token.actionsColor,
transition: `all ${token.motionDurationSlow}`,
},
[`&:hover ${iconCls}`]: {
color: token.colorText,
},
},
[`${componentCls}-icon ${iconCls}`]: {
2022-08-04 16:16:50 +08:00
color: token.colorTextDescription,
fontSize,
},
[`${itemCls}-progress`]: {
position: 'absolute',
bottom: -token.uploadProgressOffset,
width: '100%',
paddingInlineStart: fontSize + token.paddingXS,
fontSize,
lineHeight: 0,
pointerEvents: 'none',
'> div': {
margin: 0,
},
},
},
[`${itemCls}:hover ${actionCls}`]: {
opacity: 1,
color: token.colorText,
},
[`${itemCls}-error`]: {
color: token.colorError,
[`${itemCls}-name, ${componentCls}-icon ${iconCls}`]: {
color: token.colorError,
},
[actionsCls]: {
[`${iconCls}, ${iconCls}:hover`]: {
color: token.colorError,
},
[actionCls]: {
opacity: 1,
},
},
},
[`${componentCls}-list-item-container`]: {
transition: `opacity ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
// For smooth removing animation
'&::before': {
display: 'table',
width: 0,
height: 0,
content: '""',
},
},
},
},
};
};
export default genListStyle;