@itwin/itwinui-react
Version:
A react component library for iTwinUI
93 lines (92 loc) • 2.82 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', {
value: true,
});
Object.defineProperty(exports, 'Flex', {
enumerable: true,
get: function () {
return Flex;
},
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
require('classnames'),
);
const _Box = require('../../utils/components/Box.js');
const sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
const getValueForToken = (token) => {
if (sizeTokens.includes(token)) return `var(--iui-size-${token})`;
return token;
};
const FlexComponent = _react.forwardRef((props, ref) => {
let {
display,
flexDirection,
justifyContent,
alignItems,
gap,
flexWrap,
className,
style,
...rest
} = props;
return _react.createElement(_Box.Box, {
className: (0, _classnames.default)('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';
const FlexSpacer = _react.forwardRef((props, ref) => {
let { flex, className, style, ...rest } = props;
return _react.createElement(_Box.Box, {
className: (0, _classnames.default)('iui-flex-spacer', className),
style: {
'--iui-flex-spacer-flex': flex,
...style,
},
ref: ref,
...rest,
});
});
if ('development' === process.env.NODE_ENV)
FlexSpacer.displayName = 'Flex.Spacer';
const 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.Box, {
className: (0, _classnames.default)('iui-flex-item', className),
ref: ref,
style: _style,
...rest,
});
});
if ('development' === process.env.NODE_ENV) FlexItem.displayName = 'Flex.Item';
const Flex = Object.assign(FlexComponent, {
Item: FlexItem,
Spacer: FlexSpacer,
});