@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.3

package/es/HiTable/HiTableBody.js

@@ -1,30 +1,24 @@
 import _extends from 'babel-runtime/helpers/extends';
-import _Object$values from 'babel-runtime/core-js/object/values';
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableBody, TableRow } from 'material-ui/Table';
-import classNames from 'classnames';
-import moment from 'moment';
-import 'moment/locale/fr';
-import { withStyles } from '../styles';
+import { withStyles, withTheme } from '../styles';
 import BodyRow from './BodyRow';
 import ChildRow from './ChildRow';
 import HiStickyRow from './HiStickyRow';
 import * as cst from './constants';
-import * as _ from 'lodash';
+import { SORTED_COLUMN_ERROR_MESSAGE } from './HiTableHead';
+import isRequiredIf from 'react-proptype-conditional-require';
 
 export const styles = theme => ({
     tbody: {
         position: 'relative',
-        width: '100%',
+        display: 'block' /* seperates the tbody from the header */
+        , width: '100%',
         overflowX: 'hidden',
         overflowY: 'auto',
         zIndex: 11
     },
-    tbodyFixedWidth: {
-        display: 'block' /* seperates the tbody from the header */
-    },
     tbodyRows: {
         backgroundColor: theme.palette.background3
     },
@@ -67,7 +61,7 @@ export const styles = theme => ({
 class HiTableBody extends React.Component {
 
     constructor(props) {
-        super(props);
+        super();
 
         this.buildIndicator = row => {
             const { columns, dateLocale } = this.props;
@@ -97,48 +91,15 @@ class HiTableBody extends React.Component {
 
         this.state = {
             openedParentRowId: null,
-            openedDetailsRowIdList: [],
-            dataSource: props.dataSource,
-            groupByIds: {}
+            openedDetailsRowIdList: []
         };
 
-        if (props.groupBy && props.dataSource) {
-            let groupByIds = {};
-            props.dataSource.map(row => {
-                let value = row.datas[props.groupBy].value;
-                if (!groupByIds.hasOwnProperty(value)) {
-                    groupByIds[value] = [];
-                }
-                groupByIds[value].push(row.datas);
-            });
-            this.state.groupByIds = groupByIds;
-        }
-
         this.buildIndicator = this.buildIndicator.bind(this);
         this.setOpenedParentRowId = this.setOpenedParentRowId.bind(this);
         this.toggleOpenedDetailsRowId = this.toggleOpenedDetailsRowId.bind(this);
         this.positionStickyRowNextButton = this.positionStickyRowNextButton.bind(this);
-
-        //Monkeypatch TableRow
-        /*var that = this;
-        TableRow.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState){
-          return (this.state.hovered !== nextState.hovered || this.props.selected !== nextProps.selected) && true;
-        }*/
-    }
-
-    deepCompare(object, base) {
-        var that = this;
-        return _.transform(object, (result, value, key) => {
-            if (!_.isEqual(value, base[key])) {
-                result[key] = _.isObject(value) && _.isObject(base[key]) ? that.deepCompare(value, base[key]) : value;
-            }
-        }).length > 0;
     }
 
-    /*shouldComponentUpdate(nextProps, nextState){
-      this.deepCompare(this.props,nextProps) || this.deepCompare(this.state,nextState);
-    }*/
-
     componentDidMount() {
         this.positionStickyRowNextButton();
     }
@@ -147,30 +108,6 @@ class HiTableBody extends React.Component {
         this.positionStickyRowNextButton();
     }
 
-    static getDerivedStateFromProps(props, state) {
-        let nextState = {};
-        if (props.groupBy && props.dataSource && props.dataSource.length > 0) {
-            if (_JSON$stringify(props.dataSource) !== _JSON$stringify(state.dataSource)) {
-                let groupByIds = {};
-                props.dataSource.map(row => {
-                    let value = row.datas[props.groupBy].value;
-                    if (!groupByIds.hasOwnProperty(value)) {
-                        groupByIds[value] = [];
-                    }
-                    groupByIds[value].push(row.datas);
-                });
-                nextState.groupByIds = groupByIds;
-            }
-        }
-        if (_JSON$stringify(props.dataSource) !== _JSON$stringify(state.dataSource)) {
-            nextState.dataSource = props.dataSource;
-        }
-        if (_Object$values(nextState).length > 0) {
-            return nextState;
-        }
-        return null;
-    }
-
     /**
      * Définit l'id de la ligne parente "ouverte" ou null
      * (remplace la ligne par un sous-tableau)
@@ -202,7 +139,7 @@ class HiTableBody extends React.Component {
                         }
                         button.parentElement.style.top = '4px';
                     }
-                    const label = button.previousSibling;
+                    const label = button.previousSibling.previousSibling;
                     button.style.left = `${tableContainer.offsetWidth - label.offsetWidth - 48 - 160}px`;
                 }
             });
@@ -212,16 +149,14 @@ class HiTableBody extends React.Component {
     /**
      * Définit les id des lignes dont les détails sont affichés ou null
      * (ajoute une ligne pour chaque détails)
-     * vérifie aussi le type du détail
      *
      * @param rowId
-     * @param type
      */
-    toggleOpenedDetailsRowId(rowId, type) {
+    toggleOpenedDetailsRowId(rowId) {
         this.setState(prevState => ({
-            openedDetailsRowIdList: prevState.openedDetailsRowIdList.find(item => item.id === rowId && item.type === type) ? prevState.openedDetailsRowIdList.filter(item => {
-                return item.id !== rowId || item.type !== type;
-            }) : [...prevState.openedDetailsRowIdList, { id: rowId, type: type }]
+            openedDetailsRowIdList: prevState.openedDetailsRowIdList.includes(rowId) ? prevState.openedDetailsRowIdList.filter(id => {
+                return id !== rowId;
+            }) : [...prevState.openedDetailsRowIdList, rowId]
         }));
         this.props.addNewRowRefs();
     }
@@ -239,6 +174,7 @@ class HiTableBody extends React.Component {
             tabId,
             columns,
             orderedColumns,
+            dataSource,
             onRowClick,
             selectable,
             onSelect,
@@ -253,15 +189,12 @@ class HiTableBody extends React.Component {
             translations,
             dateLocale,
             numberLocale,
+            groupByIds,
             sortedColumnId,
-            lookupColumns,
-            loading,
-            fixedColumnWidth,
-            disableContextMenu,
-            detailRowsOptions
+            lookupColumns
         } = this.props;
 
-        const { openedParentRowId, openedDetailsRowIdList, groupByIds, dataSource } = this.state;
+        const { openedParentRowId, openedDetailsRowIdList } = this.state;
 
         let nbColumnsDisplayed = 0;
         orderedColumns.forEach(column => {
@@ -279,21 +212,31 @@ class HiTableBody extends React.Component {
             // Gestion du sticky group by
             if (typeof groupBy !== 'undefined' && groupBy === sortedColumnId) {
                 let currentGroupByValue = row.datas[groupBy].value;
-
+                const date = new Date(currentGroupByValue);
+                if (date instanceof Date && isFinite(date)) {
+                    currentGroupByValue = currentGroupByValue.substr(0, 10);
+                }
                 // TODO => condition for other columns type
                 if (columns[groupBy].type === cst.TYPE_DATE) {
-
-                    moment.locale(dateLocale);
-                    let date = moment(currentGroupByValue);
-                    let label = date.format('dddd D MMMM YYYY');
-
-                    if (index === 0 || label !== stickyRowValue) {
-
-                        stickyRowValue = label;
+                    if (index === 0 || currentGroupByValue !== stickyRowValue) {
+                        stickyRowValue = currentGroupByValue;
+                        let label = stickyRowValue;
+                        if (date instanceof Date && isFinite(date)) {
+                            label = new Date(label);
+                            const options = {
+                                year: 'numeric',
+                                month: 'long',
+                                weekday: 'long',
+                                day: 'numeric'
+                            };
+                            label = label.toLocaleString(dateLocale, options);
+                            label = label.charAt(0).toUpperCase() + label.substr(1);
+                        }
 
                         tableRows.push(React.createElement(HiStickyRow, {
                             key: `sticky_row_${row.rowId}`,
                             dense: dense,
+                            value: stickyRowValue,
                             label: label,
                             length: groupByIds[currentGroupByValue].length,
                             colSpan: nbColumnsDisplayed,
@@ -319,6 +262,9 @@ class HiTableBody extends React.Component {
             // has children
             const hasChildren = row.hasOwnProperty('children') && row.children.length > 0;
 
+            // has detail rows
+            const hasDetailRows = row.hasOwnProperty('detailRows') && row.detailRows.length > 0;
+
             const BodyRowProps = _extends({
                 columns,
                 dateLocale,
@@ -330,9 +276,9 @@ class HiTableBody extends React.Component {
             }, hasChildren && {
                 openedAsParent: openedParentRowId === row.rowId,
                 onClick: this.setOpenedParentRowId // if row has children, onClick display the children
+            }, hasDetailRows && {
+                onOpenRowDetails: this.toggleOpenedDetailsRowId
             }, {
-                onOpenRowDetails: this.toggleOpenedDetailsRowId,
-                detailRowsOptions,
                 orderedColumns
             }, selectable && {
                 selectable,
@@ -342,9 +288,7 @@ class HiTableBody extends React.Component {
                 row,
                 sticky,
                 tabId,
-                view,
-                fixedColumnWidth,
-                disableContextMenu
+                view
             });
 
             if (hasChildren && openedParentRowId === row.rowId) {
@@ -355,6 +299,7 @@ class HiTableBody extends React.Component {
                     parentIndicatorColumn: row.parentIndicatorColumn,
                     parentLabel: row.parentLabel,
                     parentLabelIcon: row.parentLabelIcon,
+                    parentDetailRows: row.detailRows,
                     children: row.children,
                     onClose: this.setOpenedParentRowId
                 }, BodyRowProps)));
@@ -363,45 +308,29 @@ class HiTableBody extends React.Component {
             }
 
             // add opened detail rows
-            if (row.details && row.details.length > 0) {
-                row.details.forEach(detail => {
-                    if (detail.rows.length > 0 && openedDetailsRowIdList.find(item => item.id === row.rowId && item.type === detail.type)) {
-                        detail.rows.forEach(detailRow => {
-                            const detailRowProps = {
-                                row: detailRow,
-                                columns,
-                                orderedColumns,
-                                view,
-                                dense,
-                                sticky,
-                                isDetail: true,
-                                fixedColumnWidth,
-                                disableContextMenu,
-                                dateLocale,
-                                numberLocale
-                            };
+            if (hasDetailRows && openedDetailsRowIdList.includes(row.rowId)) {
+                row.detailRows.forEach(detailRow => {
+                    const detailRowProps = {
+                        row: detailRow,
+                        columns,
+                        orderedColumns,
+                        view,
+                        dense,
+                        sticky,
+                        isDetail: true
+                    };
 
-                            tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
-                        });
-                    }
+                    tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
                 });
             }
         });
 
-        const tBodyClasses = classNames(classes.tbody, {
-            [classes.tbodyFixedWidth]: fixedColumnWidth
-        });
-
         return React.createElement(
             TableBody,
             {
                 id: `${tabId}-body`,
-                className: tBodyClasses,
-                style: _extends({
-                    height
-                }, loading && {
-                    opacity: 0.6
-                }),
+                className: classes.tbody,
+                style: { height },
                 onScroll: onScroll
             },
             tableRows.map(tableRow => {
@@ -420,11 +349,7 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l',
-    loading: false,
-    disableContextMenu: true,
-    detailRowsOptions: {},
-    noResultsContent: null
+    view: 'l'
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -452,27 +377,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
-    /**
-     * Options utilisées pour décrire le comportement de lignes de détails
-     */
-    detailRowsOptions: PropTypes.object,
-    /**
-     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
-     */
-    disableContextMenu: PropTypes.bool.isRequired,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: PropTypes.bool,
     /**
      * Hauteur du tableau (px)
      */
     height: PropTypes.number,
-    /**
-     * État du tableau en cours de chargement des données
-     */
-    loading: PropTypes.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/es/HiTable/HiTableContextMenu.js

@@ -10,14 +10,13 @@ export const styles = theme => ({
     contextMenu: {
         zIndex: 9999,
         backgroundColor: theme.palette.background3,
-        boxShadow: '0px 2px 2px rgba(100, 100, 100, 0.5)',
-        textAlign: 'left'
+        boxShadow: '0px 2px 2px rgba(100, 100, 100, 0.5)'
     },
     contextMenuItem: _extends({}, theme.typography.body1, {
         height: 40,
         width: 300,
         cursor: 'pointer',
-        padding: 10,
+        padding: '10px 10px 10px 28px',
         color: theme.palette.neutral.dark,
         '&:hover': {
             backgroundColor: theme.palette.hover,
@@ -40,10 +39,7 @@ class HiTableContextMenu extends React.Component {
         super(props);
 
         this.state = {
-            value: '',
-            label: '',
-            lookup: true,
-            exclude: true
+            value: ''
         };
 
         this.handleContextMenuOpen = this.handleContextMenuOpen.bind(this);
@@ -54,13 +50,7 @@ class HiTableContextMenu extends React.Component {
     }
 
     handleContextMenuOpen(event) {
-        const { columns } = this.props;
-        this.setState({
-            value: event.detail.data.value,
-            label: event.detail.data.label,
-            lookup: columns[event.detail.data.column].lookup !== false,
-            exclude: columns[event.detail.data.column].exclude !== false
-        });
+        this.setState({ value: event.detail.data.label });
     }
 
     handleClickCopy(event, data) {
@@ -89,9 +79,8 @@ class HiTableContextMenu extends React.Component {
 
     render() {
         const { classes, tabId, translations } = this.props;
-        const { lookup, exclude } = this.state;
 
-        const contextMenuItems = [{ id: 'copy', icon: 'contentDuplicate', title: translations.copy, action: this.handleClickCopy }, { id: 'lookup', displayed: lookup, icon: 'crosshairsGps', title: translations.lookUp, action: this.handleClickLookup }, { id: 'exclude', displayed: exclude, icon: 'closeCircleOutline', title: translations.exclude, action: this.handleClickExclude }, { id: 'open', icon: 'openInNew', title: translations.openInNewTab, action: this.handleClickOpenNewTab }];
+        const contextMenuItems = [{ id: 'copy', icon: 'contentDuplicate', title: translations.copy, action: this.handleClickCopy }, { id: 'lookup', icon: 'crosshairsGps', title: translations.lookUp, action: this.handleClickLookup }, { id: 'exclude', icon: 'closeCircleOutline', title: translations.exclude, action: this.handleClickExclude }, { id: 'open', icon: 'openInNew', title: translations.openInNewTab, action: this.handleClickOpenNewTab }];
 
         return React.createElement(
             ContextMenu,
@@ -101,21 +90,19 @@ class HiTableContextMenu extends React.Component {
                 onShow: this.handleContextMenuOpen
             },
             contextMenuItems.map(menuItem => {
-                if (menuItem.displayed !== false) {
-                    return React.createElement(
-                        MenuItem,
-                        {
-                            attributes: { className: classes.contextMenuItem },
-                            key: `hitable_context_menu_${tabId}_${menuItem.id}`,
-                            onClick: menuItem.action },
-                        React.createElement(HiIconBuilder, { icon: menuItem.icon }),
-                        React.createElement(
-                            'span',
-                            { className: classes.title },
-                            menuItem.title.replace('%s', this.state.label)
-                        )
-                    );
-                }
+                return React.createElement(
+                    MenuItem,
+                    {
+                        attributes: { className: classes.contextMenuItem },
+                        key: `hitable_context_menu_${tabId}_${menuItem.id}`,
+                        onClick: menuItem.action },
+                    React.createElement(HiIconBuilder, { icon: menuItem.icon }),
+                    React.createElement(
+                        'span',
+                        { className: classes.title },
+                        menuItem.title.replace('%s', this.state.value)
+                    )
+                );
             })
         );
     }
@@ -126,7 +113,7 @@ HiTableContextMenu.defaultProps = {
         copy: 'Copy',
         exclude: 'Exclude "%s"',
         lookUp: 'Look up "%s"',
-        openInNewTab: 'Open in new tab'
+        openInNewTab: 'Open the transaction in a new tab'
     }
 };
 HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -134,10 +121,6 @@ HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge le style du composant
      */
     classes: PropTypes.object,
-    /**
-     * Liste des objets colonnes utilisé pour savoir quels items du context menu sont affichés
-     */
-    columns: PropTypes.object.isRequired,
     /**
      * Fonction de callback appelée au clic sur l'item redirection
      * du menu contextuel ouvert au clic droit

package/es/HiTable/HiTableFooterScroll.js

@@ -84,7 +84,7 @@ class HiTableFooterScroll extends React.Component {
         ) : React.createElement(
             HiButton,
             {
-                variant: 'raised',
+                raised: true,
                 color: 'primary',
                 className: classes.loadMoreButton,
                 onClick: () => this.handleRequestNextDatas(true)

package/es/HiTable/HiTableHead.js

@@ -1,10 +1,8 @@
 import _extends from 'babel-runtime/helpers/extends';
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import isRequiredIf from 'react-proptype-conditional-require';
-import classNames from 'classnames';
 
 import { TableHead, TableRow, TableCell } from 'material-ui/Table';
 import PlusCircleIcon from 'mdi-material-ui/PlusCircle';
@@ -20,13 +18,11 @@ import { MANDATORY_COLUMN_ERROR_MESSAGE } from './HiTable';
 export const styles = theme => ({
     thead: {
         position: 'relative',
-        width: '100%',
+        display: 'block' /*seperates the header from the body allowing it to be positioned*/
+        , width: '100%',
         overflow: 'visible',
         zIndex: 12
     },
-    theadFixedWidth: {
-        display: 'block' /*seperates the header from the body allowing it to be positioned*/
-    },
     theadRow: {
         backgroundColor: theme.palette.background3,
         zIndex: 12
@@ -91,11 +87,11 @@ class HiTableHead extends React.Component {
     constructor(props) {
         super();
 
-        this.orderColumnsAnchorEl = null;
         this.orderColumnsButton = null;
         this.state = {
             hovered: false,
-            openedOrderColumns: false
+            openedOrderColumns: false,
+            orderColumnsAnchorEl: null
         };
 
         this.handleEvent = this.handleEvent.bind(this);
@@ -103,10 +99,6 @@ class HiTableHead extends React.Component {
         this.handleCloseOrderColumns = this.handleCloseOrderColumns.bind(this);
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
-
     handleEvent({ type }) {
         switch (type) {
             case 'mouseenter':
@@ -120,9 +112,9 @@ class HiTableHead extends React.Component {
 
     handleOpenOrderColumns() {
         this.setState({
-            openedOrderColumns: true
+            openedOrderColumns: true,
+            orderColumnsAnchorEl: findDOMNode(this.orderColumnsButton)
         });
-        this.orderColumnsAnchorEl = findDOMNode(this.orderColumnsButton);
     }
 
     handleCloseOrderColumns() {
@@ -156,16 +148,13 @@ class HiTableHead extends React.Component {
             sticky,
             translations,
             view,
-            lookupColumns,
-            fixedColumnWidth
+            lookupColumns
         } = this.props;
 
-        const { hovered, openedOrderColumns } = this.state;
+        const { hovered, openedOrderColumns, orderColumnsAnchorEl } = this.state;
 
         let headerProps = _extends({
-            className: classNames(classes.thead, {
-                [classes.theadFixedWidth]: fixedColumnWidth
-            })
+            className: classes.thead
         }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
         let unfixedColumnIsSet = false,
@@ -212,8 +201,8 @@ class HiTableHead extends React.Component {
                         return React.createElement(HeaderCell, {
                             key: 'header-' + column.colId,
                             colId: column.colId,
-                            type: column['formType'] || column['type'] // define select items
-                            , title: column['label'],
+                            type: column['type'],
+                            title: column['label'],
                             smallTitle: column['reducedLabel'],
                             selectable: firstColumn && selectable,
                             selected: selectedIdList.length > 0 ? selectedIdList.length === dataSource.length ? true : 'mixed' : false,
@@ -232,9 +221,7 @@ class HiTableHead extends React.Component {
                             fixedWidth: fixed,
                             align: column['align'],
                             sticky: firstColumn && sticky,
-                            lookedUp: lookupColumns.includes(column.colId),
-                            fixedColumnWidth: fixedColumnWidth,
-                            translations: translations.headerCell
+                            lookedUp: lookupColumns.includes(column.colId)
                         });
                     }
                 }),
@@ -263,12 +250,12 @@ class HiTableHead extends React.Component {
                     orderable && React.createElement(OrderColumns, {
                         isOpen: openedOrderColumns,
                         onClose: this.handleCloseOrderColumns,
-                        anchorEl: this.orderColumnsAnchorEl,
+                        anchorEl: orderColumnsAnchorEl,
                         updateOrderedColumns: onColumnsOrderUpdate,
                         columns: columns,
                         orderedColumns: orderedColumns,
                         mandatoryColumnId: mandatoryColumnId,
-                        translations: translations.orderColumns
+                        translations: translations
                     })
                 )
             ),
@@ -310,7 +297,10 @@ HiTableHead.defaultProps = {
     dense: false,
     sticky: true,
     translations: {
-        get_the_n_new_items: 'Get the %s new items'
+        get_the_n_new_items: 'Get the %s new items',
+        choose_and_organize_columns: 'Choose & organize columns',
+        search: 'Search',
+        time: 'Time'
     },
     view: 'l'
 };
@@ -339,11 +329,6 @@ HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: PropTypes.bool,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: PropTypes.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/es/HiTable/OrderColumns.js

@@ -63,8 +63,7 @@ export const styles = theme => ({
     controlLabelRoot: {
         marginLeft: 6,
         marginBottom: 8,
-        fontSize: 15,
-        width: 160
+        fontSize: 15
     },
     switchLabelRoot: {
         marginLeft: 15,
@@ -73,10 +72,7 @@ export const styles = theme => ({
     columnLabel: {
         position: 'relative',
         top: 5,
-        left: 5,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+        left: 5
     },
     label: {
         fontWeight: 'inherit'

package/es/HiTable/constants.js

@@ -102,12 +102,12 @@ export const DEFAULT_WIDTHS = {
         [VIEWS.SMALL]: 120
     },
     [TYPE_ICON]: {
-        [VIEWS.LARGE]: 140,
+        [VIEWS.LARGE]: 120,
         [VIEWS.MEDIUM]: 100,
-        [VIEWS.SMALL]: 60
+        [VIEWS.SMALL]: 40
     },
     [TYPE_IMAGE]: {
-        [VIEWS.LARGE]: 140,
+        [VIEWS.LARGE]: 120,
         [VIEWS.MEDIUM]: 100,
         [VIEWS.SMALL]: 60
     },
@@ -132,8 +132,8 @@ export const DEFAULT_WIDTHS = {
         [VIEWS.SMALL]: 80
     },
     [TYPE_TEXT]: {
-        [VIEWS.LARGE]: 200,
-        [VIEWS.MEDIUM]: 120,
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 100,
         [VIEWS.SMALL]: 80
     },
     [TYPE_THIRD_PARTY_SECURITY]: {
@@ -168,8 +168,8 @@ export const DEFAULT_VIEWS = {
  * @type {{}}
  */
 export const DEFAULT_PADDING = {
-    [VIEWS.LARGE]: 8,
-    [VIEWS.MEDIUM]: 8,
+    [VIEWS.LARGE]: 12,
+    [VIEWS.MEDIUM]: 10,
     [VIEWS.SMALL]: 8
 };