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

package/es/HiDatePicker/HiDateRangePicker.js

@@ -105,11 +105,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,9 +199,11 @@ 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();
         }
     }
 

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -27,7 +27,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.last_24h;
+            label = t.today;
             from = moment().subtract(1, 'day');
             to = moment();
             info = `${from.calendar()} ${t.to_now}`;
@@ -105,7 +105,9 @@ export const styles = theme => ({
     },
     dateRangePicker: {
         width: 'calc(100% + 8px)'
-    }
+    },
+    smSelect: {},
+    smRangePicker: {}
 });
 
 class HiDateRangeSelector extends React.Component {
@@ -125,6 +127,9 @@ 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);
+                    }
                 }
             }
         };
@@ -171,9 +176,10 @@ class HiDateRangeSelector extends React.Component {
             required,
             to,
             translations,
-            classes
+            classes,
+            selectProps
         } = _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']);
 
         const { selectedPreset } = this.state;
 
@@ -187,8 +193,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,
@@ -204,11 +210,11 @@ class HiDateRangeSelector extends React.Component {
                     value: selectedPreset,
                     containerWidth: this.state.containerWidth,
                     classes: { root: classes.dateSelect }
-                })
+                }, 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,
@@ -229,22 +235,20 @@ HiDateRangeSelector.defaultProps = {
     availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
     defaultPreset: 'cd',
     enableTime: false,
+    returnSelectValue: 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 +329,14 @@ 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,
     /**
      * 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);

package/es/HiDatePicker/Overlays/MonthPickerOverlay.js

@@ -34,13 +34,17 @@ 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: value ? value.getMonth() : null
+                selectedItem: currentMonth,
+                type: 'month'
             })
         );
     }

package/es/HiDatePicker/Overlays/YearPickerOverlay.js

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

package/es/HiDotsStepper/HiDot.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import withStyles from '../styles/withStyles';
+import ButtonBase from '../ButtonBase';
+
+export const styles = theme => ({
+    dot: {
+        backgroundColor: theme.palette.dot.neutral,
+        borderRadius: '100%',
+        width: 12,
+        height: 12,
+        '&:hover': {
+            transform: 'scale(1.2)'
+        },
+        marginLeft: 12
+    },
+    dotActive: {
+        marginTop: 4,
+        marginLeft: 4,
+        '&:hover': {
+            transform: 'scale(1)'
+        }
+    },
+    dotValidated: {
+        backgroundColor: theme.palette.status[116]
+    },
+    dotRefused: {
+        backgroundColor: theme.palette.error.main
+    },
+    dotAround: {
+        backgroundColor: 'transparent',
+        borderRadius: '100%',
+        width: 24,
+        height: 24,
+        marginLeft: 6,
+        border: '2px solid ' + theme.palette.dot.neutral,
+        '&:hover': {
+            transform: 'scale(1.2)'
+        }
+    },
+    dotAroundValidated: {
+        border: '2px solid ' + theme.palette.status[116]
+    },
+    dotAroundRefused: {
+        border: '2px solid ' + theme.palette.error.main
+    }
+});
+
+class HiDot extends React.PureComponent {
+
+    render() {
+        const { active, status, classes, onClick } = this.props;
+
+        const dotAroundClass = classnames(classes.dotAround, {
+            [classes.dotAroundValidated]: status === 'validated',
+            [classes.dotAroundRefused]: status === 'refused'
+        });
+
+        const dotClassName = classnames(classes.dot, {
+            [classes.dotActive]: active,
+            [classes.dotRefused]: status === 'refused',
+            [classes.dotValidated]: status === 'validated'
+        });
+
+        return React.createElement(
+            ButtonBase,
+            { disableRipple: true, role: 'button', onClick: onClick },
+            active ? React.createElement(
+                'div',
+                { className: dotAroundClass },
+                React.createElement('div', { className: dotClassName })
+            ) : React.createElement('div', { className: dotClassName })
+        );
+    }
+}
+
+HiDot.defaultProps = {
+    active: false,
+    status: 'unreviewed'
+};
+HiDot.propTypes = process.env.NODE_ENV !== "production" ? {
+    active: PropTypes.bool,
+    classes: PropTypes.object,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    onClick: PropTypes.func,
+    status: PropTypes.oneOf(['refused', 'validated', 'unreviewed'])
+} : {};
+export default withStyles(styles, { name: 'MuiHiDot' })(HiDot);

package/es/HiDotsStepper/HiDotsStepper.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import HiDot from './HiDot';
+
+export const styles = theme => ({
+    dotStepper: {
+        width: '100%',
+        maxWidth: 200,
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+});
+
+class HiDotsStepper extends React.PureComponent {
+
+    constructor() {
+        super();
+
+        this.handleClick = activeStep => () => {
+            this.props.onChange(activeStep);
+        };
+
+        this.handleNavigation = activeStep => e => {
+            let nextStep = activeStep;
+            const { steps } = this.props;
+
+            if (e.key === 'ArrowLeft') nextStep -= 1;
+            if (e.key === 'ArrowRight') nextStep += 1;
+
+            nextStep = (nextStep + steps.length) % steps.length;
+
+            // Permet la navigation d'un Dot au suivant / précédent
+            document.querySelector(`div[tabIndex="${nextStep}"]`).focus();
+
+            this.props.onChange(nextStep);
+        };
+
+        this.handleClick = this.handleClick.bind(this);
+        this.handleNavigation = this.handleNavigation.bind(this);
+    }
+
+    render() {
+        const { classes, activeStep, steps } = this.props;
+
+        const listDots = steps.map((step, idx) => {
+            const { id, status } = step;
+            return React.createElement(
+                'div',
+                {
+                    key: id,
+                    tabIndex: id,
+                    className: classes.dotContainer,
+                    role: 'navigation',
+                    onKeyDown: this.handleNavigation(idx)
+                },
+                React.createElement(HiDot, {
+                    status: status,
+                    active: idx === activeStep,
+                    onClick: this.handleClick(idx)
+                })
+            );
+        });
+
+        return React.createElement(
+            'div',
+            { className: classes.dotStepper },
+            listDots
+        );
+    }
+}
+
+HiDotsStepper.propTypes = process.env.NODE_ENV !== "production" ? {
+    activeStep: PropTypes.number.isRequired,
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    steps: PropTypes.array.isRequired
+} : {};
+export default withStyles(styles, { name: 'MuiHiDotsStepper' })(HiDotsStepper);

package/es/HiDotsStepper/index.js

@@ -0,0 +1 @@
+export { default } from './HiDotsStepper';

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -0,0 +1,170 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent ExpansionPanel
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import ExpansionPanel, { ExpansionPanelSummary, ExpansionPanelDetails } from 'material-ui/ExpansionPanel';
+import Typography from 'material-ui/Typography';
+import MenuDownIcon from 'mdi-material-ui/MenuDown';
+import { withStyles } from '../styles';
+
+export const styles = theme => ({
+    heading: {
+        fontSize: 20,
+        lineHeight: '24px',
+        fontWeight: theme.typography.fontWeightLight
+    },
+    secondaryHeading: {
+        fontSize: 11,
+        color: '#737373',
+        textAlign: 'right',
+        lineHeight: '24px',
+        fontWeight: theme.typography.fontWeightRegular,
+        verticalAlign: 'middle',
+        '&>svg': {
+            fontSize: 18,
+            marginLeft: 3,
+            marginBottom: -5
+        }
+    },
+    column: {
+        flexBasis: '100%'
+    },
+    panelSummary: {
+        '&>div:first-child': {
+            margin: '12px 0',
+            '&>div:last-child': {
+                paddingRight: 8
+            }
+        },
+        '&>div:last-child': {
+            width: 16,
+            height: 16
+        }
+    },
+    panelSummaryExpanded: {
+        borderBottom: '1px solid #E3E6E7',
+        minHeight: 0
+    },
+    expandMoreIcon: {
+        margin: 0,
+        fontSize: 18,
+        width: 20
+    },
+    panel: {
+        boxShadow: 'none',
+        border: 'none'
+    },
+    panelDetails: {
+        padding: '8px 24px 8px'
+    },
+    disabledPanel: {
+        backgroundColor: '#ffffff',
+        opacity: 1
+    },
+    expandIconExpanded: {
+        transform: 'translateY(-50%) rotate(-90deg)'
+    }
+});
+
+class HiExpansionPanel extends React.PureComponent {
+
+    render() {
+        const _props = this.props,
+              {
+            disabled,
+            heading,
+            secondaryHeading,
+            secondaryHeadingDisabled,
+            secondaryHeadingIcon,
+            children,
+            classes
+        } = _props,
+              props = _objectWithoutProperties(_props, ['disabled', 'heading', 'secondaryHeading', 'secondaryHeadingDisabled', 'secondaryHeadingIcon', 'children', 'classes']);
+
+        const effectiveDisabled = disabled || !children;
+
+        return React.createElement(
+            ExpansionPanel,
+            _extends({
+                disabled: effectiveDisabled,
+                classes: { root: classes.panel, disabled: classes.disabledPanel }
+            }, props),
+            React.createElement(
+                ExpansionPanelSummary,
+                {
+                    classes: {
+                        root: classes.panelSummary,
+                        disabled: classes.disabledPanel,
+                        expanded: classes.panelSummaryExpanded,
+                        expandIconExpanded: classes.expandIconExpanded
+                    },
+                    expandIcon: React.createElement(MenuDownIcon, { classes: { root: classes.expandMoreIcon } })
+                },
+                React.createElement(
+                    'div',
+                    { className: classes.column },
+                    React.createElement(
+                        Typography,
+                        { classes: { root: classes.heading } },
+                        heading
+                    )
+                ),
+                React.createElement(
+                    'div',
+                    { className: classes.column },
+                    React.createElement(
+                        Typography,
+                        { classes: { root: classes.secondaryHeading } },
+                        !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled,
+                        secondaryHeadingIcon
+                    )
+                )
+            ),
+            !!children && React.createElement(
+                ExpansionPanelDetails,
+                { classes: { root: classes.panelDetails } },
+                children
+            )
+        );
+    }
+}
+
+HiExpansionPanel.defaultProps = {
+    disabled: false,
+    secondaryHeading: '',
+    secondaryHeadingIcon: '',
+    secondaryHeadingDisabled: 'PAS ENCORE COMPLETE'
+};
+HiExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu du panel
+     */
+    children: PropTypes.any,
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Désactivé
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Titre principal du panel
+     */
+    heading: PropTypes.string.isRequired,
+    /**
+     * Titre secondaire du panel
+     */
+    secondaryHeading: PropTypes.string,
+    /**
+     * Titre secondaire si désactivé
+     */
+    secondaryHeadingDisabled: PropTypes.string,
+    /**
+     * Icone dans le titre secondaire du panel
+     */
+    secondaryHeadingIcon: PropTypes.any
+} : {};
+export default withStyles(styles, { name: 'HmuiHiExpansionPanel' })(HiExpansionPanel);

package/es/HiExpansionPanel/index.js

@@ -0,0 +1 @@
+export { default } from './HiExpansionPanel';