remotion
Version:
Make videos programmatically
71 lines (70 loc) • 2.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AbsoluteFill = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const hasTailwindClassName = (className, classPrefix) => {
if (!className) {
return false;
}
return classPrefix.some((prefix) => {
return (className.startsWith(prefix) ||
className.includes(` ${prefix}`) ||
className.includes(`:${prefix}`));
});
};
const AbsoluteFillRefForwarding = (props, ref) => {
const { style, ...other } = props;
const actualStyle = (0, react_1.useMemo)(() => {
// Make TailwindCSS classes get accepted
return {
position: 'absolute',
top: hasTailwindClassName(other.className, ['top-', 'inset-'])
? undefined
: 0,
left: hasTailwindClassName(other.className, ['left-', 'inset-'])
? undefined
: 0,
right: hasTailwindClassName(other.className, ['right-', 'inset-'])
? undefined
: 0,
bottom: hasTailwindClassName(other.className, ['bottom-', 'inset-'])
? undefined
: 0,
width: hasTailwindClassName(other.className, ['w-']) ? undefined : '100%',
height: hasTailwindClassName(other.className, ['h-'])
? undefined
: '100%',
display: hasTailwindClassName(other.className, [
'block',
'inline-block',
'inline',
'flex',
'inline-flex',
'flow-root',
'grid',
'inline-grid',
'contents',
'list-item',
'hidden',
])
? undefined
: 'flex',
flexDirection: hasTailwindClassName(other.className, [
'flex-row',
'flex-col',
'flex-row-reverse',
'flex-col-reverse',
])
? undefined
: 'column',
...style,
};
}, [other.className, style]);
return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: actualStyle, ...other });
};
/*
* @description A helper component which renders an absolutely positioned <div> element with full width, height, and flex display suited for content layering.
* @see [Documentation](https://remotion.dev/docs/absolute-fill)
*/
exports.AbsoluteFill = (0, react_1.forwardRef)(AbsoluteFillRefForwarding);