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

package/es/HiBreadcrumb/HiStep.js

@@ -0,0 +1,93 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+import HiStepConnector from './HiStepConnector';
+
+export const styles = theme => ({
+    root: {},
+    horizontal: {
+        paddingLeft: theme.spacing.unit,
+        paddingRight: theme.spacing.unit,
+        '&:first-child': {
+            paddingLeft: 0
+        },
+        '&:last-child': {
+            paddingRight: 0
+        }
+    },
+    vertical: {}
+});
+
+function HiStep(props) {
+    const {
+        active,
+        children,
+        classes,
+        className: classNameProp,
+        index,
+        isLast,
+        orientation,
+        validConnector
+    } = props,
+          other = _objectWithoutProperties(props, ['active', 'children', 'classes', 'className', 'index', 'isLast', 'orientation', 'validConnector']);
+
+    const className = classNames(classes.root, classes[orientation], classNameProp);
+
+    return React.createElement(
+        'div',
+        _extends({ className: className }, other),
+        React.Children.map(children, child => React.cloneElement(child, _extends({
+            active,
+            icon: index + 1,
+            orientation
+        }, child.props))),
+        !isLast && React.createElement(HiStepConnector, { orientation: 'vertical', validConnector: validConnector })
+    );
+}
+
+HiStep.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Sets the step as active. Is passed to child components.
+     */
+    active: PropTypes.bool,
+    /**
+     * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
+     */
+    children: PropTypes.node,
+    /**
+     * @ignore
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * @ignore
+     * Used internally for numbering.
+     */
+    index: PropTypes.number,
+    /**
+     * @ignore
+     * Used to know which step is the last, to not put a HiStepConnector
+     */
+    isLast: PropTypes.bool,
+    /**
+     * @ignore
+     */
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+    /**
+     * @ignore
+     */
+    validConnector: PropTypes.bool
+} : {};
+
+HiStep.defaultProps = {
+    active: false,
+    validConnector: false
+};
+
+export default withStyles(styles, { name: 'MuiStep' })(HiStep);

package/es/HiBreadcrumb/HiStepConnector.js

@@ -0,0 +1,83 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+
+export const styles = theme => ({
+    root: {
+        flex: '1 1 auto'
+    },
+    vertical: {
+        marginLeft: 13, // half icon
+        padding: `0 0 ${theme.spacing.unit}px`
+    },
+    line: {
+        display: 'block',
+        borderColor: theme.palette.grey[600]
+    },
+    lineHorizontal: {
+        borderTopStyle: 'solid',
+        borderTopWidth: 1
+    },
+    lineVertical: {
+        borderLeftStyle: 'solid',
+        borderLeftWidth: 2,
+        minHeight: theme.spacing.unit * 3,
+        height: 37
+    },
+    lineVerticalGreen: {
+        borderColor: theme.palette.status[116]
+    }
+});
+
+/**
+ * @ignore - internal component.
+ */
+class HiStepConnector extends React.PureComponent {
+    render() {
+        const _props = this.props,
+              {
+            className: classNameProp,
+            classes,
+            orientation,
+            validConnector
+        } = _props,
+              other = _objectWithoutProperties(_props, ['className', 'classes', 'orientation', 'validConnector']);
+
+        const className = classNames(classes.root, classes[orientation], classNameProp);
+        const lineClassName = classNames(classes.line, {
+            [classes.lineHorizontal]: orientation === 'horizontal',
+            [classes.lineVertical]: orientation === 'vertical',
+            [classes.lineVerticalGreen]: orientation === 'vertical' && validConnector
+        });
+
+        return React.createElement(
+            'div',
+            _extends({ className: className }, other),
+            React.createElement('span', { className: lineClassName })
+        );
+    }
+}
+
+HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to the component.
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * @ignore
+     */
+    orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+} : {};
+
+HiStepConnector.defaultProps = {
+    orientation: 'vertical'
+};
+
+export default withStyles(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);

package/es/HiBreadcrumb/HiStepIcon.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+
+export const styles = theme => ({
+    circle: {
+        borderRadius: '50%',
+        width: 16,
+        height: 16,
+        border: 'solid 2px ' + theme.palette.neutral.normal,
+        marginLeft: 6,
+        display: 'inline-block'
+    },
+    validated: {
+        border: 'solid 2px ' + theme.palette.status[116]
+    },
+    refused: {
+        border: 'solid 2px ' + theme.palette.negative.normal
+    },
+    warning: {
+        border: 'solid 2px ' + theme.palette.middle.normal
+    },
+    active: {
+        border: '5px solid rgba(255, 0, 0, 0)',
+        backgroundClip: 'padding-box',
+        boxShadow: '0 0 0 1px ' + theme.palette.neutral.normal,
+        backgroundColor: theme.palette.neutral.normal
+    },
+    activeValidated: {
+        boxShadow: '0 0 0 1px ' + theme.palette.status[116],
+        backgroundColor: theme.palette.status[116]
+    },
+    activeRefused: {
+        boxShadow: '0 0 0 1px ' + theme.palette.negative.normal,
+        backgroundColor: theme.palette.negative.normal
+    },
+    activeWarning: {
+        boxShadow: '0 0 0 1px ' + theme.palette.middle.normal,
+        backgroundColor: theme.palette.middle.normal
+    }
+});
+
+class HiStepIcon extends React.PureComponent {
+    render() {
+        const { active, classes, status } = this.props;
+
+        return React.createElement('div', {
+            className: classNames(classes.circle, {
+                [classes.activeRefused]: status === 'refused' && active,
+                [classes.activeValidated]: status === 'validated' && active,
+                [classes.activeWarning]: status === 'warning' && active,
+                [classes.active]: active,
+                [classes.refused]: status === 'refused',
+                [classes.validated]: status === 'validated',
+                [classes.warning]: status === 'warning'
+            })
+        });
+    }
+}
+
+HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Whether this step is active.
+     */
+    active: PropTypes.bool,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object.isRequired,
+
+    status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
+} : {};
+
+HiStepIcon.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    classes: {}
+};
+
+export default withStyles(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);

package/es/HiBreadcrumb/HiStepLabel.js

@@ -0,0 +1,154 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+import HiStepIcon from './HiStepIcon';
+import HiPin from '../HiPins';
+
+export const styles = theme => ({
+    root: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    test: {
+        marginLeft: '0 '
+    },
+    vertical: {
+        marginTop: -10,
+        marginBottom: -6
+    },
+    label: _extends({
+        display: 'inline-block',
+        marginLeft: 4,
+        fontWeight: theme.typography.fontWeightRegular,
+        color: theme.palette.neutral.normal,
+        marginBottom: -4
+    }, theme.typography.body3),
+    labelContainer: {
+        marginBottom: 4,
+        maxWidth: 160
+    },
+    validated: {
+        color: theme.palette.status[116]
+    },
+    refused: {
+        color: theme.palette.negative.normal
+    },
+    active: {
+        fontWeight: theme.typography.fontWeightMedium
+    },
+    warning: {
+        color: theme.palette.middle.normal
+    },
+    pin: {
+        marginLeft: 4
+    },
+    shortEllipsis: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        maxWidth: 51
+    },
+    longEllipsis: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        maxWidth: 90
+    }
+});
+
+function HiStepLabel(props) {
+    const {
+        active,
+        children,
+        classes,
+        className: classNameProp,
+        icon,
+        notificationNumber,
+        orientation,
+        status
+    } = props,
+          other = _objectWithoutProperties(props, ['active', 'children', 'classes', 'className', 'icon', 'notificationNumber', 'orientation', 'status']);
+
+    return React.createElement(
+        'span',
+        _extends({
+            className: classNames(classes.root, {
+                [classes.vertical]: orientation === 'vertical'
+            }, classNameProp)
+        }, other),
+        icon && React.createElement(
+            'span',
+            { className: classes.iconContainer },
+            React.createElement(HiStepIcon, { active: active, status: status })
+        ),
+        React.createElement(
+            'span',
+            { className: classes.labelContainer },
+            React.createElement(
+                'div',
+                {
+                    className: classNames(classes.label, {
+                        [classes.validated]: status === 'validated',
+                        [classes.refused]: status === 'refused',
+                        [classes.warning]: status === 'warning',
+                        [classes.active]: active,
+                        [classes.shortEllipsis]: notificationNumber > 0,
+                        [classes.longEllipsis]: notificationNumber === 0
+                    })
+                },
+                children
+            ),
+            notificationNumber > 0 && React.createElement(
+                'span',
+                { className: classes.pin },
+                React.createElement(
+                    HiPin,
+                    {
+                        color: props.theme.palette.business.primary.normal,
+                        className: classes.test
+                    },
+                    notificationNumber
+                )
+            )
+        )
+    );
+}
+
+HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * @ignore
+     * Sets the step as active. Is passed to child components.
+     */
+    active: PropTypes.bool,
+    /**
+     * In most cases will simply be a string containing a title for the label.
+     */
+    children: PropTypes.node,
+    /**
+     * Custom styles for component.
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * @ignore
+     */
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+
+    status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
+} : {};
+
+HiStepLabel.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    orientation: 'vertical'
+};
+
+export default withStyles(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);

package/es/HiBreadcrumb/HiStepper.js

@@ -0,0 +1,62 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+import Paper from '../Paper';
+
+export const styles = theme => ({
+    root: {
+        display: 'flex',
+        padding: theme.spacing.unit * 3,
+        maxWidth: 160,
+        flexDirection: 'column'
+    }
+});
+
+class HiStepper extends React.PureComponent {
+
+    render() {
+        const _props = this.props,
+              { activeStep, children, classes, className: classNameProp } = _props,
+              other = _objectWithoutProperties(_props, ['activeStep', 'children', 'classes', 'className']);
+
+        const className = classNames(classes.root, classNameProp);
+
+        const childrenArray = React.Children.toArray(children.props.children);
+
+        const steps = childrenArray.map((step, index) => {
+            return React.cloneElement(step, _extends({ index, active: activeStep === index }, step.props));
+        });
+
+        return React.createElement(
+            Paper,
+            _extends({ square: true, elevation: 0, className: className }, other),
+            steps
+        );
+    }
+}
+
+HiStepper.defaultProps = {
+    activeStep: 0
+};
+HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Set the active step (zero based index).
+     */
+    activeStep: PropTypes.number,
+    /**
+     * Two or more `<Step />` components.
+     */
+    children: PropTypes.node.isRequired,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string
+} : {};
+export default withStyles(styles, { name: 'MuiHiStepper' })(HiStepper);

package/es/HiBreadcrumb/index.js

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

package/es/HiCheckbox/HiCheckbox.js

@@ -12,7 +12,10 @@ import MinusBox from 'mdi-material-ui/MinusBox';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
-    root: {},
+    root: {
+        marginRight: 12,
+        marginLeft: 12
+    },
     checked: {
         color: theme.palette.business.primary.normal
     },

package/es/HiChip/HiChip.js

@@ -87,12 +87,12 @@ function HiChip(props) {
             })
         },
         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 +103,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

@@ -74,11 +74,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
      */