blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +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,
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 showValue = slots.default || isDef(value);
const showLabel = slots.label || isDef(label);
const Label = showLabel && (
<div class={[bem('label'), props.labelClass]}>
{slots.label ? slots.label() : label}
</div>
);
function Label() {
const showLabel = slots.label || isDef(label);
const Title = showTitle && (
<div class={[bem('title'), props.titleClass]} style={props.titleStyle}>
{slots.title ? slots.title() : <span>{title}</span>}
{Label}
</div>
);
if (showLabel) {
return (
<div class={[bem('label'), props.labelClass]}>
{slots.label ? slots.label() : label}
</div>
);
}
}
const Value = showValue && (
<div class={[bem('value', { alone: !slots.title && !title }), props.valueClass]}>
{slots.default ? slots.default() : <span>{value}</span>}
</div>
);
function Title() {
if (showTitle) {
return (
<div class={[bem('title'), props.titleClass]} style={props.titleStyle}>
{slots.title ? slots.title() : <span>{title}</span>}
{Label()}
</div>
);
}
}
const LeftIcon = slots.icon
? slots.icon()
: icon && <Icon class={bem('left-icon')} name={icon} />;
function Value() {
const showValue = slots.default || isDef(value);
const rightIconSlot = slots['right-icon'];
const RightIcon = rightIconSlot
? rightIconSlot()
: isLink && (
if (showValue) {
return (
<div class={[bem('value', { alone: !showTitle }), props.valueClass]}>
{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
class={bem('right-icon')}
name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'}
/>
);
);
}
}
function onClick(event: Event) {
emit(ctx, 'click', event);
@ -76,6 +104,7 @@ function Cell(
}
const clickable = isLink || props.clickable;
const classes: Mods = {
clickable,
center: props.center,
@ -95,11 +124,11 @@ function Cell(
onClick={onClick}
{...inherit(ctx)}
>
{LeftIcon}
{Title}
{Value}
{RightIcon}
{slots.extra && slots.extra()}
{LeftIcon()}
{Title()}
{Value()}
{RightIcon()}
{slots.extra?.()}
</div>
);
}