@dloizides/ui-nav 1.32.0 → 1.33.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.
- package/dist/index.js +48 -36
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +50 -38
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -952,6 +952,8 @@ function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
|
|
|
952
952
|
var TEXT_ON_PRIMARY = "#ffffff";
|
|
953
953
|
var ON_BRAND_SCALE = "onBrand";
|
|
954
954
|
var USER_BLOCK_COMPACT = { marginHorizontal: 4 };
|
|
955
|
+
var CONTAINER_STACKED = { flexWrap: "wrap" };
|
|
956
|
+
var USER_ROW_STACKED = { flexBasis: "100%", alignItems: "flex-end", paddingBottom: 8 };
|
|
955
957
|
var MAIN_STEP = "500";
|
|
956
958
|
var WRAP_ANYWHERE = reactNative.Platform.OS === "web" ? { overflowWrap: "anywhere" } : null;
|
|
957
959
|
function isAccountState(account) {
|
|
@@ -986,16 +988,58 @@ var Topbar = ({
|
|
|
986
988
|
const primaryColor = theme.palette.primary["500"];
|
|
987
989
|
const onPrimaryInk = onBrandInk(theme.palette);
|
|
988
990
|
const { width: viewportWidth } = reactNative.useWindowDimensions();
|
|
989
|
-
const
|
|
991
|
+
const stacked = viewportWidth < uiLayout.HEADER_STACK_BREAKPOINT;
|
|
992
|
+
const userBlockStyle = [
|
|
993
|
+
navStyles.userBlock,
|
|
994
|
+
viewportWidth < RAIL_FULL_BREAKPOINT ? USER_BLOCK_COMPACT : null,
|
|
995
|
+
stacked ? USER_ROW_STACKED : null
|
|
996
|
+
];
|
|
990
997
|
const richAccount = account !== void 0 && isAccountState(account) ? account : void 0;
|
|
991
998
|
const legacyAccount = account !== void 0 && !isAccountState(account) ? account : void 0;
|
|
992
999
|
const upgrade = richAccount?.upgrade;
|
|
1000
|
+
const identityBlocks = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1001
|
+
user ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { accessible: true, accessibilityLabel: `${user.name}, ${user.email}`, style: userBlockStyle, children: [
|
|
1002
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, WRAP_ANYWHERE, { color: colors.text }], children: user.name }),
|
|
1003
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userEmail, WRAP_ANYWHERE, { color: colors.textSecondary }], children: user.email })
|
|
1004
|
+
] }) : null,
|
|
1005
|
+
richAccount ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: userBlockStyle, children: [
|
|
1006
|
+
richAccount.onAccount ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1007
|
+
FocusableTouchable,
|
|
1008
|
+
{
|
|
1009
|
+
accessibilityHint: richAccount.accountHint ?? richAccount.displayName,
|
|
1010
|
+
accessibilityLabel: richAccount.displayName,
|
|
1011
|
+
ringColor: primaryColor,
|
|
1012
|
+
style: navStyles.accountNameBtn,
|
|
1013
|
+
testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
|
|
1014
|
+
onPress: richAccount.onAccount,
|
|
1015
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
|
|
1016
|
+
}
|
|
1017
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], testID: NAV_TEST_IDS.accountName, children: richAccount.displayName }),
|
|
1018
|
+
richAccount.tenantName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1019
|
+
reactNative.Text,
|
|
1020
|
+
{
|
|
1021
|
+
style: [navStyles.accountTenant, { color: colors.textSecondary }],
|
|
1022
|
+
testID: NAV_TEST_IDS.accountTenant,
|
|
1023
|
+
children: richAccount.tenantName
|
|
1024
|
+
}
|
|
1025
|
+
) : null,
|
|
1026
|
+
richAccount.plan ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1027
|
+
reactNative.View,
|
|
1028
|
+
{
|
|
1029
|
+
style: [navStyles.planBadge, { backgroundColor: planToneColor(theme, richAccount.plan.tone) }],
|
|
1030
|
+
testID: NAV_TEST_IDS.accountPlan,
|
|
1031
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.planBadgeText, { color: planBadgeInk(theme, richAccount.plan.tone) }], children: richAccount.plan.label })
|
|
1032
|
+
}
|
|
1033
|
+
) : null
|
|
1034
|
+
] }) : null
|
|
1035
|
+
] });
|
|
993
1036
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
994
1037
|
reactNative.View,
|
|
995
1038
|
{
|
|
996
1039
|
style: [
|
|
997
1040
|
navStyles.topbarContainer,
|
|
998
1041
|
{ borderBottomColor: colors.border, backgroundColor: colors.background },
|
|
1042
|
+
stacked ? CONTAINER_STACKED : null,
|
|
999
1043
|
containerStyle
|
|
1000
1044
|
],
|
|
1001
1045
|
children: [
|
|
@@ -1015,40 +1059,7 @@ var Topbar = ({
|
|
|
1015
1059
|
}
|
|
1016
1060
|
) : null,
|
|
1017
1061
|
renderTextSlot(notificationSlot, { color: colors.text }),
|
|
1018
|
-
|
|
1019
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, WRAP_ANYWHERE, { color: colors.text }], children: user.name }),
|
|
1020
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userEmail, WRAP_ANYWHERE, { color: colors.textSecondary }], children: user.email })
|
|
1021
|
-
] }) : null,
|
|
1022
|
-
richAccount ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: userBlockStyle, children: [
|
|
1023
|
-
richAccount.onAccount ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1024
|
-
FocusableTouchable,
|
|
1025
|
-
{
|
|
1026
|
-
accessibilityHint: richAccount.accountHint ?? richAccount.displayName,
|
|
1027
|
-
accessibilityLabel: richAccount.displayName,
|
|
1028
|
-
ringColor: primaryColor,
|
|
1029
|
-
style: navStyles.accountNameBtn,
|
|
1030
|
-
testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
|
|
1031
|
-
onPress: richAccount.onAccount,
|
|
1032
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
|
|
1033
|
-
}
|
|
1034
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], testID: NAV_TEST_IDS.accountName, children: richAccount.displayName }),
|
|
1035
|
-
richAccount.tenantName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1036
|
-
reactNative.Text,
|
|
1037
|
-
{
|
|
1038
|
-
style: [navStyles.accountTenant, { color: colors.textSecondary }],
|
|
1039
|
-
testID: NAV_TEST_IDS.accountTenant,
|
|
1040
|
-
children: richAccount.tenantName
|
|
1041
|
-
}
|
|
1042
|
-
) : null,
|
|
1043
|
-
richAccount.plan ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1044
|
-
reactNative.View,
|
|
1045
|
-
{
|
|
1046
|
-
style: [navStyles.planBadge, { backgroundColor: planToneColor(theme, richAccount.plan.tone) }],
|
|
1047
|
-
testID: NAV_TEST_IDS.accountPlan,
|
|
1048
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.planBadgeText, { color: planBadgeInk(theme, richAccount.plan.tone) }], children: richAccount.plan.label })
|
|
1049
|
-
}
|
|
1050
|
-
) : null
|
|
1051
|
-
] }) : null,
|
|
1062
|
+
stacked ? null : identityBlocks,
|
|
1052
1063
|
legacyAccount ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1053
1064
|
FocusableTouchable,
|
|
1054
1065
|
{
|
|
@@ -1085,7 +1096,8 @@ var Topbar = ({
|
|
|
1085
1096
|
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.accountText, { color: onPrimaryInk }], children: logout.label })
|
|
1086
1097
|
}
|
|
1087
1098
|
)
|
|
1088
|
-
] })
|
|
1099
|
+
] }),
|
|
1100
|
+
stacked ? identityBlocks : null
|
|
1089
1101
|
]
|
|
1090
1102
|
}
|
|
1091
1103
|
);
|