@hipay/hipay-material-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/HiForm/HiSlider.js

@@ -0,0 +1,399 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+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 _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+var _HiFormControl = require('../HiForm/HiFormControl');
+
+var _HiFormControl2 = _interopRequireDefault(_HiFormControl);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        barContainer: {
+            width: '100%',
+            position: 'relative',
+            margin: '0 7px'
+        },
+        barHidden: {
+            width: '100%',
+            opacity: 0,
+            position: 'absolute',
+            top: '7px',
+            zIndex: '2'
+        },
+        mainContainer: (0, _extends3.default)({}, theme.typography.body1, {
+            display: 'flex',
+            flexWrap: 'nowrap',
+            alignItems: 'center'
+        }),
+        topContainer: {
+            display: 'flex',
+            flexWrap: 'nowrap',
+            height: '18px'
+        },
+        bottomContainer: {
+            display: 'flex',
+            flexWrap: 'nowrap',
+            height: '18px'
+        },
+        barValue: {
+            display: 'flex',
+            width: '100%',
+            height: '4px',
+            borderRadius: '2px',
+            backgroundColor: theme.palette.business.primary.normal,
+            position: 'absolute',
+            zIndex: '2'
+        },
+        arrow: {
+            position: 'absolute',
+            zIndex: '1',
+            color: theme.palette.business.primary.normal,
+            transform: 'translate(-50%,-25%)',
+            transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+            transitionProperty: 'transform color'
+        },
+        focused: {
+            transform: 'scale(1.7) translate(-29%, -11%)',
+            color: theme.palette.business.primary.dark
+        },
+        leftLabel: {
+            color: theme.palette.business.primary.normal,
+            left: '0px',
+            position: 'absolute',
+            fontSize: '11px',
+            alignSelf: 'flex-end'
+        },
+        rightLabel: {
+            color: '#737373',
+            right: '0px',
+            position: 'absolute',
+            fontSize: '11px',
+            alignSelf: 'flex-end'
+        },
+        textValue: {
+            position: 'absolute',
+            zIndex: '2'
+        }
+    };
+};
+
+/**
+ * HiSlider component
+ */
+
+var HiSlider = function (_React$Component) {
+    (0, _inherits3.default)(HiSlider, _React$Component);
+
+    function HiSlider(props) {
+        (0, _classCallCheck3.default)(this, HiSlider);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiSlider.__proto__ || (0, _getPrototypeOf2.default)(HiSlider)).call(this, props));
+
+        _this.leftLabelWidth = 0;
+        _this.rightLabelWidth = 0;
+        _this.textValueWidth = 0;
+        _this.barContainerWidth = 0;
+
+        _this.handleFocus = function (isFocused) {
+            return function () {
+                _this.setState({ focused: isFocused });
+            };
+        };
+
+        _this.state = {
+            focused: false
+        };
+
+        _this.leftLabel;
+        _this.rightLabel;
+        _this.textValue;
+        _this.barContainer;
+
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiSlider, [{
+        key: 'componentDidMount',
+
+
+        /**
+         * Measures several components once they are mounted.
+         * If the value and a label (left or right) are hovered,
+         * we hide this label.
+         */
+        value: function componentDidMount() {
+            this.leftLabelWidth = this.leftLabel.offsetWidth;
+            this.rightLabelWidth = this.rightLabel.offsetWidth;
+            this.textValueWidth = this.textValue.offsetWidth;
+            this.barContainerWidth = this.barContainer.offsetWidth;
+
+            var _getHovering = this.getHovering(),
+                hoveringLeft = _getHovering.hoveringLeft,
+                hoveringRight = _getHovering.hoveringRight;
+
+            if (hoveringLeft || hoveringRight) {
+                this.forceUpdate();
+            }
+        }
+    }, {
+        key: 'handleChange',
+        value: function handleChange(event) {
+            this.props.onChange(parseFloat(event.target.value));
+            this.textValueWidth = this.textValue.offsetWidth;
+        }
+    }, {
+        key: 'getHovering',
+
+
+        /**
+         * Calculates if the labels are hovered.
+         */
+        value: function getHovering() {
+            var ratio = (this.props.value - this.props.min) / (this.props.max - this.props.min);
+            var hoveringLeft = this.leftLabelWidth - (ratio * this.barContainerWidth - ratio * this.textValueWidth) > 0;
+            var hoveringRight = this.barContainerWidth - ratio * this.barContainerWidth - this.rightLabelWidth - (1 - ratio) * this.textValueWidth < 0;
+            return { hoveringLeft: hoveringLeft, hoveringRight: hoveringRight };
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                className = _props.className,
+                min = _props.min,
+                max = _props.max,
+                leftLabel = _props.leftLabel,
+                rightLabel = _props.rightLabel,
+                step = _props.step,
+                suffix = _props.suffix,
+                id = _props.id,
+                label = _props.label,
+                theme = _props.theme,
+                value = _props.value;
+            var focused = this.state.focused;
+
+            var ratio = (value - min) / (max - min);
+            var percentage = ratio * 100;
+
+            var _getHovering2 = this.getHovering(),
+                hoveringLeft = _getHovering2.hoveringLeft,
+                hoveringRight = _getHovering2.hoveringRight;
+
+            var barColor = focused ? theme.palette.business.primary.dark : theme.palette.business.primary.normal;
+            return (
+                // HiFormControl pour l'affichage du label
+                _react2.default.createElement(
+                    _HiFormControl2.default,
+                    {
+                        id: id,
+                        label: label,
+                        className: className,
+                        onFocus: this.handleFocus(true),
+                        onBlur: this.handleFocus(false)
+                    },
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.mainContainer },
+                        _react2.default.createElement(
+                            'div',
+                            null,
+                            min,
+                            suffix
+                        ),
+                        _react2.default.createElement(
+                            'div',
+                            { className: classes.barContainer, ref: function ref(div) {
+                                    return _this2.barContainer = div;
+                                } },
+                            _react2.default.createElement(
+                                'div',
+                                { className: classes.topContainer },
+                                !hoveringLeft && _react2.default.createElement(
+                                    'div',
+                                    {
+                                        className: classes.leftLabel,
+                                        ref: function ref(div) {
+                                            return _this2.leftLabel = div;
+                                        }
+                                    },
+                                    leftLabel
+                                ),
+                                _react2.default.createElement(
+                                    'div',
+                                    {
+                                        className: classes.textValue,
+                                        style: {
+                                            left: percentage + '%',
+                                            transform: 'translate(-' + percentage + '%)'
+                                        },
+                                        ref: function ref(div) {
+                                            return _this2.textValue = div;
+                                        }
+                                    },
+                                    value,
+                                    suffix
+                                ),
+                                !hoveringRight && _react2.default.createElement(
+                                    'div',
+                                    {
+                                        className: classes.rightLabel,
+                                        ref: function ref(div) {
+                                            return _this2.rightLabel = div;
+                                        }
+                                    },
+                                    rightLabel
+                                )
+                            ),
+                            _react2.default.createElement('div', {
+                                className: classes.barValue,
+                                style: {
+                                    background: 'linear-gradient(to right, ' + barColor + ', ' + barColor + ' ' + percentage + '%, #E0E0E0 ' + percentage + '%, #E0E0E0)'
+                                }
+                            }),
+                            _react2.default.createElement('input', {
+                                type: 'range',
+                                min: min,
+                                max: max,
+                                value: value,
+                                onChange: this.handleChange,
+                                className: classes.barHidden,
+                                step: step
+                            }),
+                            _react2.default.createElement(
+                                'div',
+                                { className: classes.bottomContainer },
+                                _react2.default.createElement(_HiIconBuilder2.default, {
+                                    className: (0, _classnames2.default)(classes.arrow, (0, _defineProperty3.default)({}, classes.focused, focused)),
+                                    icon: 'menu_up',
+                                    size: 24,
+                                    style: { left: percentage + '%' }
+                                })
+                            )
+                        ),
+                        _react2.default.createElement(
+                            'div',
+                            null,
+                            max,
+                            suffix
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return HiSlider;
+}(_react2.default.Component);
+
+HiSlider.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Classes CSS appliquées.
+     */
+    className: _propTypes2.default.string,
+    /**
+     * Id de l'élément input
+     */
+    id: _propTypes2.default.string.isRequired,
+    /**
+     * Label du champ
+     */
+    label: _propTypes2.default.string,
+    /**
+     * The label to show on the left.
+     */
+    leftLabel: _propTypes2.default.string,
+    /**
+     * The Maximum value for the slider.
+     */
+    max: _propTypes2.default.number.isRequired,
+    /**
+     * The Minimum value for the slider.
+     */
+    min: _propTypes2.default.number.isRequired,
+    /**
+     * Fonction de callback appelée lorsqu'on change la valeur du slider.
+     */
+    onChange: _propTypes2.default.func,
+    /**
+     * The label to show on the right
+     */
+    rightLabel: _propTypes2.default.string,
+    /**
+     * The step between two selectable values.
+     */
+    step: _propTypes2.default.number,
+    /**
+     * The suffix to show after each number.
+     */
+    suffix: _propTypes2.default.string,
+    /**
+     * @ignore
+     */
+    theme: _propTypes2.default.object,
+    /**
+     * The
+     * value of the input.
+     */
+    value: _propTypes2.default.number
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSlider', withTheme: true })(HiSlider);

package/HiForm/HiUpload.js

@@ -0,0 +1,280 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+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 _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _withTheme = require('../styles/withTheme');
+
+var _withTheme2 = _interopRequireDefault(_withTheme);
+
+var _HiFormControl = require('./HiFormControl');
+
+var _HiFormControl2 = _interopRequireDefault(_HiFormControl);
+
+var _HiUploadField = require('./HiUploadField');
+
+var _HiUploadField2 = _interopRequireDefault(_HiUploadField);
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @inheritedComponent HiUploadField
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        flexContainer: {
+            display: '  flex',
+            alignItems: 'center'
+        },
+        statusIcon: {
+            color: theme.palette.text.icon,
+            marginRight: '8px',
+            padding: '24px',
+            borderRadius: '2px',
+            border: '1px solid ' + theme.palette.input.bottomLine,
+            backgroundColor: theme.palette.local.background2,
+            '&:not($empty)': {
+                border: '1px solid ' + theme.palette.middle.normal,
+                color: '' + theme.palette.middle.normal
+            },
+            '&$complete': {
+                border: '1px solid ' + theme.palette.positive.normal,
+                color: '' + theme.palette.positive.normal
+            },
+            '&$error': {
+                border: '1px solid ' + theme.palette.negative.normal,
+                color: '' + theme.palette.negative.normal
+            }
+        },
+        inputContainer: {
+            flex: '1'
+        },
+        empty: {},
+        complete: {},
+        error: {}
+    };
+};
+
+var HiUpload = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiUpload, _React$PureComponent);
+
+    function HiUpload(props) {
+        (0, _classCallCheck3.default)(this, HiUpload);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiUpload.__proto__ || (0, _getPrototypeOf2.default)(HiUpload)).call(this, props));
+
+        _this.state = {
+            params: new Array(_this.props.inputs.length)
+        };
+
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.handleClear = _this.handleClear.bind(_this);
+        _this.handleSeeFile = _this.handleSeeFile.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiUpload, [{
+        key: 'handleChange',
+        value: function handleChange(param, index) {
+            this.setState(function (prevState) {
+                var oldParams = [].concat((0, _toConsumableArray3.default)(prevState.params));
+                oldParams.splice(index, 1, param);
+                return {
+                    params: oldParams
+                };
+            });
+        }
+    }, {
+        key: 'handleClear',
+        value: function handleClear(index) {
+            this.setState(function (prevState) {
+                var oldParams = [].concat((0, _toConsumableArray3.default)(prevState.params));
+                oldParams.splice(index, 1, undefined);
+                return {
+                    params: oldParams
+                };
+            });
+        }
+    }, {
+        key: 'handleSeeFile',
+        value: function handleSeeFile(file) {
+            this.props.onSeeFile(file);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _classNames,
+                _this2 = this;
+
+            var _props = this.props,
+                inputs = _props.inputs,
+                className = _props.className,
+                classes = _props.classes,
+                label = _props.label,
+                helperIcon = _props.helperIcon,
+                helperText = _props.helperText,
+                others = (0, _objectWithoutProperties3.default)(_props, ['inputs', 'className', 'classes', 'label', 'helperIcon', 'helperText']);
+            var params = this.state.params;
+
+
+            var complete = true;
+            var empty = true;
+            var error = false;
+            var errorText = '';
+
+            for (var i = 0, len = params.length; i < len; i += 1) {
+                var param = params[i];
+                if (param !== undefined) {
+                    complete = param.value === null || param.error ? false : complete;
+                    empty = param.value !== null && !param.error ? false : empty;
+                    error = param.error || error;
+                    errorText = errorText || param.errorMessage;
+                } else {
+                    complete = false;
+                }
+            }
+
+            var statusClass = (0, _classnames2.default)(classes.statusIcon, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.empty, empty), (0, _defineProperty3.default)(_classNames, classes.complete, complete), (0, _defineProperty3.default)(_classNames, classes.error, error), _classNames));
+
+            var icon = void 0;
+
+            if (error) {
+                icon = 'alert';
+            } else if (complete) {
+                icon = 'check_circle';
+            } else {
+                icon = 'upload';
+            }
+
+            return _react2.default.createElement(
+                _HiFormControl2.default,
+                {
+                    label: label,
+                    className: className,
+                    errorText: errorText,
+                    error: error,
+                    helperIcon: helperIcon,
+                    helperText: helperText
+                },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.flexContainer },
+                    _react2.default.createElement(_HiIconBuilder2.default, { className: statusClass, size: 80, icon: icon }),
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.inputContainer },
+                        inputs.map(function (item, index) {
+                            return _react2.default.createElement(_HiUploadField2.default, (0, _extends3.default)({
+                                maxSize: item.maxSize,
+                                acceptedTypes: item.acceptedTypes,
+                                placeholder: item.placeholder,
+                                value: params[index] ? params[index].value : null,
+                                error: params[index] ? params[index].error : null,
+                                errorMessage: params[index] ? params[index].errorMessage : null,
+                                onSeeFile: _this2.handleSeeFile,
+                                onClear: _this2.handleClear,
+                                onChange: _this2.handleChange,
+                                index: index,
+                                key: item.id
+                            }, others));
+                        })
+                    )
+                )
+            );
+        }
+    }]);
+    return HiUpload;
+}(_react2.default.PureComponent);
+
+HiUpload.defaultProps = {
+    helperText: '',
+    helperIcon: false
+};
+HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Classes CSS appliquées.
+     */
+    className: _propTypes2.default.string,
+    /**
+     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+     */
+    helperIcon: _propTypes2.default.bool,
+    /**
+     * Texte de l'aide
+     */
+    helperText: _propTypes2.default.string,
+    /**
+     * Array containing each of the inputs the component has to show (represented by an object).
+     */
+    inputs: _propTypes2.default.array.isRequired,
+    /**
+     * The label of the global input.
+     */
+    label: _propTypes2.default.string,
+    /**
+     * The method given to see the file.
+     */
+    onSeeFile: _propTypes2.default.func
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiUpload', withTheme: true })(HiUpload);