Skip to content

Commit

Permalink
site: cc => fc (#39635)
Browse files Browse the repository at this point in the history
  • Loading branch information
@li-jia-nan
li-jia-nan committed Dec 19, 2022
1 parent d675c09 commit a0b713c
Show file tree
Hide file tree
Showing 5 changed files with 199 additions and 256 deletions.
42 changes: 15 additions & 27 deletions .dumi/theme/common/Color/ColorBlock.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useMemo } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import { message } from 'antd';

Expand All @@ -8,37 +8,25 @@ interface ColorBlockProps {
dark?: boolean;
}

class ColorBlock extends Component<ColorBlockProps> {
getTextStyle() {
const { color, index, dark } = this.props;
const colorMap = {
default: ['#fff', 'unset'],
dark: ['#314659', '#fff'],
};
const ColorBlock: React.FC<ColorBlockProps> = (props) => {
const { color, index, dark } = props;
const textStyle = useMemo<React.CSSProperties>(() => {
const colorMap = { default: ['#fff', 'unset'], dark: ['#314659', '#fff'] };
const [lastColor, firstColor] = dark ? colorMap.dark : colorMap.default;
return {
background: color,
color: index > 5 ? lastColor : firstColor,
fontWeight: index === 6 ? 'bold' : 'normal',
};
}

onCopied = () => {
const { color } = this.props;
message.success(`Copied: ${color}`);
};

render() {
const { color, index } = this.props;
return (
<CopyToClipboard text={color} onCopy={this.onCopied}>
<div className="main-color-item" style={this.getTextStyle()}>
color-{index}
<span className="main-color-value">{color.toLowerCase()}</span>
</div>
</CopyToClipboard>
);
}
}
}, [color, dark, index]);
return (
<CopyToClipboard text={color} onCopy={() => message.success(`Copied: ${color}`)}>
<div className="main-color-item" style={textStyle}>
color-{index}
<span className="main-color-value">{color.toLowerCase()}</span>
</div>
</CopyToClipboard>
);
};

export default ColorBlock;
56 changes: 24 additions & 32 deletions .dumi/theme/common/Color/ColorPaletteTool.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,23 @@
import type { ChangeEvent } from 'react';
import React, { Component } from 'react';
import React, { useMemo, useState } from 'react';
import { FormattedMessage } from 'dumi';
import ColorPicker from './ColorPicker';
import ColorPatterns from './ColorPatterns';

const primaryMinSaturation = 70; // 主色推荐最小饱和度
const primaryMinBrightness = 70; // 主色推荐最小亮度

class ColorPaletteTool extends Component {
state = {
primaryColor: '#1890ff',
primaryColorInstance: null,
};

handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => {
const ColorPaletteTool: React.FC = () => {
const [primaryColor, setPrimaryColor] = useState<string>('#1890ff');
const [primaryColorInstance, setPrimaryColorInstance] = useState(null);
const 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 });
setPrimaryColor(value as string);
setPrimaryColorInstance(color);
};

renderColorValidation() {
const { primaryColorInstance } = this.state;
const colorValidation = useMemo<React.ReactNode>(() => {
let text = '';
if (primaryColorInstance) {
if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) {
Expand All @@ -36,26 +32,22 @@ class ColorPaletteTool extends Component {
}
}
return <span className="color-palette-picker-validation">{text.trim()}</span>;
}

render() {
const { primaryColor } = this.state;
return (
<div className="color-palette-horizontal">
<div className="color-palette-pick">
<FormattedMessage id="app.docs.color.pick-primary" />
</div>
<div className="main-color">{ColorPatterns({ color: primaryColor })}</div>
<div className="color-palette-picker">
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<ColorPicker color={primaryColor} onChange={this.handleChangeColor} />
</span>
<span className="color-palette-picker-value">{primaryColor}</span>
{this.renderColorValidation()}
</div>
}, [primaryColorInstance, primaryMinSaturation, primaryMinBrightness]);
return (
<div className="color-palette-horizontal">
<div className="color-palette-pick">
<FormattedMessage id="app.docs.color.pick-primary" />
</div>
<div className="main-color">{ColorPatterns({ color: primaryColor })}</div>
<div className="color-palette-picker">
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<ColorPicker color={primaryColor} onChange={handleChangeColor} />
</span>
<span className="color-palette-picker-value">{primaryColor}</span>
{colorValidation}
</div>
);
}
}
</div>
);
};

export default ColorPaletteTool;
116 changes: 54 additions & 62 deletions .dumi/theme/common/Color/ColorPaletteToolDark.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useMemo, useState } from 'react';
import type { ChangeEvent } from 'react';
import React, { Component } from 'react';
import { FormattedMessage } from 'dumi';
import { Row, Col } from 'antd';
import ColorPicker from './ColorPicker';
Expand All @@ -8,29 +8,27 @@ import ColorPatterns from './ColorPatterns';
const primaryMinSaturation = 70; // 主色推荐最小饱和度
const primaryMinBrightness = 70; // 主色推荐最小亮度

class ColorPaletteTool extends Component {
state = {
primaryColor: '#1890ff',
backgroundColor: '#141414',
primaryColorInstance: null,
};
const ColorPaletteTool: React.FC = () => {
const [primaryColor, setPrimaryColor] = useState<string>('#1890ff');
const [backgroundColor, setBackgroundColor] = useState<string>('#141414');
const [primaryColorInstance, setPrimaryColorInstance] = useState(null);

handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => {
const 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 });
setPrimaryColor(value as string);
setPrimaryColorInstance(color);
};

handleChangeBackgroundColor = (e: string | ChangeEvent) => {
const handleChangeBackgroundColor = (e: string | ChangeEvent) => {
const value = (e as ChangeEvent<HTMLInputElement>).target
? (e as ChangeEvent<HTMLInputElement>).target.value
: e;
this.setState({ backgroundColor: value });
setBackgroundColor(value as string);
};

renderColorValidation() {
const { primaryColorInstance } = this.state;
const colorValidation = useMemo<React.ReactNode>(() => {
let text = '';
if (primaryColorInstance) {
if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) {
Expand All @@ -49,56 +47,50 @@ class ColorPaletteTool extends Component {
{text.trim()}
</span>
);
}
}, [primaryColorInstance]);

render() {
const { primaryColor, backgroundColor } = this.state;
return (
<div className="color-palette-horizontal color-palette-horizontal-dark">
<div className="main-color">
{ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
</div>
<div className="color-palette-picker">
<Row>
<Col span={12}>
<div className="color-palette-pick">
<FormattedMessage id="app.docs.color.pick-primary" />
</div>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<Row>
<Col span={18}>
<ColorPicker color={primaryColor} onChange={this.handleChangeColor} />
</Col>
<Col span={6}>
<span className="color-palette-pick-hex">{primaryColor}</span>
</Col>
</Row>
</span>
</Col>
<Col span={12}>
<div className="color-palette-pick">
<FormattedMessage id="app.docs.color.pick-background" />
</div>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<Row>
<Col span={18}>
<ColorPicker
color={backgroundColor}
onChange={this.handleChangeBackgroundColor}
/>
</Col>
<Col span={6}>
<span className="color-palette-pick-hex">{backgroundColor}</span>
</Col>
</Row>
</span>
</Col>
</Row>
{this.renderColorValidation()}
</div>
return (
<div className="color-palette-horizontal color-palette-horizontal-dark">
<div className="main-color">
{ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
</div>
);
}
}
<div className="color-palette-picker">
<Row>
<Col span={12}>
<div className="color-palette-pick">
<FormattedMessage id="app.docs.color.pick-primary" />
</div>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<Row>
<Col span={18}>
<ColorPicker color={primaryColor} onChange={handleChangeColor} />
</Col>
<Col span={6}>
<span className="color-palette-pick-hex">{primaryColor}</span>
</Col>
</Row>
</span>
</Col>
<Col span={12}>
<div className="color-palette-pick">
<FormattedMessage id="app.docs.color.pick-background" />
</div>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<Row>
<Col span={18}>
<ColorPicker color={backgroundColor} onChange={handleChangeBackgroundColor} />
</Col>
<Col span={6}>
<span className="color-palette-pick-hex">{backgroundColor}</span>
</Col>
</Row>
</span>
</Col>
</Row>
{colorValidation}
</div>
</div>
);
};

export default ColorPaletteTool;

0 comments on commit a0b713c

Please sign in to comment.