antd-mobile-taro-ui
Version:
以antd-mobile为设计标准，基于taro框架的微信小程序组件库
79 lines (73 loc) • 2.24 kB
JavaScript
import React, { useMemo } from 'react';
import classNames from 'classnames';
import { CheckIcon, CloseIcon } from 'antd-mobile-taro-icons';
import { mergeProps } from 'antd-mobile/es/utils/with-default-props';
import { View } from '@tarojs/components';
import Mask from '../mask';
import AutoCenter from '../auto-center';
import DotLoading from '../dot-loading';
const classPrefix = `adm-toast`;
const defaultProps = {
maskClickable: true,
stopPropagation: ['click']
};
export const InternalToast = p => {
const props = mergeProps(defaultProps, p);
const {
maskClickable,
content,
icon,
position
} = props;
const iconElement = useMemo(() => {
if (icon === null || icon === undefined) return null;
switch (icon) {
case 'success':
return React.createElement(CheckIcon, {
className: `${classPrefix}-icon-success`
});
case 'fail':
return React.createElement(CloseIcon, {
className: `${classPrefix}-icon-fail`
});
case 'loading':
return React.createElement(DotLoading, {
color: 'white',
className: `${classPrefix}-loading`
});
default:
return icon;
}
}, [icon]);
const top = useMemo(() => {
switch (position) {
case 'top':
return '20%';
case 'bottom':
return '80%';
default:
return '50%';
}
}, [position]);
return React.createElement(Mask, {
visible: props.visible,
destroyOnClose: true,
opacity: 0,
disableBodyScroll: !maskClickable,
afterClose: props.afterClose,
style: Object.assign({
pointerEvents: maskClickable ? 'none' : 'auto'
}, props.maskStyle),
className: classNames(`${classPrefix}-mask`, props.maskClassName),
stopPropagation: props.stopPropagation
}, React.createElement(View, {
className: classNames(`${classPrefix}-wrap`)
}, React.createElement(View, {
style: {
top
},
className: classNames(`${classPrefix}-main`, icon ? `${classPrefix}-main-icon` : `${classPrefix}-main-text`)
}, iconElement && React.createElement(View, {
className: `${classPrefix}-icon`
}, iconElement), React.createElement(AutoCenter, null, content))));
};