@hero-design/rn-work-uikit 1.3.0 → 1.3.1

package/src/components/Select/__tests__/index.spec.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Select from '..';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import { noop } from '../../../utils/functions';
+
+const options = [
+  { text: 'Monday', value: 'mon' },
+  { text: 'Tuesday', value: 'tue' },
+  { text: 'Wednesday', value: 'wed' },
+  { text: 'Thursday', value: 'thu' },
+  { text: 'Friday', value: 'fri' },
+  { text: 'Saturday', value: 'sat' },
+  { text: 'Sunday', value: 'sun', disabled: true },
+];
+
+describe('Select', () => {
+  it('renders correctly (snapshot)', () => {
+    const { toJSON } = renderWithTheme(
+      <Select
+        value="mon"
+        onConfirm={noop}
+        options={options}
+        label="Select Label"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('MultiSelect', () => {
+  it('renders correctly (snapshot)', () => {
+    const { toJSON } = renderWithTheme(
+      <Select.Multi
+        value={['tue', 'wed']}
+        onConfirm={noop}
+        options={options}
+        label="Select Label"
+        footerLabel="Confirm"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -91,7 +91,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
               {
                 "alignItems": "center",
                 "backgroundColor": "transparent",
-                "flex": 1,
                 "flexDirection": "row",
               },
             ],
@@ -344,7 +343,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
               {
                 "alignItems": "center",
                 "backgroundColor": "transparent",
-                "flex": 1,
                 "flexDirection": "row",
               },
             ],
@@ -706,7 +704,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
               {
                 "alignItems": "center",
                 "backgroundColor": "transparent",
-                "flex": 1,
                 "flexDirection": "row",
               },
             ],

package/src/components/TextInput/StyledTextInput.tsx

@@ -42,7 +42,6 @@ const StyledFloatingLabelContainer = styled(Animated.View)<{
   themeVariant: Variant;
 }>(({ themeVariant }) => ({
   flexDirection: 'row',
-  flex: 1,
   alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
   backgroundColor: 'transparent',
 }));

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -75,7 +75,6 @@ exports[`TextInput when user applies custom styling should respect user-provided
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -432,7 +431,6 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
             {
               "alignItems": "flex-start",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -712,7 +710,6 @@ exports[`TextInput when user encounters a disabled field should display content
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -991,7 +988,6 @@ exports[`TextInput when user encounters a read-only field should display content
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -1354,7 +1350,6 @@ exports[`TextInput when user has entered text should show the input content and
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -1717,7 +1712,6 @@ exports[`TextInput when user interacts with placeholder text starting from empty
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -2037,7 +2031,6 @@ exports[`TextInput when user needs programmatic control should provide ref metho
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -2316,7 +2309,6 @@ exports[`TextInput when user provides default values starting with pre-filled co
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -2672,7 +2664,6 @@ exports[`TextInput when user provides default values when both default and contr
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -3029,7 +3020,6 @@ exports[`TextInput when user sees a loading state should show loading indicator
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -3411,7 +3401,6 @@ exports[`TextInput when user sees a required field should indicate the field is
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -3744,7 +3733,6 @@ exports[`TextInput when user sees a textarea with character count should display
             {
               "alignItems": "flex-start",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -4144,7 +4132,6 @@ exports[`TextInput when user sees a textarea with character count should hide ch
             {
               "alignItems": "flex-start",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -4511,7 +4498,6 @@ exports[`TextInput when user sees an empty input field should display label and
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -4873,7 +4859,6 @@ exports[`TextInput when user sees an error state should display error message to
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -5251,7 +5236,6 @@ exports[`TextInput when user sees helper text should display guidance text to as
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -5571,7 +5555,6 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],

package/src/components/TimePicker/__tests__/index.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import TimePicker from '..';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+describe('TimePicker', () => {
+  it('renders TimePickerIOS when OS is iOS', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <TimePicker
+        label="Start time"
+        value={new Date('December 17, 1995 03:24:00')}
+        confirmLabel="Confirm"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('timePickerInputIOS')).toBeDefined();
+  });
+
+  it('renders TimePickerAndroid when OS is android', () => {
+    Platform.OS = 'android';
+    const { getByTestId } = renderWithTheme(
+      <TimePicker
+        label="Start time"
+        value={new Date('December 17, 1995 03:24:00')}
+        confirmLabel="Confirm"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('timePickerInputAndroid')).toBeDefined();
+  });
+});

package/src/components/TimePicker/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {
+  TimePicker as InternalTimePicker,
+  TimePickerProps,
+} from '@hero-design/rn';
+import TextInput from '../TextInput';
+
+const TimePicker = (props: TimePickerProps) => {
+  return <InternalTimePicker {...props} TextInputComponent={TextInput} />;
+};
+
+export default TimePicker;

package/src/index.ts

@@ -1,6 +1,8 @@
 // Re-export everything from @hero-design/rn except theme exports we want to override
 import TextInput from './components/TextInput';
 import Select from './components/Select';
+import DatePicker from './components/DatePicker';
+import TimePicker from './components/TimePicker';
 
 export * from '@hero-design/rn';
 
@@ -15,4 +17,4 @@ export {
 } from './theme';
 
 export { default as theme } from './theme';
-export { TextInput, Select };
+export { TextInput, Select, DatePicker, TimePicker };

package/src/utils/functions.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const noop = (): void => {};