@hero-design/rn 8.77.1-alpha.10 → 8.78.0-alpha.1

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @hero-design/rn
 
-## 8.77.1-alpha.0
+## 8.78.0
 
-### Patch Changes
+### Minor Changes
 
-- trigger release
+- [#3480](https://github.com/Thinkei/hero-design/pull/3480) [`f27e980c7e5eec77a09a0646fad7a5c990b2ad0c`](https://github.com/Thinkei/hero-design/commit/f27e980c7e5eec77a09a0646fad7a5c990b2ad0c) Thanks [@phucdph](https://github.com/phucdph)! - [Search.OneLine] Support clearable input
 
 ## 8.77.0
 

package/es/index.js

@@ -9728,7 +9728,7 @@ var BottomSheet = function BottomSheet(_ref) {
     if (open && !visible) {
       setVisibility(open);
     }
-  }, [open]);
+  }, [open, visible]);
   // Animation
   useEffect(function () {
     var animation = Animated.timing(animatedValue.current, {
@@ -9746,7 +9746,7 @@ var BottomSheet = function BottomSheet(_ref) {
     return function () {
       return animation.stop();
     };
-  }, [open]);
+  }, [open, onDismiss, onAnimationEnd]);
   var interpolateY = animatedValue.current.interpolate({
     inputRange: [0, 1],
     outputRange: [height, 0]
@@ -36999,7 +36999,7 @@ var SearchTwoLine = function SearchTwoLine(props) {
   })));
 };
 
-var _excluded$2 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant"];
+var _excluded$2 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant", "clearable"];
 var getState = function getState(_ref) {
   var disabled = _ref.disabled,
     editable = _ref.editable,
@@ -37041,6 +37041,8 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     testID = props.testID,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'basic' : _props$variant,
+    _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? false : _props$clearable,
     nativeProps = _objectWithoutProperties(props, _excluded$2);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -37083,6 +37085,21 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     };
   }, [innerTextInput]);
+  var renderClearButton = function renderClearButton() {
+    return /*#__PURE__*/React__default.createElement(StyledAffixContainer, null, /*#__PURE__*/React__default.createElement(CompoundButton.Icon, {
+      onPress: function onPress() {
+        var _innerTextInput$curre6, _nativeProps$onChange;
+        (_innerTextInput$curre6 = innerTextInput.current) === null || _innerTextInput$curre6 === void 0 || _innerTextInput$curre6.clear();
+        (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 || _nativeProps$onChange.call(nativeProps, '');
+      },
+      intent: "text",
+      testID: "input-clear-button",
+      icon: "circle-cancel",
+      size: "small",
+      disabled: state === 'disabled' || state === 'readonly'
+    }));
+  };
+  var shouldShowClearButton = clearable && (state === 'filled' || isFocused) && !isEmptyValue;
   return /*#__PURE__*/React__default.createElement(StyledContainer, {
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID,
@@ -37120,7 +37137,7 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
     }
-  }), !!suffix && renderSuffix({
+  }), shouldShowClearButton ? renderClearButton() : !!suffix && renderSuffix({
     suffix: suffix
   })));
 });

package/lib/index.js

@@ -9755,7 +9755,7 @@ var BottomSheet = function BottomSheet(_ref) {
     if (open && !visible) {
       setVisibility(open);
     }
-  }, [open]);
+  }, [open, visible]);
   // Animation
   React.useEffect(function () {
     var animation = reactNative.Animated.timing(animatedValue.current, {
@@ -9773,7 +9773,7 @@ var BottomSheet = function BottomSheet(_ref) {
     return function () {
       return animation.stop();
     };
-  }, [open]);
+  }, [open, onDismiss, onAnimationEnd]);
   var interpolateY = animatedValue.current.interpolate({
     inputRange: [0, 1],
     outputRange: [height, 0]
@@ -37026,7 +37026,7 @@ var SearchTwoLine = function SearchTwoLine(props) {
   })));
 };
 
-var _excluded$2 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant"];
+var _excluded$2 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant", "clearable"];
 var getState = function getState(_ref) {
   var disabled = _ref.disabled,
     editable = _ref.editable,
@@ -37068,6 +37068,8 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
     testID = props.testID,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'basic' : _props$variant,
+    _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? false : _props$clearable,
     nativeProps = _objectWithoutProperties(props, _excluded$2);
   var _React$useState = React__namespace.default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -37110,6 +37112,21 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   }, [innerTextInput]);
+  var renderClearButton = function renderClearButton() {
+    return /*#__PURE__*/React__namespace.default.createElement(StyledAffixContainer, null, /*#__PURE__*/React__namespace.default.createElement(CompoundButton.Icon, {
+      onPress: function onPress() {
+        var _innerTextInput$curre6, _nativeProps$onChange;
+        (_innerTextInput$curre6 = innerTextInput.current) === null || _innerTextInput$curre6 === void 0 || _innerTextInput$curre6.clear();
+        (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 || _nativeProps$onChange.call(nativeProps, '');
+      },
+      intent: "text",
+      testID: "input-clear-button",
+      icon: "circle-cancel",
+      size: "small",
+      disabled: state === 'disabled' || state === 'readonly'
+    }));
+  };
+  var shouldShowClearButton = clearable && (state === 'filled' || isFocused) && !isEmptyValue;
   return /*#__PURE__*/React__namespace.default.createElement(StyledContainer, {
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID,
@@ -37147,7 +37164,7 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
     }
-  }), !!suffix && renderSuffix({
+  }), shouldShowClearButton ? renderClearButton() : !!suffix && renderSuffix({
     suffix: suffix
   })));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.77.1-alpha.10",
+  "version": "8.78.0-alpha.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,6 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

package/src/components/BottomSheet/index.tsx

@@ -127,7 +127,7 @@ const BottomSheet = ({
     if (open && !visible) {
       setVisibility(open);
     }
-  }, [open]);
+  }, [open, visible]);
 
   // Animation
   useEffect(() => {
@@ -147,7 +147,7 @@ const BottomSheet = ({
     });
 
     return () => animation.stop();
-  }, [open]);
+  }, [open, onDismiss, onAnimationEnd]);
 
   const interpolateY = animatedValue.current.interpolate({
     inputRange: [0, 1],

package/src/components/Search/SearchOneLine.tsx

@@ -8,12 +8,14 @@ import type {
 } from 'react-native';
 import {
   State,
+  StyledAffixContainer,
   StyledContainer,
   StyledInput,
   StyledInputContainer,
 } from './StyledSearch';
 import { IconName } from '../Icon';
 import { renderPrefix, renderSuffix } from './utils';
+import Button from '../Button';
 
 export type SearchOneLineHandles = Pick<
   RNTextInput,
@@ -71,6 +73,10 @@ interface SearchOneLineProps extends NativeTextInputProps {
    * @default 'basic'
    */
   variant?: 'basic' | 'reversed';
+  /**
+   * Clearable input.
+   */
+  clearable?: boolean;
 }
 
 export const getState = ({
@@ -121,6 +127,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
       disabled = false,
       testID,
       variant = 'basic',
+      clearable = false,
       ...nativeProps
     } = props;
 
@@ -155,6 +162,27 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
       [innerTextInput]
     );
 
+    const renderClearButton = () => {
+      return (
+        <StyledAffixContainer>
+          <Button.Icon
+            onPress={() => {
+              innerTextInput.current?.clear();
+              nativeProps.onChangeText?.('');
+            }}
+            intent="text"
+            testID="input-clear-button"
+            icon="circle-cancel"
+            size="small"
+            disabled={state === 'disabled' || state === 'readonly'}
+          />
+        </StyledAffixContainer>
+      );
+    };
+
+    const shouldShowClearButton =
+      clearable && (state === 'filled' || isFocused) && !isEmptyValue;
+
     return (
       <StyledContainer
         pointerEvents={
@@ -192,7 +220,9 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
               innerTextInput.current = rnTextInputRef;
             },
           })}
-          {!!suffix && renderSuffix({ suffix })}
+          {shouldShowClearButton
+            ? renderClearButton()
+            : !!suffix && renderSuffix({ suffix })}
         </StyledInputContainer>
       </StyledContainer>
     );

package/src/components/Search/__tests__/SearchOneLine.spec.tsx

@@ -54,6 +54,12 @@ describe('SearchOneLine', () => {
           'input-suffix'
         )
       ).toHaveLength(1);
+
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'input-clear-button'
+        )
+      ).toHaveLength(0);
     });
 
     it('renders reserved variant correctly', () => {
@@ -104,77 +110,130 @@ describe('SearchOneLine', () => {
         within(getByTestId('idle-search-input')).getByText('Suffix')
       ).toBeTruthy();
     });
+  });
 
-    describe('handler', () => {
-      it('onChangeText work correctly', () => {
-        const onChangeText = jest.fn();
-        const { getByTestId } = renderWithTheme(
-          <SearchOneLine
-            prefix="search-outlined"
-            testID="idle-search-input"
-            onChangeText={onChangeText}
-          />
-        );
-        const input = within(getByTestId('idle-search-input')).getByTestId(
-          'text-input'
-        );
-        fireEvent.changeText(input, 'Park Chae Young');
-        expect(onChangeText).toHaveBeenCalledWith('Park Chae Young');
-      });
+  describe('handler', () => {
+    it('onChangeText work correctly', () => {
+      const onChangeText = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          testID="idle-search-input"
+          onChangeText={onChangeText}
+        />
+      );
+      const input = within(getByTestId('idle-search-input')).getByTestId(
+        'text-input'
+      );
+      fireEvent.changeText(input, 'Park Chae Young');
+      expect(onChangeText).toHaveBeenCalledWith('Park Chae Young');
+    });
 
-      it('onFocus work correctly', () => {
-        const onFocus = jest.fn();
-        const { getByTestId } = renderWithTheme(
-          <SearchOneLine
-            prefix="search-outlined"
-            testID="idle-search-input"
-            onFocus={onFocus}
-          />
-        );
-        const input = within(getByTestId('idle-search-input')).getByTestId(
-          'text-input'
-        );
-        fireEvent(input, 'focus');
-        expect(onFocus).toHaveBeenCalled();
-      });
+    it('onFocus work correctly', () => {
+      const onFocus = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          testID="idle-search-input"
+          onFocus={onFocus}
+        />
+      );
+      const input = within(getByTestId('idle-search-input')).getByTestId(
+        'text-input'
+      );
+      fireEvent(input, 'focus');
+      expect(onFocus).toHaveBeenCalled();
+    });
 
-      it('onBlur work correctly', () => {
-        const onBlur = jest.fn();
-        const { getByTestId } = renderWithTheme(
-          <SearchOneLine
-            prefix="search-outlined"
-            testID="idle-search-input"
-            onBlur={onBlur}
-          />
-        );
-        const input = within(getByTestId('idle-search-input')).getByTestId(
-          'text-input'
-        );
-        fireEvent(input, 'blur');
-        expect(onBlur).toHaveBeenCalled();
-      });
+    it('onBlur work correctly', () => {
+      const onBlur = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          testID="idle-search-input"
+          onBlur={onBlur}
+        />
+      );
+      const input = within(getByTestId('idle-search-input')).getByTestId(
+        'text-input'
+      );
+      fireEvent(input, 'blur');
+      expect(onBlur).toHaveBeenCalled();
+    });
+
+    it('clearable input work correctly', () => {
+      const onChangeText = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          testID="idle-search-input"
+          onChangeText={onChangeText}
+          clearable
+          value="On the ground"
+        />
+      );
+      const clearButton = within(getByTestId('idle-search-input')).getByTestId(
+        'input-clear-button'
+      );
+      fireEvent.press(clearButton);
+      expect(onChangeText).toHaveBeenCalledWith('');
     });
   });
+});
 
-  describe('filled', () => {
-    it('renders correctly', () => {
-      const { toJSON, queryAllByTestId, queryAllByDisplayValue } =
-        renderWithTheme(
-          <SearchOneLine
-            prefix="search-outlined"
-            suffix="adjustment"
-            testID="idle-search-text-input"
-            placeholder="Search"
-            value="Jennie Kim"
-          />
-        );
+describe('filled', () => {
+  it('renders correctly', () => {
+    const { toJSON, queryAllByTestId, queryAllByDisplayValue } =
+      renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          suffix="adjustment"
+          testID="idle-search-text-input"
+          placeholder="Search"
+          value="Jennie Kim"
+        />
+      );
 
-      expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByDisplayValue('Jennie Kim')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
-    });
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByDisplayValue('Jennie Kim')).toHaveLength(1);
+    expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+    expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+    expect(queryAllByTestId('text-input')).toHaveLength(1);
+  });
+
+  it('renders clearable input correctly', () => {
+    const { getByTestId, toJSON } = renderWithTheme(
+      <SearchOneLine
+        prefix="search-outlined"
+        clearable
+        testID="idle-search-text-input"
+        placeholder="Search"
+        value="Eyes wide open"
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('idle-search-text-input')).toBeTruthy();
+    expect(
+      within(getByTestId('idle-search-text-input')).queryAllByTestId(
+        'text-input'
+      )
+    ).toHaveLength(1);
+    expect(
+      within(getByTestId('idle-search-text-input')).queryAllByTestId(
+        'input-prefix'
+      )
+    ).toHaveLength(1);
+    expect(
+      within(getByTestId('idle-search-text-input')).queryAllByTestId(
+        'input-suffix'
+      )
+    ).toHaveLength(0);
+    expect(
+      within(getByTestId('idle-search-text-input')).queryAllByTestId(
+        'input-clear-button'
+      )
+    ).toHaveLength(1);
   });
 
   describe('readonly', () => {