@snack-uikit/fields 0.8.3-preview-85c5f47b.0

package/src/helperComponents/TextArea/TextArea.tsx

@@ -0,0 +1,102 @@
+import cn from 'classnames';
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  RefAttributes,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type TextAreaProps = RefAttributes<HTMLTextAreaElement> &
+  WithSupportProps<{
+    /** HTML-аттрибут name */
+    name?: string;
+    /** HTML-аттрибут value */
+    value: string;
+    /** Колбек смены значения */
+    onChange?(value: string, e: ChangeEvent<HTMLTextAreaElement>): void;
+    /** HTML-аттрибут id */
+    id?: string;
+    className?: string;
+    /** Плейсхолдер */
+    placeholder?: string;
+    /** Является ли поле доступным только на чтение */
+    readonly?: boolean;
+    /** Является ли поле деактивированным */
+    disabled?: boolean;
+    /** Включен ли автокомплит */
+    autoComplete?: boolean;
+    /** Максимальное кол-во символов */
+    maxLength?: number;
+    /** Колбек получения фокуса */
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    /** Колбек потери фокуса */
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
+    /** HTML-аттрибут tab-index */
+    tabIndex?: number;
+  }>;
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      name,
+      value = '',
+      onChange,
+      placeholder,
+      id,
+      className,
+      disabled = false,
+      readonly = false,
+      autoComplete = false,
+      maxLength,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      tabIndex,
+      ...rest
+    },
+    ref,
+  ) => {
+    // fix of height on the initial render
+    // see https://github.com/Andarist/react-textarea-autosize/issues/337#issuecomment-1024980737
+    const [, setIsRerendered] = useState(false);
+    useLayoutEffect(() => setIsRerendered(true), []);
+
+    const onChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = e => onChange?.(e.target.value, e);
+    const stopPropagation: MouseEventHandler<HTMLTextAreaElement> = e => e.stopPropagation();
+
+    return (
+      <TextareaAutosize
+        id={id}
+        name={name}
+        value={value}
+        ref={ref}
+        className={cn(className, styles.textarea)}
+        autoComplete={autoComplete ? 'on' : 'off'}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readonly}
+        maxLength={maxLength}
+        onChange={onChangeHandler}
+        onClick={stopPropagation}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        tabIndex={tabIndex}
+        minRows={3}
+        {...extractSupportProps(rest)}
+      />
+    );
+  },
+);

package/src/helperComponents/TextArea/index.ts

@@ -0,0 +1 @@
+export * from './TextArea';

package/src/helperComponents/TextArea/styles.module.scss

@@ -0,0 +1,35 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.textarea {
+  resize: none;
+
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+
+  color: simple-var($sys-neutral-text-main);
+
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  outline: 0;
+
+  &::placeholder {
+    color: simple-var($sys-neutral-text-disabled);
+  }
+
+  &::-webkit-scrollbar {
+    width: 0;
+    max-width: 0;
+  }
+
+  &:read-only {
+    color: simple-var($sys-neutral-text-support);
+  }
+
+  &[disabled] {
+    color: simple-var($sys-neutral-text-disabled);
+  }
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,4 @@
+export * from './ButtonCopyValue';
+export * from './ButtonHideValue';
+export * from './FieldContainerPrivate';
+export * from './TextArea';

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useCopyButton';
+export * from './useHideButton';

package/src/hooks/useCopyButton.tsx

@@ -0,0 +1,24 @@
+import { RefObject, useMemo } from 'react';
+
+import { BUTTON_SIZE_MAP, ButtonProps, Size } from '@snack-uikit/input-private';
+
+import { ButtonCopyValue } from '../helperComponents';
+
+type UseCopyButtonProps = {
+  copyButtonRef: RefObject<HTMLButtonElement>;
+  showCopyButton: boolean;
+  valueToCopy: string;
+  size: Size;
+};
+
+export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy }: UseCopyButtonProps): ButtonProps {
+  return useMemo(
+    () => ({
+      id: 'copy',
+      ref: copyButtonRef,
+      show: showCopyButton,
+      render: props => <ButtonCopyValue {...props} size={BUTTON_SIZE_MAP[size]} valueToCopy={valueToCopy} />,
+    }),
+    [copyButtonRef, showCopyButton, size, valueToCopy],
+  );
+}

package/src/hooks/useHideButton.tsx

@@ -0,0 +1,50 @@
+import { MouseEventHandler, RefObject, useMemo } from 'react';
+
+import { BUTTON_SIZE_MAP, ButtonProps, Size } from '@snack-uikit/input-private';
+import { useEventHandler } from '@snack-uikit/utils';
+
+import { ButtonHideValue } from '../helperComponents';
+
+type UseHideButtonProps = {
+  hideButtonRef: RefObject<HTMLButtonElement>;
+  showHideButton: boolean;
+  toggleHidden: MouseEventHandler<HTMLButtonElement>;
+  size: Size;
+  disabled: boolean;
+  hidden: boolean;
+};
+
+export function useHideButton({
+  hideButtonRef,
+  showHideButton,
+  size,
+  toggleHidden,
+  hidden,
+  disabled,
+}: UseHideButtonProps): ButtonProps {
+  const toggleHiddenEventHandler = useEventHandler(toggleHidden);
+
+  return useMemo(
+    () => ({
+      id: 'hide',
+      ref: hideButtonRef,
+      show: showHideButton,
+      render: props => {
+        const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
+          props.onClick(event);
+          toggleHiddenEventHandler(event);
+        };
+        return (
+          <ButtonHideValue
+            {...props}
+            size={BUTTON_SIZE_MAP[size]}
+            onClick={handleClick}
+            hidden={hidden}
+            disabled={disabled}
+          />
+        );
+      },
+    }),
+    [disabled, hidden, hideButtonRef, showHideButton, size, toggleHiddenEventHandler],
+  );
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/styles.module.scss

@@ -0,0 +1,55 @@
+@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields";
+
+$sizes: 's', 'm';
+$icon-sizes: (
+  's': $icon-xs,
+  'm': $icon-s
+);
+
+@mixin button-styles {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin: 0;
+  padding: 0;
+
+  color: $sys-neutral-text-light;
+
+  background-color: transparent;
+  border: none;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($fields, 'buttons', $size);
+
+      svg {
+        width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: $sys-neutral-text-support;
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    color: $sys-neutral-text-support;
+    outline-color: $sys-available-complementary;
+    outline-offset: $spacing-state-focus-offset;
+  }
+
+  &:active {
+    color: $sys-neutral-text-main;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    color: $sys-neutral-text-disabled;
+  }
+}