mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

Add ability to copy color on palette click (#5247)

Browse Source
This commit is contained in:
Bill Sheikh 2017-03-10 01:56:11 -05:00 committed by ddcat1115
parent f567342d95
commit 52b3ebdf13
1 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/spec/colors.md
View File

@ -26,6 +26,8 @@ Ant Design 的色板由 8 种基本色彩组成，每种基本色（第 6 格）
`````__react `````__react
import CopyToClipboard from 'react-copy-to-clipboard';
import { message } from 'antd';
const rgbToHex = (rgbString) => { const rgbToHex = (rgbString) => {
const hexChars = '0123456789ABCDEF'; const hexChars = '0123456789ABCDEF';
const rgb = rgbString.match(/\d+/g); const rgb = rgbString.match(/\d+/g);
@ -48,25 +50,31 @@ const Palette = React.createClass({
}); });
this.setState({ hexColors }); this.setState({ hexColors });
}, },
onCopied() {
message.success('Copied.');
},
render() { render() {
this.colorNodes = this.colorNodes || {}; this.colorNodes = this.colorNodes || {};
const { name, description, color } = this.props.color; const { name, description, color } = this.props.color;
const { hexColors } = this.state; const { hexColors } = this.state;
const colors = []; const colors = [];
for (let i = 1; i <= 10; i++) { for (let i = 1; i <= 10; i++) {
const colorText = `${name}-${i}`;
colors.push( colors.push(
<div <CopyToClipboard text={text} onCopy={this.onCopied} key={i}>
key={i} <div
ref={node => { this.colorNodes[`${name}-${i}`] = node; } } key={i}
className={`main-color-item palatte-${name}-${i}`} ref={node => { this.colorNodes[`${name}-${i}`] = node; } }
style={{ className={`main-color-item palatte-${name}-${i}`}
color: i > 5 ? '#fff' : 'unset', style={{
fontWeight: i === 6 ? 'bold' : 'normal', color: i > 5 ? '#fff' : 'unset',
}} fontWeight: i === 6 ? 'bold' : 'normal',
> }}
{name}-{i} >
{hexColors ? <span className="main-color-value">{hexColors[`${name}-${i}`]}</span> : null} {colorText}
</div> {hexColors ? <span className="main-color-value">{hexColors[`${name}-${i}`]}</span> : null}
</div>
</CopyToClipboard>
); );
} }
return ( return (