UNPKG

node-red-contrib-chatbot

Version:

REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required

54 lines (50 loc) 1.51 kB
import React, { useState, Fragment } from 'react'; import { Input, InputGroup, Icon } from 'rsuite'; import PropTypes from 'prop-types'; const PasswordInput = ({ value, onChange = () => {}, placeholder }) => { const [changed, setChanged] = useState(false) const [visible, setVisible] = useState(false); return ( <div className="ui-password"> <InputGroup> <Input type={visible ? 'text' : 'password'} value={changed ? value : placeholder } onChange={value => { if (!changed) { onChange(!_.isEmpty(value) ? value[value.length - 1] : ''); } else { onChange(value); } setChanged(true); }} /> {changed &&( <Fragment> <InputGroup.Button onMouseDown={() => setVisible(true)} onMouseUp={() => setVisible(false)} > <Icon icon="eye" /> </InputGroup.Button> <InputGroup.Button onClick={() => { setChanged(false); onChange(undefined); }} > <Icon icon="times-circle" /> </InputGroup.Button> </Fragment> )} </InputGroup> </div> ); }; PasswordInput.propTypes = { value: PropTypes.string, // password is never show, placeholder just show some **** in the box placeholder: PropTypes.string, onChange: PropTypes.func }; export default PasswordInput;