@danderson00/react-forms 0.0.15 → 0.0.16

package/dist/ErrorMessage.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.extractErrorMessage = void 0;
+exports.extractErrorMessage = exports["default"] = void 0;
 
 var _react = require("react");
 

package/dist/fields.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Radio = exports.RadioButton = exports.Checkbox = exports.Text = void 0;
+exports.Text = exports.RadioButton = exports.Radio = exports.Checkbox = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/index.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Form = void 0;
 Object.defineProperty(exports, "FormProvider", {
   enumerable: true,
   get: function get() {
     return _Form["default"];
   }
 });
-exports.useFormValues = exports.wrapSubmit = exports.wrapInput = exports.Select = exports.Textarea = exports.Input = exports.Submit = exports.Form = exports.createRawConsumer = exports.context = void 0;
+exports.wrapSubmit = exports.wrapInput = exports.useFormValues = exports.createRawConsumer = exports.context = exports.Textarea = exports.Submit = exports.Select = exports.Input = void 0;
 
 var _react = require("react");
 

package/dist/input.js

@@ -15,7 +15,7 @@ var _inputTypes = _interopRequireDefault(require("./inputTypes"));
 
 var _throttle2 = _interopRequireDefault(require("./throttle"));
 
-var _excluded = ["type", "name", "value", "checked", "defaultValue", "numeric", "onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "submitOnChange", "submitOnBlur", "throttle"];
+var _excluded = ["type", "name", "value", "checked", "defaultValue", "numeric", "onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "submitOnChange", "submitOnBlur", "selectOnFocus", "throttle"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -170,6 +170,32 @@ var _default = function _default(render) {
       }
     };
 
+    var onFocus = function onFocus() {
+      var selectOnFocus = props.selectOnFocus,
+          onFocus = props.onFocus;
+
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+
+      var event = args[0];
+      var element = event.target;
+
+      var selectText = function selectText() {
+        element.selectionStart = 0;
+        element.selectionEnd = element.value.length;
+      };
+
+      if (selectOnFocus) {
+        selectText();
+        setTimeout(selectText);
+      }
+
+      if (onFocus) {
+        onFocus.apply(element, args);
+      }
+    };
+
     var updateValidationState = function updateValidationState() {
       setFieldValidated(true); // this is a little hacky, but the simplest way I could think of to determine the
       // validity of the actual input element. :invalid is also not supported by enzyme
@@ -198,6 +224,7 @@ var _default = function _default(render) {
           getFieldValues = props.getFieldValues,
           submitOnChange = props.submitOnChange,
           submitOnBlur = props.submitOnBlur,
+          selectOnFocus = props.selectOnFocus,
           _throttle = props.throttle,
           passThroughProps = _objectWithoutProperties(props, _excluded);
 
@@ -218,6 +245,7 @@ var _default = function _default(render) {
         className: className
       }, passThroughProps), valueProps), typeProps), errorProps), {}, {
         onChange: onChange,
+        onFocus: onFocus,
         onBlur: onBlur
       });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danderson00/react-forms",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Ultra simple, stateless, validated forms for use in React function components",
   "main": "dist/index.js",
   "module": "src/index.js",
@@ -32,7 +32,7 @@
       "\\.css$": "<rootDir>/test/setup/styleMock.js"
     },
     "setupFilesAfterEnv": [
-      "<rootDir>test/setup/beforeAll.js"
+      "<rootDir>test/setup/enzyme.js"
     ]
   },
   "babel": {

package/src/input.js

@@ -91,6 +91,25 @@ export default (render, options = {}) => function Input(props) {
     }
   }
 
+  const onFocus = (...args) => {
+    const { selectOnFocus, onFocus } = props
+    const [event] = args
+    const element = event.target
+
+    const selectText = () => {
+      element.selectionStart = 0
+      element.selectionEnd = element.value.length
+    }
+
+    if(selectOnFocus) {
+      selectText()
+      setTimeout(selectText)
+    }
+    if(onFocus) {
+      onFocus.apply(element, args)
+    }
+  }
+
   const updateValidationState = () => {
     setFieldValidated(true)
     // this is a little hacky, but the simplest way I could think of to determine the
@@ -105,7 +124,7 @@ export default (render, options = {}) => function Input(props) {
     const {
       type, name, value, checked, defaultValue, numeric,
       onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
-      submitOnChange, submitOnBlur, throttle,
+      submitOnChange, submitOnBlur, selectOnFocus, throttle,
       ...passThroughProps
     } = props
     const valueProps = getValueProps({ currentValue: getFieldValue(name) })
@@ -116,7 +135,7 @@ export default (render, options = {}) => function Input(props) {
     const finalProps = {
       id, name, className,
       ...passThroughProps, ...valueProps, ...typeProps, ...errorProps,
-      onChange, onBlur
+      onChange, onFocus, onBlur
     }
 
     return render(finalProps)