@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 1.98 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","names":["Tabs: FC<TabsProps>","Flexbox","LobeTabs"],"sources":["../../../src/mdx/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { FC, ReactNode, useState } from 'react';\n\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport { default as LobeTabs, type TabsProps as LobeTabsProps } from '@/Tabs';\n\nimport { styles } from './style';\n\nexport interface TabsProps extends Omit<FlexboxProps, 'children'> {\n children: ReactNode[];\n defaultIndex?: number | string;\n items: string[];\n tabNavProps?: Partial<LobeTabsProps>;\n}\n\nconst Tabs: FC<TabsProps> = ({\n defaultIndex = '0',\n items,\n children,\n className,\n tabNavProps = {},\n ...rest\n}) => {\n const { className: tabNavClassName, onChange, ...tabNavRest } = tabNavProps;\n const [activeIndex, setActiveIndex] = useState<string>(String(defaultIndex));\n\n const index = Number(activeIndex);\n\n return (\n <Flexbox className={cx(styles.container, className)} {...rest}>\n <LobeTabs\n activeKey={activeIndex}\n className={cx(styles.header, tabNavClassName)}\n compact\n items={items.map((item, i) => ({\n key: String(i),\n label: item,\n }))}\n onChange={(v) => {\n setActiveIndex(v);\n onChange?.(v);\n }}\n {...tabNavRest}\n />\n {children?.[index] || ''}\n </Flexbox>\n );\n};\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;AAiBA,MAAMA,QAAuB,EAC3B,eAAe,KACf,OACA,UACA,WACA,cAAc,EAAE,EAChB,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,UAAU,GAAG,eAAe;CAChE,MAAM,CAAC,aAAa,kBAAkB,SAAiB,OAAO,aAAa,CAAC;CAE5E,MAAM,QAAQ,OAAO,YAAY;AAEjC,QACE,qBAACC;EAAQ,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;aACvD,oBAACC;GACC,WAAW;GACX,WAAW,GAAG,OAAO,QAAQ,gBAAgB;GAC7C;GACA,OAAO,MAAM,KAAK,MAAM,OAAO;IAC7B,KAAK,OAAO,EAAE;IACd,OAAO;IACR,EAAE;GACH,WAAW,MAAM;AACf,mBAAe,EAAE;AACjB,eAAW,EAAE;;GAEf,GAAI;IACJ,EACD,WAAW,UAAU;GACd;;AAId,mBAAe"}