Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | 1x 1x 5x 5x 5x 5x 1x 5x 3x 1x 5x 5x 2x 1x 1x 1x 1x | import React, { CSSProperties } from 'react';
import {
HsvaColor,
ColorResult,
color as handleColor,
validHex,
hexToHsva,
hsvaToHex,
getContrastingColor,
} from '@uiw/color-convert';
import EditableInput from '@uiw/react-color-editable-input';
import Swatch from '@uiw/react-color-swatch';
const CORLER_HEX = ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'];
export interface BlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
prefixCls?: string;
showTriangle?: boolean;
color?: string | HsvaColor;
colors?: string[];
onChange?: (color: ColorResult) => void;
}
const Block = React.forwardRef<HTMLDivElement, BlockProps>((props, ref) => {
const {
prefixCls = 'w-color-block',
className,
style,
color,
colors = CORLER_HEX,
showTriangle = true,
onChange,
...other
} = props;
const hsva = (typeof color === 'string' && validHex(color) ? hexToHsva(color) : color) as HsvaColor;
const hex = color ? hsvaToHex(hsva) : '';
const handleChange = (hsv: HsvaColor) => {
onChange && onChange(handleColor(hsv));
};
const handleHex = (value: string | number, evn: React.ChangeEvent<HTMLInputElement>) => {
if (typeof value === 'string' && validHex(value) && /(3|6)/.test(String(value.replace(/^#/, '').length))) {
onChange && onChange(handleColor(hexToHsva(value)));
}
};
const stylePointer = {
'--block-background-color': 'rgb(255, 255, 255)',
'--block-box-shadow': 'rgb(0 0 0 / 10%) 0 1px',
width: 170,
borderRadius: 6,
background: 'var(--block-background-color)',
boxShadow: 'var(--block-box-shadow)',
position: 'relative',
...style,
} as CSSProperties;
return (
<div ref={ref} className={[prefixCls, className].filter(Boolean).join(' ')} style={stylePointer} {...other}>
{showTriangle && (
<div
style={{
width: 0,
height: 0,
borderStyle: 'solid',
borderWidth: '0 10px 10px',
borderColor: `transparent transparent ${hex}`,
position: 'absolute',
top: -10,
left: '50%',
marginLeft: -10,
}}
/>
)}
<div
title={hex}
style={{
backgroundColor: `${hex}`,
color: getContrastingColor(hex),
height: 110,
fontSize: 18,
borderRadius: '6px 6px 0 0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{hex.toLocaleUpperCase()}
</div>
<Swatch
colors={colors}
color={hex}
style={{
paddingLeft: 10,
paddingTop: 10,
}}
rectProps={{
style: {
marginRight: 10,
marginBottom: 10,
borderRadius: 4,
height: 22,
width: 22,
},
}}
onChange={handleChange}
/>
<EditableInput
value={hex.toLocaleUpperCase()}
onChange={(evn, val) => handleHex(val, evn)}
onBlur={(evn) => {
const value = evn.target.value;
evn.target.value = value.slice(0, 6);
handleHex(value.slice(0, 6), evn);
}}
inputStyle={{
height: 22,
outline: 0,
borderRadius: 3,
padding: '0 7px',
}}
style={{
padding: 10,
paddingTop: 0,
borderRadius: '0 0 6px 6px',
}}
/>
</div>
);
});
Block.displayName = 'Block';
export default Block;
|