@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.3

package/es/HiForm/HiAddressField.js

@@ -1,127 +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.displaySuggestions = predictions => {
-            // 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,
-                // on estime que la valeur de l'adresse est exacte,
-                // même sans clic sur une proposition
-                isExact = prediction.display_name === this.value ? true : isExact;
-                // liste des types d'adresse : https://github.com/openstreetmap/Nominatim/blob/80df4d3b560f5b1fd550dcf8cdc09a992b69fee0/settings/partitionedtags.def
-                options.push({
-                    id: prediction.place_id,
-                    label: prediction.display_name,
-                    labelHighlight: prediction.display_name.replace(new RegExp(this.value, 'gi'), '<strong>$&</strong>'),
-                    icon: ['amenity', 'building'].includes(prediction.category) ? 'domain' : 'map_marker',
-                    type: 'icon',
-                    key: prediction.id
-                });
-            }, 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);
-    }
-
-    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) {
-            // À 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;
-            const xhr = new XMLHttpRequest();
-            xhr.onreadystatechange = () => {
-                if (xhr.readyState === XMLHttpRequest.DONE) {
-                    const response = JSON.parse(xhr.responseText);
-                    this.displaySuggestions(response, 'OK');
-                }
-            };
-            xhr.open('GET', `https://nominatim.openstreetmap.org/search?q=${event.target.value}&format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1`, true);
-            xhr.setRequestHeader('Content-type', 'application/json');
-            xhr.send();
-        }
-        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);

package/es/HiForm/HiUpload.js

@@ -1,194 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-// @inheritedComponent HiUploadField
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
-import withTheme from '../styles/withTheme';
-import HiFormControl from './HiFormControl';
-import HiUploadField from './HiUploadField';
-import HiIconBuilder from '../utils/HiIconBuilder';
-
-export const styles = theme => ({
-    flexContainer: {
-        display: '  flex',
-        alignItems: 'center'
-    },
-    statusIcon: {
-        color: theme.palette.text.icon,
-        marginRight: '8px',
-        padding: '24px',
-        borderRadius: '2px',
-        border: `1px solid ${theme.palette.input.bottomLine}`,
-        backgroundColor: theme.palette.local.background2,
-        '&:not($empty)': {
-            border: `1px solid ${theme.palette.middle.normal}`,
-            color: `${theme.palette.middle.normal}`
-        },
-        '&$complete': {
-            border: `1px solid ${theme.palette.positive.normal}`,
-            color: `${theme.palette.positive.normal}`
-        },
-        '&$error': {
-            border: `1px solid ${theme.palette.negative.normal}`,
-            color: `${theme.palette.negative.normal}`
-        }
-    },
-    inputContainer: {
-        flex: '1'
-    },
-    empty: {},
-    complete: {},
-    error: {}
-});
-
-class HiUpload extends React.PureComponent {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            params: new Array(this.props.inputs.length)
-        };
-
-        this.handleChange = this.handleChange.bind(this);
-        this.handleClear = this.handleClear.bind(this);
-        this.handleSeeFile = this.handleSeeFile.bind(this);
-    }
-
-    handleChange(param, index) {
-        this.setState(prevState => {
-            const oldParams = [...prevState.params];
-            oldParams.splice(index, 1, param);
-            return {
-                params: oldParams
-            };
-        });
-    }
-
-    handleClear(index) {
-        this.setState(prevState => {
-            const oldParams = [...prevState.params];
-            oldParams.splice(index, 1, undefined);
-            return {
-                params: oldParams
-            };
-        });
-    }
-
-    handleSeeFile(file) {
-        this.props.onSeeFile(file);
-    }
-
-    render() {
-        const _props = this.props,
-              { inputs, className, classes, label, helperIcon, helperText } = _props,
-              others = _objectWithoutProperties(_props, ['inputs', 'className', 'classes', 'label', 'helperIcon', 'helperText']);
-
-        const { params } = this.state;
-
-        let complete = true;
-        let empty = true;
-        let error = false;
-        let errorText = '';
-
-        for (let i = 0, len = params.length; i < len; i += 1) {
-            const param = params[i];
-            if (param !== undefined) {
-                complete = param.value === null || param.error ? false : complete;
-                empty = param.value !== null && !param.error ? false : empty;
-                error = param.error || error;
-                errorText = errorText || param.errorMessage;
-            } else {
-                complete = false;
-            }
-        }
-
-        const statusClass = classNames(classes.statusIcon, {
-            [classes.empty]: empty,
-            [classes.complete]: complete,
-            [classes.error]: error
-        });
-
-        let icon;
-
-        if (error) {
-            icon = 'alert';
-        } else if (complete) {
-            icon = 'check_circle';
-        } else {
-            icon = 'upload';
-        }
-
-        return React.createElement(
-            HiFormControl,
-            {
-                label: label,
-                className: className,
-                errorText: errorText,
-                error: error,
-                helperIcon: helperIcon,
-                helperText: helperText
-            },
-            React.createElement(
-                'div',
-                { className: classes.flexContainer },
-                React.createElement(HiIconBuilder, { className: statusClass, size: 80, icon: icon }),
-                React.createElement(
-                    'div',
-                    { className: classes.inputContainer },
-                    inputs.map((item, index) => React.createElement(HiUploadField, _extends({
-                        maxSize: item.maxSize,
-                        acceptedTypes: item.acceptedTypes,
-                        placeholder: item.placeholder,
-                        value: params[index] ? params[index].value : null,
-                        error: params[index] ? params[index].error : null,
-                        errorMessage: params[index] ? params[index].errorMessage : null,
-                        onSeeFile: this.handleSeeFile,
-                        onClear: this.handleClear,
-                        onChange: this.handleChange,
-                        index: index,
-                        key: item.id
-                    }, others)))
-                )
-            )
-        );
-    }
-}
-
-HiUpload.defaultProps = {
-    helperText: '',
-    helperIcon: false
-};
-HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Classes CSS appliquées.
-     */
-    className: PropTypes.string,
-    /**
-     * 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,
-    /**
-     * Array containing each of the inputs the component has to show (represented by an object).
-     */
-    inputs: PropTypes.array.isRequired,
-    /**
-     * The label of the global input.
-     */
-    label: PropTypes.string,
-    /**
-     * The method given to see the file.
-     */
-    onSeeFile: PropTypes.func
-} : {};
-export default withStyles(styles, { name: 'HmuiHiUpload', withTheme: true })(HiUpload);