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

package/es/HiTable/HiTableBody.js

@@ -1,13 +1,18 @@
 import _extends from 'babel-runtime/helpers/extends';
+import _Object$values from 'babel-runtime/core-js/object/values';
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableBody, TableRow } from 'material-ui/Table';
 import classNames from 'classnames';
+import moment from 'moment';
+import 'moment/locale/fr';
 import { withStyles } from '../styles';
 import BodyRow from './BodyRow';
 import ChildRow from './ChildRow';
 import HiStickyRow from './HiStickyRow';
 import * as cst from './constants';
+import * as _ from 'lodash';
 
 export const styles = theme => ({
     tbody: {
@@ -62,7 +67,7 @@ export const styles = theme => ({
 class HiTableBody extends React.Component {
 
     constructor(props) {
-        super();
+        super(props);
 
         this.buildIndicator = row => {
             const { columns, dateLocale } = this.props;
@@ -92,15 +97,48 @@ class HiTableBody extends React.Component {
 
         this.state = {
             openedParentRowId: null,
-            openedDetailsRowIdList: []
+            openedDetailsRowIdList: [],
+            dataSource: props.dataSource,
+            groupByIds: {}
         };
 
+        if (props.groupBy && props.dataSource) {
+            let groupByIds = {};
+            props.dataSource.map(row => {
+                let value = row.datas[props.groupBy].value;
+                if (!groupByIds.hasOwnProperty(value)) {
+                    groupByIds[value] = [];
+                }
+                groupByIds[value].push(row.datas);
+            });
+            this.state.groupByIds = groupByIds;
+        }
+
         this.buildIndicator = this.buildIndicator.bind(this);
         this.setOpenedParentRowId = this.setOpenedParentRowId.bind(this);
         this.toggleOpenedDetailsRowId = this.toggleOpenedDetailsRowId.bind(this);
         this.positionStickyRowNextButton = this.positionStickyRowNextButton.bind(this);
+
+        //Monkeypatch TableRow
+        /*var that = this;
+        TableRow.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState){
+          return (this.state.hovered !== nextState.hovered || this.props.selected !== nextProps.selected) && true;
+        }*/
+    }
+
+    deepCompare(object, base) {
+        var that = this;
+        return _.transform(object, (result, value, key) => {
+            if (!_.isEqual(value, base[key])) {
+                result[key] = _.isObject(value) && _.isObject(base[key]) ? that.deepCompare(value, base[key]) : value;
+            }
+        }).length > 0;
     }
 
+    /*shouldComponentUpdate(nextProps, nextState){
+      this.deepCompare(this.props,nextProps) || this.deepCompare(this.state,nextState);
+    }*/
+
     componentDidMount() {
         this.positionStickyRowNextButton();
     }
@@ -109,6 +147,30 @@ class HiTableBody extends React.Component {
         this.positionStickyRowNextButton();
     }
 
+    static getDerivedStateFromProps(props, state) {
+        let nextState = {};
+        if (props.groupBy && props.dataSource && props.dataSource.length > 0) {
+            if (_JSON$stringify(props.dataSource) !== _JSON$stringify(state.dataSource)) {
+                let groupByIds = {};
+                props.dataSource.map(row => {
+                    let value = row.datas[props.groupBy].value;
+                    if (!groupByIds.hasOwnProperty(value)) {
+                        groupByIds[value] = [];
+                    }
+                    groupByIds[value].push(row.datas);
+                });
+                nextState.groupByIds = groupByIds;
+            }
+        }
+        if (_JSON$stringify(props.dataSource) !== _JSON$stringify(state.dataSource)) {
+            nextState.dataSource = props.dataSource;
+        }
+        if (_Object$values(nextState).length > 0) {
+            return nextState;
+        }
+        return null;
+    }
+
     /**
      * Définit l'id de la ligne parente "ouverte" ou null
      * (remplace la ligne par un sous-tableau)
@@ -140,7 +202,7 @@ class HiTableBody extends React.Component {
                         }
                         button.parentElement.style.top = '4px';
                     }
-                    const label = button.previousSibling.previousSibling;
+                    const label = button.previousSibling;
                     button.style.left = `${tableContainer.offsetWidth - label.offsetWidth - 48 - 160}px`;
                 }
             });
@@ -177,7 +239,6 @@ class HiTableBody extends React.Component {
             tabId,
             columns,
             orderedColumns,
-            dataSource,
             onRowClick,
             selectable,
             onSelect,
@@ -192,7 +253,6 @@ class HiTableBody extends React.Component {
             translations,
             dateLocale,
             numberLocale,
-            groupByIds,
             sortedColumnId,
             lookupColumns,
             loading,
@@ -201,7 +261,7 @@ class HiTableBody extends React.Component {
             detailRowsOptions
         } = this.props;
 
-        const { openedParentRowId, openedDetailsRowIdList } = this.state;
+        const { openedParentRowId, openedDetailsRowIdList, groupByIds, dataSource } = this.state;
 
         let nbColumnsDisplayed = 0;
         orderedColumns.forEach(column => {
@@ -219,31 +279,21 @@ class HiTableBody extends React.Component {
             // Gestion du sticky group by
             if (typeof groupBy !== 'undefined' && groupBy === sortedColumnId) {
                 let currentGroupByValue = row.datas[groupBy].value;
-                const date = new Date(currentGroupByValue);
-                if (date instanceof Date && isFinite(date)) {
-                    currentGroupByValue = currentGroupByValue.substr(0, 10);
-                }
+
                 // TODO => condition for other columns type
                 if (columns[groupBy].type === cst.TYPE_DATE) {
-                    if (index === 0 || currentGroupByValue !== stickyRowValue) {
-                        stickyRowValue = currentGroupByValue;
-                        let label = stickyRowValue;
-                        if (date instanceof Date && isFinite(date)) {
-                            label = new Date(label);
-                            const options = {
-                                year: 'numeric',
-                                month: 'long',
-                                weekday: 'long',
-                                day: 'numeric'
-                            };
-                            label = label.toLocaleString(dateLocale, options);
-                            label = label.charAt(0).toUpperCase() + label.substr(1);
-                        }
+
+                    moment.locale(dateLocale);
+                    let date = moment(currentGroupByValue);
+                    let label = date.format('dddd D MMMM YYYY');
+
+                    if (index === 0 || label !== stickyRowValue) {
+
+                        stickyRowValue = label;
 
                         tableRows.push(React.createElement(HiStickyRow, {
                             key: `sticky_row_${row.rowId}`,
                             dense: dense,
-                            value: stickyRowValue,
                             label: label,
                             length: groupByIds[currentGroupByValue].length,
                             colSpan: nbColumnsDisplayed,
@@ -326,7 +376,9 @@ class HiTableBody extends React.Component {
                                 sticky,
                                 isDetail: true,
                                 fixedColumnWidth,
-                                disableContextMenu
+                                disableContextMenu,
+                                dateLocale,
+                                numberLocale
                             };
 
                             tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));

package/es/HiTable/HiTableContextMenu.js

@@ -40,7 +40,9 @@ class HiTableContextMenu extends React.Component {
 
         this.state = {
             value: '',
-            label: ''
+            label: '',
+            lookup: true,
+            exclude: true
         };
 
         this.handleContextMenuOpen = this.handleContextMenuOpen.bind(this);
@@ -51,9 +53,12 @@ class HiTableContextMenu extends React.Component {
     }
 
     handleContextMenuOpen(event) {
+        const { columns } = this.props;
         this.setState({
             value: event.detail.data.value,
-            label: event.detail.data.label
+            label: event.detail.data.label,
+            lookup: columns[event.detail.data.column].lookup !== false,
+            exclude: columns[event.detail.data.column].exclude !== false
         });
     }
 
@@ -83,8 +88,9 @@ class HiTableContextMenu extends React.Component {
 
     render() {
         const { classes, tabId, translations } = this.props;
+        const { lookup, exclude } = this.state;
 
-        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 }];
+        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 }];
 
         return React.createElement(
             ContextMenu,
@@ -94,19 +100,21 @@ class HiTableContextMenu extends React.Component {
                 onShow: this.handleContextMenuOpen
             },
             contextMenuItems.map(menuItem => {
-                return React.createElement(
-                    MenuItem,
-                    {
-                        attributes: { className: classes.contextMenuItem },
-                        key: `hitable_context_menu_${tabId}_${menuItem.id}`,
-                        onClick: menuItem.action },
-                    React.createElement(HiIconBuilder, { icon: menuItem.icon }),
-                    React.createElement(
-                        'span',
-                        { className: classes.title },
-                        menuItem.title.replace('%s', this.state.label)
-                    )
-                );
+                if (menuItem.displayed !== false) {
+                    return React.createElement(
+                        MenuItem,
+                        {
+                            attributes: { className: classes.contextMenuItem },
+                            key: `hitable_context_menu_${tabId}_${menuItem.id}`,
+                            onClick: menuItem.action },
+                        React.createElement(HiIconBuilder, { icon: menuItem.icon }),
+                        React.createElement(
+                            'span',
+                            { className: classes.title },
+                            menuItem.title.replace('%s', this.state.label)
+                        )
+                    );
+                }
             })
         );
     }
@@ -125,6 +133,10 @@ HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge le style du composant
      */
     classes: PropTypes.object,
+    /**
+     * Liste des objets colonnes utilisé pour savoir quels items du context menu sont affichés
+     */
+    columns: PropTypes.object.isRequired,
     /**
      * Fonction de callback appelée au clic sur l'item redirection
      * du menu contextuel ouvert au clic droit

package/es/HiTable/HiTableFooter.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import { TableCell, TableFooter, TableRow } from 'material-ui/Table';
 import { withStyles } from '../styles';
@@ -28,6 +29,10 @@ export const styles = theme => ({
 
 class HiTableFooter extends React.Component {
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
+
     render() {
         const { classes, nbColumnsDisplayed, view } = this.props;
 

package/es/HiTable/HiTableHead.js

@@ -1,4 +1,5 @@
 import _extends from 'babel-runtime/helpers/extends';
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -90,11 +91,11 @@ class HiTableHead extends React.Component {
     constructor(props) {
         super();
 
+        this.orderColumnsAnchorEl = null;
         this.orderColumnsButton = null;
         this.state = {
             hovered: false,
-            openedOrderColumns: false,
-            orderColumnsAnchorEl: null
+            openedOrderColumns: false
         };
 
         this.handleEvent = this.handleEvent.bind(this);
@@ -102,6 +103,10 @@ class HiTableHead extends React.Component {
         this.handleCloseOrderColumns = this.handleCloseOrderColumns.bind(this);
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
+
     handleEvent({ type }) {
         switch (type) {
             case 'mouseenter':
@@ -115,9 +120,9 @@ class HiTableHead extends React.Component {
 
     handleOpenOrderColumns() {
         this.setState({
-            openedOrderColumns: true,
-            orderColumnsAnchorEl: findDOMNode(this.orderColumnsButton)
+            openedOrderColumns: true
         });
+        this.orderColumnsAnchorEl = findDOMNode(this.orderColumnsButton);
     }
 
     handleCloseOrderColumns() {
@@ -155,7 +160,7 @@ class HiTableHead extends React.Component {
             fixedColumnWidth
         } = this.props;
 
-        const { hovered, openedOrderColumns, orderColumnsAnchorEl } = this.state;
+        const { hovered, openedOrderColumns } = this.state;
 
         let headerProps = _extends({
             className: classNames(classes.thead, {
@@ -258,7 +263,7 @@ class HiTableHead extends React.Component {
                     orderable && React.createElement(OrderColumns, {
                         isOpen: openedOrderColumns,
                         onClose: this.handleCloseOrderColumns,
-                        anchorEl: orderColumnsAnchorEl,
+                        anchorEl: this.orderColumnsAnchorEl,
                         updateOrderedColumns: onColumnsOrderUpdate,
                         columns: columns,
                         orderedColumns: orderedColumns,

package/es/HiTopBar/HiTopBar.js

@@ -158,6 +158,11 @@ class HiTopBar extends React.Component {
         this.props.onClickReturn();
     }
 
+    //TODO : Cyclic reference passed.
+    /*shouldComponentUpdate(nextProps, nextState){
+      return JSON.stringify(this.props) !== JSON.stringify(nextProps);
+    }*/
+
     render() {
         const {
             classes,

package/es/utils/HiIconBuilder.js

@@ -65,7 +65,7 @@ class HiIconBuilder extends PureComponent {
             style: _extends({
                 height: size,
                 width: size
-            }, color && { color }, backgroundColor && { backgroundColor, padding: 2, borderRadius: size }, style),
+            }, color && { color, fill: color }, backgroundColor && { backgroundColor, padding: 2, borderRadius: size }, style),
             onClick: onClick
         }, props, others));
     }
@@ -102,6 +102,10 @@ HiIconBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Style surchargé
      */
-    style: PropTypes.object
+    style: PropTypes.object,
+    /**
+     * Titre de l'icône
+     */
+    title: PropTypes.string
 } : {};
 export default HiIconBuilder;

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.23
+/** @license Material-UI v1.0.0-beta.25
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.23
+/** @license Material-UI v1.0.0-beta.25
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.25",
   "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
   "main": "./index.js",
   "repository": {
@@ -76,5 +76,10 @@
     "test": "test"
   },
   "license": "ISC",
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
   "module": "./index.es.js"
 }