feat(ui): add min values for inputs and context-based keyboards for inputs

Author: Dinesht04

ui/src/components/SchemaForm/components/Input.tsx

@@ -29,6 +29,17 @@ interface Props {
  onChange?: (fd: Type.FormDataType) => void;
  formData: Type.FormDataType;
  readOnly: boolean;
+ minValue?: number;
+ inputMode?:
+ | 'text'
+ | 'search'
+ | 'none'
+ | 'tel'
+ | 'url'
+ | 'email'
+ | 'numeric'
+ | 'decimal'
+ | undefined;
 }
 const Index: FC<Props> = ({
  type = 'text',
@@ -37,6 +48,8 @@ const Index: FC<Props> = ({
  onChange,
  formData,
  readOnly = false,
+ minValue = 0,
+ inputMode = 'text',
 }) => {
  const fieldObject = formData[fieldName];
  const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
@@ -60,6 +73,8 @@ const Index: FC<Props> = ({
  placeholder={placeholder}
  type={type}
  value={fieldObject?.value || ''}
+ min={minValue}
+ inputMode={inputMode}
  onChange={handleChange}
  disabled={readOnly}
  isInvalid={fieldObject?.isInvalid}

ui/src/components/SchemaForm/index.tsx

@@ -368,6 +368,9 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = (
  {widget === 'input' ? (
  <Input
  type={uiOpt && 'inputType' in uiOpt ? uiOpt.inputType : 'text'}
+ inputMode={
+ uiOpt && 'inputMode' in uiOpt ? uiOpt.inputMode : 'text'
+ }
  placeholder={
  uiOpt && 'placeholder' in uiOpt ? uiOpt.placeholder : ''
  }

ui/src/components/SchemaForm/types.ts

@@ -88,6 +88,16 @@ export interface InputOptions extends BaseUIOptions {
  | 'time'
  | 'url'
  | 'week';
+ inputMode?:
+ | 'text'
+ | 'search'
+ | 'none'
+ | 'tel'
+ | 'url'
+ | 'email'
+ | 'numeric'
+ | 'decimal'
+ | undefined;
 }
 export interface SelectOptions extends BaseUIOptions {}
 export interface UploadOptions extends BaseUIOptions {

ui/src/pages/Admin/Privileges/index.tsx

@@ -90,6 +90,8 @@ const Index: FC = () => {
  }
  return true;
  },
+ inputType: 'number',
+ inputMode: 'numeric',
  },
  };
  });

ui/src/pages/Admin/Write/index.tsx

@@ -261,6 +261,8 @@ const Index: FC = () => {
  <Form.Label>{t('min_tags.label')}</Form.Label>
  <Form.Control
  type="number"
+ inputMode="numeric"
+ min={0}
  value={formData.min_tags.value}
  isInvalid={formData.min_tags.isInvalid}
  onChange={(evt) => {
@@ -302,6 +304,8 @@ const Index: FC = () => {
  <Form.Label>{t('min_content.label')}</Form.Label>
  <Form.Control
  type="number"
+ inputMode="numeric"
+ min={0}
  value={formData.min_content.value}
  isInvalid={formData.min_content.isInvalid}
  onChange={(evt) => {
@@ -344,6 +348,8 @@ const Index: FC = () => {
  <Form.Label>{t('image_size.label')}</Form.Label>
  <Form.Control
  type="number"
+ inputMode="numeric"
+ min={0}
  value={formData.max_image_size.value}
  isInvalid={formData.max_image_size.isInvalid}
  onChange={(evt) => {
@@ -366,6 +372,8 @@ const Index: FC = () => {
  <Form.Label>{t('attachment_size.label')}</Form.Label>
  <Form.Control
  type="number"
+ inputMode="numeric"
+ min={0}
  value={formData.max_attachment_size.value}
  isInvalid={formData.max_attachment_size.isInvalid}
  onChange={(evt) => {
@@ -388,6 +396,8 @@ const Index: FC = () => {
  <Form.Label>{t('image_megapixels.label')}</Form.Label>
  <Form.Control
  type="number"
+ inputMode="numeric"
+ min={0}
  isInvalid={formData.max_image_megapixel.isInvalid}
  value={formData.max_image_megapixel.value}
  onChange={(evt) => {