@hipay/hipay-material-ui 1.0.0-beta.7 → 1.0.0-beta.9

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 (73) hide show
  1. package/HiBreadcrumb/HiBreadcrumb.js +143 -0
  2. package/HiBreadcrumb/HiStep.js +123 -0
  3. package/HiBreadcrumb/HiStepConnector.js +142 -0
  4. package/HiBreadcrumb/HiStepIcon.js +134 -0
  5. package/HiBreadcrumb/HiStepLabel.js +182 -0
  6. package/HiBreadcrumb/HiStepper.js +125 -0
  7. package/HiBreadcrumb/index.js +16 -0
  8. package/HiDatePicker/HiDateRangeSelector.js +1 -1
  9. package/HiDotsStepper/HiDot.js +151 -0
  10. package/HiDotsStepper/HiDotsStepper.js +146 -0
  11. package/HiDotsStepper/index.js +16 -0
  12. package/HiForm/HiAddressField.js +204 -0
  13. package/HiForm/HiFormControl.js +19 -27
  14. package/HiForm/HiInput.js +1 -1
  15. package/HiForm/HiSearchField.js +1 -1
  16. package/HiForm/index.js +9 -0
  17. package/HiPdfReader/HiPdfReader.js +282 -0
  18. package/HiPdfReader/index.js +16 -0
  19. package/HiPins/HiPins.js +0 -1
  20. package/HiSelect/HiSuggestSelect.js +2 -0
  21. package/HiSelectableList/HiSelectableListItem.js +23 -11
  22. package/HiTable/BodyCellBuilder.js +7 -8
  23. package/HiTable/BodyCells/CellLayout.js +25 -19
  24. package/HiTable/BodyCells/CellSentinel.js +12 -4
  25. package/HiTable/BodyCells/CellStatus.js +5 -1
  26. package/HiTable/BodyCells/CellText.js +2 -1
  27. package/HiTable/BodyRow.js +7 -1
  28. package/HiTable/ColumnFilter.js +5 -1
  29. package/HiTable/HeaderCell.js +17 -14
  30. package/HiTable/HiTable.js +25 -9
  31. package/HiTable/HiTableBody.js +38 -14
  32. package/HiTable/HiTableHead.js +22 -5
  33. package/HiTable/OrderColumns.js +6 -2
  34. package/es/HiBreadcrumb/HiBreadcrumb.js +73 -0
  35. package/es/HiBreadcrumb/HiStep.js +93 -0
  36. package/es/HiBreadcrumb/HiStepConnector.js +83 -0
  37. package/es/HiBreadcrumb/HiStepIcon.js +81 -0
  38. package/es/HiBreadcrumb/HiStepLabel.js +154 -0
  39. package/es/HiBreadcrumb/HiStepper.js +62 -0
  40. package/es/HiBreadcrumb/index.js +1 -0
  41. package/es/HiDatePicker/HiDateRangeSelector.js +1 -1
  42. package/es/HiDotsStepper/HiDot.js +92 -0
  43. package/es/HiDotsStepper/HiDotsStepper.js +83 -0
  44. package/es/HiDotsStepper/index.js +1 -0
  45. package/es/HiForm/HiAddressField.js +142 -0
  46. package/es/HiForm/HiFormControl.js +15 -15
  47. package/es/HiForm/HiInput.js +1 -1
  48. package/es/HiForm/HiSearchField.js +1 -1
  49. package/es/HiForm/index.js +2 -1
  50. package/es/HiPdfReader/HiPdfReader.js +198 -0
  51. package/es/HiPdfReader/index.js +1 -0
  52. package/es/HiPins/HiPins.js +0 -1
  53. package/es/HiSelect/HiSuggestSelect.js +2 -0
  54. package/es/HiSelectableList/HiSelectableListItem.js +22 -11
  55. package/es/HiTable/BodyCellBuilder.js +8 -9
  56. package/es/HiTable/BodyCells/CellLayout.js +27 -21
  57. package/es/HiTable/BodyCells/CellSentinel.js +12 -4
  58. package/es/HiTable/BodyCells/CellStatus.js +5 -1
  59. package/es/HiTable/BodyCells/CellText.js +2 -1
  60. package/es/HiTable/BodyRow.js +7 -1
  61. package/es/HiTable/ColumnFilter.js +5 -1
  62. package/es/HiTable/HeaderCell.js +17 -14
  63. package/es/HiTable/HiTable.js +25 -9
  64. package/es/HiTable/HiTableBody.js +34 -11
  65. package/es/HiTable/HiTableHead.js +17 -5
  66. package/es/HiTable/OrderColumns.js +6 -2
  67. package/es/styles/createHiMuiTheme.js +7 -0
  68. package/index.es.js +1 -1
  69. package/index.js +1 -1
  70. package/package.json +2 -1
  71. package/styles/createHiMuiTheme.js +7 -0
  72. package/umd/hipay-material-ui.development.js +2965 -2659
  73. package/umd/hipay-material-ui.production.min.js +4 -4
@@ -0,0 +1,92 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import classnames from 'classnames';
4
+ import withStyles from '../styles/withStyles';
5
+ import ButtonBase from '../ButtonBase';
6
+
7
+ export const styles = theme => ({
8
+ dot: {
9
+ backgroundColor: theme.palette.dot.neutral,
10
+ borderRadius: '100%',
11
+ width: 12,
12
+ height: 12,
13
+ '&:hover': {
14
+ transform: 'scale(1.2)'
15
+ },
16
+ marginLeft: 12
17
+ },
18
+ dotActive: {
19
+ marginTop: 4,
20
+ marginLeft: 4,
21
+ '&:hover': {
22
+ transform: 'scale(1)'
23
+ }
24
+ },
25
+ dotValidated: {
26
+ backgroundColor: theme.palette.status[116]
27
+ },
28
+ dotRefused: {
29
+ backgroundColor: theme.palette.error.main
30
+ },
31
+ dotAround: {
32
+ backgroundColor: 'transparent',
33
+ borderRadius: '100%',
34
+ width: 24,
35
+ height: 24,
36
+ marginLeft: 6,
37
+ border: '2px solid ' + theme.palette.dot.neutral,
38
+ '&:hover': {
39
+ transform: 'scale(1.2)'
40
+ }
41
+ },
42
+ dotAroundValidated: {
43
+ border: '2px solid ' + theme.palette.status[116]
44
+ },
45
+ dotAroundRefused: {
46
+ border: '2px solid ' + theme.palette.error.main
47
+ }
48
+ });
49
+
50
+ class HiDot extends React.PureComponent {
51
+
52
+ render() {
53
+ const { active, status, classes, onClick } = this.props;
54
+
55
+ const dotAroundClass = classnames(classes.dotAround, {
56
+ [classes.dotAroundValidated]: status === 'validated',
57
+ [classes.dotAroundRefused]: status === 'refused'
58
+ });
59
+
60
+ const dotClassName = classnames(classes.dot, {
61
+ [classes.dotActive]: active,
62
+ [classes.dotRefused]: status === 'refused',
63
+ [classes.dotValidated]: status === 'validated'
64
+ });
65
+
66
+ return React.createElement(
67
+ ButtonBase,
68
+ { disableRipple: true, role: 'button', onClick: onClick },
69
+ active ? React.createElement(
70
+ 'div',
71
+ { className: dotAroundClass },
72
+ React.createElement('div', { className: dotClassName })
73
+ ) : React.createElement('div', { className: dotClassName })
74
+ );
75
+ }
76
+ }
77
+
78
+ HiDot.defaultProps = {
79
+ active: false,
80
+ status: 'unreviewed'
81
+ };
82
+ HiDot.propTypes = process.env.NODE_ENV !== "production" ? {
83
+ active: PropTypes.bool,
84
+ classes: PropTypes.object,
85
+ /**
86
+ * @ignore
87
+ */
88
+ className: PropTypes.string,
89
+ onClick: PropTypes.func,
90
+ status: PropTypes.oneOf(['refused', 'validated', 'unreviewed'])
91
+ } : {};
92
+ export default withStyles(styles, { name: 'MuiHiDot' })(HiDot);
@@ -0,0 +1,83 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import withStyles from '../styles/withStyles';
4
+ import HiDot from './HiDot';
5
+
6
+ export const styles = theme => ({
7
+ dotStepper: {
8
+ width: '100%',
9
+ maxWidth: 200,
10
+ display: 'flex',
11
+ flexDirection: 'row',
12
+ flexWrap: 'nowrap',
13
+ justifyContent: 'center',
14
+ alignItems: 'center'
15
+ }
16
+ });
17
+
18
+ class HiDotsStepper extends React.PureComponent {
19
+
20
+ constructor() {
21
+ super();
22
+
23
+ this.handleClick = activeStep => () => {
24
+ this.props.onChange(activeStep);
25
+ };
26
+
27
+ this.handleNavigation = activeStep => e => {
28
+ let nextStep = activeStep;
29
+ const { steps } = this.props;
30
+
31
+ if (e.key === 'ArrowLeft') nextStep -= 1;
32
+ if (e.key === 'ArrowRight') nextStep += 1;
33
+
34
+ nextStep = (nextStep + steps.length) % steps.length;
35
+
36
+ // Permet la navigation d'un Dot au suivant / précédent
37
+ document.querySelector(`div[tabIndex="${nextStep}"]`).focus();
38
+
39
+ this.props.onChange(nextStep);
40
+ };
41
+
42
+ this.handleClick = this.handleClick.bind(this);
43
+ this.handleNavigation = this.handleNavigation.bind(this);
44
+ }
45
+
46
+ render() {
47
+ const { classes, activeStep, steps } = this.props;
48
+
49
+ const listDots = steps.map((step, idx) => {
50
+ const { id, status } = step;
51
+ return React.createElement(
52
+ 'div',
53
+ {
54
+ key: id,
55
+ tabIndex: id,
56
+ className: classes.dotContainer,
57
+ role: 'navigation',
58
+ onKeyDown: this.handleNavigation(idx)
59
+ },
60
+ React.createElement(HiDot, {
61
+ status: status,
62
+ active: idx === activeStep,
63
+ onClick: this.handleClick(idx)
64
+ })
65
+ );
66
+ });
67
+
68
+ return React.createElement(
69
+ 'div',
70
+ { className: classes.dotStepper },
71
+ listDots
72
+ );
73
+ }
74
+ }
75
+
76
+ HiDotsStepper.propTypes = process.env.NODE_ENV !== "production" ? {
77
+ activeStep: PropTypes.number.isRequired,
78
+ classes: PropTypes.object,
79
+ className: PropTypes.string,
80
+ onChange: PropTypes.func,
81
+ steps: PropTypes.array.isRequired
82
+ } : {};
83
+ export default withStyles(styles, { name: 'MuiHiDotsStepper' })(HiDotsStepper);
@@ -0,0 +1 @@
1
+ export { default } from './HiDotsStepper';
@@ -0,0 +1,142 @@
1
+ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
2
+ import _extends from 'babel-runtime/helpers/extends';
3
+ // @inheritedComponent HiSuggestSelectField
4
+
5
+ import React from 'react';
6
+ import PropTypes from 'prop-types';
7
+ import HiSuggestSelectField from '../HiSelect/HiSuggestSelectField';
8
+
9
+ /**
10
+ * Champs input adresse pour formulaire
11
+ */
12
+ class HiAddressField extends React.Component {
13
+ constructor(props) {
14
+ super(props);
15
+ this.autocompleteService = null;
16
+
17
+ this.displaySuggestions = (predictions, status) => {
18
+ if (status !== 'OK') {
19
+ // Si l'API renvoie un statut différent de 'OK'
20
+ // (par exemple ZERO_RESULTS), pas de prédictions
21
+ } else {
22
+ // Sinon je mets à jour les options du champ avec les prédictions de GMaps
23
+ const options = [];
24
+ let isExact = false;
25
+ predictions.forEach(prediction => {
26
+ // Si le texte saisi est identique à une des propositions de GMaps,
27
+ // on estime que la valeur de l'adresse est exacte,
28
+ // même sans clic sur une proposition
29
+ isExact = prediction.description === this.value ? true : isExact;
30
+ options.push({
31
+ id: prediction.id,
32
+ label: prediction.description,
33
+ labelHighlight: prediction.description.replace(new RegExp(this.value, 'gi'), '<strong>$&</strong>'),
34
+ icon: prediction.types.indexOf('establishment') >= 0 ? 'domain' : 'map_marker',
35
+ type: 'icon'
36
+ });
37
+ }, this);
38
+ this.setState({ options, isExact });
39
+ }
40
+ };
41
+
42
+ this.state = {
43
+ options: [],
44
+ isExact: false
45
+ };
46
+
47
+ this.handleSearch = this.handleSearch.bind(this);
48
+ this.handleSelect = this.handleSelect.bind(this);
49
+ this.handleReset = this.handleReset.bind(this);
50
+ this.displaySuggestions = this.displaySuggestions.bind(this);
51
+ }
52
+
53
+ /**
54
+ * Au chargement du composant, je définis mon service autocomplete GMaps
55
+ */
56
+ componentDidMount() {
57
+ this.autocompleteService = new google.maps.places.AutocompleteService();
58
+ }
59
+
60
+ handleReset() {
61
+ this.props.onReset();
62
+ this.setState({
63
+ options: [],
64
+ isExact: false
65
+ });
66
+ }
67
+
68
+ handleSearch(event) {
69
+ // Je vérifie que le champ n'est pas vide car l'API lève une exception en cas d'input vide
70
+ if (event.target.value) {
71
+ // Liste des types à rechercher. Voir https://developers.google.com/places/web-service/autocomplete?hl=fr#place_types (ex : ['establishement', 'address']
72
+ const types = [];
73
+ // Liste des codes ISO Alpha-2 des pays où il faut rechercher (ex : ['fr', 'us'])
74
+ const countries = [];
75
+ // À chaque changement, la méthode getPlacesPredictions appelle la méthode
76
+ // displaySuggestions en lui fournissant un tableau de 5 prédictions
77
+ this.value = event.target.value;
78
+ if (this.autocompleteService) {
79
+ this.autocompleteService.getPlacePredictions({
80
+ input: event.target.value,
81
+ types,
82
+ componentRestrictions: { country: countries }
83
+ }, this.displaySuggestions);
84
+ } else {
85
+ // Dans le cas où le service ne peut pas se charger (mode test par exemple).
86
+ this.displaySuggestions([], 'EMPTY_RESULT');
87
+ }
88
+ }
89
+ this.props.onSearch(event);
90
+ // Mise à jour du texte dans l'input
91
+ this.setState(_extends({}, !event.target.value && {
92
+ options: []
93
+ }));
94
+ }
95
+
96
+ handleSelect(event, value) {
97
+ // Mise à jour de la valeur du champ + la valeur de l'adresse est exacte
98
+ this.setState({ options: [], isExact: true });
99
+ this.props.onSelect(event, value.label);
100
+ }
101
+
102
+ render() {
103
+ const _props = this.props,
104
+ { exactOnly, onSearch, onReset, onSelect } = _props,
105
+ otherProps = _objectWithoutProperties(_props, ['exactOnly', 'onSearch', 'onReset', 'onSelect']);
106
+ const { options, isExact } = this.state;
107
+
108
+ // On met le champ en erreur si une adresse exacte est éxigée
109
+ // et si l'adresse courante n'est pas complète
110
+ const showError = exactOnly && !isExact;
111
+
112
+ return React.createElement(HiSuggestSelectField, _extends({
113
+ options: options,
114
+ onSearch: this.handleSearch,
115
+ onReset: this.handleReset,
116
+ onSelect: this.handleSelect,
117
+ isExact: isExact,
118
+ error: showError
119
+ }, otherProps));
120
+ }
121
+ }
122
+
123
+ HiAddressField.propTypes = process.env.NODE_ENV !== "production" ? {
124
+ /**
125
+ * Est-ce qu'on n'accepte que les adresses trouvées par GMaps
126
+ */
127
+ exactOnly: PropTypes.bool,
128
+ /**
129
+ * Callback function called to empty the field.
130
+ */
131
+ onReset: PropTypes.func,
132
+ /**
133
+ * Callback function called when we write in the input.
134
+ */
135
+ onSearch: PropTypes.func,
136
+ /**
137
+ * Callback function called when a suggestion is selected.
138
+ */
139
+ onSelect: PropTypes.func
140
+ } : {};
141
+
142
+ export default HiAddressField;
@@ -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: () => this.handleHover(true),
199
- onMouseLeave: () => this.handleHover(false),
200
- onFocus: () => this.handleFocus(true),
201
- onBlur: () => this.handleFocus(false)
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
  ),
@@ -50,7 +50,7 @@ export const styles = theme => ({
50
50
  focused: {},
51
51
  error: {
52
52
  border: `1px solid ${theme.palette.negative.normal}`,
53
- paddingLeft: 0,
53
+ paddingLeft: 8,
54
54
  borderRadius: 2
55
55
  },
56
56
  startAdornment: {
@@ -85,7 +85,7 @@ class HiSearchField extends React.Component {
85
85
  if (typeof this.props.onSearch === 'undefined') {
86
86
  this.props.callbackFilteredList(this.props.itemList);
87
87
  } else {
88
- this.props.onSearch('');
88
+ this.props.onSearch(undefined, '');
89
89
  }
90
90
  }
91
91
 
@@ -4,4 +4,5 @@ export { default as HiFormLabel } from './HiFormLabel';
4
4
  export { default as HiInput } from './HiInput';
5
5
  export { default as HiPasswordField } from './HiPasswordField';
6
6
  export { default as HiTextField } from './HiTextField';
7
- export { default as HiSearchField } from './HiSearchField';
7
+ export { default as HiSearchField } from './HiSearchField';
8
+ export { default as HiAddressField } from './HiAddressField';
@@ -0,0 +1,198 @@
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 { Document, Page } from 'react-pdf';
6
+ import HiButton from '../HiButton';
7
+ import ChevronRightIcon from 'mdi-material-ui/ChevronRight';
8
+ import ChevronLeftIcon from 'mdi-material-ui/ChevronLeft';
9
+ import { CircularProgress } from 'material-ui/Progress';
10
+ import { withStyles } from '../styles';
11
+
12
+ export const styles = theme => ({
13
+ root: {
14
+ position: 'relative'
15
+ },
16
+ pageNumber: {
17
+ position: 'absolute',
18
+ bottom: 16,
19
+ left: -24,
20
+ backgroundColor: '#FFFFFF',
21
+ borderRadius: 4,
22
+ paddingTop: 7,
23
+ paddingBottom: 7,
24
+ paddingRight: 8,
25
+ paddingLeft: 8,
26
+ fontSize: 15,
27
+ fontFamily: theme.typography.fontFamily,
28
+ boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
29
+ color: '#737373'
30
+ },
31
+ pagesNavigation: {
32
+ position: 'absolute',
33
+ top: 16,
34
+ right: -30,
35
+ backgroundColor: '#FFFFFF',
36
+ borderRadius: 3,
37
+ paddingTop: 4,
38
+ paddingBottom: 4,
39
+ paddingRight: 3,
40
+ paddingLeft: 3,
41
+ fontFamily: theme.typography.fontFamily,
42
+ boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
43
+ color: '#737373',
44
+ '&>button:first-child': {
45
+ marginRight: 6
46
+ }
47
+ },
48
+ navigationButton: {
49
+ padding: 0,
50
+ minWidth: 0,
51
+ minHeight: 0
52
+ }
53
+ });
54
+
55
+ // Constantes utilisées pour le redimentionnement du PDF (format mobile par exemple)
56
+ const maxWindowWidth = 900;
57
+ const maxPdfWidth = 600;
58
+
59
+ var _ref = React.createElement(CircularProgress, null);
60
+
61
+ var _ref2 = React.createElement(ChevronLeftIcon, null);
62
+
63
+ var _ref3 = React.createElement(ChevronRightIcon, null);
64
+
65
+ class HiPdfReader extends React.PureComponent {
66
+ constructor(...args) {
67
+ var _temp;
68
+
69
+ return _temp = super(...args), this.state = {
70
+ numPages: null,
71
+ pageNumber: 1,
72
+ error: false,
73
+ width: 600
74
+ }, this.handleLoadSuccess = ({ numPages }) => {
75
+ this.setState({ numPages, error: false });
76
+ }, this.handleLoadError = () => {
77
+ this.setState({ error: true });
78
+ }, this.handleClickNextPage = () => {
79
+ this.setState({ pageNumber: this.state.pageNumber + 1 });
80
+ }, this.handleClickPreviousPage = () => {
81
+ this.setState({ pageNumber: this.state.pageNumber - 1 });
82
+ }, _temp;
83
+ }
84
+
85
+ // Calculate & Update state of new dimensions
86
+ updateDimensions() {
87
+ if (window.innerWidth < maxWindowWidth) {
88
+ let updateWidth = Math.round(window.innerWidth * 100 / maxWindowWidth / 100 * maxPdfWidth);
89
+ this.setState({ width: updateWidth });
90
+ } else {
91
+ this.setState({ width: maxPdfWidth });
92
+ }
93
+ }
94
+
95
+ componentDidMount() {
96
+ this.updateDimensions();
97
+ window.addEventListener('resize', this.updateDimensions.bind(this));
98
+ }
99
+
100
+ componentWillUnmount() {
101
+ window.removeEventListener('resize', this.updateDimensions.bind(this));
102
+ }
103
+
104
+ // Fonction appelée une fois le pdf correctement chargé
105
+
106
+
107
+ // Fonction appelée en cas d'erreur de chargement du pdf
108
+
109
+
110
+ // Fonction appelée au clic du bouton pour visualiser la page suivante du pdf
111
+
112
+
113
+ // Fonction appelée au clic du bouton pour visualiser la page précédente du pdf
114
+
115
+
116
+ // Render
117
+ render() {
118
+ const { pageNumber, numPages, error } = this.state;
119
+ const _props = this.props,
120
+ { classes, file, displayPagination, displayNavigationButtons } = _props,
121
+ props = _objectWithoutProperties(_props, ['classes', 'file', 'displayPagination', 'displayNavigationButtons']);
122
+
123
+ return React.createElement(
124
+ 'div',
125
+ { className: classes.root },
126
+ React.createElement(
127
+ Document,
128
+ _extends({
129
+ className: classes.style,
130
+ file: file,
131
+ onLoadSuccess: this.handleLoadSuccess,
132
+ onLoadError: this.handleLoadError,
133
+ loading: _ref
134
+ }, props),
135
+ React.createElement(Page, {
136
+ pageNumber: pageNumber,
137
+ renderAnnotations: false,
138
+ renderTextLayer: false,
139
+ width: this.state.width
140
+ })
141
+ ),
142
+ !error && numPages > 1 && displayPagination && React.createElement(
143
+ 'span',
144
+ { className: classes.pageNumber },
145
+ 'Page ',
146
+ pageNumber,
147
+ ' sur ',
148
+ numPages
149
+ ),
150
+ !error && numPages > 1 && displayNavigationButtons && React.createElement(
151
+ 'span',
152
+ { className: classes.pagesNavigation },
153
+ React.createElement(
154
+ HiButton,
155
+ {
156
+ onClick: this.handleClickPreviousPage,
157
+ disabled: pageNumber === 1,
158
+ className: classes.navigationButton
159
+ },
160
+ _ref2
161
+ ),
162
+ React.createElement(
163
+ HiButton,
164
+ {
165
+ onClick: this.handleClickNextPage,
166
+ disabled: pageNumber === numPages,
167
+ className: classes.navigationButton
168
+ },
169
+ _ref3
170
+ )
171
+ )
172
+ );
173
+ }
174
+ }
175
+
176
+ HiPdfReader.defaultProps = {
177
+ displayPagination: true,
178
+ displayNavigationButtons: true
179
+ };
180
+ HiPdfReader.propTypes = process.env.NODE_ENV !== "production" ? {
181
+ /**
182
+ * Surcharge les classes du composant
183
+ */
184
+ classes: PropTypes.object,
185
+ /**
186
+ * Chemin vers le fichier PDF
187
+ */
188
+ file: PropTypes.string.isRequired,
189
+ /**
190
+ * On affiche la pagination si le PDF contient plusieurs pages
191
+ */
192
+ displayPagination: PropTypes.bool,
193
+ /**
194
+ * On affiche les boutons de navigation entre les pages si le PDF contient plusieurs pages
195
+ */
196
+ displayNavigationButtons: PropTypes.bool
197
+ } : {};
198
+ export default withStyles(styles, { name: 'HmuiHiPdfReader', index: 51 })(HiPdfReader);
@@ -0,0 +1 @@
1
+ export { default } from './HiPdfReader';
@@ -15,7 +15,6 @@ export const styles = theme => ({
15
15
  textAlign: 'center',
16
16
  borderRadius: '45px',
17
17
  verticalAlign: 'middle',
18
- margin: 0.5 * theme.spacing.unit,
19
18
  fontSize: 11,
20
19
  fontWeight: theme.typography.fontWeightMedium,
21
20
  fontFamily: theme.typography.fontFamily
@@ -77,6 +77,8 @@ class HiSuggestSelect extends React.PureComponent {
77
77
  items[0].focus();
78
78
  }
79
79
  }, 1);
80
+ } else if (event.key === 'Escape') {
81
+ this.setState({ options: [] });
80
82
  }
81
83
  };
82
84
 
@@ -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,
@@ -152,8 +158,7 @@ class HiSelectableListItem extends React.Component {
152
158
  case 'image':
153
159
  let img = '';
154
160
  if (typeof item.img !== 'undefined') {
155
-
156
- img = React.createElement('img', { src: item.img, className: classes.imgListItem });
161
+ img = React.createElement('img', { src: item.img, alt: item.img, className: classes.imgListItem });
157
162
  }
158
163
 
159
164
  return React.createElement(
@@ -186,13 +191,7 @@ class HiSelectableListItem extends React.Component {
186
191
  return React.createElement(
187
192
  'div',
188
193
  { className: itemTextClass, 'data-id': item.id },
189
- item.labelHighlight && React.createElement('span', {
190
- className: classes.labelHighlight,
191
- dangerouslySetInnerHTML: {
192
- __html: escapeHTML(item.labelHighlight)
193
- }
194
- }),
195
- !item.labelHighlight && this.getItemLabel(item),
194
+ this.getItemLabel(item),
196
195
  React.createElement(
197
196
  'span',
198
197
  { className: classes.listItemSecondaryText },
@@ -216,8 +215,20 @@ class HiSelectableListItem extends React.Component {
216
215
  }
217
216
 
218
217
  getItemLabel(item) {
219
- if (item.color) {
218
+ const { classes } = this.props;
219
+ if (!item.labelHighlight && item.color && this.props.selected) {
220
220
  return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
221
+ } else if (item.labelHighlight) {
222
+ const mLabel = React.createElement('span', {
223
+ className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
224
+ dangerouslySetInnerHTML: {
225
+ __html: escapeHTML(item.labelHighlight)
226
+ }
227
+ });
228
+ if (item.color && this.props.selected) {
229
+ return React.createElement(HiColoredLabel, { color: item.color, label: mLabel });
230
+ }
231
+ return mLabel;
221
232
  }
222
233
  return item.label;
223
234
  }