@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/src/HiTable/HiTable.md

@@ -1,364 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,55 +0,0 @@
-// @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

@@ -1,112 +0,0 @@
-// @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

@@ -1,116 +0,0 @@
-// @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);