[d565449] | 1 | var alternativeValues = {
|
---|
| 2 | 'space-around': 'distribute',
|
---|
| 3 | 'space-between': 'justify',
|
---|
| 4 | 'flex-start': 'start',
|
---|
| 5 | 'flex-end': 'end'
|
---|
| 6 | };
|
---|
| 7 | var alternativeProps = {
|
---|
| 8 | alignContent: 'msFlexLinePack',
|
---|
| 9 | alignSelf: 'msFlexItemAlign',
|
---|
| 10 | alignItems: 'msFlexAlign',
|
---|
| 11 | justifyContent: 'msFlexPack',
|
---|
| 12 | order: 'msFlexOrder',
|
---|
| 13 | flexGrow: 'msFlexPositive',
|
---|
| 14 | flexShrink: 'msFlexNegative',
|
---|
| 15 | flexBasis: 'msFlexPreferredSize'
|
---|
| 16 |
|
---|
| 17 | // Full expanded syntax is flex-grow | flex-shrink | flex-basis.
|
---|
| 18 | };var flexShorthandMappings = {
|
---|
| 19 | auto: '1 1 auto',
|
---|
| 20 | inherit: 'inherit',
|
---|
| 21 | initial: '0 1 auto',
|
---|
| 22 | none: '0 0 auto',
|
---|
| 23 | unset: 'unset'
|
---|
| 24 | };
|
---|
| 25 | var isUnitlessNumber = /^\d+(\.\d+)?$/;
|
---|
| 26 | var logTag = 'inline-style-prefixer.flexboxIE plugin';
|
---|
| 27 |
|
---|
| 28 | export default function flexboxIE(property, value, style) {
|
---|
| 29 | if (alternativeProps.hasOwnProperty(property)) {
|
---|
| 30 | style[alternativeProps[property]] = alternativeValues[value] || value;
|
---|
| 31 | }
|
---|
| 32 |
|
---|
| 33 | if (property === 'flex') {
|
---|
| 34 | // For certain values we can do straight mappings based on the spec
|
---|
| 35 | // for the expansions.
|
---|
| 36 | if (Object.prototype.hasOwnProperty.call(flexShorthandMappings, value)) {
|
---|
| 37 | style.msFlex = flexShorthandMappings[value];
|
---|
| 38 | return;
|
---|
| 39 | }
|
---|
| 40 | // Here we have no direct mapping, so we favor looking for a
|
---|
| 41 | // unitless positive number as that will be the most common use-case.
|
---|
| 42 | if (isUnitlessNumber.test(value)) {
|
---|
| 43 | style.msFlex = value + ' 1 0%';
|
---|
| 44 | return;
|
---|
| 45 | }
|
---|
| 46 |
|
---|
| 47 | if (typeof value === 'number' && value < 0) {
|
---|
| 48 | // ignore negative values;
|
---|
| 49 | console.warn(logTag + ': "flex: ' + value + '", negative values are not valid and will be ignored.');
|
---|
| 50 | return;
|
---|
| 51 | }
|
---|
| 52 |
|
---|
| 53 | if (!value.split) {
|
---|
| 54 | console.warn(logTag + ': "flex: ' + value + '", value format are not detected, it will be remain as is');
|
---|
| 55 | style.msFlex = value;
|
---|
| 56 | return;
|
---|
| 57 | }
|
---|
| 58 |
|
---|
| 59 | // The next thing we can look for is if there are multiple values.
|
---|
| 60 | var flexValues = value.split(/\s/);
|
---|
| 61 | // If we only have a single value that wasn't a positive unitless
|
---|
| 62 | // or a pre-mapped value, then we can assume it is a unit value.
|
---|
| 63 | switch (flexValues.length) {
|
---|
| 64 | case 1:
|
---|
| 65 | style.msFlex = '1 1 ' + value;
|
---|
| 66 | return;
|
---|
| 67 | case 2:
|
---|
| 68 | // If we have 2 units, then we expect that the first will
|
---|
| 69 | // always be a unitless number and represents flex-grow.
|
---|
| 70 | // The second unit will represent flex-shrink for a unitless
|
---|
| 71 | // value, or flex-basis otherwise.
|
---|
| 72 | if (isUnitlessNumber.test(flexValues[1])) {
|
---|
| 73 | style.msFlex = flexValues[0] + ' ' + flexValues[1] + ' 0%';
|
---|
| 74 | } else {
|
---|
| 75 | style.msFlex = flexValues[0] + ' 1 ' + flexValues[1];
|
---|
| 76 | }
|
---|
| 77 | return;
|
---|
| 78 | default:
|
---|
| 79 | style.msFlex = value;
|
---|
| 80 | }
|
---|
| 81 | }
|
---|
| 82 | } |
---|