@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/src/HiTable/HiTable.md

@@ -0,0 +1,364 @@
+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';
+
+const countries = ['FR','GB','QA','US','IE'];
+
+const randomElementFromList = list => list[Math.floor(Math.random() * list.length)];
+
+const generateData = () => {
+    let data = [];
+    let country;
+    for (let i=0; i<100; i++) {
+        country = randomElementFromList(countries);
+        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,
+              },
+              export: {
+                  icon: 'fa-external-link',
+                  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: 'sentinel_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',
+                },
+                export: {
+                    align: 'right',
+                    colId: 'export',
+                    label: 'Export',
+                    smallLabel: 'Export',
+                    type: 'icon',
+                    view: 'l',
+                },
+            },
+            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,55 @@
+// @inheritedComponent TableBody
+import React from 'react';
+import PropTypes from 'prop-types';
+import TableBody from '@material-ui/core/TableBody/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 '@material-ui/core/styles';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import TableSortLabel from '@material-ui/core/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);

package/src/HiTable/HiTableRow.js

@@ -0,0 +1,116 @@
+// @inheritedComponent TableRow
+import React from 'react';
+import PropTypes from 'prop-types';
+import keycode from 'keycode';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import TableRow from '@material-ui/core/TableRow';
+import HiCellBuilder from './HiCellBuilder';
+import * as cst from './constants';
+
+export const styles = theme => ({
+    row: {
+        '&:last-child': {
+            borderBottom: 'solid 1px #E4E7E8',
+        },
+        '&:hover, &:focus': {
+            backgroundColor: `${theme.palette.action.hover} !important`,
+        },
+    },
+    clickableRow: {
+        cursor: 'pointer',
+    },
+    cell: {
+        border: 'none',
+        padding: '0px 13px',
+        minHeight: '32px',
+        maxHeight: '40px',
+        fontWeight: theme.typography.fontWeightRegular,
+        lineHeight: 'unset',
+        ...theme.typography.b3,
+    },
+});
+
+class HiTableRow extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Surcharge les classes du composant
+         */
+        classes: PropTypes.object,
+        /**
+         * En-tête des colonnes et leurs paramètres
+         */
+        columns: PropTypes.object.isRequired,
+        /**
+         * Densité d'affichage (joue sur la hauteur des lignes)
+         */
+        dense: PropTypes.bool,
+        /**
+         * Id de la ligne
+         */
+        key: PropTypes.string,
+        /**
+         * Locale pour afficher les nombres et montants
+         */
+        locale: PropTypes.string,
+        /**
+         * Action au clic sur une ligne
+         */
+        onClick: PropTypes.func,
+        /**
+         * Données de la ligne
+         */
+        rowdata: PropTypes.object.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(event, rowdata) {
+        if (this.props.onClick) {
+            this.props.onClick(event, rowdata);
+        }
+    }
+
+    render() {
+        const { classes, columns, dense, key, locale, rowdata } = this.props;
+
+        return (
+            <TableRow
+                className={classNames(classes.row, { [classes.clickableRow]: this.props.onClick })}
+                hover
+                onClick={event => this.handleClick(event, rowdata)}
+                onKeyDown={(event) => {
+                    if (keycode(event) === 'space' || keycode(event) === 'enter') {
+                        event.preventDefault();
+                        this.handleClick(event, rowdata);
+                    }
+                }}
+                key={key}
+                style={{
+                    height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                }}
+                tabIndex={0}
+                dataId={rowdata.rowId}
+            >
+                {
+                    Object.keys(columns).map(column => {
+                        return (
+                            <HiCellBuilder
+                                key={columns[column].colId}
+                                className={classes.cell}
+                                column={columns[column]}
+                                data={rowdata}
+                                locale={locale}
+                            />
+                        );
+                    }, this)
+                }
+            </TableRow>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiTableRow' })(HiTableRow);