@hipay/hipay-material-ui 3.11.2 → 3.12.1

package/src/HiCell/HiCell.md

@@ -0,0 +1,335 @@
+HiCell example :
+
+```js
+import React from 'react';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import CellAddress from './CellAddress';
+import CellDate from './CellDate';
+import CellIcon from './CellIcon';
+import CellImage from './CellImage';
+import CellNumeric from './CellNumeric';
+import CellSentinel from './CellSentinel';
+import CellSentinelScore from './CellSentinelScore';
+import CellText from './CellText';
+import CellRate from './CellRate';
+import CellPinToAction from './CellPinToAction';
+import HiCheckbox from '../HiCheckbox';
+
+function HiCells() {
+    return (
+        <div>
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell padding="checkbox">
+                            <HiCheckbox indeterminate={false} checked={false} icon="dashboard" />
+                        </TableCell>
+                        <TableCell>CellAccount</TableCell>
+                        <TableCell>CellAddress</TableCell>
+                        <TableCell>CellAddress S</TableCell>
+                        <TableCell>CellImage L</TableCell>
+                        <TableCell>CellImage M</TableCell>
+                        <TableCell>CellImage S</TableCell>
+                        <TableCell>CellImage 36</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    <TableRow key={0}>
+                        <TableCell padding="checkbox">
+                            <HiCheckbox checked={false} icon="widgets" />
+                        </TableCell>
+                        <TableCell>
+                            <CellText label={'MY_ACCOUNT_COMPANY_NAME'} color={'#6600ff'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellAddress
+                                name={'Name'}
+                                streetAddress={'StreetAddress'}
+                                city={'City'}
+                                postalCode={'98765'}
+                                country={'France'}
+                                isoCountry={'FR'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellAddress
+                                name={'Name'}
+                                streetAddress={'StreetAddress'}
+                                city={'City'}
+                                postalCode={'98765'}
+                                country={'France'}
+                                isoCountry={'FR'}
+                                view={'s'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellImage
+                                label={'France'}
+                                shortLabel={'FR'}
+                                path={'/static/hmu/images/countries/fr.svg'}
+                                view={'l'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellImage
+                                label={'France'}
+                                shortLabel={'FR'}
+                                path={'/static/hmu/images/countries/fr.svg'}
+                                view={'m'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellImage
+                                label={'France'}
+                                shortLabel={'FR'}
+                                path={'/static/hmu/images/countries/fr.svg'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellImage
+                                label={'France'}
+                                shortLabel={'FR'}
+                                path={'/static/hmu/images/countries/fr.svg'}
+                                size={36}
+                            />
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell padding="checkbox">
+                            <HiCheckbox indeterminate={false} checked={false} icon="dashboard" />
+                        </TableCell>
+                        <TableCell>CellIcon M</TableCell>
+                        <TableCell>CellIcon S</TableCell>
+                        <TableCell>3DS lock</TableCell>
+                        <TableCell>3DS lock open</TableCell>
+                        <TableCell>3DS lock open outline</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    <TableRow key={0}>
+                        <TableCell padding="checkbox">
+                            <HiCheckbox checked={false} icon="widgets" />
+                        </TableCell>
+                        <TableCell>
+                            <CellIcon icon="mdi_cards" label={'Cards'} view={'m'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellIcon icon="mdi_cards" label={'Cards'} view={'s'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellIcon icon="mdi_lock" color="positive" />
+                        </TableCell>
+                        <TableCell>
+                            <CellIcon icon="mdi_lock_open" color="middle" />
+                        </TableCell>
+                        <TableCell>
+                            <CellIcon icon="mdi_lock_open_outline" color="neutral" />
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+            <Table style={{ marginTop: 100 }}>
+                <TableHead>
+                    <TableRow>
+                        <TableCell padding="checkbox">
+                            <HiCheckbox indeterminate={false} checked={false} icon="dashboard" />
+                        </TableCell>
+                        <TableCell>CellDate L</TableCell>
+                        <TableCell>CellDate M</TableCell>
+                        <TableCell>CellDate S</TableCell>
+                        <TableCell>CellNumeric L</TableCell>
+                        <TableCell>CellNumeric M</TableCell>
+                        <TableCell>CellNumeric S</TableCell>
+                        <TableCell>CellNumeric Currency</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    <TableRow key={0}>
+                        <TableCell padding="checkbox">
+                            <HiCheckbox checked={false} icon="widgets" />
+                        </TableCell>
+                        <TableCell>
+                            <CellDate date={'2018-02-18'} view={'l'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellDate date={'2018-02-18'} view={'m'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellDate date={'2018-02-18'} view={'s'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellNumeric value={123456789.1234} view={'l'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellNumeric value={123456789.1234} view={'m'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellNumeric value={123456789.1234} view={'s'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellNumeric currency={'EUR'} value={123456789.1234} />
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+            <Table style={{ marginTop: 100 }}>
+                <TableHead>
+                    <TableRow>
+                        <TableCell padding="checkbox">
+                            <HiCheckbox indeterminate={false} checked={false} icon="dashboard" />
+                        </TableCell>
+                        <TableCell>CellSentinel</TableCell>
+                        <TableCell>CellSentinel</TableCell>
+                        <TableCell>CellSentinel</TableCell>
+                        <TableCell>CellText</TableCell>
+                        <TableCell>CellText</TableCell>
+                        <TableCell>E left</TableCell>
+                        <TableCell>E right</TableCell>
+                        <TableCell>E middle</TableCell>
+                        <TableCell>E name</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    <TableRow key={0}>
+                        <TableCell padding="checkbox">
+                            <HiCheckbox checked={false} icon="widgets" />
+                        </TableCell>
+                        <TableCell>
+                            <CellSentinelScore
+                                value={400}
+                                result={'ACCEPTED'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellSentinelScore
+                                value={-400}
+                                result={'BLOCKED'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellSentinel
+                                label={'Acceptée'}
+                                letter={'A'}
+                                color={'#00AF01'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellSentinel
+                                label={'Bloquée'}
+                                letter={'B'}
+                                color={'#D50000'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellSentinel
+                                label={'À vérifier'}
+                                letter={'A'}
+                                color={'#FF8F01'}
+                                active
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellSentinel
+                                label={'Autorisée'}
+                                letter={'A'}
+                                color={'#00AF01'}
+                                outlined
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellSentinel
+                                label={'Refusée'}
+                                letter={'R'}
+                                color={'#D50000'}
+                                title={'Refusée par\nJohn Doe'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellText label={'Sample text'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellText label={'Sample colored text'} color="primary" />
+                        </TableCell>
+                        <TableCell style={{ maxWidth: 50 }}>
+                            <CellText label={'Sample text ellipsis left'} ellipsis={'left'} />
+                        </TableCell>
+                        <TableCell style={{ maxWidth: 50 }}>
+                            <CellText label={'ellipsis right'} ellipsis={'right'} />
+                        </TableCell>
+                        <TableCell style={{ maxWidth: 50 }}>
+                            <CellText label={'ellipsis middle'} ellipsis={'middle'} />
+                        </TableCell>
+                        <TableCell style={{ maxWidth: 50 }}>
+                            <CellText
+                                label={'CDG Charles de Gaulle'}
+                                ellipsis={'after-first-word'}
+                            />
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+            <Table style={{ marginTop: 100 }}>
+                <TableHead>
+                    <TableRow>
+                        <TableCell padding="checkbox">
+                            <HiCheckbox indeterminate={false} checked={false} icon="dashboard" />
+                        </TableCell>
+                        <TableCell>CellRate</TableCell>
+                        <TableCell>CellRate</TableCell>
+                        <TableCell>CellRate</TableCell>
+                        <TableCell>CellPin</TableCell>
+                        <TableCell>CellPin</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    <TableRow key={0}>
+                        <TableCell padding="checkbox">
+                            <HiCheckbox checked={false} icon="widgets" />
+                        </TableCell>
+                        <TableCell>
+                            <CellRate value={20} isPositive trendchip={'up'} indicator={'volume'} />
+                        </TableCell>
+                        <TableCell>
+                            <CellRate
+                                value={64}
+                                isPositive
+                                trendchip={'down'}
+                                indicator={'amount'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellRate
+                                value={18}
+                                isPositive={false}
+                                trendchip={'down'}
+                                indicator={'amount'}
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <CellPinToAction number={0} />
+                        </TableCell>
+                        <TableCell>
+                            <CellPinToAction
+                                number={12}
+                                onClick={() => {
+                                    // eslint-disable-next-line no-alert
+                                    alert('Click on Pin !');
+                                }}
+                            />
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+        </div>
+    );
+}
+;<HiCells/>
+```

package/src/HiCell/index.js

@@ -0,0 +1,9 @@
+export { default as CellAddress } from './CellAddress';
+export { default as CellDate } from './CellDate';
+export { default as CellIcon } from './CellIcon';
+export { default as CellImage } from './CellImage';
+export { default as CellNumeric } from './CellNumeric';
+export { default as CellRate } from './CellRate';
+export { default as CellSentinel } from './CellSentinel';
+export { default as CellText } from './CellText';
+export { default as CellTextStyled } from './CellTextStyled';

package/src/HiCheckbox/HiCheckbox.js

@@ -0,0 +1,200 @@
+// @inheritedComponent Checkbox
+import React from 'react';
+import PropTypes from 'prop-types';
+import Checkbox from '@mui/material/Checkbox';
+import withStyles from '@mui/styles/withStyles';
+import HiIcon from '../HiIcon';
+import classNames from 'classnames';
+
+export const styles = theme => ({
+    root: {
+        marginRight: 4,
+        marginLeft: 4,
+        padding: 0,
+        fontSize: 20,
+    },
+    checked: {},
+    checkedPrimary: {
+        color: theme.palette.primary.main,
+    },
+    checkedSecondary: {
+        color: theme.palette.secondary.main,
+    },
+    checkedPositive: {
+        color: theme.palette.positive.main,
+    },
+    checkedNegative: {
+        color: theme.palette.negative.main,
+    },
+    checkedMiddle: {
+        color: theme.palette.middle.main,
+    },
+    checkedNeutral: {
+        color: theme.palette.neutral.main,
+    },
+    disabled: {
+        color: theme.palette.action.disabled,
+    },
+});
+
+class HiCheckbox extends React.PureComponent {
+    static propTypes = {
+        /**
+         * L'icon est cochée
+         */
+        checked: PropTypes.bool,
+        /**
+         * Icon à afficher quand le composant est coché.
+         */
+        checkedIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+        /**
+         * Surcharge les classes du composant
+         */
+        classes: PropTypes.object,
+        /**
+         * The color of the component. It supports those theme colors that make sense for this component.
+         */
+        color: PropTypes.oneOf([
+            'inherit',
+            'primary',
+            'secondary',
+            'positive',
+            'negative',
+            'middle',
+            'neutral',
+        ]),
+        /**
+         * Icon à afficher quand le composant est non coché.
+         */
+        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+        /**
+         * icon à afficher quand le composant a la prop indeterminate.
+         */
+        indeterminateIcon: PropTypes.string,
+        /**
+         * Fonction de callback onChange
+         * @param {object} event The event source of the callback
+         * @param {bool} checked Boolean state of checkbox
+         */
+        onChange: PropTypes.func,
+        /**
+         * Définit la taille des checkbox (px), différent dans le tableau
+         */
+        size: PropTypes.number,
+        /**
+         * Surcharge le style du composant
+         */
+        style: PropTypes.object,
+    };
+
+    static defaultProps = {
+        checked: false,
+        color: 'inherit',
+        size: 20,
+        icon: 'check_box_outline_blank',
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    /**
+     * Call callback function and stop click propagation
+     * @param event
+     * @param checked
+     */
+    handleChange(event, checked) {
+        // Stop propagation
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+
+        if (this.props.onChange) {
+            this.props.onChange(event, checked);
+        }
+    }
+
+    render() {
+        const {
+            classes,
+            color,
+            checkedIcon,
+            icon,
+            indeterminateIcon,
+            style,
+            size,
+            className,
+            ...other
+        } = this.props;
+
+        const iconStyles = {
+            width: size,
+            height: size,
+            ...style,
+        };
+
+        const hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color)
+            ? 'default'
+            : color;
+
+        let checkboxIcon;
+        if (icon) {
+            const iconProps = {
+                className: classes.root,
+            };
+            if (typeof icon==='string') {
+                checkboxIcon = <HiIcon icon={icon} {...iconProps} />
+            } else if (typeof icon==='object') {
+                checkboxIcon = {...icon};
+                checkboxIcon.props = {...checkboxIcon.props, ...iconProps};
+            }
+        }
+
+        return (
+            <Checkbox
+                classes={{
+                    root: classes.root,
+                    checked: classNames(classes.checked, {
+                        [classes.checkedPrimary]: color === 'primary' || color === 'inherit',
+                        [classes.checkedSecondary]: color === 'secondary',
+                        [classes.checkedPositive]: color === 'positive',
+                        [classes.checkedNegative]: color === 'negative',
+                        [classes.checkedMiddle]: color === 'middle',
+                        [classes.checkedNeutral]: color === 'neutral',
+                    }),
+                    disabled: classes.disabled,
+                }}
+                style={iconStyles}
+                color={hcolor}
+                onChange={this.handleChange}
+                icon={checkboxIcon}
+                {...checkedIcon && {
+                    checkedIcon: (
+                        <HiIcon
+                            className={classes.root}
+                            icon={checkedIcon}
+                            color={color}
+                            size={20}
+                        />
+                    ),
+                }}
+                {...indeterminateIcon && {
+                    indeterminateIcon: (
+                        <HiIcon
+                            className={classes.root}
+                            icon={indeterminateIcon}
+                            color={color}
+                            size={20}
+                        />
+                    ),
+                }}
+                {...other}
+            />
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiCheckbox' })(HiCheckbox);

package/src/HiCheckbox/HiCheckbox.md

@@ -0,0 +1,143 @@
+HiCheckbox example :
+
+```js
+import React from 'react';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import HiCheckbox from './HiCheckbox';
+
+class HiCheckboxes extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            checkedA: true,
+            checkedB: false,
+            checkedC: 0,
+            checkedF: true,
+            checkedG: true,
+        };
+        this.handleChangeA = this.handleChangeA.bind(this);
+        this.handleChangeB = this.handleChangeB.bind(this);
+        this.handleChangeC = this.handleChangeC.bind(this);
+        this.handleChangeD = this.handleChangeD.bind(this);
+        this.handleChangeF = this.handleChangeF.bind(this);
+        this.handleChangeG = this.handleChangeG.bind(this);
+    }
+
+    handleChangeA (event) {
+        this.setState({ checkedA: event.target.checked });
+    };
+    handleChangeB (event) {
+        this.setState({ checkedB: event.target.checked });
+    };
+    handleChangeC (event) {
+        this.setState({ checkedC: event.target.checked });
+    };
+    handleChangeD (event) {
+        this.setState({ checkedD: event.target.checked });
+    };
+    handleChangeF (event) {
+        this.setState({ checkedF: event.target.checked });
+    };
+    handleChangeG (event) {
+        this.setState({ checkedG: event.target.checked });
+    };
+
+    render() {
+        const { classes } = this.props;
+
+        return (
+            <FormGroup row>
+                <FormControlLabel
+                    control={
+                        <HiCheckbox
+                            checked={this.state.checkedA}
+                            onChange={this.handleChangeA}
+                            value="checkedA"
+                        />
+                    }
+                    label="Option A"
+                />
+                <FormControlLabel
+                    control={
+                        <HiCheckbox
+                            checked={this.state.checkedB}
+                            onChange={this.handleChangeB}
+                            value="checkedB"
+                        />
+                    }
+                    label="Option B"
+                />
+                <FormControlLabel
+                    control={
+                        <HiCheckbox
+                            checked={this.state.checkedC === true || this.state.checkedC === 0}
+                            indeterminate={this.state.checkedC === 0}
+                            value="checkedC"
+                            onChange={() => {
+                                this.setState(prevState => {
+                                    if (prevState.checkedC === true) {
+                                        return { checkedC: false };
+                                    }
+                                    if (prevState.checkedC === false) {
+                                        return { checkedC: 0 };
+                                    }
+                                    return { checkedC: true };
+                                });
+                            }}
+                        />
+                    }
+                    label="3 states"
+                />
+                <FormControlLabel
+                    disabled
+                    control={<HiCheckbox value="checkedD" />}
+                    label="Disabled"
+                />
+                <FormControlLabel
+                    disabled
+                    control={<HiCheckbox checked value="checkedE" />}
+                    label="Disabled"
+                />
+                <FormControlLabel
+                    control={
+                        <HiCheckbox
+                            checked={this.state.checkedF}
+                            onChange={this.handleChangeF}
+                            value="checkedF"
+                            color="inherit"
+                        />
+                    }
+                    label="Custom color"
+                />
+                <FormControlLabel
+                    control={
+                        <HiCheckbox
+                            checked={this.state.checkedG === true || this.state.checkedG === 0}
+                            indeterminate={this.state.checkedG === 0}
+                            value="checkedG"
+                            onChange={function() {
+                                this.setState(prevState => {
+                                    if (prevState.checkedG === true) {
+                                        return { checkedG: false };
+                                    }
+                                    if (prevState.checkedG === false) {
+                                        return { checkedG: 0 };
+                                    }
+                                    return { checkedG: true };
+                                });
+                            }}
+                            icon="star_border"
+                            checkedIcon="star"
+                            indeterminateIcon="star_half"
+                            color="negative"
+                        />
+                    }
+                    label="Custom icon"
+                />
+            </FormGroup>
+        );
+    }
+}
+;<HiCheckboxes/>
+```