@cdxoo/formik-utils - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

cjs/index.js

@@ -328,3 +328,34 @@ 'use strict';
 
+var getWrapperForFieldControl = function getWrapperForFieldControl(theme, componentTags, ps) {
+  var DefaultWrapper = componentTags.DefaultWrapper,
+    InArrayWrapper = componentTags.InArrayWrapper,
+    NoneWrapper = componentTags.NoneWrapper;
+  var noWrapper = ps.noWrapper,
+    inArray = ps.inArray;
+  var DefaultWrapperComponent = theme[DefaultWrapper];
+  var InArrayWrapperComponent = theme[InArrayWrapper];
+  var NoneWrapperComponent = theme[NoneWrapper];
+  if (noWrapper) {
+    return NoneWrapperComponent;
+  } else if (inArray) {
+    return InArrayWrapperComponent;
+  } else {
+    return DefaultWrapperComponent;
+  }
+};
+
 var ThemeContext = /*#__PURE__*/React.createContext(FallbackTheme);
+var useTheme = function useTheme() {
+  var theme = React.useContext(ThemeContext);
+  var getWrapperForFieldControl_CB = React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return getWrapperForFieldControl.apply(void 0, [theme].concat(args));
+  }, [theme]);
+  return {
+    components: theme,
+    getWrapperForFieldControl: getWrapperForFieldControl_CB
+  };
+};
 
@@ -350,19 +381,21 @@ var fakeControlledInput = function fakeControlledInput(formikField, fallback) {
     _options$fakeDefault = options.fakeDefault,
-    fakeDefault = _options$fakeDefault === void 0 ? '' : _options$fakeDefault;
+    fakeDefault = _options$fakeDefault === void 0 ? '' : _options$fakeDefault,
+    _options$isThemed = options.isThemed,
+    isThemed = _options$isThemed === void 0 ? true : _options$isThemed;
+  var componentTags = {
+    DefaultWrapper: DefaultWrapper,
+    InArrayWrapper: InArrayWrapper,
+    NoneWrapper: NoneWrapper
+  };
   var WithFieldComponent = function WithFieldComponent(ps) {
-    var theme = React.useContext(ThemeContext);
-    var DefaultWrapperComponent = theme[DefaultWrapper];
-    var InArrayWrapperComponent = theme[InArrayWrapper];
-    var NoneWrapperComponent = theme[NoneWrapper];
+    // FIXME: should we only have this when isThemed = true?
+    var theme = useTheme();
+    var Wrapper = theme.getWrapperForFieldControl(componentTags, ps);
     var dataXPath = ps.dataXPath,
       label = ps.label,
-      required = ps.required,
-      inArray = ps.inArray,
-      noWrapper = ps.noWrapper,
-      value = ps.value,
+      required = ps.required;
+      ps.inArray;
+      ps.noWrapper;
+      var value = ps.value,
       rest = _objectWithoutProperties(ps, _excluded$1);
-    var Wrapper = inArray ? InArrayWrapperComponent : DefaultWrapperComponent;
-    if (noWrapper) {
-      Wrapper = NoneWrapperComponent;
-    }
     var fieldBag = {
@@ -382,3 +415,3 @@ type: type,
       field = fakeControlledInput(field, fakeDefault);
-      return /*#__PURE__*/React.createElement(Wrapper, _objectSpread2(_objectSpread2({}, rest), {}, {
+      var wrapperBag = _objectSpread2(_objectSpread2({}, rest), {}, {
         label: label,
@@ -388,7 +421,13 @@ required: required,
         formikForm: form
-      }), /*#__PURE__*/React.createElement(Control, _objectSpread2(_objectSpread2({}, ps), {}, {
+      });
+      var controlBag = _objectSpread2(_objectSpread2({}, ps), {}, {
         formikField: field,
         formikMeta: meta,
         formikForm: form
-      })));
+      });
+      if (isThemed) {
+        return /*#__PURE__*/React.createElement(Wrapper, wrapperBag, /*#__PURE__*/React.createElement(Control, controlBag));
+      } else {
+        return /*#__PURE__*/React.createElement(Control, controlBag);
+      }
     });
@@ -552,2 +591,4 @@ };
 exports.ThemeContext = ThemeContext;
+exports.fakeControlledInput = fakeControlledInput;
+exports.useTheme = useTheme;
 exports.withField = withField;
@@ -554,0 +595,0 @@ exports.withFieldArray = withFieldArray;

esm/index.js

@@ -1,2 +0,2 @@
-import React, { useContext } from 'react';
+import React, { useContext, useCallback } from 'react';
 import { Formik, Form, Field, FieldArray } from 'formik';
@@ -326,3 +326,34 @@
 
+var getWrapperForFieldControl = function getWrapperForFieldControl(theme, componentTags, ps) {
+  var DefaultWrapper = componentTags.DefaultWrapper,
+    InArrayWrapper = componentTags.InArrayWrapper,
+    NoneWrapper = componentTags.NoneWrapper;
+  var noWrapper = ps.noWrapper,
+    inArray = ps.inArray;
+  var DefaultWrapperComponent = theme[DefaultWrapper];
+  var InArrayWrapperComponent = theme[InArrayWrapper];
+  var NoneWrapperComponent = theme[NoneWrapper];
+  if (noWrapper) {
+    return NoneWrapperComponent;
+  } else if (inArray) {
+    return InArrayWrapperComponent;
+  } else {
+    return DefaultWrapperComponent;
+  }
+};
+
 var ThemeContext = /*#__PURE__*/React.createContext(FallbackTheme);
+var useTheme = function useTheme() {
+  var theme = useContext(ThemeContext);
+  var getWrapperForFieldControl_CB = useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return getWrapperForFieldControl.apply(void 0, [theme].concat(args));
+  }, [theme]);
+  return {
+    components: theme,
+    getWrapperForFieldControl: getWrapperForFieldControl_CB
+  };
+};
 
@@ -348,19 +379,21 @@ var fakeControlledInput = function fakeControlledInput(formikField, fallback) {
     _options$fakeDefault = options.fakeDefault,
-    fakeDefault = _options$fakeDefault === void 0 ? '' : _options$fakeDefault;
+    fakeDefault = _options$fakeDefault === void 0 ? '' : _options$fakeDefault,
+    _options$isThemed = options.isThemed,
+    isThemed = _options$isThemed === void 0 ? true : _options$isThemed;
+  var componentTags = {
+    DefaultWrapper: DefaultWrapper,
+    InArrayWrapper: InArrayWrapper,
+    NoneWrapper: NoneWrapper
+  };
   var WithFieldComponent = function WithFieldComponent(ps) {
-    var theme = useContext(ThemeContext);
-    var DefaultWrapperComponent = theme[DefaultWrapper];
-    var InArrayWrapperComponent = theme[InArrayWrapper];
-    var NoneWrapperComponent = theme[NoneWrapper];
+    // FIXME: should we only have this when isThemed = true?
+    var theme = useTheme();
+    var Wrapper = theme.getWrapperForFieldControl(componentTags, ps);
     var dataXPath = ps.dataXPath,
       label = ps.label,
-      required = ps.required,
-      inArray = ps.inArray,
-      noWrapper = ps.noWrapper,
-      value = ps.value,
+      required = ps.required;
+      ps.inArray;
+      ps.noWrapper;
+      var value = ps.value,
       rest = _objectWithoutProperties(ps, _excluded$1);
-    var Wrapper = inArray ? InArrayWrapperComponent : DefaultWrapperComponent;
-    if (noWrapper) {
-      Wrapper = NoneWrapperComponent;
-    }
     var fieldBag = {
@@ -380,3 +413,3 @@ type: type,
       field = fakeControlledInput(field, fakeDefault);
-      return /*#__PURE__*/React.createElement(Wrapper, _objectSpread2(_objectSpread2({}, rest), {}, {
+      var wrapperBag = _objectSpread2(_objectSpread2({}, rest), {}, {
         label: label,
@@ -386,7 +419,13 @@ required: required,
         formikForm: form
-      }), /*#__PURE__*/React.createElement(Control, _objectSpread2(_objectSpread2({}, ps), {}, {
+      });
+      var controlBag = _objectSpread2(_objectSpread2({}, ps), {}, {
         formikField: field,
         formikMeta: meta,
         formikForm: form
-      })));
+      });
+      if (isThemed) {
+        return /*#__PURE__*/React.createElement(Wrapper, wrapperBag, /*#__PURE__*/React.createElement(Control, controlBag));
+      } else {
+        return /*#__PURE__*/React.createElement(Control, controlBag);
+      }
     });
@@ -547,3 +586,3 @@ };
 
-export { DefaultForm, FallbackTheme, ThemeContext, withField, withFieldArray, wrapFieldAsArray };
+export { DefaultForm, FallbackTheme, ThemeContext, fakeControlledInput, useTheme, withField, withFieldArray, wrapFieldAsArray };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@cdxoo/formik-utils",
   "description": "",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "main": "cjs/index.js",
@@ -6,0 +6,0 @@ "module": "esm/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107869

increased by8.59%

Lines of code

1142

increased by7.33%

No dependency changes