apeman-react-password
Version:
apeman react package for password component.
126 lines (103 loc) • 8.74 kB
JavaScript
/**
* apeman react package for password component.
* @class ApPassword
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _apemanReactIcon = require('apeman-react-icon');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var DEFAULT_SHOW_ICON = 'ion ion-eye';
var DEFAULT_HIDE_ICON = 'ion ion-eye-disabled';
/** @lends ApPassword */
var ApPassword = _react2.default.createClass({
displayName: 'ApPassword',
// --------------------
// Specs
// --------------------
propTypes: {
/** Name of text input */
name: _react.PropTypes.string,
/** Value of password input */
value: _react.PropTypes.string,
/** Placeholder of password input */
placeholder: _react.PropTypes.string,
/** Icon class for show button */
showIcon: _react.PropTypes.string,
/** Icon class for hide icon */
hideIcon: _react.PropTypes.string
},
statics: {
DEFAULT_SHOW_ICON: DEFAULT_SHOW_ICON,
DEFAULT_HIDE_ICON: DEFAULT_HIDE_ICON
},
getInitialState: function getInitialState() {
return {
visible: false
};
},
getDefaultProps: function getDefaultProps() {
return {
name: '',
value: '',
placeholder: '',
showIcon: DEFAULT_SHOW_ICON,
hideIcon: DEFAULT_HIDE_ICON
};
},
render: function render() {
var s = this;
var props = s.props;
var state = s.state;
var hasVal = !!props.value;
var type = state.visible ? 'text' : 'password';
var icon = state.visible ? props.hideIcon : props.showIcon;
var className = (0, _classnames2.default)('ap-password-wrap', {
'ap-password-wrap-empty': !hasVal
});
return _react2.default.createElement(
'span',
{ className: className },
_react2.default.createElement('input', { id: props.id,
name: props.name,
placeholder: props.placeholder,
onChange: props.onChange,
className: (0, _classnames2.default)('ap-password', props.className),
ref: function ref(input) {
s.input = input;
},
value: props.value,
type: type }),
_react2.default.createElement(
'a',
{ className: 'ap-password-toggle-button', onClick: s.handleToggleTap },
_react2.default.createElement(
'span',
{ className: 'ap-password-toggle-aligner' },
' '
),
_react2.default.createElement(_apemanReactIcon.ApIcon, { className: (0, _classnames2.default)('ap-password-toggle-icon', icon) })
)
);
},
// --------------------
// Custom
// --------------------
handleToggleTap: function handleToggleTap(e) {
var s = this;
var state = s.state;
s.setState({
visible: !state.visible
});
_reactDom2.default.findDOMNode(s.input).focus();
}
});
exports.default = ApPassword;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwX3Bhc3N3b3JkLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7QUFLQTs7Ozs7O0FBRUE7Ozs7QUFDQTs7OztBQUNBOzs7O0FBQ0E7Ozs7QUFFQSxJQUFNLG9CQUFvQixhQUExQjtBQUNBLElBQU0sb0JBQW9CLHNCQUExQjs7QUFFQTtBQUNBLElBQU0sYUFBYSxnQkFBTSxXQUFOLENBQWtCO0FBQUE7OztBQUVuQztBQUNBO0FBQ0E7O0FBRUEsYUFBVztBQUNUO0FBQ0EsVUFBTSxpQkFBTSxNQUZIO0FBR1Q7QUFDQSxXQUFPLGlCQUFNLE1BSko7QUFLVDtBQUNBLGlCQUFhLGlCQUFNLE1BTlY7QUFPVDtBQUNBLGNBQVUsaUJBQU0sTUFSUDtBQVNUO0FBQ0EsY0FBVSxpQkFBTTtBQVZQLEdBTndCOztBQW1CbkMsV0FBUztBQUNQLHdDQURPO0FBRVA7QUFGTyxHQW5CMEI7O0FBd0JuQyxpQkF4Qm1DLDZCQXdCaEI7QUFDakIsV0FBTztBQUNMLGVBQVM7QUFESixLQUFQO0FBR0QsR0E1QmtDO0FBOEJuQyxpQkE5Qm1DLDZCQThCaEI7QUFDakIsV0FBTztBQUNMLFlBQU0sRUFERDtBQUVMLGFBQU8sRUFGRjtBQUdMLG1CQUFhLEVBSFI7QUFJTCxnQkFBVSxpQkFKTDtBQUtMLGdCQUFVO0FBTEwsS0FBUDtBQU9ELEdBdENrQztBQXdDbkMsUUF4Q21DLG9CQXdDekI7QUFDUixRQUFNLElBQUksSUFBVjtBQURRLFFBRUYsS0FGRSxHQUVlLENBRmYsQ0FFRixLQUZFO0FBQUEsUUFFSyxLQUZMLEdBRWUsQ0FGZixDQUVLLEtBRkw7O0FBR1IsUUFBSSxTQUFTLENBQUMsQ0FBQyxNQUFNLEtBQXJCO0FBQ0EsUUFBSSxPQUFPLE1BQU0sT0FBTixHQUFnQixNQUFoQixHQUF5QixVQUFwQztBQUNBLFFBQUksT0FBTyxNQUFNLE9BQU4sR0FBZ0IsTUFBTSxRQUF0QixHQUFpQyxNQUFNLFFBQWxEO0FBQ0EsUUFBSSxZQUFZLDBCQUFXLGtCQUFYLEVBQStCO0FBQzdDLGdDQUEwQixDQUFDO0FBRGtCLEtBQS9CLENBQWhCO0FBR0EsV0FDRTtBQUFBO0FBQUEsUUFBTSxXQUFZLFNBQWxCO0FBQ0UsK0NBQU8sSUFBSyxNQUFNLEVBQWxCO0FBQ08sY0FBTyxNQUFNLElBRHBCO0FBRU8scUJBQWMsTUFBTSxXQUYzQjtBQUdPLGtCQUFXLE1BQU0sUUFIeEI7QUFJTyxtQkFBWSwwQkFBVyxhQUFYLEVBQTBCLE1BQU0sU0FBaEMsQ0FKbkI7QUFLTyxhQUFNLGFBQUMsS0FBRCxFQUFXO0FBQUUsWUFBRSxLQUFGLEdBQVUsS0FBVjtBQUFpQixTQUwzQztBQU1PLGVBQVEsTUFBTSxLQU5yQjtBQU9PLGNBQU8sSUFQZCxHQURGO0FBU0U7QUFBQTtBQUFBLFVBQUcsV0FBVSwyQkFBYixFQUF5QyxTQUFVLEVBQUUsZUFBckQ7QUFDSTtBQUFBO0FBQUEsWUFBTSxXQUFVLDRCQUFoQjtBQUFBO0FBQUEsU0FESjtBQUVJLGlFQUFRLFdBQVksMEJBQVcseUJBQVgsRUFBc0MsSUFBdEMsQ0FBcEI7QUFGSjtBQVRGLEtBREY7QUFnQkQsR0FqRWtDOzs7QUFtRW5DO0FBQ0E7QUFDQTs7QUFFQSxpQkF2RW1DLDJCQXVFbEIsQ0F2RWtCLEVBdUVmO0FBQ2xCLFFBQU0sSUFBSSxJQUFWO0FBRGtCLFFBRVosS0FGWSxHQUVELENBRkMsQ0FFWixLQUZZOztBQUdsQixNQUFFLFFBQUYsQ0FBVztBQUNULGVBQVMsQ0FBQyxNQUFNO0FBRFAsS0FBWDtBQUdBLHVCQUFTLFdBQVQsQ0FBcUIsRUFBRSxLQUF2QixFQUE4QixLQUE5QjtBQUNEO0FBOUVrQyxDQUFsQixDQUFuQjs7a0JBaUZlLFUiLCJmaWxlIjoiYXBfcGFzc3dvcmQuanN4Iiwic291cmNlUm9vdCI6ImxpYiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogYXBlbWFuIHJlYWN0IHBhY2thZ2UgZm9yIHBhc3N3b3JkIGNvbXBvbmVudC5cbiAqIEBjbGFzcyBBcFBhc3N3b3JkXG4gKi9cblxuJ3VzZSBzdHJpY3QnXG5cbmltcG9ydCBSZWFjdCwge1Byb3BUeXBlcyBhcyB0eXBlc30gZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IGNsYXNzbmFtZXMgZnJvbSAnY2xhc3NuYW1lcydcbmltcG9ydCB7QXBJY29ufSBmcm9tICdhcGVtYW4tcmVhY3QtaWNvbidcblxuY29uc3QgREVGQVVMVF9TSE9XX0lDT04gPSAnaW9uIGlvbi1leWUnXG5jb25zdCBERUZBVUxUX0hJREVfSUNPTiA9ICdpb24gaW9uLWV5ZS1kaXNhYmxlZCdcblxuLyoqIEBsZW5kcyBBcFBhc3N3b3JkICovXG5jb25zdCBBcFBhc3N3b3JkID0gUmVhY3QuY3JlYXRlQ2xhc3Moe1xuXG4gIC8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tXG4gIC8vIFNwZWNzXG4gIC8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbiAgcHJvcFR5cGVzOiB7XG4gICAgLyoqIE5hbWUgb2YgdGV4dCBpbnB1dCAqL1xuICAgIG5hbWU6IHR5cGVzLnN0cmluZyxcbiAgICAvKiogVmFsdWUgb2YgcGFzc3dvcmQgaW5wdXQgKi9cbiAgICB2YWx1ZTogdHlwZXMuc3RyaW5nLFxuICAgIC8qKiBQbGFjZWhvbGRlciBvZiBwYXNzd29yZCBpbnB1dCAqL1xuICAgIHBsYWNlaG9sZGVyOiB0eXBlcy5zdHJpbmcsXG4gICAgLyoqIEljb24gY2xhc3MgZm9yIHNob3cgYnV0dG9uICovXG4gICAgc2hvd0ljb246IHR5cGVzLnN0cmluZyxcbiAgICAvKiogSWNvbiBjbGFzcyBmb3IgaGlkZSBpY29uICovXG4gICAgaGlkZUljb246IHR5cGVzLnN0cmluZ1xuICB9LFxuXG4gIHN0YXRpY3M6IHtcbiAgICBERUZBVUxUX1NIT1dfSUNPTixcbiAgICBERUZBVUxUX0hJREVfSUNPTlxuICB9LFxuXG4gIGdldEluaXRpYWxTdGF0ZSAoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIHZpc2libGU6IGZhbHNlXG4gICAgfVxuICB9LFxuXG4gIGdldERlZmF1bHRQcm9wcyAoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIG5hbWU6ICcnLFxuICAgICAgdmFsdWU6ICcnLFxuICAgICAgcGxhY2Vob2xkZXI6ICcnLFxuICAgICAgc2hvd0ljb246IERFRkFVTFRfU0hPV19JQ09OLFxuICAgICAgaGlkZUljb246IERFRkFVTFRfSElERV9JQ09OXG4gICAgfVxuICB9LFxuXG4gIHJlbmRlciAoKSB7XG4gICAgY29uc3QgcyA9IHRoaXNcbiAgICBsZXQgeyBwcm9wcywgc3RhdGUgfSA9IHNcbiAgICBsZXQgaGFzVmFsID0gISFwcm9wcy52YWx1ZVxuICAgIGxldCB0eXBlID0gc3RhdGUudmlzaWJsZSA/ICd0ZXh0JyA6ICdwYXNzd29yZCdcbiAgICBsZXQgaWNvbiA9IHN0YXRlLnZpc2libGUgPyBwcm9wcy5oaWRlSWNvbiA6IHByb3BzLnNob3dJY29uXG4gICAgbGV0IGNsYXNzTmFtZSA9IGNsYXNzbmFtZXMoJ2FwLXBhc3N3b3JkLXdyYXAnLCB7XG4gICAgICAnYXAtcGFzc3dvcmQtd3JhcC1lbXB0eSc6ICFoYXNWYWxcbiAgICB9KVxuICAgIHJldHVybiAoXG4gICAgICA8c3BhbiBjbGFzc05hbWU9eyBjbGFzc05hbWUgfT5cbiAgICAgICAgPGlucHV0IGlkPXsgcHJvcHMuaWQgfVxuICAgICAgICAgICAgICAgbmFtZT17IHByb3BzLm5hbWUgfVxuICAgICAgICAgICAgICAgcGxhY2Vob2xkZXI9eyBwcm9wcy5wbGFjZWhvbGRlciB9XG4gICAgICAgICAgICAgICBvbkNoYW5nZT17IHByb3BzLm9uQ2hhbmdlIH1cbiAgICAgICAgICAgICAgIGNsYXNzTmFtZT17IGNsYXNzbmFtZXMoJ2FwLXBhc3N3b3JkJywgcHJvcHMuY2xhc3NOYW1lKSB9XG4gICAgICAgICAgICAgICByZWY9eyAoaW5wdXQpID0+IHsgcy5pbnB1dCA9IGlucHV0IH0gfVxuICAgICAgICAgICAgICAgdmFsdWU9eyBwcm9wcy52YWx1ZSB9XG4gICAgICAgICAgICAgICB0eXBlPXsgdHlwZSB9Lz5cbiAgICAgICAgPGEgY2xhc3NOYW1lPSdhcC1wYXNzd29yZC10b2dnbGUtYnV0dG9uJyBvbkNsaWNrPXsgcy5oYW5kbGVUb2dnbGVUYXAgfT5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0nYXAtcGFzc3dvcmQtdG9nZ2xlLWFsaWduZXInPiZuYnNwOzwvc3Bhbj5cbiAgICAgICAgICAgIDxBcEljb24gY2xhc3NOYW1lPXsgY2xhc3NuYW1lcygnYXAtcGFzc3dvcmQtdG9nZ2xlLWljb24nLCBpY29uKSB9Lz5cbiAgICAgICAgPC9hPlxuICAgICAgPC9zcGFuPlxuICAgIClcbiAgfSxcblxuICAvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLVxuICAvLyBDdXN0b21cbiAgLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuICBoYW5kbGVUb2dnbGVUYXAgKGUpIHtcbiAgICBjb25zdCBzID0gdGhpc1xuICAgIGxldCB7IHN0YXRlIH0gID0gc1xuICAgIHMuc2V0U3RhdGUoe1xuICAgICAgdmlzaWJsZTogIXN0YXRlLnZpc2libGVcbiAgICB9KVxuICAgIFJlYWN0RE9NLmZpbmRET01Ob2RlKHMuaW5wdXQpLmZvY3VzKClcbiAgfVxufSlcblxuZXhwb3J0IGRlZmF1bHQgQXBQYXNzd29yZFxuIl19