mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

site: rewrite global style => cssinjs (#49179)

Browse Source
This commit is contained in:
lijianan 2024-06-02 21:27:05 +08:00 committed by GitHub
parent d28f684127
commit c7dc0acfb7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 170 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
.dumi/theme/builtins/IconSearch/Category.tsx
View File

@ -1,9 +1,52 @@
import * as React from 'react';
import { useIntl } from 'dumi';
import { App } from 'antd';
import { createStyles } from 'antd-style';
import { useIntl } from 'dumi';
import CopyableIcon from './CopyableIcon';
import type { ThemeType } from './index';
import type { CategoriesKeys } from './fields';
import type { ThemeType } from './IconSearch';
const useStyle = createStyles(({ token, css }) => ({
anticonsList: css`
margin: ${token.marginSM}px 0;
overflow: hidden;
direction: ltr;
list-style: none;
li {
position: relative;
float: left;
width: 16.66%;
height: 100px;
margin: ${token.marginXXS}px 0;
padding: ${token.paddingSM}px 0 0;
overflow: hidden;
color: #555;
text-align: center;
list-style: none;
background-color: inherit;
border-radius: ${token.borderRadiusSM}px;
cursor: pointer;
transition: all ${token.motionDurationSlow} ease-in-out;
.rtl & {
margin: ${token.marginXXS}px 0;
padding: ${token.paddingSM}px 0 0;
}
${token.iconCls} {
margin: ${token.marginSM}px 0 ${token.marginXS}px;
font-size: 36px;
transition: transform ${token.motionDurationSlow} ease-in-out;
will-change: transform;
}
}
`,
copiedCode: css`
padding: 2px 4px;
font-size: ${token.fontSizeSM}px;
background-color: ${token.colorBgLayout};
border-radius: ${token.borderRadiusXS}px;
`,
}));
interface CategoryProps {
title: CategoriesKeys;
@ -15,13 +58,14 @@ interface CategoryProps {
const Category: React.FC<CategoryProps> = (props) => {
const { message } = App.useApp();
const { icons, title, newIcons, theme } = props;
const { styles } = useStyle();
const intl = useIntl();
const [justCopied, setJustCopied] = React.useState<string | null>(null);
const copyId = React.useRef<ReturnType<typeof setTimeout> | null>(null);
const onCopied = React.useCallback((type: string, text: string) => {
message.success(
<span>
<code className="copied-code">{text}</code> copied 🎉
<code className={styles.copiedCode}>{text}</code> copied 🎉
</span>,
);
setJustCopied(type);
@ -40,7 +84,7 @@ const Category: React.FC<CategoryProps> = (props) => {
return (
<div>
<h3>{intl.formatMessage({ id: `app.docs.components.icon.category.${title}` })}</h3>
<ul className="anticons-list">
<ul className={styles.anticonsList}>
{icons.map((name) => (
<CopyableIcon
key={name}

85
.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
View File

@ -1,33 +1,76 @@
import * as React from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import classNames from 'classnames';
import React from 'react';
import * as AntdIcons from '@ant-design/icons';
import { Badge, message } from 'antd';
import type { ThemeType } from './index';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import CopyToClipboard from 'react-copy-to-clipboard';
const allIcons: {
[key: string]: any;
} = AntdIcons;
import type { ThemeType } from './IconSearch';
const allIcons: { [key: PropertyKey]: any } = AntdIcons;
const useStyle = createStyles(({ token, css }) => {
const { antCls, iconCls } = token;
return {
item: css`
&:hover {
color: #fff;
background-color: ${token.colorPrimary};
${iconCls} {
transform: scale(1.3);
}
${antCls}-badge {
color: #fff;
}
}
&.TwoTone:hover {
background-color: #8ecafe;
}
&.copied:hover {
color: rgba(255, 255, 255, 0.2);
}
&::after {
content: 'Copied!';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
line-height: 110px;
text-align: center;
background-color: #1677ff;
opacity: 0;
transition: all ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
&.copied::after {
opacity: 1;
}
`,
anticonCls: css`
display: block;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
white-space: nowrap;
text-align: center;
transform: scale(0.8);
${antCls}-badge {
transition: color ${token.motionDurationSlow} ease-in-out;
}
`,
};
});
export interface CopyableIconProps {
name: string;
isNew: boolean;
theme: ThemeType;
justCopied: string | null;
onCopied: (type: string, text: string) => any;
onCopied: (type: string, text: string) => void;
}
const CopyableIcon: React.FC<CopyableIconProps> = ({
name,
isNew,
justCopied,
onCopied,
theme,
}) => {
const className = classNames({
copied: justCopied === name,
[theme]: !!theme,
});
const CopyableIcon: React.FC<CopyableIconProps> = (props) => {
const { name, isNew, justCopied, theme, onCopied } = props;
const { styles } = useStyle();
const onCopy = (text: string, result: boolean) => {
if (result) {
onCopied(name, text);
@ -37,9 +80,9 @@ const CopyableIcon: React.FC<CopyableIconProps> = ({
};
return (
<CopyToClipboard text={`<${name} />`} onCopy={onCopy}>
<li className={className}>
<li className={classNames(theme, styles.item, { copied: justCopied === name })}>
{React.createElement(allIcons[name])}
<span className="anticon-class">
<span className={styles.anticonCls}>
<Badge dot={isNew}>{name}</Badge>
</span>
</li>

46
.dumi/theme/common/BrowserFrame.tsx
View File

@ -1,7 +1,47 @@
import React from 'react';
import { createStyles } from 'antd-style';
const BrowserFrame: React.FC<React.PropsWithChildren> = ({ children }) => (
<div className="browser-mockup with-url">{children}</div>
);
const useStyle = createStyles(({ token, css }) => ({
browserMockup: css`
position: relative;
border-top: 2em solid rgba(230, 230, 230, 0.7);
border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
&::before {
position: absolute;
top: -1.25em;
left: 1em;
display: block;
width: 0.5em;
height: 0.5em;
background-color: #f44;
border-radius: 50%;
box-shadow:
0 0 0 2px #f44,
1.5em 0 0 2px #9b3,
3em 0 0 2px #fb5;
content: '';
}
&::after {
content: '';
display: block;
position: absolute;
top: -1.6em;
left: 5.5em;
width: calc(100% - 6em);
height: 1.2em;
background-color: #fff;
border-radius: ${token.borderRadiusSM}px;
}
& > * {
display: block;
}
`,
}));
const BrowserFrame: React.FC<React.PropsWithChildren> = ({ children }) => {
const { styles } = useStyle();
return <div className={styles.browserMockup}>{children}</div>;
};
export default BrowserFrame;

22
.dumi/theme/common/Color/ColorStyle.tsx
View File

@ -130,17 +130,17 @@ ${makeGrayPalette(index + 1)}
.main-color {
${makePalette('blue')}
${makePalette('purple')}
${makePalette('cyan')}
${makePalette('green')}
${makePalette('magenta')}
${makePalette('red')}
${makePalette('volcano')}
${makePalette('orange')}
${makePalette('gold')}
${makePalette('yellow')}
${makePalette('lime')}
${makePalette('geekblue')}
${makeGrayPalette()}
${makePalette('cyan')}
${makePalette('green')}
${makePalette('magenta')}
${makePalette('red')}
${makePalette('volcano')}
${makePalette('orange')}
${makePalette('gold')}
${makePalette('yellow')}
${makePalette('lime')}
${makePalette('geekblue')}
${makeGrayPalette()}
text-align: left;

6
.dumi/theme/common/GlobalStyles.tsx
View File

@ -2,13 +2,10 @@ import React from 'react';
import ColorStyle from './Color/ColorStyle';
import {
BrowserMockup,
Common,
Demo,
HeadingAnchor,
Highlight,
Icon,
IconPickSearcher,
Markdown,
NProgress,
PreviewImage,
@ -25,9 +22,6 @@ const GlobalStyles: React.FC = () => (
<Markdown />
<Highlight />
<Demo />
<Icon />
<IconPickSearcher />
<BrowserMockup />
<Responsive />
<NProgress />
<PreviewImage />

68
.dumi/theme/common/styles/BrowserMockup.tsx
View File

@ -1,68 +0,0 @@
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => {
const token = useTheme();
return (
<Global
styles={css`
/* Browser mockup code
* Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
* Live example: https://updown.io
*/
.browser-mockup {
position: relative;
border-top: 2em solid rgba(230, 230, 230, 0.7);
border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
}
.browser-mockup::before {
position: absolute;
top: -1.25em;
left: 1em;
display: block;
width: 0.5em;
height: 0.5em;
background-color: #f44;
border-radius: 50%;
box-shadow:
0 0 0 2px #f44,
1.5em 0 0 2px #9b3,
3em 0 0 2px #fb5;
content: '';
}
.browser-mockup.with-tab::after {
position: absolute;
top: -2em;
left: 5.5em;
display: block;
width: 20%;
height: 0;
border-right: 0.8em solid transparent;
border-bottom: 2em solid white;
border-left: 0.8em solid transparent;
content: '';
}
.browser-mockup.with-url::after {
position: absolute;
top: -1.6em;
left: 5.5em;
display: block;
width: calc(100% - 6em);
height: 1.2em;
background-color: #fff;
border-radius: ${token.borderRadiusXS}px;
content: '';
}
.browser-mockup > * {
display: block;
}
`}
/>
);
};

113
.dumi/theme/common/styles/Icon.tsx
View File

@ -1,113 +0,0 @@
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => {
const token = useTheme();
const { antCls, iconCls } = token;
return (
<Global
styles={css`
ul.anticons-list {
margin: 10px 0;
overflow: hidden;
direction: ltr;
list-style: none;
li {
position: relative;
float: left;
width: 16.66%;
height: 100px;
margin: 3px 0;
padding: 10px 0 0;
overflow: hidden;
color: #555;
text-align: center;
list-style: none;
background-color: inherit;
border-radius: ${token.borderRadiusSM}px;
cursor: pointer;
transition:
color ${token.motionDurationSlow} ease-in-out,
background-color ${token.motionDurationSlow} ease-in-out;
.rtl & {
margin: 3px 0;
padding: 10px 0 0;
}
${iconCls} {
margin: ${token.marginSM}px 0 ${token.marginXS}px;
font-size: 36px;
transition: transform ${token.motionDurationSlow} ease-in-out;
will-change: transform;
}
.anticon-class {
display: block;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
monospace;
white-space: nowrap;
text-align: center;
transform: scale(0.83);
${antCls}-badge {
transition: color ${token.motionDurationSlow} ease-in-out;
}
}
&:hover {
color: #fff;
background-color: ${token.colorPrimary};
${iconCls} {
transform: scale(1.4);
}
${antCls}-badge {
color: #fff;
}
}
&.TwoTone:hover {
background-color: #8ecafe;
}
&.copied:hover {
color: rgba(255, 255, 255, 0.2);
}
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
line-height: 110px;
text-align: center;
background: #1677ff;
opacity: 0;
transition: all ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28);
content: 'Copied!';
}
&.copied::after {
opacity: 1;
}
}
}
.copied-code {
padding: 2px 4px;
font-size: ${token.fontSizeSM}px;
background: ${token.colorBgLayout};
border-radius: ${token.borderRadiusXS}px;
}
`}
/>
);
};

71
.dumi/theme/common/styles/IconPickSearcher.tsx
View File

@ -1,71 +0,0 @@
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => {
const token = useTheme();
const { iconCls } = token;
return (
<Global
styles={css`
.icon-pic-searcher {
display: inline-block;
margin: 0 ${token.marginXS}px;
.icon-pic-btn {
color: ${token.colorIcon};
cursor: pointer;
transition: all ${token.motionDurationSlow};
&:hover {
color: ${token.colorIconHover};
}
}
}
.icon-pic-preview {
width: 66px;
height: 66px;
margin-top: 10px;
padding: ${token.paddingXS}px;
text-align: center;
border: 1px solid ${token.colorBorder};
border-radius: ${token.borderRadiusSM}px;
> img {
max-width: 50px;
max-height: 50px;
}
}
.icon-pic-search-result {
min-height: 50px;
padding: 0 10px;
> .result-tip {
padding: 10px 0;
color: ${token.colorTextSecondary};
}
> table {
width: 100%;
.col-icon {
width: 80px;
padding: 10px 0;
> ${iconCls} {
font-size: ${token.fontSizeHeading2}px;
:hover {
color: ${token.colorLinkHover};
}
}
}
}
}
`}
/>
);
};

6
.dumi/theme/common/styles/NProgress.tsx
View File

@ -1,5 +1,5 @@
import { css, Global } from '@emotion/react';
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => {
@ -13,7 +13,9 @@ export default () => {
}
.peg {
box-shadow: 0 0 10px ${token.colorPrimary}, 0 0 5px ${token.colorPrimary};
box-shadow:
0 0 10px ${token.colorPrimary},
0 0 5px ${token.colorPrimary};
}
.spinner-icon {

3
.dumi/theme/common/styles/index.ts
View File

@ -4,9 +4,6 @@ export { default as Common } from './Common';
export { default as Markdown } from './Markdown';
export { default as Highlight } from './Highlight';
export { default as Demo } from './Demo';
export { default as Icon } from './Icon';
export { default as IconPickSearcher } from './IconPickSearcher';
export { default as BrowserMockup } from './BrowserMockup';
export { default as Responsive } from './Responsive';
export { default as NProgress } from './NProgress';
export { default as PreviewImage } from './PreviewImage';