@hipay/hipay-material-ui 1.0.0-beta.7 → 1.0.0-beta.9

package/HiTable/HiTableHead.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SORTED_COLUMN_ERROR_MESSAGE = exports.styles = undefined;
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -43,6 +47,10 @@ var _reactProptypeConditionalRequire = require('react-proptype-conditional-requi
 
 var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _Table = require('material-ui/Table');
 
 var _PlusCircle = require('mdi-material-ui/PlusCircle');
@@ -79,11 +87,13 @@ var styles = exports.styles = function styles(theme) {
     return {
         thead: {
             position: 'relative',
-            display: 'block' /*seperates the header from the body allowing it to be positioned*/
-            , width: '100%',
+            width: '100%',
             overflow: 'visible',
             zIndex: 12
         },
+        theadFixedWidth: {
+            display: 'block' /*seperates the header from the body allowing it to be positioned*/
+        },
         theadRow: {
             backgroundColor: theme.palette.background3,
             zIndex: 12
@@ -226,7 +236,8 @@ var HiTableHead = function (_React$Component) {
                 sticky = _props.sticky,
                 translations = _props.translations,
                 view = _props.view,
-                lookupColumns = _props.lookupColumns;
+                lookupColumns = _props.lookupColumns,
+                fixedColumnWidth = _props.fixedColumnWidth;
             var _state = this.state,
                 hovered = _state.hovered,
                 openedOrderColumns = _state.openedOrderColumns,
@@ -234,7 +245,7 @@ var HiTableHead = function (_React$Component) {
 
 
             var headerProps = (0, _extends3.default)({
-                className: classes.thead
+                className: (0, _classnames2.default)(classes.thead, (0, _defineProperty3.default)({}, classes.theadFixedWidth, fixedColumnWidth))
             }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
             var unfixedColumnIsSet = false,
@@ -301,7 +312,8 @@ var HiTableHead = function (_React$Component) {
                                 fixedWidth: fixed,
                                 align: column['align'],
                                 sticky: firstColumn && sticky,
-                                lookedUp: lookupColumns.includes(column.colId)
+                                lookedUp: lookupColumns.includes(column.colId),
+                                fixedColumnWidth: fixedColumnWidth
                             });
                         }
                     }),
@@ -411,6 +423,11 @@ HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: _propTypes2.default.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/HiTable/OrderColumns.js

@@ -141,7 +141,8 @@ var styles = exports.styles = function styles(theme) {
         controlLabelRoot: {
             marginLeft: 6,
             marginBottom: 8,
-            fontSize: 15
+            fontSize: 15,
+            width: 160
         },
         switchLabelRoot: {
             marginLeft: 15,
@@ -150,7 +151,10 @@ var styles = exports.styles = function styles(theme) {
         columnLabel: {
             position: 'relative',
             top: 5,
-            left: 5
+            left: 5,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
         },
         label: {
             fontWeight: 'inherit'

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -0,0 +1,73 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '../styles';
+import HiStepper from './HiStepper';
+import HiStepLabel from './HiStepLabel';
+import HiStep from './HiStep';
+
+export const styles = theme => ({
+    label: _extends({
+        display: 'inline-block',
+        marginLeft: 12,
+        fontWeight: theme.typography.fontWeightRegular,
+        color: theme.palette.neutral.normal
+    }, theme.typography.body3),
+    active: {
+        fontWeight: theme.typography.fontWeightMedium
+    }
+});
+
+class HiBreadcrumb extends React.PureComponent {
+    constructor(...args) {
+        var _temp;
+
+        return _temp = super(...args), this.handleStep = idx => () => {
+            this.props.handleStep(idx);
+        }, _temp;
+    }
+
+    render() {
+        const { activeStep, steps } = this.props;
+
+        return React.createElement(
+            HiStepper,
+            { activeStep: activeStep },
+            React.createElement(
+                'div',
+                null,
+                steps.map((step, index) => {
+                    const validConnector = step.status === 'validated' && index < steps.length - 1 && steps[index + 1].status === 'validated';
+                    return React.createElement(
+                        HiStep,
+                        {
+                            key: step.id,
+                            onClick: this.handleStep(index),
+                            isLast: index === steps.length - 1,
+                            validConnector: validConnector
+                        },
+                        React.createElement(
+                            HiStepLabel,
+                            {
+                                active: activeStep === index,
+                                status: step.status,
+                                notificationNumber: step.notificationNumber
+                            },
+                            step.label
+                        )
+                    );
+                })
+            )
+        );
+    }
+}
+
+HiBreadcrumb.defaultProps = {
+    activeStep: 0
+};
+HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
+    activeStep: PropTypes.number,
+    steps: PropTypes.array.isRequired,
+    handleStep: PropTypes.func
+} : {};
+export default withStyles(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);

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/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}`;