@modernpoacher/cogs 0.0.25 → 0.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernpoacher/cogs",
-  "version": "0.0.25",
+  "version": "0.0.28",
   "description": "Cogs",
   "keywords": [
     "Cogs",
@@ -64,7 +64,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.33.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-with-typescript": "^39.1.0",
     "eslint-import-resolver-babel-module": "^5.3.2",

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

@@ -7,10 +7,22 @@ import classnames from 'classnames'
 
 import { ValueField } from '@modernpoacher/cogs/components/field'
 
+function getSelectedValues ({ target: { selectedOptions } }) {
+  return (
+    Array.from(selectedOptions)
+      .map(({ value, text }) => value || text)
+  )
+}
+
+function getSelectedValue ({ target: { value } }) {
+  return value
+}
+
 export default class SelectField extends ValueField {
   shouldComponentUpdate (props) {
     return (
       super.shouldComponentUpdate(props) ||
+      (props.multiple !== this.props.multiple) ||
       (props.children !== this.props.children)
     )
   }
@@ -19,6 +31,19 @@ export default class SelectField extends ValueField {
     return classnames(super.getClassName(), 'select')
   }
 
+  handleChange = (event) => {
+    const {
+      multiple,
+      onChange
+    } = this.props
+
+    if (multiple) {
+      onChange(getSelectedValues(event))
+    } else {
+      onChange(getSelectedValue(event))
+    }
+  }
+
   render () {
     const {
       id,
@@ -30,6 +55,7 @@ export default class SelectField extends ValueField {
       readOnly,
       tabIndex,
       accessKey,
+      multiple,
       children,
       fieldRef
     } = this.props
@@ -47,6 +73,7 @@ export default class SelectField extends ValueField {
         readOnly={readOnly}
         tabIndex={tabIndex}
         accessKey={accessKey}
+        multiple={multiple}
         onChange={this.handleChange}
         className={className}
         ref={fieldRef}>
@@ -58,6 +85,19 @@ export default class SelectField extends ValueField {
 
 SelectField.propTypes = {
   ...ValueField.propTypes,
+  multiple: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(
+      PropTypes.string
+    )
+  ]),
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(
+      PropTypes.string
+    )
+  ]),
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(
@@ -67,5 +107,6 @@ SelectField.propTypes = {
 }
 
 SelectField.defaultProps = {
-  ...ValueField.defaultProps
+  ...ValueField.defaultProps,
+  multiple: false
 }

package/src/cogs/select/index.jsx

@@ -90,6 +90,7 @@ export default class SelectCog extends ValueCog {
       tabIndex,
       accessKey,
       placeholder,
+      multiple,
       fieldRef,
       children
     } = this.props
@@ -106,6 +107,7 @@ export default class SelectCog extends ValueCog {
         tabIndex={tabIndex}
         accessKey={accessKey}
         placeholder={placeholder}
+        multiple={multiple}
         onChange={this.handleChange}
         fieldRef={fieldRef}>
         {children}
@@ -116,6 +118,19 @@ export default class SelectCog extends ValueCog {
 
 SelectCog.propTypes = {
   ...ValueCog.propTypes,
+  multiple: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(
+      PropTypes.string
+    )
+  ]),
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(
+      PropTypes.string
+    )
+  ]),
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(
@@ -125,5 +140,6 @@ SelectCog.propTypes = {
 }
 
 SelectCog.defaultProps = {
-  ...ValueCog.defaultProps
+  ...ValueCog.defaultProps,
+  multiple: false
 }

package/src/components/title/index.jsx

@@ -38,7 +38,8 @@ export default class Title extends Component {
       (props.title !== this.props.title) ||
       (props.required !== this.props.required) ||
       (props.disabled !== this.props.disabled) ||
-      (props.readOnly !== this.props.readOnly)
+      (props.readOnly !== this.props.readOnly) ||
+      (props.children !== this.props.children)
     )
   }