@headless-adminapp/fluent 0.0.17-alpha.30 → 0.0.17-alpha.31

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 (9) hide show
  1. package/App/AppHeaderContianer.d.ts +5 -1
  2. package/App/AppHeaderContianer.js +14 -11
  3. package/App/AppLogo.js +14 -2
  4. package/App/AppUI.js +9 -1
  5. package/App/NavigationContainer.d.ts +10 -1
  6. package/App/NavigationContainer.js +5 -4
  7. package/PageEntityForm/CommandContainer.js +9 -5
  8. package/form/controls/LookupControl.js +1 -1
  9. package/package.json +2 -2
package/App/AppHeaderContianer.d.ts CHANGED
@@ -1,2 +1,6 @@
1
1
  import { FC } from 'react';
2
- export declare const AppHeaderContainer: FC;
2
+ interface AppHeaderContainerProps {
3
+ onNavToggle?: () => void;
4
+ }
5
+ export declare const AppHeaderContainer: FC<AppHeaderContainerProps>;
6
+ export {};
package/App/AppHeaderContianer.js CHANGED
@@ -3,21 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.AppHeaderContainer = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_components_1 = require("@fluentui/react-components");
6
+ const react_nav_preview_1 = require("@fluentui/react-nav-preview");
6
7
  const app_1 = require("@headless-adminapp/app/app");
7
8
  const hooks_1 = require("@headless-adminapp/app/auth/hooks");
9
+ const hooks_2 = require("@headless-adminapp/app/hooks");
8
10
  const locale_1 = require("@headless-adminapp/app/locale");
9
11
  const icons_1 = require("@headless-adminapp/icons");
10
12
  const react_1 = require("react");
11
13
  const AppLogo_1 = require("./AppLogo");
12
14
  const AppStringContext_1 = require("./AppStringContext");
13
15
  const QuickActionItem_1 = require("./QuickActionItem");
14
- const AppHeaderContainer = () => {
16
+ const AppHeaderContainer = ({ onNavToggle, }) => {
15
17
  var _a, _b;
16
18
  const { app } = (0, app_1.useAppContext)();
17
19
  const authSession = (0, hooks_1.useAuthSession)();
18
20
  const logout = (0, hooks_1.useLogout)();
19
21
  const strings = (0, AppStringContext_1.useAppStrings)();
20
22
  const { language } = (0, locale_1.useLocale)();
23
+ const isMobile = (0, hooks_2.useIsMobile)();
21
24
  const initials = (0, react_1.useMemo)(() => {
22
25
  return authSession === null || authSession === void 0 ? void 0 : authSession.fullName.split(' ').map((item) => item[0]).slice(0, 2).join('');
23
26
  }, [authSession === null || authSession === void 0 ? void 0 : authSession.fullName]);
@@ -27,17 +30,17 @@ const AppHeaderContainer = () => {
27
30
  height: 50,
28
31
  minHeight: 50,
29
32
  background: react_components_1.tokens.colorBrandBackground,
30
- }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
31
- display: 'flex',
32
- alignItems: 'center',
33
- gap: 12,
34
- paddingLeft: 20,
35
- paddingRight: 8,
36
- cursor: 'pointer',
37
- color: 'white',
38
- }, children: [(0, jsx_runtime_1.jsx)(AppLogo_1.AppLogo, { logo: app.logo, title: app.title }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { children: app.title })] }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
33
+ paddingInline: 8,
34
+ gap: 8,
35
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isMobile && ((0, jsx_runtime_1.jsx)("div", { style: {
36
+ cursor: 'pointer',
37
+ }, onClick: onNavToggle, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: { color: 'white' } }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
38
+ display: 'flex',
39
+ alignItems: 'center',
40
+ cursor: 'pointer',
41
+ color: 'white',
42
+ }, children: [(0, jsx_runtime_1.jsx)(AppLogo_1.AppLogo, { logo: app.logo, title: app.title }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { paddingLeft: 4 }, children: app.title })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
39
43
  paddingLeft: 8,
40
- paddingRight: 8,
41
44
  display: 'flex',
42
45
  gap: 16,
43
46
  }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: (_a = app.quickActionItems) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
package/App/AppLogo.js CHANGED
@@ -7,10 +7,22 @@ const AppLogo = ({ logo, title }) => {
7
7
  var _a;
8
8
  if (logo.Icon) {
9
9
  const Icon = (_a = logo.Icon) !== null && _a !== void 0 ? _a : icons_1.IconPlaceholder;
10
- return (0, jsx_runtime_1.jsx)(Icon, { size: 24 });
10
+ return ((0, jsx_runtime_1.jsx)("div", { style: {
11
+ display: 'flex',
12
+ alignItems: 'center',
13
+ justifyContent: 'center',
14
+ width: 32,
15
+ height: 32,
16
+ }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 24 }) }));
11
17
  }
12
18
  if (logo.image) {
13
- return ((0, jsx_runtime_1.jsx)("img", { src: logo.image, alt: title, style: { width: 24, height: 24 } }));
19
+ return ((0, jsx_runtime_1.jsx)("div", { style: {
20
+ display: 'flex',
21
+ alignItems: 'center',
22
+ justifyContent: 'center',
23
+ width: 32,
24
+ height: 32,
25
+ }, children: (0, jsx_runtime_1.jsx)("img", { src: logo.image, alt: title, style: { width: 24, height: 24 } }) }));
14
26
  }
15
27
  return null;
16
28
  };
package/App/AppUI.js CHANGED
@@ -2,10 +2,18 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.AppUI = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const hooks_1 = require("@headless-adminapp/app/hooks");
6
+ const react_1 = require("react");
5
7
  const AppHeaderContianer_1 = require("./AppHeaderContianer");
6
8
  const NavigationContainer_1 = require("./NavigationContainer");
7
9
  const AppUI = ({ children }) => {
8
- return ((0, jsx_runtime_1.jsxs)("main", { style: { display: 'flex', flexDirection: 'column', height: '100vh' }, children: [(0, jsx_runtime_1.jsx)(AppHeaderContianer_1.AppHeaderContainer, {}), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)(NavigationContainer_1.NavigationContainer, {}), (0, jsx_runtime_1.jsx)("div", { style: {
10
+ const isMobile = (0, hooks_1.useIsMobile)();
11
+ const [isNavOpen, setIsNavOpen] = (0, react_1.useState)(!isMobile);
12
+ const navType = (0, react_1.useMemo)(() => (isMobile ? 'overlay' : 'inline'), [isMobile]);
13
+ (0, react_1.useEffect)(() => {
14
+ setIsNavOpen(!isMobile);
15
+ }, [isMobile]);
16
+ return ((0, jsx_runtime_1.jsxs)("main", { style: { display: 'flex', flexDirection: 'column', height: '100vh' }, children: [(0, jsx_runtime_1.jsx)(AppHeaderContianer_1.AppHeaderContainer, { onNavToggle: () => setIsNavOpen(!isNavOpen) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)(NavigationContainer_1.NavigationContainer, { open: isNavOpen, type: navType, onOpenChange: (open) => setIsNavOpen(open) }), (0, jsx_runtime_1.jsx)("div", { style: {
9
17
  display: 'flex',
10
18
  flexDirection: 'column',
11
19
  flex: 1,
package/App/NavigationContainer.d.ts CHANGED
@@ -1 +1,10 @@
1
- export declare const NavigationContainer: () => import("react/jsx-runtime").JSX.Element;
1
+ import { DrawerProps } from '@fluentui/react-components';
2
+ import { FC } from 'react';
3
+ type DrawerType = Required<DrawerProps>['type'];
4
+ interface NavigationContainerProps {
5
+ open: boolean;
6
+ type: DrawerType;
7
+ onOpenChange: (open: boolean) => void;
8
+ }
9
+ export declare const NavigationContainer: FC<NavigationContainerProps>;
10
+ export {};
package/App/NavigationContainer.js CHANGED
@@ -31,18 +31,16 @@ const useStyles = (0, react_components_1.makeStyles)({
31
31
  gridRowGap: react_components_1.tokens.spacingVerticalS,
32
32
  },
33
33
  });
34
- const NavigationContainer = () => {
34
+ const NavigationContainer = ({ open, type, onOpenChange, }) => {
35
35
  const styles = useStyles();
36
36
  const { app, schemaMetadataDic } = (0, app_1.useAppContext)();
37
- const [isOpen] = (0, react_1.useState)(true);
38
- const [type] = (0, react_1.useState)('inline');
39
37
  const router = (0, hooks_1.useRouter)();
40
38
  const pathname = (0, hooks_1.usePathname)();
41
39
  const selectedPath = pathname;
42
40
  const { language } = (0, locale_1.useLocale)();
43
41
  const isRouteActive = (0, hooks_1.useIsRouteActive)();
44
42
  const routeResolver = (0, hooks_1.useRouteResolver)();
45
- return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: isOpen, type: type, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => {
43
+ return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: open, type: type, onOpenChange: (value, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => {
46
44
  var _a, _b;
47
45
  const navItem = (0, utils_1.transformNavPageItem)({
48
46
  item,
@@ -53,6 +51,9 @@ const NavigationContainer = () => {
53
51
  const Icon = (_b = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.Icons.Entity) !== null && _b !== void 0 ? _b : icons_1.IconPlaceholder;
54
52
  const isActive = isRouteActive(selectedPath, item);
55
53
  return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: navItem.link, onClick: (event) => {
54
+ if (type === 'overlay') {
55
+ onOpenChange(false);
56
+ }
56
57
  event.preventDefault();
57
58
  router.push(navItem.link);
58
59
  }, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20, filled: isActive, color: isActive
package/PageEntityForm/CommandContainer.js CHANGED
@@ -3,18 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.CommandContainer = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
6
+ const hooks_2 = require("@headless-adminapp/app/hooks");
6
7
  const mutable_1 = require("@headless-adminapp/app/mutable");
7
8
  const recordset_1 = require("@headless-adminapp/app/recordset");
8
- const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
9
- const hooks_3 = require("@headless-adminapp/app/route/hooks");
9
+ const hooks_3 = require("@headless-adminapp/app/recordset/hooks");
10
+ const hooks_4 = require("@headless-adminapp/app/route/hooks");
10
11
  const icons_1 = require("@headless-adminapp/icons");
11
12
  const react_1 = require("react");
12
13
  const OverflowCommandBar_1 = require("../OverflowCommandBar");
13
14
  const CommandContainer = () => {
14
15
  const gridCommands = (0, hooks_1.useMainFormCommands)();
15
- const router = (0, hooks_3.useRouter)();
16
+ const router = (0, hooks_4.useRouter)();
17
+ const isMobile = (0, hooks_2.useIsMobile)();
16
18
  const schema = (0, hooks_1.useDataFormSchema)();
17
- const [recordSetVisible, setRecordSetVisible] = (0, hooks_2.useRecordSetVisibility)();
19
+ const [recordSetVisible, setRecordSetVisible] = (0, hooks_3.useRecordSetVisibility)();
18
20
  const recordSetContext = (0, mutable_1.useContextSelector)(recordset_1.RecordSetContext, (state) => state);
19
21
  const extendedCommands = (0, react_1.useMemo)(() => {
20
22
  return [
@@ -28,7 +30,8 @@ const CommandContainer = () => {
28
30
  },
29
31
  ],
30
32
  ...(recordSetContext.logicalName === schema.logicalName &&
31
- recordSetContext.ids.length > 0
33
+ recordSetContext.ids.length > 0 &&
34
+ !isMobile
32
35
  ? [
33
36
  [
34
37
  {
@@ -45,6 +48,7 @@ const CommandContainer = () => {
45
48
  ];
46
49
  }, [
47
50
  gridCommands,
51
+ isMobile,
48
52
  recordSetContext.ids.length,
49
53
  recordSetContext.logicalName,
50
54
  recordSetVisible,
package/form/controls/LookupControl.js CHANGED
@@ -111,7 +111,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
111
111
  });
112
112
  }
113
113
  };
114
- return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })), placeholder: !value ? placeholder : '', inputMode: "search", style: { width: '100%' }, autoComplete: "off", readOnly: readOnly || disabled,
114
+ return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })), placeholder: !value ? placeholder : '', inputMode: "search", style: { width: '100%', minWidth: 'unset' }, autoComplete: "off", readOnly: readOnly || disabled,
115
115
  // disabled={disabled}
116
116
  open: open && !value && !readOnly && !disabled, value: !value ? searchText : '', onOpenChange: (e, data) => setOpen(data.open), onChange: (e) => {
117
117
  setSearchText(e.target.value);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@headless-adminapp/fluent",
3
- "version": "0.0.17-alpha.30",
3
+ "version": "0.0.17-alpha.31",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -47,5 +47,5 @@
47
47
  "uuid": "11.0.3",
48
48
  "yup": "^1.4.0"
49
49
  },
50
- "gitHead": "713f5087ad8c942449ac5e043de6cb1f4df9766a"
50
+ "gitHead": "6d944e956a4715d1a08d0132d076cbf0bbd5c766"
51
51
  }