@modernpoacher/cogs 0.0.60 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernpoacher/cogs",
-  "version": "0.0.60",
+  "version": "0.1.1",
   "description": "Cogs",
   "keywords": [
     "Cogs",
@@ -57,9 +57,9 @@
     "@storybook/addon-links": "^7.5.3",
     "@storybook/react": "^7.5.3",
     "@storybook/react-webpack5": "^7.5.3",
-    "@types/react": "^18.2.38",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
+    "@types/react": "^18.2.39",
+    "@typescript-eslint/eslint-plugin": "^6.13.0",
+    "@typescript-eslint/parser": "^6.13.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.33.3",

package/src/cogs/checkbox/field/index.jsx

@@ -2,6 +2,7 @@
  * CheckboxField component
  */
 import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import { CheckField } from '@modernpoacher/cogs/components/field'
@@ -15,6 +16,7 @@ export default class CheckboxField extends CheckField {
     const {
       id,
       name,
+      value,
       checked,
       defaultChecked,
       required,
@@ -31,6 +33,7 @@ export default class CheckboxField extends CheckField {
       <input
         id={id}
         name={name}
+        value={value}
         checked={checked}
         defaultChecked={defaultChecked}
         required={required}
@@ -49,7 +52,8 @@ export default class CheckboxField extends CheckField {
 }
 
 CheckboxField.propTypes = {
-  ...CheckField.propTypes
+  ...CheckField.propTypes,
+  value: PropTypes.string.isRequired
 }
 
 CheckboxField.defaultProps = {

package/src/cogs/checkbox/index.jsx

@@ -2,6 +2,7 @@
  * CheckboxCog component
  */
 import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import { CheckCog } from '@modernpoacher/cogs/cogs'
@@ -16,20 +17,27 @@ export default class CheckboxCog extends CheckCog {
     return classnames(super.getClassName(), 'checkbox')
   }
 
-  handleClick = (value) => {
+  handleClick = (value, checked) => {
     const {
       onClick
     } = this.props
 
-    onClick(value)
+    onClick(value, checked)
   }
 
-  handleChange = (value) => {
+  handleChange = (value, checked) => {
     const {
       onChange
     } = this.props
 
-    onChange(value)
+    onChange(value, checked)
+  }
+
+  shouldComponentUpdate (props) {
+    return (
+      super.shouldComponentUpdate(props) ||
+      (props.value !== this.props.value)
+    )
   }
 
   renderTitle () {
@@ -82,6 +90,7 @@ export default class CheckboxCog extends CheckCog {
 
     const {
       name,
+      value,
       checked,
       defaultChecked,
       required,
@@ -97,6 +106,7 @@ export default class CheckboxCog extends CheckCog {
       <Field
         id={id}
         name={name}
+        value={value}
         checked={checked}
         defaultChecked={defaultChecked}
         required={required}
@@ -127,7 +137,8 @@ export default class CheckboxCog extends CheckCog {
 }
 
 CheckboxCog.propTypes = {
-  ...CheckCog.propTypes
+  ...CheckCog.propTypes,
+  value: PropTypes.string.isRequired
 }
 
 CheckboxCog.defaultProps = {

package/src/cogs/radio/field/index.jsx

@@ -12,18 +12,6 @@ export default class RadioField extends CheckField {
     return classnames(super.getClassName(), 'radio')
   }
 
-  handleClick = ({ target: { value } }) => {
-    const { onClick } = this.props
-
-    onClick(value)
-  }
-
-  handleChange = ({ target: { value } }) => {
-    const { onChange } = this.props
-
-    onChange(value)
-  }
-
   render () {
     const {
       id,

package/src/cogs/radio/index.jsx

@@ -17,20 +17,20 @@ export default class Radio extends CheckCog {
     return classnames(super.getClassName(), 'radio')
   }
 
-  handleClick = (value) => {
+  handleClick = (value, checked) => {
     const {
       onClick
     } = this.props
 
-    onClick(value)
+    onClick(value, checked)
   }
 
-  handleChange = (value) => {
+  handleChange = (value, checked) => {
     const {
       onChange
     } = this.props
 
-    onChange(value)
+    onChange(value, checked)
   }
 
   shouldComponentUpdate (props) {

package/src/components/field/index.jsx

@@ -115,21 +115,22 @@ export class CheckField extends Field {
   shouldComponentUpdate (props) {
     return (
       super.shouldComponentUpdate(props) ||
+      (props.value !== this.props.value) ||
       (props.checked !== this.props.checked) ||
       (props.onClick !== this.props.onClick)
     )
   }
 
-  handleClick = ({ target: { checked } }) => {
+  handleClick = ({ target: { value, checked } }) => {
     const { onClick } = this.props
 
-    onClick(checked)
+    onClick(value, checked)
   }
 
-  handleChange = ({ target: { checked } }) => {
+  handleChange = ({ target: { value, checked } }) => {
     const { onChange } = this.props
 
-    onChange(checked)
+    onChange(value, checked)
   }
 }