Merge pull request #35 from healthwise/improve-proptype-definitions

Improved PropType definitions for accuracy & to get rid of React warnings
healthwise · Jan 31, 2020 · d89d9a6 · d89d9a6
2 parents 863c207 + 26a7f4d
commit d89d9a6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,3 +1,13 @@
+# 0.0.20
+
+## Checkbox
+- Removed `isRequired` prop type specification on `name` & `value`
+
+## TextArea
+- Removed `isRequired` prop type specification on `onFocus`, `onBlur`, `onKeyDown`, & `onChange`
+- Changed default props for `defaultValue` & `value` from `null` to `undefined`
+  - Otherwise, React triggers this warning: "Warning: [your component here] contains a textarea with both value and defaultValue props. Textarea elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled textarea and remove one of these props. More info: https://fb.me/react-controlled-components"
+
 # 0.0.19
 
 ## DropDown
@@ -10,7 +20,6 @@
 - Added stories to TextArea stories to reflect `error` prop
 - Added story to TextArea stories to reflect `required` prop
 
-
 # 0.0.18
 
 - Added [Storybook State](https://github.com/dump247/storybook-state/) addon for showing changes in state within one component story

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@healthwise-ui/core",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Shared React UI library that implements the Healthwise design language.",
   "main": "index.js",
   "unpkg": "healthwise-ui.min.js",

diff --git a/packages/core/src/Checkbox/index.js b/packages/core/src/Checkbox/index.js
@@ -100,8 +100,8 @@ class Checkbox extends React.Component {
 
 Checkbox.propTypes = {
   className: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  value: PropTypes.string,
   checked: PropTypes.bool,
   onClick: PropTypes.func,
   required: PropTypes.bool,

diff --git a/packages/core/src/TextArea/index.js b/packages/core/src/TextArea/index.js
@@ -340,10 +340,10 @@ Textarea.propTypes = {
   error: PropTypes.string,
   required: PropTypes.bool,
   maxCharacters: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onFocus: PropTypes.func.isRequired,
-  onBlur: PropTypes.func.isRequired,
-  onKeyDown: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onChange: PropTypes.func,
   readonly: PropTypes.bool,
   theme: PropTypes.shape({
     colorBorder: PropTypes.string,
@@ -355,25 +355,17 @@ Textarea.propTypes = {
 
 Textarea.defaultProps = {
   id: getKey(),
-  defaultValue: null,
-  value: null,
+  defaultValue: undefined,
+  value: undefined,
   readonly: false,
   disabled: false,
   maxCharacters: null,
-  onFocus: function(e) {
-    return e
-  },
-  onBlur: function(e) {
-    return e
-  },
-  onKeyDown: function(e) {
-    return e
-  },
-  onChange: function(e) {
-    return e
-  },
-  onValid: () => {},
-  onInvalid: () => {},
+  onFocus: e => e,
+  onBlur: e => e,
+  onKeyDown: e => e,
+  onChange: e => e,
+  onValid: val => val,
+  onInvalid: (val, errType) => ({ val, errType }),
   theme: defaultTheme,
 }