diff --git a/frontend/package.json b/frontend/package.json index 0d505ce731..97ffe75246 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -30,6 +30,7 @@ "react-i18next": "^10.12.2", "react-mentions": "^3.0.2", "react-moment": "^0.7.9", + "react-qr-code": "^1.0.5", "react-responsive": "^6.1.2", "react-select": "^2.4.1", "reactstrap": "^6.4.0", diff --git a/frontend/src/components/btn-qr-code.js b/frontend/src/components/btn-qr-code.js new file mode 100644 index 0000000000..71c93937ea --- /dev/null +++ b/frontend/src/components/btn-qr-code.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import QRCode from 'react-qr-code'; +import { Button, Popover, PopoverBody } from 'reactstrap'; +import { gettext } from '../utils/constants'; + +import '../css/btn-qr-code.css'; + +const propTypes = { + link: PropTypes.string.isRequired +}; + +class ButtonQR extends React.Component { + constructor(props) { + super(props); + this.state = { + isPopoverOpen: false + }; + + this.btnID = 'btn-' + Math.random().toString().substr(2,5); + } + + togglePopover = () => { + this.setState({ + isPopoverOpen: !this.state.isPopoverOpen + }); + } + + render() { + const { link } = this.props; + const { isPopoverOpen } = this.state; + return ( +
{gettext('Scan the QR code to view the shared content directly')}
+