63 lines
2.8 KiB
TypeScript
63 lines
2.8 KiB
TypeScript
import { FC, useCallback, useEffect } from 'react'
|
|
import { FieldType, FieldTypes, fieldTypeOptions, fieldTypesWithValues } from '../../types/schema'
|
|
import { useObjectStateWrapper } from '../../hooks/useObjectState';
|
|
import { ValueField } from './value-field';
|
|
import { HelpPopper } from '../Poppables/help';
|
|
import { Icon } from '../Icon';
|
|
|
|
interface IProps {
|
|
update: (arg: FieldType) => void;
|
|
field: FieldType;
|
|
fieldName: string;
|
|
deleteField: (arg: string) => void;
|
|
}
|
|
|
|
export const FieldEditor: FC<IProps> = ({ update, field, fieldName, deleteField }) => {
|
|
const { bindProperty, bindPropertyCheck } = useObjectStateWrapper(field, (e) => update(typeof e === 'function' ? e(field) : e))
|
|
|
|
const shouldShowValueField = useCallback(() => fieldTypesWithValues.includes(field.type) || field.isConstant, [field.isConstant, field.type]);
|
|
|
|
useEffect(() => {
|
|
console.log(field.value);
|
|
}, [field])
|
|
|
|
return (
|
|
<li className="odd:bg-black/50">
|
|
<p>{fieldName}</p>
|
|
<div className=" flex gap-x-4 items-center p-2 w-full">
|
|
<label className="w-min">
|
|
Field Type:
|
|
<select className="capitalize" {...bindProperty('type')}>
|
|
{fieldTypeOptions.map(o => (
|
|
<option className="capitalize" value={FieldTypes[o]}>{o}</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
{shouldShowValueField() && (
|
|
<ValueField type={field.type} bind={bindProperty('value')} />
|
|
)}
|
|
<span className="flex items-center gap-2">
|
|
<label><input type="checkbox" {...bindPropertyCheck('isConstant')} /> Is constant</label>
|
|
<HelpPopper>
|
|
<p className="text-sm">Constant values can't be overwritten in publications. When a dice field is set to a constant value, it instead rolls a dice of that value whenever this field is displayed (unless exported). This could be useful for a randomly generated scenario or for cards being drawn as the dice value will automatically be determined by the dice roll.</p>
|
|
</HelpPopper>
|
|
</span>
|
|
<label className="w-min">
|
|
Minimum:
|
|
<input className="w-12" type="number" {...bindProperty('minimum')} />
|
|
</label>
|
|
<label className="w-min">
|
|
Limit:
|
|
<input className="w-12" type="number" {...bindProperty('limit')} />
|
|
</label>
|
|
<HelpPopper>
|
|
<p className="text-sm">Minimum and Limit apply to the number of entries allowed for this field, not the maximum and minimum value. Set the minimum to 0 to make a field optional. Set the limit to 0 to allow for unlimited entries.</p>
|
|
</HelpPopper>
|
|
<button className="no-default self-end ml-auto" onClick={() => deleteField(fieldName)}>
|
|
<Icon className="svg-red-700 hover:svg-red-500 trash-can w-6 h-6" icon="trash"></Icon>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
)
|
|
}
|