@hipay/hipay-material-ui 1.0.0-beta.19 → 1.0.0-beta.2

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -1,170 +0,0 @@
-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

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

package/es/HiForm/HiAddressField.js

@@ -1,142 +0,0 @@
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-import _extends from 'babel-runtime/helpers/extends';
-// @inheritedComponent HiSuggestSelectField
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import HiSuggestSelectField from '../HiSelect/HiSuggestSelectField';
-
-/**
- * Champs input adresse pour formulaire
- */
-class HiAddressField extends React.Component {
-    constructor(props) {
-        super(props);
-        this.autocompleteService = null;
-
-        this.displaySuggestions = (predictions, status) => {
-            if (status !== 'OK') {
-                // Si l'API renvoie un statut différent de 'OK'
-                // (par exemple ZERO_RESULTS), pas de prédictions
-            } else {
-                // Sinon je mets à jour les options du champ avec les prédictions de GMaps
-                const options = [];
-                let isExact = false;
-                predictions.forEach(prediction => {
-                    // Si le texte saisi est identique à une des propositions de GMaps,
-                    // on estime que la valeur de l'adresse est exacte,
-                    // même sans clic sur une proposition
-                    isExact = prediction.description === this.value ? true : isExact;
-                    options.push({
-                        id: prediction.id,
-                        label: prediction.description,
-                        labelHighlight: prediction.description.replace(new RegExp(this.value, 'gi'), '<strong>$&</strong>'),
-                        icon: prediction.types.indexOf('establishment') >= 0 ? 'domain' : 'map_marker',
-                        type: 'icon'
-                    });
-                }, this);
-                this.setState({ options, isExact });
-            }
-        };
-
-        this.state = {
-            options: [],
-            isExact: false
-        };
-
-        this.handleSearch = this.handleSearch.bind(this);
-        this.handleSelect = this.handleSelect.bind(this);
-        this.handleReset = this.handleReset.bind(this);
-        this.displaySuggestions = this.displaySuggestions.bind(this);
-    }
-
-    /**
-     * Au chargement du composant, je définis mon service autocomplete GMaps
-     */
-    componentDidMount() {
-        this.autocompleteService = new google.maps.places.AutocompleteService();
-    }
-
-    handleReset() {
-        this.props.onReset();
-        this.setState({
-            options: [],
-            isExact: false
-        });
-    }
-
-    handleSearch(event) {
-        // Je vérifie que le champ n'est pas vide car l'API lève une exception en cas d'input vide
-        if (event.target.value) {
-            // Liste des types à rechercher. Voir https://developers.google.com/places/web-service/autocomplete?hl=fr#place_types (ex : ['establishement', 'address']
-            const types = [];
-            // Liste des codes ISO Alpha-2 des pays où il faut rechercher (ex : ['fr', 'us'])
-            const countries = [];
-            // À chaque changement, la méthode getPlacesPredictions appelle la méthode
-            // displaySuggestions en lui fournissant un tableau de 5 prédictions
-            this.value = event.target.value;
-            if (this.autocompleteService) {
-                this.autocompleteService.getPlacePredictions({
-                    input: event.target.value,
-                    types,
-                    componentRestrictions: { country: countries }
-                }, this.displaySuggestions);
-            } else {
-                // Dans le cas où le service ne peut pas se charger (mode test par exemple).
-                this.displaySuggestions([], 'EMPTY_RESULT');
-            }
-        }
-        this.props.onSearch(event);
-        // Mise à jour du texte dans l'input
-        this.setState(_extends({}, !event.target.value && {
-            options: []
-        }));
-    }
-
-    handleSelect(event, value) {
-        // Mise à jour de la valeur du champ + la valeur de l'adresse est exacte
-        this.setState({ options: [], isExact: true });
-        this.props.onSelect(event, value.label);
-    }
-
-    render() {
-        const _props = this.props,
-              { exactOnly, onSearch, onReset, onSelect } = _props,
-              otherProps = _objectWithoutProperties(_props, ['exactOnly', 'onSearch', 'onReset', 'onSelect']);
-        const { options, isExact } = this.state;
-
-        // On met le champ en erreur si une adresse exacte est éxigée
-        // et si l'adresse courante n'est pas complète
-        const showError = exactOnly && !isExact;
-
-        return React.createElement(HiSuggestSelectField, _extends({
-            options: options,
-            onSearch: this.handleSearch,
-            onReset: this.handleReset,
-            onSelect: this.handleSelect,
-            isExact: isExact,
-            error: showError
-        }, otherProps));
-    }
-}
-
-HiAddressField.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Est-ce qu'on n'accepte que les adresses trouvées par GMaps
-     */
-    exactOnly: PropTypes.bool,
-    /**
-     *  Callback function called to empty the field.
-     */
-    onReset: PropTypes.func,
-    /**
-     *  Callback function called when we write in the input.
-     */
-    onSearch: PropTypes.func,
-    /**
-     *  Callback function called when a suggestion is selected.
-     */
-    onSelect: PropTypes.func
-} : {};
-
-export default HiAddressField;

package/es/HiForm/HiSlider.js

@@ -1,309 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
-import HiIconBuilder from '../utils/HiIconBuilder';
-import HiFormControl from '../HiForm/HiFormControl';
-
-export const styles = theme => ({
-    barContainer: {
-        width: '100%',
-        position: 'relative',
-        margin: '0 7px'
-    },
-    barHidden: {
-        width: '100%',
-        opacity: 0,
-        position: 'absolute',
-        top: '7px',
-        zIndex: '2'
-    },
-    mainContainer: _extends({}, theme.typography.body1, {
-        display: 'flex',
-        flexWrap: 'nowrap',
-        alignItems: 'center'
-    }),
-    topContainer: {
-        display: 'flex',
-        flexWrap: 'nowrap',
-        height: '18px'
-    },
-    bottomContainer: {
-        display: 'flex',
-        flexWrap: 'nowrap',
-        height: '18px'
-    },
-    barValue: {
-        display: 'flex',
-        width: '100%',
-        height: '4px',
-        borderRadius: '2px',
-        backgroundColor: theme.palette.business.primary.normal,
-        position: 'absolute',
-        zIndex: '2'
-    },
-    arrow: {
-        position: 'absolute',
-        zIndex: '1',
-        color: theme.palette.business.primary.normal,
-        transform: 'translate(-50%,-25%)',
-        transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-        transitionProperty: 'transform color'
-    },
-    focused: {
-        transform: 'scale(1.7) translate(-29%, -11%)',
-        color: theme.palette.business.primary.dark
-    },
-    leftLabel: {
-        color: theme.palette.business.primary.normal,
-        left: '0px',
-        position: 'absolute',
-        fontSize: '11px',
-        alignSelf: 'flex-end'
-    },
-    rightLabel: {
-        color: '#737373',
-        right: '0px',
-        position: 'absolute',
-        fontSize: '11px',
-        alignSelf: 'flex-end'
-    },
-    textValue: {
-        position: 'absolute',
-        zIndex: '2'
-    }
-});
-
-/**
- * HiSlider component
- */
-class HiSlider extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.leftLabelWidth = 0;
-        this.rightLabelWidth = 0;
-        this.textValueWidth = 0;
-        this.barContainerWidth = 0;
-
-        this.handleFocus = isFocused => () => {
-            this.setState({ focused: isFocused });
-        };
-
-        this.state = {
-            focused: false
-        };
-
-        this.leftLabel;
-        this.rightLabel;
-        this.textValue;
-        this.barContainer;
-
-        this.handleChange = this.handleChange.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
-    }
-
-    /**
-     * Measures several components once they are mounted.
-     * If the value and a label (left or right) are hovered,
-     * we hide this label.
-     */
-    componentDidMount() {
-        this.leftLabelWidth = this.leftLabel.offsetWidth;
-        this.rightLabelWidth = this.rightLabel.offsetWidth;
-        this.textValueWidth = this.textValue.offsetWidth;
-        this.barContainerWidth = this.barContainer.offsetWidth;
-        let { hoveringLeft, hoveringRight } = this.getHovering();
-        if (hoveringLeft || hoveringRight) {
-            this.forceUpdate();
-        }
-    }
-
-    handleChange(event) {
-        this.props.onChange(parseFloat(event.target.value));
-        this.textValueWidth = this.textValue.offsetWidth;
-    }
-
-    /**
-     * Calculates if the labels are hovered.
-     */
-    getHovering() {
-        const ratio = (this.props.value - this.props.min) / (this.props.max - this.props.min);
-        const hoveringLeft = this.leftLabelWidth - (ratio * this.barContainerWidth - ratio * this.textValueWidth) > 0;
-        const hoveringRight = this.barContainerWidth - ratio * this.barContainerWidth - this.rightLabelWidth - (1 - ratio) * this.textValueWidth < 0;
-        return { hoveringLeft, hoveringRight };
-    }
-
-    render() {
-        const {
-            classes,
-            className,
-            min,
-            max,
-            leftLabel,
-            rightLabel,
-            step,
-            suffix,
-            id,
-            label,
-            theme,
-            value
-        } = this.props;
-        const { focused } = this.state;
-        const ratio = (value - min) / (max - min);
-        const percentage = ratio * 100;
-        const { hoveringLeft, hoveringRight } = this.getHovering();
-        const barColor = focused ? theme.palette.business.primary.dark : theme.palette.business.primary.normal;
-        return (
-            // HiFormControl pour l'affichage du label
-            React.createElement(
-                HiFormControl,
-                {
-                    id: id,
-                    label: label,
-                    className: className,
-                    onFocus: this.handleFocus(true),
-                    onBlur: this.handleFocus(false)
-                },
-                React.createElement(
-                    'div',
-                    { className: classes.mainContainer },
-                    React.createElement(
-                        'div',
-                        null,
-                        min,
-                        suffix
-                    ),
-                    React.createElement(
-                        'div',
-                        { className: classes.barContainer, ref: div => this.barContainer = div },
-                        React.createElement(
-                            'div',
-                            { className: classes.topContainer },
-                            !hoveringLeft && React.createElement(
-                                'div',
-                                {
-                                    className: classes.leftLabel,
-                                    ref: div => this.leftLabel = div
-                                },
-                                leftLabel
-                            ),
-                            React.createElement(
-                                'div',
-                                {
-                                    className: classes.textValue,
-                                    style: {
-                                        left: `${percentage}%`,
-                                        transform: `translate(-${percentage}%)`
-                                    },
-                                    ref: div => this.textValue = div
-                                },
-                                value,
-                                suffix
-                            ),
-                            !hoveringRight && React.createElement(
-                                'div',
-                                {
-                                    className: classes.rightLabel,
-                                    ref: div => this.rightLabel = div
-                                },
-                                rightLabel
-                            )
-                        ),
-                        React.createElement('div', {
-                            className: classes.barValue,
-                            style: {
-                                background: `linear-gradient(to right, ${barColor}, ${barColor} ${percentage}%, #E0E0E0 ${percentage}%, #E0E0E0)`
-                            }
-                        }),
-                        React.createElement('input', {
-                            type: 'range',
-                            min: min,
-                            max: max,
-                            value: value,
-                            onChange: this.handleChange,
-                            className: classes.barHidden,
-                            step: step
-                        }),
-                        React.createElement(
-                            'div',
-                            { className: classes.bottomContainer },
-                            React.createElement(HiIconBuilder, {
-                                className: classNames(classes.arrow, {
-                                    [classes.focused]: focused
-                                }),
-                                icon: 'menu_up',
-                                size: 24,
-                                style: { left: `${percentage}%` }
-                            })
-                        )
-                    ),
-                    React.createElement(
-                        'div',
-                        null,
-                        max,
-                        suffix
-                    )
-                )
-            )
-        );
-    }
-}
-
-HiSlider.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Classes CSS appliquées.
-     */
-    className: PropTypes.string,
-    /**
-     * Id de l'élément input
-     */
-    id: PropTypes.string.isRequired,
-    /**
-     * Label du champ
-     */
-    label: PropTypes.string,
-    /**
-     * The label to show on the left.
-     */
-    leftLabel: PropTypes.string,
-    /**
-     * The Maximum value for the slider.
-     */
-    max: PropTypes.number.isRequired,
-    /**
-     * The Minimum value for the slider.
-     */
-    min: PropTypes.number.isRequired,
-    /**
-     * Fonction de callback appelée lorsqu'on change la valeur du slider.
-     */
-    onChange: PropTypes.func,
-    /**
-     * The label to show on the right
-     */
-    rightLabel: PropTypes.string,
-    /**
-     * The step between two selectable values.
-     */
-    step: PropTypes.number,
-    /**
-     * The suffix to show after each number.
-     */
-    suffix: PropTypes.string,
-    /**
-     * @ignore
-     */
-    theme: PropTypes.object,
-    /**
-     * The
-     * value of the input.
-     */
-    value: PropTypes.number
-} : {};
-export default withStyles(styles, { name: 'HmuiHiSlider', withTheme: true })(HiSlider);