1.0.20 • Published 6 months ago

@sparkui/react-field v1.0.20

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

React Field

Automated the functional part of the React input fields:

  • Simple design and ease of use
  • Style-agnostic
  • Validation:
    • Basic and complex validators
    • Automatic focus and scroll to the first invalid field
  • Conditional rendering
  • Control fields outside
  • Dynamic patching
  • Globally defined elements
  • Applicable to any React framework

Field<ValueType, ElementType, NativeElementType, CustomPropsType>

The Field component is the child container that manages the state of the form field.

Props

  • param (string, optional): Comma separated json path for the payload.
  • required (boolean, optional): Required value from the user
  • min (number, optional): Min value
  • max (number, optional): Max value
  • minLength (number, optional): Min length
  • maxLength (number, optional): Max length
  • custom (function(value?: T) => boolean, optional): Custom validator
  • children (function(props: FieldChildrenProps<ValueType, ElementType>) => ReactNode, required): Field renderer
    • onChange (function(value?: T) => void, required): Set new value
    • onBlur (function(value?: T) => void), required: Mark as touched and set new value
    • ref (RefObject, required): Reference that should be forwarded to focusable element
    • value (V, optional): Current value
    • fields (Field[], optional): All fields
    • getField (function(value: string) => Field, required): Find field object by param
    • getValue (function(value: string) => V, required): Find value of some another field by param
    • props (any, optional): Props prepared for native elements
    • params (any, optional): Custom params
<Form.Field<string, HTMLInputElement> param="custom" required={true}>
  {({
      onChange, // Register change
      onBlur, // Register blor
      ref,  // Reference intended for the focus in case of errors
      value,  // Current value
      errors, // List of errors triggered with onBlur or onChange when touched
      fields, // List of all fields in the form
      getValue, // Get value of any field by param
      fetField, // Get field object of any field by param
  }) => (
    <>
      <input
        className="form-control"
        placeholder="Name"
        type="text"
        ref={ref}
        value={value}
        onChange={({target: {value}}) => onChange(value)}
        onBlur={({target: {value}}) => onBlur(value)}
      />
      {errors.length > 0 && <span className="alert alert-danger my-2">Validation failed {errors}</span>}
    </>
  )}
</Form.Field>

Instances

  • TextField
  • EmailField
  • PasswordField
  • NumericField
  • DateField
  • SelectField
  • CheckBoxField
  • RadioField
  • FilesField

Text Field

export const Text = () =>  (
  <Theme>
    <TextField
      renderer="my-input"
      param="name"
      params={{
        placeholder: "Name"
      }}
    />
  </Theme>
);

CheckBox Field

export const CheckBox = () =>  (
  <Theme>
    <CheckBoxField
      renderer="my-checkbox"
      param="new"
      params={{
        input: {placeholder: "New"},
        label: "New"
      }}
    />
  </Theme>
);

Password Field

export const Password = () =>  (
  <Theme>
    <PasswordField
      renderer="my-input"
      param="secret"
      pattern={/^[0-9\-+\/?]+$/}
      params={{
        placeholder: "Secret"
      }}
    />
  </Theme>
);

Radio Field

export const RadioSet = () =>  (
  <Theme>
    <RadioField
      renderer="my-radio-set"
      param="color"
      params={[
        {key: 'red', label: 'Red'},
        {key: 'blue', label: 'Blue'},
        {key: 'green', label: 'Green'},
      ]}
    />
  </Theme>
);

Text Area Field

export const TextArea = () =>  (
  <Theme>
    <TextAreaField
      renderer="my-textarea"
      param="description"
      params={{
        placeholder: "Description",
        label: "Description"
      }}
    />
  </Theme>
);

Numeric Field

export const Numeric = () =>  (
  <Theme>
    <NumericField
      renderer="my-input"
      param="age"
      params={{
        placeholder: "Age"
      }}
    />
  </Theme>
);

Date Field

export const IsoDate = () =>  (
  <Theme>
    <DateField
      renderer="my-input"
      param="created"
      required={true}
      formatOutputValue={(date?: Date) => date?.toISOString()}
      params={{
        placeholder: "Created"
      }}
    />
  </Theme>
);

Dynamic Field

export const DynamicValue = () =>  {
  const ref = useRef<FieldController>();

  useEffect(() => {
    setTimeout(() => {
      ref.current?.setValue(22);
    }, 2000);
    setTimeout(() => {
      console.log(ref.current?.isValid(true));
    }, 4000);
  }, []);

  return (
    <Theme>
      <NumericField
        fieldControllerRef={ref}
        renderer="my-input"
        param="age"
        min={44}
        params={{
          placeholder: "Age"
        }}
      />
    </Theme>
  )
};
1.0.20

6 months ago

1.0.19

6 months ago

1.0.18

6 months ago

1.0.17

6 months ago

1.0.16

6 months ago

1.0.15

6 months ago

1.0.14

6 months ago

1.0.13

6 months ago

1.0.12

6 months ago

1.0.11

9 months ago

1.0.10

10 months ago

1.0.9

10 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago