rescriptbr / reform Goto Github PK

i.e.

        Form.Validation.Schema([|
          Record(
            FavoriteColors,
            [| StringNonEmpty(Name), StringNonEmpty(Hex) |]
          ),
      |])

This would beneficial for API break changing

Will be passed to the children and to the onSubmit handler, so the consumer can programatically reset the form state

Currently, validator API looks like this:

Custom(state => option(string))

Which is IMHO pretty confusing and requires you to read doc/source code to actually know what is option(string) actually means.

I would suggest that we use result type. It's in OCaml 4.0.3 but Bucklescript provides us a compat type Js.Result.t

Usage:

open Js.Result;
type validateResult = Js.Result.t(unit, string);
...
Custom(values => values.password == "123" ? Error("Really") : Ok())

And I think using result type should be self-described

Currently the way we deal with field states makes it very boring to update value inside it

The link to https://astrocoders.com/reform that is in the repo description is broken

It seems like you have moved all your open source projects to one page: https://astrocoders.com/open-source

The handleDomFormChange method doesn't currently account for the checkbox or radio input types:

https://github.com/Astrocoders/reform/blob/4553bd8b21e3d82ba772e6def066dc98578a36f5/re/ReForm_Helpers.re#L1-L4

I tried fixing this by adding a switch:

let handleDomFormChange = (handleChange, event) => {
  let domEl = ReactDOMRe.domElementToObj(ReactEventRe.Form.target(event));

  switch (domEl##type_) {
  | "checkbox" => handleChange(domEl##checked);
  | "radio" => handleChange(domEl##checked);
  | _ => handleChange(domEl##value);
  };
};

But this doesn't work as Reform currently only supports strings, so it's not as easy as I first thought. Any thoughts on how to fix this?

As the API grows the record is better than the labeled arguments because does not force the user to declare the params if tho the user is not using

RequiredIf(values => bool)

(`field, RequiredIf(({ otherField}) => otherField !== "")

SameAs(Params.fields)

(`confirmPassword, SameAs(`password)

Make also validators an array to combine them?

(`field, [
 RequiredIf(({ otherField}) => otherField !== ""),
 SameAs(`anotherField)
])

Example:

module FormParams = {
  type state = {
    name: string,
    age: int,
  };
  type fields = [ | `name |  `age ];
  let lens = [
    (`name, s => s.name, (s, name) => {...s, name}),
    (
      `age,
      s => s.age,
      (s, age) => {...s, age}
    ),
  ];
};

My current work around is make a variant like this:

type formValue = | Int(int) | String(string); 

Is this the right approach? Could reform support this use case?

Hi,

I noticed that the docs now use an extension lenses

module StateLenses = [%lenses
  type state = {
    description: string,
    title: string,
    acceptTerms: bool,
  }
];

However, when I try to use this, I get the following error: Uninterpreted extension 'lenses'.

Is this feature in the latest version (8.3.2)?

Thanks,
Nicholas

onSubmit callback has a method named setSubmitting but the children function doesn't expose that state. I can send a PR to expose this. What do you think?

In ReFormNext the fieldState type is placed within the Make functor, despite not depending on the Config module.

I think this should be moved to the outer scope, to ease abstractions on top of ReFormNext. My motivating example is that I'm trying to build a library connecting ReForm and ReactStrap. Building an Input component I want to pass the fieldState to the component to automatically set valid/invalid classes. This is impossible, as fieldState is tied to a specific instantiation of a form.

Also a full demo for the featured image

README docs ftw

tired:

an explanation for each hook param
an explanation for each Validator

wired:
think how to make this automatic

getting error trying to install lenses-ppx

yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "workspace-aggregator-bd3fdaf5-a8bf-4d96-ad72-cdb30e081df2 > frontend > [email protected]" has incorrect peer dependency "bs-platform@^4.0.5".
warning "workspace-aggregator-bd3fdaf5-a8bf-4d96-ad72-cdb30e081df2 > frontend > bs-emotion > @minima.app/[email protected]" has incorrect peer dependency "bs-platform@^4.0.5".
[4/4] 🔨  Building fresh packages...
[-/13] ⢀ waiting...
[10/13] ⢀ node-sass
[9/13] ⢀ bsb-native
[4/13] ⢀ puppeteer
error /Users/maxli/workspace/test/node_modules/lenses-ppx: Command failed.
Exit code: 1
Command: npm run build
Arguments: 
Directory: /Users/maxli/workspace/test/node_modules/lenses-ppx
Output:
npm WARN lifecycle The node binary used for scripts is /var/folders/qq/zn5p3rxx2j57f2drm9dtd3x80000gn/T/yarn--1565877954285-0.8162615801622437/node but npm is using /Users/maxli/.nvm/versions/node/v8.12.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> [email protected] build /Users/maxli/workspace/test/node_modules/lenses-ppx
> esy build

info esy build 0.5.8 (using esy.json)
error: project is not installed, run `esy install`
  
esy: exiting due to errors above
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `esy build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

Proposed usage

/* initialState would be `Lazy((state => unit) => unit) | Eager(state)` */
let _ = PostForm.use(
 ~initialState=Lazy(callback => {
    BsReactNative.AsyncStorage.getItem("$signUpForm")
    |> Js.Promise.then_(value => {
     callback(decode(value))
    })
    |> ignore
  })
  ~onStateChange=(state => {
    BsReactNative.AsyncStorage.setItem("$signUpForm", encode(value)) |> ignore
  })
)

Why

So it's more idiomatic to implement persistent forms

Currently to make a field optional you just don't need to add a schema entry for it, but should we be more explicit?

For ReFormNext next versions we'll be focusing on bringing the API as close as possible to Formik's while also showing Reason's power.

Todo

• Field component, for fastness and context
• Remove Validation out of ReFormNext

I think that a TODO list is a great example of the tool to show on the Try Out docs session.

Hi, do you have any advice on how to handle validation onBlur with this library?

I was thinking of a workaround with handling onBlur myself and then doing something like SetFocussedField("email"), and checking that before showing the validation message. But probably it could be done in a nicer way.

I'm willing to make a PR if this is a feature that more people would like :)

Currently Field component is tightly coupled to the Form instance. Having it generic would make a render structure more reusable.

let { arrayGetFieldState, arrayUpdateNestedFieldAt } = Form.use(...)

arrayGetFieldState(~field=FavoriteColors,~nestedField=Name, ~index=0)

arrayUpdateNestedFieldAt(~field=FavoriteColors,~nestedField=Name, ~index=0)

Maybe we need more discussion

Good for showing errors in a snackbar for instance

How?

Is there any plan to support async form validation?
If you can point me to the right direction, I would love to get my hand wet

No idea on how that would be done, but creating this issue to open the discussion

Currently we pass ReForm methods as labeled params

      ...(
        (
           /* this is { values, errors, error }
           * the form.error value is used if you need a global error, submitting error for instance
           */
          ~form,
          ~handleChange,
          ~handleSubmit,
          /* This sets the value of form.error */
          ~handleValidation as _,
          /* A helper to get any field error */
          ~getErrorForField
        ) =>

It's easy to see that this will not scale if the API grows, to prevent that we should do this instead

...((~reform) => {})

Much better

where reform is

type reform = {
 form: values,
 handleChange: ,
 handleSubmit: ,
 handleValidation: ,
 getErrorForField
}

                                                                        
   41 │   render: _self =>         
   42 │     <Card bordered=false>   
   43 │       <SignUpFormContainer 
   44 │         onSubmit=(         
    . │ ...                        
  125 │            )               
  126 │       </SignUpFormContainer>                                   
  127 │     </Card>                
  128 │ };                         

  This has type:                   
    (~initialState: SignUpFormParams.state) =>                         
    ReasonReact.componentSpec      
    (SignUpFormContainer.state,  SignUpFormContainer.state,            
      ReasonReact.noRetainedProps,  ReasonReact.noRetainedProps,       
      SignUpFormContainer.action)  
  But somewhere wanted:            
    ReasonReact.component ('a,  'b,  'c) (defined as                   
      ReasonReact.componentSpec ('a,  'a,  'b,  'b,  'c))              

ninja: build stopped: subcommand failed.                               

I'm not sure what is this about anymore.

this is absolutely problematic as it keeps a closure

https://github.com/Astrocoders/reform/blob/master/re/ReForm.re#L181-L202

if the user for some reason uses it in a didMount within ReForm's children it will call the wrong version of the state

sometimes you just want to know if a field is errored or no and not care about the rest
so we could abstract this

        {getFieldState(Field(NumberOfFavoriteColors))
         |> (
           fun
           | Error(error) => Some(error)
           | _ => None
         )
         |> Belt.Option.getWithDefault(_, "")
         |> ReasonReact.string}

into

        {getFieldError(Field(NumberOfFavoriteColors))
         ->Belt.Option.getWithDefault("")
         ->ReasonReact.string}