@snack-uikit/fields 0.28.0 → 0.29.0

package/src/hooks/usePrefixButton.tsx

@@ -0,0 +1,74 @@
+import { ReactElement, useMemo, useRef } from 'react';
+
+import { ButtonProps, InactiveItem, Size } from '@snack-uikit/input-private';
+
+import { ButtonField, ButtonFieldList, ButtonFieldProps } from '../helperComponents';
+import { Button } from '../types';
+
+export function usePrefixButton({
+  button,
+  prefixIcon,
+  size,
+  disabled,
+  readonly,
+  onFocus,
+  onBlur,
+}: {
+  button?: Button;
+  prefixIcon?: ReactElement;
+  size: Size;
+  disabled?: boolean;
+  readonly?: boolean;
+} & Pick<ButtonFieldProps, 'onFocus' | 'onBlur'>): ButtonProps {
+  const buttonListRef = useRef<HTMLButtonElement>(null);
+
+  const prefixIconProps: InactiveItem = useMemo(
+    () => ({
+      id: 'prefixIcon',
+      active: false,
+      show: Boolean(prefixIcon && !button),
+      render: () => <>{prefixIcon}</>,
+    }),
+    [button, prefixIcon],
+  );
+
+  const prefixButtonProps: InactiveItem = useMemo(
+    () => ({
+      id: 'prefixButton',
+      active: false,
+      show: Boolean(button && button.variant === 'before'),
+      render: renderProps => {
+        const buttonProps: ButtonFieldProps = {
+          ...renderProps,
+          variant: 'before',
+          size,
+          content: button?.content,
+          disabled: disabled || readonly,
+          onFocus,
+          onBlur,
+        };
+
+        if (button?.items) {
+          return (
+            <ButtonFieldList
+              {...buttonProps}
+              ref={buttonListRef}
+              onClick={() => {
+                setTimeout(() => buttonListRef.current?.focus(), 0);
+              }}
+              items={button.items}
+              selection={button.selection}
+              open={button.open}
+              onOpenChange={button.onOpenChange}
+            />
+          );
+        }
+
+        return <ButtonField {...buttonProps} />;
+      },
+    }),
+    [button, size, disabled, readonly, onFocus, onBlur],
+  );
+
+  return button ? prefixButtonProps : prefixIconProps;
+}

package/src/types.ts

@@ -1,9 +1,24 @@
+import { ReactNode } from 'react';
+
+import { DroplistProps, SelectionSingleState } from '@snack-uikit/list';
 import { ValueOf } from '@snack-uikit/utils';
 
-import { CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
+import { BUTTON_VARIANT, CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
 
 export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
 
 export type ContainerVariant = ValueOf<typeof CONTAINER_VARIANT>;
 
+export type ButtonVariant = ValueOf<typeof BUTTON_VARIANT>;
+
 export type AsyncValueRequest = Promise<{ success: boolean; value?: string }>;
+
+export type NativeDroplistProps = Pick<DroplistProps, 'items' | 'open' | 'onOpenChange'> & {
+  selection?: Omit<SelectionSingleState, 'mode'>;
+};
+
+export type Button = Omit<NativeDroplistProps, 'items'> & {
+  variant: ButtonVariant;
+  content?: ReactNode;
+  items?: DroplistProps['items'];
+};