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

package/HiTable/HiTableBody.js

@@ -5,6 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _values = require('babel-runtime/core-js/object/values');
+
+var _values2 = _interopRequireDefault(_values);
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
@@ -51,6 +59,12 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+require('moment/locale/fr');
+
 var _styles = require('../styles');
 
 var _BodyRow = require('./BodyRow');
@@ -69,6 +83,10 @@ var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
 
+var _lodash = require('lodash');
+
+var _ = _interopRequireWildcard(_lodash);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -132,7 +150,7 @@ var HiTableBody = function (_React$Component) {
     function HiTableBody(props) {
         (0, _classCallCheck3.default)(this, HiTableBody);
 
-        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableBody.__proto__ || (0, _getPrototypeOf2.default)(HiTableBody)).call(this));
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableBody.__proto__ || (0, _getPrototypeOf2.default)(HiTableBody)).call(this, props));
 
         _this.buildIndicator = function (row) {
             var _this$props = _this.props,
@@ -165,17 +183,52 @@ var HiTableBody = function (_React$Component) {
 
         _this.state = {
             openedParentRowId: null,
-            openedDetailsRowIdList: []
+            openedDetailsRowIdList: [],
+            dataSource: props.dataSource,
+            groupByIds: {}
         };
 
+        if (props.groupBy && props.dataSource) {
+            var groupByIds = {};
+            props.dataSource.map(function (row) {
+                var 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;
+        }*/
         return _this;
     }
 
     (0, _createClass3.default)(HiTableBody, [{
+        key: 'deepCompare',
+        value: function deepCompare(object, base) {
+            var that = this;
+            return _.transform(object, function (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);
+        }*/
+
+    }, {
         key: 'componentDidMount',
         value: function componentDidMount() {
             this.positionStickyRowNextButton();
@@ -185,6 +238,9 @@ var HiTableBody = function (_React$Component) {
         value: function componentDidUpdate(prevProps, prevState, prevContext) {
             this.positionStickyRowNextButton();
         }
+    }, {
+        key: 'setOpenedParentRowId',
+
 
         /**
          * Définit l'id de la ligne parente "ouverte" ou null
@@ -193,9 +249,6 @@ var HiTableBody = function (_React$Component) {
          *
          * @param row
          */
-
-    }, {
-        key: 'setOpenedParentRowId',
         value: function setOpenedParentRowId(row) {
             this.setState(function (prevState) {
                 return {
@@ -225,7 +278,7 @@ var HiTableBody = function (_React$Component) {
                             }
                             button.parentElement.style.top = '4px';
                         }
-                        var label = button.previousSibling.previousSibling;
+                        var label = button.previousSibling;
                         button.style.left = tableContainer.offsetWidth - label.offsetWidth - 48 - 160 + 'px';
                     }
                 });
@@ -272,7 +325,6 @@ var HiTableBody = function (_React$Component) {
                 tabId = _props.tabId,
                 columns = _props.columns,
                 orderedColumns = _props.orderedColumns,
-                dataSource = _props.dataSource,
                 onRowClick = _props.onRowClick,
                 selectable = _props.selectable,
                 onSelect = _props.onSelect,
@@ -287,7 +339,6 @@ var HiTableBody = function (_React$Component) {
                 translations = _props.translations,
                 dateLocale = _props.dateLocale,
                 numberLocale = _props.numberLocale,
-                groupByIds = _props.groupByIds,
                 sortedColumnId = _props.sortedColumnId,
                 lookupColumns = _props.lookupColumns,
                 loading = _props.loading,
@@ -296,7 +347,9 @@ var HiTableBody = function (_React$Component) {
                 detailRowsOptions = _props.detailRowsOptions;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
-                openedDetailsRowIdList = _state.openedDetailsRowIdList;
+                openedDetailsRowIdList = _state.openedDetailsRowIdList,
+                groupByIds = _state.groupByIds,
+                dataSource = _state.dataSource;
 
 
             var nbColumnsDisplayed = 0;
@@ -315,31 +368,21 @@ var HiTableBody = function (_React$Component) {
                 // Gestion du sticky group by
                 if (typeof groupBy !== 'undefined' && groupBy === sortedColumnId) {
                     var currentGroupByValue = row.datas[groupBy].value;
-                    var 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;
-                            var label = stickyRowValue;
-                            if (date instanceof Date && isFinite(date)) {
-                                label = new Date(label);
-                                var options = {
-                                    year: 'numeric',
-                                    month: 'long',
-                                    weekday: 'long',
-                                    day: 'numeric'
-                                };
-                                label = label.toLocaleString(dateLocale, options);
-                                label = label.charAt(0).toUpperCase() + label.substr(1);
-                            }
+
+                        _moment2.default.locale(dateLocale);
+                        var date = (0, _moment2.default)(currentGroupByValue);
+                        var label = date.format('dddd D MMMM YYYY');
+
+                        if (index === 0 || label !== stickyRowValue) {
+
+                            stickyRowValue = label;
 
                             tableRows.push(_react2.default.createElement(_HiStickyRow2.default, {
                                 key: 'sticky_row_' + row.rowId,
                                 dense: dense,
-                                value: stickyRowValue,
                                 label: label,
                                 length: groupByIds[currentGroupByValue].length,
                                 colSpan: nbColumnsDisplayed,
@@ -424,7 +467,9 @@ var HiTableBody = function (_React$Component) {
                                     sticky: sticky,
                                     isDetail: true,
                                     fixedColumnWidth: fixedColumnWidth,
-                                    disableContextMenu: disableContextMenu
+                                    disableContextMenu: disableContextMenu,
+                                    dateLocale: dateLocale,
+                                    numberLocale: numberLocale
                                 };
 
                                 tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
@@ -453,6 +498,31 @@ var HiTableBody = function (_React$Component) {
                 })
             );
         }
+    }], [{
+        key: 'getDerivedStateFromProps',
+        value: function getDerivedStateFromProps(props, state) {
+            var nextState = {};
+            if (props.groupBy && props.dataSource && props.dataSource.length > 0) {
+                if ((0, _stringify2.default)(props.dataSource) !== (0, _stringify2.default)(state.dataSource)) {
+                    var groupByIds = {};
+                    props.dataSource.map(function (row) {
+                        var value = row.datas[props.groupBy].value;
+                        if (!groupByIds.hasOwnProperty(value)) {
+                            groupByIds[value] = [];
+                        }
+                        groupByIds[value].push(row.datas);
+                    });
+                    nextState.groupByIds = groupByIds;
+                }
+            }
+            if ((0, _stringify2.default)(props.dataSource) !== (0, _stringify2.default)(state.dataSource)) {
+                nextState.dataSource = props.dataSource;
+            }
+            if ((0, _values2.default)(nextState).length > 0) {
+                return nextState;
+            }
+            return null;
+        }
     }]);
     return HiTableBody;
 }(_react2.default.Component);

package/HiTable/HiTableContextMenu.js

@@ -88,7 +88,9 @@ var HiTableContextMenu = function (_React$Component) {
 
         _this.state = {
             value: '',
-            label: ''
+            label: '',
+            lookup: true,
+            exclude: true
         };
 
         _this.handleContextMenuOpen = _this.handleContextMenuOpen.bind(_this);
@@ -102,9 +104,13 @@ var HiTableContextMenu = function (_React$Component) {
     (0, _createClass3.default)(HiTableContextMenu, [{
         key: 'handleContextMenuOpen',
         value: function handleContextMenuOpen(event) {
+            var columns = this.props.columns;
+
             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
             });
         }
     }, {
@@ -144,9 +150,12 @@ var HiTableContextMenu = function (_React$Component) {
                 classes = _props.classes,
                 tabId = _props.tabId,
                 translations = _props.translations;
+            var _state = this.state,
+                lookup = _state.lookup,
+                exclude = _state.exclude;
 
 
-            var 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 }];
+            var 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 _react2.default.createElement(
                 _reactContextmenu.ContextMenu,
@@ -156,19 +165,21 @@ var HiTableContextMenu = function (_React$Component) {
                     onShow: this.handleContextMenuOpen
                 },
                 contextMenuItems.map(function (menuItem) {
-                    return _react2.default.createElement(
-                        _reactContextmenu.MenuItem,
-                        {
-                            attributes: { className: classes.contextMenuItem },
-                            key: 'hitable_context_menu_' + tabId + '_' + menuItem.id,
-                            onClick: menuItem.action },
-                        _react2.default.createElement(_HiIconBuilder2.default, { icon: menuItem.icon }),
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.title },
-                            menuItem.title.replace('%s', _this2.state.label)
-                        )
-                    );
+                    if (menuItem.displayed !== false) {
+                        return _react2.default.createElement(
+                            _reactContextmenu.MenuItem,
+                            {
+                                attributes: { className: classes.contextMenuItem },
+                                key: 'hitable_context_menu_' + tabId + '_' + menuItem.id,
+                                onClick: menuItem.action },
+                            _react2.default.createElement(_HiIconBuilder2.default, { icon: menuItem.icon }),
+                            _react2.default.createElement(
+                                'span',
+                                { className: classes.title },
+                                menuItem.title.replace('%s', _this2.state.label)
+                            )
+                        );
+                    }
                 })
             );
         }
@@ -189,6 +200,10 @@ HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge le style du composant
      */
     classes: _propTypes2.default.object,
+    /**
+     * Liste des objets colonnes utilisé pour savoir quels items du context menu sont affichés
+     */
+    columns: _propTypes2.default.object.isRequired,
     /**
      * Fonction de callback appelée au clic sur l'item redirection
      * du menu contextuel ouvert au clic droit

package/HiTable/HiTableFooter.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -78,6 +82,11 @@ var HiTableFooter = function (_React$Component) {
     }
 
     (0, _createClass3.default)(HiTableFooter, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
+    }, {
         key: 'render',
         value: function render() {
             var _props = this.props,

package/HiTable/HiTableHead.js

@@ -13,6 +13,10 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -163,13 +167,13 @@ var HiTableHead = function (_React$Component) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableHead.__proto__ || (0, _getPrototypeOf2.default)(HiTableHead)).call(this));
 
+        _this.orderColumnsAnchorEl = null;
         _this.orderColumnsButton = null;
 
 
         _this.state = {
             hovered: false,
-            openedOrderColumns: false,
-            orderColumnsAnchorEl: null
+            openedOrderColumns: false
         };
 
         _this.handleEvent = _this.handleEvent.bind(_this);
@@ -179,6 +183,11 @@ var HiTableHead = function (_React$Component) {
     }
 
     (0, _createClass3.default)(HiTableHead, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
+    }, {
         key: 'handleEvent',
         value: function handleEvent(_ref) {
             var type = _ref.type;
@@ -196,9 +205,9 @@ var HiTableHead = function (_React$Component) {
         key: 'handleOpenOrderColumns',
         value: function handleOpenOrderColumns() {
             this.setState({
-                openedOrderColumns: true,
-                orderColumnsAnchorEl: (0, _reactDom.findDOMNode)(this.orderColumnsButton)
+                openedOrderColumns: true
             });
+            this.orderColumnsAnchorEl = (0, _reactDom.findDOMNode)(this.orderColumnsButton);
         }
     }, {
         key: 'handleCloseOrderColumns',
@@ -240,8 +249,7 @@ var HiTableHead = function (_React$Component) {
                 fixedColumnWidth = _props.fixedColumnWidth;
             var _state = this.state,
                 hovered = _state.hovered,
-                openedOrderColumns = _state.openedOrderColumns,
-                orderColumnsAnchorEl = _state.orderColumnsAnchorEl;
+                openedOrderColumns = _state.openedOrderColumns;
 
 
             var headerProps = (0, _extends3.default)({
@@ -343,7 +351,7 @@ var HiTableHead = function (_React$Component) {
                         orderable && _react2.default.createElement(_OrderColumns2.default, {
                             isOpen: openedOrderColumns,
                             onClose: this.handleCloseOrderColumns,
-                            anchorEl: orderColumnsAnchorEl,
+                            anchorEl: this.orderColumnsAnchorEl,
                             updateOrderedColumns: onColumnsOrderUpdate,
                             columns: columns,
                             orderedColumns: orderedColumns,

package/HiTopBar/HiTopBar.js

@@ -245,6 +245,12 @@ var HiTopBar = function (_React$Component) {
         value: function handleClickMenu() {
             this.props.onClickReturn();
         }
+
+        //TODO : Cyclic reference passed.
+        /*shouldComponentUpdate(nextProps, nextState){
+          return JSON.stringify(this.props) !== JSON.stringify(nextProps);
+        }*/
+
     }, {
         key: 'render',
         value: function render() {

package/README.md

@@ -5,12 +5,14 @@ Voici la documentation du site HiPay Material-UI.
 Avant de commencer, il faut vous familiariser avec REACT :
 - https://reactjs.org/
 - https://reactjs.org/docs/optimizing-performance.html
+
 Et connaitres les [best practices](#best-practices)
 
 
 ## Lancer le projet
 
 #### Via docker
+
 Il faut que sur votre poste soit installés
 - [Docker](https://www.docker.com/community-edition) (minimum version 17)
 - [Docker Compose](#https://docs.docker.com/compose/install/) (minimum version 1.13.0)
@@ -27,6 +29,7 @@ Le site est dispo à cette URL:
 [http://localhost:3222](http://localhost:3222)
 
 #### En local
+
 Il faut que sur votre poste soit installés
 - [node](https://nodejs.org/fr/) (minimum version LTS 8.9.4)
 - [npm](https://www.npmjs.com/) (minimum version 5.6.0)
@@ -115,10 +118,50 @@ git flow feature start PSYCHE-XXX
 - Les [tests unitaires](#tests) doivent passer
 - La [génération des apis](#generation-des-apis) aussi
 - Le code doit être bien formatter : [ESLint - Prettier](#esLint-prettier)
-- commit + push
+- Commit - suivant les conventions de rédaction des messages de commit
+- Push
 - Faire la demande de merge request sur la develop
 - La revue se fera par un membre de l'équipe PSYCHE
 
+##### Conventional Changelog
+
+(optionel) installer [commitizen](https://github.com/commitizen/cz-cli) pour s'assurer de commiter selon la convention
+```sh
+npm install commitizen -g
+```
+
+
+Voici un squelette d’exemple de message de commit conventionnel :
+```
+<type de tâche>(<périmètre>): message court
+
+Description complémentaire/complète
+
+Référence/action sur un ticket définissant cette tâche
+ ```
+
+ On facilite ainsi la lecture du log d’une part, la génération automatique du changelog (ou release notes) d’autre part
+
+Types de tâche:
+- <b>fix</b>  : commit d'une correction de bug. Se traduit en <b>PATCH</b> dans le changelog
+- <b>feat</b> : commit d'une nouvelle feature. Se traduit en <b>MINOR</b> dans le changelog
+- <b>test</b> : commit d'un ajout ou d'une maj de tests
+- <b>docs</b> : commit d'un ajout ou d'une maj de la documentation OU de l'app de démonstration
+- <b>perf</b> : commit concernant l'amélioration des performances
+
+<b>BREAKING CHANGE</b> : si un commit introduit un BREAKING CHANGE, on doit ajouter le tag BREAKING CHANGE dans le corps du commit. Ce commit peut être de n'importe quel type mais il est préférable qu'il soit lié à une feature. Se traduit en <b>MAJOR</b> dans le changelog
+
+Périmètre (optionel): nom du composant, type de tests, page de la doc
+
+ Exemple:
+ ```
+ feat(HiTable): add children rows management
+
+Handle children rows as subtable based on the same columns as parents.
+
+PSYCHE-XX
+ ```
+
 ## Génération des apis
 ```sh
 npm run docs:api
@@ -178,12 +221,17 @@ Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@hi
 
 #### Publier une nouvelle version
 
-1. Changer la version dans package.json
-2. Build
+Avoir installé [conventional-changelog-cli](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-cli) pour générer le CHANGELOG à partir des commits git.
 ```sh
-npm run build
+npm install -g conventional-changelog-cli
 ```
-3. Publish
+
+1. Changer la version dans package.json
+2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
+3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
+4. Build : ```npm run build```
+5. Publish : 
+
 ```sh
 cd build
 npm login
@@ -192,7 +240,24 @@ npm login
 npm publish
 ```
 
-# Si ERR d'authenitifcation
+#### [Semantic Versioning](https://semver.org/)
+
+Une version MAJOR.MINOR.PATCH, correspond a:
+
+- MAJOR version introduisant des évolutions non retro-compatibles (API changes...),
+- MINOR version introduisant des évolutions retro-compatibles, la sortie des versions mineures est basé sur les sprints de la tribu PSYCHE
+- PATCH version corrigeant des bugs
+Des tags additionels peuvent être ajouter selon le contexte (ex: 1.0.0-beta.24).
+
+En production, chaque releases (MAJOR, MINOR & PATCH) doit faire l'objet d'une communication interne aux tribus utilisatrices.
+
+Les projets peuvent se baser sur une version MINOR: ```^2.5.0```, ce qui signifient "compatible avec la version 2.5.0".
+
+Ainsi les PATCH seront automatiquement pris en compte.
+L'intégration d'une MINOR doit faire l'objet d'une recette (voir HI-CHANGELOG.md).
+Le passage à une autre MAJOR doit faire l'objet d'une recette (voir HI-CHANGELOG.md BREAKING CHANGE).
+
+# Si ERR d'authentification
 npm adduser
 admin
 admin123