@tarojsx/ui
Version:
We reinvents the UI for Taro3+
40 lines • 3.19 kB
JavaScript
import React from 'react';
import classNames from 'classnames';
import { View, Text, Image } from '@tarojs/components';
import { setEventDetail } from './utils';
import { Badge } from './Badge';
import '../style/TabBar.scss';
export const TabBar = (props) => {
const { className, style = {}, fixed, backgroundColor, tabList, current, color, iconSize, fontSize, selectedColor, onClick, } = props;
if (!tabList)
return null;
const rootStyle = backgroundColor ? { backgroundColor } : {};
const defaultStyle = color ? { color } : {};
const selectedStyle = selectedColor ? { color: selectedColor } : {};
const titleStyle = fontSize ? { fontSize: `${fontSize}px` } : {};
const imgStyle = { width: `${iconSize}px`, height: `${iconSize}px` };
return (React.createElement(View, { className: classNames('at-tab-bar', { 'at-tab-bar--fixed': fixed }, className), style: Object.assign(Object.assign({}, rootStyle), style) }, tabList.map((item, index) => (React.createElement(View, { key: item.key || item.title || index, className: classNames('at-tab-bar__item', { 'at-tab-bar__item--active': current === index }), style: current === index ? selectedStyle : defaultStyle, onClick: (e) => {
onClick && onClick(setEventDetail(e, { value: index }));
} },
item.iconType ? (React.createElement(Badge, { dot: !!item.dot, value: item.text, maxValue: item.max },
React.createElement(View, { className: "at-tab-bar__icon" },
React.createElement(Text, { className: classNames(`${item.iconPrefixClass || 'at-icon'}`, {
[`${item.iconPrefixClass || 'at-icon'}-${item.selectedIconType}`]: current === index && item.selectedIconType,
[`${item.iconPrefixClass || 'at-icon'}-${item.iconType}`]: !(current === index && item.selectedIconType),
}), style: {
color: current === index ? selectedColor : color,
fontSize: iconSize ? `${iconSize}px` : '',
} })))) : null,
item.image ? (React.createElement(Badge, { dot: !!item.dot, value: item.text, maxValue: item.max },
React.createElement(View, { className: "at-tab-bar__icon" },
React.createElement(Image, { className: classNames('at-tab-bar__inner-img', {
'at-tab-bar__inner-img--inactive': current !== index,
}), mode: "widthFix", src: item.selectedImage || item.image, style: imgStyle }),
React.createElement(Image, { className: classNames('at-tab-bar__inner-img', {
'at-tab-bar__inner-img--inactive': current === index,
}), mode: "widthFix", src: item.image, style: imgStyle })))) : null,
React.createElement(View, null,
React.createElement(Badge, { dot: item.iconType || item.image ? false : !!item.dot, value: item.iconType || item.image ? null : item.text, maxValue: item.iconType || item.image ? null : item.max },
React.createElement(View, { className: "at-tab-bar__title", style: titleStyle }, item.title))))))));
};
//# sourceMappingURL=TabBar.js.map