wahyuun
1 year ago
1 changed files with 46 additions and 0 deletions
@ -0,0 +1,46 @@
|
||||
import React from "react"; |
||||
import Input from "antd/lib/input"; |
||||
import Button from "antd/lib/button"; |
||||
import Dropdown from "antd/lib/dropdown"; |
||||
import { Panel } from 'rc-color-picker' |
||||
import "antd/dist/antd.css"; |
||||
import "./styles.css"; |
||||
|
||||
export default function InputColor(props) { |
||||
const { color, onChange } = props; |
||||
|
||||
const [internalColor, setInternalColor] = React.useState(color); |
||||
|
||||
const handleChange = (color) => { |
||||
setInternalColor(color.color); |
||||
|
||||
if (onChange) { |
||||
onChange(color); |
||||
} |
||||
}; |
||||
|
||||
const overlay = ( |
||||
<div> |
||||
<Panel |
||||
color={internalColor} |
||||
enableAlpha={false} |
||||
onChange={handleChange} |
||||
/> |
||||
</div> |
||||
); |
||||
|
||||
return ( |
||||
<> |
||||
<Input |
||||
value={internalColor || ""} |
||||
onChange={(e) => setInternalColor(e.target.value)} |
||||
suffix={ |
||||
<Dropdown trigger={["click"]} overlay={overlay}> |
||||
<Button style={{ background: internalColor }}> </Button> |
||||
</Dropdown> |
||||
} |
||||
/> |
||||
</> |
||||
); |
||||
} |
||||
|
Loading…
Reference in new issue