@hipay/hipay-material-ui 1.0.0-beta.6 → 1.0.0-beta.8
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/HiAlertModal/HiAlertModal.js +247 -0
- package/HiAlertModal/index.js +16 -0
- package/HiBreadcrumb/HiBreadcrumb.js +143 -0
- package/HiBreadcrumb/HiStep.js +123 -0
- package/HiBreadcrumb/HiStepConnector.js +142 -0
- package/HiBreadcrumb/HiStepIcon.js +134 -0
- package/HiBreadcrumb/HiStepLabel.js +182 -0
- package/HiBreadcrumb/HiStepper.js +125 -0
- package/HiBreadcrumb/index.js +16 -0
- package/HiDatePicker/HiDateRangeSelector.js +1 -1
- package/HiExpansionPanel/HiExpansionPanel.js +231 -0
- package/HiExpansionPanel/index.js +16 -0
- package/HiForm/HiFormControl.js +19 -24
- package/HiForm/HiSearchField.js +1 -1
- package/HiPins/HiPins.js +0 -1
- package/HiSelect/HiSelect.js +50 -31
- package/HiSelectableList/HiSelectableListItem.js +54 -16
- package/HiTable/BodyCells/CellCountry.js +1 -1
- package/HiTable/BodyCells/CellLayout.js +5 -1
- package/HiTable/BodyCells/CellStatus.js +5 -1
- package/HiTable/BodyCells/CellText.js +2 -1
- package/HiTable/ColumnFilter.js +5 -1
- package/HiTable/HiTable.js +15 -8
- package/HiTable/HiTableBody.js +13 -3
- package/HiTable/OrderColumns.js +6 -2
- package/es/HiAlertModal/HiAlertModal.js +189 -0
- package/es/HiAlertModal/index.js +1 -0
- package/es/HiBreadcrumb/HiBreadcrumb.js +73 -0
- package/es/HiBreadcrumb/HiStep.js +93 -0
- package/es/HiBreadcrumb/HiStepConnector.js +83 -0
- package/es/HiBreadcrumb/HiStepIcon.js +81 -0
- package/es/HiBreadcrumb/HiStepLabel.js +154 -0
- package/es/HiBreadcrumb/HiStepper.js +62 -0
- package/es/HiBreadcrumb/index.js +1 -0
- package/es/HiDatePicker/HiDateRangeSelector.js +1 -1
- package/es/HiExpansionPanel/HiExpansionPanel.js +170 -0
- package/es/HiExpansionPanel/index.js +1 -0
- package/es/HiForm/HiFormControl.js +15 -12
- package/es/HiForm/HiSearchField.js +1 -1
- package/es/HiPins/HiPins.js +0 -1
- package/es/HiSelect/HiSelect.js +49 -31
- package/es/HiSelectableList/HiSelectableListItem.js +49 -16
- package/es/HiTable/BodyCells/CellCountry.js +1 -1
- package/es/HiTable/BodyCells/CellLayout.js +5 -1
- package/es/HiTable/BodyCells/CellStatus.js +5 -1
- package/es/HiTable/BodyCells/CellText.js +2 -1
- package/es/HiTable/ColumnFilter.js +5 -1
- package/es/HiTable/HiTable.js +15 -8
- package/es/HiTable/HiTableBody.js +13 -3
- package/es/HiTable/OrderColumns.js +6 -2
- package/es/styles/createHiMuiTheme.js +4 -0
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/styles/createHiMuiTheme.js +4 -0
- package/umd/hipay-material-ui.development.js +923 -834
- package/umd/hipay-material-ui.production.min.js +4 -4
@@ -0,0 +1,189 @@
|
|
1
|
+
import _extends from 'babel-runtime/helpers/extends';
|
2
|
+
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3
|
+
// @inheritedComponent Dialog
|
4
|
+
|
5
|
+
import React from 'react';
|
6
|
+
import PropTypes from 'prop-types';
|
7
|
+
import Dialog, { DialogActions, DialogContent, DialogContentText, DialogTitle } from 'material-ui/Dialog';
|
8
|
+
import { withStyles } from '../styles';
|
9
|
+
import HiButton from '../HiButton';
|
10
|
+
|
11
|
+
export const styles = theme => ({
|
12
|
+
classContent: {
|
13
|
+
fontSize: 14,
|
14
|
+
lineHeight: '24px',
|
15
|
+
color: '#484848'
|
16
|
+
},
|
17
|
+
classPaper: {
|
18
|
+
maxWidth: 300
|
19
|
+
},
|
20
|
+
classCancelButton: {
|
21
|
+
float: 'right'
|
22
|
+
},
|
23
|
+
classTitle: {
|
24
|
+
fontSize: 20,
|
25
|
+
fontFamily: theme.typography.fontFamily,
|
26
|
+
fontWeight: theme.typography.fontWeightLight,
|
27
|
+
lineHeight: '24px'
|
28
|
+
},
|
29
|
+
classAction: {
|
30
|
+
display: 'inline-block'
|
31
|
+
},
|
32
|
+
classDialogRoot: {
|
33
|
+
backgroundColor: 'rgba(0, 0, 0, 0.28)'
|
34
|
+
}
|
35
|
+
});
|
36
|
+
|
37
|
+
/**
|
38
|
+
* Pop up d'alert
|
39
|
+
*/
|
40
|
+
class HiAlertModal extends React.PureComponent {
|
41
|
+
|
42
|
+
constructor(props) {
|
43
|
+
super(props);
|
44
|
+
|
45
|
+
this.handleClickCancel = () => {
|
46
|
+
if (this.props.onCancelClick) {
|
47
|
+
this.props.onCancelClick();
|
48
|
+
}
|
49
|
+
};
|
50
|
+
|
51
|
+
this.handleClickSubmit = () => {
|
52
|
+
if (this.props.onSubmitClick) {
|
53
|
+
this.props.onSubmitClick();
|
54
|
+
}
|
55
|
+
};
|
56
|
+
|
57
|
+
this.handleOnClose = () => {
|
58
|
+
if (this.props.onClose) {
|
59
|
+
this.props.onClose();
|
60
|
+
}
|
61
|
+
};
|
62
|
+
|
63
|
+
this.handleOnClose = this.handleOnClose.bind(this);
|
64
|
+
this.handleClickCancel = this.handleClickCancel.bind(this);
|
65
|
+
this.handleClickSubmit = this.handleClickSubmit.bind(this);
|
66
|
+
}
|
67
|
+
|
68
|
+
// Appelé au clic du bouton d'annulation
|
69
|
+
|
70
|
+
|
71
|
+
// Appelé au clic du bouton de soumission
|
72
|
+
|
73
|
+
|
74
|
+
// Appelé si clic en dehors de la pop up
|
75
|
+
|
76
|
+
|
77
|
+
// Render
|
78
|
+
render() {
|
79
|
+
const _props = this.props,
|
80
|
+
{
|
81
|
+
labelSubmitButton,
|
82
|
+
labelCancelButton,
|
83
|
+
content,
|
84
|
+
title,
|
85
|
+
positive,
|
86
|
+
negative,
|
87
|
+
open,
|
88
|
+
onCancelClick,
|
89
|
+
onSubmitClick,
|
90
|
+
classes
|
91
|
+
} = _props,
|
92
|
+
props = _objectWithoutProperties(_props, ['labelSubmitButton', 'labelCancelButton', 'content', 'title', 'positive', 'negative', 'open', 'onCancelClick', 'onSubmitClick', 'classes']);
|
93
|
+
return React.createElement(
|
94
|
+
Dialog,
|
95
|
+
_extends({
|
96
|
+
open: open,
|
97
|
+
onClose: this.handleOnClose,
|
98
|
+
classes: { paper: classes.classPaper, root: classes.classDialogRoot }
|
99
|
+
}, props),
|
100
|
+
React.createElement(
|
101
|
+
DialogTitle,
|
102
|
+
{ disableTypography: true, classes: { root: classes.classTitle } },
|
103
|
+
title
|
104
|
+
),
|
105
|
+
React.createElement(
|
106
|
+
DialogContent,
|
107
|
+
null,
|
108
|
+
React.createElement(
|
109
|
+
DialogContentText,
|
110
|
+
{ classes: { root: classes.classContent } },
|
111
|
+
content
|
112
|
+
)
|
113
|
+
),
|
114
|
+
React.createElement(
|
115
|
+
DialogActions,
|
116
|
+
{ classes: { root: classes.classAction } },
|
117
|
+
React.createElement(
|
118
|
+
HiButton,
|
119
|
+
{
|
120
|
+
onClick: this.handleClickSubmit,
|
121
|
+
positive: positive,
|
122
|
+
negative: negative
|
123
|
+
},
|
124
|
+
labelSubmitButton
|
125
|
+
),
|
126
|
+
React.createElement(
|
127
|
+
HiButton,
|
128
|
+
{
|
129
|
+
classes: { root: classes.classCancelButton },
|
130
|
+
onClick: this.handleClickCancel
|
131
|
+
},
|
132
|
+
labelCancelButton
|
133
|
+
)
|
134
|
+
)
|
135
|
+
);
|
136
|
+
}
|
137
|
+
}
|
138
|
+
|
139
|
+
HiAlertModal.defaultProps = {
|
140
|
+
negative: false,
|
141
|
+
positive: false
|
142
|
+
};
|
143
|
+
HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
|
144
|
+
/**
|
145
|
+
* Surcharge les classes du composant
|
146
|
+
*/
|
147
|
+
classes: PropTypes.object,
|
148
|
+
/**
|
149
|
+
* Texte contenu dans la modal
|
150
|
+
*/
|
151
|
+
content: PropTypes.string,
|
152
|
+
/**
|
153
|
+
* Texte sur le bouton d'annulation
|
154
|
+
*/
|
155
|
+
labelCancelButton: PropTypes.string,
|
156
|
+
/**
|
157
|
+
* Texte sur le bouton de soumission
|
158
|
+
*/
|
159
|
+
labelSubmitButton: PropTypes.string,
|
160
|
+
/**
|
161
|
+
* Colore le bouton de soumission en rouge
|
162
|
+
*/
|
163
|
+
negative: PropTypes.bool,
|
164
|
+
/**
|
165
|
+
* Fonction de callback appelée au clic sur le bouton d'annulation
|
166
|
+
*/
|
167
|
+
onCancelClick: PropTypes.func,
|
168
|
+
/**
|
169
|
+
* Fonction de callback appelée au clic en dehors de la pop up
|
170
|
+
*/
|
171
|
+
onClose: PropTypes.func,
|
172
|
+
/**
|
173
|
+
* Fonction de callback appelée au clic sur le bouton de soumission
|
174
|
+
*/
|
175
|
+
onSubmitClick: PropTypes.func,
|
176
|
+
/**
|
177
|
+
* pop up ouverte ou pas
|
178
|
+
*/
|
179
|
+
open: PropTypes.bool.isRequired,
|
180
|
+
/**
|
181
|
+
* Colore le bouton de soumission en vert
|
182
|
+
*/
|
183
|
+
positive: PropTypes.bool,
|
184
|
+
/**
|
185
|
+
* Titre de la modal
|
186
|
+
*/
|
187
|
+
title: PropTypes.string
|
188
|
+
} : {};
|
189
|
+
export default withStyles(styles, { name: 'HmuiHiAlertModal' })(HiAlertModal);
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './HiAlertModal';
|
@@ -0,0 +1,73 @@
|
|
1
|
+
import _extends from 'babel-runtime/helpers/extends';
|
2
|
+
import React from 'react';
|
3
|
+
import PropTypes from 'prop-types';
|
4
|
+
import { withStyles } from '../styles';
|
5
|
+
import HiStepper from './HiStepper';
|
6
|
+
import HiStepLabel from './HiStepLabel';
|
7
|
+
import HiStep from './HiStep';
|
8
|
+
|
9
|
+
export const styles = theme => ({
|
10
|
+
label: _extends({
|
11
|
+
display: 'inline-block',
|
12
|
+
marginLeft: 12,
|
13
|
+
fontWeight: theme.typography.fontWeightRegular,
|
14
|
+
color: theme.palette.neutral.normal
|
15
|
+
}, theme.typography.body3),
|
16
|
+
active: {
|
17
|
+
fontWeight: theme.typography.fontWeightMedium
|
18
|
+
}
|
19
|
+
});
|
20
|
+
|
21
|
+
class HiBreadcrumb extends React.PureComponent {
|
22
|
+
constructor(...args) {
|
23
|
+
var _temp;
|
24
|
+
|
25
|
+
return _temp = super(...args), this.handleStep = idx => () => {
|
26
|
+
this.props.handleStep(idx);
|
27
|
+
}, _temp;
|
28
|
+
}
|
29
|
+
|
30
|
+
render() {
|
31
|
+
const { activeStep, steps } = this.props;
|
32
|
+
|
33
|
+
return React.createElement(
|
34
|
+
HiStepper,
|
35
|
+
{ activeStep: activeStep },
|
36
|
+
React.createElement(
|
37
|
+
'div',
|
38
|
+
null,
|
39
|
+
steps.map((step, index) => {
|
40
|
+
const validConnector = step.status === 'validated' && index < steps.length - 1 && steps[index + 1].status === 'validated';
|
41
|
+
return React.createElement(
|
42
|
+
HiStep,
|
43
|
+
{
|
44
|
+
key: step.id,
|
45
|
+
onClick: this.handleStep(index),
|
46
|
+
isLast: index === steps.length - 1,
|
47
|
+
validConnector: validConnector
|
48
|
+
},
|
49
|
+
React.createElement(
|
50
|
+
HiStepLabel,
|
51
|
+
{
|
52
|
+
active: activeStep === index,
|
53
|
+
status: step.status,
|
54
|
+
notificationNumber: step.notificationNumber
|
55
|
+
},
|
56
|
+
step.label
|
57
|
+
)
|
58
|
+
);
|
59
|
+
})
|
60
|
+
)
|
61
|
+
);
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
HiBreadcrumb.defaultProps = {
|
66
|
+
activeStep: 0
|
67
|
+
};
|
68
|
+
HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
|
69
|
+
activeStep: PropTypes.number,
|
70
|
+
steps: PropTypes.array.isRequired,
|
71
|
+
handleStep: PropTypes.func
|
72
|
+
} : {};
|
73
|
+
export default withStyles(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);
|
@@ -0,0 +1,93 @@
|
|
1
|
+
import _extends from 'babel-runtime/helpers/extends';
|
2
|
+
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3
|
+
import React from 'react';
|
4
|
+
import PropTypes from 'prop-types';
|
5
|
+
import classNames from 'classnames';
|
6
|
+
import { withStyles } from '../styles';
|
7
|
+
import HiStepConnector from './HiStepConnector';
|
8
|
+
|
9
|
+
export const styles = theme => ({
|
10
|
+
root: {},
|
11
|
+
horizontal: {
|
12
|
+
paddingLeft: theme.spacing.unit,
|
13
|
+
paddingRight: theme.spacing.unit,
|
14
|
+
'&:first-child': {
|
15
|
+
paddingLeft: 0
|
16
|
+
},
|
17
|
+
'&:last-child': {
|
18
|
+
paddingRight: 0
|
19
|
+
}
|
20
|
+
},
|
21
|
+
vertical: {}
|
22
|
+
});
|
23
|
+
|
24
|
+
function HiStep(props) {
|
25
|
+
const {
|
26
|
+
active,
|
27
|
+
children,
|
28
|
+
classes,
|
29
|
+
className: classNameProp,
|
30
|
+
index,
|
31
|
+
isLast,
|
32
|
+
orientation,
|
33
|
+
validConnector
|
34
|
+
} = props,
|
35
|
+
other = _objectWithoutProperties(props, ['active', 'children', 'classes', 'className', 'index', 'isLast', 'orientation', 'validConnector']);
|
36
|
+
|
37
|
+
const className = classNames(classes.root, classes[orientation], classNameProp);
|
38
|
+
|
39
|
+
return React.createElement(
|
40
|
+
'div',
|
41
|
+
_extends({ className: className }, other),
|
42
|
+
React.Children.map(children, child => React.cloneElement(child, _extends({
|
43
|
+
active,
|
44
|
+
icon: index + 1,
|
45
|
+
orientation
|
46
|
+
}, child.props))),
|
47
|
+
!isLast && React.createElement(HiStepConnector, { orientation: 'vertical', validConnector: validConnector })
|
48
|
+
);
|
49
|
+
}
|
50
|
+
|
51
|
+
HiStep.propTypes = process.env.NODE_ENV !== "production" ? {
|
52
|
+
/**
|
53
|
+
* Sets the step as active. Is passed to child components.
|
54
|
+
*/
|
55
|
+
active: PropTypes.bool,
|
56
|
+
/**
|
57
|
+
* Should be `Step` sub-components such as `StepLabel`, `StepContent`.
|
58
|
+
*/
|
59
|
+
children: PropTypes.node,
|
60
|
+
/**
|
61
|
+
* @ignore
|
62
|
+
*/
|
63
|
+
classes: PropTypes.object.isRequired,
|
64
|
+
/**
|
65
|
+
* @ignore
|
66
|
+
*/
|
67
|
+
className: PropTypes.string,
|
68
|
+
/**
|
69
|
+
* @ignore
|
70
|
+
* Used internally for numbering.
|
71
|
+
*/
|
72
|
+
index: PropTypes.number,
|
73
|
+
/**
|
74
|
+
* @ignore
|
75
|
+
* Used to know which step is the last, to not put a HiStepConnector
|
76
|
+
*/
|
77
|
+
isLast: PropTypes.bool,
|
78
|
+
/**
|
79
|
+
* @ignore
|
80
|
+
*/
|
81
|
+
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
|
82
|
+
/**
|
83
|
+
* @ignore
|
84
|
+
*/
|
85
|
+
validConnector: PropTypes.bool
|
86
|
+
} : {};
|
87
|
+
|
88
|
+
HiStep.defaultProps = {
|
89
|
+
active: false,
|
90
|
+
validConnector: false
|
91
|
+
};
|
92
|
+
|
93
|
+
export default withStyles(styles, { name: 'MuiStep' })(HiStep);
|
@@ -0,0 +1,83 @@
|
|
1
|
+
import _extends from 'babel-runtime/helpers/extends';
|
2
|
+
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3
|
+
import React from 'react';
|
4
|
+
import PropTypes from 'prop-types';
|
5
|
+
import classNames from 'classnames';
|
6
|
+
import { withStyles } from '../styles';
|
7
|
+
|
8
|
+
export const styles = theme => ({
|
9
|
+
root: {
|
10
|
+
flex: '1 1 auto'
|
11
|
+
},
|
12
|
+
vertical: {
|
13
|
+
marginLeft: 13, // half icon
|
14
|
+
padding: `0 0 ${theme.spacing.unit}px`
|
15
|
+
},
|
16
|
+
line: {
|
17
|
+
display: 'block',
|
18
|
+
borderColor: theme.palette.grey[600]
|
19
|
+
},
|
20
|
+
lineHorizontal: {
|
21
|
+
borderTopStyle: 'solid',
|
22
|
+
borderTopWidth: 1
|
23
|
+
},
|
24
|
+
lineVertical: {
|
25
|
+
borderLeftStyle: 'solid',
|
26
|
+
borderLeftWidth: 2,
|
27
|
+
minHeight: theme.spacing.unit * 3,
|
28
|
+
height: 37
|
29
|
+
},
|
30
|
+
lineVerticalGreen: {
|
31
|
+
borderColor: theme.palette.status[116]
|
32
|
+
}
|
33
|
+
});
|
34
|
+
|
35
|
+
/**
|
36
|
+
* @ignore - internal component.
|
37
|
+
*/
|
38
|
+
class HiStepConnector extends React.PureComponent {
|
39
|
+
render() {
|
40
|
+
const _props = this.props,
|
41
|
+
{
|
42
|
+
className: classNameProp,
|
43
|
+
classes,
|
44
|
+
orientation,
|
45
|
+
validConnector
|
46
|
+
} = _props,
|
47
|
+
other = _objectWithoutProperties(_props, ['className', 'classes', 'orientation', 'validConnector']);
|
48
|
+
|
49
|
+
const className = classNames(classes.root, classes[orientation], classNameProp);
|
50
|
+
const lineClassName = classNames(classes.line, {
|
51
|
+
[classes.lineHorizontal]: orientation === 'horizontal',
|
52
|
+
[classes.lineVertical]: orientation === 'vertical',
|
53
|
+
[classes.lineVerticalGreen]: orientation === 'vertical' && validConnector
|
54
|
+
});
|
55
|
+
|
56
|
+
return React.createElement(
|
57
|
+
'div',
|
58
|
+
_extends({ className: className }, other),
|
59
|
+
React.createElement('span', { className: lineClassName })
|
60
|
+
);
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
|
65
|
+
/**
|
66
|
+
* Useful to extend the style applied to the component.
|
67
|
+
*/
|
68
|
+
classes: PropTypes.object.isRequired,
|
69
|
+
/**
|
70
|
+
* @ignore
|
71
|
+
*/
|
72
|
+
className: PropTypes.string,
|
73
|
+
/**
|
74
|
+
* @ignore
|
75
|
+
*/
|
76
|
+
orientation: PropTypes.oneOf(['horizontal', 'vertical'])
|
77
|
+
} : {};
|
78
|
+
|
79
|
+
HiStepConnector.defaultProps = {
|
80
|
+
orientation: 'vertical'
|
81
|
+
};
|
82
|
+
|
83
|
+
export default withStyles(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);
|
@@ -0,0 +1,81 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import PropTypes from 'prop-types';
|
3
|
+
import classNames from 'classnames';
|
4
|
+
import { withStyles } from '../styles';
|
5
|
+
|
6
|
+
export const styles = theme => ({
|
7
|
+
circle: {
|
8
|
+
borderRadius: '50%',
|
9
|
+
width: 16,
|
10
|
+
height: 16,
|
11
|
+
border: 'solid 2px ' + theme.palette.neutral.normal,
|
12
|
+
marginLeft: 6,
|
13
|
+
display: 'inline-block'
|
14
|
+
},
|
15
|
+
validated: {
|
16
|
+
border: 'solid 2px ' + theme.palette.status[116]
|
17
|
+
},
|
18
|
+
refused: {
|
19
|
+
border: 'solid 2px ' + theme.palette.negative.normal
|
20
|
+
},
|
21
|
+
warning: {
|
22
|
+
border: 'solid 2px ' + theme.palette.middle.normal
|
23
|
+
},
|
24
|
+
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]
|
33
|
+
},
|
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
|
41
|
+
}
|
42
|
+
});
|
43
|
+
|
44
|
+
class HiStepIcon extends React.PureComponent {
|
45
|
+
render() {
|
46
|
+
const { active, classes, status } = this.props;
|
47
|
+
|
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
|
+
})
|
58
|
+
});
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
|
63
|
+
/**
|
64
|
+
* Whether this step is active.
|
65
|
+
*/
|
66
|
+
active: PropTypes.bool,
|
67
|
+
/**
|
68
|
+
* Useful to extend the style applied to components.
|
69
|
+
*/
|
70
|
+
classes: PropTypes.object.isRequired,
|
71
|
+
|
72
|
+
status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
|
73
|
+
} : {};
|
74
|
+
|
75
|
+
HiStepIcon.defaultProps = {
|
76
|
+
active: false,
|
77
|
+
status: 'unreviewed',
|
78
|
+
classes: {}
|
79
|
+
};
|
80
|
+
|
81
|
+
export default withStyles(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);
|
@@ -0,0 +1,154 @@
|
|
1
|
+
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
2
|
+
import _extends from 'babel-runtime/helpers/extends';
|
3
|
+
import React from 'react';
|
4
|
+
import PropTypes from 'prop-types';
|
5
|
+
import classNames from 'classnames';
|
6
|
+
import { withStyles } from '../styles';
|
7
|
+
import HiStepIcon from './HiStepIcon';
|
8
|
+
import HiPin from '../HiPins';
|
9
|
+
|
10
|
+
export const styles = theme => ({
|
11
|
+
root: {
|
12
|
+
display: 'flex',
|
13
|
+
alignItems: 'center'
|
14
|
+
},
|
15
|
+
test: {
|
16
|
+
marginLeft: '0 '
|
17
|
+
},
|
18
|
+
vertical: {
|
19
|
+
marginTop: -10,
|
20
|
+
marginBottom: -6
|
21
|
+
},
|
22
|
+
label: _extends({
|
23
|
+
display: 'inline-block',
|
24
|
+
marginLeft: 4,
|
25
|
+
fontWeight: theme.typography.fontWeightRegular,
|
26
|
+
color: theme.palette.neutral.normal,
|
27
|
+
marginBottom: -4
|
28
|
+
}, theme.typography.body3),
|
29
|
+
labelContainer: {
|
30
|
+
marginBottom: 4,
|
31
|
+
maxWidth: 160
|
32
|
+
},
|
33
|
+
validated: {
|
34
|
+
color: theme.palette.status[116]
|
35
|
+
},
|
36
|
+
refused: {
|
37
|
+
color: theme.palette.negative.normal
|
38
|
+
},
|
39
|
+
active: {
|
40
|
+
fontWeight: theme.typography.fontWeightMedium
|
41
|
+
},
|
42
|
+
warning: {
|
43
|
+
color: theme.palette.middle.normal
|
44
|
+
},
|
45
|
+
pin: {
|
46
|
+
marginLeft: 4
|
47
|
+
},
|
48
|
+
shortEllipsis: {
|
49
|
+
display: 'inline-block',
|
50
|
+
overflow: 'hidden',
|
51
|
+
textOverflow: 'ellipsis',
|
52
|
+
whiteSpace: 'pre',
|
53
|
+
maxWidth: 51
|
54
|
+
},
|
55
|
+
longEllipsis: {
|
56
|
+
display: 'inline-block',
|
57
|
+
overflow: 'hidden',
|
58
|
+
textOverflow: 'ellipsis',
|
59
|
+
whiteSpace: 'pre',
|
60
|
+
maxWidth: 90
|
61
|
+
}
|
62
|
+
});
|
63
|
+
|
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']);
|
76
|
+
|
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(
|
90
|
+
'span',
|
91
|
+
{ className: classes.labelContainer },
|
92
|
+
React.createElement(
|
93
|
+
'div',
|
94
|
+
{
|
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
|
102
|
+
})
|
103
|
+
},
|
104
|
+
children
|
105
|
+
),
|
106
|
+
notificationNumber > 0 && React.createElement(
|
107
|
+
'span',
|
108
|
+
{ className: classes.pin },
|
109
|
+
React.createElement(
|
110
|
+
HiPin,
|
111
|
+
{
|
112
|
+
color: props.theme.palette.business.primary.normal,
|
113
|
+
className: classes.test
|
114
|
+
},
|
115
|
+
notificationNumber
|
116
|
+
)
|
117
|
+
)
|
118
|
+
)
|
119
|
+
);
|
120
|
+
}
|
121
|
+
|
122
|
+
HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
|
123
|
+
/**
|
124
|
+
* @ignore
|
125
|
+
* Sets the step as active. Is passed to child components.
|
126
|
+
*/
|
127
|
+
active: PropTypes.bool,
|
128
|
+
/**
|
129
|
+
* In most cases will simply be a string containing a title for the label.
|
130
|
+
*/
|
131
|
+
children: PropTypes.node,
|
132
|
+
/**
|
133
|
+
* Custom styles for component.
|
134
|
+
*/
|
135
|
+
classes: PropTypes.object.isRequired,
|
136
|
+
/**
|
137
|
+
* @ignore
|
138
|
+
*/
|
139
|
+
className: PropTypes.string,
|
140
|
+
/**
|
141
|
+
* @ignore
|
142
|
+
*/
|
143
|
+
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
|
144
|
+
|
145
|
+
status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
|
146
|
+
} : {};
|
147
|
+
|
148
|
+
HiStepLabel.defaultProps = {
|
149
|
+
active: false,
|
150
|
+
status: 'unreviewed',
|
151
|
+
orientation: 'vertical'
|
152
|
+
};
|
153
|
+
|
154
|
+
export default withStyles(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);
|