@hipay/hipay-material-ui 1.0.0-beta.1

package/HiTable/BodyCells/CellSentinel.js

@@ -0,0 +1,213 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+var _HiColoredLabel = require('../../HiColoredLabel');
+
+var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
+
+var _styles = require('../../styles');
+
+var _constants = require('../constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+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 }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        smartDecision: {
+            display: 'inline-block',
+            minWidth: 18
+        },
+        label: {
+            marginLeft: 2
+        }
+    };
+};
+
+/**
+ * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
+ */
+
+var CellSentinel = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellSentinel, _React$PureComponent);
+
+    function CellSentinel(props) {
+        (0, _classCallCheck3.default)(this, CellSentinel);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (CellSentinel.__proto__ || (0, _getPrototypeOf2.default)(CellSentinel)).call(this));
+
+        _this.getColorFromFraudResult = _this.getColorFromFraudResult.bind(_this);
+        return _this;
+    }
+
+    /**
+     * Get Theme color from fraudResult
+     * @param fraudResult
+     * @returns {*}
+     */
+
+
+    (0, _createClass3.default)(CellSentinel, [{
+        key: 'getColorFromFraudResult',
+        value: function getColorFromFraudResult(fraudResult) {
+            var color = void 0;
+            switch (fraudResult.toUpperCase()) {
+                case cst.FRAUD_RESULT_ACCEPTED:
+                    color = this.props.theme.palette.positive.normal;
+                    break;
+                case cst.FRAUD_RESULT_BLOCKED:
+                    color = this.props.theme.palette.negative.normal;
+                    break;
+                case cst.FRAUD_RESULT_CHALLENGED:
+                    color = this.props.theme.palette.middle.normal;
+                    break;
+                case cst.FRAUD_RESULT_PENDING:
+                    color = this.props.theme.palette.business.primary.normal;
+                    break;
+                case cst.FRAUD_RESULT_FORCE_AUTHENTICATE:
+                    color = this.props.theme.palette.neutral.normal;
+                    break;
+                case cst.FRAUD_RESULT_ASK_AUTHENTICATE:
+                    color = this.props.theme.palette.neutral.normal;
+                    break;
+                default:
+                    color = this.props.theme.palette.neutral.normal;
+                    break;
+            }
+            return color;
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                score = _props.score,
+                fraudResult = _props.fraudResult,
+                automaticFraudReviewResult = _props.automaticFraudReviewResult,
+                pendingManualAction = _props.pendingManualAction,
+                smartDecision = _props.smartDecision;
+
+
+            var scoreLabel = score > 0 ? '+' + score : '' + score;
+
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    scoreLabel
+                ),
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    fraudResult
+                ),
+                !!smartDecision && automaticFraudReviewResult && _react2.default.createElement(
+                    'div',
+                    null,
+                    'SD: ',
+                    automaticFraudReviewResult
+                )
+            );
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    _react2.default.createElement(_HiColoredLabel2.default, {
+                        label: scoreLabel,
+                        color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
+                        classes: { root: classes.label },
+                        active: pendingManualAction
+                    }),
+                    _react2.default.createElement(_HiColoredLabel2.default, {
+                        label: fraudResult.toUpperCase().substr(0, 1),
+                        color: this.getColorFromFraudResult(fraudResult),
+                        classes: { root: classes.label },
+                        active: pendingManualAction
+                    }),
+                    !!smartDecision && _react2.default.createElement(
+                        'div',
+                        { className: classes.smartDecision },
+                        automaticFraudReviewResult && _react2.default.createElement(_HiColoredLabel2.default, {
+                            label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
+                            color: this.getColorFromFraudResult(automaticFraudReviewResult),
+                            active: pendingManualAction
+                        })
+                    )
+                )
+            );
+        }
+    }]);
+    return CellSentinel;
+}(_react2.default.PureComponent);
+
+CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
+     */
+    automaticFraudReviewResult: _propTypes2.default.string,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Résultat de la fraude
+     */
+    fraudResult: _propTypes2.default.string.isRequired,
+    /**
+     * Signal qu'il attend une réponse manuelle
+     */
+    pendingManualAction: _propTypes2.default.bool,
+    /**
+     * Score de la fraude
+     */
+    score: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired,
+    /**
+     * Active le SmartDecision (ajoute l'indicateur ou blanc)
+     */
+    smartDecision: _propTypes2.default.bool
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellSentinel' })(CellSentinel);

package/HiTable/BodyCells/CellStatus.js

@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _HiColoredLabel = require('../../HiColoredLabel');
+
+var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
+
+var _HiPins = require('../../HiPins');
+
+var _HiPins2 = _interopRequireDefault(_HiPins);
+
+var _styles = require('../../styles');
+
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        labelDiv: {
+            display: 'inline-flex',
+            alignItems: 'baseline',
+            maxWidth: 'calc(100% - 36px)'
+        }
+    };
+};
+
+var CellStatus = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellStatus, _React$PureComponent);
+
+    function CellStatus() {
+        (0, _classCallCheck3.default)(this, CellStatus);
+        return (0, _possibleConstructorReturn3.default)(this, (CellStatus.__proto__ || (0, _getPrototypeOf2.default)(CellStatus)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellStatus, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                theme = _props.theme,
+                nbOperations = _props.nbOperations,
+                value = _props.value,
+                code = _props.code,
+                onOpenDetails = _props.onOpenDetails;
+
+
+            var color = typeof theme.palette.status[code] !== 'undefined' ? theme.palette.status[code] : theme.palette.neutral.normal;
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    nbOperations > 0 ? _react2.default.createElement(
+                        'div',
+                        { className: classes.labelDiv },
+                        _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color }),
+                        _react2.default.createElement(
+                            _HiPins2.default,
+                            { color: color, onClick: onOpenDetails },
+                            nbOperations
+                        )
+                    ) : _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
+                )
+            );
+        }
+    }]);
+    return CellStatus;
+}(_react2.default.PureComponent);
+
+CellStatus.defaultProps = {
+    nbOperations: 0
+};
+CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * [OPTIONAL] Useful to modify the theme used by components.
+     */
+    theme: _propTypes2.default.object,
+    /**
+     * Nombre d'opérations financières
+     */
+    nbOperations: _propTypes2.default.number.isRequired,
+    /**
+     * Statut courant de la transaction
+     */
+    value: _propTypes2.default.string.isRequired,
+    /**
+     * Code du statut courant de la transaction (détermine la couleur du label)
+     */
+    code: _propTypes2.default.number.isRequired,
+    /**
+     * Fonction de callback appelée pour ouvrir les lignes de détails
+     */
+    onOpenDetails: _propTypes2.default.func
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellStatus' })(CellStatus);

package/HiTable/BodyCells/CellText.js

@@ -0,0 +1,267 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
+
+var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+var _withStyles = require('../../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _constants = require('../constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+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 }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        leftEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            direction: 'rtl'
+        },
+        rightEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre'
+        },
+        noEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            whiteSpace: 'pre'
+        }
+    };
+};
+
+var CellText = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellText, _React$PureComponent);
+
+    function CellText(props) {
+        (0, _classCallCheck3.default)(this, CellText);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (CellText.__proto__ || (0, _getPrototypeOf2.default)(CellText)).call(this, props));
+
+        _this.cellText = null;
+
+
+        _this.buildEllipsis = _this.buildEllipsis.bind(_this);
+        return _this;
+    }
+
+    /**
+     * TODO - Ellipsis (middle, after-first-word)
+     */
+
+
+    (0, _createClass3.default)(CellText, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.buildEllipsis();
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate() {
+            this.buildEllipsis();
+        }
+    }, {
+        key: 'buildEllipsis',
+        value: function buildEllipsis() {
+            /**
+             * Calcul l'espace disponible dans la cellule en plus du premier mot
+             * si il reste de l'espace, définit la largeur du span pour le reste du texte
+             */
+            if (this.props.ellipsis === cst.ELLIPSIS_AFTER_FIRST_WORD) {
+                if (this.cellText !== null) {
+                    var _cellText$getElements = this.cellText.getElementsByTagName('span'),
+                        _cellText$getElements2 = (0, _slicedToArray3.default)(_cellText$getElements, 2),
+                        startSpan = _cellText$getElements2[0],
+                        endSpan = _cellText$getElements2[1];
+
+                    if (typeof startSpan !== 'undefined' && typeof endSpan !== 'undefined') {
+                        var availableEndSpace = this.cellText.offsetWidth - startSpan.offsetWidth - 2;
+                        if (availableEndSpace > 0) {
+                            endSpan.style.width = availableEndSpace + 'px';
+                        } else {
+                            startSpan.style.width = '100%';
+                        }
+                    }
+                }
+            }
+
+            /**
+             * Calcul l'espace pris par les 2 spans (les 2 moitiés du texte),
+             * si ils dépassent la largeur de la cellule, diminue d'autant et proportionnellement chaque span
+             * ajoute l'ellipse à gauche de la deuxième moitié du texte.
+             */
+            if (this.props.ellipsis === cst.ELLIPSIS_MIDDLE) {
+                if (this.cellText !== null) {
+                    var _cellText$getElements3 = this.cellText.getElementsByTagName('span'),
+                        _cellText$getElements4 = (0, _slicedToArray3.default)(_cellText$getElements3, 2),
+                        _startSpan = _cellText$getElements4[0],
+                        _endSpan = _cellText$getElements4[1];
+
+                    if (typeof _startSpan !== 'undefined' && typeof _endSpan !== 'undefined') {
+                        var _availableEndSpace = this.cellText.offsetWidth - _startSpan.offsetWidth - _endSpan.offsetWidth;
+                        if (_availableEndSpace < 0) {
+                            _startSpan.style.width = '50%';
+                            _endSpan.style.width = '49%';
+                        } else {
+                            _startSpan.style.width = 'initial';
+                            _endSpan.style.width = 'initial';
+                        }
+                    }
+                }
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                value = _props.value,
+                ellipsis = _props.ellipsis;
+
+
+            var start = void 0,
+                end = void 0,
+                valueElement = '';
+
+            var valueString = value.toString();
+
+            switch (ellipsis) {
+                case cst.ELLIPSIS_AFTER_FIRST_WORD:
+                    // Split value in 2 strings around first whitespace
+                    start = valueString.substr(0, valueString.indexOf(' '));
+                    end = valueString.substr(valueString.indexOf(' ') + 1);
+                    if (start === '') {
+                        start = end;
+                        end = '';
+                    }
+                    valueElement = _react2.default.createElement(
+                        'div',
+                        { ref: function ref(div) {
+                                _this2.cellText = div;
+                            } },
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.rightEllipsisSpan },
+                            start + ' '
+                        ),
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.leftEllipsisSpan },
+                            end
+                        )
+                    );
+                    break;
+
+                case cst.ELLIPSIS_MIDDLE:
+                    // Split value in 2 strings
+                    start = valueString.substr(0, Math.round(valueString.length / 2));
+                    end = valueString.substr(Math.round(valueString.length / 2));
+                    valueElement = _react2.default.createElement(
+                        'div',
+                        { ref: function ref(div) {
+                                _this2.cellText = div;
+                            } },
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.noEllipsisSpan },
+                            start
+                        ),
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.leftEllipsisSpan },
+                            end
+                        )
+                    );
+                    break;
+
+                case cst.ELLIPSIS_LEFT:
+                    valueElement = _react2.default.createElement(
+                        'div',
+                        { className: classes.leftEllipsisSpan, style: { width: '100%' } },
+                        valueString
+                    );
+                    break;
+
+                case cst.ELLIPSIS_RIGHT:
+                default:
+                    valueElement = _react2.default.createElement(
+                        'div',
+                        { className: classes.rightEllipsisSpan, style: { width: '100%' } },
+                        valueString
+                    );
+                    break;
+            }
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+                valueElement
+            );
+        }
+    }]);
+    return CellText;
+}(_react2.default.PureComponent);
+
+CellText.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Valeur à afficher
+     */
+    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired,
+    /**
+     * Ellipsis
+     */
+    ellipsis: _propTypes2.default.oneOf(['left', 'right', 'middle', 'name', 'after-first-word'])
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellText' })(CellText);