@firedesktop/react-base 3.0.2 → 3.1.1
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/components/AppPagination.js +13 -2
- package/dist/components/AppPagination.js.map +1 -1
- package/dist/components/Layout/Content.d.ts +3 -0
- package/dist/components/Layout/Content.js +8 -0
- package/dist/components/Layout/Content.js.map +1 -0
- package/dist/components/Layout/Footer.d.ts +3 -0
- package/dist/components/Layout/Footer.js +8 -0
- package/dist/components/Layout/Footer.js.map +1 -0
- package/dist/components/Layout/Header.d.ts +3 -0
- package/dist/components/Layout/Header.js +8 -0
- package/dist/components/Layout/Header.js.map +1 -0
- package/dist/components/Layout/Layout.d.ts +15 -0
- package/dist/components/Layout/Layout.js +21 -0
- package/dist/components/Layout/Layout.js.map +1 -0
- package/dist/components/Layout/Sider.d.ts +3 -0
- package/dist/components/Layout/Sider.js +44 -0
- package/dist/components/Layout/Sider.js.map +1 -0
- package/dist/components/Layout/Types.d.ts +19 -0
- package/dist/components/Layout/Types.js +2 -0
- package/dist/components/Layout/Types.js.map +1 -0
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.js +3 -1
- package/dist/components/index.js.map +1 -1
- package/dist/styles/layout.css +57 -0
- package/package.json +1 -1
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
13
|
import { AppIcon } from '.';
|
|
3
14
|
function AppPagination(_a) {
|
|
@@ -55,10 +66,10 @@ function AppPagination(_a) {
|
|
|
55
66
|
if (activePage !== 1)
|
|
56
67
|
onPageChange(activePage - 1);
|
|
57
68
|
};
|
|
58
|
-
return (_jsx("nav", { "aria-label": "Page navigation", className: className ? className : '', children: _jsxs("ul", { className: "pagination", children: [_jsx("li", { className: "page-item", onClick: goToFirst, children: _jsx("span", { "aria-hidden": "true", children: _jsx(AppIcon, { name: 'arrow-first' }) }) }), _jsx("li", { className: "page-item disabled
|
|
69
|
+
return (_jsx("nav", { "aria-label": "Page navigation", className: className ? className : '', children: _jsxs("ul", { className: "pagination", children: [_jsx("li", { className: "page-item".concat(activePage === 1 ? ' disabled' : ''), onClick: goToFirst, children: _jsx("span", { "aria-hidden": "true", children: _jsx(AppIcon, { name: 'arrow-first', className: 'primary-svg', iconClassName: '' }) }) }), _jsx("li", { className: "page-item".concat(activePage === 1 ? ' disabled' : ''), onClick: goToPrev, children: _jsx("span", { "aria-hidden": "true", children: _jsx(AppIcon, { name: 'arrow-prev', className: 'primary-svg', iconClassName: '' }) }) }), paginationArray.map(function (page, index) { return (_jsx("li", __assign({ className: "page-item ".concat(page === activePage ? 'active' : ''), onClick: function () {
|
|
59
70
|
if (activePage !== page)
|
|
60
71
|
onPageChange(page);
|
|
61
|
-
}, style: { borderRadius: 5 },
|
|
72
|
+
}, style: { borderRadius: 5 } }, (page === activePage ? { 'aria-current': 'page' } : {}), { children: _jsx("span", { style: { fontSize: pageFontSize, minWidth: 27, width: '100%' }, children: page }) }), index)); }), _jsx("li", { className: "page-item".concat(activePage === totalPages ? ' disabled' : ''), onClick: goToMext, children: _jsx("span", { "aria-hidden": "true", children: _jsx(AppIcon, { name: 'arrow-next', className: 'primary-svg', iconClassName: '' }) }) }), _jsx("li", { className: "page-item".concat(activePage === totalPages ? ' disabled' : ''), onClick: goToLast, children: _jsx("span", { "aria-hidden": "true", children: _jsx(AppIcon, { name: 'arrow-last', className: 'primary-svg', iconClassName: '' }) }) })] }) }));
|
|
62
73
|
}
|
|
63
74
|
export default AppPagination;
|
|
64
75
|
//# sourceMappingURL=AppPagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppPagination.js","sourceRoot":"","sources":["../../src/lib/components/AppPagination.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AppPagination.js","sourceRoot":"","sources":["../../src/lib/components/AppPagination.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC;AAW5B,SAAS,aAAa,CAAC,EAA2G;QAAzG,UAAU,gBAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,eAAW,EAAX,OAAO,mBAAG,CAAC,KAAA,EAAE,YAAY,kBAAA,EAAE,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EAAE,UAAU,gBAAA;IAClH,IAAM,mBAAmB,GAAG,UAAC,UAAkB,EAAE,YAAoB,EAAE,OAAe,EAAE,UAAkB;QACtG,IAAI,UAAU,EAAE,CAAC;YACb,OAAO,UAAU,CAAC,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;QACrE,CAAC;aAAM,CAAC;YACJ,OAAO;gBACH,UAAU,EAAE,CAAC;gBACb,eAAe,EAAE,CAAC,CAAC,CAAC;aACvB,CAAC;QACN,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG,UAAC,UAAkB,EAAE,YAAoB,EAAE,OAAe,EAAE,UAAkB;QAC7F,IAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC;QAC/D,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,GAAG,CAAC,EAAL,CAAK,CAAC,CAAC;QAEhE,IAAI,OAAO,IAAI,QAAQ,CAAC,MAAM;YAC1B,OAAO,EAAE,UAAU,YAAA,EAAE,eAAe,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC;QAE1E,IAAM,eAAe,GAAa,EAAE,CAAC;QACrC,IAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QAC5C,IAAI,eAAe,GAAG,UAAU,CAAC;QACjC,OAAO,IAAI,EAAE,CAAC;YACV,IAAI,eAAe,KAAK,CAAC,IAAI,eAAe,KAAK,UAAU,GAAG,WAAW;gBACrE,MAAM;YACV,eAAe,EAAE,CAAC;QACtB,CAAC;QAED,IAAM,KAAK,GAAG,eAAe,GAAG,OAAO,GAAG,CAAC,GAAG,UAAU,CAAC;QACzD,IAAM,OAAO,GAAG,eAAe,GAAG,OAAO,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,GAAG,OAAO,GAAG,CAAC,CAAC;QACzG,IAAI,KAAK,GAAG,CAAC;YACT,eAAe,IAAI,KAAK,CAAC;QAC7B,KAAK,IAAI,KAAK,GAAG,eAAe,EAAE,KAAK,IAAI,OAAO,EAAE,KAAK,EAAE;YACvD,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEhC,OAAO,EAAE,UAAU,YAAA,EAAE,eAAe,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC;IACjF,CAAC,CAAC;IAEI,IAAA,KAAkC,mBAAmB,CAAC,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,CAAC,EAAlG,eAAe,qBAAA,EAAE,UAAU,gBAAuE,CAAC;IAG3G,IAAM,SAAS,GAAG,UAAC,KAAsC;QACrD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,UAAU,KAAK,CAAC;YAChB,YAAY,CAAC,CAAC,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG,UAAC,KAAsC;QACpD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,UAAU,KAAK,UAAU;YACzB,YAAY,CAAC,UAAU,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG,UAAC,KAAsC;QACpD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,UAAU,KAAK,UAAU;YACzB,YAAY,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG,UAAC,KAAsC;QACpD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,UAAU,KAAK,CAAC;YAChB,YAAY,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACH,4BAAgB,iBAAiB,EAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YACnE,cAAI,SAAS,EAAC,YAAY,aAEtB,aAAI,SAAS,EAAE,mBAAY,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAE,EAAE,OAAO,EAAE,SAAS,YAChF,8BAAkB,MAAM,YACpB,KAAC,OAAO,IAAC,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,GAAI,GAC1E,GACN,EAEL,aAAI,SAAS,EAAE,mBAAY,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAE,EAAE,OAAO,EAAE,QAAQ,YAC/E,8BAAkB,MAAM,YACpB,KAAC,OAAO,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,GAAI,GACzE,GACN,EAEJ,eAAe,CAAC,GAAG,CAAC,UAAC,IAAY,EAAE,KAAa,IAAK,OAAA,CAClD,sBACI,SAAS,EAAE,oBAAa,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAE,EAC7D,OAAO,EAAE;wBACL,IAAI,UAAU,KAAK,IAAI;4BACnB,YAAY,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,EACD,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,IACtB,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,cAC3D,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAC/D,IAAI,GACF,KAVF,KAAK,CAWT,CACR,EAbqD,CAarD,CAAC,EAEF,aAAI,SAAS,EAAE,mBAAY,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAE,EAAE,OAAO,EAAE,QAAQ,YACxF,8BAAkB,MAAM,YACpB,KAAC,OAAO,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,GAAI,GACzE,GACN,EAEL,aAAI,SAAS,EAAE,mBAAY,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAE,EAAE,OAAO,EAAE,QAAQ,YACxF,8BAAkB,MAAM,YACpB,KAAC,OAAO,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,GAAI,GACzE,GACN,IACJ,GACH,CACT,CAAC;AACN,CAAC;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
var Content = function (_a) {
|
|
3
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
4
|
+
var cls = ['fd-layout-content', className].filter(Boolean).join(' ');
|
|
5
|
+
return (_jsx("main", { className: cls, style: style, children: children }));
|
|
6
|
+
};
|
|
7
|
+
export default Content;
|
|
8
|
+
//# sourceMappingURL=Content.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Content.tsx"],"names":[],"mappings":";AAGA,IAAM,OAAO,GAAG,UAAC,EAA4C;QAA1C,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA;IACzC,IAAM,GAAG,GAAG,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEvE,OAAO,CACH,eAAM,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,YAC7B,QAAQ,GACN,CACV,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
var Footer = function (_a) {
|
|
3
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
4
|
+
var cls = ['fd-layout-footer', className].filter(Boolean).join(' ');
|
|
5
|
+
return (_jsx("footer", { className: cls, style: style, children: children }));
|
|
6
|
+
};
|
|
7
|
+
export default Footer;
|
|
8
|
+
//# sourceMappingURL=Footer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Footer.tsx"],"names":[],"mappings":";AAGA,IAAM,MAAM,GAAG,UAAC,EAA2C;QAAzC,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA;IACxC,IAAM,GAAG,GAAG,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtE,OAAO,CACH,iBAAQ,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,YAC/B,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
var Header = function (_a) {
|
|
3
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
4
|
+
var cls = ['fd-layout-header', className].filter(Boolean).join(' ');
|
|
5
|
+
return (_jsx("header", { className: cls, style: style, children: children }));
|
|
6
|
+
};
|
|
7
|
+
export default Header;
|
|
8
|
+
//# sourceMappingURL=Header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Header.tsx"],"names":[],"mappings":";AAGA,IAAM,MAAM,GAAG,UAAC,EAA2C;QAAzC,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA;IACxC,IAAM,GAAG,GAAG,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtE,OAAO,CACH,iBAAQ,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,YAC/B,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { LayoutProps } from './Types';
|
|
3
|
+
import Header from './Header';
|
|
4
|
+
import Footer from './Footer';
|
|
5
|
+
import Content from './Content';
|
|
6
|
+
import Sider from './Sider';
|
|
7
|
+
import '../../styles/layout.css';
|
|
8
|
+
type LayoutComponent = React.FC<LayoutProps> & {
|
|
9
|
+
Header: typeof Header;
|
|
10
|
+
Footer: typeof Footer;
|
|
11
|
+
Content: typeof Content;
|
|
12
|
+
Sider: typeof Sider;
|
|
13
|
+
};
|
|
14
|
+
declare const Layout: LayoutComponent;
|
|
15
|
+
export default Layout;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import Header from './Header';
|
|
3
|
+
import Footer from './Footer';
|
|
4
|
+
import Content from './Content';
|
|
5
|
+
import Sider from './Sider';
|
|
6
|
+
import '../../styles/layout.css';
|
|
7
|
+
var Layout = function (_a) {
|
|
8
|
+
var children = _a.children, className = _a.className, style = _a.style, _b = _a.hasSider, hasSider = _b === void 0 ? false : _b;
|
|
9
|
+
var cls = [
|
|
10
|
+
'fd-layout',
|
|
11
|
+
hasSider ? 'fd-layout--has-sider' : '',
|
|
12
|
+
className,
|
|
13
|
+
].filter(Boolean).join(' ');
|
|
14
|
+
return (_jsx("section", { className: cls, style: style, children: children }));
|
|
15
|
+
};
|
|
16
|
+
Layout.Header = Header;
|
|
17
|
+
Layout.Footer = Footer;
|
|
18
|
+
Layout.Content = Content;
|
|
19
|
+
Layout.Sider = Sider;
|
|
20
|
+
export default Layout;
|
|
21
|
+
//# sourceMappingURL=Layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Layout.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,yBAAyB,CAAC;AASjC,IAAM,MAAM,GAAoB,UAAC,EAAgD;QAA9C,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA;IAC3E,IAAM,GAAG,GAAG;QACR,WAAW;QACX,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;QACtC,SAAS;KACZ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACH,kBAAS,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,YAChC,QAAQ,GACH,CACb,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AACvB,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AACvB,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;AACzB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;AAErB,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { useEffect } from 'react';
|
|
14
|
+
var BREAKPOINTS = {
|
|
15
|
+
sm: '(max-width: 576px)',
|
|
16
|
+
md: '(max-width: 768px)',
|
|
17
|
+
lg: '(max-width: 992px)',
|
|
18
|
+
xl: '(max-width: 1200px)',
|
|
19
|
+
};
|
|
20
|
+
var Sider = function (_a) {
|
|
21
|
+
var children = _a.children, className = _a.className, style = _a.style, _b = _a.collapsed, collapsed = _b === void 0 ? false : _b, _c = _a.width, width = _c === void 0 ? 240 : _c, _d = _a.collapsedWidth, collapsedWidth = _d === void 0 ? 64 : _d, breakpoint = _a.breakpoint, onBreakpoint = _a.onBreakpoint;
|
|
22
|
+
useEffect(function () {
|
|
23
|
+
if (!breakpoint || !onBreakpoint)
|
|
24
|
+
return;
|
|
25
|
+
var query = BREAKPOINTS[breakpoint];
|
|
26
|
+
if (!query)
|
|
27
|
+
return;
|
|
28
|
+
var mql = window.matchMedia(query);
|
|
29
|
+
var handler = function (e) { return onBreakpoint(e.matches); };
|
|
30
|
+
onBreakpoint(mql.matches);
|
|
31
|
+
mql.addEventListener('change', handler);
|
|
32
|
+
return function () { return mql.removeEventListener('change', handler); };
|
|
33
|
+
}, [breakpoint, onBreakpoint]);
|
|
34
|
+
var cls = [
|
|
35
|
+
'fd-layout-sider',
|
|
36
|
+
collapsed ? 'fd-layout-sider--collapsed' : '',
|
|
37
|
+
className,
|
|
38
|
+
].filter(Boolean).join(' ');
|
|
39
|
+
var siderWidth = collapsed ? collapsedWidth : width;
|
|
40
|
+
var mergedStyle = __assign({ width: typeof siderWidth === 'number' ? "".concat(siderWidth, "px") : siderWidth, minWidth: typeof siderWidth === 'number' ? "".concat(siderWidth, "px") : siderWidth, maxWidth: typeof siderWidth === 'number' ? "".concat(siderWidth, "px") : siderWidth }, style);
|
|
41
|
+
return (_jsx("aside", { className: cls, style: mergedStyle, children: children }));
|
|
42
|
+
};
|
|
43
|
+
export default Sider;
|
|
44
|
+
//# sourceMappingURL=Sider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sider.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Sider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,IAAM,WAAW,GAA2B;IACxC,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,qBAAqB;CAC5B,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,EASF;QART,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA,EACL,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,aAAW,EAAX,KAAK,mBAAG,GAAG,KAAA,EACX,sBAAmB,EAAnB,cAAc,mBAAG,EAAE,KAAA,EACnB,UAAU,gBAAA,EACV,YAAY,kBAAA;IAEZ,SAAS,CAAC;QACN,IAAI,CAAC,UAAU,IAAI,CAAC,YAAY;YAAE,OAAO;QAEzC,IAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,IAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACrC,IAAM,OAAO,GAAG,UAAC,CAAsB,IAAK,OAAA,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,EAAvB,CAAuB,CAAC;QAEpE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC1B,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACxC,OAAO,cAAM,OAAA,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,EAA1C,CAA0C,CAAC;IAC5D,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/B,IAAM,GAAG,GAAG;QACR,iBAAiB;QACjB,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;QAC7C,SAAS;KACZ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,IAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC;IACtD,IAAM,WAAW,cACb,KAAK,EAAE,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,CAAC,CAAC,CAAC,UAAU,EACtE,QAAQ,EAAE,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,CAAC,CAAC,CAAC,UAAU,EACzE,QAAQ,EAAE,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,CAAC,CAAC,CAAC,UAAU,IACtE,KAAK,CACX,CAAC;IAEF,OAAO,CACH,gBAAO,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,YACpC,QAAQ,GACL,CACX,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
export type LayoutBaseProps = {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
style?: CSSProperties;
|
|
6
|
+
};
|
|
7
|
+
export type LayoutProps = LayoutBaseProps & {
|
|
8
|
+
hasSider?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export type HeaderProps = LayoutBaseProps;
|
|
11
|
+
export type FooterProps = LayoutBaseProps;
|
|
12
|
+
export type ContentProps = LayoutBaseProps;
|
|
13
|
+
export type SiderProps = LayoutBaseProps & {
|
|
14
|
+
collapsed?: boolean;
|
|
15
|
+
width?: number | string;
|
|
16
|
+
collapsedWidth?: number;
|
|
17
|
+
breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
|
|
18
|
+
onBreakpoint?: (broken: boolean) => void;
|
|
19
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Types.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Types.ts"],"names":[],"mappings":""}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import AppIcon from './AppIcon';
|
|
2
2
|
import AppInput from './AppInput';
|
|
3
3
|
import AppPagination from './AppPagination';
|
|
4
|
+
import Layout from './Layout/Layout';
|
|
5
|
+
import * as Layout_Types from './Layout/Types';
|
|
4
6
|
import Spin from './Spin';
|
|
5
7
|
import Toaster from './Toaster/Toaster';
|
|
6
8
|
import * as Toaster_Types from './Toaster/Types';
|
|
7
|
-
export { AppIcon, AppInput, AppPagination, Spin, Toaster, Toaster_Types };
|
|
9
|
+
export { AppIcon, AppInput, AppPagination, Layout, Layout_Types, Spin, Toaster, Toaster_Types };
|
package/dist/components/index.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import AppIcon from './AppIcon';
|
|
2
2
|
import AppInput from './AppInput';
|
|
3
3
|
import AppPagination from './AppPagination';
|
|
4
|
+
import Layout from './Layout/Layout';
|
|
5
|
+
import * as Layout_Types from './Layout/Types';
|
|
4
6
|
import Spin from './Spin';
|
|
5
7
|
import Toaster from './Toaster/Toaster';
|
|
6
8
|
import * as Toaster_Types from './Toaster/Types';
|
|
7
|
-
export { AppIcon, AppInput, AppPagination, Spin, Toaster, Toaster_Types };
|
|
9
|
+
export { AppIcon, AppInput, AppPagination, Layout, Layout_Types, Spin, Toaster, Toaster_Types };
|
|
8
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,KAAK,aAAa,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,YAAY,MAAM,gBAAgB,CAAC;AAC/C,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,KAAK,aAAa,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--fd-layout-header-height: 64px;
|
|
3
|
+
--fd-layout-header-bg: var(--primary-color);
|
|
4
|
+
--fd-layout-header-color: var(--white-color);
|
|
5
|
+
--fd-layout-footer-bg: #f0f0f0;
|
|
6
|
+
--fd-layout-body-bg: #f7f7f7;
|
|
7
|
+
--fd-layout-sider-bg: #ffffff;
|
|
8
|
+
--fd-layout-sider-transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.fd-layout {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
min-height: 0;
|
|
15
|
+
flex: 1;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.fd-layout--has-sider {
|
|
19
|
+
flex-direction: row;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.fd-layout-header {
|
|
23
|
+
position: sticky;
|
|
24
|
+
top: 0;
|
|
25
|
+
z-index: 100;
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
height: var(--fd-layout-header-height);
|
|
29
|
+
padding: 0 24px;
|
|
30
|
+
background: var(--fd-layout-header-bg);
|
|
31
|
+
color: var(--fd-layout-header-color);
|
|
32
|
+
flex-shrink: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.fd-layout-footer {
|
|
36
|
+
padding: 16px 24px;
|
|
37
|
+
background: var(--fd-layout-footer-bg);
|
|
38
|
+
flex-shrink: 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.fd-layout-content {
|
|
42
|
+
flex: 1;
|
|
43
|
+
min-height: 0;
|
|
44
|
+
overflow: auto;
|
|
45
|
+
background: var(--fd-layout-body-bg);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.fd-layout-sider {
|
|
49
|
+
background: var(--fd-layout-sider-bg);
|
|
50
|
+
overflow: hidden;
|
|
51
|
+
flex-shrink: 0;
|
|
52
|
+
transition: var(--fd-layout-sider-transition);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.fd-layout-sider--collapsed {
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
}
|