@hipay/hipay-material-ui 3.7.12 → 3.7.13

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.
@@ -187,6 +187,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
187
187
  width: 234,
188
188
  textTransform: "uppercase"
189
189
  },
190
+ entityLabel: {
191
+ float: "left",
192
+ paddingLeft: 12,
193
+ height: 10,
194
+ width: 234,
195
+ textTransform: "uppercase"
196
+ },
190
197
  number: {
191
198
  display: "block",
192
199
  float: "left",
@@ -231,6 +238,15 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
231
238
  whiteSpace: "nowrap",
232
239
  textOverflow: "ellipsis"
233
240
  },
241
+ entityNumber: {
242
+ fontSize: 14,
243
+ height: 16,
244
+ width: 256,
245
+ paddingLeft: 12,
246
+ overflow: "hidden",
247
+ whiteSpace: "nowrap",
248
+ textOverflow: "ellipsis"
249
+ },
234
250
  memberSince: {
235
251
  display: "block",
236
252
  float: "left",
@@ -357,7 +373,8 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
357
373
  translations = props.translations,
358
374
  type = props.type,
359
375
  yearMember = props.yearMember,
360
- fallbackImage = props.fallbackImage;
376
+ fallbackImage = props.fallbackImage,
377
+ entity = props.entity;
361
378
  var classes = useStyles(props);
362
379
  var theme = (0, _styles.useTheme)();
363
380
  var formatNumber = (0, _react.useMemo)(function () {
@@ -524,7 +541,11 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
524
541
  }, PAYMENT_REFERENCE === type ? "REFERENCE" : translations.iban), /*#__PURE__*/_react.default.createElement("div", {
525
542
  className: (0, _classnames.default)(classes.number, classes.ibanNumber),
526
543
  "data-name": "card_number"
527
- }, formatNumber), /*#__PURE__*/_react.default.createElement("div", {
544
+ }, formatNumber), entity && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
545
+ className: (0, _classnames.default)(classes.labelMedium, classes.entityLabel)
546
+ }, translations.entity ? translations.entity : "ENTITY"), /*#__PURE__*/_react.default.createElement("div", {
547
+ className: (0, _classnames.default)(classes.number, classes.entityNumber)
548
+ }, entity)), /*#__PURE__*/_react.default.createElement("div", {
528
549
  className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa),
529
550
  title: username,
530
551
  "data-name": "card_name"
@@ -187,6 +187,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
187
187
  width: 234,
188
188
  textTransform: "uppercase"
189
189
  },
190
+ entityLabel: {
191
+ float: "left",
192
+ paddingLeft: 12,
193
+ height: 10,
194
+ width: 234,
195
+ textTransform: "uppercase"
196
+ },
190
197
  number: {
191
198
  display: "block",
192
199
  float: "left",
@@ -231,6 +238,15 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
231
238
  whiteSpace: "nowrap",
232
239
  textOverflow: "ellipsis"
233
240
  },
241
+ entityNumber: {
242
+ fontSize: 14,
243
+ height: 16,
244
+ width: 256,
245
+ paddingLeft: 12,
246
+ overflow: "hidden",
247
+ whiteSpace: "nowrap",
248
+ textOverflow: "ellipsis"
249
+ },
234
250
  memberSince: {
235
251
  display: "block",
236
252
  float: "left",
@@ -357,7 +373,8 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
357
373
  translations = props.translations,
358
374
  type = props.type,
359
375
  yearMember = props.yearMember,
360
- fallbackImage = props.fallbackImage;
376
+ fallbackImage = props.fallbackImage,
377
+ entity = props.entity;
361
378
  var classes = useStyles(props);
362
379
  var theme = (0, _styles.useTheme)();
363
380
  var formatNumber = (0, _react.useMemo)(function () {
@@ -524,7 +541,11 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
524
541
  }, PAYMENT_REFERENCE === type ? "REFERENCE" : translations.iban), /*#__PURE__*/_react.default.createElement("div", {
525
542
  className: (0, _classnames.default)(classes.number, classes.ibanNumber),
526
543
  "data-name": "card_number"
527
- }, formatNumber), /*#__PURE__*/_react.default.createElement("div", {
544
+ }, formatNumber), entity && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
545
+ className: (0, _classnames.default)(classes.labelMedium, classes.entityLabel)
546
+ }, translations.entity ? translations.entity : "ENTITY"), /*#__PURE__*/_react.default.createElement("div", {
547
+ className: (0, _classnames.default)(classes.number, classes.entityNumber)
548
+ }, entity)), /*#__PURE__*/_react.default.createElement("div", {
528
549
  className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa),
529
550
  title: username,
530
551
  "data-name": "card_name"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hipay/hipay-material-ui",
3
3
  "private": false,
4
- "version": "3.7.12",
4
+ "version": "3.7.13",
5
5
  "description": "React components that implement Google's Material Design.",
6
6
  "repository": {
7
7
  "type": "git",
package/HiMap/HiMap.js DELETED
@@ -1,315 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = exports.styles = void 0;
9
-
10
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
11
-
12
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
13
-
14
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
15
-
16
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
17
-
18
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
19
-
20
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
21
-
22
- var _react = _interopRequireDefault(require("react"));
23
-
24
- var _styles = require("@material-ui/core/styles");
25
-
26
- var _HiButton = _interopRequireDefault(require("../HiButton"));
27
-
28
- var _HiIcon = _interopRequireDefault(require("../HiIcon"));
29
-
30
- var _HiLoader = _interopRequireDefault(require("../HiLoader"));
31
-
32
- var _leaflet = _interopRequireDefault(require("leaflet"));
33
-
34
- var _reactLeaflet = require("react-leaflet");
35
-
36
- var apiUrl = 'https://nominatim.openstreetmap.org/search?q='; // The original CSS can be found here : https://unpkg.com/leaflet@1.3.1/dist/leaflet.css
37
-
38
- var styles = function styles(theme) {
39
- return {
40
- map: {
41
- height: '100%',
42
- overflow: 'hidden',
43
- // eslint-disable-next-line max-len
44
- '& .leaflet-pane, & .leaflet-tile, & .leaflet-marker-icon, & .leaflet-marker-shadow, & .leaflet-tile-container, & .leaflet-pane > svg, & .leaflet-pane > canvas, & .leaflet-zoom-box, & .leaflet-image-layer, & .leaflet-layer': {
45
- position: 'absolute',
46
- left: 0,
47
- top: 0
48
- },
49
- '& .leaflet-container': {
50
- overflow: 'hidden',
51
- height: '100%'
52
- },
53
- '& .leaflet-tile, & .leaflet-marker-icon, & .leaflet-marker-shadow': {
54
- '-webkit-user-select': 'none',
55
- '-moz-user-select': 'none',
56
- userSelect: 'none',
57
- '-webkit-user-drag': 'none'
58
- },
59
- '& .leaflet-control': {
60
- display: 'none'
61
- },
62
- '& .map_marker': {
63
- fill: theme.palette.primary.light
64
- }
65
- },
66
- controlButtons: {
67
- position: 'absolute',
68
- bottom: 16,
69
- right: 16
70
- },
71
- centerIcon: {
72
- fontSize: 14
73
- },
74
- centerButtonContainer: {
75
- backgroundColor: theme.palette.background1,
76
- borderRadius: 3,
77
- padding: 3,
78
- fontFamily: theme.typography.fontFamily,
79
- boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
80
- color: theme.palette.neutral.normal,
81
- '&>button:first-child': {
82
- borderBottom: "1px solid ".concat(theme.palette.neutral.normal)
83
- }
84
- },
85
- centerButton: {
86
- color: theme.palette.neutral.normal,
87
- padding: '1px !important',
88
- height: 26,
89
- minHeight: 26,
90
- width: 26,
91
- minWidth: 26
92
- },
93
- zoomButtons: {
94
- backgroundColor: theme.palette.background1,
95
- borderRadius: 3,
96
- padding: 3,
97
- fontFamily: theme.typography.fontFamily,
98
- boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
99
- color: theme.palette.neutral.normal,
100
- '&>button:first-child': {
101
- borderBottom: "1px solid ".concat(theme.palette.neutral.normal)
102
- }
103
- },
104
- zoomButton: {
105
- paddingTop: '0px !important',
106
- paddingBottom: 0,
107
- paddingRight: 6,
108
- paddingLeft: 6,
109
- minWidth: 0,
110
- minHeight: 0,
111
- borderRadius: 0,
112
- display: 'block',
113
- fontSize: 24,
114
- fontWeight: 'bold',
115
- lineHeight: '26px',
116
- '&>span': {
117
- width: 14
118
- }
119
- }
120
- };
121
- };
122
-
123
- exports.styles = styles;
124
-
125
- var _ref = _react.default.createElement(_reactLeaflet.TileLayer, {
126
- url: "http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png"
127
- });
128
-
129
- var _ref2 = _react.default.createElement(_HiLoader.default, {
130
- loading: true
131
- });
132
-
133
- var HiMap =
134
- /*#__PURE__*/
135
- function (_React$PureComponent) {
136
- (0, _inherits2.default)(HiMap, _React$PureComponent);
137
-
138
- function HiMap(props) {
139
- var _this;
140
-
141
- (0, _classCallCheck2.default)(this, HiMap);
142
- _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiMap).call(this, props));
143
- _this.mounted = false;
144
- _this.state = {
145
- lat: 0,
146
- lng: 0,
147
- notFound: false,
148
- loaded: false,
149
- zoom: 16
150
- };
151
- _this.handleClickZoomIn = _this.handleClickZoomIn.bind((0, _assertThisInitialized2.default)(_this));
152
- _this.handleScrollZoom = _this.handleScrollZoom.bind((0, _assertThisInitialized2.default)(_this));
153
- _this.handleClickZoomOut = _this.handleClickZoomOut.bind((0, _assertThisInitialized2.default)(_this));
154
- _this.handleCenter = _this.handleCenter.bind((0, _assertThisInitialized2.default)(_this));
155
- return _this;
156
- } // Loads the libraries once the component mounted to avoid error caused by server-cli rendering.
157
-
158
-
159
- (0, _createClass2.default)(HiMap, [{
160
- key: "componentDidMount",
161
- value: function componentDidMount() {
162
- this.mounted = true;
163
- this.findCoords();
164
- }
165
- }, {
166
- key: "componentWillUnmount",
167
- value: function componentWillUnmount() {
168
- this.mounted = false;
169
- }
170
- }, {
171
- key: "handleScrollZoom",
172
- value: function handleScrollZoom(event) {
173
- this.setState({
174
- zoom: event.zoom
175
- });
176
- }
177
- }, {
178
- key: "handleClickZoomIn",
179
- value: function handleClickZoomIn() {
180
- this.setState(function (prevState) {
181
- return {
182
- zoom: prevState.zoom + 1
183
- };
184
- });
185
- }
186
- }, {
187
- key: "handleClickZoomOut",
188
- value: function handleClickZoomOut() {
189
- this.setState(function (prevState) {
190
- return {
191
- zoom: prevState.zoom - 1
192
- };
193
- });
194
- }
195
- }, {
196
- key: "handleCenter",
197
- value: function handleCenter() {
198
- // trick to center the map.
199
- this.setState(function (prevState) {
200
- return {
201
- lat: prevState.lat + 0.0000000001
202
- };
203
- });
204
- } // Call to the geocoding API.
205
-
206
- }, {
207
- key: "findCoords",
208
- value: function findCoords() {
209
- var _this2 = this;
210
-
211
- fetch("".concat(apiUrl).concat(this.props.address, "&format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1")).then(function (result) {
212
- return result.json();
213
- }).then(function (response) {
214
- if (_this2.mounted) {
215
- if (response.length !== 0) {
216
- _this2.setState({
217
- lat: parseFloat(response[0].lat),
218
- lng: parseFloat(response[0].lon),
219
- notFound: false,
220
- loaded: true
221
- });
222
- } else {
223
- _this2.setState({
224
- notFound: true
225
- });
226
-
227
- _this2.props.onAddressNotFound();
228
- }
229
- }
230
- });
231
- }
232
- }, {
233
- key: "render",
234
- value: function render() {
235
- var _this$state = this.state,
236
- zoom = _this$state.zoom,
237
- lng = _this$state.lng,
238
- lat = _this$state.lat,
239
- notFound = _this$state.notFound,
240
- loaded = _this$state.loaded;
241
- var _this$props = this.props,
242
- translations = _this$props.translations,
243
- classes = _this$props.classes;
244
- var position = [lat, lng];
245
- var element;
246
- var myIcon;
247
- if (notFound) element = translations.notFound;
248
-
249
- if (loaded && _leaflet.default && _reactLeaflet.Map) {
250
- myIcon = _leaflet.default.divIcon({
251
- html: '<svg x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">\n' + '<path class="map_marker" ' + 'd="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 ' + 'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z' + ' M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8 ' + 'c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>\n' + '</svg>',
252
- iconSize: [24, 36],
253
- iconAnchor: [11, 36]
254
- });
255
- element = _react.default.createElement(_reactLeaflet.Map, {
256
- zoom: zoom,
257
- center: position,
258
- className: classes.map,
259
- onViewportChange: this.handleScrollZoom
260
- }, _ref, _react.default.createElement(_reactLeaflet.Marker, {
261
- position: position,
262
- icon: myIcon
263
- }), _react.default.createElement("div", {
264
- className: classes.controlButtons
265
- }, _react.default.createElement("div", {
266
- className: classes.centerButtonContainer
267
- }, _react.default.createElement(_HiButton.default, {
268
- className: classes.centerButton,
269
- onClick: this.handleCenter
270
- }, _react.default.createElement(_HiIcon.default, {
271
- className: classes.centerIcon,
272
- icon: 'my_location',
273
- size: 24
274
- }))), _react.default.createElement("div", {
275
- className: classes.zoomButtons
276
- }, _react.default.createElement(_HiButton.default, {
277
- onClick: this.handleClickZoomIn,
278
- className: classes.zoomButton
279
- }, "+"), _react.default.createElement(_HiButton.default, {
280
- onClick: this.handleClickZoomOut,
281
- className: classes.zoomButton
282
- }, "-"))));
283
- } else {
284
- element = _react.default.createElement("div", {
285
- style: {
286
- top: '50%',
287
- left: '50%',
288
- position: 'absolute'
289
- }
290
- }, _ref2);
291
- }
292
-
293
- return _react.default.createElement("div", {
294
- style: {
295
- height: '352px',
296
- width: '100%',
297
- position: 'relative'
298
- }
299
- }, element);
300
- }
301
- }]);
302
- return HiMap;
303
- }(_react.default.PureComponent);
304
-
305
- HiMap.defaultProps = {
306
- translations: {
307
- notFound: 'Address not found'
308
- }
309
- };
310
-
311
- var _default = (0, _styles.withStyles)(styles, {
312
- name: 'HmuiHiMap'
313
- })(HiMap);
314
-
315
- exports.default = _default;
@@ -1,200 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
-
10
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
11
-
12
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
13
-
14
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
15
-
16
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
17
-
18
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
19
-
20
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
21
-
22
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
23
-
24
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
25
-
26
- var _react = _interopRequireDefault(require("react"));
27
-
28
- var _classnames = _interopRequireDefault(require("classnames"));
29
-
30
- var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
31
-
32
- var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
33
-
34
- var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
35
-
36
- var _styles = require("@material-ui/core/styles");
37
-
38
- var _HiMap = _interopRequireDefault(require("./HiMap"));
39
-
40
- var _HiIcon = _interopRequireDefault(require("../HiIcon/HiIcon"));
41
-
42
- var styles = function styles(theme) {
43
- return {
44
- column: {
45
- flexBasis: '33.33%'
46
- },
47
- root: {
48
- flexGrow: 1,
49
- boxShadow: 'none'
50
- },
51
- imgListItem: {
52
- width: 24,
53
- height: 'auto',
54
- marginRight: 8,
55
- verticalAlign: 'middle'
56
- },
57
- expandMoreIcon: {},
58
- disabledIcon: {
59
- color: theme.palette.action.disabled
60
- },
61
- panelSummaryExpanded: {
62
- minHeight: 0
63
- },
64
- panelSummary: {
65
- '&>div:first-child': {
66
- margin: '12px 0'
67
- }
68
- },
69
- expanded: {
70
- '& $expandMoreIcon': {
71
- transform: 'translateY(-50%) rotate(0) !important',
72
- color: theme.palette.primary.light
73
- },
74
- minHeight: '0 !important'
75
- },
76
- heading: (0, _objectSpread2.default)({}, theme.typography.b1, {
77
- margin: 0,
78
- fontSize: 15,
79
- lineHeight: '24px'
80
- }),
81
- secondaryHeading: (0, _objectSpread2.default)({}, theme.typography.b3, {
82
- margin: 0,
83
- fontSize: 15,
84
- lineHeight: '24px',
85
- float: 'left',
86
- '&>svg': {
87
- fontSize: 18,
88
- marginLeft: 3,
89
- marginBottom: -5
90
- }
91
- })
92
- };
93
- };
94
-
95
- var HiMapExpand =
96
- /*#__PURE__*/
97
- function (_React$PureComponent) {
98
- (0, _inherits2.default)(HiMapExpand, _React$PureComponent);
99
-
100
- function HiMapExpand(props) {
101
- var _this;
102
-
103
- (0, _classCallCheck2.default)(this, HiMapExpand);
104
- _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiMapExpand).call(this, props));
105
- _this.state = {
106
- addressNotFound: false,
107
- expanded: false
108
- };
109
- _this.handleAddressNotFound = _this.handleAddressNotFound.bind((0, _assertThisInitialized2.default)(_this));
110
- _this.handleExpand = _this.handleExpand.bind((0, _assertThisInitialized2.default)(_this));
111
- return _this;
112
- }
113
-
114
- (0, _createClass2.default)(HiMapExpand, [{
115
- key: "handleExpand",
116
- value: function handleExpand() {
117
- this.setState(function (prevState) {
118
- return {
119
- expanded: !prevState.addressNotFound && !prevState.expanded
120
- };
121
- });
122
- }
123
- }, {
124
- key: "handleAddressNotFound",
125
- value: function handleAddressNotFound() {
126
- this.setState({
127
- addressNotFound: true
128
- });
129
- }
130
- }, {
131
- key: "render",
132
- value: function render() {
133
- var _this$props = this.props,
134
- classes = _this$props.classes,
135
- address = _this$props.address,
136
- countryFlagPath = _this$props.countryFlagPath,
137
- hideLabel = _this$props.hideLabel,
138
- translations = _this$props.translations;
139
- var _this$state = this.state,
140
- addressNotFound = _this$state.addressNotFound,
141
- expanded = _this$state.expanded;
142
- var flag = countryFlagPath ? _react.default.createElement("img", {
143
- src: countryFlagPath,
144
- className: classes.imgListItem,
145
- alt: 'country flag'
146
- }) : '';
147
- return _react.default.createElement(_ExpansionPanel.default, {
148
- className: classes.root,
149
- defaultExpanded: false,
150
- expanded: expanded,
151
- onChange: this.handleExpand
152
- }, _react.default.createElement(_ExpansionPanelSummary.default, {
153
- classes: {
154
- root: classes.panelSummary,
155
- expanded: classes.expanded,
156
- expandIcon: classes.expandMoreIcon
157
- },
158
- expandIcon: _react.default.createElement(_HiIcon.default, {
159
- icon: 'place',
160
- style: {
161
- position: 'relative',
162
- top: 2,
163
- marginRight: 5
164
- },
165
- className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.disabledIcon, addressNotFound)),
166
- title: addressNotFound ? translations.notFound : ''
167
- })
168
- }, _react.default.createElement(_react.default.Fragment, null, hideLabel || _react.default.createElement("div", {
169
- className: classes.column
170
- }, _react.default.createElement("p", {
171
- className: classes.secondaryHeading
172
- }, translations.label)), _react.default.createElement("div", null, _react.default.createElement("p", {
173
- className: classes.heading
174
- }, flag, address)))), _react.default.createElement(_ExpansionPanelDetails.default, {
175
- style: {
176
- padding: 0
177
- }
178
- }, _react.default.createElement(_HiMap.default, {
179
- address: address,
180
- onAddressNotFound: this.handleAddressNotFound
181
- })));
182
- }
183
- }]);
184
- return HiMapExpand;
185
- }(_react.default.PureComponent);
186
-
187
- HiMapExpand.defaultProps = {
188
- countryFlagPath: '',
189
- hideLabel: false,
190
- translations: {
191
- label: 'Adresse',
192
- notFound: 'Adresse inconnue'
193
- }
194
- };
195
-
196
- var _default = (0, _styles.withStyles)(styles, {
197
- name: 'HmuiHiMapExpand'
198
- })(HiMapExpand);
199
-
200
- exports.default = _default;
package/HiMap/index.js DELETED
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- Object.defineProperty(exports, "default", {
9
- enumerable: true,
10
- get: function get() {
11
- return _HiMap.default;
12
- }
13
- });
14
- Object.defineProperty(exports, "HiMapExpand", {
15
- enumerable: true,
16
- get: function get() {
17
- return _HiMapExpand.default;
18
- }
19
- });
20
-
21
- var _HiMap = _interopRequireDefault(require("./HiMap"));
22
-
23
- var _HiMapExpand = _interopRequireDefault(require("./HiMapExpand"));
package/es/HiMap/HiMap.js DELETED
@@ -1,315 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = exports.styles = void 0;
9
-
10
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
11
-
12
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
13
-
14
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
15
-
16
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
17
-
18
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
19
-
20
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
21
-
22
- var _react = _interopRequireDefault(require("react"));
23
-
24
- var _styles = require("@material-ui/core/styles");
25
-
26
- var _HiButton = _interopRequireDefault(require("../HiButton"));
27
-
28
- var _HiIcon = _interopRequireDefault(require("../HiIcon"));
29
-
30
- var _HiLoader = _interopRequireDefault(require("../HiLoader"));
31
-
32
- var _leaflet = _interopRequireDefault(require("leaflet"));
33
-
34
- var _reactLeaflet = require("react-leaflet");
35
-
36
- var apiUrl = 'https://nominatim.openstreetmap.org/search?q='; // The original CSS can be found here : https://unpkg.com/leaflet@1.3.1/dist/leaflet.css
37
-
38
- var styles = function styles(theme) {
39
- return {
40
- map: {
41
- height: '100%',
42
- overflow: 'hidden',
43
- // eslint-disable-next-line max-len
44
- '& .leaflet-pane, & .leaflet-tile, & .leaflet-marker-icon, & .leaflet-marker-shadow, & .leaflet-tile-container, & .leaflet-pane > svg, & .leaflet-pane > canvas, & .leaflet-zoom-box, & .leaflet-image-layer, & .leaflet-layer': {
45
- position: 'absolute',
46
- left: 0,
47
- top: 0
48
- },
49
- '& .leaflet-container': {
50
- overflow: 'hidden',
51
- height: '100%'
52
- },
53
- '& .leaflet-tile, & .leaflet-marker-icon, & .leaflet-marker-shadow': {
54
- '-webkit-user-select': 'none',
55
- '-moz-user-select': 'none',
56
- userSelect: 'none',
57
- '-webkit-user-drag': 'none'
58
- },
59
- '& .leaflet-control': {
60
- display: 'none'
61
- },
62
- '& .map_marker': {
63
- fill: theme.palette.primary.light
64
- }
65
- },
66
- controlButtons: {
67
- position: 'absolute',
68
- bottom: 16,
69
- right: 16
70
- },
71
- centerIcon: {
72
- fontSize: 14
73
- },
74
- centerButtonContainer: {
75
- backgroundColor: theme.palette.background1,
76
- borderRadius: 3,
77
- padding: 3,
78
- fontFamily: theme.typography.fontFamily,
79
- boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
80
- color: theme.palette.neutral.normal,
81
- '&>button:first-child': {
82
- borderBottom: "1px solid ".concat(theme.palette.neutral.normal)
83
- }
84
- },
85
- centerButton: {
86
- color: theme.palette.neutral.normal,
87
- padding: '1px !important',
88
- height: 26,
89
- minHeight: 26,
90
- width: 26,
91
- minWidth: 26
92
- },
93
- zoomButtons: {
94
- backgroundColor: theme.palette.background1,
95
- borderRadius: 3,
96
- padding: 3,
97
- fontFamily: theme.typography.fontFamily,
98
- boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
99
- color: theme.palette.neutral.normal,
100
- '&>button:first-child': {
101
- borderBottom: "1px solid ".concat(theme.palette.neutral.normal)
102
- }
103
- },
104
- zoomButton: {
105
- paddingTop: '0px !important',
106
- paddingBottom: 0,
107
- paddingRight: 6,
108
- paddingLeft: 6,
109
- minWidth: 0,
110
- minHeight: 0,
111
- borderRadius: 0,
112
- display: 'block',
113
- fontSize: 24,
114
- fontWeight: 'bold',
115
- lineHeight: '26px',
116
- '&>span': {
117
- width: 14
118
- }
119
- }
120
- };
121
- };
122
-
123
- exports.styles = styles;
124
-
125
- var _ref = _react.default.createElement(_reactLeaflet.TileLayer, {
126
- url: "http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png"
127
- });
128
-
129
- var _ref2 = _react.default.createElement(_HiLoader.default, {
130
- loading: true
131
- });
132
-
133
- var HiMap =
134
- /*#__PURE__*/
135
- function (_React$PureComponent) {
136
- (0, _inherits2.default)(HiMap, _React$PureComponent);
137
-
138
- function HiMap(props) {
139
- var _this;
140
-
141
- (0, _classCallCheck2.default)(this, HiMap);
142
- _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiMap).call(this, props));
143
- _this.mounted = false;
144
- _this.state = {
145
- lat: 0,
146
- lng: 0,
147
- notFound: false,
148
- loaded: false,
149
- zoom: 16
150
- };
151
- _this.handleClickZoomIn = _this.handleClickZoomIn.bind((0, _assertThisInitialized2.default)(_this));
152
- _this.handleScrollZoom = _this.handleScrollZoom.bind((0, _assertThisInitialized2.default)(_this));
153
- _this.handleClickZoomOut = _this.handleClickZoomOut.bind((0, _assertThisInitialized2.default)(_this));
154
- _this.handleCenter = _this.handleCenter.bind((0, _assertThisInitialized2.default)(_this));
155
- return _this;
156
- } // Loads the libraries once the component mounted to avoid error caused by server-cli rendering.
157
-
158
-
159
- (0, _createClass2.default)(HiMap, [{
160
- key: "componentDidMount",
161
- value: function componentDidMount() {
162
- this.mounted = true;
163
- this.findCoords();
164
- }
165
- }, {
166
- key: "componentWillUnmount",
167
- value: function componentWillUnmount() {
168
- this.mounted = false;
169
- }
170
- }, {
171
- key: "handleScrollZoom",
172
- value: function handleScrollZoom(event) {
173
- this.setState({
174
- zoom: event.zoom
175
- });
176
- }
177
- }, {
178
- key: "handleClickZoomIn",
179
- value: function handleClickZoomIn() {
180
- this.setState(function (prevState) {
181
- return {
182
- zoom: prevState.zoom + 1
183
- };
184
- });
185
- }
186
- }, {
187
- key: "handleClickZoomOut",
188
- value: function handleClickZoomOut() {
189
- this.setState(function (prevState) {
190
- return {
191
- zoom: prevState.zoom - 1
192
- };
193
- });
194
- }
195
- }, {
196
- key: "handleCenter",
197
- value: function handleCenter() {
198
- // trick to center the map.
199
- this.setState(function (prevState) {
200
- return {
201
- lat: prevState.lat + 0.0000000001
202
- };
203
- });
204
- } // Call to the geocoding API.
205
-
206
- }, {
207
- key: "findCoords",
208
- value: function findCoords() {
209
- var _this2 = this;
210
-
211
- fetch("".concat(apiUrl).concat(this.props.address, "&format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1")).then(function (result) {
212
- return result.json();
213
- }).then(function (response) {
214
- if (_this2.mounted) {
215
- if (response.length !== 0) {
216
- _this2.setState({
217
- lat: parseFloat(response[0].lat),
218
- lng: parseFloat(response[0].lon),
219
- notFound: false,
220
- loaded: true
221
- });
222
- } else {
223
- _this2.setState({
224
- notFound: true
225
- });
226
-
227
- _this2.props.onAddressNotFound();
228
- }
229
- }
230
- });
231
- }
232
- }, {
233
- key: "render",
234
- value: function render() {
235
- var _this$state = this.state,
236
- zoom = _this$state.zoom,
237
- lng = _this$state.lng,
238
- lat = _this$state.lat,
239
- notFound = _this$state.notFound,
240
- loaded = _this$state.loaded;
241
- var _this$props = this.props,
242
- translations = _this$props.translations,
243
- classes = _this$props.classes;
244
- var position = [lat, lng];
245
- var element;
246
- var myIcon;
247
- if (notFound) element = translations.notFound;
248
-
249
- if (loaded && _leaflet.default && _reactLeaflet.Map) {
250
- myIcon = _leaflet.default.divIcon({
251
- html: '<svg x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">\n' + '<path class="map_marker" ' + 'd="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 ' + 'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z' + ' M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8 ' + 'c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>\n' + '</svg>',
252
- iconSize: [24, 36],
253
- iconAnchor: [11, 36]
254
- });
255
- element = _react.default.createElement(_reactLeaflet.Map, {
256
- zoom: zoom,
257
- center: position,
258
- className: classes.map,
259
- onViewportChange: this.handleScrollZoom
260
- }, _ref, _react.default.createElement(_reactLeaflet.Marker, {
261
- position: position,
262
- icon: myIcon
263
- }), _react.default.createElement("div", {
264
- className: classes.controlButtons
265
- }, _react.default.createElement("div", {
266
- className: classes.centerButtonContainer
267
- }, _react.default.createElement(_HiButton.default, {
268
- className: classes.centerButton,
269
- onClick: this.handleCenter
270
- }, _react.default.createElement(_HiIcon.default, {
271
- className: classes.centerIcon,
272
- icon: 'my_location',
273
- size: 24
274
- }))), _react.default.createElement("div", {
275
- className: classes.zoomButtons
276
- }, _react.default.createElement(_HiButton.default, {
277
- onClick: this.handleClickZoomIn,
278
- className: classes.zoomButton
279
- }, "+"), _react.default.createElement(_HiButton.default, {
280
- onClick: this.handleClickZoomOut,
281
- className: classes.zoomButton
282
- }, "-"))));
283
- } else {
284
- element = _react.default.createElement("div", {
285
- style: {
286
- top: '50%',
287
- left: '50%',
288
- position: 'absolute'
289
- }
290
- }, _ref2);
291
- }
292
-
293
- return _react.default.createElement("div", {
294
- style: {
295
- height: '352px',
296
- width: '100%',
297
- position: 'relative'
298
- }
299
- }, element);
300
- }
301
- }]);
302
- return HiMap;
303
- }(_react.default.PureComponent);
304
-
305
- HiMap.defaultProps = {
306
- translations: {
307
- notFound: 'Address not found'
308
- }
309
- };
310
-
311
- var _default = (0, _styles.withStyles)(styles, {
312
- name: 'HmuiHiMap'
313
- })(HiMap);
314
-
315
- exports.default = _default;
@@ -1,200 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
-
10
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
11
-
12
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
13
-
14
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
15
-
16
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
17
-
18
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
19
-
20
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
21
-
22
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
23
-
24
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
25
-
26
- var _react = _interopRequireDefault(require("react"));
27
-
28
- var _classnames = _interopRequireDefault(require("classnames"));
29
-
30
- var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
31
-
32
- var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
33
-
34
- var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
35
-
36
- var _styles = require("@material-ui/core/styles");
37
-
38
- var _HiMap = _interopRequireDefault(require("./HiMap"));
39
-
40
- var _HiIcon = _interopRequireDefault(require("../HiIcon/HiIcon"));
41
-
42
- var styles = function styles(theme) {
43
- return {
44
- column: {
45
- flexBasis: '33.33%'
46
- },
47
- root: {
48
- flexGrow: 1,
49
- boxShadow: 'none'
50
- },
51
- imgListItem: {
52
- width: 24,
53
- height: 'auto',
54
- marginRight: 8,
55
- verticalAlign: 'middle'
56
- },
57
- expandMoreIcon: {},
58
- disabledIcon: {
59
- color: theme.palette.action.disabled
60
- },
61
- panelSummaryExpanded: {
62
- minHeight: 0
63
- },
64
- panelSummary: {
65
- '&>div:first-child': {
66
- margin: '12px 0'
67
- }
68
- },
69
- expanded: {
70
- '& $expandMoreIcon': {
71
- transform: 'translateY(-50%) rotate(0) !important',
72
- color: theme.palette.primary.light
73
- },
74
- minHeight: '0 !important'
75
- },
76
- heading: (0, _objectSpread2.default)({}, theme.typography.b1, {
77
- margin: 0,
78
- fontSize: 15,
79
- lineHeight: '24px'
80
- }),
81
- secondaryHeading: (0, _objectSpread2.default)({}, theme.typography.b3, {
82
- margin: 0,
83
- fontSize: 15,
84
- lineHeight: '24px',
85
- float: 'left',
86
- '&>svg': {
87
- fontSize: 18,
88
- marginLeft: 3,
89
- marginBottom: -5
90
- }
91
- })
92
- };
93
- };
94
-
95
- var HiMapExpand =
96
- /*#__PURE__*/
97
- function (_React$PureComponent) {
98
- (0, _inherits2.default)(HiMapExpand, _React$PureComponent);
99
-
100
- function HiMapExpand(props) {
101
- var _this;
102
-
103
- (0, _classCallCheck2.default)(this, HiMapExpand);
104
- _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiMapExpand).call(this, props));
105
- _this.state = {
106
- addressNotFound: false,
107
- expanded: false
108
- };
109
- _this.handleAddressNotFound = _this.handleAddressNotFound.bind((0, _assertThisInitialized2.default)(_this));
110
- _this.handleExpand = _this.handleExpand.bind((0, _assertThisInitialized2.default)(_this));
111
- return _this;
112
- }
113
-
114
- (0, _createClass2.default)(HiMapExpand, [{
115
- key: "handleExpand",
116
- value: function handleExpand() {
117
- this.setState(function (prevState) {
118
- return {
119
- expanded: !prevState.addressNotFound && !prevState.expanded
120
- };
121
- });
122
- }
123
- }, {
124
- key: "handleAddressNotFound",
125
- value: function handleAddressNotFound() {
126
- this.setState({
127
- addressNotFound: true
128
- });
129
- }
130
- }, {
131
- key: "render",
132
- value: function render() {
133
- var _this$props = this.props,
134
- classes = _this$props.classes,
135
- address = _this$props.address,
136
- countryFlagPath = _this$props.countryFlagPath,
137
- hideLabel = _this$props.hideLabel,
138
- translations = _this$props.translations;
139
- var _this$state = this.state,
140
- addressNotFound = _this$state.addressNotFound,
141
- expanded = _this$state.expanded;
142
- var flag = countryFlagPath ? _react.default.createElement("img", {
143
- src: countryFlagPath,
144
- className: classes.imgListItem,
145
- alt: 'country flag'
146
- }) : '';
147
- return _react.default.createElement(_ExpansionPanel.default, {
148
- className: classes.root,
149
- defaultExpanded: false,
150
- expanded: expanded,
151
- onChange: this.handleExpand
152
- }, _react.default.createElement(_ExpansionPanelSummary.default, {
153
- classes: {
154
- root: classes.panelSummary,
155
- expanded: classes.expanded,
156
- expandIcon: classes.expandMoreIcon
157
- },
158
- expandIcon: _react.default.createElement(_HiIcon.default, {
159
- icon: 'place',
160
- style: {
161
- position: 'relative',
162
- top: 2,
163
- marginRight: 5
164
- },
165
- className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.disabledIcon, addressNotFound)),
166
- title: addressNotFound ? translations.notFound : ''
167
- })
168
- }, _react.default.createElement(_react.default.Fragment, null, hideLabel || _react.default.createElement("div", {
169
- className: classes.column
170
- }, _react.default.createElement("p", {
171
- className: classes.secondaryHeading
172
- }, translations.label)), _react.default.createElement("div", null, _react.default.createElement("p", {
173
- className: classes.heading
174
- }, flag, address)))), _react.default.createElement(_ExpansionPanelDetails.default, {
175
- style: {
176
- padding: 0
177
- }
178
- }, _react.default.createElement(_HiMap.default, {
179
- address: address,
180
- onAddressNotFound: this.handleAddressNotFound
181
- })));
182
- }
183
- }]);
184
- return HiMapExpand;
185
- }(_react.default.PureComponent);
186
-
187
- HiMapExpand.defaultProps = {
188
- countryFlagPath: '',
189
- hideLabel: false,
190
- translations: {
191
- label: 'Adresse',
192
- notFound: 'Adresse inconnue'
193
- }
194
- };
195
-
196
- var _default = (0, _styles.withStyles)(styles, {
197
- name: 'HmuiHiMapExpand'
198
- })(HiMapExpand);
199
-
200
- exports.default = _default;
package/es/HiMap/index.js DELETED
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- Object.defineProperty(exports, "default", {
9
- enumerable: true,
10
- get: function get() {
11
- return _HiMap.default;
12
- }
13
- });
14
- Object.defineProperty(exports, "HiMapExpand", {
15
- enumerable: true,
16
- get: function get() {
17
- return _HiMapExpand.default;
18
- }
19
- });
20
-
21
- var _HiMap = _interopRequireDefault(require("./HiMap"));
22
-
23
- var _HiMapExpand = _interopRequireDefault(require("./HiMapExpand"));
@@ -1,51 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _fs = _interopRequireDefault(require("fs"));
6
-
7
- var _path = _interopRequireDefault(require("path"));
8
-
9
- var _react = _interopRequireDefault(require("react"));
10
-
11
- var _chai = require("chai");
12
-
13
- var _testUtils = require("../test-utils");
14
-
15
- describe('hi-svg-icons', function () {
16
- var shallow;
17
- before(function () {
18
- shallow = (0, _testUtils.createShallow)();
19
- });
20
- it('should be able to render all of them', function (done) {
21
- // This test can only be run on the node env
22
- if (!_fs.default.readdir) {
23
- done();
24
- return;
25
- }
26
-
27
- _fs.default.readdir(__dirname, function (err, files) {
28
- files.forEach(function (file) {
29
- // Ignore no js files and tests
30
- if (file.indexOf('.js') === -1 || file.indexOf('text.js') > -1) {
31
- return;
32
- } // eslint-disable-next-line global-require, import/no-dynamic-require
33
-
34
-
35
- var fileLoaded = require(_path.default.join(__dirname, file));
36
-
37
- if (!fileLoaded.default) {
38
- return;
39
- }
40
-
41
- var Icon = fileLoaded.default;
42
- var wrapper = shallow(_react.default.createElement(Icon, {
43
- className: "foo"
44
- }));
45
-
46
- _chai.assert.strictEqual(wrapper.hasClass('foo'), true);
47
- });
48
- done();
49
- });
50
- });
51
- });
@@ -1,51 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _fs = _interopRequireDefault(require("fs"));
6
-
7
- var _path = _interopRequireDefault(require("path"));
8
-
9
- var _react = _interopRequireDefault(require("react"));
10
-
11
- var _chai = require("chai");
12
-
13
- var _testUtils = require("../test-utils");
14
-
15
- describe('hi-svg-icons', function () {
16
- var shallow;
17
- before(function () {
18
- shallow = (0, _testUtils.createShallow)();
19
- });
20
- it('should be able to render all of them', function (done) {
21
- // This test can only be run on the node env
22
- if (!_fs.default.readdir) {
23
- done();
24
- return;
25
- }
26
-
27
- _fs.default.readdir(__dirname, function (err, files) {
28
- files.forEach(function (file) {
29
- // Ignore no js files and tests
30
- if (file.indexOf('.js') === -1 || file.indexOf('text.js') > -1) {
31
- return;
32
- } // eslint-disable-next-line global-require, import/no-dynamic-require
33
-
34
-
35
- var fileLoaded = require(_path.default.join(__dirname, file));
36
-
37
- if (!fileLoaded.default) {
38
- return;
39
- }
40
-
41
- var Icon = fileLoaded.default;
42
- var wrapper = shallow(_react.default.createElement(Icon, {
43
- className: "foo"
44
- }));
45
-
46
- _chai.assert.strictEqual(wrapper.hasClass('foo'), true);
47
- });
48
- done();
49
- });
50
- });
51
- });