@tarojsx/ui
Version:
We reinvents the UI for Taro3+
39 lines • 2.92 kB
JavaScript
import React from 'react';
import { isElement } from 'react-is';
import classNames from 'classnames';
import { View, Image } from '@tarojs/components';
import { Icon } from './Icon';
import '../style/ListItem.scss';
export const ListItem = (props) => {
const { className, children, title, thumb, thumbCircle, iconInfo = { value: '' }, extra, extraText, extraThumb, arrow, note, footer, disabled, hasBorder = true, ghost, onClick, onClear, } = props;
const rootClass = classNames('at-list__item', 'at-list__item--multiple', {
'at-list__item--thumb': thumb,
'at-list__item--thumb-circle': thumbCircle,
'at-list__item--disabled': disabled,
'at-list__item--ghost': ghost,
'at-list__item--no-border': !hasBorder,
}, className);
return (React.createElement(View, { className: rootClass, onClick: onClick },
React.createElement(View, { className: "at-list__item-container" },
thumb && (React.createElement(View, { className: "at-list__item-thumb item-thumb" }, isElement(thumb) ? (thumb) : (React.createElement(Image, { className: "item-thumb__info", mode: "scaleToFill", src: thumb })))),
iconInfo.value && (React.createElement(View, { className: "at-list__item-icon item-icon" },
React.createElement(Icon, Object.assign({}, iconInfo)))),
React.createElement(View, { className: "at-list__item-content item-content" },
React.createElement(View, { className: "item-content__info" },
React.createElement(View, { className: "item-content__info-title" }, title),
React.createElement(View, { className: "item-content__info-note" }, note))),
React.createElement(View, { className: "at-list__item-extra item-extra" },
typeof extra === 'string' ? React.createElement(View, { className: "item-extra__info" }, extra) : extra,
extraThumb && !extraText && (React.createElement(View, { className: "item-extra__image" },
React.createElement(Image, { className: "item-extra__image-info", mode: "aspectFit", src: extraThumb }))),
!!arrow && (React.createElement(View, { className: classNames('item-extra__icon', { 'item-extra__clear': arrow === 'clear' }) },
React.createElement(View, { className: classNames('at-icon', 'item-extra__icon-arrow', 'item-extra__icon-clear', arrow === 'clear' ? 'at-icon-close' : `at-icon-chevron-${arrow}`), onClick: (e) => {
if (arrow === 'clear') {
e.preventDefault();
e.stopPropagation();
onClear && onClear();
}
} }))))),
!!children && React.createElement(View, { className: "at-list__item-children" }, children)));
};
//# sourceMappingURL=ListItem.js.map