@hipay/hipay-material-ui 1.0.0-beta.13 → 1.0.0-beta.15

package/es/HiDatePicker/HiDateRangePicker.js

@@ -6,6 +6,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { formatDate, parseDate } from 'react-day-picker/moment';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
+import classNames from 'classnames';
+
 import withStyles from '../styles/withStyles';
 import { capitalizeFirstLetter } from '../utils/helpers';
 import Caption from './Caption';
@@ -23,11 +25,14 @@ class HiDateRangePicker extends React.Component {
     constructor(props) {
         super();
 
+        this.handleDayPickerFocus = name => () => {
+            this.setState({ focusedInput: name });
+        };
+
         this.state = {
-            fromOpenedPanel: 'calendar',
             fromCurrentMonth: props.from ? props.from : new Date(),
-            toOpenedPanel: 'calendar',
-            toCurrentMonth: props.to ? props.to : new Date()
+            toCurrentMonth: props.to ? props.to : new Date(),
+            focusedInput: ''
         };
 
         this.handleReset = this.handleReset.bind(this);
@@ -51,6 +56,8 @@ class HiDateRangePicker extends React.Component {
         this.handleYearClick = this.handleYearClick.bind(this);
         this.handleYearClickFrom = this.handleYearClickFrom.bind(this);
         this.handleYearClickTo = this.handleYearClickTo.bind(this);
+        this.handleDayPickerFocus = this.handleDayPickerFocus.bind(this);
+        this.handleDayPickerBlur = this.handleDayPickerBlur.bind(this);
 
         this.openPanel = this.openPanel.bind(this);
 
@@ -207,6 +214,10 @@ class HiDateRangePicker extends React.Component {
         }
     }
 
+    handleDayPickerBlur() {
+        this.setState({ focusedInput: '' });
+    }
+
     openPanel(name, panel) {
         this.setState({
             [`${name}OpenedPanel`]: panel
@@ -239,9 +250,10 @@ class HiDateRangePicker extends React.Component {
         return this.renderNavbar('to', propsNavbar);
     }
 
-    renderOverlay(name, propsOverlay) {
+    renderOverlay(name, propsOverlay, staticPosition) {
         const rangeOverlayProps = _extends({}, propsOverlay, {
-            side: name
+            side: name,
+            staticPosition
         });
 
         switch (this.state[`${name}OpenedPanel`]) {
@@ -257,10 +269,10 @@ class HiDateRangePicker extends React.Component {
         }
     }
     renderOverlayFrom(propsOverlay) {
-        return this.renderOverlay('from', propsOverlay);
+        return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
     }
     renderOverlayTo(propsOverlay) {
-        return this.renderOverlay('to', propsOverlay);
+        return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
     }
 
     renderMonthPickerOverlay(name, propsOverlay) {
@@ -315,9 +327,10 @@ class HiDateRangePicker extends React.Component {
             onReset,
             to,
             translations,
-            id
+            id,
+            staticPosition
         } = _props,
-              props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
+              props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id', 'staticPosition']);
 
         const { fromCurrentMonth, toCurrentMonth } = this.state;
 
@@ -429,32 +442,52 @@ class HiDateRangePicker extends React.Component {
             id: `${id}-to`
         });
 
+        let fromClass = classNames({
+            [classes.absolute]: staticPosition === true && this.state.focusedInput === 'to',
+            [classes.dayPickerMargin]: staticPosition === true && this.state.focusedInput === 'to'
+        });
+        let toClass = classNames(classes.toInput, {
+            [classes.absolute]: staticPosition === true && this.state.focusedInput === 'from'
+        });
+
         return React.createElement(
             'div',
             { className: classes.root },
             React.createElement(
                 'div',
-                { className: classes.fromInput },
-                React.createElement(DayPickerInput, {
-                    ref: el => {
-                        this.fromInput = el;
-                    },
-                    value: from,
-                    hideOnDayClick: false,
-                    overlayComponent: this.renderOverlayFrom,
-                    dayPickerProps: fromDayPickerProps,
-                    component: HiTextField,
-                    inputProps: fromInputProps,
-                    format: enableTime ? `${format} HH:mm` : format,
-                    formatDate: formatDate,
-                    parseDate: parseDate,
-                    onDayChange: this.handleDayChangeFrom,
-                    placeholder: ''
-                })
+                {
+                    className: classes.fromInput,
+                    onFocus: this.handleDayPickerFocus('from'),
+                    onBlur: this.handleDayPickerBlur
+                },
+                React.createElement(
+                    'div',
+                    { className: fromClass },
+                    React.createElement(DayPickerInput, {
+                        ref: el => {
+                            this.fromInput = el;
+                        },
+                        value: from,
+                        hideOnDayClick: false,
+                        overlayComponent: this.renderOverlayFrom,
+                        dayPickerProps: fromDayPickerProps,
+                        component: HiTextField,
+                        inputProps: fromInputProps,
+                        format: enableTime ? `${format} HH:mm` : format,
+                        formatDate: formatDate,
+                        parseDate: parseDate,
+                        onDayChange: this.handleDayChangeFrom,
+                        placeholder: ''
+                    })
+                )
             ),
             React.createElement(
                 'div',
-                { className: classes.toInput },
+                {
+                    className: toClass,
+                    onFocus: this.handleDayPickerFocus('to'),
+                    onBlur: this.handleDayPickerBlur
+                },
                 React.createElement(DayPickerInput, {
                     ref: el => {
                         this.toInput = el;
@@ -480,6 +513,7 @@ HiDateRangePicker.defaultProps = {
     disabledDays: [],
     disablePastDays: false,
     disableFutureDays: false,
+    staticPosition: false,
     enableTime: false,
     format: 'YYYY-DD-MM',
     labelFrom: 'Start',
@@ -555,6 +589,10 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
      * Callback au reset de l'input
      */
     onReset: PropTypes.func,
+    /**
+     * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+     */
+    staticPosition: PropTypes.bool,
     /**
      * Date de fin sélectionnée
      */

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -127,11 +127,11 @@ class HiDateRangeSelector extends React.Component {
                 if (selectedOption) {
                     this.props.onChange('from', selectedOption.from.toDate());
                     this.props.onChange('to', selectedOption.to.toDate());
-                    if (this.props.returnSelectValue === true) {
-                        this.props.onChange('period', value);
-                    }
                 }
             }
+            if (this.props.returnSelectValue === true) {
+                this.props.onChange('period', value);
+            }
         };
 
         this.state = {
@@ -177,9 +177,10 @@ class HiDateRangeSelector extends React.Component {
             to,
             translations,
             classes,
-            selectProps
+            selectProps,
+            staticPosition
         } = _props,
-              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps']);
+              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
 
         const { selectedPreset } = this.state;
 
@@ -209,7 +210,8 @@ class HiDateRangeSelector extends React.Component {
                     translations: translations,
                     value: selectedPreset,
                     containerWidth: this.state.containerWidth,
-                    classes: { root: classes.dateSelect }
+                    classes: { root: classes.dateSelect },
+                    staticPosition: staticPosition
                 }, selectProps))
             ),
             React.createElement(
@@ -224,7 +226,8 @@ class HiDateRangeSelector extends React.Component {
                     onChange: onChange,
                     onReset: this.handleReset,
                     disabled: disabled || selectedPreset !== 'custom',
-                    translations: translations
+                    translations: translations,
+                    staticPosition: staticPosition
                 }, props))
             )
         );
@@ -236,6 +239,7 @@ HiDateRangeSelector.defaultProps = {
     defaultPreset: 'cd',
     enableTime: false,
     returnSelectValue: false,
+    staticPosition: false,
     locale: 'fr-FR',
     format: 'YYYY-DD-MM',
     translations: {
@@ -337,6 +341,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
      * Props passées au HiSelectField
      */
     selectProps: PropTypes.object,
+    /**
+     * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+     */
+    staticPosition: PropTypes.bool,
     /**
      * Date de fin sélectionnée
      */

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -70,9 +70,11 @@ const CustomOverlayLayout = (_ref) => {
         [classes.right]: side === 'to'
     });
 
+    let paperProps = _extends({}, props);
+
     return React.createElement(
         Paper,
-        { className: paperClass },
+        { className: paperClass, onBlur: paperProps.onBlur, onFocus: paperProps.onFocus },
         React.createElement(
             'div',
             { className: classes.overlay },

package/es/HiDatePicker/Overlays/Overlay.js

@@ -1,3 +1,5 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 //  weak
 
 import React from 'react';
@@ -9,10 +11,15 @@ import withStyles from '../../styles/withStyles';
 
 export const styles = () => ({
     paper: {
-        position: 'absolute',
         width: '100%',
         zIndex: 10
     },
+    absolute: {
+        position: 'absolute'
+    },
+    relative: {
+        position: 'relative'
+    },
     left: {
         width: '200%',
         left: 0
@@ -26,15 +33,22 @@ export const styles = () => ({
     }
 });
 
-const Overlay = ({ classes, children, side }) => {
+const Overlay = (_ref) => {
+    let { classes, children, side, staticPosition } = _ref,
+        props = _objectWithoutProperties(_ref, ['classes', 'children', 'side', 'staticPosition']);
+
     const paperClass = classNames(classes.paper, {
         [classes.left]: side === 'from',
-        [classes.right]: side === 'to'
+        [classes.right]: side === 'to',
+        [classes.absolute]: staticPosition !== true,
+        [classes.relative]: staticPosition === true
     });
 
+    let paperProps = _extends({}, props);
+
     return React.createElement(
         Paper,
-        { className: paperClass },
+        { onBlur: paperProps.onBlur, onFocus: paperProps.onFocus, className: paperClass },
         React.createElement(
             'div',
             { className: classes.overlay },

package/es/HiDatePicker/stylesheet.js

@@ -19,6 +19,13 @@ export default (theme => ({
         width: 'calc(50% - 4px)',
         marginLeft: 4
     },
+    absolute: {
+        position: 'absolute'
+    },
+    dayPickerMargin: {
+        top: -337,
+        width: 'calc(100% - 4px)'
+    },
     // The container element
     container: {
         width: '100%',

package/es/HiForm/HiInput.js

@@ -170,19 +170,28 @@ class HiInput extends React.PureComponent {
     }
 
     handleFocus(event) {
-        if (!this.state.focused) {
-            this.setState({ focused: true });
-        }
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
+        if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
+            event.stopPropagation();
+        } else {
+            if (!this.state.focused) {
+                this.setState({ focused: true });
+            }
+            if (this.props.onFocus) {
+                this.props.onFocus(event);
+            }
+            this.inputElement.focus();
         }
     }
 
-    handleDivClick() {
-        if (!this.state.focused) {
-            this.setState({ focused: true });
+    handleDivClick(event) {
+        if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
+            event.stopPropagation();
+        } else {
+            if (!this.state.focused) {
+                this.setState({ focused: true });
+            }
+            this.inputElement.focus();
         }
-        this.inputElement.focus();
     }
 
     handleMouseEnter() {
@@ -305,7 +314,7 @@ class HiInput extends React.PureComponent {
                 startAdornment: leftIcon,
                 endAdornment: React.createElement(
                     'div',
-                    { className: classes.endAdornment },
+                    { className: classes.endAdornment, ref: el => this.endAdornmentNode = el },
                     eraseIcon,
                     endAdornment
                 ),

package/es/HiForm/HiSlider.js

@@ -0,0 +1,309 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import HiIconBuilder from '../utils/HiIconBuilder';
+import HiFormControl from '../HiForm/HiFormControl';
+
+export const styles = theme => ({
+    barContainer: {
+        width: '100%',
+        position: 'relative',
+        margin: '0 7px'
+    },
+    barHidden: {
+        width: '100%',
+        opacity: 0,
+        position: 'absolute',
+        top: '7px',
+        zIndex: '2'
+    },
+    mainContainer: _extends({}, 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
+ */
+class HiSlider extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.leftLabelWidth = 0;
+        this.rightLabelWidth = 0;
+        this.textValueWidth = 0;
+        this.barContainerWidth = 0;
+
+        this.handleFocus = isFocused => () => {
+            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);
+    }
+
+    /**
+     * Measures several components once they are mounted.
+     * If the value and a label (left or right) are hovered,
+     * we hide this label.
+     */
+    componentDidMount() {
+        this.leftLabelWidth = this.leftLabel.offsetWidth;
+        this.rightLabelWidth = this.rightLabel.offsetWidth;
+        this.textValueWidth = this.textValue.offsetWidth;
+        this.barContainerWidth = this.barContainer.offsetWidth;
+        let { hoveringLeft, hoveringRight } = this.getHovering();
+        if (hoveringLeft || hoveringRight) {
+            this.forceUpdate();
+        }
+    }
+
+    handleChange(event) {
+        this.props.onChange(parseFloat(event.target.value));
+        this.textValueWidth = this.textValue.offsetWidth;
+    }
+
+    /**
+     * Calculates if the labels are hovered.
+     */
+    getHovering() {
+        const ratio = (this.props.value - this.props.min) / (this.props.max - this.props.min);
+        const hoveringLeft = this.leftLabelWidth - (ratio * this.barContainerWidth - ratio * this.textValueWidth) > 0;
+        const hoveringRight = this.barContainerWidth - ratio * this.barContainerWidth - this.rightLabelWidth - (1 - ratio) * this.textValueWidth < 0;
+        return { hoveringLeft, hoveringRight };
+    }
+
+    render() {
+        const {
+            classes,
+            className,
+            min,
+            max,
+            leftLabel,
+            rightLabel,
+            step,
+            suffix,
+            id,
+            label,
+            theme,
+            value
+        } = this.props;
+        const { focused } = this.state;
+        const ratio = (value - min) / (max - min);
+        const percentage = ratio * 100;
+        const { hoveringLeft, hoveringRight } = this.getHovering();
+        const barColor = focused ? theme.palette.business.primary.dark : theme.palette.business.primary.normal;
+        return (
+            // HiFormControl pour l'affichage du label
+            React.createElement(
+                HiFormControl,
+                {
+                    id: id,
+                    label: label,
+                    className: className,
+                    onFocus: this.handleFocus(true),
+                    onBlur: this.handleFocus(false)
+                },
+                React.createElement(
+                    'div',
+                    { className: classes.mainContainer },
+                    React.createElement(
+                        'div',
+                        null,
+                        min,
+                        suffix
+                    ),
+                    React.createElement(
+                        'div',
+                        { className: classes.barContainer, ref: div => this.barContainer = div },
+                        React.createElement(
+                            'div',
+                            { className: classes.topContainer },
+                            !hoveringLeft && React.createElement(
+                                'div',
+                                {
+                                    className: classes.leftLabel,
+                                    ref: div => this.leftLabel = div
+                                },
+                                leftLabel
+                            ),
+                            React.createElement(
+                                'div',
+                                {
+                                    className: classes.textValue,
+                                    style: {
+                                        left: `${percentage}%`,
+                                        transform: `translate(-${percentage}%)`
+                                    },
+                                    ref: div => this.textValue = div
+                                },
+                                value,
+                                suffix
+                            ),
+                            !hoveringRight && React.createElement(
+                                'div',
+                                {
+                                    className: classes.rightLabel,
+                                    ref: div => this.rightLabel = div
+                                },
+                                rightLabel
+                            )
+                        ),
+                        React.createElement('div', {
+                            className: classes.barValue,
+                            style: {
+                                background: `linear-gradient(to right, ${barColor}, ${barColor} ${percentage}%, #E0E0E0 ${percentage}%, #E0E0E0)`
+                            }
+                        }),
+                        React.createElement('input', {
+                            type: 'range',
+                            min: min,
+                            max: max,
+                            value: value,
+                            onChange: this.handleChange,
+                            className: classes.barHidden,
+                            step: step
+                        }),
+                        React.createElement(
+                            'div',
+                            { className: classes.bottomContainer },
+                            React.createElement(HiIconBuilder, {
+                                className: classNames(classes.arrow, {
+                                    [classes.focused]: focused
+                                }),
+                                icon: 'menu_up',
+                                size: 24,
+                                style: { left: `${percentage}%` }
+                            })
+                        )
+                    ),
+                    React.createElement(
+                        'div',
+                        null,
+                        max,
+                        suffix
+                    )
+                )
+            )
+        );
+    }
+}
+
+HiSlider.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Classes CSS appliquées.
+     */
+    className: PropTypes.string,
+    /**
+     * Id de l'élément input
+     */
+    id: PropTypes.string.isRequired,
+    /**
+     * Label du champ
+     */
+    label: PropTypes.string,
+    /**
+     * The label to show on the left.
+     */
+    leftLabel: PropTypes.string,
+    /**
+     * The Maximum value for the slider.
+     */
+    max: PropTypes.number.isRequired,
+    /**
+     * The Minimum value for the slider.
+     */
+    min: PropTypes.number.isRequired,
+    /**
+     * Fonction de callback appelée lorsqu'on change la valeur du slider.
+     */
+    onChange: PropTypes.func,
+    /**
+     * The label to show on the right
+     */
+    rightLabel: PropTypes.string,
+    /**
+     * The step between two selectable values.
+     */
+    step: PropTypes.number,
+    /**
+     * The suffix to show after each number.
+     */
+    suffix: PropTypes.string,
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object,
+    /**
+     * The
+     * value of the input.
+     */
+    value: PropTypes.number
+} : {};
+export default withStyles(styles, { name: 'HmuiHiSlider', withTheme: true })(HiSlider);

package/es/HiForm/index.js

@@ -5,4 +5,5 @@ export { default as HiInput } from './HiInput';
 export { default as HiPasswordField } from './HiPasswordField';
 export { default as HiTextField } from './HiTextField';
 export { default as HiSearchField } from './HiSearchField';
+export { default as HiSlider } from './HiSlider';
 export { default as HiAddressField } from './HiAddressField';

package/es/HiSelect/HiSelect.js

@@ -390,7 +390,7 @@ HiSelect.defaultProps = {
 };
 
 var _initialiseProps = function () {
-    this.handleClick = event => {
+    this.handleClick = () => {
         if (this.state.open) {
             this.handleClose();
         } else {