@gravity-ui/page-constructor 7.10.0 → 7.11.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/build/cjs/components/IconWrapper/IconWrapper.css +3 -1
- package/build/cjs/components/IconWrapper/IconWrapper.js +5 -1
- package/build/cjs/components/IconWrapper/IconWrapper.js.map +1 -1
- package/build/cjs/navigation/components/Navigation/Navigation.d.ts +2 -1
- package/build/cjs/navigation/components/Navigation/Navigation.js +5 -2
- package/build/cjs/navigation/components/Navigation/Navigation.js.map +1 -1
- package/build/esm/components/IconWrapper/IconWrapper.css +3 -1
- package/build/esm/components/IconWrapper/IconWrapper.js +5 -1
- package/build/esm/components/IconWrapper/IconWrapper.js.map +1 -1
- package/build/esm/navigation/components/Navigation/Navigation.d.ts +2 -1
- package/build/esm/navigation/components/Navigation/Navigation.js +5 -2
- package/build/esm/navigation/components/Navigation/Navigation.js.map +1 -1
- package/package.json +1 -1
- package/widget/index.js +1 -1
|
@@ -14,10 +14,12 @@ unpredictable css rules order in build */
|
|
|
14
14
|
max-width: 100%;
|
|
15
15
|
margin-bottom: 12px;
|
|
16
16
|
height: 32px;
|
|
17
|
-
width: 32px;
|
|
18
17
|
object-fit: contain;
|
|
19
18
|
display: block;
|
|
20
19
|
}
|
|
20
|
+
.pc-icon-wrapper__icon_gravity-icon {
|
|
21
|
+
width: 32px;
|
|
22
|
+
}
|
|
21
23
|
.pc-icon-wrapper__icon_icon-position_left {
|
|
22
24
|
height: 22px;
|
|
23
25
|
width: 22px;
|
|
@@ -14,7 +14,11 @@ const IconWrapper = (props) => {
|
|
|
14
14
|
const iconPosition = icon?.position;
|
|
15
15
|
const gravityIconPosition = gravityIcon?.position;
|
|
16
16
|
const position = gravityIconPosition || iconPosition;
|
|
17
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: b({ ['icon-position']: position }, className), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { icon: icon?.value, gravityIcon: gravityIcon?.value, containerClassName: b('icon-container'), className: b('icon', {
|
|
17
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: b({ ['icon-position']: position }, className), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { icon: icon?.value, gravityIcon: gravityIcon?.value, containerClassName: b('icon-container'), className: b('icon', {
|
|
18
|
+
['icon-position']: position,
|
|
19
|
+
size,
|
|
20
|
+
['gravity-icon']: Boolean(gravityIcon),
|
|
21
|
+
}) }), (0, jsx_runtime_1.jsx)("div", { className: b('content', { ['icon-position']: position }), children: children })] }));
|
|
18
22
|
};
|
|
19
23
|
exports.default = IconWrapper;
|
|
20
24
|
//# sourceMappingURL=IconWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWrapper.js","sourceRoot":"../../../../src","sources":["components/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAG/B,gDAAkC;AAClC,mEAAgC;AAGhC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,KAAiE,EAAE,EAAE;IACtF,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAC7D,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACxB,OAAO,uBAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;IACvD,CAAC;IAED,MAAM,YAAY,GAAG,IAAI,EAAE,QAAQ,CAAC;IAEpC,MAAM,mBAAmB,GAAG,WAAW,EAAE,QAAQ,CAAC;IAElD,MAAM,QAAQ,GAAG,mBAAmB,IAAI,YAAY,CAAC;IAErD,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAC,EAAE,SAAS,CAAC,aACvD,uBAAC,cAAI,IACD,IAAI,EAAE,IAAI,EAAE,KAAK,EACjB,WAAW,EAAE,WAAW,EAAE,KAAK,EAC/B,kBAAkB,EAAE,CAAC,CAAC,gBAAgB,CAAC,EACvC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"IconWrapper.js","sourceRoot":"../../../../src","sources":["components/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAG/B,gDAAkC;AAClC,mEAAgC;AAGhC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,KAAiE,EAAE,EAAE;IACtF,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAC7D,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACxB,OAAO,uBAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;IACvD,CAAC;IAED,MAAM,YAAY,GAAG,IAAI,EAAE,QAAQ,CAAC;IAEpC,MAAM,mBAAmB,GAAG,WAAW,EAAE,QAAQ,CAAC;IAElD,MAAM,QAAQ,GAAG,mBAAmB,IAAI,YAAY,CAAC;IAErD,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAC,EAAE,SAAS,CAAC,aACvD,uBAAC,cAAI,IACD,IAAI,EAAE,IAAI,EAAE,KAAK,EACjB,WAAW,EAAE,WAAW,EAAE,KAAK,EAC/B,kBAAkB,EAAE,CAAC,CAAC,gBAAgB,CAAC,EACvC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;oBACjB,CAAC,eAAe,CAAC,EAAE,QAAQ;oBAC3B,IAAI;oBACJ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC;iBACzC,CAAC,GACJ,EACF,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAC,CAAC,YAAG,QAAQ,GAAO,IAC3E,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport type {ClassNameProps, IconWrapperProps} from '../../models';\nimport {block} from '../../utils';\nimport Icon from '../Icon/Icon';\n\nimport './IconWrapper.scss';\nconst b = block('icon-wrapper');\n\nconst IconWrapper = (props: React.PropsWithChildren<IconWrapperProps> & ClassNameProps) => {\n const {icon, children, className, size, gravityIcon} = props;\n if (!icon && !gravityIcon) {\n return <React.Fragment>{children}</React.Fragment>;\n }\n\n const iconPosition = icon?.position;\n\n const gravityIconPosition = gravityIcon?.position;\n\n const position = gravityIconPosition || iconPosition;\n\n return (\n <div className={b({['icon-position']: position}, className)}>\n <Icon\n icon={icon?.value}\n gravityIcon={gravityIcon?.value}\n containerClassName={b('icon-container')}\n className={b('icon', {\n ['icon-position']: position,\n size,\n ['gravity-icon']: Boolean(gravityIcon),\n })}\n />\n <div className={b('content', {['icon-position']: position})}>{children}</div>\n </div>\n );\n};\n\nexport default IconWrapper;\n"]}
|
|
@@ -4,6 +4,7 @@ export interface NavigationComponentProps extends ClassNameProps {
|
|
|
4
4
|
logo: ThemedNavigationLogoData;
|
|
5
5
|
data: HeaderData;
|
|
6
6
|
mobilePortalContainer?: React.RefObject<HTMLElement>;
|
|
7
|
+
onSidebarChange?: (isOpen: boolean) => void;
|
|
7
8
|
}
|
|
8
|
-
export declare const Navigation: ({ data, logo, className, mobilePortalContainer, }: NavigationComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const Navigation: ({ data, logo, className, mobilePortalContainer, onSidebarChange, }: NavigationComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
export default Navigation;
|
|
@@ -11,12 +11,15 @@ const hooks_1 = require("../../hooks/index.js");
|
|
|
11
11
|
const DesktopNavigation_1 = tslib_1.__importDefault(require("../DesktopNavigation/DesktopNavigation.js"));
|
|
12
12
|
const MobileNavigation_1 = tslib_1.__importDefault(require("../MobileNavigation/MobileNavigation.js"));
|
|
13
13
|
const b = (0, utils_1.block)('navigation');
|
|
14
|
-
const Navigation = ({ data, logo, className, mobilePortalContainer, }) => {
|
|
14
|
+
const Navigation = ({ data, logo, className, mobilePortalContainer, onSidebarChange, }) => {
|
|
15
15
|
const { leftItems, rightItems, customMobileHeaderItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
|
|
16
16
|
const [isSidebarOpened, setIsSidebarOpened] = React.useState(false);
|
|
17
17
|
const [showBorder] = (0, hooks_1.useShowBorder)(withBorder, withBorderOnScroll);
|
|
18
18
|
const { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange } = (0, hooks_1.useActiveNavItem)(iconSize, leftItems, rightItems);
|
|
19
|
-
const onSidebarOpenedChange = (isOpen) =>
|
|
19
|
+
const onSidebarOpenedChange = (isOpen) => {
|
|
20
|
+
onSidebarChange?.(isOpen);
|
|
21
|
+
setIsSidebarOpened(isOpen);
|
|
22
|
+
};
|
|
20
23
|
return ((0, jsx_runtime_1.jsx)(grid_1.Grid, { className: b({ 'with-border': showBorder }, className), children: (0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsx)(grid_1.Col, { children: (0, jsx_runtime_1.jsxs)("nav", { children: [(0, jsx_runtime_1.jsx)(DesktopNavigation_1.default, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, customMobileHeaderItems: customMobileHeaderItems, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }), (0, jsx_runtime_1.jsx)(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false), children: (0, jsx_runtime_1.jsx)(MobileNavigation_1.default, { topItems: leftItemsWithIconSize, bottomItems: rightItemsWithIconSize, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, portalContainer: mobilePortalContainer }) })] }) }) }) }));
|
|
21
24
|
};
|
|
22
25
|
exports.Navigation = Navigation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.js","sourceRoot":"../../../../../src","sources":["navigation/components/Navigation/Navigation.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,4GAAyE;AACzE,iDAA6C;AAE7C,mDAAqC;AACrC,gDAA4D;AAC5D,0GAAuE;AACvE,uGAAoE;AAIpE,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Navigation.js","sourceRoot":"../../../../../src","sources":["navigation/components/Navigation/Navigation.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,4GAAyE;AACzE,iDAA6C;AAE7C,mDAAqC;AACrC,gDAA4D;AAC5D,0GAAuE;AACvE,uGAAoE;AAIpE,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AASvB,MAAM,UAAU,GAAG,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,qBAAqB,EACrB,eAAe,GACQ,EAAE,EAAE;IAC3B,MAAM,EACF,SAAS,EACT,UAAU,EACV,uBAAuB,EACvB,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,KAAK,EAClB,kBAAkB,GAAG,IAAI,GAC5B,GAAG,IAAI,CAAC;IAET,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,UAAU,CAAC,GAAG,IAAA,qBAAa,EAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;IACnE,MAAM,EAAC,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,kBAAkB,EAAC,GACnF,IAAA,wBAAgB,EAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IAEtD,MAAM,qBAAqB,GAAG,CAAC,MAAe,EAAE,EAAE;QAC9C,eAAe,EAAE,CAAC,MAAM,CAAC,CAAC;QAC1B,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,uBAAC,WAAI,IAAC,SAAS,EAAE,CAAC,CAAC,EAAC,aAAa,EAAE,UAAU,EAAC,EAAE,SAAS,CAAC,YACtD,uBAAC,UAAG,cACA,uBAAC,UAAG,cACA,4CACI,uBAAC,2BAAiB,IACd,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,uBAAuB,EAAE,uBAAuB,EAChD,eAAe,EAAE,eAAe,EAChC,qBAAqB,EAAE,qBAAqB,GAC9C,EACF,uBAAC,sBAAY,IAAC,cAAc,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,YAC5D,uBAAC,0BAAgB,IACb,QAAQ,EAAE,qBAAqB,EAC/B,WAAW,EAAE,sBAAsB,EACnC,QAAQ,EAAE,eAAe,EACzB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,qBAAqB,GACxC,GACS,IACb,GACJ,GACJ,GACH,CACV,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,UAAU,cAwDrB;AAEF,kBAAe,kBAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport OutsideClick from '../../../components/OutsideClick/OutsideClick';\nimport {Col, Grid, Row} from '../../../grid';\nimport {ClassNameProps, HeaderData, ThemedNavigationLogoData} from '../../../models';\nimport {block} from '../../../utils';\nimport {useActiveNavItem, useShowBorder} from '../../hooks';\nimport DesktopNavigation from '../DesktopNavigation/DesktopNavigation';\nimport MobileNavigation from '../MobileNavigation/MobileNavigation';\n\nimport './Navigation.scss';\n\nconst b = block('navigation');\n\nexport interface NavigationComponentProps extends ClassNameProps {\n logo: ThemedNavigationLogoData;\n data: HeaderData;\n mobilePortalContainer?: React.RefObject<HTMLElement>;\n onSidebarChange?: (isOpen: boolean) => void;\n}\n\nexport const Navigation = ({\n data,\n logo,\n className,\n mobilePortalContainer,\n onSidebarChange,\n}: NavigationComponentProps) => {\n const {\n leftItems,\n rightItems,\n customMobileHeaderItems,\n iconSize = 20,\n withBorder = false,\n withBorderOnScroll = true,\n } = data;\n\n const [isSidebarOpened, setIsSidebarOpened] = React.useState(false);\n const [showBorder] = useShowBorder(withBorder, withBorderOnScroll);\n const {activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange} =\n useActiveNavItem(iconSize, leftItems, rightItems);\n\n const onSidebarOpenedChange = (isOpen: boolean) => {\n onSidebarChange?.(isOpen);\n setIsSidebarOpened(isOpen);\n };\n\n return (\n <Grid className={b({'with-border': showBorder}, className)}>\n <Row>\n <Col>\n <nav>\n <DesktopNavigation\n logo={logo}\n activeItemId={activeItemId}\n onActiveItemChange={onActiveItemChange}\n leftItemsWithIconSize={leftItemsWithIconSize}\n rightItemsWithIconSize={rightItemsWithIconSize}\n customMobileHeaderItems={customMobileHeaderItems}\n isSidebarOpened={isSidebarOpened}\n onSidebarOpenedChange={onSidebarOpenedChange}\n />\n <OutsideClick onOutsideClick={() => onSidebarOpenedChange(false)}>\n <MobileNavigation\n topItems={leftItemsWithIconSize}\n bottomItems={rightItemsWithIconSize}\n isOpened={isSidebarOpened}\n activeItemId={activeItemId}\n onActiveItemChange={onActiveItemChange}\n portalContainer={mobilePortalContainer}\n />\n </OutsideClick>\n </nav>\n </Col>\n </Row>\n </Grid>\n );\n};\n\nexport default Navigation;\n"]}
|
|
@@ -14,10 +14,12 @@ unpredictable css rules order in build */
|
|
|
14
14
|
max-width: 100%;
|
|
15
15
|
margin-bottom: 12px;
|
|
16
16
|
height: 32px;
|
|
17
|
-
width: 32px;
|
|
18
17
|
object-fit: contain;
|
|
19
18
|
display: block;
|
|
20
19
|
}
|
|
20
|
+
.pc-icon-wrapper__icon_gravity-icon {
|
|
21
|
+
width: 32px;
|
|
22
|
+
}
|
|
21
23
|
.pc-icon-wrapper__icon_icon-position_left {
|
|
22
24
|
height: 22px;
|
|
23
25
|
width: 22px;
|
|
@@ -12,7 +12,11 @@ const IconWrapper = (props) => {
|
|
|
12
12
|
const iconPosition = icon?.position;
|
|
13
13
|
const gravityIconPosition = gravityIcon?.position;
|
|
14
14
|
const position = gravityIconPosition || iconPosition;
|
|
15
|
-
return (_jsxs("div", { className: b({ ['icon-position']: position }, className), children: [_jsx(Icon, { icon: icon?.value, gravityIcon: gravityIcon?.value, containerClassName: b('icon-container'), className: b('icon', {
|
|
15
|
+
return (_jsxs("div", { className: b({ ['icon-position']: position }, className), children: [_jsx(Icon, { icon: icon?.value, gravityIcon: gravityIcon?.value, containerClassName: b('icon-container'), className: b('icon', {
|
|
16
|
+
['icon-position']: position,
|
|
17
|
+
size,
|
|
18
|
+
['gravity-icon']: Boolean(gravityIcon),
|
|
19
|
+
}) }), _jsx("div", { className: b('content', { ['icon-position']: position }), children: children })] }));
|
|
16
20
|
};
|
|
17
21
|
export default IconWrapper;
|
|
18
22
|
//# sourceMappingURL=IconWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWrapper.js","sourceRoot":"../../../../src","sources":["components/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,IAAI,wBAAqB;AAEhC,OAAO,mBAAmB,CAAC;AAC3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,KAAiE,EAAE,EAAE;IACtF,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAC7D,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACxB,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;IACvD,CAAC;IAED,MAAM,YAAY,GAAG,IAAI,EAAE,QAAQ,CAAC;IAEpC,MAAM,mBAAmB,GAAG,WAAW,EAAE,QAAQ,CAAC;IAElD,MAAM,QAAQ,GAAG,mBAAmB,IAAI,YAAY,CAAC;IAErD,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAC,EAAE,SAAS,CAAC,aACvD,KAAC,IAAI,IACD,IAAI,EAAE,IAAI,EAAE,KAAK,EACjB,WAAW,EAAE,WAAW,EAAE,KAAK,EAC/B,kBAAkB,EAAE,CAAC,CAAC,gBAAgB,CAAC,EACvC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"IconWrapper.js","sourceRoot":"../../../../src","sources":["components/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,IAAI,wBAAqB;AAEhC,OAAO,mBAAmB,CAAC;AAC3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,KAAiE,EAAE,EAAE;IACtF,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAC7D,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACxB,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;IACvD,CAAC;IAED,MAAM,YAAY,GAAG,IAAI,EAAE,QAAQ,CAAC;IAEpC,MAAM,mBAAmB,GAAG,WAAW,EAAE,QAAQ,CAAC;IAElD,MAAM,QAAQ,GAAG,mBAAmB,IAAI,YAAY,CAAC;IAErD,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAC,EAAE,SAAS,CAAC,aACvD,KAAC,IAAI,IACD,IAAI,EAAE,IAAI,EAAE,KAAK,EACjB,WAAW,EAAE,WAAW,EAAE,KAAK,EAC/B,kBAAkB,EAAE,CAAC,CAAC,gBAAgB,CAAC,EACvC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;oBACjB,CAAC,eAAe,CAAC,EAAE,QAAQ;oBAC3B,IAAI;oBACJ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC;iBACzC,CAAC,GACJ,EACF,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAC,CAAC,YAAG,QAAQ,GAAO,IAC3E,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport type {ClassNameProps, IconWrapperProps} from '../../models';\nimport {block} from '../../utils';\nimport Icon from '../Icon/Icon';\n\nimport './IconWrapper.scss';\nconst b = block('icon-wrapper');\n\nconst IconWrapper = (props: React.PropsWithChildren<IconWrapperProps> & ClassNameProps) => {\n const {icon, children, className, size, gravityIcon} = props;\n if (!icon && !gravityIcon) {\n return <React.Fragment>{children}</React.Fragment>;\n }\n\n const iconPosition = icon?.position;\n\n const gravityIconPosition = gravityIcon?.position;\n\n const position = gravityIconPosition || iconPosition;\n\n return (\n <div className={b({['icon-position']: position}, className)}>\n <Icon\n icon={icon?.value}\n gravityIcon={gravityIcon?.value}\n containerClassName={b('icon-container')}\n className={b('icon', {\n ['icon-position']: position,\n size,\n ['gravity-icon']: Boolean(gravityIcon),\n })}\n />\n <div className={b('content', {['icon-position']: position})}>{children}</div>\n </div>\n );\n};\n\nexport default IconWrapper;\n"]}
|
|
@@ -5,6 +5,7 @@ export interface NavigationComponentProps extends ClassNameProps {
|
|
|
5
5
|
logo: ThemedNavigationLogoData;
|
|
6
6
|
data: HeaderData;
|
|
7
7
|
mobilePortalContainer?: React.RefObject<HTMLElement>;
|
|
8
|
+
onSidebarChange?: (isOpen: boolean) => void;
|
|
8
9
|
}
|
|
9
|
-
export declare const Navigation: ({ data, logo, className, mobilePortalContainer, }: NavigationComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const Navigation: ({ data, logo, className, mobilePortalContainer, onSidebarChange, }: NavigationComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
11
|
export default Navigation;
|
|
@@ -8,12 +8,15 @@ import DesktopNavigation from "../DesktopNavigation/DesktopNavigation.js";
|
|
|
8
8
|
import MobileNavigation from "../MobileNavigation/MobileNavigation.js";
|
|
9
9
|
import './Navigation.css';
|
|
10
10
|
const b = block('navigation');
|
|
11
|
-
export const Navigation = ({ data, logo, className, mobilePortalContainer, }) => {
|
|
11
|
+
export const Navigation = ({ data, logo, className, mobilePortalContainer, onSidebarChange, }) => {
|
|
12
12
|
const { leftItems, rightItems, customMobileHeaderItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
|
|
13
13
|
const [isSidebarOpened, setIsSidebarOpened] = React.useState(false);
|
|
14
14
|
const [showBorder] = useShowBorder(withBorder, withBorderOnScroll);
|
|
15
15
|
const { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange } = useActiveNavItem(iconSize, leftItems, rightItems);
|
|
16
|
-
const onSidebarOpenedChange = (isOpen) =>
|
|
16
|
+
const onSidebarOpenedChange = (isOpen) => {
|
|
17
|
+
onSidebarChange?.(isOpen);
|
|
18
|
+
setIsSidebarOpened(isOpen);
|
|
19
|
+
};
|
|
17
20
|
return (_jsx(Grid, { className: b({ 'with-border': showBorder }, className), children: _jsx(Row, { children: _jsx(Col, { children: _jsxs("nav", { children: [_jsx(DesktopNavigation, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, customMobileHeaderItems: customMobileHeaderItems, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }), _jsx(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false), children: _jsx(MobileNavigation, { topItems: leftItemsWithIconSize, bottomItems: rightItemsWithIconSize, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, portalContainer: mobilePortalContainer }) })] }) }) }) }));
|
|
18
21
|
};
|
|
19
22
|
export default Navigation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.js","sourceRoot":"../../../../../src","sources":["navigation/components/Navigation/Navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,YAAY,yDAAsD;AACzE,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAC,+BAAsB;AAE7C,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,EAAC,gBAAgB,EAAE,aAAa,EAAC,6BAAoB;AAC5D,OAAO,iBAAiB,kDAA+C;AACvE,OAAO,gBAAgB,gDAA6C;AAEpE,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Navigation.js","sourceRoot":"../../../../../src","sources":["navigation/components/Navigation/Navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,YAAY,yDAAsD;AACzE,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAC,+BAAsB;AAE7C,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,EAAC,gBAAgB,EAAE,aAAa,EAAC,6BAAoB;AAC5D,OAAO,iBAAiB,kDAA+C;AACvE,OAAO,gBAAgB,gDAA6C;AAEpE,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAS9B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,qBAAqB,EACrB,eAAe,GACQ,EAAE,EAAE;IAC3B,MAAM,EACF,SAAS,EACT,UAAU,EACV,uBAAuB,EACvB,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,KAAK,EAClB,kBAAkB,GAAG,IAAI,GAC5B,GAAG,IAAI,CAAC;IAET,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,UAAU,CAAC,GAAG,aAAa,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;IACnE,MAAM,EAAC,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,kBAAkB,EAAC,GACnF,gBAAgB,CAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IAEtD,MAAM,qBAAqB,GAAG,CAAC,MAAe,EAAE,EAAE;QAC9C,eAAe,EAAE,CAAC,MAAM,CAAC,CAAC;QAC1B,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,EAAC,aAAa,EAAE,UAAU,EAAC,EAAE,SAAS,CAAC,YACtD,KAAC,GAAG,cACA,KAAC,GAAG,cACA,0BACI,KAAC,iBAAiB,IACd,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,uBAAuB,EAAE,uBAAuB,EAChD,eAAe,EAAE,eAAe,EAChC,qBAAqB,EAAE,qBAAqB,GAC9C,EACF,KAAC,YAAY,IAAC,cAAc,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,YAC5D,KAAC,gBAAgB,IACb,QAAQ,EAAE,qBAAqB,EAC/B,WAAW,EAAE,sBAAsB,EACnC,QAAQ,EAAE,eAAe,EACzB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,qBAAqB,GACxC,GACS,IACb,GACJ,GACJ,GACH,CACV,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport OutsideClick from '../../../components/OutsideClick/OutsideClick';\nimport {Col, Grid, Row} from '../../../grid';\nimport {ClassNameProps, HeaderData, ThemedNavigationLogoData} from '../../../models';\nimport {block} from '../../../utils';\nimport {useActiveNavItem, useShowBorder} from '../../hooks';\nimport DesktopNavigation from '../DesktopNavigation/DesktopNavigation';\nimport MobileNavigation from '../MobileNavigation/MobileNavigation';\n\nimport './Navigation.scss';\n\nconst b = block('navigation');\n\nexport interface NavigationComponentProps extends ClassNameProps {\n logo: ThemedNavigationLogoData;\n data: HeaderData;\n mobilePortalContainer?: React.RefObject<HTMLElement>;\n onSidebarChange?: (isOpen: boolean) => void;\n}\n\nexport const Navigation = ({\n data,\n logo,\n className,\n mobilePortalContainer,\n onSidebarChange,\n}: NavigationComponentProps) => {\n const {\n leftItems,\n rightItems,\n customMobileHeaderItems,\n iconSize = 20,\n withBorder = false,\n withBorderOnScroll = true,\n } = data;\n\n const [isSidebarOpened, setIsSidebarOpened] = React.useState(false);\n const [showBorder] = useShowBorder(withBorder, withBorderOnScroll);\n const {activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange} =\n useActiveNavItem(iconSize, leftItems, rightItems);\n\n const onSidebarOpenedChange = (isOpen: boolean) => {\n onSidebarChange?.(isOpen);\n setIsSidebarOpened(isOpen);\n };\n\n return (\n <Grid className={b({'with-border': showBorder}, className)}>\n <Row>\n <Col>\n <nav>\n <DesktopNavigation\n logo={logo}\n activeItemId={activeItemId}\n onActiveItemChange={onActiveItemChange}\n leftItemsWithIconSize={leftItemsWithIconSize}\n rightItemsWithIconSize={rightItemsWithIconSize}\n customMobileHeaderItems={customMobileHeaderItems}\n isSidebarOpened={isSidebarOpened}\n onSidebarOpenedChange={onSidebarOpenedChange}\n />\n <OutsideClick onOutsideClick={() => onSidebarOpenedChange(false)}>\n <MobileNavigation\n topItems={leftItemsWithIconSize}\n bottomItems={rightItemsWithIconSize}\n isOpened={isSidebarOpened}\n activeItemId={activeItemId}\n onActiveItemChange={onActiveItemChange}\n portalContainer={mobilePortalContainer}\n />\n </OutsideClick>\n </nav>\n </Col>\n </Row>\n </Grid>\n );\n};\n\nexport default Navigation;\n"]}
|
package/package.json
CHANGED
package/widget/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default "(self.webpackChunk_gravity_ui_page_constructor=self.webpackChunk_gravity_ui_page_constructor||[]).push([[
|
|
1
|
+
export default "(self.webpackChunk_gravity_ui_page_constructor=self.webpackChunk_gravity_ui_page_constructor||[]).push([[1349],{31349:function(_,t,Y){_.exports=function(_){\"use strict\";function t(_){return _&&\"object\"==typeof _&&\"default\"in _?_:{default:_}}var Y=t(_),e={name:\"zh-tw\",weekdays:\"星期日_星期一_星期二_星期三_星期四_星期五_星期六\".split(\"_\"),weekdaysShort:\"週日_週一_週二_週三_週四_週五_週六\".split(\"_\"),weekdaysMin:\"日_一_二_三_四_五_六\".split(\"_\"),months:\"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月\".split(\"_\"),monthsShort:\"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\".split(\"_\"),ordinal:function(_,t){return\"W\"===t?_+\"週\":_+\"日\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"YYYY/MM/DD\",LL:\"YYYY年M月D日\",LLL:\"YYYY年M月D日 HH:mm\",LLLL:\"YYYY年M月D日dddd HH:mm\",l:\"YYYY/M/D\",ll:\"YYYY年M月D日\",lll:\"YYYY年M月D日 HH:mm\",llll:\"YYYY年M月D日dddd HH:mm\"},relativeTime:{future:\"%s內\",past:\"%s前\",s:\"幾秒\",m:\"1 分鐘\",mm:\"%d 分鐘\",h:\"1 小時\",hh:\"%d 小時\",d:\"1 天\",dd:\"%d 天\",M:\"1 個月\",MM:\"%d 個月\",y:\"1 年\",yy:\"%d 年\"},meridiem:function(_,t){var Y=100*_+t;return Y<600?\"凌晨\":Y<900?\"早上\":Y<1100?\"上午\":Y<1300?\"中午\":Y<1800?\"下午\":\"晚上\"}};return Y.default.locale(e,null,!0),e}(Y(74353))}}]);";
|