@hipay/hipay-material-ui 1.0.0-beta.1

package/es/HiTable/OrderColumns.js

@@ -0,0 +1,437 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import update from 'react-addons-update';
+import Popover from 'material-ui/Popover';
+import { Close, Drag } from 'mdi-material-ui';
+import { SortableContainer, SortableElement, SortableHandle, arrayMove } from 'react-sortable-hoc';
+import { FormControlLabel } from 'material-ui/Form';
+import { grey } from 'material-ui/colors';
+import HiSizeMediumIcon from '../svg-icons/HiSizeMedium';
+import HiSizeLargeIcon from '../svg-icons/HiSizeLarge';
+import HiSizeSmallIcon from '../svg-icons/HiSizeSmall';
+import HiCheckbox from '../HiCheckbox';
+import HiInput from '../HiForm/HiInput';
+import HiSwitch from '../HiSwitch';
+
+import withStyles from '../styles/withStyles';
+import * as cst from './constants';
+import { Scrollbars } from 'react-custom-scrollbars';
+
+export const styles = theme => ({
+    menu: {
+        width: 300,
+        paddingTop: 15
+    },
+    menuTitle: {
+        fontSize: 20,
+        fontWeight: 300,
+        paddingLeft: 12,
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        marginBottom: 16
+    },
+    closeMenu: {
+        width: 24,
+        height: 24,
+        color: theme.palette.neutral.normal,
+        cursor: 'pointer',
+        float: 'right',
+        marginRight: 10,
+        marginTop: -5
+    },
+    itemFilter: {
+        '&:hover': {
+            backgroundColor: theme.palette.hover,
+            fontWeight: theme.typography.fontWeightMedium
+        },
+        height: 40,
+        width: '100%',
+        paddingLeft: 3,
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+    },
+    itemFilterDate: {
+        height: 80
+    },
+    checkbox: {
+        position: 'relative',
+        top: 2
+    },
+    columnList: {
+        maxHeight: 440,
+        marginTop: 15
+    },
+    controlLabelRoot: {
+        marginLeft: 6,
+        marginBottom: 8,
+        fontSize: 15
+    },
+    switchLabelRoot: {
+        marginLeft: 15,
+        fontSize: 15
+    },
+    columnLabel: {
+        position: 'relative',
+        top: 5,
+        left: 5
+    },
+    label: {
+        fontWeight: 'inherit'
+    },
+    dragIcon: {
+        cursor: 'move',
+        position: 'relative',
+        top: 6
+    },
+    helperClass: {
+        zIndex: 1550
+    },
+    svgIcon: {
+        position: 'relative',
+        top: 10,
+        right: 25,
+        float: 'right',
+        cursor: 'pointer',
+        fill: theme.palette.business.primary.normal
+    },
+    iconDisabled: {
+        fill: grey[300],
+        cursor: 'inherit'
+    },
+    reducedLabel: {
+        textTransform: 'uppercase',
+        fontSize: 11,
+        fontWeight: theme.typography.fontWeightLight,
+        color: theme.palette.neutral.normal
+    },
+    switchChecked: {
+        color: theme.palette.neutral.normal
+    }
+});
+
+/**
+ * Construit une popover listant les colonnes du tableaux,
+ * afin de les masquer / afficher / ordonner.
+ */
+class OrderColumns extends React.Component {
+
+    constructor(props) {
+        super();
+
+        this.state = {
+            searchValue: '',
+            suggestions: props.orderedColumns
+        };
+
+        this.handleSearch = this.handleSearch.bind(this);
+        this.handleReset = this.handleReset.bind(this);
+        this.handleSortEnd = this.handleSortEnd.bind(this);
+        this.handleChangeView = this.handleChangeView.bind(this);
+        this.getFilteredSuggestions = this.getFilteredSuggestions.bind(this);
+        this.toggleDisplay = this.toggleDisplay.bind(this);
+        this.toggleDisplayTime = this.toggleDisplayTime.bind(this);
+    }
+
+    /**
+     * Update suggestion list
+     * @param nextProps
+     * @param nextContext
+     */
+    componentWillReceiveProps(nextProps, nextContext) {
+        if (this.props.orderedColumns !== nextProps.orderedColumns) {
+            this.setState({
+                suggestions: this.getFilteredSuggestions(nextProps.orderedColumns, this.state.searchValue)
+            });
+        }
+    }
+
+    getFilteredSuggestions(orderedColumns, searchValue) {
+        if (searchValue === '') {
+            return orderedColumns;
+        }
+        return orderedColumns.filter(item => this.props.columns[item.colId].label.toLowerCase().search(searchValue.trim().toLowerCase()) !== -1);
+    }
+
+    handleReset() {
+        this.setState({ searchValue: '', suggestions: this.props.orderedColumns });
+    }
+
+    handleSearch(event) {
+        const value = event.target.value;
+        this.setState({
+            searchValue: value,
+            suggestions: this.getFilteredSuggestions(this.props.orderedColumns, value)
+        });
+    }
+
+    handleSortEnd({ oldIndex, newIndex }) {
+        const reorderedColumns = arrayMove(this.props.orderedColumns, oldIndex, newIndex);
+
+        if (typeof this.props.updateOrderedColumns !== 'undefined') {
+            this.props.updateOrderedColumns(reorderedColumns);
+        }
+    }
+
+    toggleDisplay(colId) {
+        const index = this.props.orderedColumns.findIndex(item => item.colId === colId);
+
+        // use Immutability to update array as new array
+        const newOrderedColumns = update(this.props.orderedColumns, {
+            [index]: {
+                $merge: {
+                    displayed: this.props.orderedColumns[index].hasOwnProperty('displayed') ? !this.props.orderedColumns[index].displayed : false
+                }
+            }
+        });
+
+        if (typeof this.props.updateOrderedColumns !== 'undefined') {
+            this.props.updateOrderedColumns(newOrderedColumns);
+        }
+    }
+
+    /**
+     * Pour les colonnes de type date, affiche l'heure en plus de la date
+     *
+     * @param colId
+     */
+    toggleDisplayTime(colId) {
+        if (this.props.columns[colId].type === cst.TYPE_DATE) {
+            const index = this.props.orderedColumns.findIndex(item => item.colId === colId);
+
+            // use Immutability to update array as new array
+            const newOrderedColumns = update(this.props.orderedColumns, {
+                [index]: {
+                    $merge: {
+                        displayTime: this.props.orderedColumns[index].hasOwnProperty('displayTime') ? !this.props.orderedColumns[index].displayTime : false
+                    }
+                }
+            });
+
+            if (typeof this.props.updateOrderedColumns !== 'undefined') {
+                this.props.updateOrderedColumns(newOrderedColumns);
+            }
+        }
+    }
+
+    handleChangeView(item, index) {
+        let newView;
+        switch (item.view) {
+            case cst.VIEWS.SMALL:
+                newView = cst.VIEWS.MEDIUM;
+                break;
+            case cst.VIEWS.MEDIUM:
+                newView = cst.VIEWS.LARGE;
+                break;
+            case cst.VIEWS.LARGE:
+            default:
+                newView = cst.VIEWS.SMALL;
+                break;
+        }
+
+        // use Immutability to update array as new array
+        const newOrderedColumns = update(this.props.orderedColumns, {
+            [index]: { $merge: { view: newView } }
+        });
+
+        if (typeof this.props.updateOrderedColumns !== 'undefined') {
+            this.props.updateOrderedColumns(newOrderedColumns);
+        }
+    }
+
+    render() {
+        const {
+            classes,
+            anchorEl,
+            isOpen,
+            onClose,
+            columns,
+            mandatoryColumnId,
+            translations
+        } = this.props;
+        const { searchValue, suggestions } = this.state;
+
+        const DragHandle = SortableHandle(() => React.createElement(Drag, { classes: { root: classes.dragIcon } }));
+
+        const SortableItem = SortableElement(({ item, sortIndex, dragDisabled }) => {
+            const column = columns[item.colId];
+            const rootIconClass = classNames(classes.svgIcon, {
+                [classes.iconDisabled]: item.displayed === false
+            });
+            const onClick = item.displayed === false ? null : () => this.handleChangeView(item, sortIndex);
+
+            let viewIcon;
+            if (column.fixedWidth !== true) {
+                switch (item.view) {
+                    case cst.VIEWS.SMALL:
+                        viewIcon = React.createElement(HiSizeSmallIcon, {
+                            classes: { root: rootIconClass },
+                            onClick: onClick,
+                            className: 'viewIconSmall'
+                        });
+                        break;
+                    case cst.VIEWS.MEDIUM:
+                        viewIcon = React.createElement(HiSizeMediumIcon, {
+                            classes: { root: rootIconClass },
+                            onClick: onClick,
+                            className: 'viewIconMedium'
+                        });
+                        break;
+                    default:
+                        viewIcon = React.createElement(HiSizeLargeIcon, {
+                            classes: { root: rootIconClass },
+                            onClick: onClick,
+                            className: 'viewIconLarge'
+                        });
+                        break;
+                }
+            }
+
+            return React.createElement(
+                'div',
+                {
+                    className: classNames(classes.itemFilter, {
+                        [classes.itemFilterDate]: column.type === 'date'
+                    })
+                },
+                dragDisabled || React.createElement(DragHandle, { classes: { root: classes.dragIcon } }),
+                React.createElement(FormControlLabel, {
+                    classes: {
+                        root: classes.controlLabelRoot,
+                        label: classNames(classes.columnLabel, classes.label)
+                    },
+                    control: React.createElement(HiCheckbox, {
+                        classes: { root: classes.checkbox },
+                        checked: item.displayed !== false,
+                        onChange: () => this.toggleDisplay(item.colId),
+                        disabled: mandatoryColumnId === item.colId
+                    }),
+                    label: column.label
+                }),
+                item.view === cst.VIEWS.SMALL && typeof column.reducedLabel !== 'undefined' && React.createElement(
+                    'span',
+                    { className: classes.reducedLabel },
+                    column.reducedLabel
+                ),
+                viewIcon,
+                column.type === cst.TYPE_DATE && React.createElement(
+                    'div',
+                    null,
+                    React.createElement(FormControlLabel, {
+                        classes: { root: classes.switchLabelRoot, label: classes.label },
+                        control: React.createElement(HiSwitch, {
+                            checked: item.displayTime,
+                            classes: { checked: classes.switchChecked },
+                            onChange: () => this.toggleDisplayTime(item.colId)
+                        }),
+                        disabled: item.displayed === false,
+                        label: translations.time
+                    })
+                )
+            );
+        });
+
+        const SortableList = SortableContainer(({ items, dragDisabled }) => {
+            return React.createElement(
+                'div',
+                { className: classes.columnList },
+                items.map((item, index) => {
+                    return React.createElement(SortableItem, {
+                        key: `sortable-item-${item.colId}`,
+                        item: item,
+                        index: index,
+                        sortIndex: index,
+                        dragDisabled: dragDisabled
+                    });
+                })
+            );
+        });
+
+        return React.createElement(
+            Popover,
+            {
+                id: 'order-columns-menu',
+                anchorEl: anchorEl,
+                anchorReference: 'anchorEl',
+                open: isOpen,
+                classes: { paper: classes.menu },
+                onClose: onClose
+            },
+            React.createElement(
+                'div',
+                { className: classes.menuTitle },
+                React.createElement(
+                    'span',
+                    null,
+                    translations.choose_and_organize_columns
+                ),
+                React.createElement(Close, { classes: { root: classes.closeMenu }, onClick: onClose })
+            ),
+            React.createElement(HiInput, {
+                value: searchValue,
+                onChange: this.handleSearch,
+                onReset: this.handleReset,
+                placeholder: translations.search,
+                startAdornment: "Magnify"
+            }),
+            React.createElement(
+                Scrollbars,
+                { autoHeight: true, autoHeightMax: 440 },
+                React.createElement(SortableList, {
+                    items: suggestions,
+                    onSortEnd: this.handleSortEnd,
+                    useDragHandle: true,
+                    helperClass: classes.helperClass,
+                    lockAxis: 'y',
+                    dragDisabled: searchValue.length > 0
+                })
+            )
+        );
+    }
+}
+
+OrderColumns.defaultProps = {
+    translations: {
+        choose_and_organize_columns: 'Choose & organize columns',
+        search: 'Search',
+        time: 'Time'
+    }
+};
+OrderColumns.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Ancre de l'élément sur lequel le click a été déclenché
+     * Utilisé pour positionner le composant.
+     */
+    anchorEl: PropTypes.object,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Tableau des colonnes utilisées par le tableau
+     */
+    columns: PropTypes.object.isRequired,
+    /**
+     * Détermine si le menu de configuration des colonnes est ouvert ou non
+     */
+    isOpen: PropTypes.bool.isRequired,
+    /**
+     * Id de la colonne obligatoire, ne pourra être cachée
+     */
+    mandatoryColumnId: PropTypes.string.isRequired,
+    /**
+     * Fonction de callback pour fermer, agit sur la propriété 'isOpen'
+     */
+    onClose: PropTypes.func.isRequired,
+    /**
+     * Tableau des colonnes affichées (ordonnées, visibles/cachées, l/m/s)
+     */
+    orderedColumns: PropTypes.array.isRequired,
+    /**
+     * Traduction des chaînes affichées
+     */
+    translations: PropTypes.object,
+    /**
+     * Fonction de callback qui prend en paramètre le tableau des colonnes mis à jour.
+     */
+    updateOrderedColumns: PropTypes.func
+} : {};
+export default withStyles(styles, { name: 'HmuiOrderColumns' })(OrderColumns);

package/es/HiTable/constants.js

@@ -0,0 +1,180 @@
+/**
+ * Infinite scroll variables
+ */
+export const MAX_ROWS = 50;
+export const NB_ROWS_BACK_TO_TOP = 10;
+
+/**
+ * Cell height (px)
+ */
+export const CELL_HEIGHT = 40;
+export const CELL_HEIGHT_DENSE = 32;
+export const CELL_HEADER_HEIGHT = 48;
+export const CELL_HEADER_HEIGHT_DENSE = 40;
+
+/**
+ * Cell types
+ * @type {string}
+ */
+export const TYPE_ACCOUNT = 'account';
+export const TYPE_ACCOUNT_NUMBER = 'account_number';
+export const TYPE_ADDRESS = 'address';
+export const TYPE_CHECKBOX = 'checkbox';
+export const TYPE_DATE = 'date';
+export const TYPE_ICON = 'icon';
+export const TYPE_IMAGE = 'image';
+export const TYPE_NUMERIC = 'numeric';
+export const TYPE_RATE = 'rate';
+export const TYPE_SENTINEL = 'sentinel';
+export const TYPE_STATUS = 'status';
+export const TYPE_COUNTRY = 'country';
+export const TYPE_TEXT = 'text';
+export const TYPE_THIRD_PARTY_SECURITY = 'third_party_security';
+
+/**
+ * Cell size [L] / [M] / [S]
+ */
+export const VIEWS = {
+    LARGE: 'l',
+    MEDIUM: 'm',
+    SMALL: 's'
+};
+
+/**
+ * Trendchip evolution
+ */
+export const EVOLUTION_UP = 'up';
+export const EVOLUTION_DOWN = 'down';
+export const NO_EVOLUTION = 'equal';
+
+/**
+ * Ellipsis
+ */
+export const ELLIPSIS_AFTER_FIRST_WORD = 'after-first-word';
+export const ELLIPSIS_LEFT = 'left';
+export const ELLIPSIS_MIDDLE = 'middle';
+export const ELLIPSIS_NAME = 'name';
+export const ELLIPSIS_RIGHT = 'right';
+
+/**
+ * Fraud Result
+ */
+export const FRAUD_RESULT_ACCEPTED = 'ACCEPTED';
+export const FRAUD_RESULT_BLOCKED = 'BLOCKED';
+export const FRAUD_RESULT_CHALLENGED = 'CHALLENGED';
+export const FRAUD_RESULT_PENDING = 'PENDING';
+export const FRAUD_RESULT_FORCE_AUTHENTICATE = 'FORCE_AUTHENTICATE';
+export const FRAUD_RESULT_ASK_AUTHENTICATE = 'ASK_AUTHENTICATE';
+
+/**
+ * Cell default width for each views
+ * @type {{}}
+ */
+export const DEFAULT_WIDTHS = {
+    [TYPE_ACCOUNT]: {
+        [VIEWS.LARGE]: 160,
+        [VIEWS.MEDIUM]: 120,
+        [VIEWS.SMALL]: 80
+    },
+    [TYPE_ACCOUNT_NUMBER]: {
+        [VIEWS.LARGE]: 100,
+        [VIEWS.MEDIUM]: 80,
+        [VIEWS.SMALL]: 60
+    },
+    [TYPE_ADDRESS]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 80
+    },
+    [TYPE_CHECKBOX]: {
+        [VIEWS.LARGE]: 40,
+        [VIEWS.MEDIUM]: 40,
+        [VIEWS.SMALL]: 40
+    },
+    [TYPE_COUNTRY]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 80,
+        [VIEWS.SMALL]: 40
+    },
+    [TYPE_DATE]: {
+        [VIEWS.LARGE]: 220,
+        [VIEWS.MEDIUM]: 140,
+        [VIEWS.SMALL]: 120
+    },
+    [TYPE_ICON]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 40
+    },
+    [TYPE_IMAGE]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 60
+    },
+    [TYPE_NUMERIC]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 80
+    },
+    [TYPE_RATE]: {
+        [VIEWS.LARGE]: 100,
+        [VIEWS.MEDIUM]: 90,
+        [VIEWS.SMALL]: 80
+    },
+    [TYPE_SENTINEL]: {
+        [VIEWS.LARGE]: 80,
+        [VIEWS.MEDIUM]: 80,
+        [VIEWS.SMALL]: 80
+    },
+    [TYPE_STATUS]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 80
+    },
+    [TYPE_TEXT]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 80
+    },
+    [TYPE_THIRD_PARTY_SECURITY]: {
+        [VIEWS.LARGE]: 40,
+        [VIEWS.MEDIUM]: 40,
+        [VIEWS.SMALL]: 40
+    }
+};
+/**
+ * Cell default width for each views
+ * @type {{}}
+ */
+export const DEFAULT_VIEWS = {
+    [TYPE_ACCOUNT]: VIEWS.LARGE,
+    [TYPE_ACCOUNT_NUMBER]: VIEWS.LARGE,
+    [TYPE_ADDRESS]: VIEWS.LARGE,
+    [TYPE_CHECKBOX]: VIEWS.LARGE,
+    [TYPE_COUNTRY]: VIEWS.LARGE,
+    [TYPE_DATE]: VIEWS.LARGE,
+    [TYPE_ICON]: VIEWS.LARGE,
+    [TYPE_IMAGE]: VIEWS.LARGE,
+    [TYPE_NUMERIC]: VIEWS.LARGE,
+    [TYPE_RATE]: VIEWS.LARGE,
+    [TYPE_SENTINEL]: VIEWS.LARGE,
+    [TYPE_STATUS]: VIEWS.LARGE,
+    [TYPE_TEXT]: VIEWS.LARGE,
+    [TYPE_THIRD_PARTY_SECURITY]: VIEWS.LARGE
+};
+
+/**
+ * Cell default side padding (one side) for each views
+ * @type {{}}
+ */
+export const DEFAULT_PADDING = {
+    [VIEWS.LARGE]: 12,
+    [VIEWS.MEDIUM]: 10,
+    [VIEWS.SMALL]: 8
+};
+
+/**
+ * Cell types which are align right by default
+ * @type {*[]}
+ */
+export const ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL];

package/es/HiTable/index.js

@@ -0,0 +1,2 @@
+export { default } from './HiTable';
+export { default as HiTableContextMenu } from './HiTableContextMenu';