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

package/es/HiDatePicker/HiDateRangePicker.js

@@ -6,8 +6,6 @@ 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';
@@ -25,14 +23,11 @@ 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(),
-            toCurrentMonth: props.to ? props.to : new Date(),
-            focusedInput: ''
+            toOpenedPanel: 'calendar',
+            toCurrentMonth: props.to ? props.to : new Date()
         };
 
         this.handleReset = this.handleReset.bind(this);
@@ -56,8 +51,6 @@ 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);
 
@@ -112,11 +105,11 @@ class HiDateRangePicker extends React.Component {
         // else focus current input
         if (!this.props.enableTime) {
             if (day instanceof Date) {
-                if (name === 'from' && this.toInput) {
-                    this.toInput.getInput().focus();
-                } else if (name === 'to') {
-                    document.activeElement.blur();
-                }
+                this.timeout = setTimeout(() => {
+                    if (this.toInput && this.toInput.getInput()) {
+                        this.toInput.getInput().focus();
+                    }
+                }, 0);
             }
         } else {
             this.timeout = setTimeout(() => {
@@ -206,18 +199,12 @@ class HiDateRangePicker extends React.Component {
         this.props.onChange(name, date);
         if (name === 'from' && precision === 'minute') {
             this.fromInput.hideDayPicker();
-            this.toInput.getInput().focus();
             this.toInput.showDayPicker();
         } else if (name === 'to' && precision === 'minute') {
             this.toInput.hideDayPicker();
-            document.activeElement.blur();
         }
     }
 
-    handleDayPickerBlur() {
-        this.setState({ focusedInput: '' });
-    }
-
     openPanel(name, panel) {
         this.setState({
             [`${name}OpenedPanel`]: panel
@@ -250,10 +237,9 @@ class HiDateRangePicker extends React.Component {
         return this.renderNavbar('to', propsNavbar);
     }
 
-    renderOverlay(name, propsOverlay, staticPosition) {
+    renderOverlay(name, propsOverlay) {
         const rangeOverlayProps = _extends({}, propsOverlay, {
-            side: name,
-            staticPosition
+            side: name
         });
 
         switch (this.state[`${name}OpenedPanel`]) {
@@ -269,10 +255,10 @@ class HiDateRangePicker extends React.Component {
         }
     }
     renderOverlayFrom(propsOverlay) {
-        return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
+        return this.renderOverlay('from', propsOverlay);
     }
     renderOverlayTo(propsOverlay) {
-        return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
+        return this.renderOverlay('to', propsOverlay);
     }
 
     renderMonthPickerOverlay(name, propsOverlay) {
@@ -327,10 +313,9 @@ class HiDateRangePicker extends React.Component {
             onReset,
             to,
             translations,
-            id,
-            staticPosition
+            id
         } = _props,
-              props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id', 'staticPosition']);
+              props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
 
         const { fromCurrentMonth, toCurrentMonth } = this.state;
 
@@ -442,52 +427,32 @@ 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,
-                    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: ''
-                    })
-                )
+                { 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: ''
+                })
             ),
             React.createElement(
                 'div',
-                {
-                    className: toClass,
-                    onFocus: this.handleDayPickerFocus('to'),
-                    onBlur: this.handleDayPickerBlur
-                },
+                { className: classes.toInput },
                 React.createElement(DayPickerInput, {
                     ref: el => {
                         this.toInput = el;
@@ -513,7 +478,6 @@ HiDateRangePicker.defaultProps = {
     disabledDays: [],
     disablePastDays: false,
     disableFutureDays: false,
-    staticPosition: false,
     enableTime: false,
     format: 'YYYY-DD-MM',
     labelFrom: 'Start',
@@ -589,10 +553,6 @@ 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

@@ -27,7 +27,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.today;
+            label = t.last_24h;
             from = moment().subtract(1, 'day');
             to = moment();
             info = `${from.calendar()} ${t.to_now}`;
@@ -105,9 +105,7 @@ export const styles = theme => ({
     },
     dateRangePicker: {
         width: 'calc(100% + 8px)'
-    },
-    smSelect: {},
-    smRangePicker: {}
+    }
 });
 
 class HiDateRangeSelector extends React.Component {
@@ -129,9 +127,6 @@ class HiDateRangeSelector extends React.Component {
                     this.props.onChange('to', selectedOption.to.toDate());
                 }
             }
-            if (this.props.returnSelectValue === true) {
-                this.props.onChange('period', value);
-            }
         };
 
         this.state = {
@@ -176,11 +171,9 @@ class HiDateRangeSelector extends React.Component {
             required,
             to,
             translations,
-            classes,
-            selectProps,
-            staticPosition
+            classes
         } = _props,
-              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
+              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes']);
 
         const { selectedPreset } = this.state;
 
@@ -194,8 +187,8 @@ class HiDateRangeSelector extends React.Component {
             },
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
-                React.createElement(HiSelectField, _extends({
+                { item: true, xs: 12, sm: 4 },
+                React.createElement(HiSelectField, {
                     disabled: disabled,
                     error: error,
                     errorText: errorText,
@@ -210,13 +203,12 @@ class HiDateRangeSelector extends React.Component {
                     translations: translations,
                     value: selectedPreset,
                     containerWidth: this.state.containerWidth,
-                    classes: { root: classes.dateSelect },
-                    staticPosition: staticPosition
-                }, selectProps))
+                    classes: { root: classes.dateSelect }
+                })
             ),
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
+                { item: true, xs: 12, sm: 8 },
                 React.createElement(HiDateRangePicker, _extends({
                     classes: { root: classes.dateRangePicker },
                     id: idRange,
@@ -226,8 +218,7 @@ class HiDateRangeSelector extends React.Component {
                     onChange: onChange,
                     onReset: this.handleReset,
                     disabled: disabled || selectedPreset !== 'custom',
-                    translations: translations,
-                    staticPosition: staticPosition
+                    translations: translations
                 }, props))
             )
         );
@@ -238,21 +229,22 @@ HiDateRangeSelector.defaultProps = {
     availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
     defaultPreset: 'cd',
     enableTime: false,
-    returnSelectValue: false,
-    staticPosition: false,
     locale: 'fr-FR',
     format: 'YYYY-DD-MM',
     translations: {
-        today: 'Today',
+        today: 'today',
         hour: 'Hour',
         minute: 'Minute',
         month: 'Month',
         quarter: 'Quarter',
         week: 'Week',
         year: 'Year',
+
         days: 'days',
+
         custom_period: 'Custom Period',
         yesterday: 'Yesterday',
+        last_24h: 'Last 24h',
         to: 'to',
         to_now: 'to now',
         current_week: 'Current Week',
@@ -333,18 +325,6 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
      * true si champs obligatoire
      */
     required: PropTypes.bool,
-    /**
-     * Retourne la valeur du select de la période au change du select
-     */
-    returnSelectValue: PropTypes.bool.isRequired,
-    /**
-     * 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/ListPicker.js

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { Scrollbars } from 'react-custom-scrollbars';
 import { MenuList, MenuItem } from 'material-ui/Menu';
 import withStyles from '../styles/withStyles';
@@ -19,27 +18,19 @@ export const styles = theme => ({
     },
     itemCentered: {
         margin: 'auto'
-    },
-    currentDateItem: {
-        color: `${theme.palette.business.primary.normal} !important`
     }
 });
 
 class ListPicker extends React.PureComponent {
 
     componentDidMount() {
-        if (this.position && this.scrollbars) {
-            this.scrollbars.scrollTop((this.position - 2) * 40);
-        } else if (this.props.initAtMiddleScroll && this.scrollbars) {
+        if (this.props.initAtMiddleScroll && this.scrollbars) {
             this.scrollbars.scrollTop((this.scrollbars.getScrollHeight() - this.scrollbars.getClientHeight()) / 2 + 20);
         }
     }
 
     render() {
-        const { classes, itemList, onItemClick, selectedItem, type } = this.props;
-
-        this.position = itemList.indexOf(selectedItem);
-        let now = new Date();
+        const { classes, itemList, onItemClick, selectedItem } = this.props;
 
         return React.createElement(
             Scrollbars,
@@ -52,36 +43,30 @@ class ListPicker extends React.PureComponent {
             React.createElement(
                 MenuList,
                 null,
-                itemList.map((item, index) => {
-                    const labelClass = classNames(classes.itemCentered, {
-                        [classes.currentDateItem]: type === 'year' && now.getFullYear() === item || type === 'month' && now.getMonth() === index
-                    });
-
-                    return React.createElement(
-                        MenuItem,
-                        {
-                            key: `item-${item}`,
-                            classes: {
-                                root: classes.itemRoot,
-                                selected: classes.itemSelected
-                            },
-                            onClick: () => onItemClick(item),
-                            selected: item === selectedItem
+                itemList.map(item => React.createElement(
+                    MenuItem,
+                    {
+                        key: `item-${item}`,
+                        classes: {
+                            root: classes.itemRoot,
+                            selected: classes.itemSelected
                         },
-                        React.createElement(
-                            'span',
-                            { className: labelClass },
-                            item
-                        )
-                    );
-                })
+                        onClick: () => onItemClick(item),
+                        selected: item === selectedItem
+                    },
+                    React.createElement(
+                        'span',
+                        { className: classes.itemCentered },
+                        item
+                    )
+                ))
             )
         );
     }
 }
 
 ListPicker.defaultProps = {
-    initAtMiddleScroll: true
+    initAtMiddleScroll: false
 };
 ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -103,10 +88,6 @@ ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Item sélectionné
      */
-    selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    /**
-     * Type des données dans la liste
-     */
-    type: PropTypes.oneOf(['year', 'month'])
+    selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : {};
 export default withStyles(styles, { name: 'HmuiListPicker' })(ListPicker);

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -70,11 +70,9 @@ const CustomOverlayLayout = (_ref) => {
         [classes.right]: side === 'to'
     });
 
-    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/Overlays/MonthPickerOverlay.js

@@ -34,17 +34,13 @@ class MonthPickerOverlay extends React.Component {
               { value, translations } = _props,
               props = _objectWithoutProperties(_props, ['value', 'translations']);
 
-        let now = new Date();
-        let currentMonth = props.localeUtils ? props.localeUtils.getMonths()[now.getMonth()] : props.children.props.localeUtils.getMonths()[now.getMonth()];
-
         return React.createElement(
             CustomOverlayLayout,
             _extends({ headerElement: translations.month }, props),
             React.createElement(ListPicker, {
                 itemList: this.months,
                 onItemClick: this.handleMonthClick,
-                selectedItem: currentMonth,
-                type: 'month'
+                selectedItem: value ? value.getMonth() : null
             })
         );
     }

package/es/HiDatePicker/Overlays/Overlay.js

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

package/es/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -54,8 +54,7 @@ class YearPickerOverlay extends React.Component {
             React.createElement(ListPicker, {
                 itemList: this.years,
                 onItemClick: this.handleYearClick,
-                selectedItem: value ? value.getFullYear() : null,
-                type: 'year'
+                selectedItem: value ? value.getFullYear() : null
             })
         );
     }

package/es/HiDatePicker/stylesheet.js

@@ -19,13 +19,6 @@ 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/HiFormControl.js

@@ -9,7 +9,6 @@ import { Alert, Information } from 'mdi-material-ui';
 import { FormControl, FormHelperText } from 'material-ui/Form';
 import withStyles from '../styles/withStyles';
 import HiFormLabel from './HiFormLabel';
-import { escapeHTML } from "../utils/hiHelpers";
 
 export const styles = theme => ({
     helperTextClassName: {
@@ -63,7 +62,7 @@ export const styles = theme => ({
         color: theme.palette.business.primary.normal
     },
     helperDiv: _extends({}, theme.typography.h5, {
-        width: '100%',
+        width: 'calc(100% - 16px)',
         backgroundColor: '#ffffff',
         color: theme.palette.neutral.dark,
         padding: '16px 8px',
@@ -71,8 +70,7 @@ export const styles = theme => ({
         position: 'relative',
         marginBottom: 5,
         fontWeight: theme.typography.fontWeightRegular,
-        boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
-        lineHeight: 1.5
+        boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)'
     }),
     helperDivArrowDown: {
         borderTopColor: '#ffffff'
@@ -87,17 +85,6 @@ class HiFormControl extends React.PureComponent {
     constructor(props) {
         super(props);
 
-        this.handleFocus = value => () => {
-            this.setState({ focused: value });
-            if (value === false && this.state.hovered) {
-                this.setState({ hovered: false });
-            }
-        };
-
-        this.handleHover = value => () => {
-            this.setState({ hovered: value });
-        };
-
         this.state = {
             helperOpen: false,
             focused: false,
@@ -109,11 +96,16 @@ class HiFormControl extends React.PureComponent {
         this.handleHover = this.handleHover.bind(this);
     }
 
-    handleHelperClick(event) {
+    handleHelperClick() {
         this.setState(prevState => ({ helperOpen: !prevState.helperOpen }));
-        if (event) {
-            event.preventDefault();
-        }
+    }
+
+    handleFocus(value) {
+        this.setState({ focused: value });
+    }
+
+    handleHover(value) {
+        this.setState({ hovered: value });
     }
 
     render() {
@@ -160,17 +152,11 @@ class HiFormControl extends React.PureComponent {
             ),
             !disabled && helperIcon && helperText && !error && helperOpen && React.createElement(
                 'div',
-                {
-                    className: classes.helperDiv
-                },
+                { className: classes.helperDiv },
                 React.createElement('div', {
                     className: classNames(classes.arrowDown, classes.helperDivArrowDown)
-
                 }),
-                React.createElement('span', {
-                    dangerouslySetInnerHTML: {
-                        __html: escapeHTML(helperText)
-                    } })
+                helperText
             ),
             label && React.createElement(
                 HiFormLabel,
@@ -179,7 +165,7 @@ class HiFormControl extends React.PureComponent {
                     label: label,
                     required: required,
                     disabled: disabled,
-                    focused: !disabled && (focused || hovered)
+                    focused: focused || hovered
                 }, InputLabelProps),
                 !disabled && error && React.createElement(Alert, {
                     className: classes.errorIcon,
@@ -195,10 +181,10 @@ class HiFormControl extends React.PureComponent {
             React.createElement(
                 'div',
                 {
-                    onMouseEnter: this.handleHover(true),
-                    onMouseLeave: this.handleHover(false),
-                    onFocus: this.handleFocus(true),
-                    onBlur: this.handleFocus(false)
+                    onMouseEnter: () => this.handleHover(true),
+                    onMouseLeave: () => this.handleHover(false),
+                    onFocus: () => this.handleFocus(true),
+                    onBlur: () => this.handleFocus(false)
                 },
                 children
             ),