@hero-design/rn-work-uikit 1.9.6 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +219 -63
  3. package/es/index.js +72 -43
  4. package/lib/index.js +72 -43
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @hero-design/rn-work-uikit
2
2
 
3
+ ## 1.11.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#4691](https://github.com/Thinkei/hero-design/pull/4691) [`899740a57668b6f2a24c511ae943eef813c7ee51`](https://github.com/Thinkei/hero-design/commit/899740a57668b6f2a24c511ae943eef813c7ee51) Thanks [@ttkien](https://github.com/ttkien)! - Revert "[ANG-4343] Upgrade rn 81"
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [[`899740a57668b6f2a24c511ae943eef813c7ee51`](https://github.com/Thinkei/hero-design/commit/899740a57668b6f2a24c511ae943eef813c7ee51)]:
12
+ - @hero-design/react-native-month-year-picker@8.45.0
13
+ - @hero-design/rn@9.0.0
14
+
15
+ ## 1.10.0
16
+
17
+ ### Minor Changes
18
+
19
+ - [#4688](https://github.com/Thinkei/hero-design/pull/4688) [`3d2afde0f5db3e46a63fc12c5ef2984085022531`](https://github.com/Thinkei/hero-design/commit/3d2afde0f5db3e46a63fc12c5ef2984085022531) Thanks [@ttkien](https://github.com/ttkien)! - Upgrade react-native 0.81
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies [[`3d2afde0f5db3e46a63fc12c5ef2984085022531`](https://github.com/Thinkei/hero-design/commit/3d2afde0f5db3e46a63fc12c5ef2984085022531)]:
24
+ - @hero-design/react-native-month-year-picker@8.44.0
25
+ - @hero-design/rn@9.0.0
26
+
3
27
  ## 1.9.6
4
28
 
5
29
  ### Patch Changes
package/README.md CHANGED
@@ -1,103 +1,259 @@
1
1
  # @hero-design/rn-work-uikit
2
2
 
3
- EH Work specific UI components built on top of `@hero-design/rn`.
3
+ ## Overview
4
4
 
5
- ## Purpose
6
-
7
- This package provides a customized UI kit specifically for the EH Work application. It inherits all components from the base `@hero-design/rn` package and allows for EH Work-specific customizations without affecting other applications.
5
+ `@hero-design/rn-work-uikit` is an EH Work-specific UI component library built on top of `@hero-design/rn`. It re-exports all components from the base React Native library and provides EH Work-specific overrides for `TextInput`, `Select`, `DatePicker`, `TimePicker`, `FormGroup`, and `RichTextEditor` with custom styling, behavior, and theme configuration.
8
6
 
9
7
  ## Installation
10
8
 
11
- Install the package and its peer dependencies:
12
-
13
- ```bash
14
- # Install the main package
9
+ ```sh
15
10
  yarn add @hero-design/rn-work-uikit
11
+ ```
12
+
13
+ **Peer Dependencies:**
16
14
 
17
- # Install peer dependencies
18
- yarn add @hero-design/react-native-month-year-picker \
19
- @ptomasroos/react-native-multi-slider \
20
- @react-native-community/datetimepicker \
21
- @react-native-community/slider \
22
- react-native-gesture-handler \
23
- react-native-linear-gradient \
24
- react-native-pager-view \
25
- react-native-safe-area-context \
26
- react-native-svg \
27
- react-native-vector-icons \
28
- react-native-webview
15
+ ```sh
16
+ yarn add react@18.3.1 react-native@0.77.3
17
+ yarn add @hero-design/react-native-month-year-picker@^8.43.2
18
+ yarn add @ptomasroos/react-native-multi-slider@^2.2.2
19
+ yarn add @react-native-community/datetimepicker@^3.5.2
20
+ yarn add @react-native-community/slider@^4.5.1
21
+ yarn add react-native-gesture-handler@~2.20.2
22
+ yarn add react-native-linear-gradient@^2.8.3
23
+ yarn add react-native-pager-view@^6.7.0
24
+ yarn add react-native-safe-area-context@^4.7.0
25
+ yarn add react-native-svg@^15.11.2
26
+ yarn add react-native-vector-icons@^9.1.0
27
+ yarn add react-native-webview@^13.10.2
29
28
  ```
30
29
 
31
- **Note**: Some peer dependencies may require additional platform-specific setup (iOS/Android). Please refer to their respective documentation for installation instructions.
30
+ **Requirements:**
31
+ - React 18.3.1
32
+ - React Native 0.77.3
33
+ - Node.js >= 20.0.0 (20.19.5 recommended)
34
+ - Yarn >= 4.0.2 (enabled via Corepack: `corepack enable`)
35
+ - iOS Simulator (iPhone 14, iOS 18+) or Android Emulator (Pixel 6, API 30) for development
32
36
 
33
37
  ## Usage
34
38
 
39
+ ### Basic Example
40
+
35
41
  This package re-exports all components from `@hero-design/rn`, so you can use it as a drop-in replacement:
36
42
 
37
- ```typescript
38
- import { Button, Typography, Box } from '@hero-design/rn-work-uikit';
43
+ ```tsx
44
+ import React from 'react';
45
+ import { ThemeSwitcher, Button, Card, Typography } from '@hero-design/rn-work-uikit';
39
46
 
40
- function MyComponent() {
47
+ function App() {
41
48
  return (
42
- <Box>
43
- <Typography>Hello EH Work!</Typography>
44
- <Button onPress={() => {}} text="EH Work Button" />
45
- </Box>
49
+ <ThemeSwitcher name="ehWork">
50
+ <Card>
51
+ <Typography.Title>Welcome to EH Work</Typography.Title>
52
+ <Button text="Get Started" intent="primary" onPress={() => {}} />
53
+ </Card>
54
+ </ThemeSwitcher>
46
55
  );
47
56
  }
48
57
  ```
49
58
 
50
- ## Development
59
+ ### Using Work Specific Components
51
60
 
52
- ### Scripts
61
+ EH Work-specific components are automatically available and override the base components:
53
62
 
54
- - `yarn test` - Run tests
55
- - `yarn lint` - Run linting
56
- - `yarn type-check` - Run TypeScript type checking
57
- - `yarn build` - Build the package
58
- - `yarn build:watch` - Build in watch mode
63
+ ```tsx
64
+ import { TextInput, Select, DatePicker, FormGroup } from '@hero-design/rn-work-uikit';
59
65
 
66
+ function WorkForm() {
67
+ return (
68
+ <FormGroup>
69
+ <TextInput
70
+ label="Employee Name"
71
+ placeholder="Enter name"
72
+ />
73
+ <Select
74
+ label="Department"
75
+ options={[
76
+ { value: 'engineering', label: 'Engineering' },
77
+ { value: 'sales', label: 'Sales' },
78
+ ]}
79
+ />
80
+ <DatePicker
81
+ label="Start Date"
82
+ onDateChange={(date) => console.log(date)}
83
+ />
84
+ </FormGroup>
85
+ );
86
+ }
87
+ ```
60
88
 
61
- ### Adding Custom Components
89
+ ## Theming
62
90
 
63
- To add EH Work-specific components:
91
+ The package includes a work-specific theme that extends the base `@hero-design/rn` theme with EH Work branding and customizations.
64
92
 
65
- 1. Create your component in `src/components/`
66
- 2. Export it from `src/index.ts`
67
- 3. Add tests for your component
93
+ ### Basic Theme Usage
68
94
 
69
- Example:
70
- ```typescript
71
- // src/components/MyWorkComponent.tsx
72
- import React from 'react';
73
- import { Button } from '@hero-design/rn';
95
+ ```tsx
96
+ import { ThemeSwitcher } from '@hero-design/rn-work-uikit';
97
+
98
+ function App() {
99
+ return (
100
+ <ThemeSwitcher name="ehWork">
101
+ {/* Your app components */}
102
+ </ThemeSwitcher>
103
+ );
104
+ }
105
+ ```
106
+
107
+ ### Work Theme Customization
74
108
 
75
- export const MyWorkComponent = (props) => {
76
- return <Button {...props} workTheme />;
77
- };
109
+ The work theme includes EH Work-specific colors, typography, and component styles:
78
110
 
79
- // src/index.ts
80
- export { MyWorkComponent } from './components/MyWorkComponent';
111
+ ```tsx
112
+ import { ThemeProvider, getTheme, useTheme } from '@hero-design/rn-work-uikit';
113
+ import { styled } from '@emotion/native';
114
+
115
+ const StyledView = styled.View`
116
+ background-color: ${({ theme }) => theme.colors.defaultGlobalSurface};
117
+ padding: ${({ theme }) => theme.space.medium}px;
118
+ `;
119
+
120
+ function MyComponent() {
121
+ const theme = useTheme();
122
+ return <StyledView>EH Work Content</StyledView>;
123
+ }
81
124
  ```
82
125
 
83
- ## Architecture
126
+ ### Design Tokens
127
+
128
+ For comprehensive design tokens documentation and examples, visit the [Hero Design documentation site](https://design.employmenthero.com/mobile/intro) or explore the [rn-playground](https://github.com/Thinkei/hero-design/tree/master/apps/rn-playground) for interactive examples.
129
+
130
+ ## Examples
131
+
132
+ ### Enhanced TextInput
84
133
 
85
- This package follows **composition over inheritance**:
134
+ The work-specific `TextInput` includes additional features:
86
135
 
87
- - **Re-exports**: All `@hero-design/rn` components are available
88
- - **Extensions**: EH Work-specific components extend base components
89
- - **Isolation**: No modifications to the base package
90
- - **Compatibility**: Maintains full API compatibility
136
+ ```tsx
137
+ import { TextInput } from '@hero-design/rn-work-uikit';
138
+
139
+ function FormExample() {
140
+ return (
141
+ <>
142
+ <TextInput
143
+ label="Email"
144
+ placeholder="Enter your email"
145
+ keyboardType="email-address"
146
+ autoCapitalize="none"
147
+ error="Invalid email"
148
+ helpText="We'll never share your email"
149
+ maxLength={100}
150
+ />
151
+ <TextInput
152
+ label="Password"
153
+ placeholder="Enter password"
154
+ secureTextEntry
155
+ />
156
+ </>
157
+ );
158
+ }
159
+ ```
160
+
161
+ ### Rich Text Editor
162
+
163
+ The work-specific `RichTextEditor` provides rich text editing capabilities:
164
+
165
+ ```tsx
166
+ import { RichTextEditor } from '@hero-design/rn-work-uikit';
167
+
168
+ function CommentEditor() {
169
+ const [content, setContent] = useState([]);
170
+
171
+ return (
172
+ <RichTextEditor
173
+ name="comment-editor"
174
+ label="Comment"
175
+ value={content}
176
+ onChange={setContent}
177
+ placeholder="Write a comment..."
178
+ helpText="You can format your text"
179
+ />
180
+ );
181
+ }
182
+ ```
183
+
184
+ ### FormGroup
185
+
186
+ The work-specific `FormGroup` provides consistent form layout:
187
+
188
+ ```tsx
189
+ import { FormGroup, TextInput, Select, DatePicker } from '@hero-design/rn-work-uikit';
190
+
191
+ function EmployeeForm() {
192
+ return (
193
+ <FormGroup>
194
+ <TextInput label="First Name" />
195
+ <TextInput label="Last Name" />
196
+ <Select
197
+ label="Department"
198
+ options={[
199
+ { value: 'eng', label: 'Engineering' },
200
+ { value: 'sales', label: 'Sales' },
201
+ ]}
202
+ />
203
+ <DatePicker label="Hire Date" />
204
+ </FormGroup>
205
+ );
206
+ }
207
+ ```
208
+
209
+ ### Using Base Components
210
+
211
+ All base components from `@hero-design/rn` are available:
212
+
213
+ ```tsx
214
+ import {
215
+ Button,
216
+ Card,
217
+ Typography,
218
+ List,
219
+ ListItem,
220
+ Avatar,
221
+ Badge,
222
+ Modal,
223
+ BottomSheet,
224
+ Icon,
225
+ } from '@hero-design/rn-work-uikit';
226
+
227
+ function WorkApp() {
228
+ return (
229
+ <>
230
+ <Card>
231
+ <Typography.Title level={2}>EH Work Dashboard</Typography.Title>
232
+ <Button text="Action" intent="primary" onPress={() => {}} />
233
+ </Card>
234
+ <List>
235
+ <ListItem
236
+ left={<Avatar source={{ uri: 'avatar-url' }} />}
237
+ title="Employee Name"
238
+ subtitle="Department"
239
+ right={<Badge count={5} />}
240
+ />
241
+ </List>
242
+ </>
243
+ );
244
+ }
245
+ ```
91
246
 
92
247
  ## Contributing
93
248
 
94
- 1. Follow existing code style and patterns
95
- 2. Add tests for new components
96
- 3. Update documentation for new features
97
- 4. Ensure all checks pass: `yarn test && yarn lint && yarn type-check`
249
+ Contributions to `@hero-design/rn-work-uikit` are welcome!
98
250
 
99
- ## Dependencies
251
+ To get started:
100
252
 
101
- - `@hero-design/rn` - The base UI kit
102
- - React Native peer dependencies (see installation section above)
253
+ 1. Clone the repository: `git clone git@github.com:Thinkei/hero-design.git`
254
+ 2. Enable Corepack: `corepack enable`
255
+ 3. Install dependencies: `yarn install`
256
+ 4. Build the package: `yarn turbo run build --filter=@hero-design/rn-work-uikit`
257
+ 5. Run the playground: `yarn dev:rn`
103
258
 
259
+ For detailed contributing guidelines, see the main repository [Contributing documentation](https://design.employmenthero.com/mobile/Contributing/coContribution).
package/es/index.js CHANGED
@@ -28356,51 +28356,19 @@ var getTabItem = function getTabItem(_ref) {
28356
28356
  color: color
28357
28357
  });
28358
28358
  };
28359
- var Tabs = function Tabs(_ref2) {
28360
- var onTabPress = _ref2.onTabPress,
28359
+ var TabsHeader = function TabsHeader(_ref2) {
28360
+ var tabs = _ref2.tabs,
28361
28361
  selectedTabKey = _ref2.selectedTabKey,
28362
- tabs = _ref2.tabs,
28363
- containerStyle = _ref2.containerStyle,
28362
+ onTabPress = _ref2.onTabPress,
28364
28363
  barStyle = _ref2.barStyle,
28365
- _ref2$lazy = _ref2.lazy,
28366
- lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
28367
- _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
28368
- lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
28369
- _ref2$swipeEnabled = _ref2.swipeEnabled,
28370
- swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
28371
- componentTestID = _ref2.testID;
28364
+ insets = _ref2.insets,
28365
+ componentTestID = _ref2.componentTestID,
28366
+ tabsWidth = _ref2.tabsWidth,
28367
+ setTabsWidth = _ref2.setTabsWidth,
28368
+ positionAnimatedValue = _ref2.positionAnimatedValue,
28369
+ scrollOffsetAnimatedValue = _ref2.scrollOffsetAnimatedValue;
28372
28370
  var theme = useTheme$1();
28373
- var insets = useSafeAreaInsets();
28374
- var pagerViewRef = useRef(null);
28375
- var selectedTabIndex = tabs.findIndex(function (item) {
28376
- return item.key === selectedTabKey;
28377
- });
28378
- var scrollOffsetAnimatedValue = useRef(new Animated.Value(0)).current;
28379
- var positionAnimatedValue = useRef(new Animated.Value(0)).current;
28380
- var _useState = useState(0),
28381
- _useState2 = _slicedToArray(_useState, 2),
28382
- tabsWidth = _useState2[0],
28383
- setTabsWidth = _useState2[1];
28384
- var _useHandlePageScroll = useHandlePageScroll(),
28385
- onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged,
28386
- hasScrolled = _useHandlePageScroll.hasScrolled;
28387
- useEffect(function () {
28388
- if (selectedTabIndex !== -1) {
28389
- var _pagerViewRef$current;
28390
- (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 || _pagerViewRef$current.setPage(selectedTabIndex);
28391
- }
28392
- }, [selectedTabIndex]);
28393
- var tabContextProviderValue = useMemo(function () {
28394
- return {
28395
- selectedTabKey: selectedTabKey
28396
- };
28397
- }, [selectedTabKey]);
28398
- return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
28399
- value: tabContextProviderValue
28400
- }, /*#__PURE__*/React__default.createElement(TabContainer$1, {
28401
- style: containerStyle,
28402
- testID: componentTestID
28403
- }, /*#__PURE__*/React__default.createElement(HeaderTabWrapper$1, {
28371
+ return /*#__PURE__*/React__default.createElement(HeaderTabWrapper$1, {
28404
28372
  themeInsets: insets,
28405
28373
  style: barStyle,
28406
28374
  testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
@@ -28439,7 +28407,67 @@ var Tabs = function Tabs(_ref2) {
28439
28407
  scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
28440
28408
  tabsLength: tabs.length,
28441
28409
  tabsWidth: tabsWidth
28442
- }))), /*#__PURE__*/React__default.createElement(AnimatedPagerView, {
28410
+ })));
28411
+ };
28412
+ var Tabs = function Tabs(_ref3) {
28413
+ var onTabPress = _ref3.onTabPress,
28414
+ selectedTabKey = _ref3.selectedTabKey,
28415
+ tabs = _ref3.tabs,
28416
+ containerStyle = _ref3.containerStyle,
28417
+ barStyle = _ref3.barStyle,
28418
+ _ref3$lazy = _ref3.lazy,
28419
+ lazy = _ref3$lazy === void 0 ? false : _ref3$lazy,
28420
+ _ref3$lazyPreloadDist = _ref3.lazyPreloadDistance,
28421
+ lazyPreloadDistance = _ref3$lazyPreloadDist === void 0 ? 1 : _ref3$lazyPreloadDist,
28422
+ _ref3$swipeEnabled = _ref3.swipeEnabled,
28423
+ swipeEnabled = _ref3$swipeEnabled === void 0 ? true : _ref3$swipeEnabled,
28424
+ componentTestID = _ref3.testID,
28425
+ header = _ref3.header;
28426
+ var insets = useSafeAreaInsets();
28427
+ var pagerViewRef = useRef(null);
28428
+ var selectedTabIndex = tabs.findIndex(function (item) {
28429
+ return item.key === selectedTabKey;
28430
+ });
28431
+ var scrollOffsetAnimatedValue = useRef(new Animated.Value(0)).current;
28432
+ var positionAnimatedValue = useRef(new Animated.Value(0)).current;
28433
+ var _useState = useState(0),
28434
+ _useState2 = _slicedToArray(_useState, 2),
28435
+ tabsWidth = _useState2[0],
28436
+ setTabsWidth = _useState2[1];
28437
+ var _useHandlePageScroll = useHandlePageScroll(),
28438
+ onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged,
28439
+ hasScrolled = _useHandlePageScroll.hasScrolled;
28440
+ useEffect(function () {
28441
+ if (selectedTabIndex !== -1) {
28442
+ var _pagerViewRef$current;
28443
+ (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 || _pagerViewRef$current.setPage(selectedTabIndex);
28444
+ }
28445
+ }, [selectedTabIndex]);
28446
+ var tabContextProviderValue = useMemo(function () {
28447
+ return {
28448
+ selectedTabKey: selectedTabKey
28449
+ };
28450
+ }, [selectedTabKey]);
28451
+ var headerProps = useMemo(function () {
28452
+ return {
28453
+ tabs: tabs,
28454
+ selectedTabKey: selectedTabKey,
28455
+ onTabPress: onTabPress,
28456
+ barStyle: barStyle,
28457
+ insets: insets,
28458
+ componentTestID: componentTestID,
28459
+ tabsWidth: tabsWidth,
28460
+ setTabsWidth: setTabsWidth,
28461
+ positionAnimatedValue: positionAnimatedValue,
28462
+ scrollOffsetAnimatedValue: scrollOffsetAnimatedValue
28463
+ };
28464
+ }, [tabs, selectedTabKey, onTabPress, barStyle, insets, componentTestID, tabsWidth, setTabsWidth, positionAnimatedValue, scrollOffsetAnimatedValue]);
28465
+ return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
28466
+ value: tabContextProviderValue
28467
+ }, /*#__PURE__*/React__default.createElement(TabContainer$1, {
28468
+ style: containerStyle,
28469
+ testID: componentTestID
28470
+ }, header ? header(headerProps) : /*#__PURE__*/React__default.createElement(TabsHeader, headerProps), /*#__PURE__*/React__default.createElement(AnimatedPagerView, {
28443
28471
  initialPage: selectedTabIndex,
28444
28472
  ref: pagerViewRef,
28445
28473
  onPageSelected: function onPageSelected(e) {
@@ -28480,6 +28508,7 @@ var Tabs = function Tabs(_ref2) {
28480
28508
  }))));
28481
28509
  };
28482
28510
  var index$4 = Object.assign(Tabs, {
28511
+ Header: TabsHeader,
28483
28512
  Scroll: ScrollableTab,
28484
28513
  ScrollHeader: ScrollableTabHeader,
28485
28514
  useIsFocused: useIsFocused
package/lib/index.js CHANGED
@@ -28385,51 +28385,19 @@ var getTabItem = function getTabItem(_ref) {
28385
28385
  color: color
28386
28386
  });
28387
28387
  };
28388
- var Tabs = function Tabs(_ref2) {
28389
- var onTabPress = _ref2.onTabPress,
28388
+ var TabsHeader = function TabsHeader(_ref2) {
28389
+ var tabs = _ref2.tabs,
28390
28390
  selectedTabKey = _ref2.selectedTabKey,
28391
- tabs = _ref2.tabs,
28392
- containerStyle = _ref2.containerStyle,
28391
+ onTabPress = _ref2.onTabPress,
28393
28392
  barStyle = _ref2.barStyle,
28394
- _ref2$lazy = _ref2.lazy,
28395
- lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
28396
- _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
28397
- lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
28398
- _ref2$swipeEnabled = _ref2.swipeEnabled,
28399
- swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
28400
- componentTestID = _ref2.testID;
28393
+ insets = _ref2.insets,
28394
+ componentTestID = _ref2.componentTestID,
28395
+ tabsWidth = _ref2.tabsWidth,
28396
+ setTabsWidth = _ref2.setTabsWidth,
28397
+ positionAnimatedValue = _ref2.positionAnimatedValue,
28398
+ scrollOffsetAnimatedValue = _ref2.scrollOffsetAnimatedValue;
28401
28399
  var theme = useTheme$1();
28402
- var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
28403
- var pagerViewRef = React.useRef(null);
28404
- var selectedTabIndex = tabs.findIndex(function (item) {
28405
- return item.key === selectedTabKey;
28406
- });
28407
- var scrollOffsetAnimatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
28408
- var positionAnimatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
28409
- var _useState = React.useState(0),
28410
- _useState2 = _slicedToArray(_useState, 2),
28411
- tabsWidth = _useState2[0],
28412
- setTabsWidth = _useState2[1];
28413
- var _useHandlePageScroll = useHandlePageScroll(),
28414
- onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged,
28415
- hasScrolled = _useHandlePageScroll.hasScrolled;
28416
- React.useEffect(function () {
28417
- if (selectedTabIndex !== -1) {
28418
- var _pagerViewRef$current;
28419
- (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 || _pagerViewRef$current.setPage(selectedTabIndex);
28420
- }
28421
- }, [selectedTabIndex]);
28422
- var tabContextProviderValue = React.useMemo(function () {
28423
- return {
28424
- selectedTabKey: selectedTabKey
28425
- };
28426
- }, [selectedTabKey]);
28427
- return /*#__PURE__*/React__namespace.default.createElement(TabContext.Provider, {
28428
- value: tabContextProviderValue
28429
- }, /*#__PURE__*/React__namespace.default.createElement(TabContainer$1, {
28430
- style: containerStyle,
28431
- testID: componentTestID
28432
- }, /*#__PURE__*/React__namespace.default.createElement(HeaderTabWrapper$1, {
28400
+ return /*#__PURE__*/React__namespace.default.createElement(HeaderTabWrapper$1, {
28433
28401
  themeInsets: insets,
28434
28402
  style: barStyle,
28435
28403
  testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
@@ -28468,7 +28436,67 @@ var Tabs = function Tabs(_ref2) {
28468
28436
  scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
28469
28437
  tabsLength: tabs.length,
28470
28438
  tabsWidth: tabsWidth
28471
- }))), /*#__PURE__*/React__namespace.default.createElement(AnimatedPagerView, {
28439
+ })));
28440
+ };
28441
+ var Tabs = function Tabs(_ref3) {
28442
+ var onTabPress = _ref3.onTabPress,
28443
+ selectedTabKey = _ref3.selectedTabKey,
28444
+ tabs = _ref3.tabs,
28445
+ containerStyle = _ref3.containerStyle,
28446
+ barStyle = _ref3.barStyle,
28447
+ _ref3$lazy = _ref3.lazy,
28448
+ lazy = _ref3$lazy === void 0 ? false : _ref3$lazy,
28449
+ _ref3$lazyPreloadDist = _ref3.lazyPreloadDistance,
28450
+ lazyPreloadDistance = _ref3$lazyPreloadDist === void 0 ? 1 : _ref3$lazyPreloadDist,
28451
+ _ref3$swipeEnabled = _ref3.swipeEnabled,
28452
+ swipeEnabled = _ref3$swipeEnabled === void 0 ? true : _ref3$swipeEnabled,
28453
+ componentTestID = _ref3.testID,
28454
+ header = _ref3.header;
28455
+ var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
28456
+ var pagerViewRef = React.useRef(null);
28457
+ var selectedTabIndex = tabs.findIndex(function (item) {
28458
+ return item.key === selectedTabKey;
28459
+ });
28460
+ var scrollOffsetAnimatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
28461
+ var positionAnimatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
28462
+ var _useState = React.useState(0),
28463
+ _useState2 = _slicedToArray(_useState, 2),
28464
+ tabsWidth = _useState2[0],
28465
+ setTabsWidth = _useState2[1];
28466
+ var _useHandlePageScroll = useHandlePageScroll(),
28467
+ onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged,
28468
+ hasScrolled = _useHandlePageScroll.hasScrolled;
28469
+ React.useEffect(function () {
28470
+ if (selectedTabIndex !== -1) {
28471
+ var _pagerViewRef$current;
28472
+ (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 || _pagerViewRef$current.setPage(selectedTabIndex);
28473
+ }
28474
+ }, [selectedTabIndex]);
28475
+ var tabContextProviderValue = React.useMemo(function () {
28476
+ return {
28477
+ selectedTabKey: selectedTabKey
28478
+ };
28479
+ }, [selectedTabKey]);
28480
+ var headerProps = React.useMemo(function () {
28481
+ return {
28482
+ tabs: tabs,
28483
+ selectedTabKey: selectedTabKey,
28484
+ onTabPress: onTabPress,
28485
+ barStyle: barStyle,
28486
+ insets: insets,
28487
+ componentTestID: componentTestID,
28488
+ tabsWidth: tabsWidth,
28489
+ setTabsWidth: setTabsWidth,
28490
+ positionAnimatedValue: positionAnimatedValue,
28491
+ scrollOffsetAnimatedValue: scrollOffsetAnimatedValue
28492
+ };
28493
+ }, [tabs, selectedTabKey, onTabPress, barStyle, insets, componentTestID, tabsWidth, setTabsWidth, positionAnimatedValue, scrollOffsetAnimatedValue]);
28494
+ return /*#__PURE__*/React__namespace.default.createElement(TabContext.Provider, {
28495
+ value: tabContextProviderValue
28496
+ }, /*#__PURE__*/React__namespace.default.createElement(TabContainer$1, {
28497
+ style: containerStyle,
28498
+ testID: componentTestID
28499
+ }, header ? header(headerProps) : /*#__PURE__*/React__namespace.default.createElement(TabsHeader, headerProps), /*#__PURE__*/React__namespace.default.createElement(AnimatedPagerView, {
28472
28500
  initialPage: selectedTabIndex,
28473
28501
  ref: pagerViewRef,
28474
28502
  onPageSelected: function onPageSelected(e) {
@@ -28509,6 +28537,7 @@ var Tabs = function Tabs(_ref2) {
28509
28537
  }))));
28510
28538
  };
28511
28539
  var index$4 = Object.assign(Tabs, {
28540
+ Header: TabsHeader,
28512
28541
  Scroll: ScrollableTab,
28513
28542
  ScrollHeader: ScrollableTabHeader,
28514
28543
  useIsFocused: useIsFocused
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hero-design/rn-work-uikit",
3
- "version": "1.9.6",
3
+ "version": "1.11.0",
4
4
  "license": "MIT",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -22,11 +22,11 @@
22
22
  "dependencies": {
23
23
  "@emotion/native": "^11.9.3",
24
24
  "@emotion/react": "^11.9.3",
25
- "@hero-design/rn": "^8.115.1",
25
+ "@hero-design/rn": "8.118.0",
26
26
  "hero-editor": "^1.17.0"
27
27
  },
28
28
  "peerDependencies": {
29
- "@hero-design/react-native-month-year-picker": "^8.43.2",
29
+ "@hero-design/react-native-month-year-picker": "^8.45.0",
30
30
  "@ptomasroos/react-native-multi-slider": "^2.2.2",
31
31
  "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
32
32
  "@react-native-community/slider": "^4.5.1",
@@ -53,7 +53,7 @@
53
53
  "@eslint/eslintrc": "^3.1.0",
54
54
  "@eslint/js": "^9.8.0",
55
55
  "@hero-design/eslint-plugin": "9.2.1",
56
- "@hero-design/react-native-month-year-picker": "^8.43.2",
56
+ "@hero-design/react-native-month-year-picker": "^8.45.0",
57
57
  "@ptomasroos/react-native-multi-slider": "^2.2.2",
58
58
  "@react-native-community/datetimepicker": "8.2.0",
59
59
  "@react-native-community/slider": "^4.5.1",