Clean and re-organize post table refactoring (#1000)

* Clean and re-organize post table refactoring * Fix tests
2023-07-30 18:26:32 -07:00
parent 86a2d67efd
commit ade5e52e55
336 changed files with 638 additions and 2757 deletions
@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
+import TextareaAutosize from 'react-textarea-autosize';
+import styled from '@emotion/styled';
+
+import { RoundedIconButton } from '@/ui/button/components/RoundedIconButton';
+import { IconArrowRight } from '@/ui/icon/index';
+
+const MAX_ROWS = 5;
+
+type OwnProps = {
+  onValidate?: (text: string) => void;
+  minRows?: number;
+  placeholder?: string;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+
+  width: 100%;
+`;
+
+const StyledTextArea = styled(TextareaAutosize)`
+  background: ${({ theme }) => theme.background.tertiary};
+  border: none;
+  border-radius: 5px;
+  color: ${({ theme }) => theme.font.color.primary};
+  font-family: inherit;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  line-height: 16px;
+  overflow: auto;
+  padding: 8px;
+  resize: none;
+  width: 100%;
+
+  &:focus {
+    border: none;
+    outline: none;
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+    font-weight: ${({ theme }) => theme.font.weight.regular};
+  }
+`;
+
+// TODO: this messes with the layout, fix it
+const StyledBottomRightRoundedIconButton = styled.div`
+  height: 0;
+  position: relative;
+  right: 26px;
+  top: calc(100% - 26.5px);
+  width: 0px;
+`;
+
+export function AutosizeTextInput({
+  placeholder,
+  onValidate,
+  minRows = 1,
+}: OwnProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const [text, setText] = useState('');
+
+  const isSendButtonDisabled = !text;
+
+  useHotkeys(
+    ['shift+enter', 'enter'],
+    (event: KeyboardEvent, handler: HotkeysEvent) => {
+      if (handler.shift || !isFocused) {
+        return;
+      } else {
+        event.preventDefault();
+
+        onValidate?.(text);
+
+        setText('');
+      }
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [onValidate, text, setText, isFocused],
+  );
+
+  useHotkeys(
+    'esc',
+    (event: KeyboardEvent) => {
+      if (!isFocused) {
+        return;
+      }
+
+      event.preventDefault();
+
+      setText('');
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [onValidate, setText, isFocused],
+  );
+
+  function handleInputChange(event: React.FormEvent<HTMLTextAreaElement>) {
+    const newText = event.currentTarget.value;
+
+    setText(newText);
+  }
+
+  function handleOnClickSendButton() {
+    onValidate?.(text);
+
+    setText('');
+  }
+
+  const computedMinRows = minRows > MAX_ROWS ? MAX_ROWS : minRows;
+
+  return (
+    <>
+      <StyledContainer>
+        <StyledTextArea
+          placeholder={placeholder || 'Write a comment'}
+          maxRows={MAX_ROWS}
+          minRows={computedMinRows}
+          onChange={handleInputChange}
+          value={text}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        />
+        <StyledBottomRightRoundedIconButton>
+          <RoundedIconButton
+            onClick={handleOnClickSendButton}
+            icon={<IconArrowRight size={15} />}
+            disabled={isSendButtonDisabled}
+          />
+        </StyledBottomRightRoundedIconButton>
+      </StyledContainer>
+    </>
+  );
+}
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { AutosizeTextInput } from '../AutosizeTextInput';
+
+const meta: Meta<typeof AutosizeTextInput> = {
+  title: 'UI/Input/AutosizeTextInput',
+  component: AutosizeTextInput,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof AutosizeTextInput>;
+
+export const Default: Story = {};