@hero-design/rn 8.74.1 → 8.75.0

package/src/components/FloatingIsland/index.tsx

@@ -0,0 +1,94 @@
+import React, { ReactNode } from 'react';
+import { LayoutChangeEvent, ViewProps } from 'react-native';
+import {
+  StyledWrapper,
+  StyledPrefixWrapper,
+  StyledSuffixWrapper,
+  StyledIcon,
+} from './StyledFloatingIsland';
+import { IconName } from '../Icon';
+
+export interface FloatingIslandProps extends ViewProps {
+  /**
+   * Callback that is called when the floating island is pressed.
+   */
+  onPress?: () => void;
+  /**
+   * Children of the floating island.
+   */
+  children: ReactNode;
+  /**
+   * Prefix element that is displayed before the children.
+   */
+  prefix?: IconName | ReactNode;
+  /**
+   * Suffix element that is displayed after the children.
+   */
+  suffix?: IconName | ReactNode;
+}
+
+const getPrefixOrSuffix = ({
+  element,
+  isPrefix = true,
+}: {
+  element: IconName | ReactNode;
+  isPrefix: boolean;
+}) => {
+  const Wrapper = isPrefix ? StyledPrefixWrapper : StyledSuffixWrapper;
+  if (typeof element === 'string') {
+    return (
+      <Wrapper>
+        <StyledIcon
+          testID={`floating-island-${isPrefix ? 'prefix' : 'suffix'}-icon`}
+          size="small"
+          icon={element as IconName}
+        />
+      </Wrapper>
+    );
+  }
+
+  return <Wrapper>{element}</Wrapper>;
+};
+
+const FloatingIsland = ({
+  onPress,
+  onLayout,
+  style,
+  children,
+  prefix,
+  suffix,
+  ...props
+}: FloatingIslandProps) => {
+  const [width, setWidth] = React.useState(0);
+
+  const onWrapperLayout = (event: LayoutChangeEvent) => {
+    setWidth(event.nativeEvent.layout.width);
+
+    onLayout?.(event);
+  };
+
+  return (
+    <StyledWrapper
+      {...props}
+      onLayout={onWrapperLayout}
+      disabled={!onPress}
+      onPress={onPress}
+      style={[
+        style,
+        width > 0
+          ? {
+              transform: [{ translateX: -width / 2 }],
+            }
+          : undefined,
+      ]}
+    >
+      {prefix && getPrefixOrSuffix({ element: prefix, isPrefix: true })}
+
+      {children}
+
+      {suffix && getPrefixOrSuffix({ element: suffix, isPrefix: false })}
+    </StyledWrapper>
+  );
+};
+
+export default FloatingIsland;

package/src/index.ts

@@ -71,6 +71,7 @@ import {
   FlatListWithFAB,
 } from './components/AnimatedScroller';
 import Search from './components/Search';
+import FloatingIsland from './components/FloatingIsland';
 
 export {
   theme,
@@ -143,6 +144,7 @@ export {
   Rate,
   RefreshControl,
   RichTextEditor,
+  FloatingIsland,
 };
 
 export * from './types';

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -590,6 +590,36 @@ exports[`theme returns correct theme object 1`] = `
         "titleMarginHorizontal": 8,
       },
     },
+    "floatingIsland": {
+      "colors": {
+        "wrapperBackground": "#ffffff",
+      },
+      "fontSizes": {
+        "iconSize": 14,
+      },
+      "radii": {
+        "wrapper": 999,
+      },
+      "shadows": {
+        "wrapper": {
+          "elevation": 3,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+        },
+      },
+      "space": {
+        "iconPadding": 12,
+        "prefixMarginRight": 8,
+        "suffixMarginLeft": 16,
+        "wrapperPadding": 8,
+        "wrapperTop": 12,
+      },
+    },
     "icon": {
       "colors": {
         "danger": "#cb300a",

package/src/theme/components/floatingIsland.ts

@@ -0,0 +1,31 @@
+import type { GlobalTheme } from '../global';
+
+const getFloatingIslandTheme = (theme: GlobalTheme) => {
+  const colors = {
+    wrapperBackground: theme.colors.defaultGlobalSurface,
+  };
+
+  const radii = {
+    wrapper: theme.radii.rounded,
+  };
+
+  const shadows = {
+    wrapper: theme.shadows.default,
+  };
+
+  const space = {
+    wrapperPadding: theme.space.small,
+    wrapperTop: theme.space.smallMedium,
+    prefixMarginRight: theme.space.small,
+    suffixMarginLeft: theme.space.medium,
+    iconPadding: theme.space.smallMedium,
+  };
+
+  const fontSizes = {
+    iconSize: theme.fontSizes.medium,
+  };
+
+  return { colors, radii, shadows, space, fontSizes };
+};
+
+export default getFloatingIslandTheme;

package/src/theme/getTheme.ts

@@ -50,6 +50,7 @@ import getTypographyTheme from './components/typography';
 import type { GlobalTheme, Scale, SystemPalette } from './global';
 import getSearchTheme from './components/search';
 import getMapPinTheme from './components/mapPin';
+import getFloatingIslandTheme from './components/floatingIsland';
 
 type Theme = GlobalTheme & {
   __hd__: {
@@ -101,6 +102,7 @@ type Theme = GlobalTheme & {
     toast: ReturnType<typeof getToastTheme>;
     toolbar: ReturnType<typeof getToolbarTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
+    floatingIsland: ReturnType<typeof getFloatingIslandTheme>;
   };
 };
 
@@ -160,6 +162,7 @@ const getTheme = (
       toast: getToastTheme(globalTheme),
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
+      floatingIsland: getFloatingIslandTheme(globalTheme),
     },
   };
 };