chowa
Version:
UI component library based on React
103 lines (102 loc) • 4.2 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const modal_1 = require("./modal");
const button_1 = require("../button");
const input_1 = require("../input");
const icon_1 = require("../icon");
const i18n_1 = require("../i18n");
class PromptModal extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
value: props.defaultValue || ''
};
[
'onCancelHandler',
'onConfirmHandler',
'onChangeHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (preProps.visible !== this.props.visible && this.props.visible) {
this.autoFocusOnBtn();
}
}
componentDidMount() {
if (this.props.visible) {
this.autoFocusOnBtn();
}
}
autoFocusOnBtn() {
setTimeout(() => {
this.inputIns.focus();
}, 100);
}
onChangeHandler(e) {
this.setState({
value: e.target.value
});
}
onCancelHandler() {
if (this.props.onCancel) {
this.props.onCancel(this.state.value);
}
}
onConfirmHandler() {
if (this.props.onConfirm) {
this.props.onConfirm(this.state.value);
}
}
render() {
const { className, style, title, visible, cancelText, confirmText, inputType, onHide } = this.props;
const { value } = this.state;
const componentClass = classnames_1.default({
[utils_1.preClass('modal-prompt')]: true,
[className]: utils_1.isExist(className)
});
return (React.createElement(modal_1.default, { visible: visible, className: componentClass, style: style, onHide: onHide, closeOnPressEsc: false },
React.createElement(modal_1.default.Body, null,
React.createElement("div", { className: utils_1.preClass('modal-prompt-body') },
React.createElement("div", { className: utils_1.preClass('modal-prompt-title-wrapper') },
React.createElement("span", { className: utils_1.preClass('modal-prompt-icon') },
React.createElement(icon_1.default, { type: 'warning-fill' })),
React.createElement("div", { className: utils_1.preClass('modal-prompt-title') }, React.createElement(i18n_1.I18nReceiver, { module: 'Modal' }, (i18n) => title || i18n.confirmTitle))),
React.createElement(input_1.default, { type: inputType, value: value, autoFocus: true, onChange: this.onChangeHandler, ref: (ins) => {
this.inputIns = ins;
} })),
React.createElement("div", { className: utils_1.preClass('modal-prompt-btns') },
React.createElement(button_1.default, { onClick: this.onCancelHandler }, React.createElement(i18n_1.I18nReceiver, { module: 'Common' }, (i18n) => cancelText || i18n.cancel)),
React.createElement(button_1.default, { onClick: this.onConfirmHandler, disabled: !value, type: 'primary' }, React.createElement(i18n_1.I18nReceiver, { module: 'Common' }, (i18n) => confirmText || i18n.confirm))))));
}
}
PromptModal.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
title: PropTypes.string,
onConfirm: PropTypes.func,
onCancel: PropTypes.func,
visible: PropTypes.bool.isRequired,
cancelText: PropTypes.string,
confirmText: PropTypes.string,
inputType: PropTypes.string,
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onHide: PropTypes.func
};
PromptModal.defaultProps = {
inputType: 'text'
};
exports.default = PromptModal;