@hipay/hipay-material-ui 1.0.0-beta.23 → 1.0.0-beta.25

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 (77) hide show
  1. package/HI-CHANGELOG.md +26 -43
  2. package/HiChip/HiChip.js +61 -8
  3. package/HiDatePicker/HiDateRangePicker.js +27 -13
  4. package/HiDatePicker/HiDateRangeSelector.js +13 -2
  5. package/HiForm/HiInput.js +1 -0
  6. package/HiForm/HiPasswordField.js +2 -2
  7. package/HiPins/HiPins.js +6 -4
  8. package/HiSelect/HiSelect.js +7 -5
  9. package/HiSelect/SelectInput.js +3 -8
  10. package/HiSelectableList/HiSelectableList.js +51 -49
  11. package/HiSelectableList/HiSelectableListItem.js +4 -2
  12. package/HiTable/BodyCellBuilder.js +22 -12
  13. package/HiTable/BodyCells/CellAccount.js +12 -3
  14. package/HiTable/BodyCells/CellAccountNumber.js +12 -3
  15. package/HiTable/BodyCells/CellAddress.js +12 -3
  16. package/HiTable/BodyCells/CellCountry.js +12 -3
  17. package/HiTable/BodyCells/CellDate.js +43 -42
  18. package/HiTable/BodyCells/CellIcon.js +12 -3
  19. package/HiTable/BodyCells/CellImage.js +12 -3
  20. package/HiTable/BodyCells/CellNumeric.js +12 -3
  21. package/HiTable/BodyCells/CellRate.js +12 -3
  22. package/HiTable/BodyCells/CellSentinel.js +17 -7
  23. package/HiTable/BodyCells/CellStatus.js +12 -3
  24. package/HiTable/BodyCells/CellText.js +17 -7
  25. package/HiTable/BodyCells/CellThirdPartySecurity.js +12 -3
  26. package/HiTable/BodyRow.js +12 -3
  27. package/HiTable/ColumnFilter.js +1 -4
  28. package/HiTable/HeaderCell.js +21 -11
  29. package/HiTable/HiStickyRow.js +24 -13
  30. package/HiTable/HiTable.js +30 -69
  31. package/HiTable/HiTableBody.js +99 -29
  32. package/HiTable/HiTableContextMenu.js +31 -16
  33. package/HiTable/HiTableFooter.js +9 -0
  34. package/HiTable/HiTableHead.js +15 -7
  35. package/HiTopBar/HiTopBar.js +6 -0
  36. package/README.md +71 -6
  37. package/es/HiChip/HiChip.js +74 -8
  38. package/es/HiDatePicker/HiDateRangePicker.js +25 -12
  39. package/es/HiDatePicker/HiDateRangeSelector.js +12 -2
  40. package/es/HiForm/HiInput.js +1 -0
  41. package/es/HiForm/HiPasswordField.js +2 -2
  42. package/es/HiPins/HiPins.js +4 -4
  43. package/es/HiSelect/HiSelect.js +6 -5
  44. package/es/HiSelect/SelectInput.js +3 -8
  45. package/es/HiSelectableList/HiSelectableList.js +51 -49
  46. package/es/HiSelectableList/HiSelectableListItem.js +4 -2
  47. package/es/HiTable/BodyCellBuilder.js +8 -2
  48. package/es/HiTable/BodyCells/CellAccount.js +6 -1
  49. package/es/HiTable/BodyCells/CellAccountNumber.js +6 -1
  50. package/es/HiTable/BodyCells/CellAddress.js +6 -1
  51. package/es/HiTable/BodyCells/CellCountry.js +6 -1
  52. package/es/HiTable/BodyCells/CellDate.js +28 -37
  53. package/es/HiTable/BodyCells/CellIcon.js +6 -1
  54. package/es/HiTable/BodyCells/CellImage.js +6 -1
  55. package/es/HiTable/BodyCells/CellNumeric.js +6 -1
  56. package/es/HiTable/BodyCells/CellRate.js +6 -1
  57. package/es/HiTable/BodyCells/CellSentinel.js +6 -1
  58. package/es/HiTable/BodyCells/CellStatus.js +6 -1
  59. package/es/HiTable/BodyCells/CellText.js +6 -1
  60. package/es/HiTable/BodyCells/CellThirdPartySecurity.js +6 -1
  61. package/es/HiTable/BodyRow.js +7 -2
  62. package/es/HiTable/ColumnFilter.js +1 -4
  63. package/es/HiTable/HeaderCell.js +16 -9
  64. package/es/HiTable/HiStickyRow.js +20 -13
  65. package/es/HiTable/HiTable.js +4 -40
  66. package/es/HiTable/HiTableBody.js +78 -26
  67. package/es/HiTable/HiTableContextMenu.js +28 -16
  68. package/es/HiTable/HiTableFooter.js +5 -0
  69. package/es/HiTable/HiTableHead.js +11 -6
  70. package/es/HiTopBar/HiTopBar.js +5 -0
  71. package/es/utils/HiIconBuilder.js +6 -2
  72. package/index.es.js +1 -1
  73. package/index.js +1 -1
  74. package/package.json +6 -1
  75. package/umd/hipay-material-ui.development.js +80901 -47149
  76. package/umd/hipay-material-ui.production.min.js +5 -5
  77. package/utils/HiIconBuilder.js +6 -2
@@ -1,13 +1,18 @@
1
1
  import _extends from 'babel-runtime/helpers/extends';
2
+ import _Object$values from 'babel-runtime/core-js/object/values';
3
+ import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
2
4
  import React from 'react';
3
5
  import PropTypes from 'prop-types';
4
6
  import { TableBody, TableRow } from 'material-ui/Table';
5
7
  import classNames from 'classnames';
8
+ import moment from 'moment';
9
+ import 'moment/locale/fr';
6
10
  import { withStyles } from '../styles';
7
11
  import BodyRow from './BodyRow';
8
12
  import ChildRow from './ChildRow';
9
13
  import HiStickyRow from './HiStickyRow';
10
14
  import * as cst from './constants';
15
+ import * as _ from 'lodash';
11
16
 
12
17
  export const styles = theme => ({
13
18
  tbody: {
@@ -62,7 +67,7 @@ export const styles = theme => ({
62
67
  class HiTableBody extends React.Component {
63
68
 
64
69
  constructor(props) {
65
- super();
70
+ super(props);
66
71
 
67
72
  this.buildIndicator = row => {
68
73
  const { columns, dateLocale } = this.props;
@@ -92,15 +97,48 @@ class HiTableBody extends React.Component {
92
97
 
93
98
  this.state = {
94
99
  openedParentRowId: null,
95
- openedDetailsRowIdList: []
100
+ openedDetailsRowIdList: [],
101
+ dataSource: props.dataSource,
102
+ groupByIds: {}
96
103
  };
97
104
 
105
+ if (props.groupBy && props.dataSource) {
106
+ let groupByIds = {};
107
+ props.dataSource.map(row => {
108
+ let value = row.datas[props.groupBy].value;
109
+ if (!groupByIds.hasOwnProperty(value)) {
110
+ groupByIds[value] = [];
111
+ }
112
+ groupByIds[value].push(row.datas);
113
+ });
114
+ this.state.groupByIds = groupByIds;
115
+ }
116
+
98
117
  this.buildIndicator = this.buildIndicator.bind(this);
99
118
  this.setOpenedParentRowId = this.setOpenedParentRowId.bind(this);
100
119
  this.toggleOpenedDetailsRowId = this.toggleOpenedDetailsRowId.bind(this);
101
120
  this.positionStickyRowNextButton = this.positionStickyRowNextButton.bind(this);
121
+
122
+ //Monkeypatch TableRow
123
+ /*var that = this;
124
+ TableRow.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState){
125
+ return (this.state.hovered !== nextState.hovered || this.props.selected !== nextProps.selected) && true;
126
+ }*/
127
+ }
128
+
129
+ deepCompare(object, base) {
130
+ var that = this;
131
+ return _.transform(object, (result, value, key) => {
132
+ if (!_.isEqual(value, base[key])) {
133
+ result[key] = _.isObject(value) && _.isObject(base[key]) ? that.deepCompare(value, base[key]) : value;
134
+ }
135
+ }).length > 0;
102
136
  }
103
137
 
138
+ /*shouldComponentUpdate(nextProps, nextState){
139
+ this.deepCompare(this.props,nextProps) || this.deepCompare(this.state,nextState);
140
+ }*/
141
+
104
142
  componentDidMount() {
105
143
  this.positionStickyRowNextButton();
106
144
  }
@@ -109,6 +147,30 @@ class HiTableBody extends React.Component {
109
147
  this.positionStickyRowNextButton();
110
148
  }
111
149
 
150
+ static getDerivedStateFromProps(props, state) {
151
+ let nextState = {};
152
+ if (props.groupBy && props.dataSource && props.dataSource.length > 0) {
153
+ if (_JSON$stringify(props.dataSource) !== _JSON$stringify(state.dataSource)) {
154
+ let groupByIds = {};
155
+ props.dataSource.map(row => {
156
+ let value = row.datas[props.groupBy].value;
157
+ if (!groupByIds.hasOwnProperty(value)) {
158
+ groupByIds[value] = [];
159
+ }
160
+ groupByIds[value].push(row.datas);
161
+ });
162
+ nextState.groupByIds = groupByIds;
163
+ }
164
+ }
165
+ if (_JSON$stringify(props.dataSource) !== _JSON$stringify(state.dataSource)) {
166
+ nextState.dataSource = props.dataSource;
167
+ }
168
+ if (_Object$values(nextState).length > 0) {
169
+ return nextState;
170
+ }
171
+ return null;
172
+ }
173
+
112
174
  /**
113
175
  * Définit l'id de la ligne parente "ouverte" ou null
114
176
  * (remplace la ligne par un sous-tableau)
@@ -140,7 +202,7 @@ class HiTableBody extends React.Component {
140
202
  }
141
203
  button.parentElement.style.top = '4px';
142
204
  }
143
- const label = button.previousSibling.previousSibling;
205
+ const label = button.previousSibling;
144
206
  button.style.left = `${tableContainer.offsetWidth - label.offsetWidth - 48 - 160}px`;
145
207
  }
146
208
  });
@@ -177,7 +239,6 @@ class HiTableBody extends React.Component {
177
239
  tabId,
178
240
  columns,
179
241
  orderedColumns,
180
- dataSource,
181
242
  onRowClick,
182
243
  selectable,
183
244
  onSelect,
@@ -192,7 +253,6 @@ class HiTableBody extends React.Component {
192
253
  translations,
193
254
  dateLocale,
194
255
  numberLocale,
195
- groupByIds,
196
256
  sortedColumnId,
197
257
  lookupColumns,
198
258
  loading,
@@ -201,7 +261,7 @@ class HiTableBody extends React.Component {
201
261
  detailRowsOptions
202
262
  } = this.props;
203
263
 
204
- const { openedParentRowId, openedDetailsRowIdList } = this.state;
264
+ const { openedParentRowId, openedDetailsRowIdList, groupByIds, dataSource } = this.state;
205
265
 
206
266
  let nbColumnsDisplayed = 0;
207
267
  orderedColumns.forEach(column => {
@@ -219,31 +279,21 @@ class HiTableBody extends React.Component {
219
279
  // Gestion du sticky group by
220
280
  if (typeof groupBy !== 'undefined' && groupBy === sortedColumnId) {
221
281
  let currentGroupByValue = row.datas[groupBy].value;
222
- const date = new Date(currentGroupByValue);
223
- if (date instanceof Date && isFinite(date)) {
224
- currentGroupByValue = currentGroupByValue.substr(0, 10);
225
- }
282
+
226
283
  // TODO => condition for other columns type
227
284
  if (columns[groupBy].type === cst.TYPE_DATE) {
228
- if (index === 0 || currentGroupByValue !== stickyRowValue) {
229
- stickyRowValue = currentGroupByValue;
230
- let label = stickyRowValue;
231
- if (date instanceof Date && isFinite(date)) {
232
- label = new Date(label);
233
- const options = {
234
- year: 'numeric',
235
- month: 'long',
236
- weekday: 'long',
237
- day: 'numeric'
238
- };
239
- label = label.toLocaleString(dateLocale, options);
240
- label = label.charAt(0).toUpperCase() + label.substr(1);
241
- }
285
+
286
+ moment.locale(dateLocale);
287
+ let date = moment(currentGroupByValue);
288
+ let label = date.format('dddd D MMMM YYYY');
289
+
290
+ if (index === 0 || label !== stickyRowValue) {
291
+
292
+ stickyRowValue = label;
242
293
 
243
294
  tableRows.push(React.createElement(HiStickyRow, {
244
295
  key: `sticky_row_${row.rowId}`,
245
296
  dense: dense,
246
- value: stickyRowValue,
247
297
  label: label,
248
298
  length: groupByIds[currentGroupByValue].length,
249
299
  colSpan: nbColumnsDisplayed,
@@ -326,7 +376,9 @@ class HiTableBody extends React.Component {
326
376
  sticky,
327
377
  isDetail: true,
328
378
  fixedColumnWidth,
329
- disableContextMenu
379
+ disableContextMenu,
380
+ dateLocale,
381
+ numberLocale
330
382
  };
331
383
 
332
384
  tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
@@ -40,7 +40,9 @@ class HiTableContextMenu extends React.Component {
40
40
 
41
41
  this.state = {
42
42
  value: '',
43
- label: ''
43
+ label: '',
44
+ lookup: true,
45
+ exclude: true
44
46
  };
45
47
 
46
48
  this.handleContextMenuOpen = this.handleContextMenuOpen.bind(this);
@@ -51,9 +53,12 @@ class HiTableContextMenu extends React.Component {
51
53
  }
52
54
 
53
55
  handleContextMenuOpen(event) {
56
+ const { columns } = this.props;
54
57
  this.setState({
55
58
  value: event.detail.data.value,
56
- label: event.detail.data.label
59
+ label: event.detail.data.label,
60
+ lookup: columns[event.detail.data.column].lookup !== false,
61
+ exclude: columns[event.detail.data.column].exclude !== false
57
62
  });
58
63
  }
59
64
 
@@ -83,8 +88,9 @@ class HiTableContextMenu extends React.Component {
83
88
 
84
89
  render() {
85
90
  const { classes, tabId, translations } = this.props;
91
+ const { lookup, exclude } = this.state;
86
92
 
87
- const contextMenuItems = [{ id: 'copy', icon: 'contentDuplicate', title: translations.copy, action: this.handleClickCopy }, { id: 'lookup', icon: 'crosshairsGps', title: translations.lookUp, action: this.handleClickLookup }, { id: 'exclude', icon: 'closeCircleOutline', title: translations.exclude, action: this.handleClickExclude }, { id: 'open', icon: 'openInNew', title: translations.openInNewTab, action: this.handleClickOpenNewTab }];
93
+ const contextMenuItems = [{ id: 'copy', icon: 'contentDuplicate', title: translations.copy, action: this.handleClickCopy }, { id: 'lookup', displayed: lookup, icon: 'crosshairsGps', title: translations.lookUp, action: this.handleClickLookup }, { id: 'exclude', displayed: exclude, icon: 'closeCircleOutline', title: translations.exclude, action: this.handleClickExclude }, { id: 'open', icon: 'openInNew', title: translations.openInNewTab, action: this.handleClickOpenNewTab }];
88
94
 
89
95
  return React.createElement(
90
96
  ContextMenu,
@@ -94,19 +100,21 @@ class HiTableContextMenu extends React.Component {
94
100
  onShow: this.handleContextMenuOpen
95
101
  },
96
102
  contextMenuItems.map(menuItem => {
97
- return React.createElement(
98
- MenuItem,
99
- {
100
- attributes: { className: classes.contextMenuItem },
101
- key: `hitable_context_menu_${tabId}_${menuItem.id}`,
102
- onClick: menuItem.action },
103
- React.createElement(HiIconBuilder, { icon: menuItem.icon }),
104
- React.createElement(
105
- 'span',
106
- { className: classes.title },
107
- menuItem.title.replace('%s', this.state.label)
108
- )
109
- );
103
+ if (menuItem.displayed !== false) {
104
+ return React.createElement(
105
+ MenuItem,
106
+ {
107
+ attributes: { className: classes.contextMenuItem },
108
+ key: `hitable_context_menu_${tabId}_${menuItem.id}`,
109
+ onClick: menuItem.action },
110
+ React.createElement(HiIconBuilder, { icon: menuItem.icon }),
111
+ React.createElement(
112
+ 'span',
113
+ { className: classes.title },
114
+ menuItem.title.replace('%s', this.state.label)
115
+ )
116
+ );
117
+ }
110
118
  })
111
119
  );
112
120
  }
@@ -125,6 +133,10 @@ HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
125
133
  * Surcharge le style du composant
126
134
  */
127
135
  classes: PropTypes.object,
136
+ /**
137
+ * Liste des objets colonnes utilisé pour savoir quels items du context menu sont affichés
138
+ */
139
+ columns: PropTypes.object.isRequired,
128
140
  /**
129
141
  * Fonction de callback appelée au clic sur l'item redirection
130
142
  * du menu contextuel ouvert au clic droit
@@ -1,3 +1,4 @@
1
+ import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
1
2
  import React from 'react';
2
3
  import { TableCell, TableFooter, TableRow } from 'material-ui/Table';
3
4
  import { withStyles } from '../styles';
@@ -28,6 +29,10 @@ export const styles = theme => ({
28
29
 
29
30
  class HiTableFooter extends React.Component {
30
31
 
32
+ shouldComponentUpdate(nextProps, nextState) {
33
+ return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
34
+ }
35
+
31
36
  render() {
32
37
  const { classes, nbColumnsDisplayed, view } = this.props;
33
38
 
@@ -1,4 +1,5 @@
1
1
  import _extends from 'babel-runtime/helpers/extends';
2
+ import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
2
3
  import React from 'react';
3
4
  import { findDOMNode } from 'react-dom';
4
5
  import PropTypes from 'prop-types';
@@ -90,11 +91,11 @@ class HiTableHead extends React.Component {
90
91
  constructor(props) {
91
92
  super();
92
93
 
94
+ this.orderColumnsAnchorEl = null;
93
95
  this.orderColumnsButton = null;
94
96
  this.state = {
95
97
  hovered: false,
96
- openedOrderColumns: false,
97
- orderColumnsAnchorEl: null
98
+ openedOrderColumns: false
98
99
  };
99
100
 
100
101
  this.handleEvent = this.handleEvent.bind(this);
@@ -102,6 +103,10 @@ class HiTableHead extends React.Component {
102
103
  this.handleCloseOrderColumns = this.handleCloseOrderColumns.bind(this);
103
104
  }
104
105
 
106
+ shouldComponentUpdate(nextProps, nextState) {
107
+ return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
108
+ }
109
+
105
110
  handleEvent({ type }) {
106
111
  switch (type) {
107
112
  case 'mouseenter':
@@ -115,9 +120,9 @@ class HiTableHead extends React.Component {
115
120
 
116
121
  handleOpenOrderColumns() {
117
122
  this.setState({
118
- openedOrderColumns: true,
119
- orderColumnsAnchorEl: findDOMNode(this.orderColumnsButton)
123
+ openedOrderColumns: true
120
124
  });
125
+ this.orderColumnsAnchorEl = findDOMNode(this.orderColumnsButton);
121
126
  }
122
127
 
123
128
  handleCloseOrderColumns() {
@@ -155,7 +160,7 @@ class HiTableHead extends React.Component {
155
160
  fixedColumnWidth
156
161
  } = this.props;
157
162
 
158
- const { hovered, openedOrderColumns, orderColumnsAnchorEl } = this.state;
163
+ const { hovered, openedOrderColumns } = this.state;
159
164
 
160
165
  let headerProps = _extends({
161
166
  className: classNames(classes.thead, {
@@ -258,7 +263,7 @@ class HiTableHead extends React.Component {
258
263
  orderable && React.createElement(OrderColumns, {
259
264
  isOpen: openedOrderColumns,
260
265
  onClose: this.handleCloseOrderColumns,
261
- anchorEl: orderColumnsAnchorEl,
266
+ anchorEl: this.orderColumnsAnchorEl,
262
267
  updateOrderedColumns: onColumnsOrderUpdate,
263
268
  columns: columns,
264
269
  orderedColumns: orderedColumns,
@@ -158,6 +158,11 @@ class HiTopBar extends React.Component {
158
158
  this.props.onClickReturn();
159
159
  }
160
160
 
161
+ //TODO : Cyclic reference passed.
162
+ /*shouldComponentUpdate(nextProps, nextState){
163
+ return JSON.stringify(this.props) !== JSON.stringify(nextProps);
164
+ }*/
165
+
161
166
  render() {
162
167
  const {
163
168
  classes,
@@ -65,7 +65,7 @@ class HiIconBuilder extends PureComponent {
65
65
  style: _extends({
66
66
  height: size,
67
67
  width: size
68
- }, color && { color }, backgroundColor && { backgroundColor, padding: 2, borderRadius: size }, style),
68
+ }, color && { color, fill: color }, backgroundColor && { backgroundColor, padding: 2, borderRadius: size }, style),
69
69
  onClick: onClick
70
70
  }, props, others));
71
71
  }
@@ -102,6 +102,10 @@ HiIconBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
102
102
  /**
103
103
  * Style surchargé
104
104
  */
105
- style: PropTypes.object
105
+ style: PropTypes.object,
106
+ /**
107
+ * Titre de l'icône
108
+ */
109
+ title: PropTypes.string
106
110
  } : {};
107
111
  export default HiIconBuilder;
package/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license Material-UI v1.0.0-beta.23
1
+ /** @license Material-UI v1.0.0-beta.25
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license Material-UI v1.0.0-beta.23
1
+ /** @license Material-UI v1.0.0-beta.25
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@hipay/hipay-material-ui",
3
3
  "private": false,
4
4
  "author": "HiPay PSYCHE Team",
5
- "version": "1.0.0-beta.23",
5
+ "version": "1.0.0-beta.25",
6
6
  "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
7
7
  "main": "./index.js",
8
8
  "repository": {
@@ -76,5 +76,10 @@
76
76
  "test": "test"
77
77
  },
78
78
  "license": "ISC",
79
+ "config": {
80
+ "commitizen": {
81
+ "path": "./node_modules/cz-conventional-changelog"
82
+ }
83
+ },
79
84
  "module": "./index.es.js"
80
85
  }