From 017cdf060fd0dd3f60406c66819d69dfac2f4e8b Mon Sep 17 00:00:00 2001
From: Stephen Ramthun <stephen.ramthun@bekk.no>
Date: Wed, 31 Jul 2019 09:10:43 +0200
Subject: [PATCH] Dynamic textarea (#50)

* Add dynamically sized textarea

* Fix layout of uenigheter
---
 .../pages/Oppsummering/Innrapportering.jsx    |  3 +-
 .../pages/Oppsummering/Innrapportering.less   | 31 +++++++++-
 .../pages/Oppsummering/Oppsummering.jsx       |  2 +-
 .../{Oppsummering.css => Oppsummering.less}   | 19 +-----
 src/components/widgets/Bolk/ListeItemBolk.css |  3 +-
 src/components/widgets/DynamicTextarea.jsx    | 58 +++++++++++++++++++
 src/components/widgets/Uenigboks.css          | 19 +++---
 src/components/widgets/Uenigboks.jsx          | 19 +++---
 src/hooks/useKeyboard.js                      |  8 +--
 9 files changed, 108 insertions(+), 54 deletions(-)
 rename src/components/pages/Oppsummering/{Oppsummering.css => Oppsummering.less} (51%)
 create mode 100644 src/components/widgets/DynamicTextarea.jsx

diff --git a/src/components/pages/Oppsummering/Innrapportering.jsx b/src/components/pages/Oppsummering/Innrapportering.jsx
index 1c172247e..2693a794a 100644
--- a/src/components/pages/Oppsummering/Innrapportering.jsx
+++ b/src/components/pages/Oppsummering/Innrapportering.jsx
@@ -45,7 +45,8 @@ const Innrapportering = withBehandlingContext(({ behandling }) => {
                 <>
                     {innrapportering.uenigheter.map((uenighet, i) => (
                         <Normaltekst key={`uenighet-${i}`}>
-                            {uenighet.label} - <span>{uenighet.value}</span>
+                            <span>{uenighet.label}:</span>
+                            <span>{uenighet.value}</span>
                         </Normaltekst>
                     ))}
                     {innrapportering.hasSendt ? (
diff --git a/src/components/pages/Oppsummering/Innrapportering.less b/src/components/pages/Oppsummering/Innrapportering.less
index 64a3349c9..001b37cb7 100644
--- a/src/components/pages/Oppsummering/Innrapportering.less
+++ b/src/components/pages/Oppsummering/Innrapportering.less
@@ -1,11 +1,38 @@
-@sendtColor: #38a161;
-
 .Innrapportering.panel {
+  display: flex;
+  flex-direction: column;
+
+  > .typo-normal {
+    display: flex;
+    align-items: flex-start;
+
+    > * {
+      margin-left: 0.5rem;
+    }
+  }
+
+  > .typo-normal:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+
+  .typo-normal span:first-child {
+    @width: 15rem;
+    min-width: @width;
+    max-width: @width;
+  }
+
+  .typo-normal span:last-child {
+    font-style: italic;
+    min-width: 15rem;
+  }
+
   .knapp {
     width: max-content;
     display: flex;
+    margin-top: 1rem;
 
     &.sendt {
+      @sendtColor: #38a161;
       border-color: @sendtColor;
       color: @sendtColor;
     }
diff --git a/src/components/pages/Oppsummering/Oppsummering.jsx b/src/components/pages/Oppsummering/Oppsummering.jsx
index 75aa03036..63659c728 100644
--- a/src/components/pages/Oppsummering/Oppsummering.jsx
+++ b/src/components/pages/Oppsummering/Oppsummering.jsx
@@ -8,7 +8,7 @@ import ListeItem from '../../widgets/ListeItem';
 import ListeSeparator from '../../widgets/ListeSeparator';
 import Navigasjonsknapper from '../../widgets/Navigasjonsknapper';
 import Innrapportering from './Innrapportering';
-import './Oppsummering.css';
+import './Oppsummering.less';
 
 const Oppsummering = withBehandlingContext(({ behandling }) => (
     <div className="Oppsummering">
diff --git a/src/components/pages/Oppsummering/Oppsummering.css b/src/components/pages/Oppsummering/Oppsummering.less
similarity index 51%
rename from src/components/pages/Oppsummering/Oppsummering.css
rename to src/components/pages/Oppsummering/Oppsummering.less
index 3e7f690eb..fa8f94ad5 100644
--- a/src/components/pages/Oppsummering/Oppsummering.css
+++ b/src/components/pages/Oppsummering/Oppsummering.less
@@ -20,21 +20,4 @@
 
 .Oppsummering + .Navigasjonsknapper {
     margin-left: 1rem;
-}
-
-.Oppsummering__right-col .panel {
-    display: flex;
-    flex-direction: column;
-}
-
-.Oppsummering__right-col .panel > .typo-normal:not(:last-child) {
-    margin-bottom: 0.5rem;
-}
-
-.Oppsummering__right-col .panel .typo-normal span {
-    font-style: italic;
-}
-
-.Oppsummering__right-col .panel .knapp {
-    margin-top: 1rem;
-}
+}
\ No newline at end of file
diff --git a/src/components/widgets/Bolk/ListeItemBolk.css b/src/components/widgets/Bolk/ListeItemBolk.css
index c74a83b8b..f1a5013c6 100644
--- a/src/components/widgets/Bolk/ListeItemBolk.css
+++ b/src/components/widgets/Bolk/ListeItemBolk.css
@@ -1,13 +1,14 @@
 .ListeItemBolk {
     display: flex;
     flex-wrap: nowrap;
-    align-items: center;
+    align-items: flex-start;
 }
 
 .ListeItemBolk .ListeItem {
     flex: 1;
     display: flex;
     align-items: center;
+    margin-top: 0.85rem;
     max-width: 18rem;
     min-width: 18rem;
 }
diff --git a/src/components/widgets/DynamicTextarea.jsx b/src/components/widgets/DynamicTextarea.jsx
new file mode 100644
index 000000000..b0c7cdf82
--- /dev/null
+++ b/src/components/widgets/DynamicTextarea.jsx
@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+const lineHeight = 22;
+
+const DynamicTextarea = ({
+    name,
+    value,
+    placeholder,
+    maxCharacters,
+    disabled,
+    forwardedRef,
+    ...rest
+}) => {
+    const [rows, setRows] = useState(1);
+
+    useEffect(() => {
+        if (forwardedRef && forwardedRef.current) {
+            setRows(Math.floor(forwardedRef.current.scrollHeight / lineHeight));
+        }
+    }, [value, forwardedRef]);
+
+    return (
+        <textarea
+            name={name}
+            value={value}
+            placeholder={placeholder}
+            maxLength={maxCharacters}
+            disabled={disabled}
+            rows={rows}
+            ref={forwardedRef}
+            style={{
+                marginLeft: '0.5rem',
+                resize: disabled ? 'none' : ''
+            }}
+            {...rest}
+        />
+    );
+};
+
+DynamicTextarea.propTypes = {
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    placeholder: PropTypes.string,
+    maxCharacters: PropTypes.number,
+    disabled: PropTypes.bool,
+    forwardedRef: PropTypes.any
+};
+
+DynamicTextarea.defaultProps = {
+    placeholder: '',
+    maxCharacters: 2000,
+    disabled: false
+};
+
+export default React.forwardRef((props, ref) => (
+    <DynamicTextarea {...props} forwardedRef={ref} />
+));
diff --git a/src/components/widgets/Uenigboks.css b/src/components/widgets/Uenigboks.css
index 77f5cd558..fc8144358 100644
--- a/src/components/widgets/Uenigboks.css
+++ b/src/components/widgets/Uenigboks.css
@@ -1,21 +1,16 @@
 .Uenigboks {
     display: flex;
+    flex: 1;
     align-content: stretch;
-    align-items: center;
+    align-items: flex-start;
     padding: 0.3rem;
     width: 66%;
 }
 
-.Uenigboks__input {
+.Uenigboks .Uenigboks__input {
     flex: 1;
 }
 
-.Uenigboks__input input {
-    font-size: 1rem;
-    background-color: #fff;
-    color: #000;
-}
-
 .Uenigboks .skjemaelement {
     margin: 0;
 }
@@ -24,10 +19,10 @@
     margin: 0;
 }
 
-.Uenigboks .skjemaelement:last-child {
-    margin-left: 1rem;
+.Uenigboks .skjemaelement:first-child {
+    margin-top: 0.5rem;
 }
 
-.Uenigboks__input label {
-    display: none;
+.Uenigboks .skjemaelement:last-child {
+    margin-left: 1rem;
 }
diff --git a/src/components/widgets/Uenigboks.jsx b/src/components/widgets/Uenigboks.jsx
index 843858d99..a988169b0 100644
--- a/src/components/widgets/Uenigboks.jsx
+++ b/src/components/widgets/Uenigboks.jsx
@@ -1,15 +1,10 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Checkbox, Input } from 'nav-frontend-skjema';
+import DynamicTextarea from './DynamicTextarea';
+import { Checkbox } from 'nav-frontend-skjema';
 import { InnrapporteringContext } from '../../context/InnrapporteringContext';
-import './Uenigboks.css';
 import { useFocusRef } from '../../hooks/useFocusRef';
-
-// Override proptypes til Input for å kunne gi en ref som parameter til inputRef
-Input.propTypes = {
-    ...Input.propTypes,
-    inputRef: PropTypes.any
-};
+import './Uenigboks.css';
 
 const Uenigboks = ({ label }) => {
     const id = label + decodeURIComponent(window.location.pathname);
@@ -55,14 +50,14 @@ const Uenigboks = ({ label }) => {
                 checked={checked}
                 onChange={onCheckboxChange}
             />
-            <Input
-                className="Uenigboks__input"
-                label="Årsak"
+            <DynamicTextarea
+                name="Årsak"
+                className="Uenigboks__input skjemaelement skjemaelement__input"
                 placeholder="Skriv inn årsak til uenighet"
-                inputRef={ref}
                 disabled={!checked}
                 onChange={onInputChange}
                 value={inputValue}
+                ref={ref}
             />
         </div>
     );
diff --git a/src/hooks/useKeyboard.js b/src/hooks/useKeyboard.js
index 8fa23e2e0..0492a8486 100644
--- a/src/hooks/useKeyboard.js
+++ b/src/hooks/useKeyboard.js
@@ -9,13 +9,7 @@ export const Keys = {
 };
 
 const shouldDisableKeyboard = () => {
-    return (
-        document.activeElement.tagName.toLowerCase() === 'input' &&
-        document.activeElement.attributes.getNamedItem('type') &&
-        document.activeElement.attributes
-            .getNamedItem('type')
-            .value.toLowerCase() === 'text'
-    );
+    return document.activeElement.tagName.toLowerCase() === 'textarea';
 };
 
 export const useKeyboard = actionMappings => {