Merge pull request #159 from wellyshen/feature/format-for-controller

Feat(useForm): add "format" option for "controller"

.changeset/chilled-beds-share.md

@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+feat(useForm): add `format` option for `controller`

examples/src/BasicForm/Controller.tsx

@@ -43,6 +43,7 @@ const Controller = ({
  value,
  defaultValue: "welly",
  // parse,
+ format: (val) => `formatted ${val}`,
  onChange: (e, val) => {
  setValue(val);
  // setValue(e.target.value);

examples/src/BasicForm/index.tsx

@@ -14,7 +14,7 @@ const fib = (n: number): number => (n < 3 ? 1 : fib(n - 2) + fib(n - 1));
 
 export interface FormValues {
  text: Record<string, string>;
- controller1?: any;
+ controller1: any;
  controller2: any;
  dynamicText1?: string;
  dynamicText2?: string;
@@ -32,7 +32,7 @@ export interface FormValues {
 
 const defaultValues = {
  text: { nest: "new test" },
- // controller1: "new test",
+ controller1: "new test",
  controller2: "new test",
  dynamicText1: "new test",
  dynamicText2: "new test",
@@ -241,7 +241,7 @@ export default (): JSX.Element => {
  }, */
  })}
  // required
- data-rcf-ignore
+ // data-rcf-ignore
  // defaultChecked
  />
  <Controller

src/types/index.ts

@@ -166,6 +166,7 @@ export interface Controller<V, E = any> {
  value?: any;
  defaultValue?: any;
  parse?: (event: E) => any;
+ format?: (value: any) => any;
  onChange?: (event: E, value?: any) => void;
  onBlur?: (event: FocusEvent<any>) => void;
  }

src/types/react-cool-form.d.ts

@@ -132,6 +132,10 @@ declare module "react-cool-form" {
  (event: E): R;
  }
 
+ export interface Format {
+ (value: any): any;
+ }
+
  export interface OnChange<E = any> {
  (event: E, value?: any): void;
  }
@@ -148,6 +152,7 @@ declare module "react-cool-form" {
  value?: any;
  defaultValue?: any;
  parse?: Parse<E>;
+ format?: Format;
  onChange?: OnChange<E>;
  onBlur?: OnBlur;
  }

src/useForm.ts

@@ -684,7 +684,10 @@ export default <V extends FormValues = FormValues>({
  );
 
  const controller = useCallback<Controller<V>>(
- (name, { validate, value, defaultValue, parse, onChange, onBlur } = {}) => {
+ (
+ name,
+ { validate, value, defaultValue, parse, format, onChange, onBlur } = {}
+ ) => {
  if (!name) {
  warn('💡 react-cool-form > controller: Missing the "name" parameter.');
  return {};
@@ -694,9 +697,12 @@ export default <V extends FormValues = FormValues>({
  if (validate) fieldValidatorsRef.current[name] = validate;
  if (!isUndefined(defaultValue)) setDefaultValue(name, defaultValue);
 
+ value = !isUndefined(value) ? value : getState(`values.${name}`);
+ value = (format ? format(value) : value) ?? "";
+
  return {
  name,
- value: !isUndefined(value) ? value : getState(`values.${name}`) ?? "",
+ value,
  onChange: (e) => {
  const parsedE = parse ? parse(e) : e;
  let value;