Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { createCache, topRightBottomLeft, equalTRBL, style } from 'support';
import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub';
import { StyleObject } from 'typings';
import { getEnvironment } from 'environment';
/**
* Lifecycle with the responsibility to adjust the padding styling of the padding and viewport element.
* @param lifecycleHub
* @returns
*/
export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => {
const { _structureSetup, _setLifecycleCommunication } = lifecycleHub;
const { _host, _padding, _viewport } = _structureSetup._targetObj;
const [updatePaddingCache, currentPaddingCache] = createCache(
{
_equal: equalTRBL,
_initialValue: topRightBottomLeft(),
},
topRightBottomLeft.bind(0, _host, 'padding', '')
);
return (updateHints, checkOption, force) => {
let [padding, paddingChanged] = currentPaddingCache(force);
const { _nativeScrollbarStyling, _flexboxGlue } = getEnvironment();
const { _sizeChanged, _directionIsRTL, _contentMutation } = updateHints;
const [directionIsRTL, directionChanged] = _directionIsRTL;
const [paddingAbsolute, paddingAbsoluteChanged] = checkOption('paddingAbsolute');
const contentMutation = !_flexboxGlue && _contentMutation;
Eif (_sizeChanged || paddingChanged || contentMutation) {
[padding, paddingChanged] = updatePaddingCache(force);
}
const paddingStyleChanged = paddingAbsoluteChanged || directionChanged || paddingChanged;
Eif (paddingStyleChanged) {
// if there is no padding element and no scrollbar styling, paddingAbsolute isn't supported
const paddingRelative = !paddingAbsolute || (!_padding && !_nativeScrollbarStyling);
const paddingHorizontal = padding.r + padding.l;
const paddingVertical = padding.t + padding.b;
const paddingStyle: StyleObject = {
marginRight: paddingRelative && !directionIsRTL ? -paddingHorizontal : 0,
marginBottom: paddingRelative ? -paddingVertical : 0,
marginLeft: paddingRelative && directionIsRTL ? -paddingHorizontal : 0,
top: paddingRelative ? -padding.t : 0,
right: paddingRelative ? (directionIsRTL ? -padding.r : 'auto') : 0,
left: paddingRelative ? (directionIsRTL ? 'auto' : -padding.l) : 0,
width: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '',
};
const viewportStyle: StyleObject = {
paddingTop: paddingRelative ? padding.t : 0,
paddingRight: paddingRelative ? padding.r : 0,
paddingBottom: paddingRelative ? padding.b : 0,
paddingLeft: paddingRelative ? padding.l : 0,
};
// if there is no padding element apply the style to the viewport element instead
style(_padding || _viewport, paddingStyle);
style(_viewport, viewportStyle);
_setLifecycleCommunication({
_paddingInfo: {
_absolute: !paddingRelative,
_padding: padding,
},
_viewportPaddingStyle: _padding
? viewportStyle
: {
...paddingStyle,
...viewportStyle,
},
});
}
return {
_paddingStyleChanged: paddingStyleChanged,
};
};
};
|