salute-developers · neretin-trike · Sep 26, 2024 · Sep 18, 2024 · Sep 18, 2024 · Sep 18, 2024
diff --git a/core/core-components/src/components/Button/Button.styles.ts b/core/core-components/src/components/Button/Button.styles.ts
@@ -8,6 +8,7 @@ import { getWidthSize, getRoundnessMatrix, Pin } from './utils';
 
 export interface Style {
     root?: ViewStyle;
+    container?: ViewStyle;
     wrapper?: ViewStyle;
     loader?: ViewStyle;
     text?: TextStyle;
@@ -18,6 +19,7 @@ export const getStyle = (
     disabledOpacity?: number,
     viewStyle?: ButtonConfig['variations']['view'][string],
     sizeStyle?: ButtonConfig['variations']['size'][string],
+    pressed?: boolean,
     stretching?: Stretching,
     pin?: Pin,
     isLoading?: boolean,
@@ -26,6 +28,7 @@ export const getStyle = (
     if (!viewStyle || !sizeStyle || !pin || !theme) {
         return {
             root: {},
+            container: {},
             wrapper: {},
             loader: {},
             text: {},
@@ -37,19 +40,22 @@ export const getStyle = (
     const fontFace = getFontFace(sizeStyle.fontFamilyRef, sizeStyle.fontStyle, sizeStyle.fontWeight, theme);
 
     return StyleSheet.create({
-        root: (({ pressed }: { pressed: boolean }) => ({
+        root: {
             opacity: disabledOpacity,
+            ...externalStyle?.root,
+        },
+        container: {
             alignItems: 'center',
             justifyContent: 'center',
-            height: sizeStyle.height,
-            backgroundColor: pressed ? viewStyle.backgroundColorActive : viewStyle.backgroundColor,
             borderRadius: sizeStyle.radius,
             paddingLeft: sizeStyle.padding,
             paddingRight: sizeStyle.padding,
+            backgroundColor: pressed ? viewStyle.backgroundColorActive : viewStyle.backgroundColor,
+            height: sizeStyle.height,
             ...widthSize,
             ...buttonBorderRadius,
-            ...externalStyle?.root,
-        })) as ViewStyle,
+            ...externalStyle?.container,
+        },
         wrapper: {
             width: '100%',
             gap: sizeStyle.contentGap,

diff --git a/core/core-components/src/components/Button/Button.tsx b/core/core-components/src/components/Button/Button.tsx
@@ -1,9 +1,10 @@
-import { Pressable, Text, View } from 'react-native';
-import { useMemo } from 'react';
+import { NativeSyntheticEvent, Platform, TargetedEvent, Text, View } from 'react-native';
+import { useMemo, useState } from 'react';
 
 import { spinnerComponent } from '../Spinner';
 import { Theme, withTheme } from '../ThemeProvider';
 import { PropsType } from '../../types';
+import { FocusableWrapper } from '../FocusableWrapper/FocusableWrapper';
 
 import { ButtonConfig, ButtonProps } from './Button.types';
 import { getStyle } from './Button.styles';
@@ -12,6 +13,7 @@ const Spinner = spinnerComponent();
 
 export const buttonCore = <T extends ButtonConfig>(config?: T, theme?: Theme) => (
     props: ButtonProps & PropsType<T['variations']>,
+    externalRef: React.ForwardedRef<View>,
 ) => {
     const {
         view = '',
@@ -25,40 +27,109 @@ export const buttonCore = <T extends ButtonConfig>(config?: T, theme?: Theme) =>
         isLoading,
         loader,
         disabled,
-        // focused, TODO: Придумать общую реализацию фокусной рамки,
         style: externalStyle,
+        onBlur,
+        onFocus,
+        //
+        focusable,
+        hasTVPreferredFocus,
+        nextFocusDown,
+        nextFocusForward,
+        nextFocusLeft,
+        nextFocusRight,
+        nextFocusUp,
         ...rest
     } = props;
+
+    const [focused, setFocused] = useState(false);
+    const [pressed, setPressed] = useState(false);
+
     const txt = typeof children === 'string' ? children : text;
 
     const viewStyle = config?.variations.view[view];
     const sizeStyle = config?.variations.size[size];
     const disabledOpacity = disabled ? config?.variations.disabled.true.disabledOpacity : 1;
 
     const style = useMemo(
-        () => getStyle(theme, disabledOpacity, viewStyle, sizeStyle, stretching, pin, isLoading, externalStyle),
-        [view, size, disabled, stretching, pin, theme?.mode],
+        () =>
+            getStyle(theme, disabledOpacity, viewStyle, sizeStyle, pressed, stretching, pin, isLoading, externalStyle),
+        [view, size, pressed, disabled, stretching, pin, theme?.mode],
     );
 
+    const navigationProps = {
+        focusable,
+        hasTVPreferredFocus,
+        nextFocusDown,
+        nextFocusForward,
+        nextFocusLeft,
+        nextFocusRight,
+        nextFocusUp,
+    };
+
+    const onWrapperFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {
+        if (onFocus) {
+            onFocus(event);
+        }
+
+        setFocused(true);
+    };
+
+    const onWrapperBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {
+        if (onBlur) {
+            onBlur(event);
+        }
+
+        setFocused(false);
+    };
+
+    const onPressIn = () => {
+        setPressed(true);
+    };
+
+    const onPressOut = () => {
+        setPressed(false);
+    };
+
     return (
-        <Pressable style={style.root} disabled={disabled} {...rest}>
-            <View style={style.wrapper}>
-                {contentLeft}
-                {txt ? <Text style={style.text}>{txt}</Text> : children}
-                {contentRight}
-            </View>
-            {isLoading && (
-                <View style={style.loader}>
-                    {loader || (
-                        <Spinner
-                            color={viewStyle?.color}
-                            height={sizeStyle?.spinnerSize}
-                            width={sizeStyle?.spinnerSize}
-                        />
-                    )}
+        <FocusableWrapper
+            style={{
+                root: style.root,
+                focus: {
+                    borderColor: theme?.data.color[theme?.mode].textPrimary,
+                    borderRadius: sizeStyle?.radius,
+                    borderWidth: 2,
+                },
+            }}
+            hasFocus={Platform.isTV}
+            focused={focused}
+            disabled={disabled}
+            ref={externalRef}
+            onFocus={onWrapperFocus}
+            onBlur={onWrapperBlur}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            {...navigationProps}
+            {...rest}
+        >
+            <View style={style.container}>
+                <View style={style.wrapper}>
+                    {contentLeft}
+                    {txt ? <Text style={style.text}>{txt}</Text> : children}
+                    {contentRight}
                 </View>
-            )}
-        </Pressable>
+                {isLoading && (
+                    <View style={style.loader}>
+                        {loader || (
+                            <Spinner
+                                color={viewStyle?.color}
+                                height={sizeStyle?.spinnerSize}
+                                width={sizeStyle?.spinnerSize}
+                            />
+                        )}
+                    </View>
+                )}
+            </View>
+        </FocusableWrapper>
     );
 };
 

diff --git a/core/core-components/src/components/Button/Button.types.ts b/core/core-components/src/components/Button/Button.types.ts
@@ -1,12 +1,14 @@
 import { ButtonProps as ButtonPropsNative } from 'react-native';
 import { ReactNode } from 'react';
 
+import { Focusable } from '../FocusableWrapper';
+
 import { Pin } from './utils';
 import { Style } from './Button.styles';
 
 export type Stretching = 'fixed' | 'filled' | 'auto';
 
-interface CustomButtonProps extends Omit<ButtonPropsNative, 'title'> {
+interface CustomButtonProps extends Omit<ButtonPropsNative, 'onPress' | 'title'>, Focusable {
     /**
      * Объект для стилизации компонента
      */
@@ -44,10 +46,6 @@ interface CustomButtonProps extends Omit<ButtonPropsNative, 'title'> {
      * auto - кнопка растягивается в зависимости от контента
      */
     stretching?: Stretching;
-    /**
-     * Может ли фокусироваться кнопка
-     */
-    focused?: boolean;
     /**
      * Кнопка неактивна
      */
@@ -72,7 +70,6 @@ export interface ButtonConfig {
     defaults: {
         view: string;
         size: string;
-        focused: string;
     };
     variations: {
         view: {
@@ -105,10 +102,5 @@ export interface ButtonConfig {
                 disabledOpacity: number;
             };
         };
-        focused: {
-            [x: string]: {
-                focusColor: string;
-            };
-        };
     };
 }
diff --git a/core/core-components/src/components/Checkbox/Checkbox.tsx b/core/core-components/src/components/Checkbox/Checkbox.tsx
@@ -1,15 +1,17 @@
-import { Pressable, Text, View } from 'react-native';
-import { useMemo } from 'react';
+import { GestureResponderEvent, NativeSyntheticEvent, Platform, TargetedEvent, Text, View } from 'react-native';
+import { useMemo, useState } from 'react';
 
 import { Theme, withTheme } from '../ThemeProvider';
 import { PropsType } from '../../types';
+import { FocusableWrapper } from '../FocusableWrapper';
 
 import { CheckboxConfig, CheckboxProps } from './Checkbox.types';
 import { getStyle } from './Checkbox.styles';
 import { Done, Indeterminate } from './IconsSvg';
 
 export const checkboxCore = <T extends CheckboxConfig>(config?: T, theme?: Theme) => (
     props: CheckboxProps & PropsType<T['variations']>,
+    externalRef: React.ForwardedRef<View>,
 ) => {
     const {
         view = '',
@@ -22,10 +24,22 @@ export const checkboxCore = <T extends CheckboxConfig>(config?: T, theme?: Theme
         checked = false,
         style: externalStyle,
         onValueChange,
-        // focused, TODO: Придумать общую реализацию фокусной рамки
+        onPress,
+        onBlur,
+        onFocus,
+        //
+        focusable,
+        hasTVPreferredFocus,
+        nextFocusDown,
+        nextFocusForward,
+        nextFocusLeft,
+        nextFocusRight,
+        nextFocusUp,
         ...rest
     } = props;
 
+    const [focused, setFocused] = useState(false);
+
     const viewStyle = config?.variations.view[view];
     const sizeStyle = config?.variations.size[size];
     const disabledOpacity = disabled ? config?.variations.disabled.true.disabledOpacity : 1;
@@ -49,14 +63,62 @@ export const checkboxCore = <T extends CheckboxConfig>(config?: T, theme?: Theme
         [view, size, label, checked, indeterminate, description, disabled, theme?.mode],
     );
 
-    const onPress = () => {
+    const navigationProps = {
+        focusable,
+        hasTVPreferredFocus,
+        nextFocusDown,
+        nextFocusForward,
+        nextFocusLeft,
+        nextFocusRight,
+        nextFocusUp,
+    };
+
+    const onWrapperPress = (event: GestureResponderEvent) => {
         if (onValueChange) {
             onValueChange(checked);
         }
+
+        if (onPress) {
+            onPress(event);
+        }
+    };
+
+    const onWrapperFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {
+        if (onFocus) {
+            onFocus(event);
+        }
+
+        setFocused(true);
+    };
+
+    const onWrapperBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {
+        if (onBlur) {
+            onBlur(event);
+        }
+
+        setFocused(false);
     };
 
     return (
-        <Pressable style={style.root} disabled={disabled} onPress={onPress} {...rest}>
+        <FocusableWrapper
+            style={{
+                root: style.root,
+                focus: {
+                    borderColor: theme?.data.color[theme?.mode].textPrimary,
+                    borderRadius: sizeStyle?.triggerBorderRadius,
+                    borderWidth: 2,
+                },
+            }}
+            hasFocus={Platform.isTV}
+            focused={focused}
+            disabled={disabled}
+            ref={externalRef}
+            onFocus={onWrapperFocus}
+            onBlur={onWrapperBlur}
+            onPress={onWrapperPress}
+            {...navigationProps}
+            {...rest}
+        >
             <View style={style.wrapper}>
                 <View style={style.trigger}>
                     {indeterminate ? (
@@ -80,7 +142,7 @@ export const checkboxCore = <T extends CheckboxConfig>(config?: T, theme?: Theme
                     </View>
                 )}
             </View>
-        </Pressable>
+        </FocusableWrapper>
     );
 };