@itwin/itwinui-react
Version:
A react component library for iTwinUI
79 lines (78 loc) • 2.27 kB
JavaScript
import * as React from 'react';
import cx from 'classnames';
import { Box } from '../../utils/components/Box.js';
let sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
let getValueForToken = (token) => {
if (sizeTokens.includes(token)) return `var(--iui-size-${token})`;
return token;
};
let FlexComponent = React.forwardRef((props, ref) => {
let {
display,
flexDirection,
justifyContent,
alignItems,
gap,
flexWrap,
className,
style,
...rest
} = props;
return React.createElement(Box, {
className: cx('iui-flex', className),
style: {
'--iui-flex-display': display,
'--iui-flex-direction': flexDirection,
'--iui-flex-justify': justifyContent,
'--iui-flex-align': alignItems,
'--iui-flex-gap': getValueForToken(gap),
'--iui-flex-wrap': flexWrap,
...style,
},
ref: ref,
...rest,
});
});
if ('development' === process.env.NODE_ENV) FlexComponent.displayName = 'Flex';
let FlexSpacer = React.forwardRef((props, ref) => {
let { flex, className, style, ...rest } = props;
return React.createElement(Box, {
className: cx('iui-flex-spacer', className),
style: {
'--iui-flex-spacer-flex': flex,
...style,
},
ref: ref,
...rest,
});
});
if ('development' === process.env.NODE_ENV)
FlexSpacer.displayName = 'Flex.Spacer';
let FlexItem = React.forwardRef((props, ref) => {
let { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } =
props;
let _style = {
'--iui-flex-item-flex': flex,
'--iui-flex-item-align': alignSelf,
'--iui-flex-item-gap-before': getValueForToken(gapBefore),
'--iui-flex-item-gap-after': getValueForToken(gapAfter),
...(void 0 !== gapBefore && {
'--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
}),
...(void 0 !== gapAfter && {
'--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
}),
...style,
};
return React.createElement(Box, {
className: cx('iui-flex-item', className),
ref: ref,
style: _style,
...rest,
});
});
if ('development' === process.env.NODE_ENV) FlexItem.displayName = 'Flex.Item';
export const Flex = Object.assign(FlexComponent, {
Item: FlexItem,
Spacer: FlexSpacer,
});