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

package/es/HiDatePicker/ListPicker.js

@@ -0,0 +1,93 @@
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Scrollbars } from 'react-custom-scrollbars';
+import { MenuList, MenuItem } from 'material-ui/Menu';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+    itemRoot: {
+        '&:hover': {
+            backgroundColor: theme.palette.hover
+        }
+    },
+    itemSelected: {
+        fontWeight: theme.typography.fontWeightMedium,
+        backgroundColor: theme.palette.selected
+    },
+    itemCentered: {
+        margin: 'auto'
+    }
+});
+
+class ListPicker extends React.PureComponent {
+
+    componentDidMount() {
+        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;
+
+        return React.createElement(
+            Scrollbars,
+            {
+                autoHide: true,
+                ref: ref => {
+                    this.scrollbars = ref;
+                }
+            },
+            React.createElement(
+                MenuList,
+                null,
+                itemList.map(item => React.createElement(
+                    MenuItem,
+                    {
+                        key: `item-${item}`,
+                        classes: {
+                            root: classes.itemRoot,
+                            selected: classes.itemSelected
+                        },
+                        onClick: () => onItemClick(item),
+                        selected: item === selectedItem
+                    },
+                    React.createElement(
+                        'span',
+                        { className: classes.itemCentered },
+                        item
+                    )
+                ))
+            )
+        );
+    }
+}
+
+ListPicker.defaultProps = {
+    initAtMiddleScroll: false
+};
+ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Initialise la liste scrollée au milieu
+     */
+    initAtMiddleScroll: PropTypes.bool,
+    /**
+     * Liste des items
+     */
+    itemList: PropTypes.array,
+    /**
+     * Fonction de callback au click d'un item
+     */
+    onItemClick: PropTypes.func,
+    /**
+     * Item sélectionné
+     */
+    selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+} : {};
+export default withStyles(styles, { name: 'HmuiListPicker' })(ListPicker);

package/es/HiDatePicker/Navbar.js

@@ -0,0 +1,130 @@
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import IconButton from 'material-ui/IconButton';
+import ChevronLeftIcon from 'mdi-material-ui/ChevronLeft';
+import ChevronRightIcon from 'mdi-material-ui/ChevronRight';
+import ClockIcon from 'mdi-material-ui/Clock';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+    root: {
+        width: '100%',
+        height: 40,
+        marginBottom: -40,
+        borderBottom: '1px solid',
+        borderBottomColor: theme.palette.line.stepper
+    },
+    button: {
+        height: 32,
+        width: 32,
+        margin: '4px 24px'
+    },
+    left: {
+        float: 'left'
+    },
+    right: {
+        float: 'right'
+    },
+    bottomLeft: {
+        position: 'absolute',
+        left: 0,
+        bottom: 0
+    }
+});
+
+var _ref = React.createElement(ChevronLeftIcon, null);
+
+var _ref2 = React.createElement(ChevronRightIcon, null);
+
+var _ref3 = React.createElement(ClockIcon, null);
+
+const Navbar = ({
+    classes,
+    localeUtils,
+    nextMonth,
+    onClockClick,
+    onPreviousClick,
+    onNextClick,
+    previousMonth,
+    showClockButton
+}) => {
+    const months = localeUtils.getMonths();
+    const prev = `${months[previousMonth.getMonth()]} ${previousMonth.getFullYear()}`;
+    const next = `${months[nextMonth.getMonth()]} ${nextMonth.getFullYear()}`;
+
+    return React.createElement(
+        'div',
+        { className: classes.root },
+        React.createElement(
+            IconButton,
+            {
+                className: classNames(classes.button, classes.left),
+                onClick: () => onPreviousClick(),
+                title: prev
+            },
+            _ref
+        ),
+        React.createElement(
+            IconButton,
+            {
+                className: classNames(classes.button, classes.right),
+                onClick: () => onNextClick(),
+                title: next
+            },
+            _ref2
+        ),
+        showClockButton && React.createElement(
+            IconButton,
+            {
+                className: classNames(classes.button, classes.bottomLeft),
+                onClick: () => onClockClick()
+            },
+            _ref3
+        )
+    );
+};
+
+Navbar.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * ReactDayPicker prop
+     */
+    localeUtils: PropTypes.object,
+    /**
+     * ReactDayPicker prop
+     */
+    nextMonth: PropTypes.object,
+    /**
+     * Fonction de callback au click sur la Clock
+     */
+    onClockClick: PropTypes.func,
+    /**
+     * ReactDayPicker prop
+     */
+    onNextClick: PropTypes.func,
+    /**
+     * ReactDayPicker prop
+     */
+    onPreviousClick: PropTypes.func,
+    /**
+     * ReactDayPicker prop
+     */
+    previousMonth: PropTypes.object,
+    /**
+     * Ajoute l'icône Clock dans le footer
+     */
+    showClockButton: PropTypes.bool
+} : {};
+
+Navbar.defaultProps = {
+    showClockButton: false
+};
+
+export default withStyles(styles, { name: 'HmuiNavbar' })(Navbar);

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -0,0 +1,114 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Paper from 'material-ui/Paper';
+
+import withStyles from '../../styles/withStyles';
+
+export const styles = theme => ({
+    paper: {
+        position: 'absolute',
+        width: '100%',
+        zIndex: 10
+    },
+    left: {
+        width: '200%',
+        left: 0
+    },
+    right: {
+        width: '200%',
+        left: '-100%'
+    },
+    overlay: _extends({
+        padding: 0,
+        height: 325,
+        textAlign: 'center'
+    }, theme.typography.body2, {
+        fontWeight: theme.typography.fontWeightRegular
+    }),
+    header: _extends({
+        display: 'block',
+        height: 40,
+        textAlign: 'center',
+        padding: '10px 0'
+    }, theme.typography.body1, {
+        color: theme.palette.neutral.normal,
+        borderBottom: '1px solid',
+        borderBottomColor: theme.palette.line.stepper
+    }),
+    body: {
+        height: 245,
+        width: 224,
+        margin: 'auto'
+    },
+    footer: {
+        height: 40,
+        padding: '10px 0',
+        borderTop: '1px solid',
+        borderTopColor: theme.palette.line.stepper
+    }
+});
+
+const CustomOverlayLayout = (_ref) => {
+    let {
+        classes,
+        children,
+        headerElement,
+        footerElement,
+        absoluteElement,
+        side
+    } = _ref,
+        props = _objectWithoutProperties(_ref, ['classes', 'children', 'headerElement', 'footerElement', 'absoluteElement', 'side']);
+
+    const paperClass = classNames(classes.paper, {
+        [classes.left]: side === 'from',
+        [classes.right]: side === 'to'
+    });
+
+    return React.createElement(
+        Paper,
+        { className: paperClass },
+        React.createElement(
+            'div',
+            { className: classes.overlay },
+            React.createElement(
+                'div',
+                { className: classes.header },
+                headerElement
+            ),
+            React.createElement(
+                'div',
+                { className: classes.body },
+                children
+            ),
+            React.createElement(
+                'div',
+                { className: classes.footer },
+                footerElement
+            ),
+            absoluteElement
+        )
+    );
+};
+
+CustomOverlayLayout.propTypes = process.env.NODE_ENV !== "production" ? {
+    absoluteElement: PropTypes.any,
+    children: PropTypes.any,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    footerElement: PropTypes.any,
+    headerElement: PropTypes.any,
+    /**
+     * Définit comment construire le Paper dans le cas d'un double input
+     */
+    side: PropTypes.string
+} : {};
+
+export default withStyles(styles, { name: 'HmuiCustomOverlayLayout' })(CustomOverlayLayout);

package/es/HiDatePicker/Overlays/MonthPickerOverlay.js

@@ -0,0 +1,80 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import CustomOverlayLayout from './CustomOverlayLayout';
+import ListPicker from '../ListPicker';
+
+class MonthPickerOverlay extends React.Component {
+
+    constructor(props) {
+        super();
+
+        this.months = [];
+        this.handleMonthClick = this.handleMonthClick.bind(this);
+
+        this.months = props.localeUtils ? props.localeUtils.getMonths() : props.children.props.localeUtils.getMonths();
+    }
+
+    handleMonthClick(month) {
+        const monthIndex = this.months.indexOf(month);
+
+        if (monthIndex >= 0 && monthIndex < 12 && this.props.onChange) {
+            const date = this.props.value ? new Date(this.props.value) : new Date();
+            date.setMonth(monthIndex);
+            this.props.onChange(date);
+        }
+    }
+
+    render() {
+        const _props = this.props,
+              { value, translations } = _props,
+              props = _objectWithoutProperties(_props, ['value', 'translations']);
+
+        return React.createElement(
+            CustomOverlayLayout,
+            _extends({ headerElement: translations.month }, props),
+            React.createElement(ListPicker, {
+                itemList: this.months,
+                onItemClick: this.handleMonthClick,
+                selectedItem: value ? value.getMonth() : null
+            })
+        );
+    }
+}
+
+MonthPickerOverlay.defaultProps = {
+    translations: {
+        month: 'Month'
+    }
+};
+MonthPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * ReactDayPicker prop
+     */
+    children: PropTypes.element,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * ReactDayPicker prop
+     */
+    localeUtils: PropTypes.object,
+    /**
+     * Fonction de callback
+     */
+    onChange: PropTypes.func,
+    /**
+     * Traductions
+     */
+    translations: PropTypes.object,
+    /**
+     * Date du mois affiché
+     */
+    value: PropTypes.instanceOf(Date)
+} : {};
+export default MonthPickerOverlay;

package/es/HiDatePicker/Overlays/Overlay.js

@@ -0,0 +1,76 @@
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Paper from 'material-ui/Paper';
+import withStyles from '../../styles/withStyles';
+
+export const styles = () => ({
+    paper: {
+        position: 'absolute',
+        width: '100%',
+        zIndex: 10
+    },
+    left: {
+        width: '200%',
+        left: 0
+    },
+    right: {
+        width: '200%',
+        left: '-100%'
+    },
+    overlay: {
+        padding: 0
+    }
+});
+
+const Overlay = ({ classes, children, side }) => {
+    const paperClass = classNames(classes.paper, {
+        [classes.left]: side === 'from',
+        [classes.right]: side === 'to'
+    });
+
+    return React.createElement(
+        Paper,
+        { className: paperClass },
+        React.createElement(
+            'div',
+            { className: classes.overlay },
+            children
+        )
+    );
+};
+
+Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * ReactDayPicker prop
+     */
+    children: PropTypes.element,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * ReactDayPicker prop
+     * The input field
+     */
+    input: PropTypes.object,
+    /**
+     * ReactDayPicker prop
+     * The month displayed in the calendar
+     */
+    month: PropTypes.object,
+    /**
+     * ReactDayPicker prop
+     * The currently selected day or selected days
+     */
+    selectedDay: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    /**
+     * Définit comment construire le Paper dans le cas d'un double input
+     */
+    side: PropTypes.string
+} : {};
+
+export default withStyles(styles, { name: 'HmuiOverlay' })(Overlay);

package/es/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -0,0 +1,218 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _Array$from from 'babel-runtime/core-js/array/from';
+import _extends from 'babel-runtime/helpers/extends';
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import IconButton from 'material-ui/IconButton';
+import CalendarIcon from 'mdi-material-ui/Calendar';
+
+import CustomOverlayLayout from './CustomOverlayLayout';
+import ListPicker from '../ListPicker';
+
+import withStyles from '../../styles/withStyles';
+
+export const styles = theme => ({
+    paper: {
+        position: 'absolute',
+        width: '100%',
+        zIndex: 10
+    },
+    overlay: _extends({
+        padding: 0,
+        height: 325,
+        textAlign: 'center'
+    }, theme.typography.body2, {
+        fontWeight: theme.typography.fontWeightRegular
+    }),
+    header: _extends({
+        display: 'block',
+        height: 40,
+        textAlign: 'center',
+        padding: '10px 0'
+    }, theme.typography.body1, {
+        color: theme.palette.neutral.normal,
+        borderBottom: '1px solid',
+        borderBottomColor: theme.palette.line.stepper
+    }),
+    titles: {
+        width: 224,
+        margin: 'auto'
+    },
+    timeTitle: {
+        display: 'inline-block',
+        width: '50%'
+    },
+    body: {
+        height: 245,
+        width: 224,
+        margin: 'auto'
+    },
+    columnWrapper: {
+        height: '100%',
+        width: '100%'
+    },
+    column: {
+        display: 'inline-block',
+        height: '100%',
+        width: '50%'
+    },
+    listItem: {
+        height: 40,
+        textAlign: 'center'
+    },
+    itemRoot: {
+        '&:hover': {
+            backgroundColor: theme.palette.hover
+        }
+    },
+    itemSelected: {
+        fontWeight: theme.typography.fontWeightMedium,
+        backgroundColor: theme.palette.selected
+    },
+    itemCentered: {
+        margin: 'auto'
+    },
+    footer: {
+        height: 40,
+        padding: '10px 0',
+        borderTop: '1px solid',
+        borderTopColor: theme.palette.line.stepper
+    },
+    clockIconButton: {
+        position: 'absolute',
+        left: 0,
+        bottom: 0,
+        height: 32,
+        width: 32,
+        margin: '4px 24px'
+    },
+    calendarButton: {
+        fontWeight: theme.typography.fontWeightMedium
+    }
+});
+
+var _ref = React.createElement(CalendarIcon, null);
+
+class TimePickerOverlay extends React.Component {
+
+    constructor(props) {
+        super();
+
+        this.hours = _Array$from(Array(24).keys());
+        this.minutes = _Array$from(Array(60).keys());
+        this.handleHourClick = this.handleHourClick.bind(this);
+        this.handleMinuteClick = this.handleMinuteClick.bind(this);
+    }
+
+    handleHourClick(hour) {
+        if (this.props.onChange) {
+            const date = this.props.value ? new Date(this.props.value) : new Date();
+            date.setHours(hour);
+            this.props.onChange(date, 'hour');
+        }
+    }
+
+    handleMinuteClick(minute) {
+        if (this.props.onChange) {
+            const date = this.props.value ? new Date(this.props.value) : new Date();
+            date.setMinutes(minute);
+            this.props.onChange(date, 'minute');
+        }
+    }
+
+    render() {
+        const _props = this.props,
+              { classes, onCalendarClick, translations, value } = _props,
+              props = _objectWithoutProperties(_props, ['classes', 'onCalendarClick', 'translations', 'value']);
+
+        const hour = value ? value.getHours() : 0;
+        const minute = value ? value.getMinutes() : 0;
+
+        return React.createElement(
+            CustomOverlayLayout,
+            _extends({
+                headerElement: React.createElement(
+                    'div',
+                    { className: classes.titles },
+                    React.createElement(
+                        'div',
+                        { className: classes.timeTitle },
+                        translations.hour
+                    ),
+                    React.createElement(
+                        'div',
+                        { className: classes.timeTitle },
+                        translations.minute
+                    )
+                ),
+                absoluteElement: React.createElement(
+                    IconButton,
+                    {
+                        className: classes.clockIconButton,
+                        onClick: () => onCalendarClick()
+                    },
+                    _ref
+                )
+            }, props),
+            React.createElement(
+                'div',
+                { className: classes.column },
+                React.createElement(ListPicker, {
+                    itemList: this.hours,
+                    onItemClick: this.handleHourClick,
+                    selectedItem: hour
+                })
+            ),
+            React.createElement(
+                'div',
+                { className: classes.column },
+                React.createElement(ListPicker, {
+                    itemList: this.minutes,
+                    onItemClick: this.handleMinuteClick,
+                    selectedItem: minute
+                })
+            )
+        );
+    }
+}
+
+TimePickerOverlay.defaultProps = {
+    translations: {
+        hour: 'Hour',
+        minute: 'Minute'
+    }
+};
+TimePickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * ReactDayPicker prop
+     */
+    children: PropTypes.element,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Fonction de callback au click sur l'icône Calendar
+     */
+    onCalendarClick: PropTypes.func,
+    /**
+     * Callback à la sélection d'une date
+     */
+    onChange: PropTypes.func,
+    /**
+     * Définit comment construire le Paper dans le cas d'un double input
+     */
+    side: PropTypes.string,
+    /**
+     * Traductions
+     */
+    translations: PropTypes.object,
+    /**
+     * Date sélectionné
+     */
+    value: PropTypes.instanceOf(Date)
+} : {};
+export default withStyles(styles, { name: 'HmuiTimePickerOverlay' })(TimePickerOverlay);