@hero-design/rn 8.35.0-alpha.2 → 8.35.0-alpha.4

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/es/index.js +4 -1
  2. package/lib/index.js +4 -1
  3. package/package.json +1 -1
  4. package/src/components/FAB/ActionGroup/index.tsx +45 -53
  5. package/types/components/FAB/index.d.ts +3 -0
package/es/index.js CHANGED
@@ -13964,7 +13964,10 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
13964
13964
  ActionGroup.displayName = 'FAB.ActionGroup';
13965
13965
 
13966
13966
  var index$7 = Object.assign(FAB, {
13967
- ActionGroup: ActionGroup
13967
+ ActionGroup: ActionGroup,
13968
+ Portal: Portal,
13969
+ PortalHost: PortalHost,
13970
+ Provider: PortalProvider
13968
13971
  });
13969
13972
 
13970
13973
  var StyledListItemContainer$1 = index$b(TouchableHighlight)(function (_ref) {
package/lib/index.js CHANGED
@@ -13995,7 +13995,10 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
13995
13995
  ActionGroup.displayName = 'FAB.ActionGroup';
13996
13996
 
13997
13997
  var index$7 = Object.assign(FAB, {
13998
- ActionGroup: ActionGroup
13998
+ ActionGroup: ActionGroup,
13999
+ Portal: Portal,
14000
+ PortalHost: PortalHost,
14001
+ Provider: PortalProvider
13999
14002
  });
14000
14003
 
14001
14004
  var StyledListItemContainer$1 = index$b(reactNative.TouchableHighlight)(function (_ref) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hero-design/rn",
3
- "version": "8.35.0-alpha.2",
3
+ "version": "8.35.0-alpha.4",
4
4
  "license": "MIT",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
package/src/components/FAB/ActionGroup/index.tsx CHANGED
@@ -14,7 +14,6 @@ import {
14
14
 
15
15
  import Box from '../../Box';
16
16
  import { FABHandles } from '../FAB';
17
- import { Portal } from '@gorhom/portal';
18
17
 
19
18
  export type ActionGroupHandles = {
20
19
  showFAB: () => void;
@@ -62,7 +61,6 @@ export interface ActionGroupProps {
62
61
  * Testing id of the component.
63
62
  */
64
63
  testID?: string;
65
- portalName?: string;
66
64
  }
67
65
 
68
66
  const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
@@ -76,7 +74,6 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
76
74
  testID,
77
75
  fabTitle,
78
76
  fabIcon = 'add',
79
- portalName,
80
77
  },
81
78
  ref
82
79
  ) => {
@@ -126,57 +123,52 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
126
123
  outputRange: [0, 1],
127
124
  });
128
125
 
129
- const Wrapper = portalName ? Portal : React.Fragment;
130
126
  return (
131
- <Wrapper name={portalName}>
132
- <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
133
- <StyledBackdrop
134
- pointerEvents={active ? 'auto' : 'box-none'}
135
- testID="back-drop"
136
- style={{ opacity: interpolatedBackdropOpacityAnimation }}
137
- />
138
- <StyledActionGroupContainer
139
- pointerEvents={active ? 'auto' : 'none'}
140
- testID="action-group"
141
- style={{
142
- opacity: interpolatedActionGroupOpacityAnimation,
143
- }}
144
- >
145
- {!!headerTitle && (
146
- <Animated.View
147
- style={{ transform: [{ translateY: titleTranslateY }] }}
148
- >
149
- <StyledHeaderText testID="header-text" level="h4">
150
- {headerTitle}
151
- </StyledHeaderText>
152
- </Animated.View>
153
- )}
154
-
155
- <Box style={[style, { paddingBottom: 0 }]}>
156
- {items?.map((itemProp, index) => (
157
- <ActionItem
158
- key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
159
- {...itemProp}
160
- index={active ? index : items.length - index}
161
- active={active}
162
- />
163
- ))}
164
- </Box>
165
- </StyledActionGroupContainer>
166
-
167
- <Portal hostName="CustomPortalHost">
168
- <StyledFAB
169
- testID="fab"
170
- icon={fabIcon}
171
- onPress={onPress}
172
- animated
173
- active={active}
174
- title={fabTitle}
175
- ref={fabRef}
176
- />
177
- </Portal>
178
- </StyledContainer>
179
- </Wrapper>
127
+ <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
128
+ <StyledBackdrop
129
+ pointerEvents={active ? 'auto' : 'box-none'}
130
+ testID="back-drop"
131
+ style={{ opacity: interpolatedBackdropOpacityAnimation }}
132
+ />
133
+ <StyledActionGroupContainer
134
+ pointerEvents={active ? 'auto' : 'none'}
135
+ testID="action-group"
136
+ style={{
137
+ opacity: interpolatedActionGroupOpacityAnimation,
138
+ }}
139
+ >
140
+ {!!headerTitle && (
141
+ <Animated.View
142
+ style={{ transform: [{ translateY: titleTranslateY }] }}
143
+ >
144
+ <StyledHeaderText testID="header-text" level="h4">
145
+ {headerTitle}
146
+ </StyledHeaderText>
147
+ </Animated.View>
148
+ )}
149
+
150
+ <Box style={[style, { paddingBottom: 0 }]}>
151
+ {items?.map((itemProp, index) => (
152
+ <ActionItem
153
+ key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
154
+ {...itemProp}
155
+ index={active ? index : items.length - index}
156
+ active={active}
157
+ />
158
+ ))}
159
+ </Box>
160
+ </StyledActionGroupContainer>
161
+
162
+ <StyledFAB
163
+ testID="fab"
164
+ icon={fabIcon}
165
+ onPress={onPress}
166
+ animated
167
+ active={active}
168
+ title={fabTitle}
169
+ ref={fabRef}
170
+ />
171
+ </StyledContainer>
180
172
  );
181
173
  }
182
174
  );
package/types/components/FAB/index.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  declare const _default: import("react").ForwardRefExoticComponent<import("./FAB").FABProps & import("react").RefAttributes<import("./FAB").FABHandles>> & {
3
3
  ActionGroup: import("react").ForwardRefExoticComponent<import("./ActionGroup").ActionGroupProps & import("react").RefAttributes<import("./ActionGroup").ActionGroupHandles>>;
4
+ Portal: import("react").MemoExoticComponent<({ name: _providedName, hostName, handleOnMount: _providedHandleOnMount, handleOnUnmount: _providedHandleOnUnmount, handleOnUpdate: _providedHandleOnUpdate, children, }: import("@gorhom/portal/lib/typescript/components/portal/types").PortalProps) => null>;
5
+ PortalHost: import("react").MemoExoticComponent<({ name }: import("@gorhom/portal/lib/typescript/components/portalHost/types").PortalHostProps) => JSX.Element>;
6
+ Provider: import("react").MemoExoticComponent<({ rootHostName, shouldAddRootHost, children, }: import("@gorhom/portal/lib/typescript/components/portalProvider/types").PortalProviderProps) => JSX.Element>;
4
7
  };
5
8
  export default _default;