@hero-design/rn 8.75.0 → 8.76.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.75.0",
+  "version": "8.76.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/BottomSheet/index.tsx

@@ -145,6 +145,8 @@ const BottomSheet = ({
 
       onAnimationEnd?.();
     });
+
+    return () => animation.stop();
   }, [open]);
 
   const interpolateY = animatedValue.current.interpolate({

package/src/components/Toolbar/StyledToolbar.tsx

@@ -1,9 +1,15 @@
 import styled from '@emotion/native';
-import { TouchableOpacity, View } from 'react-native';
+import { TextInput, TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import Typography from '../Typography';
 import { BodyProps } from '../Typography/Body';
 
+export type ToolbarMessageState =
+  | 'default'
+  | 'filled'
+  | 'disabled'
+  | 'readonly';
+
 const ToolbarWrapper = styled(View)<ViewProps>(({ theme }) => ({
   position: 'absolute',
   bottom: 0,
@@ -65,6 +71,48 @@ const StyledLabel = styled(Typography.Body)<{
       : theme.__hd__.typography.colors[intent],
 }));
 
+const ToolbarMessageWrapper = styled(View)(({ theme }) => ({
+  flex: 1,
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: theme.__hd__.toolbar.sizes.messageWrapperHeight,
+  paddingVertical: theme.__hd__.toolbar.space.messageWrapperPaddingVertical,
+  paddingHorizontal: theme.__hd__.toolbar.space.messageWrapperPaddingHorizontal,
+}));
+
+export const StyledInputContainer = styled(View)(({ theme }) => {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    backgroundColor: theme.__hd__.toolbar.colors.inputContainerBackground,
+    borderRadius: theme.__hd__.toolbar.radii.messageContainer,
+    height: theme.__hd__.toolbar.sizes.messageInputHeight,
+    paddingHorizontal: theme.__hd__.toolbar.space.messageInputPaddingHorizontal,
+    paddingVertical: theme.__hd__.toolbar.space.messageInputPaddingVertical,
+  };
+});
+
+export const StyledInput = styled(TextInput)(({ theme }) => ({
+  textAlignVertical: 'center',
+  fontSize: theme.__hd__.toolbar.fontSizes.text,
+  alignSelf: 'stretch',
+  flexGrow: 1,
+  flexShrink: 1,
+  fontFamily: theme.__hd__.toolbar.fonts.text,
+}));
+
+export const StyledPrefix = styled(View)(({ theme }) => ({
+  marginRight: theme.__hd__.toolbar.space.affixInnerMargin,
+  maxHeight: '100%',
+}));
+
+export const StyledSuffix = styled(View)(({ theme }) => ({
+  marginLeft: theme.__hd__.toolbar.space.affixInnerMargin,
+  maxHeight: '100%',
+}));
+
 export {
   ToolbarWrapper,
   ToolbarGroupWrapper,
@@ -72,4 +120,5 @@ export {
   IconButtonWrapper,
   IconButtonLabel,
   StyledLabel,
+  ToolbarMessageWrapper,
 };

package/src/components/Toolbar/ToolbarMessage.tsx

@@ -0,0 +1,169 @@
+import React, { forwardRef } from 'react';
+
+import { TextInput as RNTextInput } from 'react-native';
+import type {
+  TextInputProps as NativeTextInputProps,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+
+import {
+  StyledInput,
+  StyledInputContainer,
+  StyledPrefix,
+  StyledSuffix,
+  ToolbarMessageState,
+  ToolbarMessageWrapper,
+} from './StyledToolbar';
+
+export type ToolbarMessageHandles = Pick<
+  RNTextInput,
+  'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
+>;
+
+export interface ToolbarMessageProps extends NativeTextInputProps {
+  /**
+   * Element to render on the left side of the input, before the user's cursor.
+   */
+  prefix?: React.ReactNode;
+  /**
+   * Element to render on the right side of the input.
+   */
+  suffix?: React.ReactNode;
+  /**
+   * Additional wrapper style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Input text style.
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Accessibility label for the input (Android).
+   */
+  accessibilityLabelledBy?: string;
+  /**
+   *  Placeholder text to display.
+   * */
+  placeholder?: string;
+  /**
+   * Whether the input is editable.
+   * */
+  editable?: boolean;
+  /**
+   * Whether the input is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The max length of the input.
+   * If the max length is set, the input will display the current length and the max length.
+   * */
+  maxLength?: number;
+  /**
+   * Component ref.
+   */
+  ref?: React.Ref<ToolbarMessageHandles>;
+}
+
+export const getState = ({
+  disabled,
+  editable,
+  isEmptyValue,
+}: {
+  disabled?: boolean;
+  editable?: boolean;
+  isEmptyValue?: boolean;
+}): ToolbarMessageState => {
+  switch (true) {
+    case disabled:
+      return 'disabled';
+    case !editable:
+      return 'readonly';
+    case !isEmptyValue:
+      return 'filled';
+    default:
+      return 'default';
+  }
+};
+
+const ToolbarMessage = forwardRef<ToolbarMessageHandles, ToolbarMessageProps>(
+  (props, forwardedRef) => {
+    const {
+      prefix,
+      suffix,
+      style,
+      testID,
+      value,
+      defaultValue,
+      disabled,
+      editable = true,
+      textStyle,
+      ...nativeProps
+    } = props;
+
+    const innerTextInput = React.useRef<RNTextInput | undefined | null>();
+
+    const displayText = (value !== undefined ? value : defaultValue) ?? '';
+    const isEmptyValue = displayText.length === 0;
+
+    React.useImperativeHandle(
+      forwardedRef,
+      () => ({
+        isFocused: () => innerTextInput.current?.isFocused() || false,
+        getNativeTextInputRef: () => innerTextInput.current,
+        setNativeProps: (args: NativeTextInputProps) =>
+          innerTextInput.current?.setNativeProps(args),
+        focus: () => innerTextInput.current?.focus(),
+        blur: () => innerTextInput.current?.blur(),
+        clear: () => innerTextInput.current?.clear(),
+      }),
+      [innerTextInput.current]
+    );
+
+    const state = getState({
+      disabled,
+      editable,
+      isEmptyValue,
+    });
+
+    return (
+      <ToolbarMessageWrapper testID={testID} style={style}>
+        {prefix && (
+          <StyledPrefix testID={testID && `${testID}-prefix`}>
+            {prefix}
+          </StyledPrefix>
+        )}
+        <StyledInputContainer
+          pointerEvents={
+            state === 'disabled' || state === 'readonly' ? 'none' : 'auto'
+          }
+          testID={testID && `${testID}-input-container`}
+        >
+          <StyledInput
+            {...nativeProps}
+            value={value}
+            defaultValue={defaultValue}
+            editable={editable}
+            testID={testID && `${testID}-input`}
+            ref={(rnTextInputRef) => {
+              innerTextInput.current = rnTextInputRef;
+            }}
+            style={textStyle}
+          />
+        </StyledInputContainer>
+        {suffix && (
+          <StyledSuffix testID={testID && `${testID}-suffix`}>
+            {suffix}
+          </StyledSuffix>
+        )}
+      </ToolbarMessageWrapper>
+    );
+  }
+);
+
+export default ToolbarMessage;

package/src/components/Toolbar/__tests__/ToolbarMessage.spec.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { fireEvent, within } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ToolbarMessage, { getState } from '../ToolbarMessage';
+
+describe('getState', () => {
+  it.each`
+    disabled | editable | isEmptyValue | expected
+    ${false} | ${true}  | ${true}      | ${'default'}
+    ${false} | ${true}  | ${false}     | ${'filled'}
+    ${false} | ${false} | ${true}      | ${'readonly'}
+    ${true}  | ${false} | ${true}      | ${'disabled'}
+  `(
+    'should return the correct state when disabled $disabled, editable $editable, isEmptyValue $isEmptyValue',
+    ({ disabled, editable, isEmptyValue, expected }) => {
+      expect(
+        getState({
+          disabled,
+          editable,
+          isEmptyValue,
+        })
+      ).toBe(expected);
+    }
+  );
+});
+
+describe('ToolbarMessage', () => {
+  describe('idle', () => {
+    it('renders correctly', () => {
+      const { getByTestId, toJSON } = renderWithTheme(
+        <ToolbarMessage
+          prefix="prefix"
+          suffix="suffix"
+          testID="toolbar-message"
+          placeholder="Message"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByTestId('toolbar-message')).toBeTruthy();
+      expect(
+        within(getByTestId('toolbar-message')).queryAllByTestId(
+          'toolbar-message-input'
+        )
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('toolbar-message')).queryAllByTestId(
+          'toolbar-message-prefix'
+        )
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('toolbar-message')).queryAllByTestId(
+          'toolbar-message-suffix'
+        )
+      ).toHaveLength(1);
+    });
+
+    describe('handler', () => {
+      it('onChangeText work correctly', () => {
+        const onChangeText = jest.fn();
+        const { getByTestId } = renderWithTheme(
+          <ToolbarMessage
+            testID="toolbar-message"
+            onChangeText={onChangeText}
+          />
+        );
+        const input = within(getByTestId('toolbar-message')).getByTestId(
+          'toolbar-message-input'
+        );
+        fireEvent.changeText(input, 'number one girl');
+        expect(onChangeText).toHaveBeenCalledWith('number one girl');
+      });
+
+      it('onFocus work correctly', () => {
+        const onFocus = jest.fn();
+        const { getByTestId } = renderWithTheme(
+          <ToolbarMessage testID="toolbar-message" onFocus={onFocus} />
+        );
+        const input = within(getByTestId('toolbar-message')).getByTestId(
+          'toolbar-message-input'
+        );
+        fireEvent(input, 'focus');
+        expect(onFocus).toHaveBeenCalled();
+      });
+
+      it('onBlur work correctly', () => {
+        const onBlur = jest.fn();
+        const { getByTestId } = renderWithTheme(
+          <ToolbarMessage testID="toolbar-message" onBlur={onBlur} />
+        );
+        const input = within(getByTestId('toolbar-message')).getByTestId(
+          'toolbar-message-input'
+        );
+        fireEvent(input, 'blur');
+        expect(onBlur).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('filled', () => {
+    it('renders correctly', () => {
+      const { toJSON, queryAllByTestId, queryAllByDisplayValue } =
+        renderWithTheme(
+          <ToolbarMessage
+            testID="toolbar-message"
+            placeholder="Message"
+            value="Jennie Kim"
+          />
+        );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByDisplayValue('Jennie Kim')).toHaveLength(1);
+      expect(queryAllByTestId('toolbar-message-input')).toHaveLength(1);
+    });
+  });
+
+  describe('readonly', () => {
+    it('renders correctly', () => {
+      const onChangeText = jest.fn();
+      const { toJSON, queryAllByTestId, queryAllByDisplayValue, getByTestId } =
+        renderWithTheme(
+          <ToolbarMessage
+            testID="toolbar-message"
+            placeholder="Message"
+            value="Lalisa"
+            onChangeText={onChangeText}
+          />
+        );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByDisplayValue('Lalisa')).toHaveLength(1);
+      expect(queryAllByTestId('toolbar-message-input')).toHaveLength(1);
+      expect(getByTestId('toolbar-message-input')).not.toHaveProp(
+        'editable',
+        'false'
+      );
+    });
+  });
+
+  describe('disabled', () => {
+    it('renders correctly', () => {
+      const onChangeText = jest.fn();
+      const { toJSON, queryAllByTestId, getByTestId } = renderWithTheme(
+        <ToolbarMessage
+          testID="toolbar-message"
+          placeholder="Message"
+          value="Jisoo"
+          disabled
+          onChangeText={onChangeText}
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByTestId('toolbar-message-input')).toHaveLength(1);
+      expect(getByTestId('toolbar-message-input-container')).toHaveProp(
+        'pointerEvents',
+        'none'
+      );
+    });
+  });
+});