blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-11-04 04:42:09 +08:00
Code Issues Projects Releases Wiki Activity

chore(Cell): improve jsx segment

Browse Source
This commit is contained in:
陈嘉涵 2019-12-16 11:45:28 +08:00
parent 2b51ead3cb
commit 9c6ae2c28b
1 changed files with 62 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/cell/index.tsx
View File

@ -31,44 +31,72 @@ function Cell(
slots: CellSlots, slots: CellSlots,
ctx: RenderContext<CellProps> ctx: RenderContext<CellProps>
) { ) {
const { icon, size, title, label, value, isLink, arrowDirection } = props; const { icon, size, title, label, value, isLink } = props;
const showTitle = slots.title || isDef(title); const showTitle = slots.title || isDef(title);
const showValue = slots.default || isDef(value);
const showLabel = slots.label || isDef(label);
const Label = showLabel && ( function Label() {
<div class={[bem('label'), props.labelClass]}> const showLabel = slots.label || isDef(label);
{slots.label ? slots.label() : label}
</div>
);
const Title = showTitle && ( if (showLabel) {
<div class={[bem('title'), props.titleClass]} style={props.titleStyle}> return (
{slots.title ? slots.title() : <span>{title}</span>} <div class={[bem('label'), props.labelClass]}>
{Label} {slots.label ? slots.label() : label}
</div> </div>
); );
}
}
const Value = showValue && ( function Title() {
<div class={[bem('value', { alone: !slots.title && !title }), props.valueClass]}> if (showTitle) {
{slots.default ? slots.default() : <span>{value}</span>} return (
</div> <div class={[bem('title'), props.titleClass]} style={props.titleStyle}>
); {slots.title ? slots.title() : <span>{title}</span>}
{Label()}
</div>
);
}
}
const LeftIcon = slots.icon function Value() {
? slots.icon() const showValue = slots.default || isDef(value);
: icon && <Icon class={bem('left-icon')} name={icon} />;
const rightIconSlot = slots['right-icon']; if (showValue) {
const RightIcon = rightIconSlot return (
? rightIconSlot() <div class={[bem('value', { alone: !showTitle }), props.valueClass]}>
: isLink && ( {slots.default ? slots.default() : <span>{value}</span>}
</div>
);
}
}
function LeftIcon() {
if (slots.icon) {
return slots.icon();
}
if (icon) {
return <Icon class={bem('left-icon')} name={icon} />;
}
}
function RightIcon() {
const rightIconSlot = slots['right-icon'];
if (rightIconSlot) {
return rightIconSlot();
}
if (isLink) {
const { arrowDirection } = props;
return (
<Icon <Icon
class={bem('right-icon')} class={bem('right-icon')}
name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'} name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'}
/> />
); );
}
}
function onClick(event: Event) { function onClick(event: Event) {
emit(ctx, 'click', event); emit(ctx, 'click', event);
@ -76,6 +104,7 @@ function Cell(
} }
const clickable = isLink || props.clickable; const clickable = isLink || props.clickable;
const classes: Mods = { const classes: Mods = {
clickable, clickable,
center: props.center, center: props.center,
@ -95,11 +124,11 @@ function Cell(
onClick={onClick} onClick={onClick}
{...inherit(ctx)} {...inherit(ctx)}
> >
{LeftIcon} {LeftIcon()}
{Title} {Title()}
{Value} {Value()}
{RightIcon} {RightIcon()}
{slots.extra && slots.extra()} {slots.extra?.()}
</div> </div>
); );
} }