@hipay/hipay-material-ui 3.11.2 → 3.12.1

package/src/HiTable/HiTable.md

@@ -0,0 +1,461 @@
+HiTable example :
+
+```js
+import React from 'react';
+import HiTable from './HiTable';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import HiSwitch from '../HiSwitch';
+import HiSelectField from '../HiSelect/HiSelectField';
+import HiSwitchState from '../HiSwitch/HiSwitchState';
+import LockOutline from "mdi-material-ui/LockOutline";
+
+const countries = ['FR','GB','QA','US','IE'];
+const pms = ['visa','mastercard','unknown'];
+
+const randomElementFromList = list => list[Math.floor(Math.random() * list.length)];
+
+const generateOperationAttribute = (i) => {
+    if (i%4 === 0) {
+        return [
+           {
+             value: Math.floor(Math.random() * 1000000)/1000*-1,
+             currency: 'EUR',
+           },
+        ];
+    } else if (i%4 === 1) {
+       return [
+          {
+            value: Math.floor(Math.random() * 1000000)/1000*-1,
+            currency: 'EUR',
+          },
+          {
+            value: Math.floor(Math.random() * 1000000)/1000*-1,
+            currency: 'EUR',
+          },
+       ];
+   } else if (i%4 === 2) {
+        return [
+           {
+               value: Math.floor(Math.random() * 1000000)/1000*-1,
+               currency: 'EUR',
+           },
+           {
+               value: Math.floor(Math.random() * 1000000)/1000*-1,
+               currency: 'EUR',
+            },
+            {
+               value: Math.floor(Math.random() * 1000000)/1000*-1,
+               currency: 'EUR',
+            },
+        ];
+    }  else if (i%4 === 3) {
+        return undefined;
+    }
+}
+
+const generateData = () => {
+    let data = [];
+    let country;
+    let pm;
+    for (let i=0; i<100; i++) {
+        country = randomElementFromList(countries);
+        pm = randomElementFromList(pms);
+        data.push({
+            rowId: `${country}+${i}`,
+            datas: {
+              card_country: {
+                  value: country,
+              },
+              rank: {
+                  value: i+1,
+              },
+              rate: {
+                  indicator: 'volume',
+                  trendchip: randomElementFromList(["up", "down"]),
+                  value: Math.floor(Math.random() * 1000)/1000,
+              },
+              volume: {
+                  isPositive: randomElementFromList([true, false]),
+                  value: Math.floor(Math.random() * 1000000)/1000,
+              },
+              amount: {
+                  value: Math.floor(Math.random() * 1000000)/1000,
+                  currency: 'EUR',
+              },
+              sentinel_score: {
+                  value: (Math.floor(Math.random() * 10) - 10) * 100,
+                  result: randomElementFromList(["ACCEPTED", "REFUSED"]),
+              },
+              sentinel_result: randomElementFromList([
+                  { label: "Acceptée", label2: 'A', color: '#00AF01' },
+                  { label: "Refusée", label2: 'R', color: '#AF0700' },
+              ]),
+              status: {
+                  isButton: true,
+                  value: 'CLICK ME !',
+                  color: 'primary',
+                  handleClick: this.handleButtonClick,
+              },
+              currency: {
+                  value: "EUR",
+              },
+              payment_means: {
+                  size: 32,
+                  value: pm,
+              },
+              export: {
+                  icon: 'fa-external-link',
+                  id: 0,
+                  type: 'icon',
+                  handleClick: this.handleIconClick,
+              },
+              chargeback_amount: generateOperationAttribute(i),
+              auth: {
+                  icon: <LockOutline htmlColor="#737373"/>,
+                  id: 0,
+                  type: 'icon',
+                  handleClick: this.handleIconClick,
+              },
+            }
+        });
+    }
+    return data;
+};
+
+class HiTableDemo extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            view: 'l',
+            dataSource: generateData(),
+            columns: {
+                rank: {
+                    align: 'left',
+                    colId: 'rank',
+                    label: 'Rank',
+                    precision: 0,
+                    smallLabel: 'Rank',
+                    title: (data, cell) => `Custom title\n${cell.label}: ${data.value}`,
+                    type: 'text',
+                    view: 'l',
+                },
+                card_country: {
+                    colId: 'card_country',
+                    label: 'Card country',
+                    precision: 0,
+                    smallLabel: 'CardC',
+                    type: 'country',
+                    view: 'l',
+                    data: [
+                        {
+                            id: 'FR',
+                            img: '/static/hmu/images/countries/fr.svg',
+                            label: 'France',
+                        },
+                        {
+                            id: 'GB',
+                            img: '/static/hmu/images/countries/gb.svg',
+                            label: 'Grande-Bretagne',
+                        },
+                        {
+                            id: 'US',
+                            img: '/static/hmu/images/countries/us.svg',
+                            label: 'United States',
+                        },
+                        {
+                            id: 'QA',
+                            img: '/static/hmu/images/countries/qa.svg',
+                            label: 'Qatar',
+                        },
+                        {
+                            id: 'IE',
+                            img: '/static/hmu/images/countries/ie.svg',
+                            label: 'Ireland',
+                        },
+                    ],
+                },
+                rate: {
+                    colId: 'rate',
+                    label: 'Rate',
+                    precision: 0,
+                    smallLabel: 'Rate',
+                    type: 'rate',
+                    view: 'l',
+                },
+                volume: {
+                    colId: 'volume',
+                    label: 'Volume',
+                    precision: 2,
+                    smallLabel: 'Vol',
+                    type: 'numeric',
+                    view: 'l',
+                },
+                amount: {
+                    colId: 'amount',
+                    label: 'Amount',
+                    precision: 2,
+                    currency: 'EUR',
+                    smallLabel: 'Am',
+                    type: 'numeric',
+                    view: 'l',
+                },
+                sentinel_score: {
+                    colId: 'sentinel_score',
+                    label: 'Score',
+                    smallLabel: 'Score',
+                    type: 'score',
+                    view: 'l',
+                },
+                sentinel_result: {
+                    colId: 'sentinel_result',
+                    label: 'Sentinel result',
+                    smallLabel: 'S.St',
+                    type: 'sentinel',
+                    view: 'l',
+                },
+                status: {
+                    colId: 'status',
+                    label: 'Status',
+                    smallLabel: 'Status',
+                    view: 'l',
+                },
+                currency: {
+                    colId: 'currency',
+                    label: 'Currency',
+                    smallLabel: 'Currency',
+                    view: 'l',
+                },
+                payment_means: {
+                    colId: 'payment_means',
+                    data: [
+                        { id: "american-express", label: "American Express", img: "/static/hmu/images/payment-means/american-express.svg", fallbackImage: "/static/hmu/images/payment-means/no-logo.svg", colorPrimary: "#009DDC" },
+                        { id: "bcmc", label: "BCMC", img: "/static/hmu/images/payment-means/bcmc.svg", fallbackImage: "/static/hmu/images/payment-means/no-logo.svg", colorPrimary: "#005498" },
+                        { id: "cb", label: "CB", img: "/static/hmu/images/payment-means/cb.svg", fallbackImage: "/static/hmu/images/payment-means/no-logo.svg", colorPrimary: "#19984F", colorSecondary: "#012C61" },
+                        { id: "maestro", label: "Maestro", img: "/static/hmu/images/payment-means/maestro.svg", fallbackImage: "/static/hmu/images/payment-means/no-logo.svg", colorPrimary: "#0099DF", colorSecondary: "#D32011" },
+                        { id: "mastercard", label: "Mastercard", img: "/static/hmu/images/payment-means/mastercard.svg", fallbackImage: "/static/hmu/images/payment-means/no-logo.svg", colorPrimary: "#F79E1B", colorSecondary: "#EB001B" },
+                        { id: "paypal", label: "Paypal", img: "/static/hmu/images/payment-means/paypal.svg", fallbackImage: "/static/hmu/images/payment-means/no-logo.svg", colorPrimary: "#0288CD", colorSecondary: "#02368C" },
+                        { id: "tpe", label: "TPE", img: "/static/hmu/images/payment-means/tpe.svg", fallbackImage: "/static/hmu/images/payment-means/no-logo.svg", colorPrimary: "" },
+                        { id: "visa", label: "Visa", img: "/static/hmu/images/payment-means/visa.svg", fallbackImage: "/static/hmu/images/payment-means/no-logo.svg", colorPrimary: "#EC982D", colorSecondary: "#263379" },
+                    ],
+                    label: 'Payment means',
+                    precision: 0,
+                    smallLabel: 'PM',
+                    type: 'image',
+                    view: 'l',
+                },
+                export: {
+                    align: 'right',
+                    colId: 'export',
+                    label: 'Export',
+                    smallLabel: 'Export',
+                    type: 'icon',
+                    view: 'l',
+                },
+                chargeback_amount: {
+                    colId: 'chargeback_amount',
+                    label: 'Chargeback amount',
+                    precision: 2,
+                    currency: 'EUR',
+                    smallLabel: 'Cm',
+                    type: 'numeric',
+                    view: 'l',
+                },
+                auth: {
+                    colId: 'auth',
+                    label: 'Auth',
+                    smallLabel: 'Auth',
+                    type: 'icon',
+                    view: 's',
+                },
+            },
+            locale: 'en_GB',
+            currency: 'EUR',
+            sortable: false,
+            clickable: false,
+            dense: false,
+        };
+
+        this.handleClick = this.handleClick.bind(this);
+        this.handleIconClick = this.handleIconClick.bind(this);
+        this.handleButtonClick = this.handleButtonClick.bind(this);
+        this.handleSort = this.handleSort.bind(this);
+        this.handleChangeCurrency = this.handleChangeCurrency.bind(this);
+        this.handleChangeView = this.handleChangeView.bind(this);
+    }
+
+    handleClick(event, data) {
+        // eslint-disable-next-line no-alert
+        alert(`Row ${data.rowId} clicked`);
+    };
+
+    handleIconClick() {
+        // eslint-disable-next-line no-alert
+        alert('Icon clicked');
+    };
+
+    handleButtonClick() {
+        // eslint-disable-next-line no-alert
+        alert('Button clicked');
+    };
+
+    handleSort(orderBy) {
+        this.setState(prevState => {
+            return {
+                dataSource: prevState.dataSource.sort((a, b) => {
+                    if (prevState.order === 'asc') {
+                        if (a.datas[orderBy].value < b.datas[orderBy].value) {
+                            return 1;
+                        }
+                        if (a.datas[orderBy].value > b.datas[orderBy].value) {
+                            return -1;
+                        }
+                        return 0;
+                    }
+                    if (a.datas[orderBy].value > b.datas[orderBy].value) {
+                        return 1;
+                    }
+                    if (a.datas[orderBy].value < b.datas[orderBy].value) {
+                        return -1;
+                    }
+                    return 0;
+                }),
+                orderBy,
+                order: prevState.order === 'asc' ? 'desc' : 'asc',
+            };
+        });
+    }
+
+    handleChangeCurrency(currency) {
+        this.setState(prevState => {
+            return {
+                ...prevState,
+                currency,
+                dataSource: prevState.dataSource.map(item => {
+                    return {
+                        ...item,
+                        datas: {
+                            ...item.datas,
+                            amount: {
+                                ...item.datas.amount,
+                                currency,
+                            },
+                        },
+                    };
+                }),
+            };
+        });
+    }
+
+    handleChangeView(event, value) {
+        this.setState(prevState => {
+            return {
+                ...prevState,
+                view: value,
+                columns: Object.keys(prevState.columns).map((key) => {
+                    return {
+                        ...prevState.columns[key],
+                        view: value,
+                    };
+                }),
+            };
+        });
+    }
+
+    render() {
+        const { locale, columns, currency, sortable, order, orderBy, dense, clickable, view } = this.state;
+
+        return (
+            <div style={{ width: '100%' }}>
+                <div style={{ margin: 15 }}>HiTable</div>
+                <HiTable
+                    columns={columns}
+                    data={this.state.dataSource}
+                    sortable={sortable}
+                    order={order}
+                    orderBy={orderBy}
+                    onRowClick={clickable ? this.handleClick : undefined}
+                    onSort={sortable ? this.handleSort : undefined}
+                    dense={dense}
+                    locale={locale}
+                />
+
+                <FormGroup>
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={sortable}
+                                onChange={(event, value) => this.setState({
+                                    sortable: value,
+                                    order: value ? 'asc' : undefined,
+                                    orderBy: value ? 'rank' : undefined,
+                                })}
+                            />
+                        }
+                        label="Sortable"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={clickable}
+                                onChange={(event, value) => this.setState({ clickable: value })}
+                            />
+                        }
+                        label="Clickable"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={dense}
+                                onChange={(event, value) => this.setState({
+                                    dense: value,
+                                })}
+                            />
+                        }
+                        label="Dense"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitchState
+                                checked={locale}
+                                onChange={(event, value) => this.setState({
+                                    locale: value,
+                                })}
+                                leftLabel="EN"
+                                leftValue="en_GB"
+                                rightLabel="FR"
+                                rightValue="fr_FR"
+                            />
+                        }
+                        label="Locale"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitchState
+                                checked={currency}
+                                onChange={(event, value) => this.handleChangeCurrency(value)}
+                                leftLabel="USD"
+                                leftValue="USD"
+                                rightLabel="EUR"
+                                rightValue="EUR"
+                            />
+                        }
+                        label="Currency"
+                    />
+                    <HiSelectField
+                        id="view"
+                        name="view"
+                        onChange={this.handleChangeView}
+                        options={[{ id: 's', label: 'S' }, { id: 'm', label: 'M' }, { id: 'l', label: 'L' }]}
+                        value={view}
+                        label="View"
+                    />
+                </FormGroup>
+            </div>
+        );
+    }
+}
+;<HiTableDemo/>
+
+```

package/src/HiTable/HiTable.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, getClasses } from '../test-utils';
+import HiTable from './HiTable';
+
+describe('<HiTable columns={columns} data={data}/>', () => {
+    let shallow;
+    let classes;
+    const columns = {};
+    const data = [];
+
+
+    before(() => {
+        shallow = createShallow({ untilSelector: 'table' });
+        classes = getClasses(<HiTable columns={columns} data={data} />);
+    });
+
+    describe('default HiTable export', () => {
+
+        it('should render a table with the root classes', () => {
+            const wrapper = shallow(
+                <HiTable
+                    columns={columns}
+                    data={data}
+                />,
+            );
+            assert.strictEqual(wrapper.name(), 'table');
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+        });
+        
+    });
+});

package/src/HiTable/HiTableBody.js

@@ -0,0 +1,53 @@
+// @inheritedComponent TableBody
+import React from 'react';
+import PropTypes from 'prop-types';
+import TableBody from '@mui/material/TableBody';
+import HiTableRow from './HiTableRow';
+
+class HiTableBody extends React.PureComponent {
+    static propTypes = {
+        /**
+         * En-tête des données et leurs paramètres
+         */
+        columns: PropTypes.object.isRequired,
+        /**
+         * Données du tableau
+         */
+        data: PropTypes.array.isRequired,
+        /**
+         * Densité d'affichage (joue sur la hauteur des lignes)
+         */
+        dense: PropTypes.bool,
+        /**
+         * Locale pour afficher les nombres et montants
+         */
+        locale: PropTypes.string,
+        /**
+         * Fonction appelée au clic sur une ligne
+         */
+        onClick: PropTypes.func,
+    };
+
+    render() {
+        const { columns, data, dense, locale, onClick } = this.props;
+
+        return (
+            <TableBody>
+                {data.map((n, index) => {
+                    return (
+                        <HiTableRow
+                            columns={columns}
+                            rowdata={n}
+                            key={n.rowId || index}
+                            onClick={onClick}
+                            dense={dense}
+                            locale={locale}
+                        />
+                    );
+                })}
+            </TableBody>
+        );
+    }
+}
+
+export default HiTableBody;

package/src/HiTable/HiTableHeader.js

@@ -0,0 +1,112 @@
+// @inheritedComponent TableHeader
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '@mui/styles/withStyles';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import * as cst from './constants';
+
+const styles = theme => ({
+    head: {
+        cursor: 'inherit',
+        borderBottom: `solid 1px ${theme.palette.divider}`
+    },
+    cell: {
+        border: 'none',
+        paddingRight: '13px',
+        paddingLeft: '13px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        fontWeight: theme.typography.fontWeightLight,
+        color: '#000000',
+        ...theme.typography.b4,
+    },
+    icon: {
+        color: '#00ADE9',
+    },
+});
+
+class HiTableHeader extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Surcharge les classes du composant
+         */
+        classes: PropTypes.object,
+        /**
+         * En-tête des données et leurs paramètres
+         */
+        columns: PropTypes.object.isRequired,
+        /**
+         * Le tableau est-il triable ?
+         */
+        dense: PropTypes.bool,
+        /**
+         * Fonction d'appel du trie des données
+         */
+        onRequestSort: PropTypes.func.isRequired,
+        /**
+         * Sens du tri
+         */
+        order: PropTypes.oneOf(['asc', 'desc']),
+        /**
+         * Id de la colonne trié
+         */
+        orderBy: PropTypes.string,
+        /**
+         * Densité d'affichage (joue sur la hauteur des lignes)
+         */
+        sortable: PropTypes.bool,
+    };
+
+    createSortHandler = property => event => {
+        this.props.onRequestSort(event, property);
+    };
+
+    render() {
+        const { classes, columns, order, orderBy, sortable, dense } = this.props;
+
+        return (
+            <TableHead className={classes.head}>
+                <TableRow
+                    style={{
+                        height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT,
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    {Object.keys(columns).map(key => {
+                        const { align, colId, type, label, smallLabel, view, headerTooltip } = columns[key];
+                        const finalLabel = view === 's' ? smallLabel : label;
+                        return (
+                            <TableCell
+                                key={colId}
+                                className={classes.cell}
+                                sortDirection={orderBy === colId ? order : false}
+                                align={(cst.ALIGN_RIGHT_TYPES.includes(type) || align === 'right') ? 'right' : 'inherit'}
+                                title={headerTooltip}
+                            >
+                                {sortable ? (
+                                    <TableSortLabel
+                                        active={orderBy === colId}
+                                        direction={order}
+                                        onClick={this.createSortHandler(colId)}
+                                        classes={{ icon: classes.icon }}
+                                        title={headerTooltip || label}
+                                    >
+                                        {finalLabel}
+                                    </TableSortLabel>
+                                ) : (
+                                    finalLabel
+                                )}
+                            </TableCell>
+                        );
+                    }, this)}
+                </TableRow>
+            </TableHead>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiTableHeader' })(HiTableHeader);