Refactor/vite (#209)

* refactor(vite): add dependencies * refactor(vite): necessary code migrations * refactor(vite): convert file to tsx * refactor(vite): config * refactor(vite): doctype casing
2026-08-15 04:13:47 +00:00 · 2022-09-28 21:13:20 +02:00
parent d86afee477
commit 562cb769c5
30 changed files with 1572 additions and 7013 deletions
@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import { IconButton } from '@chakra-ui/button';
+import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+import style from './MessageControl.module.scss';
+
+interface InputRowProps {
+  label: string;
+  placeholder: string;
+  text: string;
+  visible: boolean;
+  actionHandler: (action: string, payload: object) => void;
+  changeHandler: (newValue: string) => void;
+}
+
+export default function InputRow(props: InputRowProps) {
+  const { label, placeholder, text, visible, actionHandler, changeHandler } = props;
+  const [inputText, setInputText] = useState<string>(text || '');
+
+  const handleInputChange = (newValue: string) => {
+    setInputText(newValue);
+    changeHandler(newValue);
+  };
+
+  useEffect(() => {
+    if (text) {
+      setInputText(text);
+    }
+  }, [text]);
+
+
+  return (
+    <div className={`${visible ? style.inputRowActive : ''}`}>
+      <span className={style.label}>{label}</span>
+      <div className={style.inputItems}>
+        <Editable
+          onChange={(newValue) => handleInputChange(newValue)}
+          value={inputText}
+          placeholder={placeholder}
+          className={style.inline}
+          color={text === '' ? '#666' : 'inherit'}
+        >
+          <EditablePreview className={`${style.padleft} ${style.fullWidth}`} />
+          <EditableInput className={style.padleft} />
+        </Editable>
+        <Tooltip label={visible ? 'Make invisible' : 'Make visible'} openDelay={tooltipDelayMid}>
+          <IconButton
+            aria-label='Toggle visibility'
+            size='sm'
+            icon={<IoSunny size='18px' />}
+            colorScheme='blue'
+            variant={visible ? 'solid' : 'outline'}
+            onClick={() => actionHandler('update', { field: 'isPublic', value: !visible })}
+          />
+        </Tooltip>
+      </div>
+    </div>
+  );
+}