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

[improvement] ActionSheet: optimize jsx

Browse Source
This commit is contained in:
陈嘉涵 2019-05-13 19:39:49 +08:00
parent 7755b1738e
commit 0119e4cc7b
1 changed files with 49 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/action-sheet/index.tsx
View File

@ -2,8 +2,8 @@ import { use } from '../utils';
import { emit, inherit } from '../utils/functional'; import { emit, inherit } from '../utils/functional';
import { PopupMixin } from '../mixins/popup'; import { PopupMixin } from '../mixins/popup';
import Icon from '../icon'; import Icon from '../icon';
import Loading from '../loading';
import Popup from '../popup'; import Popup from '../popup';
import Loading from '../loading';
// Types // Types
import { CreateElement, RenderContext } from 'vue/types'; import { CreateElement, RenderContext } from 'vue/types';
@ -37,6 +37,10 @@ function ActionSheet(
) { ) {
const { title, cancelText } = props; const { title, cancelText } = props;
function onInput(value: boolean) {
emit(ctx, 'input', value);
}
function onCancel() { function onCancel() {
emit(ctx, 'input', false); emit(ctx, 'input', false);
emit(ctx, 'cancel'); emit(ctx, 'cancel');
@ -53,8 +57,16 @@ function ActionSheet(
} }
} }
function onClickOption(item: ActionSheetItem, index: number) { function Content() {
return function (event: Event) { if (slots.default) {
return <div class={bem('content')}>{slots.default()}</div>;
}
}
function Option(item: ActionSheetItem, index: number) {
const disabled = item.disabled || item.loading;
function onClickOption(event: MouseEvent) {
event.stopPropagation(); event.stopPropagation();
if (item.disabled || item.loading) { if (item.disabled || item.loading) {
@ -70,51 +82,55 @@ function ActionSheet(
if (props.closeOnClickAction) { if (props.closeOnClickAction) {
emit(ctx, 'input', false); emit(ctx, 'input', false);
} }
}; }
function OptionContent() {
if (item.loading) {
return <Loading class={bem('loading')} size="20px" />;
}
return [
<span class={bem('name')}>{item.name}</span>,
item.subname && <span class={bem('subname')}>{item.subname}</span>
];
}
return (
<div
class={[bem('item', { disabled }), item.className, 'van-hairline--top']}
onClick={onClickOption}
>
{OptionContent()}
</div>
);
} }
const Option = (item: ActionSheetItem, index: number) => ( function CancelText() {
<div if (cancelText) {
class={[ return (
bem('item', { disabled: item.disabled || item.loading }), <div class={bem('cancel')} onClick={onCancel}>
item.className, {cancelText}
'van-hairline--top' </div>
]} );
onClick={onClickOption(item, index)} }
> }
{item.loading ? (
<Loading class={bem('loading')} size="20px" />
) : (
[
<span class={bem('name')}>{item.name}</span>,
item.subname && <span class={bem('subname')}>{item.subname}</span>
]
)}
</div>
);
return ( return (
<Popup <Popup
class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })} class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
value={props.value}
position="bottom" position="bottom"
value={props.value}
overlay={props.overlay} overlay={props.overlay}
lazyRender={props.lazyRender} lazyRender={props.lazyRender}
getContainer={props.getContainer} getContainer={props.getContainer}
closeOnClickOverlay={props.closeOnClickOverlay} closeOnClickOverlay={props.closeOnClickOverlay}
onInput={(value: boolean) => { onInput={onInput}
emit(ctx, 'input', value);
}}
{...inherit(ctx)} {...inherit(ctx)}
> >
{Header()} {Header()}
{props.actions.map(Option)} {props.actions.map(Option)}
{slots.default && <div class={bem('content')}>{slots.default()}</div>} {Content()}
{cancelText && ( {CancelText()}
<div class={bem('cancel')} onClick={onCancel}>
{cancelText}
</div>
)}
</Popup> </Popup>
); );
} }