@hipay/hipay-material-ui 1.0.0-beta.14 → 1.0.0-beta.15

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.
Files changed (45) hide show
  1. package/HiBreadcrumb/HiBreadcrumb.js +28 -22
  2. package/HiBreadcrumb/HiStep.js +96 -60
  3. package/HiBreadcrumb/HiStepConnector.js +91 -26
  4. package/HiBreadcrumb/HiStepContent.js +122 -0
  5. package/HiBreadcrumb/HiStepIcon.js +86 -29
  6. package/HiBreadcrumb/HiStepLabel.js +128 -62
  7. package/HiBreadcrumb/HiStepper.js +5 -24
  8. package/HiDatePicker/Overlays/CustomOverlayLayout.js +3 -1
  9. package/HiDatePicker/Overlays/Overlay.js +14 -2
  10. package/HiForm/HiInput.js +24 -11
  11. package/HiForm/HiSlider.js +399 -0
  12. package/HiForm/index.js +9 -0
  13. package/HiTable/BodyCellBuilder.js +3 -0
  14. package/HiTable/BodyCells/CellIcon.js +26 -19
  15. package/HiTable/BodyCells/CellImage.js +17 -13
  16. package/HiTable/BodyCells/CellNumeric.js +7 -2
  17. package/HiTable/BodyCells/CellSentinel.js +14 -13
  18. package/HiTable/BodyCells/CellThirdPartySecurity.js +43 -19
  19. package/HiTable/HeaderCell.js +3 -2
  20. package/es/HiBreadcrumb/HiBreadcrumb.js +27 -19
  21. package/es/HiBreadcrumb/HiStep.js +55 -54
  22. package/es/HiBreadcrumb/HiStepConnector.js +86 -26
  23. package/es/HiBreadcrumb/HiStepContent.js +63 -0
  24. package/es/HiBreadcrumb/HiStepIcon.js +103 -35
  25. package/es/HiBreadcrumb/HiStepLabel.js +106 -63
  26. package/es/HiBreadcrumb/HiStepper.js +5 -21
  27. package/es/HiDatePicker/Overlays/CustomOverlayLayout.js +3 -1
  28. package/es/HiDatePicker/Overlays/Overlay.js +9 -2
  29. package/es/HiForm/HiInput.js +19 -10
  30. package/es/HiForm/HiSlider.js +309 -0
  31. package/es/HiForm/index.js +1 -0
  32. package/es/HiTable/BodyCellBuilder.js +3 -0
  33. package/es/HiTable/BodyCells/CellIcon.js +15 -8
  34. package/es/HiTable/BodyCells/CellImage.js +16 -14
  35. package/es/HiTable/BodyCells/CellNumeric.js +6 -2
  36. package/es/HiTable/BodyCells/CellSentinel.js +8 -5
  37. package/es/HiTable/BodyCells/CellThirdPartySecurity.js +40 -15
  38. package/es/HiTable/HeaderCell.js +3 -2
  39. package/es/utils/hiHelpers.js +4 -3
  40. package/index.es.js +1 -1
  41. package/index.js +1 -1
  42. package/package.json +43 -43
  43. package/umd/hipay-material-ui.development.js +7679 -7170
  44. package/umd/hipay-material-ui.production.min.js +5 -5
  45. package/utils/hiHelpers.js +4 -2
@@ -12,6 +12,56 @@ export const styles = theme => ({
12
12
  marginLeft: 6,
13
13
  display: 'inline-block'
14
14
  },
15
+ dotAround: {
16
+ border: '2px solid ' + theme.palette.neutral.normal,
17
+ backgroundColor: 'transparent',
18
+ borderRadius: '100%',
19
+ width: 16,
20
+ height: 16,
21
+ marginLeft: 6,
22
+ '&:hover': {
23
+ transform: 'scale(1.2)'
24
+ }
25
+ },
26
+ dot: {
27
+ backgroundColor: theme.palette.neutral.normal,
28
+ borderRadius: '100%',
29
+ width: 6,
30
+ height: 6,
31
+ '&:hover': {
32
+ transform: 'scale(1.2)'
33
+ },
34
+ marginLeft: 8
35
+ },
36
+ activeStep: {
37
+ marginTop: 3,
38
+ marginLeft: 3,
39
+ width: 6,
40
+ height: 6,
41
+ '&:hover': {
42
+ transform: 'scale(1)'
43
+ }
44
+ },
45
+ dotValidated: {
46
+ backgroundColor: theme.palette.status[116],
47
+ border: '2px solid ' + theme.palette.status[116]
48
+ },
49
+ dotRefused: {
50
+ backgroundColor: theme.palette.error.main,
51
+ border: '2px solid ' + theme.palette.error.main
52
+ },
53
+ dotWarning: {
54
+ backgroundColor: theme.palette.middle.normal,
55
+ border: '2px solid ' + theme.palette.middle.normal
56
+ },
57
+ dotActive: {
58
+ backgroundColor: '#00ADE9',
59
+ border: '2px solid ' + '#00ADE9'
60
+ },
61
+ dotLight: {
62
+ backgroundColor: '#FFFFFF',
63
+ border: '2px solid ' + '#FFFFFF'
64
+ },
15
65
  validated: {
16
66
  border: 'solid 2px ' + theme.palette.status[116]
17
67
  },
@@ -22,43 +72,62 @@ export const styles = theme => ({
22
72
  border: 'solid 2px ' + theme.palette.middle.normal
23
73
  },
24
74
  active: {
25
- border: '5px solid rgba(255, 0, 0, 0)',
26
- backgroundClip: 'padding-box',
27
- boxShadow: '0 0 0 1px ' + theme.palette.neutral.normal,
28
- backgroundColor: theme.palette.neutral.normal
29
- },
30
- activeValidated: {
31
- boxShadow: '0 0 0 1px ' + theme.palette.status[116],
32
- backgroundColor: theme.palette.status[116]
75
+ border: 'solid 2px #00ADE9'
33
76
  },
34
- activeRefused: {
35
- boxShadow: '0 0 0 1px ' + theme.palette.negative.normal,
36
- backgroundColor: theme.palette.negative.normal
37
- },
38
- activeWarning: {
39
- boxShadow: '0 0 0 1px ' + theme.palette.middle.normal,
40
- backgroundColor: theme.palette.middle.normal
77
+ light: {
78
+ border: 'solid 2px ' + '#FFFFFF'
41
79
  }
42
80
  });
43
81
 
44
82
  class HiStepIcon extends React.PureComponent {
83
+
45
84
  render() {
46
- const { active, classes, status } = this.props;
85
+ const { active, classes, status, type } = this.props;
86
+
87
+ let dotAroundClass = classNames(classes.dotAround, {
88
+ [classes.validated]: status === 'validated',
89
+ [classes.refused]: status === 'refused',
90
+ [classes.warning]: status === 'warning',
91
+ [classes.active]: status === 'active',
92
+ [classes.light]: type === 'front-light'
93
+ });
94
+
95
+ let innerDotClass = classNames(classes.dot, {
96
+ [classes.activeStep]: active,
97
+ [classes.dotValidated]: status === 'validated',
98
+ [classes.dotRefused]: status === 'refused',
99
+ [classes.dotWarning]: status === 'warning',
100
+ [classes.dotActive]: status === 'active',
101
+ [classes.dotLight]: type === 'front-light'
102
+ });
47
103
 
48
- return React.createElement('div', {
49
- className: classNames(classes.circle, {
50
- [classes.activeRefused]: status === 'refused' && active,
51
- [classes.activeValidated]: status === 'validated' && active,
52
- [classes.activeWarning]: status === 'warning' && active,
53
- [classes.active]: active,
54
- [classes.refused]: status === 'refused',
55
- [classes.validated]: status === 'validated',
56
- [classes.warning]: status === 'warning'
57
- })
104
+ let dotClassName = classNames(classes.circle, {
105
+ [classes.refused]: status === 'refused',
106
+ [classes.validated]: status === 'validated',
107
+ [classes.warning]: status === 'warning',
108
+ [classes.active]: status === 'active',
109
+ [classes.light]: type === 'front-light'
58
110
  });
111
+
112
+ return React.createElement(
113
+ 'div',
114
+ null,
115
+ active && React.createElement(
116
+ 'div',
117
+ { className: dotAroundClass },
118
+ React.createElement('div', { className: innerDotClass })
119
+ ),
120
+ !active && React.createElement('div', { className: dotClassName })
121
+ );
59
122
  }
60
123
  }
61
124
 
125
+ HiStepIcon.defaultProps = {
126
+ active: false,
127
+ status: 'unreviewed',
128
+ type: 'back',
129
+ classes: {}
130
+ };
62
131
  HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
63
132
  /**
64
133
  * Whether this step is active.
@@ -68,14 +137,13 @@ HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
68
137
  * Useful to extend the style applied to components.
69
138
  */
70
139
  classes: PropTypes.object.isRequired,
71
-
72
- status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
140
+ /**
141
+ * The type of Breadcrumb used
142
+ */
143
+ type: PropTypes.oneOf(['back', 'front-light', 'front-dark']),
144
+ /**
145
+ * The status of the step in case of back or front-dark type Breadcrumb
146
+ */
147
+ status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed', 'active'])
73
148
  } : {};
74
-
75
- HiStepIcon.defaultProps = {
76
- active: false,
77
- status: 'unreviewed',
78
- classes: {}
79
- };
80
-
81
149
  export default withStyles(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);
@@ -10,26 +10,45 @@ import HiPin from '../HiPins';
10
10
  export const styles = theme => ({
11
11
  root: {
12
12
  display: 'flex',
13
- alignItems: 'center'
13
+ alignItems: 'center',
14
+ marginTop: -11,
15
+ marginBottom: -5
14
16
  },
15
- test: {
16
- marginLeft: '0 '
17
+ frontRoot: {
18
+ marginTop: -12,
19
+ marginBottom: -7
17
20
  },
18
- vertical: {
19
- marginTop: -10,
21
+ frontDarkRoot: {
22
+ marginTop: -13,
20
23
  marginBottom: -6
21
24
  },
25
+ hipin: {
26
+ marginLeft: 0
27
+ },
22
28
  label: _extends({
23
29
  display: 'inline-block',
24
30
  marginLeft: 4,
25
31
  fontWeight: theme.typography.fontWeightRegular,
26
32
  color: theme.palette.neutral.normal,
27
- marginBottom: -4
33
+ marginBottom: -4,
34
+ '&:hover': {
35
+ cursor: 'pointer'
36
+ }
28
37
  }, theme.typography.body3),
29
38
  labelContainer: {
30
- marginBottom: 4,
39
+ marginBottom: 4
40
+ },
41
+ largeLabelContainer: {
42
+ maxWidth: 300
43
+ },
44
+ shortLabelContainer: {
31
45
  maxWidth: 160
32
46
  },
47
+ frontLabel: {
48
+ fontSize: 18,
49
+ fontWeight: theme.typography.fontWeightLight,
50
+ marginLeft: 11
51
+ },
33
52
  validated: {
34
53
  color: theme.palette.status[116]
35
54
  },
@@ -37,11 +56,17 @@ export const styles = theme => ({
37
56
  color: theme.palette.negative.normal
38
57
  },
39
58
  active: {
59
+ color: '#00ADE9'
60
+ },
61
+ activeStep: {
40
62
  fontWeight: theme.typography.fontWeightMedium
41
63
  },
42
64
  warning: {
43
65
  color: theme.palette.middle.normal
44
66
  },
67
+ light: {
68
+ color: '#FFFFFF'
69
+ },
45
70
  pin: {
46
71
  marginLeft: 4
47
72
  },
@@ -61,64 +86,83 @@ export const styles = theme => ({
61
86
  }
62
87
  });
63
88
 
64
- function HiStepLabel(props) {
65
- const {
66
- active,
67
- children,
68
- classes,
69
- className: classNameProp,
70
- icon,
71
- notificationNumber,
72
- orientation,
73
- status
74
- } = props,
75
- other = _objectWithoutProperties(props, ['active', 'children', 'classes', 'className', 'icon', 'notificationNumber', 'orientation', 'status']);
89
+ class HiStepLabel extends React.PureComponent {
76
90
 
77
- return React.createElement(
78
- 'span',
79
- _extends({
80
- className: classNames(classes.root, {
81
- [classes.vertical]: orientation === 'vertical'
82
- }, classNameProp)
83
- }, other),
84
- icon && React.createElement(
85
- 'span',
86
- { className: classes.iconContainer },
87
- React.createElement(HiStepIcon, { active: active, status: status })
88
- ),
89
- React.createElement(
91
+ render() {
92
+ const _props = this.props,
93
+ {
94
+ active,
95
+ children,
96
+ classes,
97
+ className: classNameProp,
98
+ notificationNumber,
99
+ status,
100
+ type
101
+ } = _props,
102
+ other = _objectWithoutProperties(_props, ['active', 'children', 'classes', 'className', 'notificationNumber', 'status', 'type']);
103
+
104
+ return React.createElement(
90
105
  'span',
91
- { className: classes.labelContainer },
106
+ _extends({
107
+ className: classNames(classes.root, classNameProp, {
108
+ [classes.frontRoot]: type === 'front-light',
109
+ [classes.frontDarkRoot]: type === 'front-dark'
110
+ })
111
+ }, other),
92
112
  React.createElement(
93
- 'div',
113
+ 'span',
114
+ { className: classes.iconContainer },
115
+ React.createElement(HiStepIcon, { active: active, status: status, type: type })
116
+ ),
117
+ React.createElement(
118
+ 'span',
94
119
  {
95
- className: classNames(classes.label, {
96
- [classes.validated]: status === 'validated',
97
- [classes.refused]: status === 'refused',
98
- [classes.warning]: status === 'warning',
99
- [classes.active]: active,
100
- [classes.shortEllipsis]: notificationNumber > 0,
101
- [classes.longEllipsis]: notificationNumber === 0
120
+ className: classNames(classes.labelContainer, {
121
+ [classes.largeLabelContainer]: type !== 'back',
122
+ [classes.shortLabelContainer]: type === 'back'
102
123
  })
103
124
  },
104
- children
105
- ),
106
- notificationNumber > 0 && React.createElement(
107
- 'span',
108
- { className: classes.pin },
109
125
  React.createElement(
110
- HiPin,
126
+ 'div',
111
127
  {
112
- color: props.theme.palette.business.primary.normal,
113
- className: classes.test
128
+ className: classNames(classes.label, {
129
+ [classes.validated]: status === 'validated',
130
+ [classes.refused]: status === 'refused',
131
+ [classes.warning]: status === 'warning',
132
+ [classes.active]: status === 'active',
133
+ [classes.light]: type === 'front-light',
134
+ [classes.activeStep]: active,
135
+ [classes.frontLabel]: type !== 'back',
136
+ [classes.shortEllipsis]: notificationNumber > 0,
137
+ [classes.longEllipsis]: notificationNumber === 0 && type === 'back'
138
+ })
114
139
  },
115
- notificationNumber
140
+ children
141
+ ),
142
+ notificationNumber > 0 && React.createElement(
143
+ 'span',
144
+ { className: classes.pin },
145
+ React.createElement(
146
+ HiPin,
147
+ {
148
+ color: this.props.theme.palette.business.primary.normal,
149
+ className: classes.hipin
150
+ },
151
+ notificationNumber
152
+ )
116
153
  )
117
154
  )
118
- )
119
- );
155
+ );
156
+ }
120
157
  }
121
158
 
159
+ HiStepLabel.defaultProps = {
160
+ active: false,
161
+ children: '',
162
+ notificationNumber: 0,
163
+ status: 'unreviewed',
164
+ type: 'back'
165
+ };
122
166
  HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
123
167
  /**
124
168
  * @ignore
@@ -138,17 +182,16 @@ HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
138
182
  */
139
183
  className: PropTypes.string,
140
184
  /**
141
- * @ignore
185
+ * The value to be displayed in the HiPin on the right of the label
142
186
  */
143
- orientation: PropTypes.oneOf(['horizontal', 'vertical']),
144
-
145
- status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
187
+ notificationNumber: PropTypes.number,
188
+ /**
189
+ * 'Unreviewed', 'refused', 'validated' et 'warning' sont les statuts pour tous les types de breadcrumb. 'active' est spécifique au Front dark
190
+ */
191
+ status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning', 'active']),
192
+ /**
193
+ * The Breadcrumb type
194
+ */
195
+ type: PropTypes.oneOf(['back', 'front-light', 'front-dark'])
146
196
  } : {};
147
-
148
- HiStepLabel.defaultProps = {
149
- active: false,
150
- status: 'unreviewed',
151
- orientation: 'vertical'
152
- };
153
-
154
197
  export default withStyles(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);
@@ -1,5 +1,4 @@
1
1
  import _extends from 'babel-runtime/helpers/extends';
2
- import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
3
2
  import React from 'react';
4
3
  import PropTypes from 'prop-types';
5
4
  import classNames from 'classnames';
@@ -8,21 +7,14 @@ import Paper from '../Paper';
8
7
 
9
8
  export const styles = theme => ({
10
9
  root: {
11
- display: 'flex',
12
- padding: theme.spacing.unit * 3,
13
- maxWidth: 160,
14
- flexDirection: 'column'
10
+ width: 340
15
11
  }
16
12
  });
17
13
 
18
14
  class HiStepper extends React.PureComponent {
19
15
 
20
16
  render() {
21
- const _props = this.props,
22
- { activeStep, children, classes, className: classNameProp } = _props,
23
- other = _objectWithoutProperties(_props, ['activeStep', 'children', 'classes', 'className']);
24
-
25
- const className = classNames(classes.root, classNameProp);
17
+ const { activeStep, children, classes } = this.props;
26
18
 
27
19
  const childrenArray = React.Children.toArray(children.props.children);
28
20
 
@@ -31,8 +23,8 @@ class HiStepper extends React.PureComponent {
31
23
  });
32
24
 
33
25
  return React.createElement(
34
- Paper,
35
- _extends({ square: true, elevation: 0, className: className }, other),
26
+ 'div',
27
+ { className: classes.root },
36
28
  steps
37
29
  );
38
30
  }
@@ -49,14 +41,6 @@ HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
49
41
  /**
50
42
  * Two or more `<Step />` components.
51
43
  */
52
- children: PropTypes.node.isRequired,
53
- /**
54
- * Useful to extend the style applied to components.
55
- */
56
- classes: PropTypes.object.isRequired,
57
- /**
58
- * @ignore
59
- */
60
- className: PropTypes.string
44
+ children: PropTypes.node.isRequired
61
45
  } : {};
62
46
  export default withStyles(styles, { name: 'MuiHiStepper' })(HiStepper);
@@ -70,9 +70,11 @@ const CustomOverlayLayout = (_ref) => {
70
70
  [classes.right]: side === 'to'
71
71
  });
72
72
 
73
+ let paperProps = _extends({}, props);
74
+
73
75
  return React.createElement(
74
76
  Paper,
75
- { className: paperClass },
77
+ { className: paperClass, onBlur: paperProps.onBlur, onFocus: paperProps.onFocus },
76
78
  React.createElement(
77
79
  'div',
78
80
  { className: classes.overlay },
@@ -1,3 +1,5 @@
1
+ import _extends from 'babel-runtime/helpers/extends';
2
+ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
1
3
  // weak
2
4
 
3
5
  import React from 'react';
@@ -31,7 +33,10 @@ export const styles = () => ({
31
33
  }
32
34
  });
33
35
 
34
- const Overlay = ({ classes, children, side, staticPosition }) => {
36
+ const Overlay = (_ref) => {
37
+ let { classes, children, side, staticPosition } = _ref,
38
+ props = _objectWithoutProperties(_ref, ['classes', 'children', 'side', 'staticPosition']);
39
+
35
40
  const paperClass = classNames(classes.paper, {
36
41
  [classes.left]: side === 'from',
37
42
  [classes.right]: side === 'to',
@@ -39,9 +44,11 @@ const Overlay = ({ classes, children, side, staticPosition }) => {
39
44
  [classes.relative]: staticPosition === true
40
45
  });
41
46
 
47
+ let paperProps = _extends({}, props);
48
+
42
49
  return React.createElement(
43
50
  Paper,
44
- { className: paperClass },
51
+ { onBlur: paperProps.onBlur, onFocus: paperProps.onFocus, className: paperClass },
45
52
  React.createElement(
46
53
  'div',
47
54
  { className: classes.overlay },
@@ -170,19 +170,28 @@ class HiInput extends React.PureComponent {
170
170
  }
171
171
 
172
172
  handleFocus(event) {
173
- if (!this.state.focused) {
174
- this.setState({ focused: true });
175
- }
176
- if (this.props.onFocus) {
177
- this.props.onFocus(event);
173
+ if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
174
+ event.stopPropagation();
175
+ } else {
176
+ if (!this.state.focused) {
177
+ this.setState({ focused: true });
178
+ }
179
+ if (this.props.onFocus) {
180
+ this.props.onFocus(event);
181
+ }
182
+ this.inputElement.focus();
178
183
  }
179
184
  }
180
185
 
181
- handleDivClick() {
182
- if (!this.state.focused) {
183
- this.setState({ focused: true });
186
+ handleDivClick(event) {
187
+ if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
188
+ event.stopPropagation();
189
+ } else {
190
+ if (!this.state.focused) {
191
+ this.setState({ focused: true });
192
+ }
193
+ this.inputElement.focus();
184
194
  }
185
- this.inputElement.focus();
186
195
  }
187
196
 
188
197
  handleMouseEnter() {
@@ -305,7 +314,7 @@ class HiInput extends React.PureComponent {
305
314
  startAdornment: leftIcon,
306
315
  endAdornment: React.createElement(
307
316
  'div',
308
- { className: classes.endAdornment },
317
+ { className: classes.endAdornment, ref: el => this.endAdornmentNode = el },
309
318
  eraseIcon,
310
319
  endAdornment
311
320
  ),