Function InputColor

solidui-web/src/components/InputColor/InputColor.tsx:35–115

({
	prefixCls = "solid",
	className,
	style,
	width = 155,
	value = "#000000",
	onChange,
}: InputColorProps)

}

export default function InputColor({
	prefixCls = "solid",
	className,
	style,
	width = 155,
	value = "#000000",
	onChange,
}: InputColorProps) {
	const [displayColorPicker, setDisplayColorPicker] = useState(false);
	const [stateValue, setStateValue] = useState(value);

	useEffect(() => {
		setStateValue(value);
	}, [value]);

	function handleClickColorPicker() {
		setDisplayColorPicker(!displayColorPicker);
	}

	function handleCloseColorPicker() {
		setDisplayColorPicker(false);
	}

	function handleColorChange(color: any) {
		const mValue = isString(color) ? color : color.hex;
		setStateValue(mValue);
		if (onChange) {
			onChange(mValue);
		}
	}

	function renderColorPicker() {
		if (!displayColorPicker) return undefined;
		return (
			<div className="popover">
				<div
					className="cover"
					onClick={handleCloseColorPicker}
					onKeyPress={handleCloseColorPicker}
					role="button"
					tabIndex={0}
				/>
				<ColorPicker color={stateValue} onChange={handleColorChange} />
			</div>
		);
	}

	const _style: React.CSSProperties = {
		display: "flex",
		justifyContent: "center",
		alignItems: "center",
		width: `${width}px`,
		...style,
	};

	return (
		<div
			className={classNames(prefixCls, "solid-color", className)}