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: split jsx blocks

Browse Source
This commit is contained in:
陈嘉涵 2020-01-19 17:36:22 +08:00
parent f7c5f994dd
commit 0bfbcf6ca9
2 changed files with 104 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/dialog/Dialog.js
View File

@ -91,6 +91,39 @@ export default createComponent({
onClosed() {
this.$emit('closed');
},
genButtons() {
const multiple = this.showCancelButton && this.showConfirmButton;
return (
<div class={[BORDER_TOP, bem('footer', { buttons: multiple })]}>
{this.showCancelButton && (
<Button
size="large"
class={bem('cancel')}
loading={this.loading.cancel}
text={this.cancelButtonText || t('cancel')}
style={{ color: this.cancelButtonColor }}
onClick={() => {
this.handleAction('cancel');
}}
/>
)}
{this.showConfirmButton && (
<Button
size="large"
class={[bem('confirm'), { [BORDER_LEFT]: multiple }]}
loading={this.loading.confirm}
text={this.confirmButtonText || t('confirm')}
style={{ color: this.confirmButtonColor }}
onClick={() => {
this.handleAction('confirm');
}}
/>
)}
</div>
);
},
},
render() {
@ -122,36 +155,6 @@ export default createComponent({
</div>
);
const hasButtons = this.showCancelButton && this.showConfirmButton;
const ButtonGroup = (
<div class={[BORDER_TOP, bem('footer', { buttons: hasButtons })]}>
{this.showCancelButton && (
<Button
size="large"
class={bem('cancel')}
loading={this.loading.cancel}
text={this.cancelButtonText || t('cancel')}
style={{ color: this.cancelButtonColor }}
onClick={() => {
this.handleAction('cancel');
}}
/>
)}
{this.showConfirmButton && (
<Button
size="large"
class={[bem('confirm'), { [BORDER_LEFT]: hasButtons }]}
loading={this.loading.confirm}
text={this.confirmButtonText || t('confirm')}
style={{ color: this.confirmButtonColor }}
onClick={() => {
this.handleAction('confirm');
}}
/>
)}
</div>
);
return (
<transition
name={this.transition}
@ -167,7 +170,7 @@ export default createComponent({
>
{Title}
{Content}
{ButtonGroup}
{this.genButtons()}
</div>
</transition>
);

131
src/number-keyboard/index.js
View File

@ -134,83 +134,92 @@ export default createComponent({
this.$emit('update:value', value + text);
}
},
genTitle() {
const { title, theme, closeButtonText } = this;
const titleLeft = this.slots('title-left');
const showClose = closeButtonText && theme === 'default';
const showTitle = title || showClose || titleLeft;
if (!showTitle) {
return;
}
return (
<div class={[bem('title'), BORDER_TOP]}>
{titleLeft && <span class={bem('title-left')}>{titleLeft}</span>}
{title && <span>{title}</span>}
{showClose && (
<span
role="button"
tabindex="0"
class={bem('close')}
onClick={this.onClose}
>
{closeButtonText}
</span>
)}
</div>
);
},
genKeys() {
return this.keys.map(key => (
<Key
key={key.text}
text={key.text}
type={key.type}
theme={key.theme}
onPress={this.onPress}
>
{key.type === 'delete' && this.slots('delete')}
{key.type === 'extra' && this.slots('extra-key')}
</Key>
));
},
genSidebar() {
if (this.theme === 'custom') {
return (
<div class={bem('sidebar')}>
<Key
text={this.deleteText}
type="delete"
theme={DELETE_KEY_THEME}
onPress={this.onPress}
>
{this.slots('delete')}
</Key>
<Key
text={this.closeButtonText}
type="close"
theme={CLOSE_KEY_THEME}
onPress={this.onPress}
/>
</div>
);
}
},
},
render() {
const { title, theme, onPress, closeButtonText } = this;
const titleLeftSlot = this.slots('title-left');
const showTitleClose = closeButtonText && theme === 'default';
const showTitle = title || showTitleClose || titleLeftSlot;
const Title = showTitle && (
<div class={[bem('title'), BORDER_TOP]}>
{titleLeftSlot && (
<span class={bem('title-left')}>{titleLeftSlot}</span>
)}
{title && <span>{title}</span>}
{showTitleClose && (
<span
role="button"
tabindex="0"
class={bem('close')}
onClick={this.onClose}
>
{closeButtonText}
</span>
)}
</div>
);
const Keys = this.keys.map(key => (
<Key
key={key.text}
text={key.text}
type={key.type}
theme={key.theme}
onPress={onPress}
>
{key.type === 'delete' && this.slots('delete')}
{key.type === 'extra' && this.slots('extra-key')}
</Key>
));
const Sidebar = theme === 'custom' && (
<div class={bem('sidebar')}>
<Key
text={this.deleteText}
type="delete"
theme={DELETE_KEY_THEME}
onPress={onPress}
>
{this.slots('delete')}
</Key>
<Key
text={closeButtonText}
type="close"
theme={CLOSE_KEY_THEME}
onPress={onPress}
/>
</div>
);
return (
<transition name={this.transition ? 'van-slide-up' : ''}>
<div
vShow={this.show}
style={{ zIndex: this.zIndex }}
class={bem([
theme,
this.theme,
{ 'safe-area-inset-bottom': this.safeAreaInsetBottom },
])}
onTouchstart={stopPropagation}
onAnimationend={this.onAnimationEnd}
onWebkitAnimationEnd={this.onAnimationEnd}
>
{Title}
{this.genTitle()}
<div class={bem('body')}>
{Keys}
{Sidebar}
{this.genKeys()}
{this.genSidebar()}
</div>
</div>
</transition>