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

package/es/HiChip/HiChip.js

@@ -50,9 +50,12 @@ export const styles = theme => ({
         whiteSpace: 'nowrap',
         color: theme.palette.neutral.dark,
         overflow: 'hidden',
-        width: '100%',
         textOverflow: 'ellipsis'
     },
+    prefix: {
+        color: theme.palette.neutral.dark,
+        paddingRight: 4
+    },
     navigate: {
         // Remove grey highlight
         WebkitTapHighlightColor: 'transparent',
@@ -75,7 +78,7 @@ export const styles = theme => ({
 });
 
 function HiChip(props) {
-    const { label, classes, icon, img, onPrevious, onNext, onDelete } = props;
+    const { label, classes, icon, img, onPrevious, onNext, onDelete, prefix } = props;
 
     return React.createElement(
         'div',
@@ -86,13 +89,19 @@ function HiChip(props) {
                 [classes.deletable]: onDelete
             })
         },
+        prefix && React.createElement(
+            'span',
+            { className: classes.prefix },
+            prefix,
+            ' : '
+        ),
         img && React.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon }),
+        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 16 }),
         onPrevious && React.createElement(HiIconBuilder, {
             className: classNames(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 20
+            size: 16
         }),
         React.createElement(
             'span',
@@ -103,13 +112,13 @@ function HiChip(props) {
             className: classNames(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 20
+            size: 16
         }),
         onDelete && React.createElement(HiIconBuilder, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 20
+            size: 16
         })
     );
 }

package/es/HiChip/HiChipSwitch.js

@@ -144,7 +144,8 @@ class HiChipSwitch extends React.PureComponent {
             active,
             onClick,
             onSelectionClick,
-            selection
+            selection,
+            selectionTitle
         } = this.props;
         let selectionProps = {
             tabIndex: '-1'
@@ -154,7 +155,8 @@ class HiChipSwitch extends React.PureComponent {
                 onClick: this.handleClickSelection,
                 role: 'button',
                 tabIndex: '0',
-                onKeyDown: this.handleKeyDownSelection
+                onKeyDown: this.handleKeyDownSelection,
+                title: selectionTitle
             };
         }
 
@@ -205,7 +207,8 @@ class HiChipSwitch extends React.PureComponent {
 HiChipSwitch.defaultProps = {
     activeIcon: 'check',
     active: false,
-    selection: null
+    selection: null,
+    selectionTitle: ''
 };
 HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -239,6 +242,10 @@ HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * nombre de valeurs selectionnées.
      */
-    selection: PropTypes.number
+    selection: PropTypes.number,
+    /**
+     * Title de la selection.
+     */
+    selectionTitle: PropTypes.string
 } : {};
 export default withStyles(styles, { name: 'HmuiHiChipSwitch' })(HiChipSwitch);

package/es/HiColoredLabel/HiColoredLabel.js

@@ -32,7 +32,7 @@ export const styles = theme => ({
  * Label with background color & text color
  */
 function HiColoredLabel(props) {
-    const { classes, label, color, active, beta } = props;
+    const { classes, className, label, color, active, beta } = props;
     let fontWeight = 400;
     if (beta) {
         fontWeight = 600;
@@ -42,7 +42,7 @@ function HiColoredLabel(props) {
     return React.createElement(
         'div',
         {
-            className: classNames(classes.root, { [classes.beta]: beta }),
+            className: classNames(classes.root, { [classes.beta]: beta }, className),
             style: {
                 backgroundColor: active ? color : fade(color, 0.08),
                 color: active ? getContrastedTextColor(color, '#4C4C4C', '#FFF') : color,
@@ -67,6 +67,10 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: PropTypes.object,
+    /**
+     * Surcharge les classes du composant
+     */
+    className: PropTypes.string,
     /**
      * Couleur du text & du background
      */
@@ -74,11 +78,12 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {
-    active: false
+    active: false,
+    color: '#737373'
 };
 
 export default withStyles(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);

package/es/HiDatePicker/HiDatePicker.js

@@ -33,6 +33,7 @@ class HiDatePicker extends React.Component {
         this.handleDayChange = this.handleDayChange.bind(this);
         this.handleCurrentMonthChange = this.handleCurrentMonthChange.bind(this);
         this.handleReset = this.handleReset.bind(this);
+        this.handleTimeChange = this.handleTimeChange.bind(this);
         this.openPanel = this.openPanel.bind(this);
         this.renderCaption = this.renderCaption.bind(this);
         this.renderOverlay = this.renderOverlay.bind(this);
@@ -51,31 +52,26 @@ class HiDatePicker extends React.Component {
     }
 
     handleDayChange(day, modifiers) {
-        this.timeout = setTimeout(() => {
-            if (this.datePickerInput && this.datePickerInput.getInput()) {
-                this.datePickerInput.getInput().focus();
-            }
-        }, 0);
-
-        if (modifiers.disabled) {
-            return; // TODO: delete ??
-        }
-
-        if (this.props.onChange) {
-            if (modifiers.selected) {
-                // Deselect day
-                this.props.onChange(undefined);
-            } else {
-                // Keep Time if set
-                if (this.props.enableTime) {
-                    if (this.props.value) {
-                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
-                    } else {
-                        day.setHours(0, 0);
-                    }
+        if (modifiers.selected) {
+            // Deselect day
+            this.props.onChange(undefined);
+        } else {
+            // Keep Time if set
+            if (this.props.enableTime && day !== undefined) {
+                if (this.props.value) {
+                    day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                } else {
+                    day.setHours(0, 0);
                 }
-                this.props.onChange(day);
             }
+            this.props.onChange(day);
+        }
+        if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
+            // Hide overlay & remove focus on input
+            document.activeElement.blur();
+        } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
+            // Open Time panel after date selection
+            this.openPanel('time');
         }
     }
 
@@ -103,6 +99,13 @@ class HiDatePicker extends React.Component {
         });
     }
 
+    handleTimeChange(date, precision) {
+        this.props.onChange(date);
+        if (date instanceof Date && precision === 'minute') {
+            document.activeElement.blur();
+        }
+    }
+
     openPanel(panel) {
         this.setState({
             openedPanel: panel
@@ -144,7 +147,7 @@ class HiDatePicker extends React.Component {
     renderTimePickerOverlay(propsOverlay) {
         const timePickerProps = {
             value: this.props.value,
-            onChange: this.props.onChange,
+            onChange: this.handleTimeChange,
             onCalendarClick: this.handleCalendarClick
         };
         return React.createElement(TimePickerOverlay, _extends({ key: 'time-picker-overlay' }, timePickerProps, propsOverlay));
@@ -296,8 +299,10 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     minimumDate: PropTypes.instanceOf(Date),
     /**
      * Callback à la sélection d'une date
+     *
+     * @param {Date} date sélectionnée
      */
-    onChange: PropTypes.func,
+    onChange: PropTypes.func.isRequired,
     /**
      * Callback au reset de l'input
      */

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);
 
@@ -105,11 +112,11 @@ class HiDateRangePicker extends React.Component {
         // else focus current input
         if (!this.props.enableTime) {
             if (day instanceof Date) {
-                this.timeout = setTimeout(() => {
-                    if (this.toInput && this.toInput.getInput()) {
-                        this.toInput.getInput().focus();
-                    }
-                }, 0);
+                if (name === 'from' && this.toInput) {
+                    this.toInput.getInput().focus();
+                } else if (name === 'to') {
+                    document.activeElement.blur();
+                }
             }
         } else {
             this.timeout = setTimeout(() => {
@@ -199,12 +206,18 @@ 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
@@ -237,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`]) {
@@ -255,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) {
@@ -313,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;
 
@@ -427,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 },
+            { className: classNames(classes.root, classes.rangePickerContainer) },
             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;
@@ -478,6 +513,7 @@ HiDateRangePicker.defaultProps = {
     disabledDays: [],
     disablePastDays: false,
     disableFutureDays: false,
+    staticPosition: false,
     enableTime: false,
     format: 'YYYY-DD-MM',
     labelFrom: 'Start',
@@ -553,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

@@ -27,10 +27,10 @@ export function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.last_24h;
-            from = moment().subtract(1, 'day');
-            to = moment();
-            info = `${from.calendar()} ${t.to_now}`;
+            label = t.today;
+            from = moment().startOf('day');
+            to = moment().endOf('day');
+            info = `${from.format(format)}`;
             break;
         case 'pd':
             label = t.yesterday;
@@ -97,7 +97,8 @@ export function buildDateRangeOptionByKey(key, t, format) {
 export const styles = theme => ({
     root: {
         maxWidth: 500,
-        marginLeft: -4
+        marginLeft: -4,
+        alignItems: 'flex-start'
     },
     dateSelect: {
         paddingTop: 1,
@@ -105,7 +106,9 @@ export const styles = theme => ({
     },
     dateRangePicker: {
         width: 'calc(100% + 8px)'
-    }
+    },
+    smSelect: {},
+    smRangePicker: {}
 });
 
 class HiDateRangeSelector extends React.Component {
@@ -127,6 +130,9 @@ class HiDateRangeSelector extends React.Component {
                     this.props.onChange('to', selectedOption.to.toDate());
                 }
             }
+            if (this.props.returnSelectValue === true) {
+                this.props.onChange('period', value);
+            }
         };
 
         this.state = {
@@ -171,9 +177,11 @@ class HiDateRangeSelector extends React.Component {
             required,
             to,
             translations,
-            classes
+            classes,
+            selectProps,
+            staticPosition
         } = _props,
-              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes']);
+              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
 
         const { selectedPreset } = this.state;
 
@@ -187,8 +195,8 @@ class HiDateRangeSelector extends React.Component {
             },
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 4 },
-                React.createElement(HiSelectField, {
+                { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
+                React.createElement(HiSelectField, _extends({
                     disabled: disabled,
                     error: error,
                     errorText: errorText,
@@ -203,12 +211,13 @@ 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(
                 Grid,
-                { item: true, xs: 12, sm: 8 },
+                { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
                 React.createElement(HiDateRangePicker, _extends({
                     classes: { root: classes.dateRangePicker },
                     id: idRange,
@@ -218,7 +227,8 @@ class HiDateRangeSelector extends React.Component {
                     onChange: onChange,
                     onReset: this.handleReset,
                     disabled: disabled || selectedPreset !== 'custom',
-                    translations: translations
+                    translations: translations,
+                    staticPosition: staticPosition
                 }, props))
             )
         );
@@ -229,22 +239,21 @@ 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',
@@ -325,6 +334,18 @@ 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,6 +2,7 @@
 
 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';
@@ -18,19 +19,27 @@ export const styles = theme => ({
     },
     itemCentered: {
         margin: 'auto'
+    },
+    currentDateItem: {
+        color: `${theme.palette.business.primary.normal} !important`
     }
 });
 
 class ListPicker extends React.PureComponent {
 
     componentDidMount() {
-        if (this.props.initAtMiddleScroll && this.scrollbars) {
+        if (this.position && this.scrollbars) {
+            this.scrollbars.scrollTop((this.position - 2) * 40);
+        } else if (this.props.initAtMiddleScroll && this.scrollbars) {
             this.scrollbars.scrollTop((this.scrollbars.getScrollHeight() - this.scrollbars.getClientHeight()) / 2 + 20);
         }
     }
 
     render() {
-        const { classes, itemList, onItemClick, selectedItem } = this.props;
+        const { classes, itemList, onItemClick, selectedItem, type } = this.props;
+
+        this.position = itemList.indexOf(selectedItem);
+        let now = new Date();
 
         return React.createElement(
             Scrollbars,
@@ -43,30 +52,36 @@ class ListPicker extends React.PureComponent {
             React.createElement(
                 MenuList,
                 null,
-                itemList.map(item => React.createElement(
-                    MenuItem,
-                    {
-                        key: `item-${item}`,
-                        classes: {
-                            root: classes.itemRoot,
-                            selected: classes.itemSelected
+                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
                         },
-                        onClick: () => onItemClick(item),
-                        selected: item === selectedItem
-                    },
-                    React.createElement(
-                        'span',
-                        { className: classes.itemCentered },
-                        item
-                    )
-                ))
+                        React.createElement(
+                            'span',
+                            { className: labelClass },
+                            item
+                        )
+                    );
+                })
             )
         );
     }
 }
 
 ListPicker.defaultProps = {
-    initAtMiddleScroll: false
+    initAtMiddleScroll: true
 };
 ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -88,6 +103,10 @@ ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Item sélectionné
      */
-    selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /**
+     * Type des données dans la liste
+     */
+    type: PropTypes.oneOf(['year', 'month'])
 } : {};
 export default withStyles(styles, { name: 'HmuiListPicker' })(ListPicker);