129 lines
4.2 KiB
JavaScript
129 lines
4.2 KiB
JavaScript
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
|
|
|
function isSimplePositionValue(value) {
|
|
return typeof value === 'number' && !isNaN(value);
|
|
}
|
|
|
|
function isComplexSpanValue(value) {
|
|
return typeof value === 'string' && value.includes('/');
|
|
}
|
|
|
|
var alignmentValues = ['center', 'end', 'start', 'stretch'];
|
|
|
|
var displayValues = {
|
|
'inline-grid': ['-ms-inline-grid', 'inline-grid'],
|
|
grid: ['-ms-grid', 'grid']
|
|
};
|
|
|
|
var propertyConverters = {
|
|
alignSelf: function alignSelf(value, style) {
|
|
if (alignmentValues.indexOf(value) > -1) {
|
|
style.msGridRowAlign = value;
|
|
}
|
|
},
|
|
|
|
gridColumn: function gridColumn(value, style) {
|
|
if (isSimplePositionValue(value)) {
|
|
style.msGridColumn = value;
|
|
} else if (isComplexSpanValue(value)) {
|
|
var _value$split = value.split('/'),
|
|
_value$split2 = _slicedToArray(_value$split, 2),
|
|
start = _value$split2[0],
|
|
end = _value$split2[1];
|
|
|
|
propertyConverters.gridColumnStart(+start, style);
|
|
|
|
var _end$split = end.split(/ ?span /),
|
|
_end$split2 = _slicedToArray(_end$split, 2),
|
|
maybeSpan = _end$split2[0],
|
|
maybeNumber = _end$split2[1];
|
|
|
|
if (maybeSpan === '') {
|
|
propertyConverters.gridColumnEnd(+start + +maybeNumber, style);
|
|
} else {
|
|
propertyConverters.gridColumnEnd(+end, style);
|
|
}
|
|
} else {
|
|
propertyConverters.gridColumnStart(value, style);
|
|
}
|
|
},
|
|
|
|
gridColumnEnd: function gridColumnEnd(value, style) {
|
|
var msGridColumn = style.msGridColumn;
|
|
|
|
if (isSimplePositionValue(value) && isSimplePositionValue(msGridColumn)) {
|
|
style.msGridColumnSpan = value - msGridColumn;
|
|
}
|
|
},
|
|
|
|
gridColumnStart: function gridColumnStart(value, style) {
|
|
if (isSimplePositionValue(value)) {
|
|
style.msGridColumn = value;
|
|
}
|
|
},
|
|
|
|
gridRow: function gridRow(value, style) {
|
|
if (isSimplePositionValue(value)) {
|
|
style.msGridRow = value;
|
|
} else if (isComplexSpanValue(value)) {
|
|
var _value$split3 = value.split('/'),
|
|
_value$split4 = _slicedToArray(_value$split3, 2),
|
|
start = _value$split4[0],
|
|
end = _value$split4[1];
|
|
|
|
propertyConverters.gridRowStart(+start, style);
|
|
|
|
var _end$split3 = end.split(/ ?span /),
|
|
_end$split4 = _slicedToArray(_end$split3, 2),
|
|
maybeSpan = _end$split4[0],
|
|
maybeNumber = _end$split4[1];
|
|
|
|
if (maybeSpan === '') {
|
|
propertyConverters.gridRowEnd(+start + +maybeNumber, style);
|
|
} else {
|
|
propertyConverters.gridRowEnd(+end, style);
|
|
}
|
|
} else {
|
|
propertyConverters.gridRowStart(value, style);
|
|
}
|
|
},
|
|
|
|
gridRowEnd: function gridRowEnd(value, style) {
|
|
var msGridRow = style.msGridRow;
|
|
|
|
if (isSimplePositionValue(value) && isSimplePositionValue(msGridRow)) {
|
|
style.msGridRowSpan = value - msGridRow;
|
|
}
|
|
},
|
|
|
|
gridRowStart: function gridRowStart(value, style) {
|
|
if (isSimplePositionValue(value)) {
|
|
style.msGridRow = value;
|
|
}
|
|
},
|
|
|
|
gridTemplateColumns: function gridTemplateColumns(value, style) {
|
|
style.msGridColumns = value;
|
|
},
|
|
|
|
gridTemplateRows: function gridTemplateRows(value, style) {
|
|
style.msGridRows = value;
|
|
},
|
|
|
|
justifySelf: function justifySelf(value, style) {
|
|
if (alignmentValues.indexOf(value) > -1) {
|
|
style.msGridColumnAlign = value;
|
|
}
|
|
}
|
|
};
|
|
|
|
export default function grid(property, value, style) {
|
|
if (property === 'display' && value in displayValues) {
|
|
return displayValues[value];
|
|
}
|
|
|
|
if (property in propertyConverters) {
|
|
var propertyConverter = propertyConverters[property];
|
|
propertyConverter(value, style);
|
|
}
|
|
} |