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

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -27,10 +27,10 @@ export function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.today;
-            from = moment().startOf('day');
-            to = moment().endOf('day');
-            info = `${from.format(format)}`;
+            label = t.last_24h;
+            from = moment().subtract(1, 'day');
+            to = moment();
+            info = `${from.calendar()} ${t.to_now}`;
             break;
         case 'pd':
             label = t.yesterday;
@@ -42,13 +42,13 @@ export function buildDateRangeOptionByKey(key, t, format) {
             label = t.current_week;
             from = moment().startOf('week');
             to = moment();
-            info = `${t.short_week}${from.format('w')}, \n ${from.format(format)} ${t.to_now}`;
+            info = `${t.week} ${from.format('w')}, \n ${from.format(format)} ${t.to_now}`;
             break;
         case 'pw':
             label = t.previous_week;
             from = moment().subtract(1, 'week').startOf('week');
             to = moment().subtract(1, 'week').endOf('week');
-            info = `${t.short_week}${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
+            info = `${t.week} ${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
             break;
         case 'cm':
             label = t.current_month;
@@ -72,7 +72,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
             label = t.previous_quarter;
             from = moment().subtract(1, 'quarter').startOf('quarter');
             to = moment().subtract(1, 'quarter').endOf('quarter');
-            info = `${from.format('YYYY')}-${t.short_quarter}${from.format('Q')}, ${to.diff(from, 'days')} ${t.days}`;
+            info = `${from.format('YYYY')}-Q${from.format('Q')}, ${to.diff(from, 'days')} ${t.days}`;
             break;
         case 'cy':
             label = t.current_year;
@@ -97,8 +97,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
 export const styles = theme => ({
     root: {
         maxWidth: 500,
-        marginLeft: -4,
-        alignItems: 'flex-start'
+        marginLeft: -4
     },
     dateSelect: {
         paddingTop: 1,
@@ -106,9 +105,7 @@ export const styles = theme => ({
     },
     dateRangePicker: {
         width: 'calc(100% + 8px)'
-    },
-    smSelect: {},
-    smRangePicker: {}
+    }
 });
 
 class HiDateRangeSelector extends React.Component {
@@ -129,47 +126,18 @@ class HiDateRangeSelector extends React.Component {
                     this.props.onChange('from', selectedOption.from.toDate());
                     this.props.onChange('to', selectedOption.to.toDate());
                 }
-            } else {
-                this.setState({
-                    defaultFrom: undefined,
-                    defaultTo: undefined
-                });
-            }
-            if (this.props.returnSelectValue === true) {
-                this.props.onChange('period', value);
             }
         };
 
-        this.handleReset = this.handleReset.bind(this);
-        this.handleSelectChange = this.handleSelectChange.bind(this);
-
-        this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
-
-        let from;
-        let to;
-        if (props.defaultPreset !== 'custom') {
-            const selectedOption = this.options.find(option => option.id === props.defaultPreset);
-            if (selectedOption) {
-                from = selectedOption.from.toDate();
-                to = selectedOption.to.toDate();
-            }
-        }
-
         this.state = {
             selectedPreset: props.defaultPreset,
-            containerWidth: 0,
-            defaultFrom: from,
-            defaultTo: to
+            containerWidth: 0
         };
-    }
 
-    static getDerivedStateFromProps(props, state) {
-        if (props.defaultPreset && props.returnSelectValue) {
-            return {
-                selectedPreset: props.defaultPreset
-            };
-        }
-        return null;
+        this.handleReset = this.handleReset.bind(this);
+        this.handleSelectChange = this.handleSelectChange.bind(this);
+
+        this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
     }
 
     componentDidMount() {
@@ -203,13 +171,11 @@ class HiDateRangeSelector extends React.Component {
             required,
             to,
             translations,
-            classes,
-            selectProps,
-            staticPosition
+            classes
         } = _props,
-              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
+              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes']);
 
-        const { defaultFrom, defaultTo, selectedPreset } = this.state;
+        const { selectedPreset } = this.state;
 
         return React.createElement(
             Grid,
@@ -221,8 +187,8 @@ class HiDateRangeSelector extends React.Component {
             },
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
-                React.createElement(HiSelectField, _extends({
+                { item: true, xs: 12, sm: 4 },
+                React.createElement(HiSelectField, {
                     disabled: disabled,
                     error: error,
                     errorText: errorText,
@@ -237,24 +203,22 @@ class HiDateRangeSelector extends React.Component {
                     translations: translations,
                     value: selectedPreset,
                     containerWidth: this.state.containerWidth,
-                    classes: { root: classes.dateSelect },
-                    staticPosition: staticPosition
-                }, selectProps))
+                    classes: { root: classes.dateSelect }
+                })
             ),
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
+                { item: true, xs: 12, sm: 8 },
                 React.createElement(HiDateRangePicker, _extends({
                     classes: { root: classes.dateRangePicker },
                     id: idRange,
-                    from: from || defaultFrom,
-                    to: to || defaultTo,
+                    from: from,
+                    to: to,
                     enableTime: enableTime,
                     onChange: onChange,
                     onReset: this.handleReset,
                     disabled: disabled || selectedPreset !== 'custom',
-                    translations: translations,
-                    staticPosition: staticPosition
+                    translations: translations
                 }, props))
             )
         );
@@ -265,23 +229,22 @@ HiDateRangeSelector.defaultProps = {
     availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
     defaultPreset: 'cd',
     enableTime: false,
-    returnSelectValue: false,
-    staticPosition: false,
     locale: 'fr-FR',
     format: 'YYYY-DD-MM',
     translations: {
-        today: 'Today',
+        today: 'today',
         hour: 'Hour',
         minute: 'Minute',
         month: 'Month',
         quarter: 'Quarter',
         week: 'Week',
-        short_week: 'W',
-        short_quarter: 'Q',
         year: 'Year',
+
         days: 'days',
+
         custom_period: 'Custom Period',
         yesterday: 'Yesterday',
+        last_24h: 'Last 24h',
         to: 'to',
         to_now: 'to now',
         current_week: 'Current Week',
@@ -329,7 +292,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de début sélectionnée
      */
-    from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+    from: PropTypes.instanceOf(Date),
     /**
      * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
      */
@@ -362,22 +325,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
      * true si champs obligatoire
      */
     required: PropTypes.bool,
-    /**
-     * Retourne la valeur du select de la période au change du select
-     */
-    returnSelectValue: PropTypes.bool.isRequired,
-    /**
-     * Props passées au HiSelectField
-     */
-    selectProps: PropTypes.object,
-    /**
-     * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
-     */
-    staticPosition: PropTypes.bool,
     /**
      * Date de fin sélectionnée
      */
-    to: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+    to: PropTypes.instanceOf(Date),
     /**
      * Traductions
      */

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -70,11 +70,9 @@ const CustomOverlayLayout = (_ref) => {
         [classes.right]: side === 'to'
     });
 
-    let paperProps = _extends({}, props);
-
     return React.createElement(
         Paper,
-        { className: paperClass, onBlur: paperProps.onBlur, onFocus: paperProps.onFocus },
+        { className: paperClass },
         React.createElement(
             'div',
             { className: classes.overlay },

package/es/HiDatePicker/Overlays/Overlay.js

@@ -1,5 +1,3 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 //  weak
 
 import React from 'react';
@@ -11,15 +9,10 @@ import withStyles from '../../styles/withStyles';
 
 export const styles = () => ({
     paper: {
+        position: 'absolute',
         width: '100%',
         zIndex: 10
     },
-    absolute: {
-        position: 'absolute'
-    },
-    relative: {
-        position: 'relative'
-    },
     left: {
         width: '200%',
         left: 0
@@ -33,22 +26,15 @@ export const styles = () => ({
     }
 });
 
-const Overlay = (_ref) => {
-    let { classes, children, side, staticPosition } = _ref,
-        props = _objectWithoutProperties(_ref, ['classes', 'children', 'side', 'staticPosition']);
-
+const Overlay = ({ classes, children, side }) => {
     const paperClass = classNames(classes.paper, {
         [classes.left]: side === 'from',
-        [classes.right]: side === 'to',
-        [classes.absolute]: staticPosition !== true,
-        [classes.relative]: staticPosition === true
+        [classes.right]: side === 'to'
     });
 
-    let paperProps = _extends({}, props);
-
     return React.createElement(
         Paper,
-        { onBlur: paperProps.onBlur, onFocus: paperProps.onFocus, className: paperClass },
+        { className: paperClass },
         React.createElement(
             'div',
             { className: classes.overlay },
@@ -80,7 +66,7 @@ Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
      * ReactDayPicker prop
      * The currently selected day or selected days
      */
-    selectedDay: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
+    selectedDay: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     /**
      * Définit comment construire le Paper dans le cas d'un double input
      */

package/es/HiDatePicker/stylesheet.js

@@ -19,20 +19,6 @@ export default (theme => ({
         width: 'calc(50% - 4px)',
         marginLeft: 4
     },
-    absolute: {
-        position: 'absolute'
-    },
-    right4: {
-        right: 4
-    },
-    dayPickerMargin: {
-        top: -337,
-        width: 'calc(100% - 4px)'
-    },
-    rangePickerContainer: {
-        display: 'flex',
-        alignItems: 'flex-start'
-    },
     // The container element
     container: {
         width: '100%',

package/es/HiForm/HiFormControl.js

@@ -87,17 +87,6 @@ class HiFormControl extends React.PureComponent {
     constructor(props) {
         super(props);
 
-        this.handleFocus = value => () => {
-            this.setState({ focused: value });
-            if (value === false && this.state.hovered) {
-                this.setState({ hovered: false });
-            }
-        };
-
-        this.handleHover = value => () => {
-            this.setState({ hovered: value });
-        };
-
         this.state = {
             helperOpen: false,
             focused: false,
@@ -116,6 +105,14 @@ class HiFormControl extends React.PureComponent {
         }
     }
 
+    handleFocus(value) {
+        this.setState({ focused: value });
+    }
+
+    handleHover(value) {
+        this.setState({ hovered: value });
+    }
+
     render() {
         const _props = this.props,
               {
@@ -150,7 +147,7 @@ class HiFormControl extends React.PureComponent {
                 error: error,
                 ref: rootRef
             }, others),
-            error && errorText && helperOpen && React.createElement(
+            !disabled && error && errorText && helperOpen && React.createElement(
                 'div',
                 { className: classes.errorDiv },
                 React.createElement('div', {
@@ -158,7 +155,7 @@ class HiFormControl extends React.PureComponent {
                 }),
                 errorText
             ),
-            helperIcon && helperText && !error && helperOpen && React.createElement(
+            !disabled && helperIcon && helperText && !error && helperOpen && React.createElement(
                 'div',
                 {
                     className: classes.helperDiv
@@ -179,13 +176,13 @@ class HiFormControl extends React.PureComponent {
                     label: label,
                     required: required,
                     disabled: disabled,
-                    focused: !disabled && (focused || hovered)
+                    focused: focused || hovered
                 }, InputLabelProps),
-                error && React.createElement(Alert, {
+                !disabled && error && React.createElement(Alert, {
                     className: classes.errorIcon,
                     onClick: this.handleHelperClick
                 }),
-                helperIcon && helperText && !error && React.createElement(Information, {
+                !disabled && helperIcon && helperText && !error && React.createElement(Information, {
                     className: classNames(classes.helperIcon, {
                         [classes.helperIconActive]: helperOpen
                     }),
@@ -195,10 +192,10 @@ class HiFormControl extends React.PureComponent {
             React.createElement(
                 'div',
                 {
-                    onMouseEnter: this.handleHover(true),
-                    onMouseLeave: this.handleHover(false),
-                    onFocus: this.handleFocus(true),
-                    onBlur: this.handleFocus(false)
+                    onMouseEnter: () => this.handleHover(true),
+                    onMouseLeave: () => this.handleHover(false),
+                    onFocus: () => this.handleFocus(true),
+                    onBlur: () => this.handleFocus(false)
                 },
                 children
             ),

package/es/HiForm/HiInput.js

@@ -13,7 +13,7 @@ export const styles = theme => ({
     }, theme.typography.body1, {
         borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
         paddingLeft: 8,
-        backgroundColor: theme.palette.background2,
+        backgroundColor: '#f5f5f5',
         '&$focused': {
             backgroundColor: '#ffffff'
         },
@@ -50,7 +50,7 @@ export const styles = theme => ({
     focused: {},
     error: {
         border: `1px solid ${theme.palette.negative.normal}`,
-        paddingLeft: 8,
+        paddingLeft: 0,
         borderRadius: 2
     },
     startAdornment: {
@@ -65,6 +65,7 @@ export const styles = theme => ({
         color: theme.palette.neutral.light
     },
     rightIcon: {
+        margin: '0 8px',
         width: 18,
         height: 39,
         color: theme.palette.neutral.normal
@@ -77,7 +78,7 @@ export const styles = theme => ({
     },
     rightIconError: {
         // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border right
-        marginRight: '-1px'
+        marginRight: 10
     },
     input: _extends({}, theme.typography.body1, {
         fontWeight: theme.typography.fontWeightRegular,
@@ -153,7 +154,6 @@ class HiInput extends React.PureComponent {
         if (this.props.onReset) {
             this.props.onReset();
         }
-        this.inputElement.focus();
     }
 
     handleBlur(event) {
@@ -170,27 +170,19 @@ class HiInput extends React.PureComponent {
     }
 
     handleFocus(event) {
-        if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
-            event.stopPropagation();
-        } else {
-            if (!this.state.focused) {
-                this.setState({ focused: true });
-            }
-            if (this.props.onFocus) {
-                this.props.onFocus(event);
-            }
+        if (!this.state.focused) {
+            this.setState({ focused: true });
+        }
+        if (this.props.onFocus) {
+            this.props.onFocus(event);
         }
     }
 
-    handleDivClick(event) {
-        if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
-            event.stopPropagation();
-        } else {
-            if (!this.state.focused) {
-                this.setState({ focused: true });
-            }
-            this.inputElement.focus();
+    handleDivClick() {
+        if (!this.state.focused) {
+            this.setState({ focused: true });
         }
+        this.inputElement.focus();
     }
 
     handleMouseEnter() {
@@ -231,8 +223,7 @@ class HiInput extends React.PureComponent {
             rows,
             inputClassName,
             onReset,
-            theme,
-            startAdornmentColor
+            theme
         } = this.props;
 
         const { focused } = this.state;
@@ -253,15 +244,9 @@ class HiInput extends React.PureComponent {
         });
 
         let leftIcon;
-        let startAdornmentStyle = { padding: 8 };
-        if (startAdornmentColor) {
-            startAdornmentStyle.color = startAdornmentColor;
-        }
         if (startAdornment) {
             leftIcon = React.createElement(HiIconBuilder, {
                 icon: startAdornment,
-                size: 36,
-                style: startAdornmentStyle,
                 onClick: this.props.onLeftIconClick,
                 className: classNames(classes.startAdornment, {
                     [classes.startAdornmentFocus]: focused,
@@ -278,15 +263,13 @@ class HiInput extends React.PureComponent {
                 onClick: this.handleReset,
                 onBlur: this.handleBlur
             },
-            React.createElement(HiIconBuilder, { icon: 'close', size: 36, color: theme.palette.neutral.normal, style: { padding: '8px' } })
+            React.createElement(HiIconBuilder, { icon: 'close', size: 18, color: theme.palette.neutral.normal })
         );
 
         let endAdornment = endAdornmentProps;
         if (typeof endAdornmentProps === 'string' && endAdornmentProps !== '') {
             endAdornment = React.createElement(HiIconBuilder, {
                 icon: endAdornmentProps,
-                size: 36,
-                style: { padding: '8px' },
                 onClick: this.props.onRightIconClick,
                 className: classNames(classes.rightIcon, {
                     [classes.rightIconFocus]: focused,
@@ -322,10 +305,7 @@ class HiInput extends React.PureComponent {
                 startAdornment: leftIcon,
                 endAdornment: React.createElement(
                     'div',
-                    {
-                        className: classes.endAdornment,
-                        ref: el => this.endAdornmentNode = el
-                    },
+                    { className: classes.endAdornment },
                     eraseIcon,
                     endAdornment
                 ),
@@ -460,10 +440,6 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Icône à afficher à gauche de l'input
      */
     startAdornment: PropTypes.string,
-    /**
-     * Couleur de l'icône à afficher à gauche de l'input
-     */
-    startAdornmentColor: PropTypes.string,
     /**
      * @ignore
      */

package/es/HiForm/HiPasswordField.js

@@ -11,9 +11,9 @@ import HiTextField from './HiTextField';
 export const styles = theme => ({
     inputPassword: {
         fontWeight: 'bolder',
-        fontFamily: 'inherit',
+        fontFamily: 'Verdana, sans-serif',
         letterSpacing: '4px',
-        fontSize: '1.6rem'
+        fontSize: 25
     }
 });
 
@@ -52,12 +52,7 @@ class HiPasswordField extends React.Component {
         return React.createElement(HiTextField, _extends({}, otherProps, {
             type: type,
             onRightIconClick: this.handlePasswordToggle,
-            HiInputProps: _extends({}, HiInputProps, {
-                endAdornment,
-                placeholder: '',
-                inputClassName,
-                autocomplete: 'on'
-            })
+            HiInputProps: _extends({}, HiInputProps, { endAdornment, placeholder: '', inputClassName })
         }));
     }
 }

package/es/HiForm/HiSearchField.js

@@ -2,7 +2,6 @@ import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import React from 'react';
 import PropTypes from 'prop-types';
-import isRequiredIf from 'react-proptype-conditional-require';
 import HiInput from '../HiForm/HiInput';
 
 /**
@@ -86,7 +85,7 @@ class HiSearchField extends React.Component {
         if (typeof this.props.onSearch === 'undefined') {
             this.props.callbackFilteredList(this.props.itemList);
         } else {
-            this.props.onSearch(undefined, '');
+            this.props.onSearch('');
         }
     }
 
@@ -113,7 +112,7 @@ HiSearchField.propTypes = process.env.NODE_ENV !== "production" ? {
      *
      * @param {array} suggestions
      */
-    callbackFilteredList: isRequiredIf(PropTypes.func, props => !props.hasOwnProperty('onSearch'), 'callbackFilteredList required'),
+    callbackFilteredList: PropTypes.func.isRequired,
     /**
      * Liste des propriété de l'élément sur lesquelles filtrer (par défaut l'item lui même)
      */

package/es/HiForm/index.js

@@ -4,8 +4,4 @@ export { default as HiFormLabel } from './HiFormLabel';
 export { default as HiInput } from './HiInput';
 export { default as HiPasswordField } from './HiPasswordField';
 export { default as HiTextField } from './HiTextField';
-export { default as HiSearchField } from './HiSearchField';
-export { default as HiUpload } from './HiUpload';
-export { default as HiUploadField } from './HiUploadField';
-export { default as HiSlider } from './HiSlider';
-export { default as HiAddressField } from './HiAddressField';
+export { default as HiSearchField } from './HiSearchField';

package/es/HiLoader/HiLoader.js

@@ -6,17 +6,13 @@ import withStyles from '../styles/withStyles';
 export const styles = () => ({});
 
 function HiLoader(props) {
-    const { className, theme, loading, size = 12 } = props;
+    const { theme, loading } = props;
 
-    return React.createElement(
-        'div',
-        { id: 'hi-loader', className: className },
-        React.createElement(PropagateLoader, {
-            loading: loading,
-            size: size,
-            color: theme.palette.business.primary.normal
-        })
-    );
+    return React.createElement(PropagateLoader, {
+        loading: loading,
+        size: 12,
+        color: theme.palette.business.primary.normal
+    });
 }
 
 HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {

package/es/HiPins/HiPins.js

@@ -10,11 +10,12 @@ export const styles = theme => ({
         display: 'inline-block',
         padding: '0 9px',
         height: 16,
-        lineHeight: '18px',
+        lineHeight: '16px',
         minWidth: 25,
         textAlign: 'center',
         borderRadius: '45px',
         verticalAlign: 'middle',
+        margin: 0.5 * theme.spacing.unit,
         fontSize: 11,
         fontWeight: theme.typography.fontWeightMedium,
         fontFamily: theme.typography.fontFamily
@@ -33,9 +34,9 @@ export const styles = theme => ({
  *
  */
 function HiPins(props) {
-    const { classes, theme, children, color = props.theme.palette.business.primary.normal, onClick, className } = props;
+    const { classes, children, color, onClick, className } = props;
 
-    const textColor = getContrastedTextColor(color, theme.palette.neutral.dark, '#FFF');
+    const textColor = getContrastedTextColor(color, props.theme.palette.neutral.dark, '#FFF');
 
     const divProps = {
         style: { backgroundColor: color, color: textColor }
@@ -59,7 +60,7 @@ HiPins.propTypes = process.env.NODE_ENV !== "production" ? {
     children: PropTypes.node.isRequired,
     classes: PropTypes.object.isRequired,
     className: PropTypes.string,
-    color: PropTypes.string,
+    color: PropTypes.string.isRequired,
     onClick: PropTypes.func
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHiPins' })(HiPins);