@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 3.93 kB
Source Map (JSON)
{"version":3,"file":"FlexBasic.mjs","names":[],"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 allowShrink,\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 = {\n ...(cssVars as CSSProperties),\n ...(allowShrink ? { minWidth: 0 } : {}),\n ...style,\n };\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,MAAM,aAAiC,EACrC,SACA,MACA,KACA,WACA,YACA,OACA,SACA,cACA,QACA,OACA,aACA,SACA,eACA,cACA,WACA,IAAI,YAAY,OAChB,WACA,OACA,UACA,MACA,KACA,GAAG,YACC;CACJ,MAAM,iBAAiB,WAAW;CAElC,MAAM,kBAAkB;EACtB,IAAI,aAAa,WAAW,UAAU,KAAK,CAAC,SAAS,oBAAoB,cAAc,GACrF,OAAO;EAET,OAAO,YAAY,KAAK;CAC1B;CACA,MAAM,aAAa,UAAU;CAsB7B,MAAM,cAA6B;EAnBjC,GAAI,SAAS,KAAA,IAAY,EAAE,eAAe,OAAO,IAAI,EAAE,IAAI,CAAC;EAC5D,GAAI,aAAa,aACb,EAAE,yBAAyB,iBAAiB,WAAW,UAAU,EAAE,IACnE,CAAC;EACL,GAAI,SAAS,KAAA,IAAY,EAAE,oBAAoB,KAAK,IAAI,CAAC;EACzD,GAAI,mBAAmB,KAAA,IAAY,EAAE,uBAAuB,eAAe,IAAI,CAAC;EAChF,GAAI,UAAU,KAAA,IAAY,EAAE,qBAAqB,MAAM,IAAI,CAAC;EAC5D,GAAI,eAAe,KAAA,IAAY,EAAE,qBAAqB,WAAW,IAAI,CAAC;EACtE,GAAI,WAAW,KAAA,IAAY,EAAE,sBAAsB,YAAY,MAAM,EAAE,IAAI,CAAC;EAC5E,GAAI,YAAY,KAAA,IAAY,EAAE,uBAAuB,YAAY,OAAO,EAAE,IAAI,CAAC;EAC/E,GAAI,kBAAkB,KAAA,IAClB,EAAE,8BAA8B,YAAY,aAAa,EAAE,IAC3D,CAAC;EACL,GAAI,iBAAiB,KAAA,IACjB,EAAE,6BAA6B,YAAY,YAAY,EAAE,IACzD,CAAC;EACL,GAAI,QAAQ,KAAA,IAAY,EAAE,mBAAmB,YAAY,GAAG,EAAE,IAAI,CAAC;EAKnE,GAAI,cAAc,EAAE,UAAU,EAAE,IAAI,CAAC;EACrC,GAAG;CACL;CAEA,MAAM,gBAAgB;CACtB,MAAM,kBAAkB;EACtB;EACA,YAAY,QAAQ,GAAG,cAAc,YAAY,KAAA;EACjD,YAAY,GAAG,UAAU,SAAS,KAAA;EAClC;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,oBAAC,WAAD;EAAgB;EAAK,GAAI;EAAO,WAAW;EAAiB,OAAO;EAChE;CACQ,CAAA;AAEf;AAEA,IAAA,oBAAe,KAAK,SAAS"}