Why no wrapped Text, TextArea, Checkbox, Radio, RadioGroup and Select is not exported?

[dzwiedziu-nkg]

I want to implement custom input. It may be very helpful if the no wrapped version of Text and etc. will be exported. Then I will be able to reuse no wrapped Text and implement custom input as kind of:

const CustomInput = ({ fieldApi, fieldState, customProp, ...props  }) => {
  return (
    <div className={fieldState.error ? 'error' : ''}>
    {/*...*/}
      <NoWrappedText {...props} fieldApi={fieldState} fieldState={fieldState} />
    {/*...*/}
    </div>
  )
}

export default asField(CustomInput);

[joepuzzo]

Im confused as to what you are looking for.. I think what you want is to use the asField HighOrderComponent to create your own custom Text Input.

[dzwiedziu-nkg]

Yes but Text, TextArea and etc. have lot of code that can be reuse. Currently I must implement my custom input as:

const CustomInput = ({ fieldApi, fieldState, customProp, ...props  }) => {
  const {
    value
  } = fieldState;
  const {
    setValue,
    setTouched
  } = fieldApi;
  const {
    onChange,
    onBlur,
    forwardedRef,
    ...rest
  } = props;
  
  return (
    <div className={fieldState.error ? 'error' : ''}>
      {/*...*/}
      <input
        {...rest}
        ref={forwardedRef}
        value={!value && value !== 0 ? '' : value}
        onChange={e => {
          setValue(e.target.value);
          if (onChange) {
            onChange(e)
          }
        }}
        onBlur={e => {
          setTouched();
          if (onBlur) {
            onBlur(e)
          }
        }}
      />
      {/*...*/}
    </div>
  )
};

export default asField(CustomInput);

Do you see how many code can be reuse when you export const Text ...?

[joepuzzo]

Im sorry but i dont?

[joepuzzo]

Maybe an example would help

[joepuzzo]

Also it looks like you have two issues out for the same thing.. can we delete one and consolidate.

[dzwiedziu-nkg]

Ok, I want implement Bootstrap input with error marking. So, I must:

const BootstrapInput = ({ fieldApi, fieldState, className, ...props  }) => {
  const {
    value,
    error
  } = fieldState;
  const {
    setValue,
    setTouched
  } = fieldApi;
  const {
    onChange,
    onBlur,
    forwardedRef,
    ...rest
  } = props;

  return (
    <React.Fragment>
      <input
        {...rest}
        ref={forwardedRef}
        value={!value && value !== 0 ? '' : value}
        className={cn(['form-control', className, error ? 'is-invalid' : null])}
        onChange={e => {
          setValue(e.target.value);
          if (onChange) {
            onChange(e)
          }
        }}
        onBlur={e => {
          setTouched();
          if (onBlur) {
            onBlur(e)
          }
        }}
      />
      { error && (
        <div className="invalid-feedback">
          {error}
        </div>
      ) }
    </React.Fragment>
  )
};

export default asField(BootstrapInput);

It is 46 lines. But when I will be can reuse const Text exported as i.e. BasicText then I will be can:

const BootstrapInput = ({ fieldState: {error}, className, ...props  }) => {
  return (
    <React.Fragment>
      <BasicText
        {...props}
        className={cn(['form-control', className, error ? 'is-invalid' : null])}
      />
      { error && (
        <div className="invalid-feedback">
          {error}
        </div>
      ) }
    </React.Fragment>
  )
};

export default asField(BootstrapInput);

Only 17 lines! Do you see advantage? Thanks only by export const Text. Yes, I can use Text wrapped by asField but I will be must wrap BootstrapInput by asField again. Do you understand?

[joepuzzo]

Ok you may have convinced me however i want to try somthing before i do this.. im not at my comp atm but will be in an hour and i can let ya know

[joepuzzo]

Ok so technically this is already achievable:

const BootstrapInput = ({ fieldState: {error}, className, ...props  }) => {
  return (
    <React.Fragment>
      <Text
        {...props}
        className={cn(['form-control', className, error ? 'is-invalid' : null])}
      />
      { error && (
        <div className="invalid-feedback">
          {error}
        </div>
      ) }
    </React.Fragment>
  )
};

export default ({field, ...props}) => {
  const BootstrapInputWithFieldState = withFieldState(field)(BootstrapInput);
  return <BootstrapInputWithFieldState field={field} {...props}/>
}

[dzwiedziu-nkg]

It's works but see please: you create new component in each render! You lost any React's optimizations!

[dzwiedziu-nkg]

https://reactjs.org/docs/higher-order-components.html#dont-use-hocs-inside-the-render-method

[joepuzzo]

Ok i think you have convinced me

[joepuzzo]

This is in the latest version! Will add better docs soon but you can check out the custom inputs section that i added