@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.36

package/es/HiTable/OrderColumns.js

@@ -1,441 +0,0 @@
-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,
-        width: 160
-    },
-    switchLabelRoot: {
-        marginLeft: 15,
-        fontSize: 15
-    },
-    columnLabel: {
-        position: 'relative',
-        top: 5,
-        left: 5,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-    },
-    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

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

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