75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import React from 'react';
|
||
import { colorPickerPreviewValue, colorValueUsesVariable } from '../colorUtils';
|
||
import { CommitInput } from './CommitInput';
|
||
|
||
interface ColorValueFieldProps {
|
||
label?: string;
|
||
value: string;
|
||
onChange: (value: string) => void;
|
||
variableOptions?: string[];
|
||
defaultColor?: string;
|
||
placeholder?: string;
|
||
className?: string;
|
||
hint?: string;
|
||
}
|
||
|
||
export const ColorValueField: React.FC<ColorValueFieldProps> = ({
|
||
label,
|
||
value,
|
||
onChange,
|
||
variableOptions = [],
|
||
defaultColor = '#111827',
|
||
placeholder = '#111827',
|
||
className = '',
|
||
hint,
|
||
}) => {
|
||
const usesVariable = colorValueUsesVariable(value);
|
||
const pickerValue = colorPickerPreviewValue(value, defaultColor);
|
||
|
||
return (
|
||
<div className={className}>
|
||
{label && <label className="ps-field-label">{label}</label>}
|
||
<div className="flex gap-1 items-center">
|
||
<input
|
||
type="color"
|
||
value={pickerValue}
|
||
disabled={usesVariable}
|
||
onChange={(e) => onChange(e.target.value)}
|
||
className="color-input shrink-0 disabled:opacity-40"
|
||
title={usesVariable ? '当前为变量颜色，请使用文本框编辑' : undefined}
|
||
/>
|
||
<CommitInput
|
||
type="text"
|
||
value={value}
|
||
placeholder={placeholder}
|
||
onCommit={onChange}
|
||
className="ps-field font-mono text-[11px] flex-1 min-w-0"
|
||
/>
|
||
</div>
|
||
{variableOptions.length > 0 && (
|
||
<div className="flex flex-wrap gap-1 mt-1.5">
|
||
{variableOptions.map((v) => (
|
||
<button
|
||
key={v}
|
||
type="button"
|
||
onClick={() => {
|
||
const token = `{${v}}`;
|
||
onChange(value.includes(token) ? value : value ? `${value} ${token}` : token);
|
||
}}
|
||
className="ps-btn text-[9px] font-mono"
|
||
>
|
||
{`{${v}}`}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
{hint && <p className="text-[9px] text-[#666] mt-1 leading-relaxed">{hint}</p>}
|
||
{!hint && variableOptions.length > 0 && (
|
||
<p className="text-[9px] text-[#666] mt-1 leading-relaxed">
|
||
支持 hex/rgb/transparent 或 {`{变量名}`}；排版印刷色彩模式下按行数据解析
|
||
</p>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|