envoc-form 3.1.0 → 3.2.0

package/es/ReactSelectField/ReactSelectField.js

@@ -7,6 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
 import { default as ReactSelect } from 'react-select';
 export var overrideTheme = function overrideTheme(theme) {
@@ -22,6 +23,8 @@ var red = '#f86c6b';
 var inputBorderColor = '#c2cfd6';
 var inputBorderColorFocused = '#8ad4ee';
 var inputBoxShadowFocused = '0 0 0 0.2rem rgba(32, 168, 216, 0.25)';
+var placeholderColor = '#9ca3af';
+var disabledSingleValueColor = '#4b5563';
 export var customStyles = {
   control: function control(provided, _ref) {
     var isFocused = _ref.isFocused,
@@ -39,6 +42,17 @@ export var customStyles = {
     return _objectSpread(_objectSpread({}, provided), {}, {
       zIndex: 3
     });
+  },
+  singleValue: function singleValue(provided, state) {
+    var color = state.isDisabled ? disabledSingleValueColor : '';
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      color: color
+    });
+  },
+  placeholder: function placeholder(defaultStyles) {
+    return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+      color: placeholderColor
+    });
   }
 }; // internal to forms use only
 
@@ -48,7 +62,7 @@ export default function ReactSelectInput(_ref2) {
       disabled = _ref2.disabled,
       onSelected = _ref2.onSelected,
       onChange = _ref2.onChange,
-      onBlur = _ref2.onBlur,
+      _onBlur = _ref2.onBlur,
       value = _ref2.value,
       options = _ref2.options,
       defaultValue = _ref2.defaultValue,
@@ -61,6 +75,23 @@ export default function ReactSelectInput(_ref2) {
   useEffect(function () {
     onSelectedRef.current && onSelectedRef.current(selectedItems);
   }, [selectedItems]);
+  var onBlurRef = useRef(_onBlur);
+  onBlurRef.current = _onBlur;
+  var touched = meta.touched;
+  useEffect(function () {
+    if (!touched) return; // without the timer set to 0, if the empty option is selected the required message doesn't appear until clicked away from the select input
+
+    var timerRef = setTimeout(function () {
+      onBlurRef.current && onBlurRef.current();
+    }, 0);
+    return function () {
+      clearTimeout(timerRef);
+    };
+  }, [value, touched]);
+  var classes = classNames(className, 'react-select-input', {
+    'is-invalid': !!meta.error,
+    disabled: disabled
+  });
   return /*#__PURE__*/React.createElement(ReactSelect, _extends({}, props, {
     options: options,
     isDisabled: disabled,
@@ -71,7 +102,10 @@ export default function ReactSelectInput(_ref2) {
     getOptionValue: getOptionValue,
     value: selectedItems,
     onChange: handleChange,
-    className: "react-select-input",
+    onBlur: function onBlur() {
+      return _onBlur();
+    },
+    className: classes,
     theme: overrideTheme,
     styles: customStyles,
     menuPortalTarget: document.body,

package/lib/ReactSelectField/ReactSelectField.js

@@ -16,6 +16,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactSelect = _interopRequireDefault(require("react-select"));
@@ -45,6 +47,8 @@ var red = '#f86c6b';
 var inputBorderColor = '#c2cfd6';
 var inputBorderColorFocused = '#8ad4ee';
 var inputBoxShadowFocused = '0 0 0 0.2rem rgba(32, 168, 216, 0.25)';
+var placeholderColor = '#9ca3af';
+var disabledSingleValueColor = '#4b5563';
 var customStyles = {
   control: function control(provided, _ref) {
     var isFocused = _ref.isFocused,
@@ -62,6 +66,17 @@ var customStyles = {
     return _objectSpread(_objectSpread({}, provided), {}, {
       zIndex: 3
     });
+  },
+  singleValue: function singleValue(provided, state) {
+    var color = state.isDisabled ? disabledSingleValueColor : '';
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      color: color
+    });
+  },
+  placeholder: function placeholder(defaultStyles) {
+    return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+      color: placeholderColor
+    });
   }
 }; // internal to forms use only
 
@@ -73,7 +88,7 @@ function ReactSelectInput(_ref2) {
       disabled = _ref2.disabled,
       onSelected = _ref2.onSelected,
       onChange = _ref2.onChange,
-      onBlur = _ref2.onBlur,
+      _onBlur = _ref2.onBlur,
       value = _ref2.value,
       options = _ref2.options,
       defaultValue = _ref2.defaultValue,
@@ -85,6 +100,23 @@ function ReactSelectInput(_ref2) {
   (0, _react.useEffect)(function () {
     onSelectedRef.current && onSelectedRef.current(selectedItems);
   }, [selectedItems]);
+  var onBlurRef = (0, _react.useRef)(_onBlur);
+  onBlurRef.current = _onBlur;
+  var touched = meta.touched;
+  (0, _react.useEffect)(function () {
+    if (!touched) return; // without the timer set to 0, if the empty option is selected the required message doesn't appear until clicked away from the select input
+
+    var timerRef = setTimeout(function () {
+      onBlurRef.current && onBlurRef.current();
+    }, 0);
+    return function () {
+      clearTimeout(timerRef);
+    };
+  }, [value, touched]);
+  var classes = (0, _classnames["default"])(className, 'react-select-input', {
+    'is-invalid': !!meta.error,
+    disabled: disabled
+  });
   return /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], (0, _extends2["default"])({}, props, {
     options: options,
     isDisabled: disabled,
@@ -95,7 +127,10 @@ function ReactSelectInput(_ref2) {
     getOptionValue: getOptionValue,
     value: selectedItems,
     onChange: handleChange,
-    className: "react-select-input",
+    onBlur: function onBlur() {
+      return _onBlur();
+    },
+    className: classes,
     theme: overrideTheme,
     styles: customStyles,
     menuPortalTarget: document.body,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "envoc-form",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Envoc form components",
   "keywords": [
     "react-component",
@@ -26,7 +26,7 @@
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
-    "envoc-request": "^3.1.0",
+    "envoc-request": "^3.2.0",
     "lru-cache": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-date-picker": "^8.2.0",

package/src/AddressInput/__snapshots__/AddesssInput.test.js.snap

@@ -110,7 +110,7 @@ exports[`AddressInput has matching snapshot 1`] = `
                 class=" css-lbak6p-Component"
               >
                 <div
-                  class=" css-1osw1h9-placeholder"
+                  class=" css-1vk4ta-placeholder"
                 >
                   State
                 </div>

package/src/BoolInput/__snapshots__/BoolInput.test.js.snap

@@ -23,7 +23,7 @@ exports[`BoolInput has matching snapshot 1`] = `
             class=" css-lbak6p-Component"
           >
             <div
-              class=" css-1osw1h9-placeholder"
+              class=" css-1vk4ta-placeholder"
             >
               Select...
             </div>

package/src/FormInput/__snapshots__/FormInput.test.js.snap

@@ -234,7 +234,7 @@ exports[`FormInput has matching select snapshot 1`] = `
             class=" css-lbak6p-Component"
           >
             <div
-              class=" css-1osw1h9-placeholder"
+              class=" css-1vk4ta-placeholder"
             >
               Select...
             </div>

package/src/ReactSelectField/ReactSelectField.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
 import { default as ReactSelect } from 'react-select';
 
@@ -17,6 +18,8 @@ const red = '#f86c6b';
 const inputBorderColor = '#c2cfd6';
 const inputBorderColorFocused = '#8ad4ee';
 const inputBoxShadowFocused = '0 0 0 0.2rem rgba(32, 168, 216, 0.25)';
+const placeholderColor = '#9ca3af';
+const disabledSingleValueColor = '#4b5563';
 
 export const customStyles = {
   control: (provided, { isFocused, selectProps }) => {
@@ -35,6 +38,13 @@ export const customStyles = {
     };
   },
   menu: (provided) => ({ ...provided, zIndex: 3 }),
+  singleValue: (provided, state) => {
+    const color = state.isDisabled ? disabledSingleValueColor : '';
+    return { ...provided, color };
+  },
+  placeholder: (defaultStyles) => {
+    return { ...defaultStyles, color: placeholderColor };
+  },
 };
 
 // internal to forms use only
@@ -59,6 +69,28 @@ export default function ReactSelectInput({
     onSelectedRef.current && onSelectedRef.current(selectedItems);
   }, [selectedItems]);
 
+  const onBlurRef = useRef(onBlur);
+  onBlurRef.current = onBlur;
+  const { touched } = meta;
+
+  useEffect(() => {
+    if (!touched) return;
+
+    // without the timer set to 0, if the empty option is selected the required message doesn't appear until clicked away from the select input
+    const timerRef = setTimeout(() => {
+      onBlurRef.current && onBlurRef.current();
+    }, 0);
+
+    return () => {
+      clearTimeout(timerRef);
+    };
+  }, [value, touched]);
+
+  const classes = classNames(className, 'react-select-input', {
+    'is-invalid': !!meta.error,
+    disabled: disabled,
+  });
+
   return (
     <ReactSelect
       {...props}
@@ -69,7 +101,8 @@ export default function ReactSelectInput({
       getOptionValue={getOptionValue}
       value={selectedItems}
       onChange={handleChange}
-      className="react-select-input"
+      onBlur={() => onBlur()}
+      className={classes}
       theme={overrideTheme}
       styles={customStyles}
       menuPortalTarget={document.body}