@dr.pogodin/react-utils 1.28.1 → 1.29.1

package/src/shared/components/PageLayout/index.tsx

@@ -5,17 +5,19 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import baseTheme from './base-theme.scss';
 
+const validThemeKeys = [
+  'container',
+  'leftSidePanel',
+  'mainPanel',
+  'rightSidePanel',
+  'sidePanel',
+] as const;
+
 type PropsT = {
   children?: ReactNode;
   leftSidePanelContent?: ReactNode;
   rightSidePanelContent?: ReactNode;
-  theme: Theme & {
-    container?: string;
-    mainPanel?: string;
-    sidePanel?: string;
-    leftSidePanel?: string;
-    rightSidePanel?: string;
-  };
+  theme: Theme<typeof validThemeKeys>;
 };
 
 /**
@@ -52,13 +54,12 @@ const PageLayout: React.FunctionComponent<PropsT> = ({
   </div>
 );
 
-const ThemedPageLayout = themed(PageLayout, 'PageLayout', [
-  'container',
-  'leftSidePanel',
-  'mainPanel',
-  'rightSidePanel',
-  'sidePanel',
-], baseTheme);
+const ThemedPageLayout = themed(
+  PageLayout,
+  'PageLayout',
+  validThemeKeys,
+  baseTheme,
+);
 
 PageLayout.propTypes = {
   children: PT.node,

package/src/shared/components/TextArea/index.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react';
+import PT from 'prop-types';
+
+import themed, { type Theme } from '@dr.pogodin/react-themes';
+
+import defaultTheme from './style.scss';
+
+const validThemeKeys = [
+  'container',
+  'hidden',
+  'textarea',
+] as const;
+
+type Props = {
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+  placeholder?: string;
+  theme: Theme<typeof validThemeKeys>;
+  value?: string;
+};
+
+const TextArea: React.FunctionComponent<Props> = ({
+  onChange,
+  onKeyDown,
+  placeholder,
+  theme,
+  value,
+}) => {
+  const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);
+  const [height, setHeight] = useState<number | undefined>();
+
+  const [localValue, setLocalValue] = useState(value || '');
+  if (value !== undefined && localValue !== value) setLocalValue(value);
+
+  // This resizes text area's height when its width is changed for any reason.
+  useEffect(() => {
+    const el = hiddenAreaRef.current;
+    if (!el) return undefined;
+
+    const cb = () => {
+      setHeight(el.scrollHeight);
+    };
+    const observer = new ResizeObserver(cb);
+    observer.observe(el);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // This resizes the text area when its content is modified.
+  useEffect(() => {
+    const el = hiddenAreaRef.current;
+    if (el) setHeight(el.scrollHeight);
+  }, [localValue]);
+
+  return (
+    <div className={theme.container}>
+      <textarea
+        // This text area is hidden underneath the primary one below,
+        // and it is used for text measurements, to implement auto-scaling
+        // of the primary textarea's height.
+        readOnly
+        ref={hiddenAreaRef}
+        className={`${theme.textarea} ${theme.hidden}`}
+        value={localValue}
+      />
+      <textarea
+        // When value is "undefined" the text area is not-managed, and we should
+        // manage it internally for the measurement / resizing functionality
+        // to work.
+        onChange={value === undefined ? ((e) => {
+          setLocalValue(e.target.value);
+        }) : onChange}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        style={{ height }}
+        className={theme.textarea}
+        value={localValue}
+      />
+    </div>
+  );
+};
+
+const ThemedTextArea = themed(
+  TextArea,
+  'TextArea',
+  validThemeKeys,
+  defaultTheme,
+);
+
+TextArea.propTypes = {
+  onChange: PT.func,
+  onKeyDown: PT.func,
+  placeholder: PT.string,
+  theme: ThemedTextArea.themeType.isRequired,
+  value: PT.string,
+};
+
+TextArea.defaultProps = {
+  onChange: undefined,
+  onKeyDown: undefined,
+  placeholder: '',
+  value: undefined,
+};
+
+export default ThemedTextArea;

package/src/shared/components/TextArea/style.scss

@@ -0,0 +1,37 @@
+@import "styles/mixins";
+
+*,
+.context,
+.ad.hoc {
+  &.container {
+    margin: 0.1em;
+    position: relative;
+  }
+
+  &.textarea {
+    background: white;
+    border: 1px solid gray;
+    border-radius: 0.3em;
+    box-sizing: border-box;
+    font: inherit;
+    height: 0;
+    outline: none;
+    overflow: hidden;
+    padding: 0.3em 0.3em calc(0.3em + 1px);
+    resize: none;
+
+    &:focus {
+      border-color: blue;
+      box-shadow: 0 0 3px 1px lightblue;
+    }
+
+    &::placeholder {
+      color: gray;
+    }
+  }
+
+  &.hidden {
+    position: absolute;
+    z-index: -1;
+  }
+}

package/src/shared/components/Throbber/index.tsx

@@ -2,12 +2,14 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
+const validThemeKeys = [
+  'bouncing',
+  'circle',
+  'container',
+] as const;
+
 type PropsT = {
-  theme: Theme & {
-    bouncing?: string;
-    container?: string;
-    circle?: string;
-  };
+  theme: Theme<typeof validThemeKeys>;
 };
 
 /**
@@ -30,11 +32,7 @@ const Throbber: React.FunctionComponent<PropsT> = ({ theme }) => (
 const ThemedThrobber = themed(
   Throbber,
   'Throbber',
-  [
-    'bouncing',
-    'circle',
-    'container',
-  ],
+  validThemeKeys,
   defaultTheme,
 );
 

package/src/shared/components/WithTooltip/Tooltip.tsx

@@ -18,6 +18,8 @@ import { createPortal } from 'react-dom';
 
 import PT from 'prop-types';
 
+import type { Theme } from '@dr.pogodin/react-themes';
+
 /* Valid placements of the rendered tooltip. They will be overriden when
  * necessary to fit the tooltip within the viewport. */
 export enum PLACEMENTS {
@@ -52,12 +54,14 @@ type HeapT = {
   lastPlacement?: PLACEMENTS | undefined;
 };
 
-export interface TooltipThemeT {
-  appearance?: string;
-  arrow?: string;
-  content?: string;
-  container?: string;
-}
+export const validThemeKeys = [
+  'appearance',
+  'arrow',
+  'content',
+  'container',
+] as const;
+
+type TooltipThemeT = Theme<typeof validThemeKeys>;
 
 /**
  * Creates tooltip components.

package/src/shared/components/WithTooltip/index.tsx

@@ -10,17 +10,20 @@ import {
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
-import Tooltip, { PLACEMENTS, type TooltipThemeT } from './Tooltip';
+import Tooltip, {
+  PLACEMENTS,
+  validThemeKeys as validTooltipThemeKeys,
+} from './Tooltip';
 
 import defaultTheme from './default-theme.scss';
 
+const validThemeKeys = [...validTooltipThemeKeys, 'wrapper'] as const;
+
 type PropsT = {
   children?: ReactNode;
   placement?: PLACEMENTS;
   tip?: ReactNode;
-  theme: Theme & TooltipThemeT & {
-    wrapper?: string;
-  };
+  theme: Theme<typeof validThemeKeys>;
 };
 
 type TooltipRefT = {

package/src/shared/components/YouTubeVideo/index.tsx

@@ -9,10 +9,9 @@ import Throbber from 'components/Throbber';
 import baseTheme from './base.scss';
 import throbberTheme from './throbber.scss';
 
-type ComponentThemeT = Theme & {
-  container?: string;
-  video?: string;
-};
+const validThemeKeys = ['container', 'video'] as const;
+
+type ComponentThemeT = Theme<typeof validThemeKeys>;
 
 type PropsT = {
   autoplay?: boolean;
@@ -74,10 +73,7 @@ const YouTubeVideo: React.FunctionComponent<PropsT> = ({
 const ThemedYouTubeVideo = themed(
   YouTubeVideo,
   'YouTubeVideo',
-  [
-    'container',
-    'video',
-  ],
+  validThemeKeys,
   baseTheme,
 );
 

package/src/shared/components/index.ts

@@ -15,3 +15,5 @@ export { default as ScalableRect } from 'components/ScalableRect';
 export { default as Throbber } from 'components/Throbber';
 export { default as WithTooltip } from 'components/WithTooltip';
 export { default as YouTubeVideo } from 'components/YouTubeVideo';
+
+export { default as TextArea } from './TextArea';