@hero-design/rn-work-uikit 1.5.0 → 1.6.1

package/src/components/TextInput/Group/__tests__/index.spec.tsx

@@ -1,179 +0,0 @@
-import React from 'react';
-import { within } from '@testing-library/react-native';
-import TextInputGroup from '..';
-import renderWithTheme from '../../../../../testUtils/renderWithTheme';
-import TextInput from '../..';
-import { theme } from '../../../..';
-
-describe('TextInputGroup', () => {
-  it('should render', () => {
-    const { getByText, getByTestId, toJSON } = renderWithTheme(
-      <TextInputGroup>
-        <TextInput label="Text Input 1" value="Text Input 1" required />
-        <TextInput
-          label="Text Input 2"
-          value="Text Input 2"
-          error="This is an error"
-          testID="text-input-2"
-        />
-        <TextInput label="Text Input 3" value="Text Input 3" required />
-      </TextInputGroup>
-    );
-
-    expect(toJSON()).toMatchSnapshot('xxx');
-
-    expect(getByText('Text Input 1')).toBeVisible();
-    expect(getByText('Text Input 2', { exact: false })).toBeVisible();
-    expect(
-      within(getByTestId('text-input-2')).getByText('(Optional)', {
-        exact: false,
-      })
-    ).toBeVisible();
-    expect(getByText('This is an error')).toBeVisible();
-    expect(getByText('Text Input 3')).toBeVisible();
-  });
-
-  it('renders with correct border styling', () => {
-    const { getByTestId } = renderWithTheme(
-      <TextInputGroup>
-        <TextInput value="Text Input 1" testID="text-input-1" />
-        <TextInput value="Text Input 2" testID="text-input-2" />
-        <TextInput value="Text Input 3" testID="text-input-3" />
-      </TextInputGroup>
-    );
-
-    expect(
-      within(getByTestId('text-input-1'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-        }),
-      ])
-    );
-
-    expect(
-      within(getByTestId('text-input-2'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderRadius: 0,
-        }),
-      ])
-    );
-
-    expect(
-      within(getByTestId('text-input-3'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-        }),
-      ])
-    );
-  });
-
-  it('merges with the children styles in correct order', () => {
-    const { getByTestId } = renderWithTheme(
-      <TextInputGroup>
-        <TextInput
-          value="Text Input 1"
-          testID="text-input-1"
-          textStyle={{
-            borderColor: '#ffffff',
-            borderWidth: 1,
-          }}
-        />
-        <TextInput
-          value="Text Input 2"
-          testID="text-input-2"
-          style={{ width: 300 }}
-        />
-      </TextInputGroup>
-    );
-
-    // Merging text styles
-    expect(
-      within(getByTestId('text-input-1'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          // Passed style
-          borderWidth: 1,
-          borderColor: '#ffffff',
-          // Injected style
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-        }),
-      ])
-    );
-
-    // Merging container styles
-    expect(getByTestId('text-input-2').props.style.flat()).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          // Passed style
-          width: 300,
-          // Injected style
-          marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
-        }),
-      ])
-    );
-
-    expect(
-      within(getByTestId('text-input-2'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          // Injected style
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-        }),
-      ])
-    );
-  });
-
-  it('does not alter the children styles if there is only one child', () => {
-    const { getByTestId } = renderWithTheme(
-      <TextInputGroup>
-        <TextInput
-          value="Text Input 1"
-          testID="text-input-1"
-          style={{
-            marginTop: theme.space.medium,
-          }}
-        />
-      </TextInputGroup>
-    );
-
-    // Container style is not injected
-    expect(getByTestId('text-input-1').props.style.flat()).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          // Passed style instead of injected style
-          marginTop: theme.space.medium,
-        }),
-      ])
-    );
-
-    // Border style is not injected
-    const internalBorderStyle =
-      getByTestId('text-input-border').props.style.flat();
-    const borderKeys = Object.keys(internalBorderStyle).filter((key) =>
-      key.startsWith('border')
-    );
-    expect(borderKeys).toHaveLength(0);
-  });
-});

package/src/components/TextInput/Group/__tests__/utils.spec.ts

@@ -1,73 +0,0 @@
-import { theme } from '../../../..';
-import { generateBorderStyle, generateMarginStyle } from '../utils';
-
-describe('utils', () => {
-  describe('generateBorderStyle', () => {
-    it('should generate the correct border style for the first child', () => {
-      const borderStyle = generateBorderStyle({ index: 0, length: 3 });
-      expect(borderStyle).toEqual({
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-      });
-    });
-
-    it('should generate the correct border style for the last child', () => {
-      const borderStyle = generateBorderStyle({ index: 2, length: 3 });
-      expect(borderStyle).toEqual({
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 0,
-      });
-    });
-
-    it('should generate the correct border style for the middle child', () => {
-      const borderStyle = generateBorderStyle({ index: 1, length: 3 });
-      expect(borderStyle).toEqual({
-        borderRadius: 0,
-      });
-    });
-  });
-
-  describe('generateMarginStyle', () => {
-    it('should generate the correct margin style for the first child', () => {
-      const marginStyle = generateMarginStyle({
-        index: 0,
-        length: 3,
-        theme,
-      });
-      expect(marginStyle).toEqual({
-        marginTop: 0,
-      });
-    });
-
-    it('should generate the correct margin style for the last child', () => {
-      const marginStyle = generateMarginStyle({
-        index: 2,
-        length: 3,
-        theme,
-      });
-      expect(marginStyle).toEqual({
-        marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
-      });
-    });
-
-    it('should generate the correct margin style for the middle child', () => {
-      const marginStyle = generateMarginStyle({
-        index: 1,
-        length: 3,
-        theme,
-      });
-      expect(marginStyle).toEqual({
-        marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
-      });
-    });
-
-    it('should generate the correct margin style for a single child', () => {
-      const marginStyle = generateMarginStyle({
-        index: 0,
-        length: 1,
-        theme,
-      });
-      expect(marginStyle).toEqual({});
-    });
-  });
-});

package/src/components/TextInput/Group/index.tsx

@@ -1,107 +0,0 @@
-import React, { ReactNode, useMemo } from 'react';
-import { StyleProp, StyleSheet, ViewProps, ViewStyle } from 'react-native';
-import { Box, useTheme } from '@hero-design/rn';
-import { generateBorderStyle, generateMarginStyle } from './utils';
-import { useDeprecation } from '../../../utils/hooks';
-
-export interface TextInputGroupProps extends ViewProps {
-  /**
-   * The children of the TextInputGroup. In order for the group styling to work,
-   * they must be either HD TextInput components or enhanced TextInput components
-   * that supports TextInput interface.
-   *
-   * Example:
-   * const EnhancedTextInput = (props: TextInputProps) => {
-   *   return <TextInput {...props} />;
-   * };
-   *
-   * <TextInput.Group>
-   *   <TextInput ... />
-   *   <EnhancedTextInput ... />
-   * </TextInput.Group>
-   */
-  children: ReactNode;
-  /**
-   * The style of the TextInputGroup.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * The testID of the TextInputGroup.
-   */
-  testID?: string;
-}
-
-const TextInputGroup = ({
-  children,
-  style,
-  testID,
-  ...props
-}: TextInputGroupProps) => {
-  useDeprecation(
-    'TextInput.Group is deprecated. Please use FormGroup instead.',
-    true
-  );
-  const theme = useTheme();
-  const childrenArray = React.Children.toArray(children).filter(
-    React.isValidElement
-  );
-
-  // If there are multiple children, inject styles to group them together.
-  const groupedChildren = useMemo(
-    () =>
-      childrenArray.map((child, index) => {
-        const rawChildStyle = (child as React.ReactElement).props.style;
-        const rawChildTextStyle = (child as React.ReactElement).props.textStyle;
-
-        // Handle array styles by flattening them first
-        const childStyle = StyleSheet.flatten(rawChildStyle);
-        const childTextStyle = StyleSheet.flatten(rawChildTextStyle);
-
-        /**
-         * Merge the child style with the group injected style.
-         * Order of precedence:
-         * 1. Child style.
-         * 2. Group injected style.
-         */
-        const mergedStyle = {
-          ...childStyle,
-          ...generateMarginStyle({
-            index,
-            length: childrenArray.length,
-            theme,
-          }),
-        };
-
-        /**
-         * Merge the child text style with the group text style.
-         * Order of precedence:
-         * 1. Group text style through textStyle prop.
-         * 2. Child text style.
-         * 3. Group injected border style.
-         */
-        const mergedTextStyle = {
-          ...childTextStyle,
-          ...generateBorderStyle({
-            index,
-            length: childrenArray.length,
-          }),
-        };
-
-        return React.cloneElement(child as React.ReactElement, {
-          style: mergedStyle,
-          textStyle: mergedTextStyle,
-          // Internal text input prop to allow for different styling
-          groupStyleEnabled: true,
-        });
-      }),
-    [childrenArray, theme]
-  );
-
-  return (
-    <Box style={style} testID={testID} {...props}>
-      {groupedChildren}
-    </Box>
-  );
-};
-
-export default TextInputGroup;

package/src/components/TextInput/Group/utils.ts

@@ -1,67 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '@hero-design/rn';
-
-/**
- * Generates the border style for the TextInputGroup.
- * @param index - The index of the TextInput.
- * @param length - The length of the TextInputGroup.
- * @returns The border style for the TextInputGroup.
- */
-const generateBorderStyle = ({
-  index,
-  length,
-}: {
-  index: number;
-  length: number;
-}): CSSProperties => {
-  const isFirst = index === 0;
-  const isLast = index === length - 1;
-
-  if (length === 1) {
-    return {};
-  }
-
-  if (isFirst) {
-    return {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-    };
-  }
-
-  if (isLast) {
-    return {
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0,
-    };
-  }
-
-  return {
-    borderRadius: 0,
-  };
-};
-
-const generateMarginStyle = ({
-  index,
-  length,
-  theme,
-}: {
-  index: number;
-  length: number;
-  theme: Theme;
-}) => {
-  if (length === 1) {
-    return {};
-  }
-
-  if (index === 0) {
-    return {
-      marginTop: 0,
-    };
-  }
-
-  return {
-    marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
-  };
-};
-
-export { generateBorderStyle, generateMarginStyle };