@modernpoacher/cogs 0.1.122 → 0.1.124

package/babel.config.cjs

@@ -47,6 +47,7 @@ const plugins = [
         /**
          *  Storybook
          */
+        '@modernpoacher/cogs/common/': './src/common/index.mjs',
         '@modernpoacher/cogs/cogs/checkbox/error-message': './src/cogs/checkbox/error-message/index.jsx',
         '@modernpoacher/cogs/cogs/checkbox/description': './src/cogs/checkbox/description/index.jsx',
         '@modernpoacher/cogs/cogs/checkbox/field': './src/cogs/checkbox/field/index.jsx',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernpoacher/cogs",
-  "version": "0.1.122",
+  "version": "0.1.124",
   "description": "Cogs",
   "keywords": [
     "Cogs",
@@ -52,11 +52,11 @@
     "@babel/register": "^7.24.6",
     "@modernpoacher/design-system": "1.0.113",
     "@modernpoacher/hooks": "^1.0.479",
-    "@storybook/addon-actions": "^8.1.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-webpack5": "^8.1.11",
+    "@storybook/addon-actions": "7.6.20",
+    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/addon-links": "7.6.20",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-webpack5": "7.6.20",
     "@types/react": "^18.3.3",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",
@@ -72,7 +72,7 @@
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
     "postcss-map": "^0.11.0",
@@ -83,7 +83,7 @@
     "remove-files-webpack-plugin": "^1.5.0",
     "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
-    "storybook": "^8.1.11",
+    "storybook": "7.6.20",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4"
   },
@@ -136,6 +136,7 @@
     "./cogs/textarea/error-message": "./src/cogs/textarea/error-message/index.cjs",
     "./cogs/textarea/field": "./src/cogs/textarea/field/index.cjs",
     "./cogs/textarea/title": "./src/cogs/textarea/title/index.cjs",
+    "./common": "./src/common/index.mjs",
     "./components/common/disabled": "./src/components/common/disabled/index.cjs",
     "./components/common/readonly": "./src/components/common/readonly/index.cjs",
     "./components/common/required": "./src/components/common/required/index.cjs",

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

@@ -18,9 +18,9 @@ export default class CheckboxField extends CheckField {
       id,
       name,
       value,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       fieldRef
@@ -40,8 +40,8 @@ export default class CheckboxField extends CheckField {
           readOnly={readOnly}
           tabIndex={tabIndex}
           accessKey={accessKey}
-          onClick={this.handleClick}
           onChange={this.handleChange}
+          onClick={this.handleClick}
           className={className}
           type='checkbox'
           ref={fieldRef}
@@ -64,8 +64,8 @@ export default class CheckboxField extends CheckField {
         readOnly={readOnly}
         tabIndex={tabIndex}
         accessKey={accessKey}
-        onClick={this.handleClick}
         onChange={this.handleChange}
+        onClick={this.handleClick}
         className={className}
         type='checkbox'
         ref={fieldRef}

package/src/cogs/checkbox/index.jsx

@@ -7,6 +7,11 @@ import classnames from 'classnames'
 
 import { CheckCog } from '@modernpoacher/cogs/cogs'
 
+import {
+  DEFAULT_HANDLE_CHANGE,
+  DEFAULT_HANDLE_CLICK
+} from '@modernpoacher/cogs/common'
+
 import Title from './title/index.jsx'
 import Description from './description/index.jsx'
 import ErrorMessage from './error-message/index.jsx'
@@ -17,20 +22,20 @@ export default class CheckboxCog extends CheckCog {
     return classnames(super.getClassName(), 'checkbox')
   }
 
-  handleClick = (value, checked) => {
+  handleChange = (value, checked) => {
     const {
-      onClick
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
-    onClick(value, checked)
+    onChange(value, checked)
   }
 
-  handleChange = (value, checked) => {
+  handleClick = (value, checked) => {
     const {
-      onChange
+      onClick = DEFAULT_HANDLE_CLICK
     } = this.props
 
-    onChange(value, checked)
+    onClick(value, checked)
   }
 
   shouldComponentUpdate (props) {
@@ -45,9 +50,9 @@ export default class CheckboxCog extends CheckCog {
 
     const {
       title,
-      required,
-      disabled,
-      readOnly
+      required = false,
+      disabled = false,
+      readOnly = false
     } = this.props
 
     return (
@@ -93,9 +98,9 @@ export default class CheckboxCog extends CheckCog {
       value,
       checked,
       defaultChecked,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,
@@ -115,8 +120,8 @@ export default class CheckboxCog extends CheckCog {
         tabIndex={tabIndex}
         accessKey={accessKey}
         placeholder={placeholder}
-        onClick={this.handleClick}
         onChange={this.handleChange}
+        onClick={this.handleClick}
         fieldRef={fieldRef}
       />
     )

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

@@ -17,9 +17,9 @@ export default class EmailField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/cogs/email/index.jsx

@@ -6,6 +6,10 @@ import classnames from 'classnames'
 
 import { ValueCog } from '@modernpoacher/cogs/cogs'
 
+import {
+  DEFAULT_HANDLE_CHANGE
+} from '@modernpoacher/cogs/common'
+
 import Title from './title/index.jsx'
 import Description from './description/index.jsx'
 import ErrorMessage from './error-message/index.jsx'
@@ -18,7 +22,7 @@ export default class EmailCog extends ValueCog {
 
   handleChange = (value) => {
     const {
-      onChange
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
     onChange(value)
@@ -29,9 +33,9 @@ export default class EmailCog extends ValueCog {
 
     const {
       title,
-      required,
-      disabled,
-      readOnly
+      required = false,
+      disabled = false,
+      readOnly = false
     } = this.props
 
     return (
@@ -76,9 +80,9 @@ export default class EmailCog extends ValueCog {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/cogs/index.jsx

@@ -7,25 +7,25 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
+import {
+  DEFAULT_HANDLE_CHANGE,
+  DEFAULT_HANDLE_CLICK
+} from '@modernpoacher/cogs/common'
+
 import Title from '@modernpoacher/cogs/components/title'
 import Description from '@modernpoacher/cogs/components/description'
 import ErrorMessage from '@modernpoacher/cogs/components/error-message'
-import Field from '@modernpoacher/cogs/components/field'
-
-function onChange () {
-  /* */
-}
-
-function onClick () {
-  /* */
-}
+import Field, {
+  ValueField,
+  CheckField
+} from '@modernpoacher/cogs/components/field'
 
 export default class Cog extends Component {
   getClassName () {
     const {
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       errorMessage
     } = this.props
 
@@ -67,9 +67,9 @@ export default class Cog extends Component {
 
     const {
       title,
-      required,
-      disabled,
-      readOnly
+      required = false,
+      disabled = false,
+      readOnly = false
     } = this.props
 
     return (
@@ -112,13 +112,13 @@ export default class Cog extends Component {
 
     const {
       name,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,
-      onChange,
+      onChange = DEFAULT_HANDLE_CHANGE,
       fieldRef
     } = this.props
 
@@ -172,7 +172,7 @@ Cog.defaultProps = {
   required: false,
   disabled: false,
   readOnly: false,
-  onChange
+  onChange: DEFAULT_HANDLE_CHANGE
 }
 
 export class ValueCog extends Cog {
@@ -182,6 +182,37 @@ export class ValueCog extends Cog {
       (props.value !== this.props.value)
     )
   }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      placeholder,
+      onChange = DEFAULT_HANDLE_CHANGE,
+      fieldRef
+    } = this.props
+
+    return (
+      <ValueField
+        id={id}
+        name={name}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={onChange}
+        fieldRef={fieldRef}
+      />
+    )
+  }
 }
 
 ValueCog.propTypes = {
@@ -202,6 +233,39 @@ export class CheckCog extends Cog {
       (props.onClick !== this.props.onClick)
     )
   }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      placeholder,
+      onChange = DEFAULT_HANDLE_CHANGE,
+      onClick = DEFAULT_HANDLE_CLICK,
+      fieldRef
+    } = this.props
+
+    return (
+      <CheckField
+        id={id}
+        name={name}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={onChange}
+        onClick={onClick}
+        fieldRef={fieldRef}
+      />
+    )
+  }
 }
 
 CheckCog.propTypes = {
@@ -213,5 +277,5 @@ CheckCog.propTypes = {
 
 CheckCog.defaultProps = {
   ...Cog.defaultProps,
-  onClick
+  onClick: DEFAULT_HANDLE_CLICK
 }

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

@@ -18,9 +18,9 @@ export default class NumberField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/cogs/number/index.jsx

@@ -7,6 +7,10 @@ import classnames from 'classnames'
 
 import { ValueCog } from '@modernpoacher/cogs/cogs'
 
+import {
+  DEFAULT_HANDLE_CHANGE
+} from '@modernpoacher/cogs/common'
+
 import Title from './title/index.jsx'
 import Description from './description/index.jsx'
 import ErrorMessage from './error-message/index.jsx'
@@ -19,7 +23,7 @@ export default class NumberCog extends ValueCog {
 
   handleChange = (value) => {
     const {
-      onChange
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
     onChange(value)
@@ -30,9 +34,9 @@ export default class NumberCog extends ValueCog {
 
     const {
       title,
-      required,
-      disabled,
-      readOnly
+      required = false,
+      disabled = false,
+      readOnly = false
     } = this.props
 
     return (
@@ -77,9 +81,9 @@ export default class NumberCog extends ValueCog {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

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

@@ -17,9 +17,9 @@ export default class PasswordField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/cogs/password/index.jsx

@@ -6,6 +6,10 @@ import classnames from 'classnames'
 
 import { ValueCog } from '@modernpoacher/cogs/cogs'
 
+import {
+  DEFAULT_HANDLE_CHANGE
+} from '@modernpoacher/cogs/common'
+
 import Title from './title/index.jsx'
 import Description from './description/index.jsx'
 import ErrorMessage from './error-message/index.jsx'
@@ -18,7 +22,7 @@ export default class PasswordCog extends ValueCog {
 
   handleChange = (value) => {
     const {
-      onChange
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
     onChange(value)
@@ -29,9 +33,9 @@ export default class PasswordCog extends ValueCog {
 
     const {
       title,
-      required,
-      disabled,
-      readOnly
+      required = false,
+      disabled = false,
+      readOnly = false
     } = this.props
 
     return (
@@ -76,9 +80,9 @@ export default class PasswordCog extends ValueCog {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

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

@@ -18,9 +18,9 @@ export default class RadioField extends CheckField {
       id,
       name,
       value,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       fieldRef
@@ -40,8 +40,8 @@ export default class RadioField extends CheckField {
           readOnly={readOnly}
           tabIndex={tabIndex}
           accessKey={accessKey}
-          onClick={this.handleClick}
           onChange={this.handleChange}
+          onClick={this.handleClick}
           className={className}
           type='radio'
           ref={fieldRef}
@@ -64,8 +64,8 @@ export default class RadioField extends CheckField {
         readOnly={readOnly}
         tabIndex={tabIndex}
         accessKey={accessKey}
-        onClick={this.handleClick}
         onChange={this.handleChange}
+        onClick={this.handleClick}
         className={className}
         type='radio'
         ref={fieldRef}

package/src/cogs/radio/index.jsx

@@ -7,6 +7,11 @@ import classnames from 'classnames'
 
 import { CheckCog } from '@modernpoacher/cogs/cogs'
 
+import {
+  DEFAULT_HANDLE_CHANGE,
+  DEFAULT_HANDLE_CLICK
+} from '@modernpoacher/cogs/common'
+
 import Title from './title/index.jsx'
 import Description from './description/index.jsx'
 import ErrorMessage from './error-message/index.jsx'
@@ -17,20 +22,20 @@ export default class Radio extends CheckCog {
     return classnames(super.getClassName(), 'radio')
   }
 
-  handleClick = (value, checked) => {
+  handleChange = (value, checked) => {
     const {
-      onClick
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
-    onClick(value, checked)
+    onChange(value, checked)
   }
 
-  handleChange = (value, checked) => {
+  handleClick = (value, checked) => {
     const {
-      onChange
+      onClick = DEFAULT_HANDLE_CLICK
     } = this.props
 
-    onChange(value, checked)
+    onClick(value, checked)
   }
 
   shouldComponentUpdate (props) {
@@ -45,9 +50,9 @@ export default class Radio extends CheckCog {
 
     const {
       title,
-      required,
-      disabled,
-      readOnly
+      required = false,
+      disabled = false,
+      readOnly = false
     } = this.props
 
     return (
@@ -93,9 +98,9 @@ export default class Radio extends CheckCog {
       value,
       checked,
       defaultChecked,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,
@@ -115,8 +120,8 @@ export default class Radio extends CheckCog {
         tabIndex={tabIndex}
         accessKey={accessKey}
         placeholder={placeholder}
-        onClick={this.handleClick}
         onChange={this.handleChange}
+        onClick={this.handleClick}
         fieldRef={fieldRef}
       />
     )

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

@@ -5,6 +5,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
+import {
+  DEFAULT_HANDLE_CHANGE
+} from '@modernpoacher/cogs/common'
+
 import { ValueField } from '@modernpoacher/cogs/components/field'
 
 function getSelectedValues ({ target: { selectedOptions } }) {
@@ -33,8 +37,8 @@ export default class SelectField extends ValueField {
 
   handleChange = (event) => {
     const {
-      multiple,
-      onChange
+      multiple = false,
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
     if (multiple) {
@@ -50,12 +54,12 @@ export default class SelectField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
-      multiple,
+      multiple = false,
       children,
       fieldRef
     } = this.props

package/src/cogs/select/index.jsx

@@ -7,6 +7,10 @@ import classnames from 'classnames'
 
 import { ValueCog } from '@modernpoacher/cogs/cogs'
 
+import {
+  DEFAULT_HANDLE_CHANGE
+} from '@modernpoacher/cogs/common'
+
 import Title from './title/index.jsx'
 import Description from './description/index.jsx'
 import ErrorMessage from './error-message/index.jsx'
@@ -27,7 +31,7 @@ export default class SelectCog extends ValueCog {
 
   handleChange = (value) => {
     const {
-      onChange
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
     onChange(value)
@@ -38,9 +42,9 @@ export default class SelectCog extends ValueCog {
 
     const {
       title,
-      required,
-      disabled,
-      readOnly
+      required = false,
+      disabled = false,
+      readOnly = false
     } = this.props
 
     return (
@@ -85,13 +89,13 @@ export default class SelectCog extends ValueCog {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,
-      multiple,
+      multiple = false,
       fieldRef,
       children
     } = this.props

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

@@ -17,9 +17,9 @@ export default class TextField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/cogs/text/index.jsx

@@ -6,6 +6,10 @@ import classnames from 'classnames'
 
 import { ValueCog } from '@modernpoacher/cogs/cogs'
 
+import {
+  DEFAULT_HANDLE_CHANGE
+} from '@modernpoacher/cogs/common'
+
 import Title from './title/index.jsx'
 import Description from './description/index.jsx'
 import ErrorMessage from './error-message/index.jsx'
@@ -18,7 +22,7 @@ export default class TextCog extends ValueCog {
 
   handleChange = (value) => {
     const {
-      onChange
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
     onChange(value)
@@ -29,9 +33,9 @@ export default class TextCog extends ValueCog {
 
     const {
       title,
-      required,
-      disabled,
-      readOnly
+      required = false,
+      disabled = false,
+      readOnly = false
     } = this.props
 
     return (
@@ -76,9 +80,9 @@ export default class TextCog extends ValueCog {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

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

@@ -17,9 +17,9 @@ export default class TextareaField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/cogs/textarea/index.jsx

@@ -6,6 +6,10 @@ import classnames from 'classnames'
 
 import { ValueCog } from '@modernpoacher/cogs/cogs'
 
+import {
+  DEFAULT_HANDLE_CHANGE
+} from '@modernpoacher/cogs/common'
+
 import Title from './title/index.jsx'
 import Description from './description/index.jsx'
 import ErrorMessage from './error-message/index.jsx'
@@ -18,7 +22,7 @@ export default class TextareaCog extends ValueCog {
 
   handleChange = (value) => {
     const {
-      onChange
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
     onChange(value)
@@ -29,9 +33,9 @@ export default class TextareaCog extends ValueCog {
 
     const {
       title,
-      required,
-      disabled,
-      readOnly
+      required = false,
+      disabled = false,
+      readOnly = false
     } = this.props
 
     return (
@@ -76,9 +80,9 @@ export default class TextareaCog extends ValueCog {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/common/index.mjs

@@ -0,0 +1,7 @@
+export function DEFAULT_HANDLE_CHANGE () {
+  /* */
+}
+
+export function DEFAULT_HANDLE_CLICK () {
+  /* */
+}

package/src/components/common/text-content/index.jsx

@@ -26,3 +26,5 @@ export default function TextContent ({ textContent }) {
 TextContent.propTypes = {
   textContent: PropTypes.string.isRequired
 }
+
+TextContent.defaultProps = {}

package/src/components/description/index.jsx

@@ -35,3 +35,5 @@ export default class Description extends Component {
 Description.propTypes = {
   description: PropTypes.string
 }
+
+Description.defaultProps = {}

package/src/components/error-message/index.d.mts

@@ -0,0 +1,7 @@
+declare module '@modernpoacher/cogs/components/error-message' {
+  import React from 'react'
+
+  export type ErrorMessageProps = CogsTypes.ErrorDefinitionType
+
+  export default class ErrorMessage extends React.Component<ErrorMessageProps> {}
+}

package/src/components/error-message/index.jsx

@@ -39,3 +39,5 @@ export default class ErrorMessage extends Component {
 ErrorMessage.propTypes = {
   errorMessage: PropTypes.string
 }
+
+ErrorMessage.defaultProps = {}

package/src/components/field/index.jsx

@@ -4,13 +4,10 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-function onChange () {
-  /* */
-}
-
-function onClick () {
-  /* */
-}
+import {
+  DEFAULT_HANDLE_CHANGE,
+  DEFAULT_HANDLE_CLICK
+} from '@modernpoacher/cogs/common'
 
 export default class Field extends Component {
   getClassName () {
@@ -33,9 +30,9 @@ export default class Field extends Component {
   render () {
     const {
       id,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,
@@ -77,22 +74,24 @@ Field.defaultProps = {
   required: false,
   disabled: false,
   readOnly: false,
-  onChange
+  onChange: DEFAULT_HANDLE_CHANGE
 }
 
 /**
  * ValueField component
  */
 export class ValueField extends Field {
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
-      super.shouldComponentUpdate(props) ||
+      super.shouldComponentUpdate(props, state) ||
       (props.value !== this.props.value)
     )
   }
 
   handleChange = ({ target: { value } }) => {
-    const { onChange } = this.props
+    const {
+      onChange = DEFAULT_HANDLE_CHANGE
+    } = this.props
 
     onChange(value)
   }
@@ -112,9 +111,9 @@ ValueField.defaultProps = {
  * CheckField component
  */
 export class CheckField extends Field {
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
-      super.shouldComponentUpdate(props) ||
+      super.shouldComponentUpdate(props, state) ||
       (props.value !== this.props.value) ||
       (props.checked !== this.props.checked) ||
       (props.onClick !== this.props.onClick)
@@ -122,13 +121,17 @@ export class CheckField extends Field {
   }
 
   handleClick = ({ target: { value, checked } }) => {
-    const { onClick } = this.props
+    const {
+      onClick = DEFAULT_HANDLE_CLICK
+    } = this.props
 
     onClick(value, checked)
   }
 
   handleChange = ({ target: { value, checked } }) => {
-    const { onChange } = this.props
+    const {
+      onChange = DEFAULT_HANDLE_CHANGE
+    } = this.props
 
     onChange(value, checked)
   }
@@ -143,5 +146,5 @@ CheckField.propTypes = {
 
 CheckField.defaultProps = {
   ...Field.defaultProps,
-  onClick
+  onClick: DEFAULT_HANDLE_CLICK
 }