jcoreio / redux-form-normalize-on-blur

a redux-form Field component that supports a normalizeOnBlur property

redux-form-normalize-on-blur

a redux-form Field component that supports a normalizeOnBlur property

Usage

npm install --save redux-form-normalize-on-blur

const { Field } = require('redux-form-normalize-on-blur')

or

const { Field } = require('redux-form-normalize-on-blur/immutable')

Example

The following field will trim its text when it loses focus:

<Field
  name="name"
  normalizeOnBlur={(value) => value && value.trim()}
  component={YourInputComponent}
/>

API

Field

Has the same API as redux-form's Field, but it accepts an additional normalizeOnBlur property:

normalizeOnBlur?: (value: any) => any

Function that takes the current value and returns the normalized value. NOTE: this happens before parse or normalize!

redux-form-normalize-on-blur's Issues

Convert Project to TypeScript

Super expression must either be null or a function, not undefined

Bundled code does not transpile class to ES5, I would have expected to consume an ESM build. Same for const.

related code of node_modules/redux-form-normalize-on-blur/es/createNormalizeOnBlurField.js:

return _temp = _class = class NormalizeOnBlurField extends React.Component {
    constructor(...args) {
      super(...args);

      _defineProperty(this, "_input", null);

      _defineProperty(this, "BlurHandler", (0, _memoize.default)(Comp => (_ref) => {
        let {
          input: {
            onBlur
          }
        } = _ref,
            input = _objectWithoutProperties(_ref.input, ["onBlur"]),
            props = _objectWithoutProperties(_ref, ["input"]);

        const enterListener = event => {
          if (event.keyCode === 13) {
            const {
              normalizeOnBlur
            } = this.props;
            const value = event && event.target && event.target.hasOwnProperty('value') ? event.target.value : event;
            const newValue = normalizeOnBlur ? normalizeOnBlur(value) : value;
            input.onChange(newValue);
          }
        };

        return React.createElement(Comp, _extends({}, props, {
          input: _objectSpread({}, input, {
            onKeyDown: event => {
              enterListener(event);
              if (input.onKeyDown) input.onKeyDown(event);
            },
            onBlur: event => {
              const {
                normalizeOnBlur
              } = this.props;
              const value = event && event.target && event.target.hasOwnProperty('value') ? event.target.value : event;
              const newValue = normalizeOnBlur ? normalizeOnBlur(value) : value;
              onBlur(newValue);
            }
          })
        }));
      }));
    }

    render() {
      const _this$props = this.props,
            {
        component,
        normalizeOnBlur
      } = _this$props,
            props = _objectWithoutProperties(_this$props, ["component", "normalizeOnBlur"]);

      if (normalizeOnBlur) {
        return React.createElement(Field, _extends({
          component: this.BlurHandler(component)
        }, props));
      }

      return React.createElement(Field, _extends({
        component: component
      }, props));
    }

  }, _defineProperty(_class, "propTypes", {
    normalizeOnBlur: _propTypes.default.func
  }), _temp;

How to work with this

I inserted this: normalizeOnBlur={value => value && value.trim()}

to my field and I get "value.trim is not a function....."

Cause the comp. didn't knew the value

I would like to use a function for validation like this:

normalizeOnBlur={normalizeOnBlurBirthdayTT}

Immutable version not working as expected.

Component won't update

I have this situation that I had to dynamically change my component, and that's when this component renders the wrong component until it gains focus.

https://codesandbox.io/s/q807n8nx64

Enter something in the Normalize field and click on ReadOnly switch, it should switch to ReadOnly component but it only changes when it gains focus.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Cannot deploy with Webpack - Unexpected token in

After installing this package and trying to deploy my project, I now get this error:

ERROR in assets/js/index.e28b.js from UglifyJs
Unexpected token: keyword (const) [./node_modules/redux-form-normalize-on-blur/es/index.js:20,0][assets/js/index.e28b.js:5843,0]

Thanks in advance for any help.