@hipay/hipay-material-ui 3.11.2 → 3.12.1

package/src/HiButton/HiButton.js

@@ -0,0 +1,242 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import { alpha, darken } from '@mui/material/styles';
+
+import makeStyles from '@mui/styles/makeStyles';
+
+export const useStyles = makeStyles((theme) => ({
+    root: {}, // a style rule
+    label: {}, // a nested style rule
+    text: (props) => {
+        if (['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
+            return {
+                color: props.disabled
+                    ? theme.palette.action.disabled
+                    : theme.palette[props.color].main,
+                '&:hover': {
+                    backgroundColor: alpha(
+                        theme.palette[props.color].main,
+                        theme.palette.action.hoverOpacity,
+                    ),
+                    // Reset on touch devices, it doesn't add specificity
+                    '@media (hover: none)': {
+                        backgroundColor: 'transparent',
+                    },
+                },
+            };
+        } else if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+            return {
+                color: props.disabled ? theme.palette.action.disabled : props.color,
+                '&:hover': {
+                    backgroundColor: alpha(props.color, theme.palette.action.hoverOpacity),
+                    '@media (hover: none)': {
+                        backgroundColor: 'transparent',
+                    },
+                },
+            };
+        }
+        return null;
+    },
+    contained: (props) => {
+        if (
+            props.variant === 'contained' &&
+            ['neutral', 'positive', 'middle', 'negative'].includes(props.color)
+        ) {
+            return {
+                color: props.disabled
+                    ? theme.palette.neutral.contrastText
+                    : theme.palette[props.color].contrastText,
+                backgroundColor: props.disabled
+                    ? theme.palette.neutral.main
+                    : theme.palette[props.color].main,
+                '&:hover': {
+                    backgroundColor: theme.palette[props.color].dark,
+                    // Reset on touch devices, it doesn't add specificity
+                    '@media (hover: none)': {
+                        backgroundColor: theme.palette[props.color].main,
+                    },
+                },
+            };
+        } else if (
+            props.variant === 'contained' &&
+            /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)
+        ) {
+            return {
+                color: props.disabled
+                    ? theme.palette.neutral.contrastText
+                    : theme.palette.getContrastText(props.color),
+                backgroundColor: props.disabled ? theme.palette.neutral.main : props.color,
+                '&:hover': {
+                    backgroundColor: darken(props.color, theme.palette.tonalOffset * 1.5),
+                    '@media (hover: none)': {
+                        backgroundColor: props.color,
+                    },
+                },
+            };
+        } else if (
+            props.variant === 'containedLight' &&
+            /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)
+        ) {
+            return {
+                color: props.disabled ? theme.palette.neutral.contrastText : props.color,
+                backgroundColor: alpha(
+                    props.disabled ? theme.palette.neutral.main : props.color,
+                    theme.palette.action.hoverOpacity,
+                ),
+                '&:hover': {
+                    backgroundColor: alpha(props.color, theme.palette.action.hoverOpacity + 0.1),
+                    '@media (hover: none)': {
+                        backgroundColor: alpha(
+                            props.disabled ? theme.palette.neutral.main : props.color,
+                            theme.palette.action.hoverOpacity,
+                        ),
+                    },
+                },
+            };
+        } else if (
+            props.variant === 'containedLight' // && is a palette color
+        ) {
+            return {
+                color: props.disabled
+                    ? theme.palette.neutral.contrastText
+                    : theme.palette[props.color].main,
+                backgroundColor: alpha(
+                    props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main,
+                    theme.palette.action.hoverOpacity,
+                ),
+                '&:hover': {
+                    backgroundColor: alpha(
+                        theme.palette[props.color].main,
+                        theme.palette.action.hoverOpacity + 0.1,
+                    ),
+                    // Reset on touch devices, it doesn't add specificity
+                    '@media (hover: none)': {
+                        backgroundColor: alpha(
+                            props.disabled
+                                ? theme.palette.neutral.main
+                                : theme.palette[props.color].main,
+                            theme.palette.action.hoverOpacity,
+                        ),
+                    },
+                },
+            };
+        }
+        return null;
+    },
+    outlined: (props) => {
+        if (['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
+            return {
+                color: theme.palette[props.color].main,
+                border: `1px solid ${alpha(theme.palette[props.color].main, 0.5)}`,
+                '&:hover': {
+                    border: `1px solid ${theme.palette[props.color].main}`,
+                    backgroundColor: alpha(
+                        theme.palette[props.color].main,
+                        theme.palette.action.hoverOpacity,
+                    ),
+                },
+            };
+        } else if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+            return {
+                color: props.color,
+                border: `1px solid ${alpha(props.color, 0.5)}`,
+                '&:hover': {
+                    border: `1px solid ${props.color}`,
+                    backgroundColor: alpha(props.color, theme.palette.action.hoverOpacity),
+                },
+            };
+        }
+        return null;
+    },
+}));
+
+/**
+ * HiButton
+ * Inherited from Button
+ */
+const HiButton = React.forwardRef((props, ref) => {
+    const { disableElevation, variant, color, ...otherProps } = props;
+
+    const classes = useStyles(props);
+
+    const style = useMemo(() => {
+        const style = {};
+
+        if (disableElevation) {
+            style.boxShadow = 'none';
+        }
+
+        return style;
+    }, [disableElevation]);
+
+    const _color = useMemo(() => {
+        if (
+            ['neutral', 'positive', 'middle', 'negative'].includes(color) ||
+            /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color) // isHexColor
+        ) {
+            return 'inherit';
+        }
+
+        return color;
+    }, [color]);
+
+    const _variant = useMemo(() => {
+        if (variant === 'containedLight') {
+            return 'contained';
+        }
+        return variant;
+    }, [variant]);
+
+    return (
+        <Button
+            ref={ref}
+            style={style}
+            classes={classes}
+            color={_color}
+            variant={_variant}
+            {...otherProps}
+        />
+    );
+});
+
+HiButton.propTypes = {
+    /** Activer/désactiver la box-shadow */
+    disableElevation: PropTypes.bool,
+    /** Style du bouton (plein, entouré, ...) */
+    variant: PropTypes.oneOf(['text', 'contained', 'containedLight', 'outlined']),
+    /** Couleur du bouton */
+    color: function (props, propName, componentName) {
+        const prop = props[propName];
+
+        if (
+            ![
+                'inherit',
+                'primary',
+                'secondary',
+                'neutral',
+                'positive',
+                'middle',
+                'negative',
+            ].includes(prop) &&
+            !/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(prop)
+        ) {
+            return new Error(
+                'Invalid prop `' +
+                    propName +
+                    '` supplied to' +
+                    ' `' +
+                    componentName +
+                    '`. Validation failed.',
+            );
+        }
+    },
+};
+
+HiButton.defaultProps = {
+    disableElevation: false,
+    variant: 'text',
+    color: 'neutral',
+};
+
+export default HiButton;

package/src/HiButton/HiButton.md

@@ -0,0 +1,56 @@
+HiButton example:
+
+```jsx
+import Box from '@material-ui/core/Box';
+
+<div>
+<Box display="block" m={1}>
+    <Box display="inline-block" m={1}><HiButton variant="text">Text</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="text" color="primary">Text</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="text" color="secondary">Text</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="text" color="neutral">Text</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="text" color="positive">Text</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="text" color="middle">Text</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="text" color="negative">Text</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="text" color="#0000B2">Text</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="text" disabled>Text</HiButton></Box>
+</Box>
+<Box display="block" m={1}>
+    <Box display="inline-block" m={1}><HiButton variant="contained">Contained</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="contained" color="primary">Contained</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="contained" color="secondary">Contained</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="contained" color="neutral">Contained</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="contained" color="positive">Contained</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="contained" color="middle">Contained</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="contained" color="negative">Contained</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="contained" color="#0000B2">Contained</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="contained" disabled>Contained</HiButton></Box>
+</Box>
+<Box display="block" m={1}>
+    <Box display="inline-block" m={1}><HiButton variant="containedLight">Contained Light</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="primary">Contained Light</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="secondary">Contained Light</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="neutral">Contained Light</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="positive">Contained Light</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="middle">Contained Light</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="negative">Contained Light</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="#0000B2">Contained Light</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="containedLight" disabled>Contained Light</HiButton></Box>
+</Box>
+<Box display="block" m={1}>
+    <Box display="inline-block" m={1}><HiButton variant="outlined">Outlined</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="outlined" color="primary">Outlined</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="outlined" color="secondary">Outlined</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="outlined" color="neutral">Outlined</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="outlined" color="positive">Outlined</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="outlined" color="middle">Outlined</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="outlined" color="negative">Outlined</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="outlined" color="#0000B2">Outlined</HiButton></Box>
+    <Box display="inline-block" m={1}><HiButton variant="outlined" disabled>Outlined</HiButton></Box>
+</Box>
+<Box display="block" m={1}>
+    <Box display="inline-block" m={1}><HiButton variant="contained" color="primary" disableElevation>Disable Elevation</HiButton></Box>
+</Box>
+</div>
+
+```

package/src/HiButton/index.js

@@ -0,0 +1,3 @@
+import HiButton from './HiButton';
+
+export default HiButton;

package/src/HiCell/CellAddress.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '@mui/styles/withStyles';
+
+export const styles = () => ({
+    rightEllipsisSpan: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        width: '100%',
+    },
+});
+
+/**
+ * Cette cellule permet d'afficher une adresse ou le nom d'un lieu
+ * - si le nom du lieu est défini, on affiche le lieu et la ville
+ * - sinon on affiche la ville et le pays
+ * - tous les champs définis sont affichés dans le tooltip
+ */
+class CellAddress extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Ville
+         */
+        city: PropTypes.string,
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * Pays
+         */
+        country: PropTypes.string,
+        /**
+         * Code ISO du pays
+         */
+        isoCountry: PropTypes.string,
+        /**
+         * Nom du lieu
+         */
+        name: PropTypes.string,
+        /**
+         * Code postal
+         */
+        postalCode: PropTypes.string,
+        /**
+         * Numéro et nom de la rue
+         */
+        streetAddress: PropTypes.string,
+        /**
+         * View (L/M/S)
+         */
+        view: PropTypes.oneOf(['l', 'm', 's']),
+    };
+
+    static defaultProps = {
+        view: 'l',
+    };
+
+    render() {
+        const {
+            classes,
+            streetAddress,
+            name,
+            city,
+            postalCode,
+            view,
+            country,
+            isoCountry,
+        } = this.props;
+
+        const labelItems = (view === 'l' ? [name, city, country] : [name, city, isoCountry]).filter(
+            item => item !== undefined,
+        );
+        const label = labelItems && labelItems.length > 0 ? labelItems.join(', ') : '';
+
+        let title = '';
+        if (name) title += `${name}\n`;
+        if (streetAddress) title += `${streetAddress}\n`;
+        if (city && postalCode) title += `${city}, ${postalCode}\n`;
+        if (city && !postalCode) title += `${city}\n`;
+        if (postalCode && !city) title += `${postalCode}\n`;
+        if (country && isoCountry) title += `${country}, ${isoCountry}`;
+        if (country && !isoCountry) title += country;
+        if (isoCountry && !country) title += isoCountry;
+
+        return (
+            <div className={classes.rightEllipsisSpan} title={title}>
+                {label}
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles, { name: 'HmuiCellAddress' })(CellAddress);

package/src/HiCell/CellAddress.test.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+import CellAddress from './CellAddress';
+
+describe('<CellAddress />', () => {
+    let shallow;
+
+    before(() => {
+        before(() => {
+            shallow = createShallow({ dive: true });
+        });
+
+        it('should render a the name and the city', () => {
+            const wrapper = shallow(
+                <CellAddress
+                    type={'address'}
+                    streetAddress={'12 rue Zimzim Zidane'}
+                    city={'Paris'}
+                    country={'France'}
+                />,
+            );
+            assert.strictEqual(
+                wrapper.find('div').text(),
+                'Paris, France',
+                'Should have correct text.',
+            );
+        });
+
+        it('should render a the city and the country', () => {
+            const wrapper = shallow(
+                <CellAddress
+                    type={'address'}
+                    streetAddress={'12 rue Zimzim Zidane'}
+                    city={'Paris'}
+                    country={'France'}
+                    isoCountry={'FR'}
+                    view={'s'}
+                />,
+            );
+            assert.strictEqual(
+                wrapper.find('div').text(),
+                'Paris, FR',
+                'Should have correct text.',
+            );
+        });
+
+        it('should render only the city', () => {
+            const wrapper = shallow(
+                <CellAddress
+                    sticky
+                    type={'address'}
+                    streetAddress={'12 rue Zimzim Zidane'}
+                    city={'Paris'}
+                    country={'France'}
+                    view={'s'}
+                />,
+            );
+            assert.strictEqual(wrapper.find('div').text(), 'Paris', 'Should have correct text.');
+        });
+
+        it('should render only the country', () => {
+            const wrapper = shallow(
+                <CellAddress
+                    type={'address'}
+                    streetAddress={'12 rue Zimzim Zidane'}
+                    country={'France'}
+                    isoCountry={'FR'}
+                />,
+            );
+            assert.strictEqual(wrapper.find('div').text(), 'France', 'Should have correct text.');
+        });
+
+        it('should render only the iso country', () => {
+            const wrapper = shallow(
+                <CellAddress
+                    type={'address'}
+                    streetAddress={'12 rue Zimzim Zidane'}
+                    country={'France'}
+                    isoCountry={'FR'}
+                    view={'s'}
+                />,
+            );
+            assert.strictEqual(wrapper.find('div').text(), 'FR', 'Should have correct text.');
+        });
+
+        it('should render name and the iso country', () => {
+            const wrapper = shallow(
+                <CellAddress
+                    type={'address'}
+                    streetAddress={'12 rue Zimzim Zidane'}
+                    country={'France'}
+                    name={'address'}
+                    isoCountry={'FR'}
+                    view={'l'}
+                />,
+            );
+            assert.strictEqual(
+                wrapper.find('div').text(),
+                'address, ',
+                'Should have correct text.',
+            );
+        });
+    });
+});

package/src/HiCell/CellDate.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment-timezone';
+import withStyles from '@mui/styles/withStyles';
+
+export const styles = {
+    rightEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        width: '100%',
+        textAlign: props => props.align === 'right' ? 'right' : 'left'
+    },
+};
+
+/**
+ * Cette cellule permet d'afficher une date en fonction de la locale de l'utilisateur
+ */
+class CellDate extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * Date as string
+         */
+        date: PropTypes.string,
+        /**
+         * Affiche l'heure
+         */
+        displayTime: PropTypes.bool,
+        /**
+         * Format de la date en vue small (ex: DD/MM/YYYY)
+         * @see https://momentjs.com/docs/#/parsing/string-format/
+         */
+        formatShort: PropTypes.string,
+        /**
+         * Locale moment
+         */
+        locale: PropTypes.string,
+        /**
+         * View (L/M/S)
+         */
+        view: PropTypes.oneOf(['l', 'm', 's']),
+    };
+
+    static defaultProps = {
+        displayTime: false,
+        formatShort: 'DD/MM/YYYY',
+        locale: 'en',
+        view: 'm',
+    };
+
+    formatLong = 'dddd DD MMMM YYYY HH:mm:ss';
+
+    render() {
+        const { classes, displayTime, date, locale, view, formatShort } = this.props;
+
+        if (!date) return '';
+
+        const mdate = moment(date);
+        mdate.locale(locale);
+
+        let label;
+        if (view === 'l') {
+            label = displayTime
+                ? mdate.format(this.formatLong)
+                : mdate.format(this.formatLong.replace(' HH:mm:ss', ''));
+        } else if (view === 'm') {
+            label = displayTime
+                ? mdate.format(`${formatShort} HH:mm:ss`)
+                : mdate.format(formatShort);
+        } else {
+            label = displayTime
+                ? mdate.format(`${formatShort.replace('YYYY', 'YY')} HH:mm:ss`)
+                : mdate.format(formatShort.replace('YYYY', 'YY'));
+        }
+
+        return <div className={classes.rightEllipsisSpan}>{label}</div>;
+    }
+}
+
+export default withStyles(styles, { name: 'HmuiCellDate' })(CellDate);