52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React from 'react';
|
||
import { TemplateElement } from '../types';
|
||
import { CommitInput } from './CommitInput';
|
||
|
||
interface TextDisplayAffixFieldsProps {
|
||
elem: TemplateElement;
|
||
onChange: (elem: TemplateElement) => void;
|
||
}
|
||
|
||
const PropInput = CommitInput;
|
||
|
||
export const TextDisplayAffixFields: React.FC<TextDisplayAffixFieldsProps> = ({
|
||
elem,
|
||
onChange,
|
||
}) => (
|
||
<div className="grid grid-cols-2 gap-2 pt-2 border-t border-[#3a3a3a]">
|
||
<div>
|
||
<label className="ps-field-label">前缀字符</label>
|
||
<PropInput
|
||
type="text"
|
||
value={elem.textDisplayPrefix ?? ''}
|
||
placeholder="如 ¥"
|
||
onCommit={(val) =>
|
||
onChange({
|
||
...elem,
|
||
textDisplayPrefix: val || undefined,
|
||
})
|
||
}
|
||
className="ps-field font-mono"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="ps-field-label">后缀字符</label>
|
||
<PropInput
|
||
type="text"
|
||
value={elem.textDisplaySuffix ?? ''}
|
||
placeholder="如 元"
|
||
onCommit={(val) =>
|
||
onChange({
|
||
...elem,
|
||
textDisplaySuffix: val || undefined,
|
||
})
|
||
}
|
||
className="ps-field font-mono"
|
||
/>
|
||
</div>
|
||
<p className="col-span-2 text-[9px] text-[#666] leading-relaxed">
|
||
在值提取完成后追加，仅影响显示；反选模式下会一并参与从原值中去除；不参与「内容值」显示条件判断
|
||
</p>
|
||
</div>
|
||
);
|