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

package/es/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -0,0 +1,109 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _Array$from from 'babel-runtime/core-js/array/from';
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import CustomOverlayLayout from './CustomOverlayLayout';
+import ListPicker from '../ListPicker';
+
+class YearPickerOverlay extends React.Component {
+
+    constructor(props) {
+        super();
+
+        this.years = [];
+        this.handleYearClick = this.handleYearClick.bind(this);
+
+        const currentYear = new Date().getFullYear();
+        const minimumYear = props.minimumDate.getFullYear();
+
+        this.years = [currentYear];
+
+        // get years from minimum date to now
+        if (!props.disablePastDays && currentYear > minimumYear) {
+            this.years = this.years.concat(_Array$from(Array(currentYear - minimumYear).keys(), key => key + minimumYear));
+        }
+
+        // get years from now to at least 10 years forward or as much as past years
+        if (!props.disableFutureDays) {
+            this.years = this.years.concat(_Array$from(Array(Math.max(currentYear - minimumYear, 10)).keys(), key => key + currentYear + 1));
+        }
+
+        this.years.sort();
+    }
+
+    handleYearClick(year) {
+        if (this.props.onChange) {
+            const date = this.props.value ? new Date(this.props.value) : new Date();
+            date.setFullYear(year);
+            this.props.onChange(date);
+        }
+    }
+
+    render() {
+        const _props = this.props,
+              { value, translations } = _props,
+              props = _objectWithoutProperties(_props, ['value', 'translations']);
+
+        return React.createElement(
+            CustomOverlayLayout,
+            _extends({ headerElement: translations.year }, props),
+            React.createElement(ListPicker, {
+                itemList: this.years,
+                onItemClick: this.handleYearClick,
+                selectedItem: value ? value.getFullYear() : null
+            })
+        );
+    }
+}
+
+YearPickerOverlay.defaultProps = {
+    disableFutureDays: false,
+    disablePastDays: false,
+    minimumDate: new Date(2013, 4, 1), // by default 1 May 2013
+    translations: {
+        year: 'Year'
+    }
+};
+YearPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * ReactDayPicker prop
+     */
+    children: PropTypes.element,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
+     */
+    disableFutureDays: PropTypes.bool,
+    /**
+     * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
+     */
+    disablePastDays: PropTypes.bool,
+    /**
+     * ReactDayPicker prop
+     */
+    localeUtils: PropTypes.object,
+    /**
+     * Date minimale sélectionnable
+     */
+    minimumDate: PropTypes.instanceOf(Date),
+    /**
+     * Fonction de callback
+     */
+    onChange: PropTypes.func,
+    /**
+     * Traductions
+     */
+    translations: PropTypes.object,
+    /**
+     * Date du mois affiché
+     */
+    value: PropTypes.instanceOf(Date)
+} : {};
+export default YearPickerOverlay;

package/es/HiDatePicker/Overlays/index.js

@@ -0,0 +1,5 @@
+export { default as Overlay } from './Overlay';
+export { default as CustomOverlayLayout } from './CustomOverlayLayout';
+export { default as MonthPickerOverlay } from './MonthPickerOverlay';
+export { default as TimePickerOverlay } from './TimePickerOverlay';
+export { default as YearPickerOverlay } from './YearPickerOverlay';

package/es/HiDatePicker/Weekday.js

@@ -0,0 +1,34 @@
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Weekday = ({ weekday, className, localeUtils, locale }) => {
+  const weekdayName = localeUtils.formatWeekdayLong(weekday, locale);
+  return React.createElement(
+    'div',
+    { className: className, title: weekdayName },
+    weekdayName.slice(0, 1)
+  );
+};
+
+Weekday.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * ReactDayPicker prop
+   */
+  className: PropTypes.string,
+  /**
+   * ReactDayPicker prop
+   */
+  locale: PropTypes.string,
+  /**
+   * ReactDayPicker prop
+   */
+  localeUtils: PropTypes.object,
+  /**
+   * ReactDayPicker prop
+   */
+  weekday: PropTypes.number
+} : {};
+
+export default Weekday;

package/es/HiDatePicker/index.js

@@ -0,0 +1,7 @@
+export { default } from './HiDatePicker';
+import _HiDateRangePicker from './HiDateRangePicker';
+export { _HiDateRangePicker as HiDateRangePicker };
+import _HiDateRangeSelector from './HiDateRangeSelector';
+export { _HiDateRangeSelector as HiDateRangeSelector };
+import _HiWeekPicker from './HiWeekPicker';
+export { _HiWeekPicker as HiWeekPicker };

package/es/HiDatePicker/stylesheet.js

@@ -0,0 +1,175 @@
+import _extends from 'babel-runtime/helpers/extends';
+export default (theme => ({
+    root: {
+        position: 'relative',
+        display: 'inline-block',
+        width: '100%',
+        minWidth: 252,
+        maxWidth: 500
+    },
+    fromInput: {
+        position: 'relative',
+        display: 'inline-block',
+        width: 'calc(50% - 4px)',
+        paddingRight: 4
+    },
+    toInput: {
+        position: 'relative',
+        display: 'inline-block',
+        width: 'calc(50% - 4px)',
+        marginLeft: 4
+    },
+    // The container element
+    container: {
+        width: '100%',
+        display: 'inline-block',
+        fontFamily: theme.typography.fontFamily
+    },
+    // The wrapper element, used for keyboard interaction
+    wrapper: {
+        width: '100%',
+        position: 'relative',
+        userSelect: 'none',
+        flexDirection: 'row',
+        backgroundColor: theme.palette.background3
+    },
+    // TODO : Added to the container when there's no interaction with the calendar
+    interactionDisabled: {},
+    // The navigation bar with the arrows to switch between months
+    navBar: {},
+    // Button to switch to the previous month
+    navButtonPrev: {},
+    // Button to switch to the next month
+    navButtonNext: {},
+    // Added to the navbuttons when disabled with fromMonth/toMonth props
+    navButtonInteractionDisabled: {
+        display: 'none'
+    },
+    // Container of the months table
+    months: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        padding: '0 14px'
+    },
+    // The month's main table
+    month: {
+        display: 'table',
+        borderCollapse: 'collapse',
+        borderSpacing: 0,
+        userSelect: 'none'
+        // margin: '0 1rem',
+        // marginTop: '1rem',
+    },
+    // The caption element, containing the current month's name and year
+    caption: {
+        padding: '0 0.5rem',
+        display: 'table-caption',
+        textAlign: 'left',
+        marginBottom: '0.5rem',
+        '&div': {
+            fontSize: '1.15rem',
+            fontWeight: 500
+        }
+    },
+    // Table header displaying the weekdays names
+    weekdays: {
+        marginTop: '1rem',
+        display: 'table-header-group'
+    },
+    // Table row displaying the weekdays names
+    weekdaysRow: {
+        display: 'table-row',
+        height: 40
+    },
+    // Cell displaying the weekday name
+    weekday: _extends({
+        display: 'table-cell'
+    }, theme.typography.body2, {
+        color: theme.palette.neutral.normal,
+        fontWeight: theme.typography.fontWeightRegular,
+        textAlign: 'center',
+        verticalAlign: 'middle'
+    }),
+    // Table's body with the weeks
+    body: {
+        display: 'table-row-group',
+        padding: '12px 0'
+    },
+    week: {
+        display: 'table-row'
+    },
+    // Table's row for each week
+    weekNumber: {
+        display: 'table-cell',
+        padding: '0.5rem',
+        textAlign: 'right',
+        verticalAlign: 'middle',
+        minWidth: '1rem',
+        fontSize: '0.75em',
+        cursor: 'pointer',
+        color: '#8b9898',
+        borderRight: '1px solid #eaecec'
+    },
+    // The single day cell
+    day: _extends({
+        display: 'table-cell',
+        padding: '4px 8px',
+        textAlign: 'center',
+        cursor: 'pointer',
+        verticalAlign: 'middle',
+        outline: 'none'
+    }, theme.typography.body2, {
+        color: theme.palette.neutral.dark,
+        fontWeight: theme.typography.fontWeightRegular
+    }),
+    // The calendar footer (only with todayButton prop)
+    footer: {
+        marginTop: 12,
+        borderTop: '1px solid',
+        borderTopColor: theme.palette.line.stepper
+    },
+    // The today button (only with todayButton prop)
+    todayButton: _extends({
+        width: '100%',
+        border: 'none',
+        backgroundImage: 'none',
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        cursor: 'pointer',
+        height: 40
+    }, theme.typography.body2, {
+        color: theme.palette.neutral.normal,
+        fontWeight: theme.typography.fontWeightMedium,
+        textTransform: 'uppercase'
+    }),
+    /* default modifiers */
+    // Added to the day's cell for the current day
+    today: {
+        color: theme.palette.business.primary.light,
+        fontWeight: theme.typography.fontWeightMedium
+    },
+    // Added to the day's cell outside the current month
+    outside: {
+        backgroundColor: '#F8F9FB',
+        color: theme.palette.neutral.normal
+    },
+    // Added to the day's cell specified in the "disabledDays" prop
+    disabled: {
+        color: '#dce0e0',
+        cursor: 'default'
+    },
+    // Added to the day's cell specified in the "selectedDays" prop
+    /*
+    selected: {
+        borderRadius: '50%',
+        backgroundColor: theme.palette.business.primary.normal,
+        color: theme.palette.business.primary.contrast,
+    },
+    */
+    selected: {
+        // backgroundColor: fade(theme.palette.business.primary.normal, 0.36),
+        backgroundColor: theme.palette.business.primary.normal,
+        color: theme.palette.business.primary.contrast
+    }
+}));

package/es/HiForm/HiEmailField.js

@@ -0,0 +1,71 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent HiTextField
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import validator from 'validator';
+import HiTextField from './HiTextField';
+
+/**
+ * Champs input email pour formulaire
+ */
+class HiEmailField extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.handleBlur = () => {
+            if (this.props.onError && this.props.value !== '' && !validator.isEmail(this.props.value)) {
+                this.props.onError();
+            }
+
+            if (this.props.onBlur) {
+                this.props.onBlur();
+            }
+        };
+
+        this.handleBlur = this.handleBlur.bind(this);
+    }
+
+    render() {
+        const _props = this.props,
+              { error, errorText } = _props,
+              otherProps = _objectWithoutProperties(_props, ['error', 'errorText']);
+
+        return React.createElement(HiTextField, _extends({}, otherProps, {
+            type: 'email',
+            error: error,
+            errorText: errorText,
+            onBlur: this.handleBlur
+        }));
+    }
+}
+
+HiEmailField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Si `true`, le champs sera en erreur.
+     */
+    error: PropTypes.bool,
+    /**
+     * Texte de l'erreur
+     */
+    errorText: PropTypes.string,
+    /**
+     * Fonction de callback appelée lorsqu'on quitte le champs input
+     */
+    onBlur: PropTypes.func,
+    /**
+     * Fonction appelée en cas d'erreur
+     */
+    onError: PropTypes.func,
+    /**
+     * Valeur de l'élément input
+     */
+    value: PropTypes.string
+} : {};
+export default HiEmailField;

package/es/HiForm/HiFormControl.js

@@ -0,0 +1,298 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+// @inheritedComponent FormControl
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Alert, Information } from 'mdi-material-ui';
+import { FormControl, FormHelperText } from 'material-ui/Form';
+import withStyles from '../styles/withStyles';
+import HiFormLabel from './HiFormLabel';
+
+export const styles = theme => ({
+    helperTextClassName: {
+        color: theme.palette.neutral.normal,
+        fontSize: 11,
+        textAlign: 'right',
+        marginTop: 2
+    },
+    errorIcon: {
+        width: 19,
+        height: 19,
+        color: theme.palette.negative.normal,
+        position: 'absolute',
+        right: 8,
+        cursor: 'pointer',
+        top: '-2px'
+    },
+    errorDiv: _extends({}, theme.typography.h5, {
+        backgroundColor: theme.palette.negative.normal,
+        color: '#FFFFFF',
+        padding: '16px 8px',
+        verticalAlign: 'middle',
+        borderRadius: 2,
+        position: 'relative',
+        marginBottom: 5,
+        fontWeight: theme.typography.fontWeightRegular
+    }),
+    arrowDown: {
+        width: 0,
+        height: 0,
+        borderLeft: '4px solid transparent',
+        borderRight: '4px solid transparent',
+        borderTop: '4px solid #000',
+        position: 'absolute',
+        bottom: -4,
+        right: 14
+    },
+    errorDivArrowDown: {
+        borderTopColor: theme.palette.negative.normal
+    },
+    helperIcon: {
+        width: 19,
+        height: 19,
+        color: theme.palette.neutral.normal,
+        position: 'absolute',
+        right: 8,
+        cursor: 'pointer',
+        top: '-2px'
+    },
+    helperIconActive: {
+        color: theme.palette.business.primary.normal
+    },
+    helperDiv: _extends({}, theme.typography.h5, {
+        width: 'calc(100% - 16px)',
+        backgroundColor: '#ffffff',
+        color: theme.palette.neutral.dark,
+        padding: '16px 8px',
+        borderRadius: 2,
+        position: 'relative',
+        marginBottom: 5,
+        fontWeight: theme.typography.fontWeightRegular,
+        boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)'
+    }),
+    helperDivArrowDown: {
+        borderTopColor: '#ffffff'
+    }
+});
+
+/**
+ * Champs input pour formulaire
+ */
+class HiFormControl extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            helperOpen: false,
+            focused: false,
+            hovered: false
+        };
+
+        this.handleHelperClick = this.handleHelperClick.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.handleHover = this.handleHover.bind(this);
+    }
+
+    handleHelperClick() {
+        this.setState(prevState => ({ helperOpen: !prevState.helperOpen }));
+    }
+
+    handleFocus(value) {
+        this.setState({ focused: value });
+    }
+
+    handleHover(value) {
+        this.setState({ hovered: value });
+    }
+
+    render() {
+        const _props = this.props,
+              {
+            children,
+            classes,
+            className,
+            disabled,
+            error,
+            errorText,
+            id,
+            label,
+            InputLabelProps,
+            helperText,
+            helperIcon,
+            FormHelperTextProps,
+            fullWidth,
+            required,
+            multiline,
+            rootRef,
+            maxLength,
+            nbChars
+        } = _props,
+              others = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'disabled', 'error', 'errorText', 'id', 'label', 'InputLabelProps', 'helperText', 'helperIcon', 'FormHelperTextProps', 'fullWidth', 'required', 'multiline', 'rootRef', 'maxLength', 'nbChars']);
+
+        const { helperOpen, focused, hovered } = this.state;
+
+        return React.createElement(
+            FormControl,
+            _extends({
+                fullWidth: fullWidth,
+                className: className,
+                error: error,
+                ref: rootRef
+            }, others),
+            !disabled && error && errorText && helperOpen && React.createElement(
+                'div',
+                { className: classes.errorDiv },
+                React.createElement('div', {
+                    className: classNames(classes.arrowDown, classes.errorDivArrowDown)
+                }),
+                errorText
+            ),
+            !disabled && helperIcon && helperText && !error && helperOpen && React.createElement(
+                'div',
+                { className: classes.helperDiv },
+                React.createElement('div', {
+                    className: classNames(classes.arrowDown, classes.helperDivArrowDown)
+                }),
+                helperText
+            ),
+            label && React.createElement(
+                HiFormLabel,
+                _extends({
+                    htmlFor: id,
+                    label: label,
+                    required: required,
+                    disabled: disabled,
+                    focused: focused || hovered
+                }, InputLabelProps),
+                !disabled && error && React.createElement(Alert, {
+                    className: classes.errorIcon,
+                    onClick: this.handleHelperClick
+                }),
+                !disabled && helperIcon && helperText && !error && React.createElement(Information, {
+                    className: classNames(classes.helperIcon, {
+                        [classes.helperIconActive]: helperOpen
+                    }),
+                    onClick: this.handleHelperClick
+                })
+            ),
+            React.createElement(
+                'div',
+                {
+                    onMouseEnter: () => this.handleHover(true),
+                    onMouseLeave: () => this.handleHover(false),
+                    onFocus: () => this.handleFocus(true),
+                    onBlur: () => this.handleFocus(false)
+                },
+                children
+            ),
+            !multiline && helperText && !helperIcon && React.createElement(
+                FormHelperText,
+                _extends({
+                    className: classes.helperTextClassName
+                }, FormHelperTextProps),
+                helperText
+            ),
+            multiline && React.createElement(
+                FormHelperText,
+                _extends({
+                    className: classes.helperTextClassName
+                }, FormHelperTextProps),
+                nbChars,
+                '/',
+                maxLength
+            )
+        );
+    }
+}
+
+HiFormControl.defaultProps = {
+    fullWidth: true,
+    required: true,
+    disabled: false,
+    error: false,
+    errorText: '',
+    helperText: '',
+    helperIcon: false,
+    multiline: false,
+    nbChars: 0,
+    maxLength: 280
+};
+HiFormControl.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu du form control
+     */
+    children: PropTypes.node,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Classes CSS appliquées
+     */
+    className: PropTypes.string,
+    /**
+     * Si `true`, l'input sera inactif.
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Si `true`, le champs sera en erreur.
+     */
+    error: PropTypes.bool,
+    /**
+     * Texte de l'erreur
+     */
+    errorText: PropTypes.string,
+    /**
+     * Propriétés appliquées au composant FormHelperText
+     */
+    FormHelperTextProps: PropTypes.object,
+    /**
+     * Si `true`, le chamsp prendra toute la largeur.
+     */
+    fullWidth: PropTypes.bool,
+    /**
+     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+     */
+    helperIcon: PropTypes.bool,
+    /**
+     * Texte de l'aide
+     */
+    helperText: PropTypes.string,
+    /**
+     * id de l'élément input
+     */
+    id: PropTypes.string,
+    /**
+     * Propriétés appliquées au composant InputLabel
+     */
+    InputLabelProps: PropTypes.object,
+    /**
+     * Label du champs
+     */
+    label: PropTypes.string,
+    /**
+     * Nombre de caractères max pour un text area
+     * Valable uniquement si l'option multiline est à true
+     */
+    maxLength: PropTypes.number,
+    /**
+     * Si `true`, le champs input sera un textarea
+     */
+    multiline: PropTypes.bool,
+    /**
+     * Nombre de caractères autorisés pour les textArea
+     */
+    nbChars: PropTypes.number,
+    /**
+     * true si champs obligatoire
+     */
+    required: PropTypes.bool,
+    /**
+     * Passé à la prop ref du composant FormControl
+     */
+    rootRef: PropTypes.string
+} : {};
+export default withStyles(styles, { name: 'HmuiHiFormControl' })(HiFormControl);