maintain (admin): admin page upgrade

client/components/animation.js

@@ -7,24 +7,20 @@ import React, { useState, useEffect } from "react";
  * to realise it would be easier to write this simpler wrapper than migrate things over
  */
 export function CSSTransition({ transitionName = "animate", children = null, transitionAppearTimeout = 300 }) {
-    const [child, setChildren] = useState(React.cloneElement(children, {
-        className: `${children.props.className} ${transitionName}-appear`
-    }));
+    const [className, setClassName] = useState(`${transitionName} ${transitionName}-appear`);
 
     useEffect(() => {
-        setChildren(React.cloneElement(child, {
-            className: `${children.props.className} ${transitionName}-appear ${transitionName}-appear-active`
-        }))
-        const timeout = setTimeout(() => {
-            setChildren(React.cloneElement(child, {
-                className: `${children.props.className}`
-            }))
-        }, transitionAppearTimeout);
+        setClassName(`${transitionName} ${transitionName}-appear ${transitionName}-appear-active`)
 
-        return () => {
-            clearTimeout(timeout);
-        };
+        const timeout = setTimeout(() => {
+            setClassName(`${transitionName}`)
+        }, transitionAppearTimeout);
+        return () => clearTimeout(timeout);
     }, []);
 
-    return child;
+    return (
+        <div className={className}>
+            { children }
+        </div>
+    )
 }

client/components/index.js

@@ -22,3 +22,4 @@ export { MapShot } from "./mapshot";
 export { LoggedInOnly, ErrorPage, LoadingPage } from "./decorator";
 export { FormBuilder } from "./formbuilder";
 export { UploadQueue } from "./upload_queue";
+export { CSSTransition } from "./animation";

client/components/textarea.js

@@ -1,9 +1,57 @@
-import React from "react";
+import React, { useRef, useState, useLayoutEffect } from "react";
 import PropTypes from "prop-types";
 
 import "./textarea.scss";
 
-export class Textarea extends React.Component {
+export function Textarea({ ...props }) {
+    const $el = useRef();
+    const [className, setClassName] = useState(
+        "component_textarea"
+            + (/Firefox/.test(navigator.userAgent) ? " firefox" : "")
+            + (props.value && props.value.length > 0 ? " hasText" : "")
+    );
+
+    useLayoutEffect(() => {
+        if($el.current && $el.current.value.length > 0 && className.indexOf("hasText") === -1){
+            setClassName(`${className} hasText`)
+        }
+    }, []);
+
+    const disabledEnter = (e) => {
+        if(e.key === "Enter" && e.shiftKey === false){
+            e.preventDefault();
+            const $form = getForm($el.current.ref);
+            if($form){
+                $form.dispatchEvent(new Event("submit", { cancelable: true }));
+            }
+        }
+
+        function getForm($el){
+            if(!$el.parentElement) return $el;
+            if($el.parentElement.nodeName == "FORM"){
+                return $el.parentElement;
+            }
+            return getForm($el.parentElement);
+        }
+    };
+    const inputProps = (p) => {
+        return Object.keys(p).reduce((acc, key) => {
+            if(key === "disabledEnter") return acc;
+            acc[key] = p[key];
+            return acc;
+        }, {});
+    };
+
+    return (
+        <textarea
+            onKeyPress={disabledEnter}
+            {...inputProps(props)}
+            className={className}
+            ref={$el}>
+        </textarea>
+    )
+}
+export class Textarea2 extends React.Component {
     constructor(props){
         super(props);
     }