use-redux-form - npm Package Compare versions

Comparing version 1.0.0-beta.6 to 1.0.0

es/index.js

@@ -5,3 +5,3 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { useSelector, shallowEqual } from 'react-redux';
-import { complement, isNil, isEmpty, compose, map, cond, test, T, identity, filter, split, reduce, keys, is, path, F, find, values } from 'ramda';
+import { complement, isNil, isEmpty, compose, map, cond, test, T, identity, filter, split, curry, hasPath, path, reduce, keys, is, F, find, values, defaultTo } from 'ramda';
 
@@ -16,5 +16,2 @@ function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 }
-function orEmpty(v) {
-  return v || '';
-}
 function isEvent(v) {
@@ -46,3 +43,7 @@ if (!v) {
 }
-function excludeProps(exclude, props) {
+var extractByPath = curry(function (parsedPath, v) {
+  // to get rid of negitive array index
+  return hasPath(parsedPath, v) ? path(parsedPath, v) : '';
+});
+var excludeProps = curry(function (exclude, props) {
   return compose(reduce(function (acc, key) {
@@ -55,3 +56,3 @@ if (exclude.includes(key)) {
   }, {}), keys)(props);
-}
+});
 
@@ -86,3 +87,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  var getFormState = compose(path, parsePath)(storePath);
+  var getFormState = compose(extractByPath, parsePath)(storePath);
   var formState = useSelector(getFormState, shallowEqual);
@@ -111,3 +112,3 @@ useEffect(function () {
 
-  var getFieldProps = function getFieldProps(name) {
+  var getFieldProps = function getFieldProps(fieldPath) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -118,25 +119,25 @@ var _options$isRequired = options.isRequired,
         exclude = _options$exclude === void 0 ? [] : _options$exclude,
-        compute = options.compute;
-    var computedName = name;
-    var computedValue = path(parsePath(name), formState);
+        _options$name = options.name,
+        name = _options$name === void 0 ? '' : _options$name,
+        key = options.key;
+    var computedKey = fieldPath;
+    var computedValue = extractByPath(parsePath(fieldPath), formState);
 
-    if (!name || typeof name !== 'string') {
-      throw genericError('[name] is required');
+    if (!fieldPath || typeof fieldPath !== 'string') {
+      throw genericError('invalid [fieldPath] given');
     }
 
-    if (compute) {
-      var computed = compute(computedValue, formState);
-      computedName = "".concat(name).concat(computed.name);
-      computedValue = computed.value;
+    if (typeof key === 'function') {
+      computedKey = "".concat(fieldPath).concat(key(computedValue, formState));
+      computedValue = extractByPath(parsePath(computedKey), formState);
     }
 
-    computedValue = compose(String, // if number, wrap it to string
-    orEmpty)(computedValue);
+    computedValue = String(defaultTo('', computedValue));
     var transformedValue = transform({
       value: computedValue,
-      name: computedName
+      name: computedKey
     });
     var isFalsy = isRequired && isNone(transformedValue);
     var errors = validate(formState);
-    var isInvalid = isFalsy || !!errors[computedName];
+    var isInvalid = isFalsy || !!errors[computedKey];
     return excludeProps(exclude, {
@@ -146,3 +147,3 @@ value: transformedValue,
       disabled: isDisabled,
-      name: computedName,
+      name: name || computedKey,
       isInvalid: isInvalid,
@@ -157,6 +158,6 @@ onChange: function onChange(evt) {
           value: transform({
-            name: computedName,
+            name: computedKey,
             value: value
           }),
-          name: computedName
+          name: computedKey
         });
@@ -163,0 +164,0 @@ }

lib/index.js

@@ -24,5 +24,2 @@ 'use strict';
 }
-function orEmpty(v) {
-  return v || '';
-}
 function isEvent(v) {
@@ -54,3 +51,7 @@ if (!v) {
 }
-function excludeProps(exclude, props) {
+var extractByPath = ramda.curry(function (parsedPath, v) {
+  // to get rid of negitive array index
+  return ramda.hasPath(parsedPath, v) ? ramda.path(parsedPath, v) : '';
+});
+var excludeProps = ramda.curry(function (exclude, props) {
   return ramda.compose(ramda.reduce(function (acc, key) {
@@ -63,3 +64,3 @@ if (exclude.includes(key)) {
   }, {}), ramda.keys)(props);
-}
+});
 
@@ -94,3 +95,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  var getFormState = ramda.compose(ramda.path, parsePath)(storePath);
+  var getFormState = ramda.compose(extractByPath, parsePath)(storePath);
   var formState = reactRedux.useSelector(getFormState, reactRedux.shallowEqual);
@@ -119,3 +120,3 @@ react.useEffect(function () {
 
-  var getFieldProps = function getFieldProps(name) {
+  var getFieldProps = function getFieldProps(fieldPath) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -126,25 +127,25 @@ var _options$isRequired = options.isRequired,
         exclude = _options$exclude === void 0 ? [] : _options$exclude,
-        compute = options.compute;
-    var computedName = name;
-    var computedValue = ramda.path(parsePath(name), formState);
+        _options$name = options.name,
+        name = _options$name === void 0 ? '' : _options$name,
+        key = options.key;
+    var computedKey = fieldPath;
+    var computedValue = extractByPath(parsePath(fieldPath), formState);
 
-    if (!name || typeof name !== 'string') {
-      throw genericError('[name] is required');
+    if (!fieldPath || typeof fieldPath !== 'string') {
+      throw genericError('invalid [fieldPath] given');
     }
 
-    if (compute) {
-      var computed = compute(computedValue, formState);
-      computedName = "".concat(name).concat(computed.name);
-      computedValue = computed.value;
+    if (typeof key === 'function') {
+      computedKey = "".concat(fieldPath).concat(key(computedValue, formState));
+      computedValue = extractByPath(parsePath(computedKey), formState);
     }
 
-    computedValue = ramda.compose(String, // if number, wrap it to string
-    orEmpty)(computedValue);
+    computedValue = String(ramda.defaultTo('', computedValue));
     var transformedValue = transform({
       value: computedValue,
-      name: computedName
+      name: computedKey
     });
     var isFalsy = isRequired && isNone(transformedValue);
     var errors = validate(formState);
-    var isInvalid = isFalsy || !!errors[computedName];
+    var isInvalid = isFalsy || !!errors[computedKey];
     return excludeProps(exclude, {
@@ -154,3 +155,3 @@ value: transformedValue,
       disabled: isDisabled,
-      name: computedName,
+      name: name || computedKey,
       isInvalid: isInvalid,
@@ -165,6 +166,6 @@ onChange: function onChange(evt) {
           value: transform({
-            name: computedName,
+            name: computedKey,
             value: value
           }),
-          name: computedName
+          name: computedKey
         });
@@ -171,0 +172,0 @@ }

package.json

 {
   "name": "use-redux-form",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0",
   "description": "React hook for using Redux store",
@@ -13,2 +13,13 @@ "author": "Tony Jin <[e-mail]>",
   ],
+  "keywords": [
+    "react",
+    "redux",
+    "hook",
+    "hooks",
+    "form",
+    "field",
+    "react-redux",
+    "use-redux-form",
+    "useReduxForm"
+  ],
   "engines": {
@@ -15,0 +26,0 @@ "node": ">= 10.18.1"

README.md

 # use-redux-form
 
-**this is beta!!**
+[![npm](https://img.shields.io/npm/v/use-redux-form)](https://www.npmjs.com/package/use-redux-form)
 
@@ -15,4 +15,12 @@ With `use-redux-form`, any kind of form components can be possible to use simply with Redux store object.
 
-## General Usage
+## API
 
+***more docs are coming...***
+
+- [getFieldProps](./doc/getFieldProps.md)
+
+## Usage
+
+***examples are coming...***
+
 ```js
@@ -25,2 +33,3 @@ import React from 'react'
   const dispatch = useDispatch();
+
   const { handleSubmit, getFieldProps } = useReduxForm({
@@ -71,11 +80,3 @@ storePath: 'user.form',
   return (
-    {/* value, onChange */}
-    <Input {...getFieldProps('some-field-name', {
-      isRequired: true // default = false
-
-      // some components prop is not compatible with
-      // ['value', 'selected', 'disabled', 'name', 'isInvalid', 'onChange']
-      // that useReduxForm uses and also, you can un-use it
-      exclude: ['isInvalid'] // default = []
-    })} />
+    <Field {...getFieldProps('some-field-name' />
     <Button onClick={handleSubmit}>Confirm</Button>
@@ -102,4 +103,11 @@ )
 
+## Todo
+
+- [ ] Unit test
+- [ ] Provide API doc
+- [ ] Provide examples
+- [ ] Provide actions, types
+
 ## License
 
 MIT

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18575

increased by3.69%

Lines of code

307

increased by0.66%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

110

increased by7.84%

No dependency changes