Repository navigation
v0.0.20
This release contains breaking changes.
- Added the
defaultSettingsproperty to the Input interface to allow for better default settings handling
Required changes (example)
renderInput: ({
name, description, settings, value, onChange, registerValidator, unregisterValidator
}) => {
const { maxLength, required } = settings;
const error = useInputValidator((v) => {
if (required && !v) return `${name} is required`;
if (maxLength && maxLength !== 0 && v.length > maxLength) {
return `${name} has a maximum length of ${maxLength}`;
}
return null;
}, registerValidator, unregisterValidator);
return (
<TextInput
label={name}
description={description}
required={required}
maxLength={maxLength > 1 ? maxLength : null}
error={error}
value={value}
onChange={(v) => onChange(v.target.value)} />
);
},
+ defaultSettings: {
+ maxLength: 0,
+ required: true
+ },
+
renderSettings: ({ settings, onChange, registerValidator, unregisterValidator }) => {
const errors = useInputValidator<TextInputSettings>(
(v) => ({
maxLength: v.maxLength < 0 ? 'Max length must be positive' : null
}),
registerValidator,
unregisterValidator
);
- const [merged, changeSetting] = useSettingsHandler({
- maxLength: settings?.maxLength || 0,
- required: settings?.required ?? true
- }, settings, onChange);
+ const changeSetting = useSettingsHandler(settings, onChange);
return (
<Stack>
<NumberInput label="Max Length" allowDecimal={false}
description="Set to 0 to disable length limit" required
- error={errors?.maxLength} value={merged.maxLength}
+ error={errors?.maxLength} value={settings.maxLength}
onChange={(v: number) => changeSetting('maxLength', v)} />
<Checkbox label="Required" error={errors?.required}
- checked={merged.required}
+ checked={settings.required}
onChange={(v) => changeSetting('required', v.target.checked)} />
</Stack>
);
},