@modernpoacher/gremlins 0.0.21 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modernpoacher/gremlins",
3
- "version": "0.0.21",
3
+ "version": "0.0.23",
4
4
  "description": "Gremlins",
5
5
  "keywords": [
6
6
  "Gremlins",
@@ -51,7 +51,7 @@
51
51
  "@babel/preset-react": "^7.22.15",
52
52
  "@babel/register": "^7.22.15",
53
53
  "@modernpoacher/design-system": "1.0.77",
54
- "@modernpoacher/hooks": "^1.0.439",
54
+ "@modernpoacher/hooks": "^1.0.440",
55
55
  "@storybook/addon-actions": "^7.4.6",
56
56
  "@storybook/addon-essentials": "^7.4.6",
57
57
  "@storybook/addon-links": "^7.4.6",
@@ -66,7 +66,7 @@
66
66
  "cross-env": "^7.0.3",
67
67
  "eslint": "^8.51.0",
68
68
  "eslint-config-standard": "^17.1.0",
69
- "eslint-config-standard-with-typescript": "^39.1.0",
69
+ "eslint-config-standard-with-typescript": "^39.1.1",
70
70
  "eslint-import-resolver-babel-module": "^5.3.2",
71
71
  "eslint-plugin-react": "^7.33.2",
72
72
  "husky": "^8.0.3",
@@ -7,10 +7,22 @@ import classnames from 'classnames'
7
7
 
8
8
  import { ValueField } from '@modernpoacher/gremlins/components/field'
9
9
 
10
+ function getSelectedValues ({ target: { selectedOptions } }) {
11
+ return (
12
+ Array.from(selectedOptions)
13
+ .map(({ value, text }) => value || text)
14
+ )
15
+ }
16
+
17
+ function getSelectedValue ({ target: { value } }) {
18
+ return value
19
+ }
20
+
10
21
  export default class SelectField extends ValueField {
11
22
  shouldComponentUpdate (props) {
12
23
  return (
13
24
  super.shouldComponentUpdate(props) ||
25
+ (props.multiple !== this.props.multiple) ||
14
26
  (props.children !== this.props.children)
15
27
  )
16
28
  }
@@ -19,6 +31,19 @@ export default class SelectField extends ValueField {
19
31
  return classnames(super.getClassName(), 'select')
20
32
  }
21
33
 
34
+ handleChange = (event) => {
35
+ const {
36
+ multiple,
37
+ onChange
38
+ } = this.props
39
+
40
+ if (multiple) {
41
+ onChange(getSelectedValues(event))
42
+ } else {
43
+ onChange(getSelectedValue(event))
44
+ }
45
+ }
46
+
22
47
  render () {
23
48
  const {
24
49
  id,
@@ -30,6 +55,7 @@ export default class SelectField extends ValueField {
30
55
  readOnly,
31
56
  tabIndex,
32
57
  accessKey,
58
+ multiple,
33
59
  children,
34
60
  fieldRef
35
61
  } = this.props
@@ -47,6 +73,7 @@ export default class SelectField extends ValueField {
47
73
  readOnly={readOnly}
48
74
  tabIndex={tabIndex}
49
75
  accessKey={accessKey}
76
+ multiple={multiple}
50
77
  onChange={this.handleChange}
51
78
  className={className}
52
79
  ref={fieldRef}>
@@ -58,6 +85,19 @@ export default class SelectField extends ValueField {
58
85
 
59
86
  SelectField.propTypes = {
60
87
  ...ValueField.propTypes,
88
+ multiple: PropTypes.bool,
89
+ value: PropTypes.oneOfType([
90
+ PropTypes.string,
91
+ PropTypes.arrayOf(
92
+ PropTypes.string
93
+ )
94
+ ]),
95
+ defaultValue: PropTypes.oneOfType([
96
+ PropTypes.string,
97
+ PropTypes.arrayOf(
98
+ PropTypes.string
99
+ )
100
+ ]),
61
101
  children: PropTypes.oneOfType([
62
102
  PropTypes.node,
63
103
  PropTypes.arrayOf(
@@ -67,5 +107,6 @@ SelectField.propTypes = {
67
107
  }
68
108
 
69
109
  SelectField.defaultProps = {
70
- ...ValueField.defaultProps
110
+ ...ValueField.defaultProps,
111
+ multiple: false
71
112
  }
@@ -13,6 +13,7 @@ export default class SelectGremlin extends ValueGremlin {
13
13
  shouldComponentUpdate (props) {
14
14
  return (
15
15
  super.shouldComponentUpdate(props) ||
16
+ (props.multiple !== this.props.multiple) ||
16
17
  (props.children !== this.props.children)
17
18
  )
18
19
  }
@@ -42,6 +43,7 @@ export default class SelectGremlin extends ValueGremlin {
42
43
  tabIndex,
43
44
  accessKey,
44
45
  placeholder,
46
+ multiple,
45
47
  fieldRef,
46
48
  children
47
49
  } = this.props
@@ -58,6 +60,7 @@ export default class SelectGremlin extends ValueGremlin {
58
60
  tabIndex={tabIndex}
59
61
  accessKey={accessKey}
60
62
  placeholder={placeholder}
63
+ multiple={multiple}
61
64
  onChange={this.handleChange}
62
65
  fieldRef={fieldRef}>
63
66
  {children}
@@ -68,6 +71,19 @@ export default class SelectGremlin extends ValueGremlin {
68
71
 
69
72
  SelectGremlin.propTypes = {
70
73
  ...ValueGremlin.propTypes,
74
+ multiple: PropTypes.bool,
75
+ value: PropTypes.oneOfType([
76
+ PropTypes.string,
77
+ PropTypes.arrayOf(
78
+ PropTypes.string
79
+ )
80
+ ]),
81
+ defaultValue: PropTypes.oneOfType([
82
+ PropTypes.string,
83
+ PropTypes.arrayOf(
84
+ PropTypes.string
85
+ )
86
+ ]),
71
87
  children: PropTypes.oneOfType([
72
88
  PropTypes.node,
73
89
  PropTypes.arrayOf(
@@ -77,5 +93,6 @@ SelectGremlin.propTypes = {
77
93
  }
78
94
 
79
95
  SelectGremlin.defaultProps = {
80
- ...ValueGremlin.defaultProps
96
+ ...ValueGremlin.defaultProps,
97
+ multiple: false
81
98
  }