@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 3.78 kB
Source Map (JSON)
{"version":3,"file":"FlexBasic.mjs","names":["FlexBasic: FC<FlexBasicProps>","mergedStyle: CSSProperties"],"sources":["../../src/Flex/FlexBasic.tsx"],"sourcesContent":["'use client';\n\nimport { type CSSProperties, type ElementType, type FC, memo } from 'react';\n\nimport type { FlexBasicProps } from './type';\nimport { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from './utils';\n\nconst FlexBasic: FC<FlexBasicProps> = ({\n visible,\n flex,\n gap,\n direction,\n horizontal,\n align,\n justify,\n distribution,\n height,\n width,\n padding,\n paddingInline,\n paddingBlock,\n prefixCls,\n as: Container = 'div' as ElementType,\n className,\n style,\n children,\n wrap,\n ref,\n ...props\n}) => {\n const justifyContent = justify || distribution;\n\n const calcWidth = () => {\n if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent))\n return '100%';\n\n return getCssValue(width);\n };\n const finalWidth = calcWidth();\n\n const cssVars: Record<string, string | number> = {\n ...(flex !== undefined ? { '--lobe-flex': String(flex) } : {}),\n ...(direction || horizontal\n ? { '--lobe-flex-direction': getFlexDirection(direction, horizontal) }\n : {}),\n ...(wrap !== undefined ? { '--lobe-flex-wrap': wrap } : {}),\n ...(justifyContent !== undefined ? { '--lobe-flex-justify': justifyContent } : {}),\n ...(align !== undefined ? { '--lobe-flex-align': align } : {}),\n ...(finalWidth !== undefined ? { '--lobe-flex-width': finalWidth } : {}),\n ...(height !== undefined ? { '--lobe-flex-height': getCssValue(height) } : {}),\n ...(padding !== undefined ? { '--lobe-flex-padding': getCssValue(padding) } : {}),\n ...(paddingInline !== undefined\n ? { '--lobe-flex-padding-inline': getCssValue(paddingInline) }\n : {}),\n ...(paddingBlock !== undefined\n ? { '--lobe-flex-padding-block': getCssValue(paddingBlock) }\n : {}),\n ...(gap !== undefined ? { '--lobe-flex-gap': getCssValue(gap) } : {}),\n };\n\n const mergedStyle: CSSProperties = { ...(cssVars as CSSProperties), ...style };\n\n const baseClassName = 'lobe-flex';\n const mergedClassName = [\n baseClassName,\n visible === false ? `${baseClassName}--hidden` : undefined,\n prefixCls ? `${prefixCls}-flex` : undefined,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <Container ref={ref} {...props} className={mergedClassName} style={mergedStyle}>\n {children}\n </Container>\n );\n};\n\nexport default memo(FlexBasic);\n"],"mappings":";;;;;;;AAOA,MAAMA,aAAiC,EACrC,SACA,MACA,KACA,WACA,YACA,OACA,SACA,cACA,QACA,OACA,SACA,eACA,cACA,WACA,IAAI,YAAY,OAChB,WACA,OACA,UACA,MACA,KACA,GAAG,YACC;CACJ,MAAM,iBAAiB,WAAW;CAElC,MAAM,kBAAkB;AACtB,MAAI,aAAa,WAAW,WAAW,IAAI,CAAC,SAAS,oBAAoB,eAAe,CACtF,QAAO;AAET,SAAO,YAAY,MAAM;;CAE3B,MAAM,aAAa,WAAW;CAsB9B,MAAMC,cAA6B;EAnBjC,GAAI,SAAS,SAAY,EAAE,eAAe,OAAO,KAAK,EAAE,GAAG,EAAE;EAC7D,GAAI,aAAa,aACb,EAAE,yBAAyB,iBAAiB,WAAW,WAAW,EAAE,GACpE,EAAE;EACN,GAAI,SAAS,SAAY,EAAE,oBAAoB,MAAM,GAAG,EAAE;EAC1D,GAAI,mBAAmB,SAAY,EAAE,uBAAuB,gBAAgB,GAAG,EAAE;EACjF,GAAI,UAAU,SAAY,EAAE,qBAAqB,OAAO,GAAG,EAAE;EAC7D,GAAI,eAAe,SAAY,EAAE,qBAAqB,YAAY,GAAG,EAAE;EACvE,GAAI,WAAW,SAAY,EAAE,sBAAsB,YAAY,OAAO,EAAE,GAAG,EAAE;EAC7E,GAAI,YAAY,SAAY,EAAE,uBAAuB,YAAY,QAAQ,EAAE,GAAG,EAAE;EAChF,GAAI,kBAAkB,SAClB,EAAE,8BAA8B,YAAY,cAAc,EAAE,GAC5D,EAAE;EACN,GAAI,iBAAiB,SACjB,EAAE,6BAA6B,YAAY,aAAa,EAAE,GAC1D,EAAE;EACN,GAAI,QAAQ,SAAY,EAAE,mBAAmB,YAAY,IAAI,EAAE,GAAG,EAAE;EAGF,GAAG;EAAO;CAE9E,MAAM,gBAAgB;CACtB,MAAM,kBAAkB;EACtB;EACA,YAAY,QAAQ,GAAG,cAAc,YAAY;EACjD,YAAY,GAAG,UAAU,SAAS;EAClC;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AAEZ,QACE,oBAAC;EAAe;EAAK,GAAI;EAAO,WAAW;EAAiB,OAAO;EAChE;GACS;;AAIhB,wBAAe,KAAK,UAAU"}