@ovotech/element-native 5.3.0 → 5.4.1

package/dist/components/NavHeader/NavHeader.styles.js

@@ -0,0 +1,82 @@
+import { numToPx } from '@ovotech/element-core';
+import Animated from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+const Z_INDEX = 1000;
+export const NavWrapper = styled(Animated.View)(({ theme: { semantic, core }, collapsed }) => css `
+    width: 100%;
+    position: absolute;
+
+    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */
+    z-index: ${Z_INDEX};
+    background-color: ${semantic.surface.base};
+
+    ${collapsed
+    ? css `
+          border-bottom-width: ${numToPx(core.borderWidth.small)};
+          border-bottom-style: solid;
+          border-bottom-color: ${semantic.border.differentiated};
+        `
+    : ''}
+  `);
+export const NavContainer = styled.View(({ theme: { core }, topOffset, titleVisible }) => css `
+    position: absolute;
+
+    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */
+    z-index: ${Z_INDEX + 1};
+    width: ${titleVisible ? '100%' : '50%'};
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-top: ${topOffset
+    ? topOffset
+    : numToPx(core.space[titleVisible ? 2 : 4])};
+    padding-bottom: ${numToPx(core.space[titleVisible ? 2 : 4])};
+    padding-left: ${numToPx(core.space[4])};
+    padding-right: ${numToPx(core.space[4])};
+  `);
+export const ExpandedTitle = styled(Animated.Text)(({ theme: { core, semantic }, hasBackButton, fullWidth, titleVisible, }) => css `
+    width: ${fullWidth ? '100%' : '65%'};
+    font-family: ${core.fontFamily.heading.native};
+    font-size: ${numToPx(core.fontSize.heading1[hasBackButton ? 'small' : 'large'])};
+    line-height: ${numToPx(hasBackButton ? core.lineHeight.heading1.small : core.space[13])};
+    color: ${semantic.message.branded};
+    ${!titleVisible && 'height: 0;'};
+  `);
+export const CollapsedTitleWrapper = styled(Animated.View)(({ titleVisible }) => `
+  width: ${titleVisible ? '33.3%' : '0'};
+  align-items: center;
+  justify-content: center;
+`);
+export const CollapsedTitle = styled(Animated.Text)(({ theme: { core, semantic } }) => css `
+    font-family: ${core.fontFamily.heading.native};
+    font-size: ${numToPx(core.fontSize.heading4.small)};
+    line-height: ${numToPx(core.lineHeight.heading4.small)};
+    color: ${semantic.message.branded};
+  `);
+export const IconButtonWrapper = styled.View `
+  width: 33.3%;
+  flex-direction: row;
+  justify-content: flex-end;
+`;
+const iconButtonSharedStyles = css(({ theme: { semantic } }) => `
+    border-radius: 100px;
+    background-color: ${semantic.inverted.surface};
+    align-items: center;
+    justify-content: center;
+`);
+export const StyledIconButtonS = styled(Animated.View) `
+  width: 28px;
+  height: 28px;
+  opacity: ${({ $pressed }) => ($pressed ? 0.8 : 1)};
+  ${iconButtonSharedStyles};
+`;
+export const StyledIconButtonL = styled(Animated.View) `
+  width: 36px;
+  height: 36px;
+  opacity: ${({ $pressed }) => ($pressed ? 0.8 : 1)};
+  ${iconButtonSharedStyles};
+`;
+export const ActionWrapper = styled.View(({ theme: { core }, collapsed }) => css `
+    margin-bottom: ${collapsed ? '0' : numToPx(core.space[2])};
+  `);

package/dist/components/NavHeader/index.d.ts

@@ -0,0 +1 @@
+export { NavHeader, NavHeaderProps } from './NavHeader';

package/dist/components/NavHeader/index.js

@@ -0,0 +1 @@
+export { NavHeader } from './NavHeader';