@vimeo/iris/utils/hooks/useLayoutStyles.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');

function useLayoutStyles(style) {
    if (style === void 0) { style = null; }
    if (!style)
        return [null];
    var layout = true;
    var display = true;
    var layoutStyles = split({ style: style, layout: layout });
    var displayStyles = split({ style: style, display: display });
    return [layoutStyles, displayStyles];
}
function split(_a) {
    var style = _a.style, _b = _a.layout, layout = _b === void 0 ? false : _b, _c = _a.display, display = _c === void 0 ? false : _c;
    var layoutStyles = {};
    var displayStyles = {};
    Object.keys(style).map(function (key) {
        return layoutProperties.includes(key)
            ? (layoutStyles[key] = style[key])
            : (displayStyles[key] = style[key]);
    });
    if (layout)
        return tslib_es6.__assign({}, layoutStyles);
    if (display)
        return tslib_es6.__assign({}, displayStyles);
    else
        console.warn('Style split type not provided!');
}
var layoutProperties = [
    'alignSelf',
    'bottom',
    'display',
    'flex',
    'flexBasis',
    'float',
    'height',
    'left',
    'margin',
    'marginBottom',
    'marginLeft',
    'marginRight',
    'marginTop',
    'maxHeight',
    'maxWidth',
    'minHeight',
    'minWidth',
    'position',
    'right',
    'top',
    'width',
    //
    'flexGrow',
    'flexShrink',
    'gridArea',
    'gridColumn',
    'gridColumnEnd',
    'gridColumnStart',
    'gridRow',
    'gridRowEnd',
    'gridRowStart',
    'justifySelf',
    'placeSelf',
];

exports.useLayoutStyles = useLayoutStyles;