zent
Version:
一套前端设计语言和基于React的实现
93 lines (76 loc) • 2.02 kB
JavaScript
/* eslint-disable no-console */
import React, { Component } from 'react';
import Button from 'zent-button';
import Pop from '../src/index.js';
import 'zent-popover/assets/index.scss';
import 'zent-button/assets/index.scss';
import 'zent-layout/assets/index.scss';
import '../assets/index.scss';
import '../assets/example.scss';
const onShow = () => {
console.log('show');
};
const onClose = () => {
console.log('close');
};
const onBeforeShow = (cont) => {
setTimeout(cont, 500);
};
const onBeforeClose = () => {
return new Promise((resolve) => {
setTimeout(resolve, 500);
});
};
const addClick = () => {
console.log('额外事件');
};
class Single extends Component {
state = {
visible: false
};
render() {
const content = (
<div style={{ width: 160 }}>
<button onClick={() => this.setState({ visible: false })}>close</button>
<div style={{ marginTop: 10 }}><input /></div>
</div>
);
return (
<div
className="zent-col zent-col-4"
style={{ textAlign: 'center', marginBottom: 10 }}
>
<Pop
content={content}
trigger={this.props.trigger}
position="bottom-center"
onShow={onShow}
onClose={onClose}
onBeforeShow={onBeforeShow}
onBeforeClose={onBeforeClose}
visible={this.state.visible}
onVisibleChange={v => this.setState({ visible: v })}
>
{this.props.trigger !== 'focus' ?
<Button onClick={addClick}>
{this.props.trigger}
</Button> :
<input placeholder="focus" onChange={(evt) => console.log(evt.target.value)} />
}
</Pop>
</div>
);
}
}
const Demo = function () {
let arr = ['click', 'focus', 'hover'];
return (
<div>
<p>打开关闭都有延迟</p>
<div className="row">
{arr.map((item, index) => <Single key={index} trigger={item} />)}
</div>
</div>
);
};
export default Demo;