ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

allow input character overflow for editting

Browse Source
This commit is contained in:
keyan 2023-09-11 19:59:36 -05:00
parent 77daa458cf
commit 9064224fd3
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/form.js
View File

@ -225,7 +225,7 @@ function FormGroup ({ className, label, children }) {
function InputInner ({ function InputInner ({
prepend, append, hint, showValid, onChange, onBlur, overrideValue, prepend, append, hint, showValid, onChange, onBlur, overrideValue,
innerRef, noForm, clear, onKeyDown, inputGroupClassName, debounce, ...props innerRef, noForm, clear, onKeyDown, inputGroupClassName, debounce, maxLength, ...props
}) { }) {
const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props) const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props)
const formik = noForm ? null : useFormikContext() const formik = noForm ? null : useFormikContext()
@ -263,6 +263,8 @@ function InputInner ({
return () => clearTimeout(debounceRef.current) return () => clearTimeout(debounceRef.current)
}, [noForm, formik, field.value]) }, [noForm, formik, field.value])
const remaining = maxLength && maxLength - (field.value || '').length
return ( return (
<> <>
<InputGroup hasValidation className={inputGroupClassName}> <InputGroup hasValidation className={inputGroupClassName}>
@ -321,9 +323,9 @@ function InputInner ({
{hint} {hint}
</BootstrapForm.Text> </BootstrapForm.Text>
)} )}
{props.maxLength && ( {maxLength && !(meta.touched && meta.error && invalid) && (
<BootstrapForm.Text> <BootstrapForm.Text className={remaining < 0 ? 'text-danger' : undefined}>
{`${numWithUnits(props.maxLength - (field.value || '').length, { abbreviate: false, unitSingular: 'character', unitPlural: 'characters' })} remaining`} {`${numWithUnits(remaining, { abbreviate: false, unitSingular: 'character', unitPlural: 'characters' })} remaining`}
</BootstrapForm.Text> </BootstrapForm.Text>
)} )}
</> </>

4
lib/validate.js
View File

@ -38,7 +38,7 @@ addMethod(string, 'or', function (schemas, msg) {
const titleValidator = string().required('required').trim().max( const titleValidator = string().required('required').trim().max(
MAX_TITLE_LENGTH, MAX_TITLE_LENGTH,
({ max, value }) => `${Math.abs(max - value.length)} too many` ({ max, value }) => `-${Math.abs(max - value.length)} characters remaining`
) )
const intValidator = number().typeError('must be a number').integer('must be whole') const intValidator = number().typeError('must be a number').integer('must be whole')
@ -135,7 +135,7 @@ export function pollSchema (client, numExistingChoices = 0) {
string().trim().test('my-test', 'required', function (value) { string().trim().test('my-test', 'required', function (value) {
return (this.path !== 'options[0]' && this.path !== 'options[1]') || value return (this.path !== 'options[0]' && this.path !== 'options[1]') || value
}).max(MAX_POLL_CHOICE_LENGTH, }).max(MAX_POLL_CHOICE_LENGTH,
({ max, value }) => `${Math.abs(max - value.length)} too many characters` ({ max, value }) => `-${Math.abs(max - value.length)} characters remaining`
) )
).test({ ).test({
message: `at most ${MAX_POLL_NUM_CHOICES} choices`, message: `at most ${MAX_POLL_NUM_CHOICES} choices`,