106 lines
3.4 KiB
JavaScript
106 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import { View, Text, } from 'react-native';
|
|
import { Modal } from '../Modal';
|
|
import tipStyles from './styles';
|
|
export class Tip extends Modal {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
init(props, syncTag) {
|
|
const positions = [
|
|
['top', 'left'],
|
|
['top'],
|
|
['top', 'right'],
|
|
['left'],
|
|
['center'],
|
|
['right'],
|
|
['bottom', 'left'],
|
|
['bottom'],
|
|
['bottom', 'right']
|
|
];
|
|
const position = typeof (props.position) === 'string' ? [props.position] : props.position;
|
|
const propsPositionValid = positions.some((item) => {
|
|
const str1 = item.join();
|
|
const str2 = item.reverse().join();
|
|
const str3 = position.join();
|
|
if (str3 === str1 || str3 === str2) {
|
|
return true;
|
|
}
|
|
});
|
|
if (!propsPositionValid) {
|
|
throw new Error(`Tip 组件的 position 参数无效`);
|
|
}
|
|
const alignItems = position.indexOf('top') !== -1 ? 'flex-start' : (position.indexOf('bottom') !== -1 ? 'flex-end' : 'center');
|
|
const justifyContent = position.indexOf('left') !== -1 ? 'flex-start' : (position.indexOf('right') !== -1 ? 'flex-end' : 'center');
|
|
const tmpProps = {
|
|
...props,
|
|
containerStyle: {
|
|
alignItems,
|
|
justifyContent
|
|
}
|
|
};
|
|
Modal.prototype.init.call(this, tmpProps, syncTag);
|
|
}
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.position !== this.props.position) {
|
|
this.init(nextProps, false);
|
|
}
|
|
else {
|
|
Modal.prototype.componentWillReceiveProps.call(this, nextProps);
|
|
}
|
|
}
|
|
getContent(c) {
|
|
const inner = React.createElement(View, { style: tipStyles.container }, this.getBody(c));
|
|
return Modal.prototype.getContent.call(this, inner);
|
|
}
|
|
getBody(c) {
|
|
const { body } = this.props;
|
|
let tmp = c == null ? body : c;
|
|
if (!React.isValidElement(tmp)) {
|
|
tmp = React.createElement(Text, { style: tipStyles.info }, String(tmp));
|
|
}
|
|
return (React.createElement(View, { style: tipStyles.body }, tmp));
|
|
}
|
|
open(c) {
|
|
return Modal.prototype.open.call(this, c).then((ret) => {
|
|
if (typeof this.props.duration === 'number') {
|
|
setTimeout(() => {
|
|
this.close().catch((e) => {
|
|
return null;
|
|
});
|
|
}, this.props.duration);
|
|
}
|
|
return ret;
|
|
});
|
|
}
|
|
render() {
|
|
return null;
|
|
}
|
|
}
|
|
Tip.defaultProps = {
|
|
...Modal.defaultProps,
|
|
position: 'center',
|
|
style: {
|
|
marginHorizontal: 40,
|
|
marginVertical: 90,
|
|
},
|
|
cancelable: true,
|
|
backdropColor: 'rgba(0, 0, 0, 0)',
|
|
body: 'hello world',
|
|
duration: null,
|
|
};
|
|
Tip.tipInstance = null;
|
|
Tip.show = function (msg, duration, cancelable, position) {
|
|
Tip.tipInstance = new Tip({
|
|
...Tip.defaultProps,
|
|
position: position || Tip.defaultProps.position,
|
|
body: msg,
|
|
cancelable: typeof cancelable === 'boolean' ? cancelable : true,
|
|
duration: Number(duration) || 2000,
|
|
});
|
|
Tip.tipInstance.open();
|
|
};
|
|
Tip.hide = function () {
|
|
Tip.tipInstance.close();
|
|
};
|
|
//# sourceMappingURL=index.js.map
|