mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-19 06:43:16 +08:00
docs: adjust home image load logic (#43798)
* docs: add webp format * docs: img loaded keys * docs: auto color * docs: fix lint * chore: fix theme switch * fix: logo missing
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
86833b9768
commit
87a1004ff4
@ -1,5 +1,7 @@
|
||||
import { createStyles, css } from 'antd-style';
|
||||
import React, { useMemo } from 'react';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { CSSMotionList } from 'rc-motion';
|
||||
import classNames from 'classnames';
|
||||
import { COLOR_IMAGES, getClosetColor } from './colorUtil';
|
||||
|
||||
export interface BackgroundImageProps {
|
||||
@ -9,34 +11,73 @@ export interface BackgroundImageProps {
|
||||
|
||||
const useStyle = createStyles(({ token }) => ({
|
||||
image: css`
|
||||
transition: all ${token.motionDurationSlow};
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
object-position: right top;
|
||||
`,
|
||||
transition: all ${token.motionDurationSlow};
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
object-position: right top;
|
||||
`,
|
||||
}));
|
||||
|
||||
const onShow = () => ({
|
||||
opacity: 1,
|
||||
});
|
||||
const onHide = () => ({
|
||||
opacity: 0,
|
||||
});
|
||||
|
||||
const BackgroundImage: React.FC<BackgroundImageProps> = ({ colorPrimary, isLight }) => {
|
||||
const activeColor = useMemo(() => getClosetColor(colorPrimary), [colorPrimary]);
|
||||
|
||||
const { styles } = useStyle();
|
||||
|
||||
const [keyList, setKeyList] = useState<string[]>([]);
|
||||
|
||||
React.useLayoutEffect(() => {
|
||||
setKeyList([activeColor]);
|
||||
}, [activeColor]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{COLOR_IMAGES.filter(({ url }) => url).map(({ color, url }) => (
|
||||
<img
|
||||
className={styles.image}
|
||||
style={{ opacity: isLight && activeColor === color ? 1 : 0 }}
|
||||
key={color}
|
||||
src={url}
|
||||
alt=""
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
<CSSMotionList
|
||||
keys={keyList}
|
||||
motionName="transition"
|
||||
onEnterStart={onHide}
|
||||
onAppearStart={onHide}
|
||||
onEnterActive={onShow}
|
||||
onAppearActive={onShow}
|
||||
onLeaveStart={onShow}
|
||||
onLeaveActive={onHide}
|
||||
motionDeadline={500}
|
||||
>
|
||||
{({ key: color, className, style }) => {
|
||||
const cls = classNames(styles.image, className);
|
||||
const entity = COLOR_IMAGES.find((ent) => ent.color === color);
|
||||
|
||||
if (!entity || !entity.url) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { opacity } = style || {};
|
||||
|
||||
return (
|
||||
<picture>
|
||||
<source srcSet={entity.webp} type="image/webp" />
|
||||
<source srcSet={entity.url} type="image/jpeg" />
|
||||
<img
|
||||
className={cls}
|
||||
style={{
|
||||
...style,
|
||||
opacity: isLight ? opacity : 0,
|
||||
}}
|
||||
src={entity.url}
|
||||
alt=""
|
||||
/>
|
||||
</picture>
|
||||
);
|
||||
}}
|
||||
</CSSMotionList>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -8,34 +8,42 @@ export const COLOR_IMAGES = [
|
||||
color: DEFAULT_COLOR,
|
||||
// url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QEAoSL8uVi4AAAAAAAAAAAAAARQnAQ',
|
||||
url: null,
|
||||
webp: null,
|
||||
},
|
||||
{
|
||||
color: '#5A54F9',
|
||||
url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*MtVDSKukKj8AAAAAAAAAAAAAARQnAQ',
|
||||
url: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*H8nRT7_q0EwAAAAAAAAAAAAADrJ8AQ/original',
|
||||
webp: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*H8nRT7_q0EwAAAAAAAAAAAAADrJ8AQ/fmt.webp',
|
||||
},
|
||||
{
|
||||
color: '#9E339F',
|
||||
url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*FMluR4vJhaQAAAAAAAAAAAAAARQnAQ',
|
||||
webp: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*CMCMTKV51tIAAAAAAAAAAAAADrJ8AQ/fmt.webp',
|
||||
},
|
||||
{
|
||||
color: PINK_COLOR,
|
||||
url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DGZXS4YOGp0AAAAAAAAAAAAAARQnAQ',
|
||||
webp: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*s5OdR6wZZIkAAAAAAAAAAAAADrJ8AQ/fmt.webp',
|
||||
},
|
||||
{
|
||||
color: '#E0282E',
|
||||
url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*w6xcR7MriwEAAAAAAAAAAAAAARQnAQ',
|
||||
webp: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HE_4Qp_XfQQAAAAAAAAAAAAADrJ8AQ/fmt.webp',
|
||||
},
|
||||
{
|
||||
color: '#F4801A',
|
||||
url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VWFOTbEyU9wAAAAAAAAAAAAAARQnAQ',
|
||||
webp: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xTG2QbottAQAAAAAAAAAAAAADrJ8AQ/fmt.webp',
|
||||
},
|
||||
{
|
||||
color: '#F2BD27',
|
||||
url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1yydQLzw5nYAAAAAAAAAAAAAARQnAQ',
|
||||
webp: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hbPfSbF-xPIAAAAAAAAAAAAADrJ8AQ/fmt.webp',
|
||||
},
|
||||
{
|
||||
color: '#00B96B',
|
||||
url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*XpGeRoZKGycAAAAAAAAAAAAAARQnAQ',
|
||||
webp: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*iM6CQ496P3oAAAAAAAAAAAAADrJ8AQ/fmt.webp',
|
||||
},
|
||||
] as const;
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import {
|
||||
BellOutlined,
|
||||
FolderOutlined,
|
||||
@ -87,12 +88,12 @@ const useStyle = createStyles(({ token, cx }) => {
|
||||
const { carousel } = getCarouselStyle();
|
||||
|
||||
const demo = css`
|
||||
overflow: hidden;
|
||||
background: rgba(240, 242, 245, 0.25);
|
||||
backdrop-filter: blur(50px);
|
||||
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
|
||||
transition: all ${token.motionDurationSlow};
|
||||
`;
|
||||
overflow: hidden;
|
||||
background: rgba(240, 242, 245, 0.25);
|
||||
backdrop-filter: blur(50px);
|
||||
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
|
||||
transition: all ${token.motionDurationSlow};
|
||||
`;
|
||||
|
||||
return {
|
||||
demo,
|
||||
@ -177,12 +178,6 @@ const useStyle = createStyles(({ token, cx }) => {
|
||||
}
|
||||
`,
|
||||
|
||||
logoImgPureColor: css`
|
||||
img {
|
||||
transform: translate3d(-30px, 0, 0);
|
||||
}
|
||||
`,
|
||||
|
||||
transBg: css`
|
||||
background: transparent !important;
|
||||
`,
|
||||
@ -245,6 +240,10 @@ function getTitleColor(colorPrimary: string | Color, isLight?: boolean) {
|
||||
case '#F2BD27':
|
||||
return undefined;
|
||||
|
||||
case '#5A54F9':
|
||||
case '#E0282E':
|
||||
return '#FFF';
|
||||
|
||||
default:
|
||||
return color.toHsb().b < 0.7 ? '#FFF' : undefined;
|
||||
}
|
||||
@ -279,6 +278,27 @@ const ThemesInfo: Record<THEME, Partial<ThemeData>> = {
|
||||
},
|
||||
};
|
||||
|
||||
function rgbToColorMatrix(color: string) {
|
||||
const rgb = new TinyColor(color).toRgb();
|
||||
const { r, g, b } = rgb;
|
||||
|
||||
const normalize = (value) => value / 255;
|
||||
const invertValue = normalize(r) * 100;
|
||||
const sepiaValue = 100;
|
||||
const saturateValue = Math.max(normalize(r), normalize(g), normalize(b)) * 10000;
|
||||
const hueRotateValue =
|
||||
((Math.atan2(
|
||||
Math.sqrt(3) * (normalize(g) - normalize(b)),
|
||||
2 * normalize(r) - normalize(g) - normalize(b),
|
||||
) *
|
||||
180) /
|
||||
Math.PI +
|
||||
360) %
|
||||
360;
|
||||
|
||||
return `invert(${invertValue}%) sepia(${sepiaValue}%) saturate(${saturateValue}%) hue-rotate(${hueRotateValue}deg)`;
|
||||
}
|
||||
|
||||
export default function Theme() {
|
||||
const { styles } = useStyle();
|
||||
const token = useTheme();
|
||||
@ -399,19 +419,15 @@ export default function Theme() {
|
||||
>
|
||||
{/* Logo */}
|
||||
<div className={styles.logo}>
|
||||
<div
|
||||
className={classNames(
|
||||
styles.logoImg,
|
||||
closestColor !== DEFAULT_COLOR && styles.logoImgPureColor,
|
||||
)}
|
||||
>
|
||||
<div className={styles.logoImg}>
|
||||
<img
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||||
style={{
|
||||
filter:
|
||||
closestColor === DEFAULT_COLOR
|
||||
? undefined
|
||||
: `drop-shadow(30px 0 0 ${logoColor})`,
|
||||
: // : `drop-shadow(30px 0 0 ${logoColor})`,
|
||||
rgbToColorMatrix(logoColor),
|
||||
}}
|
||||
alt=""
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user