Add qrcode field type (#6506)

src/Sulu/Bundle/AdminBundle/Resources/js/components/Input/types.js

@@ -2,7 +2,7 @@
 import type {ElementRef} from 'react';
 
 export type InputProps<T: ?string | ?number> = {|
-    alignment: 'left' | 'center' | 'right',
+    alignment?: 'left' | 'center' | 'right',
     autocomplete?: string,
     collapsed?: boolean,
     disabled: boolean,
@@ -31,7 +31,7 @@ export type InputProps<T: ?string | ?number> = {|
     segmentDelimiter?: string,
     skin?: 'default' | 'dark',
     step?: ?T,
-    type: string,
+    type?: string,
     valid: boolean,
     value: ?T,
 |};

src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/QRCode.js

@@ -0,0 +1,23 @@
+// @flow
+import React, {Fragment} from 'react';
+import QRCodeComponent from 'react-qr-code';
+import Input from '../Input';
+import qrCodeStyles from './qrcode.scss';
+import type {QRCodeProps} from './types';
+
+export default class QRCode<T: ?string | ?number> extends React.PureComponent<QRCodeProps<T>> {
+    render() {
+        return (
+            <Fragment>
+                <Input
+                    {...this.props}
+                />
+                <QRCodeComponent
+                    className={qrCodeStyles.qrcode}
+                    value={this.props.value || ''}
+                    viewBox="0 0 256 256"
+                />
+            </Fragment>
+        );
+    }
+}

src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/README.md

@@ -0,0 +1,15 @@
+The qr-code component can be used to get an input from the user as a qr-code.
+
+```javascript
+const [value, setValue] = React.useState('');
+
+<QRCode value={value} onChange={setValue} />
+```
+
+The attributes will be passed to the input component.
+
+```javascript
+const [value, setValue] = React.useState('');
+
+<QRCode icon="fa-key" type="password" placeholder="Password" value={value} onChange={setValue} />
+```

src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/index.js

@@ -0,0 +1,6 @@
+// @flow
+import QRCode from './QRCode';
+import type {QRCodeProps} from './types';
+
+export default QRCode;
+export type {QRCodeProps};

src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/qrcode.scss

@@ -0,0 +1,10 @@
+@import '../../containers/Application/colors.scss';
+
+.qrcode {
+    background: white;
+    height: auto;
+    margin-top: 20px;
+    max-width: 100%;
+    padding: 16px;
+    width: auto;
+}

src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/tests/QRCode.test.js

@@ -0,0 +1,19 @@
+// @flow
+import React from 'react';
+import {render} from 'enzyme';
+import QRCode from '../QRCode';
+
+jest.mock('../../../utils/Translator', () => ({
+    translate: jest.fn((key) => key),
+}));
+
+test('QRCode should render', () => {
+    const onChange = jest.fn();
+    expect(render(<QRCode
+        disabled={false}
+        onBlur={jest.fn()}
+        onChange={onChange}
+        valid={false}
+        value="My value"
+    />)).toMatchSnapshot();
+});