@lobehub/ui/es/mobile/TabBar/TabBar.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"TabBar.mjs","names":["Flexbox","SafeArea"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n  ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n    const [currentActive, setCurrentActive] = useMergeState<string>(\n      defaultActiveKey || items[0].key,\n      {\n        defaultValue: defaultActiveKey,\n        onChange,\n        value: activeKey,\n      },\n    );\n\n    return (\n      <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n        <Flexbox\n          align={'center'}\n          className={cx(styles.inner, className)}\n          horizontal\n          justify={'space-around'}\n        >\n          {items.map((item) => {\n            const active = item.key === currentActive;\n            return (\n              <Flexbox\n                align={'center'}\n                className={cx(styles.tab, active && styles.active)}\n                gap={4}\n                justify={'center'}\n                key={item.key}\n                onClick={() => {\n                  setCurrentActive(item.key);\n                  item?.onClick?.();\n                }}\n              >\n                <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n                  {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n                </Flexbox>\n                <div className={styles.title}>\n                  {typeof item.title === 'function' ? item.title(active) : item.title}\n                </div>\n              </Flexbox>\n            );\n          })}\n        </Flexbox>\n        {safeArea && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,oBAAoB,cACxC,oBAAoB,MAAM,GAAG,KAC7B;EACE,cAAc;EACd;EACA,OAAO;EACR,CACF;AAED,QACE,qBAACA;EAAQ,IAAI;EAAU,WAAW,GAAG,OAAO,WAAW,UAAU;EAAO;EAAK,GAAI;aAC/E,oBAACA;GACC,OAAO;GACP,WAAW,GAAG,OAAO,OAAO,UAAU;GACtC;GACA,SAAS;aAER,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,QAAQ;AAC5B,WACE,qBAACA;KACC,OAAO;KACP,WAAW,GAAG,OAAO,KAAK,UAAU,OAAO,OAAO;KAClD,KAAK;KACL,SAAS;KAET,eAAe;AACb,uBAAiB,KAAK,IAAI;AAC1B,YAAM,WAAW;;gBAGnB,oBAACA;MAAQ,OAAO;MAAU,WAAW,OAAO;MAAM,SAAS;gBACxD,OAAO,KAAK,SAAS,aAAa,KAAK,KAAK,OAAO,GAAG,KAAK;OACpD,EACV,oBAAC;MAAI,WAAW,OAAO;gBACpB,OAAO,KAAK,UAAU,aAAa,KAAK,MAAM,OAAO,GAAG,KAAK;OAC1D;OAXD,KAAK,IAYF;KAEZ;IACM,EACT,YAAY,oBAACC,oBAAS,UAAU,WAAY;GACrC;EAGf;AAED,OAAO,cAAc;AAErB,qBAAe"}