@hipay/hipay-material-ui 1.0.0-beta.7 → 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/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/HiForm/HiFormControl.js +19 -27
- package/HiForm/HiSearchField.js +1 -1
- package/HiPins/HiPins.js +0 -1
- package/HiSelectableList/HiSelectableListItem.js +22 -9
- 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/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/HiForm/HiFormControl.js +15 -15
- package/es/HiForm/HiSearchField.js +1 -1
- package/es/HiPins/HiPins.js +0 -1
- package/es/HiSelectableList/HiSelectableListItem.js +21 -9
- 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/package.json +1 -1
- package/umd/hipay-material-ui.development.js +104 -66
- package/umd/hipay-material-ui.production.min.js +2 -2
@@ -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);
|
@@ -0,0 +1,62 @@
|
|
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 Paper from '../Paper';
|
8
|
+
|
9
|
+
export const styles = theme => ({
|
10
|
+
root: {
|
11
|
+
display: 'flex',
|
12
|
+
padding: theme.spacing.unit * 3,
|
13
|
+
maxWidth: 160,
|
14
|
+
flexDirection: 'column'
|
15
|
+
}
|
16
|
+
});
|
17
|
+
|
18
|
+
class HiStepper extends React.PureComponent {
|
19
|
+
|
20
|
+
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);
|
26
|
+
|
27
|
+
const childrenArray = React.Children.toArray(children.props.children);
|
28
|
+
|
29
|
+
const steps = childrenArray.map((step, index) => {
|
30
|
+
return React.cloneElement(step, _extends({ index, active: activeStep === index }, step.props));
|
31
|
+
});
|
32
|
+
|
33
|
+
return React.createElement(
|
34
|
+
Paper,
|
35
|
+
_extends({ square: true, elevation: 0, className: className }, other),
|
36
|
+
steps
|
37
|
+
);
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
HiStepper.defaultProps = {
|
42
|
+
activeStep: 0
|
43
|
+
};
|
44
|
+
HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
|
45
|
+
/**
|
46
|
+
* Set the active step (zero based index).
|
47
|
+
*/
|
48
|
+
activeStep: PropTypes.number,
|
49
|
+
/**
|
50
|
+
* Two or more `<Step />` components.
|
51
|
+
*/
|
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
|
61
|
+
} : {};
|
62
|
+
export default withStyles(styles, { name: 'MuiHiStepper' })(HiStepper);
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './HiBreadcrumb';
|
@@ -87,6 +87,17 @@ class HiFormControl extends React.PureComponent {
|
|
87
87
|
constructor(props) {
|
88
88
|
super(props);
|
89
89
|
|
90
|
+
this.handleFocus = value => () => {
|
91
|
+
this.setState({ focused: value });
|
92
|
+
if (value === false && this.state.hovered) {
|
93
|
+
this.setState({ hovered: false });
|
94
|
+
}
|
95
|
+
};
|
96
|
+
|
97
|
+
this.handleHover = value => () => {
|
98
|
+
this.setState({ hovered: value });
|
99
|
+
};
|
100
|
+
|
90
101
|
this.state = {
|
91
102
|
helperOpen: false,
|
92
103
|
focused: false,
|
@@ -105,17 +116,6 @@ class HiFormControl extends React.PureComponent {
|
|
105
116
|
}
|
106
117
|
}
|
107
118
|
|
108
|
-
handleFocus(value) {
|
109
|
-
this.setState({ focused: value });
|
110
|
-
if (value === false && this.state.hovered) {
|
111
|
-
this.setState({ hovered: false });
|
112
|
-
}
|
113
|
-
}
|
114
|
-
|
115
|
-
handleHover(value) {
|
116
|
-
this.setState({ hovered: value });
|
117
|
-
}
|
118
|
-
|
119
119
|
render() {
|
120
120
|
const _props = this.props,
|
121
121
|
{
|
@@ -195,10 +195,10 @@ class HiFormControl extends React.PureComponent {
|
|
195
195
|
React.createElement(
|
196
196
|
'div',
|
197
197
|
{
|
198
|
-
onMouseEnter:
|
199
|
-
onMouseLeave:
|
200
|
-
onFocus:
|
201
|
-
onBlur:
|
198
|
+
onMouseEnter: this.handleHover(true),
|
199
|
+
onMouseLeave: this.handleHover(false),
|
200
|
+
onFocus: this.handleFocus(true),
|
201
|
+
onBlur: this.handleFocus(false)
|
202
202
|
},
|
203
203
|
children
|
204
204
|
),
|
package/es/HiPins/HiPins.js
CHANGED
@@ -14,7 +14,8 @@ import HiColoredLabel from '../HiColoredLabel';
|
|
14
14
|
export const styles = theme => ({
|
15
15
|
listItem: {
|
16
16
|
padding: `${9}px 0px`,
|
17
|
-
fontWeight: theme.typography.fontWeightRegular
|
17
|
+
fontWeight: theme.typography.fontWeightRegular,
|
18
|
+
maxHeight: 40
|
18
19
|
},
|
19
20
|
listItemTitle: {
|
20
21
|
padding: `${9}px 0px`,
|
@@ -105,6 +106,11 @@ export const styles = theme => ({
|
|
105
106
|
color: '#000000'
|
106
107
|
}
|
107
108
|
},
|
109
|
+
labelHighlightColored: {
|
110
|
+
'&>strong': {
|
111
|
+
fontWeight: theme.typography.fontWeightMedium
|
112
|
+
}
|
113
|
+
},
|
108
114
|
primaryHighlight: {
|
109
115
|
fontWeight: theme.typography.fontWeightMedium,
|
110
116
|
color: theme.palette.business.primary.normal,
|
@@ -186,13 +192,7 @@ class HiSelectableListItem extends React.Component {
|
|
186
192
|
return React.createElement(
|
187
193
|
'div',
|
188
194
|
{ className: itemTextClass, 'data-id': item.id },
|
189
|
-
|
190
|
-
className: classes.labelHighlight,
|
191
|
-
dangerouslySetInnerHTML: {
|
192
|
-
__html: escapeHTML(item.labelHighlight)
|
193
|
-
}
|
194
|
-
}),
|
195
|
-
!item.labelHighlight && this.getItemLabel(item),
|
195
|
+
this.getItemLabel(item),
|
196
196
|
React.createElement(
|
197
197
|
'span',
|
198
198
|
{ className: classes.listItemSecondaryText },
|
@@ -216,8 +216,20 @@ class HiSelectableListItem extends React.Component {
|
|
216
216
|
}
|
217
217
|
|
218
218
|
getItemLabel(item) {
|
219
|
-
|
219
|
+
const { classes } = this.props;
|
220
|
+
if (!item.labelHighlight && item.color && this.props.selected) {
|
220
221
|
return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
|
222
|
+
} else if (item.labelHighlight) {
|
223
|
+
const mLabel = React.createElement('span', {
|
224
|
+
className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
|
225
|
+
dangerouslySetInnerHTML: {
|
226
|
+
__html: escapeHTML(item.labelHighlight)
|
227
|
+
}
|
228
|
+
});
|
229
|
+
if (item.color && this.props.selected) {
|
230
|
+
return React.createElement(HiColoredLabel, { color: item.color, label: mLabel });
|
231
|
+
}
|
232
|
+
return mLabel;
|
221
233
|
}
|
222
234
|
return item.label;
|
223
235
|
}
|