ep-react-ui
Version:
EP react UI elements.
236 lines (198 loc) • 9.55 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _Modal = require('./Modal');
var _Modal2 = _interopRequireDefault(_Modal);
var _FlatButton = require('../Button/FlatButton');
var _FlatButton2 = _interopRequireDefault(_FlatButton);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /**
* Confirmation Modal, using Modal
*/
/* eslint-disable react/prop-types */
var SecureInput = function SecureInput(_ref) {
var isError = _ref.isError,
textDelete = _ref.textDelete,
input = _ref.input,
onChange = _ref.onChange;
return _react2.default.createElement(
'div',
{ className: 'form-group' },
_react2.default.createElement('input', {
type: 'text',
className: (0, _classnames2.default)('input input-secure', {
'input__error': isError
}),
placeholder: 'Enter \'' + textDelete + '\'',
value: input,
autoFocus: true,
onChange: onChange
}),
_react2.default.createElement(
'div',
{ className: 'input-tips' },
'Enter "',
textDelete,
'" to continue.'
)
);
};
var Content = function Content(_ref2) {
var children = _ref2.children,
isSecure = _ref2.isSecure,
others = _objectWithoutProperties(_ref2, ['children', 'isSecure']);
return _react2.default.createElement(
'div',
{ className: 'Modal-body' },
children,
isSecure && _react2.default.createElement(SecureInput, others)
);
};
/* eslint-enable react/prop-types */
var ConfirmModal = function (_PureComponent) {
_inherits(ConfirmModal, _PureComponent);
function ConfirmModal(props) {
_classCallCheck(this, ConfirmModal);
var _this = _possibleConstructorReturn(this, (ConfirmModal.__proto__ || Object.getPrototypeOf(ConfirmModal)).call(this, props));
_this.state = {
input: '',
isError: false
};
_this._onChange = _this._onChange.bind(_this);
_this._onConfirm = _this._onConfirm.bind(_this);
return _this;
}
_createClass(ConfirmModal, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
// reset input when modal is opened
if (nextProps.isShow && !this.props.isShow) {
this.setState({ input: '', isError: false });
}
}
}, {
key: 'render',
value: function render() {
/* eslint-disable no-unused-vars */
var _props = this.props,
children = _props.children,
className = _props.className,
isSecure = _props.isSecure,
textCancel = _props.textCancel,
textConfirm = _props.textConfirm,
textDelete = _props.textDelete,
onConfirm = _props.onConfirm,
onRequestClose = _props.onRequestClose,
others = _objectWithoutProperties(_props, ['children', 'className', 'isSecure', 'textCancel', 'textConfirm', 'textDelete', 'onConfirm', 'onRequestClose']);
var _state = this.state,
input = _state.input,
isError = _state.isError;
return _react2.default.createElement(
_Modal2.default,
_extends({}, others, {
style: {
width: '350px'
},
className: (0, _classnames2.default)('ConfirmModal', className),
onRequestClose: onRequestClose
}),
_react2.default.createElement(
'div',
{ className: 'ConfirmModal-content' },
_react2.default.createElement(
Content,
{
textDelete: textDelete,
isSecure: isSecure,
isError: isError,
input: input,
onChange: this._onChange
},
children
),
_react2.default.createElement(
'div',
{ className: 'Modal-footer' },
_react2.default.createElement(
_FlatButton2.default,
{
theme: 'default',
onClick: onRequestClose
},
textCancel
),
_react2.default.createElement(
_FlatButton2.default,
{
theme: 'red',
onClick: this._onConfirm
},
_react2.default.createElement(
'b',
null,
textConfirm
)
)
)
)
);
}
}, {
key: '_onChange',
value: function _onChange(e) {
this.setState({
isError: false,
input: e.target.value
});
}
}, {
key: '_onConfirm',
value: function _onConfirm() {
var _props2 = this.props,
isSecure = _props2.isSecure,
textDelete = _props2.textDelete;
var input = this.state.input;
if (isSecure && input !== textDelete) {
this.setState({
isError: true
});
return;
}
this.setState({
input: ''
});
if (this.props.onConfirm) {
this.props.onConfirm();
}
}
}]);
return ConfirmModal;
}(_react.PureComponent);
ConfirmModal.propTypes = {
isShow: _propTypes2.default.bool, // Modal show status
isSecure: _propTypes2.default.bool, // enable double confirm
textCancel: _propTypes2.default.string, // cancel button text
textConfirm: _propTypes2.default.string, // confirm button text
textDelete: _propTypes2.default.string, // confirm delete text
onConfirm: _propTypes2.default.func, // triggered when confirmed
onRequestClose: _propTypes2.default.func // triggered when canceled
};
ConfirmModal.defaultProps = {
isShow: false,
textConfirm: 'Confirm',
textCancel: 'Cancel',
textDelete: 'DELETE'
};
exports.default = ConfirmModal;