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

package/HiTable/BodyCells/CellDate.js

@@ -0,0 +1,177 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _withStyles = require('../../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+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 {
+        rightEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            width: '100%'
+        }
+    };
+};
+
+/**
+ * Cette cellule permet d'afficher une date en fonction de la locale de l'utilisateur
+ */
+
+var CellDate = function (_React$Component) {
+    (0, _inherits3.default)(CellDate, _React$Component);
+
+    function CellDate() {
+        (0, _classCallCheck3.default)(this, CellDate);
+        return (0, _possibleConstructorReturn3.default)(this, (CellDate.__proto__ || (0, _getPrototypeOf2.default)(CellDate)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellDate, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                displayTime = _props.displayTime,
+                value = _props.value,
+                locale = _props.locale,
+                view = _props.view;
+
+
+            var date = new Date(value);
+
+            var options = (0, _extends3.default)({
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: '2-digit'
+            }, displayTime && {
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+            var titleValue = date.toLocaleString(locale, options);
+            var displayedValue = titleValue;
+            if (view === cst.VIEWS.SMALL) {
+                options = (0, _extends3.default)({
+                    year: '2-digit',
+                    month: '2-digit',
+                    day: '2-digit'
+                }, displayTime && {
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+                displayedValue = date.toLocaleString(locale, options);
+            } else if (view === cst.VIEWS.MEDIUM) {
+                options = (0, _extends3.default)({
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit'
+                }, displayTime && {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit'
+                });
+                displayedValue = date.toLocaleString(locale, options);
+            }
+
+            if (view === cst.VIEWS.LARGE) {
+                return _react2.default.createElement(
+                    'div',
+                    { className: classes.rightEllipsisSpan },
+                    displayedValue
+                );
+            }
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.rightEllipsisSpan },
+                    displayedValue
+                )
+            );
+        }
+    }]);
+    return CellDate;
+}(_react2.default.Component);
+
+CellDate.defaultProps = {
+    displayTime: false,
+    locale: 'en-EN',
+    view: 'l'
+};
+CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Affiche l'heure
+     */
+    displayTime: _propTypes2.default.bool,
+    /**
+     * Locale BCP 47
+     */
+    locale: _propTypes2.default.string,
+    /**
+     * Volume/Amount
+     */
+    value: _propTypes2.default.string.isRequired,
+    /**
+     * View (L/M/S)
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellDate' })(CellDate);

package/HiTable/BodyCells/CellIcon.js

@@ -0,0 +1,148 @@
+'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 _withStyles = require('../../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _constants = require('../constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+var _HiIconBuilder = require('../../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+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 {
+        icon: {
+            float: 'left'
+        },
+        label: {
+            margin: 5
+        },
+        wrapper: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        }
+    };
+};
+
+/**
+ * Cette cellule permet d'afficher une icône et un label (optionnel).
+ * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
+ */
+
+var CellIcon = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellIcon, _React$PureComponent);
+
+    function CellIcon() {
+        (0, _classCallCheck3.default)(this, CellIcon);
+        return (0, _possibleConstructorReturn3.default)(this, (CellIcon.__proto__ || (0, _getPrototypeOf2.default)(CellIcon)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellIcon, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                icon = _props.icon,
+                value = _props.value,
+                view = _props.view;
+
+
+            var iconElement = _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 18 });
+
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                null,
+                iconElement,
+                _react2.default.createElement(
+                    'span',
+                    null,
+                    value
+                )
+            );
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.wrapper },
+                    iconElement,
+                    view !== cst.VIEWS.SMALL && typeof value !== 'undefined' && _react2.default.createElement(
+                        'span',
+                        { className: classes.label },
+                        value
+                    )
+                )
+            );
+        }
+    }]);
+    return CellIcon;
+}(_react2.default.PureComponent);
+
+CellIcon.defaultProps = {
+    view: 'l'
+};
+CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Icône name [from material-design-icons](https://materialdesignicons.com/)
+     */
+    icon: _propTypes2.default.string.isRequired,
+    /**
+     * Label
+     */
+    value: _propTypes2.default.string,
+    /**
+     * View (L/M/S)
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellIcon' })(CellIcon);

package/HiTable/BodyCells/CellImage.js

@@ -0,0 +1,177 @@
+'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 _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'
+        },
+        smallImg: {
+            width: 24,
+            height: 'auto'
+        },
+        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"
+        },
+        center: {
+            textAlign: 'center'
+        }
+    };
+};
+
+/**
+ * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel).
+ * En vue large, aucun tooltip n'est affiché
+ * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
+ */
+
+var CellImage = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellImage, _React$PureComponent);
+
+    function CellImage() {
+        (0, _classCallCheck3.default)(this, CellImage);
+        return (0, _possibleConstructorReturn3.default)(this, (CellImage.__proto__ || (0, _getPrototypeOf2.default)(CellImage)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellImage, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                path = _props.path,
+                value = _props.value,
+                view = _props.view;
+
+
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.tooltipLabel },
+                    value
+                )
+            );
+
+            var innerCellElement = null;
+            if (view === cst.VIEWS.SMALL) {
+                innerCellElement = _react2.default.createElement(
+                    'div',
+                    { className: classes.center },
+                    _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg })
+                );
+            } else {
+                innerCellElement = _react2.default.createElement(
+                    'div',
+                    { className: classes.wrapper },
+                    _react2.default.createElement('img', { src: path, alt: value, className: classes.img }),
+                    !!value && _react2.default.createElement(
+                        'span',
+                        { className: classes.label },
+                        value
+                    )
+                );
+            }
+
+            if (view === cst.VIEWS.LARGE) {
+                return innerCellElement;
+            } else {
+                return _react2.default.createElement(
+                    _Tooltip2.default,
+                    { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                    innerCellElement
+                );
+            }
+        }
+    }]);
+    return CellImage;
+}(_react2.default.PureComponent);
+
+CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Image path
+     */
+    path: _propTypes2.default.string.isRequired,
+    /**
+     * Label
+     */
+    value: _propTypes2.default.string,
+    /**
+     * View (L/M/S)
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellImage' })(CellImage);