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

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

package/es/HiChip/HiChip.js

@@ -27,14 +27,24 @@ export const styles = theme => ({
         },
         '&$deletable': {
             paddingRight: 4
+        },
+        '&$leftIccon': {
+            paddingLeft: 4
         }
     }),
     leftNavigation: {},
     rightNavigation: {},
     deletable: {},
+    leftIccon: {},
     icon: {
         marginRight: 4
     },
+    iconClickable: {
+        cursor: 'pointer',
+        '&:hover, &:focus': {
+            color: theme.palette.business.primary.normal
+        }
+    },
     eraseIcon: {
         // Remove grey highlight
         WebkitTapHighlightColor: 'transparent',
@@ -78,15 +88,33 @@ export const styles = theme => ({
 });
 
 function HiChip(props) {
-    const { label, classes, icon, img, onPrevious, onNext, onDelete, prefix } = props;
+    const {
+        label,
+        classes,
+        icon,
+        id,
+        img,
+        onPrevious,
+        onNext,
+        onDelete,
+        prefix,
+        onIconClick,
+        titleDelete,
+        titleIcon,
+        titleImg,
+        titleNext,
+        titlePrevious
+    } = props;
 
     return React.createElement(
         'div',
         {
+            id: id,
             className: classNames(classes.root, {
                 [classes.leftNavigation]: onPrevious,
                 [classes.rightNavigation]: onNext,
-                [classes.deletable]: onDelete
+                [classes.deletable]: onDelete,
+                [classes.leftIccon]: icon
             })
         },
         prefix && React.createElement(
@@ -95,13 +123,22 @@ function HiChip(props) {
             prefix,
             ' : '
         ),
-        img && React.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 16 }),
+        img && React.createElement('img', { className: classes.badge, src: img, alt: img, title: titleImg }),
+        icon && React.createElement(HiIconBuilder, {
+            className: classNames(classes.icon, {
+                [classes.iconClickable]: onIconClick
+            }),
+            icon: icon,
+            size: 16,
+            onClick: onIconClick,
+            titleAccess: titleIcon
+        }),
         onPrevious && React.createElement(HiIconBuilder, {
             className: classNames(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 16
+            size: 16,
+            titleAccess: titlePrevious
         }),
         React.createElement(
             'span',
@@ -112,13 +149,15 @@ function HiChip(props) {
             className: classNames(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 16
+            size: 16,
+            titleAccess: titleNext
         }),
         onDelete && React.createElement(HiIconBuilder, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 16
+            size: 16,
+            titleAccess: titleDelete
         })
     );
 }
@@ -132,6 +171,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Icone affiché à gauche
      */
     icon: PropTypes.string,
+    /**
+     * Identifiant de l'élément
+     */
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /**
      * Ajoute une image à gauche du Chip
      */
@@ -144,6 +187,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au clic sur l'icon close si cancelable = true
      */
     onDelete: PropTypes.func,
+    /**
+     * Fonction de callback au clic sur l'icon à gauche
+     */
+    onIconClick: PropTypes.func,
     /**
      * Fonction de callback au clic sur l'icon next
      */
@@ -151,7 +198,31 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Fonction de callback au clic sur l'icon previous
      */
-    onPrevious: PropTypes.func
+    onPrevious: PropTypes.func,
+    /**
+     * Préfixe dans le HiChip
+     */
+    prefix: PropTypes.string,
+    /**
+     * Titre de l'icône supprimer
+     */
+    titleDelete: PropTypes.string,
+    /**
+     * Titre de l'icône
+     */
+    titleIcon: PropTypes.string,
+    /**
+     * Titre de la balise img
+     */
+    titleImg: PropTypes.string,
+    /**
+     * Titre de la navigation suivante
+     */
+    titleNext: PropTypes.string,
+    /**
+     * Titre de la navigation précédente
+     */
+    titlePrevious: PropTypes.string
 } : {};
 
 export default withStyles(styles, { name: 'HmuiHiChip' })(HiChip);

package/es/HiChip/HiChipSwitch.js

@@ -138,6 +138,7 @@ class HiChipSwitch extends React.PureComponent {
 
     render() {
         const {
+            id,
             label,
             classes,
             activeIcon,
@@ -163,6 +164,7 @@ class HiChipSwitch extends React.PureComponent {
         return React.createElement(
             'div',
             {
+                id: id,
                 className: classNames(classes.root, {
                     [classes.active]: !!active,
                     [classes.inactive]: !active
@@ -223,6 +225,10 @@ HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: PropTypes.object,
+    /**
+     * Identifiant de l'élément
+     */
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /**
      * Label qu'affiche le ChipFilter
      */

package/es/HiDatePicker/HiDatePicker.js

@@ -40,6 +40,7 @@ class HiDatePicker extends React.Component {
         this.renderMonthPickerOverlay = this.renderMonthPickerOverlay.bind(this);
         this.renderTimePickerOverlay = this.renderTimePickerOverlay.bind(this);
         this.renderYearPickerOverlay = this.renderYearPickerOverlay.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
     }
 
     componentWillUnmount() {
@@ -51,27 +52,33 @@ class HiDatePicker extends React.Component {
         this.props.onReset();
     }
 
+    handleInputChange(event) {
+        this.props.onChange(event.target.value);
+    }
+
     handleDayChange(day, modifiers) {
-        if (modifiers.selected) {
-            // Deselect day
-            this.props.onChange(undefined);
-        } else {
-            // Keep Time if set
-            if (this.props.enableTime && day !== undefined) {
-                if (this.props.value) {
-                    day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
-                } else {
-                    day.setHours(0, 0);
+        if (day) {
+            if (modifiers.selected) {
+                // Deselect day
+                this.props.onChange(undefined);
+            } else {
+                // Keep Time if set
+                if (this.props.enableTime && day !== undefined) {
+                    if (this.props.value) {
+                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                    } else {
+                        day.setHours(0, 0);
+                    }
                 }
+                this.props.onChange(day);
+            }
+            if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
+                // Hide overlay & remove focus on input
+                document.activeElement.blur();
+            } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
+                // Open Time panel after date selection
+                this.openPanel('time');
             }
-            this.props.onChange(day);
-        }
-        if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
-            // Hide overlay & remove focus on input
-            document.activeElement.blur();
-        } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
-            // Open Time panel after date selection
-            this.openPanel('time');
         }
     }
 
@@ -205,7 +212,7 @@ class HiDatePicker extends React.Component {
             captionElement: this.renderCaption,
             classNames: classes,
             disabledDays: effectiveDisabledDays,
-            selectedDays: value,
+            selectedDays: typeof value === 'object' ? value : undefined,
             locale,
             firstDayOfWeek: 1,
             fromMonth: minimumDate,
@@ -221,7 +228,9 @@ class HiDatePicker extends React.Component {
             onReset: this.handleReset
         }, {
             onBlur: this.handleBlur
-        }, props);
+        }, props, {
+            onChange: this.handleInputChange
+        });
 
         return React.createElement(
             'div',
@@ -314,6 +323,6 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date sélectionnée
      */
-    value: PropTypes.instanceOf(Date)
+    value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])
 } : {};
 export default withStyles(styles, { name: 'HmuiHiDatePicker' })(HiDatePicker);