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

package/HiTable/BodyCells/CellAccountNumber.js

@@ -0,0 +1,220 @@
+'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 _mdiMaterialUi = require('mdi-material-ui');
+
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+var _styles = require('../../styles');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        tooltipWrapper: {
+            textAlign: 'center'
+        },
+        coloredIndicator: {
+            backgroundColor: '#ffffff',
+            borderRadius: '50%',
+            float: 'left',
+            width: 12,
+            height: 'auto',
+            position: 'relative',
+            top: 5,
+            right: 3
+        },
+        leftEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            direction: 'rtl',
+            width: '49%'
+        },
+        rightEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre'
+        },
+        noEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            whiteSpace: 'pre',
+            maxWidth: '50%'
+        }
+    };
+};
+
+/**
+ * Cette cellule permet d'afficher un numéro de compte
+ * Le tooltip affiche les informations complémentaires (country, expiration date..)
+ */
+
+var CellAccountNumber = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellAccountNumber, _React$PureComponent);
+
+    function CellAccountNumber() {
+        (0, _classCallCheck3.default)(this, CellAccountNumber);
+        return (0, _possibleConstructorReturn3.default)(this, (CellAccountNumber.__proto__ || (0, _getPrototypeOf2.default)(CellAccountNumber)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellAccountNumber, [{
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                value = _props.value,
+                country = _props.country,
+                expirationDate = _props.expirationDate,
+                expirationDateLabel = _props.expirationDateLabel,
+                statusColor = _props.statusColor,
+                issuer = _props.issuer;
+
+
+            var dateDisplayed = new Date(expirationDate);
+
+            if (isNaN(dateDisplayed.getMonth()) || isNaN(dateDisplayed.getFullYear())) {
+                dateDisplayed = '';
+            } else {
+                dateDisplayed = (dateDisplayed.getMonth() + 1 < 10 ? '' + dateDisplayed.getMonth() + 1 : dateDisplayed.getMonth() + 1) + '/' + dateDisplayed.getFullYear();
+            }
+
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                { className: classes.tooltipWrapper },
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    issuer
+                ),
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    value || 'N/A'
+                ),
+                expirationDate && _react2.default.createElement(
+                    'div',
+                    null,
+                    statusColor ? _react2.default.createElement(_mdiMaterialUi.Circle, {
+                        style: { color: statusColor },
+                        className: classes.coloredIndicator
+                    }) : '',
+                    expirationDateLabel && expirationDateLabel + ' : ',
+                    dateDisplayed
+                ),
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    country
+                )
+            );
+
+            var start = value ? value.substr(0, Math.round(value.length / 2)) : '';
+            // reverse string for rtl display
+            var end = value ? value.substr(Math.round(value.length / 2)).split('').reverse().join('') : '';
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.rightEllipsisSpan, style: { width: '100%' } },
+                    _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
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return CellAccountNumber;
+}(_react2.default.PureComponent);
+
+CellAccountNumber.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Pays du compte
+     */
+    country: _propTypes2.default.string,
+    /**
+     * Date d'expiration
+     */
+    expirationDate: _propTypes2.default.string,
+    /**
+     * Label de la date d'expiration
+     */
+    expirationDateLabel: _propTypes2.default.string,
+    /**
+     * Banque issuer
+     */
+    issuer: _propTypes2.default.string,
+    /**
+     * Couleur représentant le statut du compte (utilisé pour caractériser la date d'expiration)
+     */
+    statusColor: _propTypes2.default.string,
+    /**
+     * True si la colonne est la première colonne et doit avoir un comportement "sticky"
+     * lors du scroll horizontal
+     */
+    sticky: _propTypes2.default.bool,
+    /**
+     * Numéro du compte
+     */
+    value: _propTypes2.default.string
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellAccountNumber' })(CellAccountNumber);

package/HiTable/BodyCells/CellAddress.js

@@ -0,0 +1,199 @@
+'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 _constants = require('../constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+var _withStyles = require('../../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _CellLayout = require('./CellLayout');
+
+var _CellLayout2 = _interopRequireDefault(_CellLayout);
+
+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 }; }
+
+// @inheritedComponent CellLayout
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        rightEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            width: '100%'
+        }
+    };
+};
+
+/**
+ * Cette cellule permet d'afficher une adresse ou le nom d'un lieu
+ * - si le nom du lieu est défini, on affiche le lieu et la ville
+ * - sinon on affiche la ville et le pays
+ * - tous les champs définis sont affichés dans le tooltip
+ */
+
+var CellAddress = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellAddress, _React$PureComponent);
+
+    function CellAddress() {
+        (0, _classCallCheck3.default)(this, CellAddress);
+        return (0, _possibleConstructorReturn3.default)(this, (CellAddress.__proto__ || (0, _getPrototypeOf2.default)(CellAddress)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellAddress, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                streetAddress = _props.streetAddress,
+                name = _props.name,
+                city = _props.city,
+                postalCode = _props.postalCode,
+                view = _props.view,
+                country = _props.country,
+                isoCountry = _props.isoCountry;
+
+
+            var label = '';
+            if (typeof name !== 'undefined') {
+                label = name + ', ';
+            }
+            if (typeof city !== 'undefined') {
+                label += city;
+            }
+            if (typeof name === 'undefined' && typeof country !== 'undefined' && view === cst.VIEWS.LARGE) {
+                if (label !== '') label += ', ';
+                label += country;
+            } else if (typeof name === 'undefined' && typeof isoCountry !== 'undefined' && view !== cst.VIEWS.LARGE) {
+                if (label !== '') label += ', ';
+                label += isoCountry;
+            }
+
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    name
+                ),
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    streetAddress
+                ),
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    _react2.default.createElement(
+                        'span',
+                        null,
+                        city + ', '
+                    ),
+                    _react2.default.createElement(
+                        'span',
+                        null,
+                        postalCode
+                    )
+                ),
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    country
+                )
+            );
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.rightEllipsisSpan },
+                    label
+                )
+            );
+        }
+    }]);
+    return CellAddress;
+}(_react2.default.PureComponent);
+
+CellAddress.defaultProps = {
+    view: 'l'
+};
+CellAddress.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Numéro et nom de la rue
+     */
+    streetAddress: _propTypes2.default.string,
+    /**
+     * Nom du lieu
+     */
+    name: _propTypes2.default.string,
+    /**
+     * Ville
+     */
+    city: _propTypes2.default.string,
+    /**
+     * Code postal
+     */
+    postalCode: _propTypes2.default.string,
+    /**
+     * Pays
+     */
+    country: _propTypes2.default.string,
+    /**
+     * Code ISO du pays
+     */
+    isoCountry: _propTypes2.default.string,
+    /**
+     * View (L/M/S)
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellAddress' })(CellAddress);

package/HiTable/BodyCells/CellCountry.js

@@ -0,0 +1,172 @@
+'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 _CellImage = require('./CellImage');
+
+var _CellImage2 = _interopRequireDefault(_CellImage);
+
+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 {
+        img: {
+            width: 24,
+            height: 'auto',
+            float: 'left'
+        },
+        label: {
+            marginLeft: 5
+        },
+        tooltipImg: {
+            width: 24,
+            height: 'auto',
+            float: 'left',
+            marginTop: 2
+        },
+        tooltipLabel: {
+            marginLeft: 5,
+            position: 'relative',
+            bottom: 2,
+            verticalAlign: 'middle'
+        },
+        wrapper: {
+            whiteSpace: 'nowrap',
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+        }
+    };
+};
+
+/**
+ * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel) pour un pays
+ *
+ * en vue large : Affiche l'image et la valeur longue (value), pas de tooltip
+ *
+ * en vue medium : Affiche la valeur longue uniquement (value), tooltip = Image + Value
+ *
+ * en vue small : Affiche la valeur courte (id),  tooltip = Image + Value
+ *
+ */
+
+var CellCountry = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellCountry, _React$PureComponent);
+
+    function CellCountry() {
+        (0, _classCallCheck3.default)(this, CellCountry);
+        return (0, _possibleConstructorReturn3.default)(this, (CellCountry.__proto__ || (0, _getPrototypeOf2.default)(CellCountry)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellCountry, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                value = _props.value,
+                isoCode = _props.isoCode,
+                view = _props.view;
+
+
+            var path = '/static/images/countries/' + isoCode.toLowerCase() + '.svg';
+
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement('img', { src: path, className: classes.tooltipImg }),
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.tooltipLabel },
+                    value
+                )
+            );
+
+            if (view === cst.VIEWS.LARGE) {
+                return _react2.default.createElement(_CellImage2.default, { view: cst.VIEWS.LARGE, value: value, path: path });
+            } else {
+                var valueElement = value;
+                if (view === cst.VIEWS.SMALL) {
+                    valueElement = isoCode.toUpperCase();
+                }
+                return _react2.default.createElement(
+                    _Tooltip2.default,
+                    { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.wrapper },
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.label },
+                            valueElement
+                        )
+                    )
+                );
+            }
+        }
+    }]);
+    return CellCountry;
+}(_react2.default.PureComponent);
+
+CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Label
+     */
+    value: _propTypes2.default.string.isRequired,
+    /**
+     * Code ISO
+     */
+    isoCode: _propTypes2.default.string.isRequired,
+    /**
+     * View (L/M/S)
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellCountry' })(CellCountry);