2022-11-23 20:22:38 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
2022-04-25 18:46:53 +08:00
|
|
|
import genDraggerStyle from './dragger';
|
|
|
|
import genListStyle from './list';
|
|
|
|
import genMotionStyle from './motion';
|
2022-06-27 14:25:59 +08:00
|
|
|
import { genPictureCardStyle, genPictureStyle } from './picture';
|
2022-04-25 18:46:53 +08:00
|
|
|
import genRtlStyle from './rtl';
|
2022-07-11 15:35:58 +08:00
|
|
|
import { resetComponent } from '../../style';
|
2022-07-19 22:53:38 +08:00
|
|
|
import { genCollapseMotion } from '../../style/motion';
|
2022-04-25 18:46:53 +08:00
|
|
|
|
2022-05-19 10:06:58 +08:00
|
|
|
export interface ComponentToken {}
|
|
|
|
|
|
|
|
export interface UploadToken extends FullToken<'Upload'> {
|
|
|
|
uploadThumbnailSize: number;
|
|
|
|
uploadProgressOffset: number;
|
|
|
|
uploadPicCardSize: number;
|
2022-04-25 18:46:53 +08:00
|
|
|
}
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genBaseStyle: GenerateStyle<UploadToken> = (token) => {
|
2022-07-19 17:51:35 +08:00
|
|
|
const { componentCls, colorTextDisabled } = token;
|
2022-04-25 18:46:53 +08:00
|
|
|
|
|
|
|
return {
|
|
|
|
[`${componentCls}-wrapper`]: {
|
|
|
|
...resetComponent(token),
|
|
|
|
|
|
|
|
[componentCls]: {
|
|
|
|
outline: 0,
|
|
|
|
"input[type='file']": {
|
|
|
|
cursor: 'pointer',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-select`]: {
|
|
|
|
display: 'inline-block',
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-disabled`]: {
|
2022-07-19 17:51:35 +08:00
|
|
|
color: colorTextDisabled,
|
2022-04-25 18:46:53 +08:00
|
|
|
cursor: 'not-allowed',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-11-19 13:47:33 +08:00
|
|
|
export default genComponentStyleHook('Upload', (token) => {
|
2022-11-01 15:06:38 +08:00
|
|
|
const { fontSizeHeading3, fontSize, lineHeight, lineWidth, controlHeightLG } = token;
|
|
|
|
const listItemHeightSM = Math.round(fontSize * lineHeight);
|
2022-05-19 10:06:58 +08:00
|
|
|
|
|
|
|
const uploadToken = mergeToken<UploadToken>(token, {
|
|
|
|
uploadThumbnailSize: fontSizeHeading3 * 2,
|
|
|
|
uploadProgressOffset: listItemHeightSM / 2 + lineWidth,
|
|
|
|
uploadPicCardSize: controlHeightLG * 2.55,
|
|
|
|
});
|
|
|
|
|
|
|
|
return [
|
|
|
|
genBaseStyle(uploadToken),
|
|
|
|
genDraggerStyle(uploadToken),
|
|
|
|
genPictureStyle(uploadToken),
|
|
|
|
genPictureCardStyle(uploadToken),
|
|
|
|
genListStyle(uploadToken),
|
|
|
|
genMotionStyle(uploadToken),
|
|
|
|
genRtlStyle(uploadToken),
|
2022-07-19 22:53:38 +08:00
|
|
|
genCollapseMotion(uploadToken),
|
2022-05-19 10:06:58 +08:00
|
|
|
];
|
|
|
|
});
|