mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
refactoring: js => ts (#39355)
This commit is contained in:
lijianan
GitHub
parent
52c50dfb57
commit
7641b2f9c5
@ -1,4 +1,3 @@
|
||||
// @ts-ignore
|
||||
import Palette from '../../common/Color/Palette';
|
||||
|
||||
export default Palette;
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const BrowserFrame = ({ children }) => <div className="browser-mockup with-url">{children}</div>;
|
||||
|
||||
export default BrowserFrame;
|
||||
7
.dumi/theme/common/BrowserFrame.tsx
Normal file
7
.dumi/theme/common/BrowserFrame.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
const BrowserFrame: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
|
||||
<div className="browser-mockup with-url">{children}</div>
|
||||
);
|
||||
|
||||
export default BrowserFrame;
|
||||
@ -1,12 +1,14 @@
|
||||
import React from 'react';
|
||||
import Icon from '@ant-design/icons';
|
||||
|
||||
const SVGIcon = () => (
|
||||
const SVGIcon: React.FC = () => (
|
||||
<svg viewBox="0 0 15 15" fill="currentColor">
|
||||
<path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CodePenIcon = (props) => <Icon component={SVGIcon} {...props} />;
|
||||
const CodePenIcon: React.FC<{ className?: string }> = (props) => (
|
||||
<Icon component={SVGIcon} {...props} />
|
||||
);
|
||||
|
||||
export default CodePenIcon;
|
||||
@ -8,31 +8,25 @@ const LANGS = {
|
||||
jsx: 'JavaScript',
|
||||
};
|
||||
|
||||
const CodePreview = ({ toReactComponent, codes, onCodeTypeChange }) => {
|
||||
interface CodePreviewProps {
|
||||
codes?: Record<PropertyKey, string>;
|
||||
toReactComponent?: (node: any) => React.ReactNode;
|
||||
onCodeTypeChange?: (activeKey: string) => void;
|
||||
}
|
||||
|
||||
const CodePreview: React.FC<CodePreviewProps> = ({ toReactComponent, codes, onCodeTypeChange }) => {
|
||||
const langList = Object.keys(codes).sort().reverse();
|
||||
|
||||
let content;
|
||||
let content: React.ReactNode;
|
||||
|
||||
if (langList.length === 1) {
|
||||
content = toReactComponent([
|
||||
'pre',
|
||||
{
|
||||
lang: langList[0],
|
||||
highlighted: codes[langList[0]],
|
||||
},
|
||||
]);
|
||||
content = toReactComponent(['pre', { lang: langList[0], highlighted: codes[langList[0]] }]);
|
||||
} else {
|
||||
content = (
|
||||
<Tabs centered onChange={onCodeTypeChange}>
|
||||
{langList.map((lang) => (
|
||||
<TabPane tab={LANGS[lang]} key={lang}>
|
||||
{toReactComponent([
|
||||
'pre',
|
||||
{
|
||||
lang,
|
||||
highlighted: codes[lang],
|
||||
},
|
||||
])}
|
||||
{toReactComponent(['pre', { lang, highlighted: codes[lang] }])}
|
||||
</TabPane>
|
||||
))}
|
||||
</Tabs>
|
||||
@ -1,12 +1,14 @@
|
||||
import React from 'react';
|
||||
import Icon from '@ant-design/icons';
|
||||
|
||||
const SVGIcon = () => (
|
||||
const SVGIcon: React.FC = () => (
|
||||
<svg viewBox="0 0 1024 1024" fill="currentColor">
|
||||
<path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CodeSandboxIcon = (props) => <Icon component={SVGIcon} {...props} />;
|
||||
const CodeSandboxIcon: React.FC<{ className?: string }> = (props) => (
|
||||
<Icon component={SVGIcon} {...props} />
|
||||
);
|
||||
|
||||
export default CodeSandboxIcon;
|
||||
@ -2,7 +2,13 @@ import React, { Component } from 'react';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { message } from 'antd';
|
||||
|
||||
export default class ColorBlock extends Component {
|
||||
interface ColorBlockProps {
|
||||
color: string;
|
||||
index: number;
|
||||
dark?: boolean;
|
||||
}
|
||||
|
||||
class ColorBlock extends Component<ColorBlockProps> {
|
||||
getTextStyle() {
|
||||
const { color, index, dark } = this.props;
|
||||
const colorMap = {
|
||||
@ -25,7 +31,7 @@ export default class ColorBlock extends Component {
|
||||
render() {
|
||||
const { color, index } = this.props;
|
||||
return (
|
||||
<CopyToClipboard text={color} onCopy={this.onCopied} title="click to copy color">
|
||||
<CopyToClipboard text={color} onCopy={this.onCopied}>
|
||||
<div className="main-color-item" style={this.getTextStyle()}>
|
||||
color-{index}
|
||||
<span className="main-color-value">{color.toLowerCase()}</span>
|
||||
@ -34,3 +40,5 @@ export default class ColorBlock extends Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ColorBlock;
|
||||
@ -1,3 +1,4 @@
|
||||
import type { ChangeEvent } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { FormattedMessage } from 'dumi';
|
||||
import ColorPicker from './ColorPicker';
|
||||
@ -6,18 +7,17 @@ import ColorPatterns from './ColorPatterns';
|
||||
const primaryMinSaturation = 70; // 主色推荐最小饱和度
|
||||
const primaryMinBrightness = 70; // 主色推荐最小亮度
|
||||
|
||||
export default class ColorPaletteTool extends Component {
|
||||
class ColorPaletteTool extends Component {
|
||||
state = {
|
||||
primaryColor: '#1890ff',
|
||||
primaryColorInstance: null,
|
||||
};
|
||||
|
||||
handleChangeColor = (e, color) => {
|
||||
const value = e.target ? e.target.value : e;
|
||||
this.setState({
|
||||
primaryColor: value,
|
||||
primaryColorInstance: color,
|
||||
});
|
||||
handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => {
|
||||
const value = (e as ChangeEvent<HTMLInputElement>).target
|
||||
? (e as ChangeEvent<HTMLInputElement>).target.value
|
||||
: e;
|
||||
this.setState({ primaryColor: value, primaryColorInstance: color });
|
||||
};
|
||||
|
||||
renderColorValidation() {
|
||||
@ -45,12 +45,10 @@ export default class ColorPaletteTool extends Component {
|
||||
<div className="color-palette-pick">
|
||||
<FormattedMessage id="app.docs.color.pick-primary" />
|
||||
</div>
|
||||
<div className="main-color">
|
||||
<ColorPatterns color={primaryColor} />
|
||||
</div>
|
||||
<div className="main-color">{ColorPatterns({ color: primaryColor })}</div>
|
||||
<div className="color-palette-picker">
|
||||
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
|
||||
<ColorPicker type="chrome" color={primaryColor} onChange={this.handleChangeColor} />
|
||||
<ColorPicker color={primaryColor} onChange={this.handleChangeColor} />
|
||||
</span>
|
||||
<span className="color-palette-picker-value">{primaryColor}</span>
|
||||
{this.renderColorValidation()}
|
||||
@ -59,3 +57,5 @@ export default class ColorPaletteTool extends Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ColorPaletteTool;
|
||||
@ -1,3 +1,4 @@
|
||||
import type { ChangeEvent } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { FormattedMessage } from 'dumi';
|
||||
import { Row, Col } from 'antd';
|
||||
@ -7,26 +8,25 @@ import ColorPatterns from './ColorPatterns';
|
||||
const primaryMinSaturation = 70; // 主色推荐最小饱和度
|
||||
const primaryMinBrightness = 70; // 主色推荐最小亮度
|
||||
|
||||
export default class ColorPaletteTool extends Component {
|
||||
class ColorPaletteTool extends Component {
|
||||
state = {
|
||||
primaryColor: '#1890ff',
|
||||
backgroundColor: '#141414',
|
||||
primaryColorInstance: null,
|
||||
};
|
||||
|
||||
handleChangeColor = (e, color) => {
|
||||
const value = e.target ? e.target.value : e;
|
||||
this.setState({
|
||||
primaryColor: value,
|
||||
primaryColorInstance: color,
|
||||
});
|
||||
handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => {
|
||||
const value = (e as ChangeEvent<HTMLInputElement>).target
|
||||
? (e as ChangeEvent<HTMLInputElement>).target.value
|
||||
: e;
|
||||
this.setState({ primaryColor: value, primaryColorInstance: color });
|
||||
};
|
||||
|
||||
handleChangeBackgroundColor = (e) => {
|
||||
const value = e.target ? e.target.value : e;
|
||||
this.setState({
|
||||
backgroundColor: value,
|
||||
});
|
||||
handleChangeBackgroundColor = (e: string | ChangeEvent) => {
|
||||
const value = (e as ChangeEvent<HTMLInputElement>).target
|
||||
? (e as ChangeEvent<HTMLInputElement>).target.value
|
||||
: e;
|
||||
this.setState({ backgroundColor: value });
|
||||
};
|
||||
|
||||
renderColorValidation() {
|
||||
@ -56,7 +56,7 @@ export default class ColorPaletteTool extends Component {
|
||||
return (
|
||||
<div className="color-palette-horizontal color-palette-horizontal-dark">
|
||||
<div className="main-color">
|
||||
<ColorPatterns color={primaryColor} dark backgroundColor={backgroundColor} />
|
||||
{ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
|
||||
</div>
|
||||
<div className="color-palette-picker">
|
||||
<Row>
|
||||
@ -67,11 +67,7 @@ export default class ColorPaletteTool extends Component {
|
||||
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
|
||||
<Row>
|
||||
<Col span={18}>
|
||||
<ColorPicker
|
||||
type="chrome"
|
||||
color={primaryColor}
|
||||
onChange={this.handleChangeColor}
|
||||
/>
|
||||
<ColorPicker color={primaryColor} onChange={this.handleChangeColor} />
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<span className="color-palette-pick-hex">{primaryColor}</span>
|
||||
@ -87,7 +83,6 @@ export default class ColorPaletteTool extends Component {
|
||||
<Row>
|
||||
<Col span={18}>
|
||||
<ColorPicker
|
||||
type="chrome"
|
||||
color={backgroundColor}
|
||||
onChange={this.handleChangeBackgroundColor}
|
||||
/>
|
||||
@ -105,3 +100,5 @@ export default class ColorPaletteTool extends Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ColorPaletteTool;
|
||||
@ -1,94 +0,0 @@
|
||||
import React from 'react';
|
||||
import cls from 'classnames';
|
||||
import Palette from './Palette';
|
||||
|
||||
const ColorPalettes = (props) => {
|
||||
const { dark } = props;
|
||||
|
||||
const colors = [
|
||||
{
|
||||
name: 'red',
|
||||
english: 'Dust Red',
|
||||
chinese: '薄暮',
|
||||
description: '斗志、奔放',
|
||||
},
|
||||
{
|
||||
name: 'volcano',
|
||||
english: 'Volcano',
|
||||
chinese: '火山',
|
||||
description: '醒目、澎湃',
|
||||
},
|
||||
{
|
||||
name: 'orange',
|
||||
english: 'Sunset Orange',
|
||||
chinese: '日暮',
|
||||
description: '温暖、欢快',
|
||||
},
|
||||
{
|
||||
name: 'gold',
|
||||
english: 'Calendula Gold',
|
||||
chinese: '金盏花',
|
||||
description: '活力、积极',
|
||||
},
|
||||
{
|
||||
name: 'yellow',
|
||||
english: 'Sunrise Yellow',
|
||||
chinese: '日出',
|
||||
description: '出生、阳光',
|
||||
},
|
||||
{
|
||||
name: 'lime',
|
||||
english: 'Lime',
|
||||
chinese: '青柠',
|
||||
description: '自然、生机',
|
||||
},
|
||||
{
|
||||
name: 'green',
|
||||
english: 'Polar Green',
|
||||
chinese: '极光绿',
|
||||
description: '健康、创新',
|
||||
},
|
||||
{
|
||||
name: 'cyan',
|
||||
english: 'Cyan',
|
||||
chinese: '明青',
|
||||
description: '希望、坚强',
|
||||
},
|
||||
{
|
||||
name: 'blue',
|
||||
english: 'Daybreak Blue',
|
||||
chinese: '拂晓蓝',
|
||||
description: '包容、科技、普惠',
|
||||
},
|
||||
{
|
||||
name: 'geekblue',
|
||||
english: 'Geek Blue',
|
||||
chinese: '极客蓝',
|
||||
description: '探索、钻研',
|
||||
},
|
||||
{
|
||||
name: 'purple',
|
||||
english: 'Golden Purple',
|
||||
chinese: '酱紫',
|
||||
description: '优雅、浪漫',
|
||||
},
|
||||
{
|
||||
name: 'magenta',
|
||||
english: 'Magenta',
|
||||
chinese: '法式洋红',
|
||||
description: '明快、感性',
|
||||
},
|
||||
];
|
||||
const colorCls = cls('color-palettes', {
|
||||
'color-palettes-dark': !!dark,
|
||||
});
|
||||
return (
|
||||
<div className={colorCls}>
|
||||
{colors.map((color) => (
|
||||
<Palette key={color.name} color={color} dark={dark} showTitle />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColorPalettes;
|
||||
94
.dumi/theme/common/Color/ColorPalettes.tsx
Normal file
94
.dumi/theme/common/Color/ColorPalettes.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
import cls from 'classnames';
|
||||
import Palette from './Palette';
|
||||
|
||||
const colors = [
|
||||
{
|
||||
name: 'red',
|
||||
english: 'Dust Red',
|
||||
chinese: '薄暮',
|
||||
description: '斗志、奔放',
|
||||
},
|
||||
{
|
||||
name: 'volcano',
|
||||
english: 'Volcano',
|
||||
chinese: '火山',
|
||||
description: '醒目、澎湃',
|
||||
},
|
||||
{
|
||||
name: 'orange',
|
||||
english: 'Sunset Orange',
|
||||
chinese: '日暮',
|
||||
description: '温暖、欢快',
|
||||
},
|
||||
{
|
||||
name: 'gold',
|
||||
english: 'Calendula Gold',
|
||||
chinese: '金盏花',
|
||||
description: '活力、积极',
|
||||
},
|
||||
{
|
||||
name: 'yellow',
|
||||
english: 'Sunrise Yellow',
|
||||
chinese: '日出',
|
||||
description: '出生、阳光',
|
||||
},
|
||||
{
|
||||
name: 'lime',
|
||||
english: 'Lime',
|
||||
chinese: '青柠',
|
||||
description: '自然、生机',
|
||||
},
|
||||
{
|
||||
name: 'green',
|
||||
english: 'Polar Green',
|
||||
chinese: '极光绿',
|
||||
description: '健康、创新',
|
||||
},
|
||||
{
|
||||
name: 'cyan',
|
||||
english: 'Cyan',
|
||||
chinese: '明青',
|
||||
description: '希望、坚强',
|
||||
},
|
||||
{
|
||||
name: 'blue',
|
||||
english: 'Daybreak Blue',
|
||||
chinese: '拂晓蓝',
|
||||
description: '包容、科技、普惠',
|
||||
},
|
||||
{
|
||||
name: 'geekblue',
|
||||
english: 'Geek Blue',
|
||||
chinese: '极客蓝',
|
||||
description: '探索、钻研',
|
||||
},
|
||||
{
|
||||
name: 'purple',
|
||||
english: 'Golden Purple',
|
||||
chinese: '酱紫',
|
||||
description: '优雅、浪漫',
|
||||
},
|
||||
{
|
||||
name: 'magenta',
|
||||
english: 'Magenta',
|
||||
chinese: '法式洋红',
|
||||
description: '明快、感性',
|
||||
},
|
||||
];
|
||||
|
||||
const ColorPalettes: React.FC<{ dark?: boolean }> = (props) => {
|
||||
const { dark } = props;
|
||||
const colorCls = cls('color-palettes', {
|
||||
'color-palettes-dark': !!dark,
|
||||
});
|
||||
return (
|
||||
<div className={colorCls}>
|
||||
{colors.map((color) => (
|
||||
<Palette key={color.name} color={color} dark={dark} showTitle />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColorPalettes;
|
||||
@ -3,9 +3,17 @@ import { generate } from '@ant-design/colors';
|
||||
import uniq from 'lodash/uniq';
|
||||
import ColorBlock from './ColorBlock';
|
||||
|
||||
export default function ColorPatterns({ color, dark, backgroundColor }) {
|
||||
interface ColorPatternsProps {
|
||||
color?: string;
|
||||
dark?: boolean;
|
||||
backgroundColor?: string;
|
||||
}
|
||||
|
||||
const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => {
|
||||
const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {});
|
||||
return uniq(colors).map((colorString, i) => (
|
||||
<ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
|
||||
));
|
||||
}
|
||||
};
|
||||
|
||||
export default ColorPatterns;
|
||||
@ -5,11 +5,11 @@ const noop = () => {};
|
||||
|
||||
interface ColorPickerProps {
|
||||
color?: string;
|
||||
small: boolean;
|
||||
position: string;
|
||||
small?: boolean;
|
||||
position?: string;
|
||||
presetColors?: string[];
|
||||
onChange: (hex: string, color: { hex: string }) => void;
|
||||
onChangeComplete: (hex: string) => void;
|
||||
onChange?: (hex: string, color: { hex: string }) => void;
|
||||
onChangeComplete?: (hex: string) => void;
|
||||
}
|
||||
|
||||
export default class ColorPicker extends Component<ColorPickerProps> {
|
||||
|
||||
@ -48,89 +48,89 @@ ${makeGrayPalette(index + 1)}
|
||||
return (
|
||||
<Global
|
||||
styles={css`
|
||||
.color-palettes {
|
||||
margin: 0 1%;
|
||||
.color-palettes {
|
||||
margin: 0 1%;
|
||||
|
||||
&-dark {
|
||||
margin: 0;
|
||||
padding: 0 28px;
|
||||
background-color: #141414;
|
||||
&-dark {
|
||||
margin: 0;
|
||||
padding: 0 28px;
|
||||
background-color: #141414;
|
||||
|
||||
.color-title {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
.color-title {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.color-description {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
.color-description {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.color-palette {
|
||||
margin: 45px 3.5% 45px 0;
|
||||
.color-palette {
|
||||
margin: 45px 3.5% 45px 0;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.main-color-item {
|
||||
margin-right: 0;
|
||||
.main-color-item {
|
||||
margin-right: 0;
|
||||
|
||||
&:hover {
|
||||
margin-right: -8px;
|
||||
&:hover {
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette {
|
||||
display: inline-block;
|
||||
width: 31%;
|
||||
margin: 45px 1%;
|
||||
.color-palette {
|
||||
display: inline-block;
|
||||
width: 31%;
|
||||
margin: 45px 1%;
|
||||
|
||||
&-pick {
|
||||
margin: 0 0 20px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
&-pick {
|
||||
margin: 0 0 20px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-picker {
|
||||
margin: 24px 0;
|
||||
&-picker {
|
||||
margin: 24px 0;
|
||||
|
||||
&-value {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 16px;
|
||||
font-size: 14px;
|
||||
font-family: Consolas, sans-serif;
|
||||
&-value {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 16px;
|
||||
font-size: 14px;
|
||||
font-family: Consolas, sans-serif;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.ant-row-rtl & {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-validation {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 16px;
|
||||
color: ${token.colorError};
|
||||
font-size: 13px;
|
||||
&-validation {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 16px;
|
||||
color: ${token.colorError};
|
||||
font-size: 13px;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.ant-row-rtl & {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-dark {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-dark {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-color {
|
||||
${makePalette('blue')}
|
||||
${makePalette('purple')}
|
||||
.main-color {
|
||||
${makePalette('blue')}
|
||||
${makePalette('purple')}
|
||||
${makePalette('cyan')}
|
||||
${makePalette('green')}
|
||||
${makePalette('magenta')}
|
||||
@ -145,145 +145,145 @@ ${makeGrayPalette(index + 1)}
|
||||
|
||||
text-align: left;
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
height: 44px;
|
||||
margin-right: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
font-family: Consolas, sans-serif;
|
||||
line-height: 44px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
&-item {
|
||||
position: relative;
|
||||
height: 44px;
|
||||
margin-right: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
font-family: Consolas, sans-serif;
|
||||
line-height: 44px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
&:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
margin-right: -8px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
margin-right: -8px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-item &-text {
|
||||
float: left;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
&-item &-text {
|
||||
float: left;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&-item &-value {
|
||||
position: relative;
|
||||
left: 3px;
|
||||
float: right;
|
||||
transform: scale(0.85);
|
||||
transform-origin: 100% 50%;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
&-item &-value {
|
||||
position: relative;
|
||||
left: 3px;
|
||||
float: right;
|
||||
transform: scale(0.85);
|
||||
transform-origin: 100% 50%;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.color-title {
|
||||
margin: 0 0 24px;
|
||||
color: #5c6b77;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.color-title {
|
||||
margin: 0 0 24px;
|
||||
color: #5c6b77;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.color-description {
|
||||
display: block;
|
||||
color: #777;
|
||||
font-weight: lighter;
|
||||
font-size: 14px;
|
||||
}
|
||||
.color-description {
|
||||
display: block;
|
||||
color: #777;
|
||||
font-weight: lighter;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.main-color:hover {
|
||||
.main-color-value {
|
||||
left: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
.main-color:hover {
|
||||
.main-color-value {
|
||||
left: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette-horizontal {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.color-palette-horizontal {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
&-dark {
|
||||
height: 303px;
|
||||
padding: 32px 28px;
|
||||
background-color: #141414;
|
||||
&-dark {
|
||||
height: 303px;
|
||||
padding: 32px 28px;
|
||||
background-color: #141414;
|
||||
|
||||
.color-palette-picker {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.color-palette-picker {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.color-palette-pick {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
text-align: left;
|
||||
.color-palette-pick {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
text-align: left;
|
||||
|
||||
&-hex {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
&-hex {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
.ant-row-rtl & {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-row-rtl & {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-color {
|
||||
display: flex;
|
||||
.main-color {
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 86px;
|
||||
margin-right: 0;
|
||||
padding: 37px 0 0;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
&-item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
height: 86px;
|
||||
margin-right: 0;
|
||||
padding: 37px 0 0;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
|
||||
.main-color-text {
|
||||
float: none;
|
||||
}
|
||||
.main-color-text {
|
||||
float: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
height: 96px;
|
||||
margin-top: -10px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
height: 96px;
|
||||
margin-top: -10px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-value {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform-origin: unset;
|
||||
}
|
||||
&-value {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform-origin: unset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.main-color-item {
|
||||
padding-top: 8px;
|
||||
}
|
||||
&:hover {
|
||||
.main-color-item {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.main-color-value {
|
||||
bottom: 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
.main-color-value {
|
||||
bottom: 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -3,7 +3,7 @@ import { message } from 'antd';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { presetDarkPalettes } from '@ant-design/colors';
|
||||
|
||||
const rgbToHex = (rgbString) => {
|
||||
const rgbToHex = (rgbString: string): string => {
|
||||
const rgb = rgbString.match(/\d+/g);
|
||||
let r = parseInt(rgb[0], 10).toString(16);
|
||||
let g = parseInt(rgb[1], 10).toString(16);
|
||||
@ -14,10 +14,21 @@ const rgbToHex = (rgbString) => {
|
||||
return `#${r}${g}${b}`;
|
||||
};
|
||||
|
||||
export default class Palette extends React.Component {
|
||||
interface PaletteProps {
|
||||
showTitle?: boolean;
|
||||
direction?: 'horizontal' | 'vertical';
|
||||
dark?: boolean;
|
||||
color?: any;
|
||||
}
|
||||
|
||||
class Palette extends React.Component<PaletteProps> {
|
||||
hexColors: Record<PropertyKey, string>;
|
||||
|
||||
colorNodes: Record<PropertyKey, Element>;
|
||||
|
||||
componentDidMount() {
|
||||
this.hexColors = {};
|
||||
Object.keys(this.colorNodes).forEach((key) => {
|
||||
Object.keys(this.colorNodes || {}).forEach((key) => {
|
||||
const computedColor = getComputedStyle(this.colorNodes[key])['background-color'];
|
||||
if (computedColor.includes('rgba')) {
|
||||
this.hexColors[key] = computedColor;
|
||||
@ -34,10 +45,10 @@ export default class Palette extends React.Component {
|
||||
showTitle,
|
||||
direction,
|
||||
dark,
|
||||
color: { name, description, english, chinese, count = 10 },
|
||||
color: { name, description, english, chinese, count } = { name: 'gray', count: 13 },
|
||||
} = this.props;
|
||||
const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette';
|
||||
const colors = [];
|
||||
const colors: React.ReactNode[] = [];
|
||||
const colorName = `${english} / ${chinese}`;
|
||||
const colorPaletteMap = {
|
||||
dark: ['#fff', 'unset'],
|
||||
@ -88,6 +99,4 @@ export default class Palette extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
Palette.defaultProps = {
|
||||
color: { name: 'gray', count: 13 },
|
||||
};
|
||||
export default Palette;
|
||||
@ -1,13 +1,15 @@
|
||||
import React from 'react';
|
||||
import Icon from '@ant-design/icons';
|
||||
|
||||
const SVGIcon = ({ color = 'currentColor' }) => (
|
||||
const SVGIcon: React.FC<{ color?: string }> = ({ color = 'currentColor' }) => (
|
||||
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill={color}>
|
||||
<path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z" />
|
||||
<path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ExternalLinkIcon = (props) => <Icon component={SVGIcon} {...props} />;
|
||||
const ExternalLinkIcon: React.FC<{ className?: string }> = (props) => (
|
||||
<Icon component={SVGIcon} {...props} />
|
||||
);
|
||||
|
||||
export default ExternalLinkIcon;
|
||||
@ -96,7 +96,7 @@ const flattenMenu = (menuItems: MenuProps['items']): MenuProps['items'] | null =
|
||||
return null;
|
||||
};
|
||||
|
||||
const PrevAndNext = () => {
|
||||
const PrevAndNext: React.FC = () => {
|
||||
const styles = useStyle();
|
||||
|
||||
const [menuItems, selectedKey] = useMenu({
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import React from 'react';
|
||||
import Icon from '@ant-design/icons';
|
||||
|
||||
const SVGIcon = () => (
|
||||
const SVGIcon: React.FC = () => (
|
||||
<svg viewBox="0 0 14 14" fill="currentColor">
|
||||
<path d="M13.8875145,13.1234844 C13.8687399,13.0691875 13.8499977,13.0329687 13.8312555,12.9786562 L11.3687445,8.83296875 C12.9187468,8.05754687 13.9640694,6.49009375 13.9640694,4.68728125 C13.9624994,2.09095312 11.7968694,0 9.10938728,0 L3.86404855,0 C3.04217572,0 2.37028902,0.648703125 2.37028902,1.44223437 L2.37028902,1.82090625 L0.746871676,1.82090625 C0.33593526,1.82090625 0,2.14526562 0,2.54203125 L0,13.4478437 C0,13.7540937 0.242191908,13.9879375 0.559368786,13.9879375 C0.615627746,13.9879375 0.67187052,13.9698281 0.72812948,13.9517187 L13.440615,13.9517187 C13.7578081,13.9517187 14,13.7178906 14,13.4116406 C14,13.321125 13.9624994,13.2125 13.8875145,13.1234844 Z M3.49061272,8.0394375 L3.49061272,2.9206875 L8.71719306,2.9206875 C9.74375723,2.9206875 10.5843723,3.73232812 10.5843723,4.7235 C10.5843723,5.71465625 9.76249942,6.5081875 8.71719306,6.5081875 L6.53280462,6.5081875 L6.53280462,6.52629688 C6.45781965,6.52629688 6.3828185,6.5625 6.3093711,6.59870313 C6.04843699,6.74354688 5.95469364,7.08598438 6.10467977,7.33792188 L8.3078104,11.0325469 L3.4906289,11.0325469 L3.4906289,8.0394375 L3.49061272,8.0394375 Z M1.1203237,12.8881406 L1.1203237,2.9206875 L2.3703052,2.9206875 L2.3703052,11.5545313 C2.3703052,11.8607813 2.61249711,12.0946094 2.92969017,12.0946094 L2.94843237,12.0946094 C2.98593295,12.1127188 3.04219191,12.1127188 3.09843468,12.1127188 L9.16563006,12.1127188 C9.48280694,12.1127188 9.72499884,11.878875 9.72499884,11.572625 L9.72499884,11.5364219 C9.76249942,11.3915938 9.74375723,11.2482813 9.66875607,11.1215469 L7.5593526,7.58835938 L8.6984185,7.58835938 C10.3406104,7.58835938 11.6843514,6.29095313 11.6843514,4.703875 C11.6843514,3.1168125 10.3406104,1.81939063 8.6984185,1.81939063 L3.4906289,1.81939063 L3.4906289,1.44073437 C3.4906289,1.24310937 3.65937341,1.08017187 3.86406474,1.08017187 L9.09061272,1.08017187 C11.143741,1.08017187 12.8234173,2.7019375 12.8234173,4.68578125 C12.8234173,6.21853125 11.8343538,7.5340625 10.4343538,8.05603125 C10.378111,8.07414063 10.3406104,8.09223438 10.2843514,8.11034375 C10.0234173,8.25517188 9.92967399,8.597625 10.0796763,8.8495625 L12.5062405,12.8881563 L1.12030751,12.8881563 L1.1203237,12.8881406 Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const RiddleIcon = (props) => <Icon component={SVGIcon} {...props} />;
|
||||
const RiddleIcon: React.FC<{ className?: string }> = (props) => (
|
||||
<Icon component={SVGIcon} {...props} />
|
||||
);
|
||||
|
||||
export default RiddleIcon;
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import Icon from '@ant-design/icons';
|
||||
|
||||
const ThemeIcon = (props: any) => {
|
||||
const ThemeIcon: React.FC<{ className?: string }> = (props) => {
|
||||
const SVGIcon = React.useCallback(
|
||||
() => (
|
||||
<svg width={21} height={21} viewBox="0 0 21 21" fill="currentColor" {...props}>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import type { FC } from 'react';
|
||||
import React from 'react';
|
||||
import { FloatButton, theme } from 'antd';
|
||||
import { DarkTheme, Light, CompactTheme } from 'antd-token-previewer/es/icons';
|
||||
@ -11,7 +10,7 @@ export type ThemeSwitchProps = {
|
||||
onChange: (value: typeof defaultAlgorithm[]) => void;
|
||||
};
|
||||
|
||||
const ThemeSwitch: FC<ThemeSwitchProps> = ({ value, onChange }) => {
|
||||
const ThemeSwitch: React.FC<ThemeSwitchProps> = ({ value, onChange }) => {
|
||||
const handleLightSwitch = () => {
|
||||
let newValue = [...value];
|
||||
if (value.includes(darkAlgorithm)) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user