@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.
- 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/HiDotsStepper/HiDot.js +151 -0
- package/HiDotsStepper/HiDotsStepper.js +146 -0
- package/HiDotsStepper/index.js +16 -0
- package/HiForm/HiAddressField.js +204 -0
- package/HiForm/HiFormControl.js +19 -27
- package/HiForm/HiInput.js +1 -1
- package/HiForm/HiSearchField.js +1 -1
- package/HiForm/index.js +9 -0
- package/HiPdfReader/HiPdfReader.js +282 -0
- package/HiPdfReader/index.js +16 -0
- package/HiPins/HiPins.js +0 -1
- package/HiSelect/HiSuggestSelect.js +2 -0
- package/HiSelectableList/HiSelectableListItem.js +23 -11
- package/HiTable/BodyCellBuilder.js +7 -8
- package/HiTable/BodyCells/CellLayout.js +25 -19
- package/HiTable/BodyCells/CellSentinel.js +12 -4
- package/HiTable/BodyCells/CellStatus.js +5 -1
- package/HiTable/BodyCells/CellText.js +2 -1
- package/HiTable/BodyRow.js +7 -1
- package/HiTable/ColumnFilter.js +5 -1
- package/HiTable/HeaderCell.js +17 -14
- package/HiTable/HiTable.js +25 -9
- package/HiTable/HiTableBody.js +38 -14
- package/HiTable/HiTableHead.js +22 -5
- 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/HiDotsStepper/HiDot.js +92 -0
- package/es/HiDotsStepper/HiDotsStepper.js +83 -0
- package/es/HiDotsStepper/index.js +1 -0
- package/es/HiForm/HiAddressField.js +142 -0
- package/es/HiForm/HiFormControl.js +15 -15
- package/es/HiForm/HiInput.js +1 -1
- package/es/HiForm/HiSearchField.js +1 -1
- package/es/HiForm/index.js +2 -1
- package/es/HiPdfReader/HiPdfReader.js +198 -0
- package/es/HiPdfReader/index.js +1 -0
- package/es/HiPins/HiPins.js +0 -1
- package/es/HiSelect/HiSuggestSelect.js +2 -0
- package/es/HiSelectableList/HiSelectableListItem.js +22 -11
- package/es/HiTable/BodyCellBuilder.js +8 -9
- package/es/HiTable/BodyCells/CellLayout.js +27 -21
- package/es/HiTable/BodyCells/CellSentinel.js +12 -4
- package/es/HiTable/BodyCells/CellStatus.js +5 -1
- package/es/HiTable/BodyCells/CellText.js +2 -1
- package/es/HiTable/BodyRow.js +7 -1
- package/es/HiTable/ColumnFilter.js +5 -1
- package/es/HiTable/HeaderCell.js +17 -14
- package/es/HiTable/HiTable.js +25 -9
- package/es/HiTable/HiTableBody.js +34 -11
- package/es/HiTable/HiTableHead.js +17 -5
- package/es/HiTable/OrderColumns.js +6 -2
- package/es/styles/createHiMuiTheme.js +7 -0
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +2 -1
- package/styles/createHiMuiTheme.js +7 -0
- package/umd/hipay-material-ui.development.js +2965 -2659
- 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:
|
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/HiForm/HiInput.js
CHANGED
package/es/HiForm/index.js
CHANGED
@@ -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';
|
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,
|
@@ -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
|
-
|
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
|
-
|
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
|
}
|