@xanui/ui 1.0.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/Accordion/index.d.ts +32 -0
- package/Accordion/index.js +82 -0
- package/Accordion/index.js.map +1 -0
- package/Accordion/index.mjs +82 -0
- package/Accordion/index.mjs.map +1 -0
- package/Alert/index.d.ts +41 -0
- package/Alert/index.js +137 -0
- package/Alert/index.js.map +1 -0
- package/Alert/index.mjs +137 -0
- package/Alert/index.mjs.map +1 -0
- package/Avatar/index.d.ts +10 -0
- package/Avatar/index.js +34 -0
- package/Avatar/index.js.map +1 -0
- package/Avatar/index.mjs +34 -0
- package/Avatar/index.mjs.map +1 -0
- package/Badge/index.d.ts +16 -0
- package/Badge/index.js +68 -0
- package/Badge/index.js.map +1 -0
- package/Badge/index.mjs +68 -0
- package/Badge/index.mjs.map +1 -0
- package/Box/index.d.ts +8 -0
- package/Box/index.js +4 -0
- package/Box/index.js.map +1 -0
- package/Box/index.mjs +4 -0
- package/Box/index.mjs.map +1 -0
- package/Button/index.d.ts +22 -0
- package/Button/index.js +77 -0
- package/Button/index.js.map +1 -0
- package/Button/index.mjs +77 -0
- package/Button/index.mjs.map +1 -0
- package/ButtonGroup/index.d.ts +14 -0
- package/ButtonGroup/index.js +47 -0
- package/ButtonGroup/index.js.map +1 -0
- package/ButtonGroup/index.mjs +47 -0
- package/ButtonGroup/index.mjs.map +1 -0
- package/Calendar/index.d.ts +14 -0
- package/Calendar/index.js +140 -0
- package/Calendar/index.js.map +1 -0
- package/Calendar/index.mjs +140 -0
- package/Calendar/index.mjs.map +1 -0
- package/CalendarInput/index.d.ts +18 -0
- package/CalendarInput/index.js +11 -0
- package/CalendarInput/index.js.map +1 -0
- package/CalendarInput/index.mjs +11 -0
- package/CalendarInput/index.mjs.map +1 -0
- package/Checkbox/index.d.ts +15 -0
- package/Checkbox/index.js +44 -0
- package/Checkbox/index.js.map +1 -0
- package/Checkbox/index.mjs +44 -0
- package/Checkbox/index.mjs.map +1 -0
- package/Chip/index.d.ts +17 -0
- package/Chip/index.js +59 -0
- package/Chip/index.js.map +1 -0
- package/Chip/index.mjs +59 -0
- package/Chip/index.mjs.map +1 -0
- package/CircleProgress/index.d.ts +20 -0
- package/CircleProgress/index.js +118 -0
- package/CircleProgress/index.js.map +1 -0
- package/CircleProgress/index.mjs +118 -0
- package/CircleProgress/index.mjs.map +1 -0
- package/ClickOutside/index.d.ts +10 -0
- package/ClickOutside/index.js +16 -0
- package/ClickOutside/index.js.map +1 -0
- package/ClickOutside/index.mjs +16 -0
- package/ClickOutside/index.mjs.map +1 -0
- package/Collaps/index.d.ts +8 -0
- package/Collaps/index.js +18 -0
- package/Collaps/index.js.map +1 -0
- package/Collaps/index.mjs +18 -0
- package/Collaps/index.mjs.map +1 -0
- package/Container/index.d.ts +10 -0
- package/Container/index.js +19 -0
- package/Container/index.js.map +1 -0
- package/Container/index.mjs +19 -0
- package/Container/index.mjs.map +1 -0
- package/Datatable/FilterBox.js +19 -0
- package/Datatable/FilterBox.js.map +1 -0
- package/Datatable/FilterBox.mjs +19 -0
- package/Datatable/FilterBox.mjs.map +1 -0
- package/Datatable/Row.js +41 -0
- package/Datatable/Row.js.map +1 -0
- package/Datatable/Row.mjs +41 -0
- package/Datatable/Row.mjs.map +1 -0
- package/Datatable/SelectedBox.js +11 -0
- package/Datatable/SelectedBox.js.map +1 -0
- package/Datatable/SelectedBox.mjs +11 -0
- package/Datatable/SelectedBox.mjs.map +1 -0
- package/Datatable/Table.js +11 -0
- package/Datatable/Table.js.map +1 -0
- package/Datatable/Table.mjs +11 -0
- package/Datatable/Table.mjs.map +1 -0
- package/Datatable/TableHead.js +35 -0
- package/Datatable/TableHead.js.map +1 -0
- package/Datatable/TableHead.mjs +35 -0
- package/Datatable/TableHead.mjs.map +1 -0
- package/Datatable/index.d.ts +71 -0
- package/Datatable/index.js +35 -0
- package/Datatable/index.js.map +1 -0
- package/Datatable/index.mjs +35 -0
- package/Datatable/index.mjs.map +1 -0
- package/Divider/index.d.ts +12 -0
- package/Divider/index.js +21 -0
- package/Divider/index.js.map +1 -0
- package/Divider/index.mjs +21 -0
- package/Divider/index.mjs.map +1 -0
- package/Drawer/index.d.ts +25 -0
- package/Drawer/index.js +57 -0
- package/Drawer/index.js.map +1 -0
- package/Drawer/index.mjs +57 -0
- package/Drawer/index.mjs.map +1 -0
- package/Form/index.d.ts +8 -0
- package/Form/index.js +34 -0
- package/Form/index.js.map +1 -0
- package/Form/index.mjs +34 -0
- package/Form/index.mjs.map +1 -0
- package/GridContainer/index.d.ts +8 -0
- package/GridContainer/index.js +9 -0
- package/GridContainer/index.js.map +1 -0
- package/GridContainer/index.mjs +9 -0
- package/GridContainer/index.mjs.map +1 -0
- package/GridItem/index.d.ts +14 -0
- package/GridItem/index.js +10 -0
- package/GridItem/index.js.map +1 -0
- package/GridItem/index.mjs +10 -0
- package/GridItem/index.mjs.map +1 -0
- package/IconButton/index.d.ts +13 -0
- package/IconButton/index.js +48 -0
- package/IconButton/index.js.map +1 -0
- package/IconButton/index.mjs +48 -0
- package/IconButton/index.mjs.map +1 -0
- package/Image/index.d.ts +10 -0
- package/Image/index.js +16 -0
- package/Image/index.js.map +1 -0
- package/Image/index.mjs +16 -0
- package/Image/index.mjs.map +1 -0
- package/Input/index.d.ts +26 -0
- package/Input/index.js +149 -0
- package/Input/index.js.map +1 -0
- package/Input/index.mjs +149 -0
- package/Input/index.mjs.map +1 -0
- package/Label/index.d.ts +8 -0
- package/Label/index.js +10 -0
- package/Label/index.js.map +1 -0
- package/Label/index.mjs +10 -0
- package/Label/index.mjs.map +1 -0
- package/Layer/index.d.ts +34 -0
- package/Layer/index.js +73 -0
- package/Layer/index.js.map +1 -0
- package/Layer/index.mjs +73 -0
- package/Layer/index.mjs.map +1 -0
- package/LineProgress/index.d.ts +15 -0
- package/LineProgress/index.js +48 -0
- package/LineProgress/index.js.map +1 -0
- package/LineProgress/index.mjs +48 -0
- package/LineProgress/index.mjs.map +1 -0
- package/List/index.d.ts +13 -0
- package/List/index.js +51 -0
- package/List/index.js.map +1 -0
- package/List/index.mjs +51 -0
- package/List/index.mjs.map +1 -0
- package/ListItem/index.d.ts +13 -0
- package/ListItem/index.js +26 -0
- package/ListItem/index.js.map +1 -0
- package/ListItem/index.mjs +26 -0
- package/ListItem/index.mjs.map +1 -0
- package/LoadingBox/index.d.ts +15 -0
- package/LoadingBox/index.js +22 -0
- package/LoadingBox/index.js.map +1 -0
- package/LoadingBox/index.mjs +22 -0
- package/LoadingBox/index.mjs.map +1 -0
- package/Menu/getOrigin.js +42 -0
- package/Menu/getOrigin.js.map +1 -0
- package/Menu/getOrigin.mjs +42 -0
- package/Menu/getOrigin.mjs.map +1 -0
- package/Menu/index.d.ts +22 -0
- package/Menu/index.js +47 -0
- package/Menu/index.js.map +1 -0
- package/Menu/index.mjs +47 -0
- package/Menu/index.mjs.map +1 -0
- package/Menu/placedMenu.d.ts +5 -0
- package/Menu/placedMenu.js +95 -0
- package/Menu/placedMenu.js.map +1 -0
- package/Menu/placedMenu.mjs +95 -0
- package/Menu/placedMenu.mjs.map +1 -0
- package/Modal/index.d.ts +19 -0
- package/Modal/index.js +38 -0
- package/Modal/index.js.map +1 -0
- package/Modal/index.mjs +38 -0
- package/Modal/index.mjs.map +1 -0
- package/NoSSR/index.d.ts +3 -0
- package/NoSSR/index.js +7 -0
- package/NoSSR/index.js.map +1 -0
- package/NoSSR/index.mjs +7 -0
- package/NoSSR/index.mjs.map +1 -0
- package/Option/index.d.ts +10 -0
- package/Option/index.js +4 -0
- package/Option/index.js.map +1 -0
- package/Option/index.mjs +4 -0
- package/Option/index.mjs.map +1 -0
- package/Paper/index.d.ts +8 -0
- package/Paper/index.js +5 -0
- package/Paper/index.js.map +1 -0
- package/Paper/index.mjs +5 -0
- package/Paper/index.mjs.map +1 -0
- package/Portal/index.d.ts +11 -0
- package/Portal/index.js +26 -0
- package/Portal/index.js.map +1 -0
- package/Portal/index.mjs +26 -0
- package/Portal/index.mjs.map +1 -0
- package/Radio/index.d.ts +6 -0
- package/Radio/index.js +4 -0
- package/Radio/index.js.map +1 -0
- package/Radio/index.mjs +4 -0
- package/Radio/index.mjs.map +1 -0
- package/Scrollbar/index.d.ts +14 -0
- package/Scrollbar/index.js +65 -0
- package/Scrollbar/index.js.map +1 -0
- package/Scrollbar/index.mjs +65 -0
- package/Scrollbar/index.mjs.map +1 -0
- package/Select/index.d.ts +24 -0
- package/Select/index.js +35 -0
- package/Select/index.js.map +1 -0
- package/Select/index.mjs +35 -0
- package/Select/index.mjs.map +1 -0
- package/Stack/index.d.ts +8 -0
- package/Stack/index.js +7 -0
- package/Stack/index.js.map +1 -0
- package/Stack/index.mjs +7 -0
- package/Stack/index.mjs.map +1 -0
- package/Switch/index.d.ts +19 -0
- package/Switch/index.js +68 -0
- package/Switch/index.js.map +1 -0
- package/Switch/index.mjs +68 -0
- package/Switch/index.mjs.map +1 -0
- package/Tab/index.d.ts +11 -0
- package/Tab/index.js +5 -0
- package/Tab/index.js.map +1 -0
- package/Tab/index.mjs +5 -0
- package/Tab/index.mjs.map +1 -0
- package/Table/index.d.ts +14 -0
- package/Table/index.js +77 -0
- package/Table/index.js.map +1 -0
- package/Table/index.mjs +77 -0
- package/Table/index.mjs.map +1 -0
- package/TableBody/index.d.ts +8 -0
- package/TableBody/index.js +4 -0
- package/TableBody/index.js.map +1 -0
- package/TableBody/index.mjs +4 -0
- package/TableBody/index.mjs.map +1 -0
- package/TableCell/index.d.ts +10 -0
- package/TableCell/index.js +4 -0
- package/TableCell/index.js.map +1 -0
- package/TableCell/index.mjs +4 -0
- package/TableCell/index.mjs.map +1 -0
- package/TableFooter/index.d.ts +8 -0
- package/TableFooter/index.js +4 -0
- package/TableFooter/index.js.map +1 -0
- package/TableFooter/index.mjs +4 -0
- package/TableFooter/index.mjs.map +1 -0
- package/TableHead/index.d.ts +8 -0
- package/TableHead/index.js +4 -0
- package/TableHead/index.js.map +1 -0
- package/TableHead/index.mjs +4 -0
- package/TableHead/index.mjs.map +1 -0
- package/TablePagination/index.d.ts +26 -0
- package/TablePagination/index.js +51 -0
- package/TablePagination/index.js.map +1 -0
- package/TablePagination/index.mjs +51 -0
- package/TablePagination/index.mjs.map +1 -0
- package/TableRow/index.d.ts +8 -0
- package/TableRow/index.js +4 -0
- package/TableRow/index.js.map +1 -0
- package/TableRow/index.mjs +4 -0
- package/TableRow/index.mjs.map +1 -0
- package/Tabs/index.d.ts +24 -0
- package/Tabs/index.js +188 -0
- package/Tabs/index.js.map +1 -0
- package/Tabs/index.mjs +188 -0
- package/Tabs/index.mjs.map +1 -0
- package/Text/index.d.ts +10 -0
- package/Text/index.js +10 -0
- package/Text/index.js.map +1 -0
- package/Text/index.mjs +10 -0
- package/Text/index.mjs.map +1 -0
- package/ThemeProvider/RenderRoot.js +22 -0
- package/ThemeProvider/RenderRoot.js.map +1 -0
- package/ThemeProvider/RenderRoot.mjs +22 -0
- package/ThemeProvider/RenderRoot.mjs.map +1 -0
- package/ThemeProvider/index.d.ts +8 -0
- package/ThemeProvider/index.js +4 -0
- package/ThemeProvider/index.js.map +1 -0
- package/ThemeProvider/index.mjs +4 -0
- package/ThemeProvider/index.mjs.map +1 -0
- package/Toast/index.d.ts +20 -0
- package/Toast/index.js +145 -0
- package/Toast/index.js.map +1 -0
- package/Toast/index.mjs +145 -0
- package/Toast/index.mjs.map +1 -0
- package/Tooltip/index.d.ts +16 -0
- package/Tooltip/index.js +29 -0
- package/Tooltip/index.js.map +1 -0
- package/Tooltip/index.mjs +29 -0
- package/Tooltip/index.mjs.map +1 -0
- package/ViewBox/index.d.ts +16 -0
- package/ViewBox/index.js +21 -0
- package/ViewBox/index.js.map +1 -0
- package/ViewBox/index.mjs +21 -0
- package/ViewBox/index.mjs.map +1 -0
- package/index.d.ts +56 -0
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.mjs +1 -0
- package/index.mjs.map +1 -0
- package/package.json +41 -0
- package/readme.md +0 -0
- package/useCorner/index.d.ts +5 -0
- package/useCorner/index.js +17 -0
- package/useCorner/index.js.map +1 -0
- package/useCorner/index.mjs +17 -0
- package/useCorner/index.mjs.map +1 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react');const ClickOutside = React.forwardRef((_a, ref) => {
|
|
2
|
+
var { children, onClickOutside } = _a, props = tslib.__rest(_a, ["children", "onClickOutside"]);
|
|
3
|
+
const _ref = ref || React.useRef(null);
|
|
4
|
+
const handler = (e) => {
|
|
5
|
+
if (!_ref.current.contains(e.target)) {
|
|
6
|
+
onClickOutside();
|
|
7
|
+
}
|
|
8
|
+
};
|
|
9
|
+
React.useEffect(() => {
|
|
10
|
+
document.addEventListener("click", handler);
|
|
11
|
+
return () => {
|
|
12
|
+
document.removeEventListener("click", handler);
|
|
13
|
+
};
|
|
14
|
+
}, []);
|
|
15
|
+
return jsxRuntime.jsx(core.Tag, Object.assign({}, props, { ref: _ref }, { children: children }));
|
|
16
|
+
});exports.default=ClickOutside;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n onClickOutside: () => void\n}\n\nconst ClickOutside = React.forwardRef(({ children, onClickOutside, ...props }: ClickOutsideProps, ref: React.Ref<any>) => {\n const _ref: any = ref || useRef(null)\n const handler = (e: any) => {\n if (!_ref.current.contains(e.target)) {\n onClickOutside()\n }\n }\n useEffect(() => {\n document.addEventListener(\"click\", handler)\n return () => {\n document.removeEventListener(\"click\", handler)\n }\n }, [])\n\n\n return <Tag\n {...props}\n ref={_ref}\n >\n {children}\n </Tag>\n\n})\n\nexport default ClickOutside"],"names":["__rest","useRef","useEffect","_jsx","Tag"],"mappings":"4LAQA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAyD,EAAE,GAAmB,KAAI;QAAlF,EAAE,QAAQ,EAAE,cAAc,EAAA,GAAA,EAA+B,EAA1B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApC,8BAAsC,CAAF;IACvE,MAAM,IAAI,GAAQ,GAAG,IAAIC,YAAM,CAAC,IAAI,CAAC;AACrC,IAAA,MAAM,OAAO,GAAG,CAAC,CAAM,KAAI;QACvB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;AAClC,YAAA,cAAc,EAAE;AACnB,QAAA;AACL,IAAA,CAAC;IACDC,eAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC3C,QAAA,OAAO,MAAK;AACR,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAClD,QAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAGN,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,KAAK,EAAA,EACT,GAAG,EAAE,IAAI,EAAA,EAAA,EAAA,QAAA,EAER,QAAQ,EAAA,CAAA,CACP;AAEV,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {Tag}from'@xanui/core';import React,{useRef,useEffect}from'react';const ClickOutside = React.forwardRef((_a, ref) => {
|
|
2
|
+
var { children, onClickOutside } = _a, props = __rest(_a, ["children", "onClickOutside"]);
|
|
3
|
+
const _ref = ref || useRef(null);
|
|
4
|
+
const handler = (e) => {
|
|
5
|
+
if (!_ref.current.contains(e.target)) {
|
|
6
|
+
onClickOutside();
|
|
7
|
+
}
|
|
8
|
+
};
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
document.addEventListener("click", handler);
|
|
11
|
+
return () => {
|
|
12
|
+
document.removeEventListener("click", handler);
|
|
13
|
+
};
|
|
14
|
+
}, []);
|
|
15
|
+
return jsx(Tag, Object.assign({}, props, { ref: _ref }, { children: children }));
|
|
16
|
+
});export{ClickOutside as default};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n onClickOutside: () => void\n}\n\nconst ClickOutside = React.forwardRef(({ children, onClickOutside, ...props }: ClickOutsideProps, ref: React.Ref<any>) => {\n const _ref: any = ref || useRef(null)\n const handler = (e: any) => {\n if (!_ref.current.contains(e.target)) {\n onClickOutside()\n }\n }\n useEffect(() => {\n document.addEventListener(\"click\", handler)\n return () => {\n document.removeEventListener(\"click\", handler)\n }\n }, [])\n\n\n return <Tag\n {...props}\n ref={_ref}\n >\n {children}\n </Tag>\n\n})\n\nexport default ClickOutside"],"names":["_jsx"],"mappings":"wIAQA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAyD,EAAE,GAAmB,KAAI;QAAlF,EAAE,QAAQ,EAAE,cAAc,EAAA,GAAA,EAA+B,EAA1B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApC,8BAAsC,CAAF;IACvE,MAAM,IAAI,GAAQ,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC;AACrC,IAAA,MAAM,OAAO,GAAG,CAAC,CAAM,KAAI;QACvB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;AAClC,YAAA,cAAc,EAAE;AACnB,QAAA;AACL,IAAA,CAAC;IACD,SAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC3C,QAAA,OAAO,MAAK;AACR,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAClD,QAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAGN,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,KAAK,EAAA,EACT,GAAG,EAAE,IAAI,EAAA,EAAA,EAAA,QAAA,EAER,QAAQ,EAAA,CAAA,CACP;AAEV,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TagComponentType, TagProps, TransitionProps } from '@xanui/core';
|
|
3
|
+
|
|
4
|
+
type CollapsProps<T extends TagComponentType = "div"> = TagProps<T> & Omit<TransitionProps, "variant" | "children"> & {};
|
|
5
|
+
declare const Collaps: React.ForwardRefExoticComponent<Omit<CollapsProps<TagComponentType>, "ref"> & React.RefAttributes<unknown>>;
|
|
6
|
+
|
|
7
|
+
export { Collaps as default };
|
|
8
|
+
export type { CollapsProps };
|
package/Collaps/index.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Collaps = React.forwardRef((_a, ref) => {
|
|
2
|
+
var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
|
|
3
|
+
let [_b] = core.useInterface("Collaps", props, {}), { ease, easing, duration, delay, onStart, onFinish, onOpen, onOpened, onClose, onClosed } = _b, rest = tslib.__rest(_b, ["ease", "easing", "duration", "delay", "onStart", "onFinish", "onOpen", "onOpened", "onClose", "onClosed"]);
|
|
4
|
+
open !== null && open !== void 0 ? open : (open = false);
|
|
5
|
+
easing !== null && easing !== void 0 ? easing : (easing = "easeOut");
|
|
6
|
+
return (jsxRuntime.jsx(core.Transition, Object.assign({}, {
|
|
7
|
+
ease,
|
|
8
|
+
easing,
|
|
9
|
+
duration,
|
|
10
|
+
delay,
|
|
11
|
+
onStart,
|
|
12
|
+
onFinish,
|
|
13
|
+
onOpen,
|
|
14
|
+
onOpened,
|
|
15
|
+
onClose,
|
|
16
|
+
onClosed
|
|
17
|
+
}, { disableInitialTransition: true, variant: "collapsVerticle", open: open }, { children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'collaps', ref: ref }, { children: children })) })));
|
|
18
|
+
});exports.default=Collaps;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n let [{\n ease,\n easing,\n duration,\n delay,\n onStart,\n onFinish,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n ...rest\n }] = useInterface<any>(\"Collaps\", props, {})\n\n open ??= false\n easing ??= \"easeOut\"\n\n return (\n <Transition\n {...{\n ease,\n easing,\n duration,\n delay,\n onStart,\n onFinish,\n onOpen,\n onOpened,\n onClose,\n onClosed\n }}\n disableInitialTransition\n variant=\"collapsVerticle\"\n open={open}\n >\n <Tag\n {...rest}\n baseClass='collaps'\n ref={ref}\n >{children}</Tag>\n </Transition>\n )\n})\n\nexport default Collaps\n\n\n"],"names":["__rest","useInterface","_jsx","Transition","Tag"],"mappings":"4LAQA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYCC,iBAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAAD,YAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,SAAS,CAAA;IAEpB,QACIE,cAAA,CAACC,eAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH;QACA,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;QACP;KACH,EAAA,EACD,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,iBAAiB,EACzB,IAAI,EAAE,IAAI,EAAA,EAAA,EAAA,QAAA,EAEVD,cAAA,CAACE,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CAAA,CACR;AAErB,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {useInterface,Transition,Tag}from'@xanui/core';const Collaps = React.forwardRef((_a, ref) => {
|
|
2
|
+
var { children, open } = _a, props = __rest(_a, ["children", "open"]);
|
|
3
|
+
let [_b] = useInterface("Collaps", props, {}), { ease, easing, duration, delay, onStart, onFinish, onOpen, onOpened, onClose, onClosed } = _b, rest = __rest(_b, ["ease", "easing", "duration", "delay", "onStart", "onFinish", "onOpen", "onOpened", "onClose", "onClosed"]);
|
|
4
|
+
open !== null && open !== void 0 ? open : (open = false);
|
|
5
|
+
easing !== null && easing !== void 0 ? easing : (easing = "easeOut");
|
|
6
|
+
return (jsx(Transition, Object.assign({}, {
|
|
7
|
+
ease,
|
|
8
|
+
easing,
|
|
9
|
+
duration,
|
|
10
|
+
delay,
|
|
11
|
+
onStart,
|
|
12
|
+
onFinish,
|
|
13
|
+
onOpen,
|
|
14
|
+
onOpened,
|
|
15
|
+
onClose,
|
|
16
|
+
onClosed
|
|
17
|
+
}, { disableInitialTransition: true, variant: "collapsVerticle", open: open }, { children: jsx(Tag, Object.assign({}, rest, { baseClass: 'collaps', ref: ref }, { children: children })) })));
|
|
18
|
+
});export{Collaps as default};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n let [{\n ease,\n easing,\n duration,\n delay,\n onStart,\n onFinish,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n ...rest\n }] = useInterface<any>(\"Collaps\", props, {})\n\n open ??= false\n easing ??= \"easeOut\"\n\n return (\n <Transition\n {...{\n ease,\n easing,\n duration,\n delay,\n onStart,\n onFinish,\n onOpen,\n onOpened,\n onClose,\n onClosed\n }}\n disableInitialTransition\n variant=\"collapsVerticle\"\n open={open}\n >\n <Tag\n {...rest}\n baseClass='collaps'\n ref={ref}\n >{children}</Tag>\n </Transition>\n )\n})\n\nexport default Collaps\n\n\n"],"names":["_jsx"],"mappings":"8IAQA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYC,YAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAA,MAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,SAAS,CAAA;IAEpB,QACIA,GAAA,CAAC,UAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH;QACA,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;QACP;KACH,EAAA,EACD,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,iBAAiB,EACzB,IAAI,EAAE,IAAI,EAAA,EAAA,EAAA,QAAA,EAEVA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CAAA,CACR;AAErB,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
|
|
3
|
+
|
|
4
|
+
type ContainerProps<T extends TagComponentType = "div"> = TagProps<T> & {
|
|
5
|
+
maxWidth?: useBreakpointPropsType<'lg' | 'md' | "sm" | 'xs'>;
|
|
6
|
+
};
|
|
7
|
+
declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
|
|
8
|
+
|
|
9
|
+
export { Container as default };
|
|
10
|
+
export type { ContainerProps };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Container = React.forwardRef((_a, ref) => {
|
|
2
|
+
var { children, maxWidth } = _a, rest = tslib.__rest(_a, ["children", "maxWidth"]);
|
|
3
|
+
const _p = {};
|
|
4
|
+
if (maxWidth)
|
|
5
|
+
_p.maxWidth = maxWidth;
|
|
6
|
+
const p = core.useBreakpointProps(_p);
|
|
7
|
+
maxWidth = p.maxWidth;
|
|
8
|
+
const { breakpoints } = core.useTheme();
|
|
9
|
+
maxWidth = maxWidth || "lg";
|
|
10
|
+
return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { sxr: {
|
|
11
|
+
width: "100%",
|
|
12
|
+
maxWidth: {
|
|
13
|
+
xs: "100%",
|
|
14
|
+
[maxWidth]: breakpoints[maxWidth]
|
|
15
|
+
},
|
|
16
|
+
mx: "auto",
|
|
17
|
+
px: 2,
|
|
18
|
+
}, baseClass: "container", ref: ref }, { children: children })));
|
|
19
|
+
});exports.default=Container;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Container/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\n}\n\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\n const _p: any = {}\n if (maxWidth) _p.maxWidth = maxWidth\n const p: any = useBreakpointProps(_p)\n maxWidth = p.maxWidth\n\n const { breakpoints } = useTheme()\n maxWidth = maxWidth || \"lg\"\n return (\n <Tag\n {...rest}\n sxr={{\n width: \"100%\",\n maxWidth: {\n xs: \"100%\",\n [maxWidth as any]: (breakpoints as any)[maxWidth as any]\n },\n mx: \"auto\",\n px: 2,\n }}\n baseClass=\"container\"\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Container\n\n\n"],"names":["__rest","useBreakpointProps","useTheme","_jsx","Tag"],"mappings":"4LASA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAGC,aAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {useBreakpointProps,useTheme,Tag}from'@xanui/core';const Container = React.forwardRef((_a, ref) => {
|
|
2
|
+
var { children, maxWidth } = _a, rest = __rest(_a, ["children", "maxWidth"]);
|
|
3
|
+
const _p = {};
|
|
4
|
+
if (maxWidth)
|
|
5
|
+
_p.maxWidth = maxWidth;
|
|
6
|
+
const p = useBreakpointProps(_p);
|
|
7
|
+
maxWidth = p.maxWidth;
|
|
8
|
+
const { breakpoints } = useTheme();
|
|
9
|
+
maxWidth = maxWidth || "lg";
|
|
10
|
+
return (jsx(Tag, Object.assign({}, rest, { sxr: {
|
|
11
|
+
width: "100%",
|
|
12
|
+
maxWidth: {
|
|
13
|
+
xs: "100%",
|
|
14
|
+
[maxWidth]: breakpoints[maxWidth]
|
|
15
|
+
},
|
|
16
|
+
mx: "auto",
|
|
17
|
+
px: 2,
|
|
18
|
+
}, baseClass: "container", ref: ref }, { children: children })));
|
|
19
|
+
});export{Container as default};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Container/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\n}\n\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\n const _p: any = {}\n if (maxWidth) _p.maxWidth = maxWidth\n const p: any = useBreakpointProps(_p)\n maxWidth = p.maxWidth\n\n const { breakpoints } = useTheme()\n maxWidth = maxWidth || \"lg\"\n return (\n <Tag\n {...rest}\n sxr={{\n width: \"100%\",\n maxWidth: {\n xs: \"100%\",\n [maxWidth as any]: (breakpoints as any)[maxWidth as any]\n },\n mx: \"auto\",\n px: 2,\n }}\n baseClass=\"container\"\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Container\n\n\n"],"names":["_jsx"],"mappings":"kJASA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),index=require('../Stack/index.js'),index$1=require('../Tabs/index.js'),index$2=require('../Tab/index.js'),index$3=require('../Select/index.js'),index$4=require('../Option/index.js'),index$5=require('../Input/index.js'),IconSearch=require('@xanui/icons/Search');const FilterBox = (props) => {
|
|
2
|
+
let { tabs, filters, onSearch, onTabChange, disableSearch, slotProps, state, update, } = props;
|
|
3
|
+
let selected = state.selectedIds;
|
|
4
|
+
let checked = state.selectAll || !!selected.length;
|
|
5
|
+
if (checked)
|
|
6
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
7
|
+
return (jsxRuntime.jsxs(index.default, Object.assign({ direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%" }, { children: [jsxRuntime.jsx(index.default, Object.assign({ gap: 2.4, flexRow: true }, { children: tabs && jsxRuntime.jsx(index$1.default, Object.assign({ onChange: (value) => {
|
|
8
|
+
update({ activeTab: value });
|
|
9
|
+
onTabChange && onTabChange(value, state);
|
|
10
|
+
}, value: state.activeTab }, { children: tabs.map(t => jsxRuntime.jsx(index$2.default, Object.assign({ value: t.value || t.label.toLowerCase() }, { children: t.label }), t.label)) })) })), jsxRuntime.jsx(index.default, Object.assign({ className: 'datatable-header-filter-area', flex: 1, flexRow: true }, { children: filters && jsxRuntime.jsx(index.default, Object.assign({ flexRow: true, gap: 2, px: 2 }, { children: Object.keys(filters).map(name => {
|
|
11
|
+
const items = filters[name];
|
|
12
|
+
return (jsxRuntime.jsx(index$3.default, Object.assign({ placeholder: name.charAt(0).toUpperCase() + name.slice(1), value: state[name] || "", onChange: (value) => {
|
|
13
|
+
update({ [name]: value });
|
|
14
|
+
} }, { children: items.map((item) => jsxRuntime.jsx(index$4.default, Object.assign({ value: item.value }, { children: item.label }), name + item.value)) }), name));
|
|
15
|
+
}) })) })), jsxRuntime.jsx(index.default, Object.assign({ flexRow: true, gap: 2, className: 'datatable-header-right-area' }, { children: !disableSearch && jsxRuntime.jsx(index$5.default, Object.assign({ endIcon: jsxRuntime.jsx(IconSearch, {}), p: 1, placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
|
|
16
|
+
update({ search: e.target.value });
|
|
17
|
+
onSearch && onSearch(e.target.value, state);
|
|
18
|
+
} })) }))] })));
|
|
19
|
+
};exports.default=FilterBox;//# sourceMappingURL=FilterBox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\nimport Stack from '../Stack'\nimport { DatatableFilter, DatatablePropsWithState } from '.'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Select from '../Select'\nimport Option from '../Option'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\n\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n let {\n tabs,\n filters,\n onSearch,\n onTabChange,\n disableSearch,\n slotProps,\n state,\n update,\n } = props\n\n let selected = state.selectedIds\n let checked = state.selectAll || !!selected.length\n\n if (checked) return <></>\n\n return (\n <Stack\n direction=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n zIndex={1}\n radius={1}\n mb={1}\n height={50}\n width=\"100%\"\n >\n <Stack gap={2.4} flexRow>\n {\n tabs && <Tabs\n onChange={(value: any) => {\n update({ activeTab: value })\n onTabChange && onTabChange(value, state)\n }}\n value={state.activeTab}\n >\n {\n tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n }\n </Tabs>\n }\n </Stack>\n <Stack className='datatable-header-filter-area' flex={1} flexRow>\n {\n filters && <Stack flexRow gap={2} px={2}>\n {\n Object.keys(filters).map(name => {\n const items: DatatableFilter[] = (filters as any)[name]\n return (\n <Select\n key={name}\n placeholder={name.charAt(0).toUpperCase() + name.slice(1)}\n value={(state as any)[name] || \"\"}\n onChange={(value) => {\n update({ [name]: value } as any)\n }}\n >\n {\n items.map((item) => <Option key={name + item.value} value={item.value}>\n {item.label}\n </Option>)\n }\n </Select>\n )\n })\n }\n </Stack>\n }\n </Stack>\n <Stack flexRow gap={2} className='datatable-header-right-area'>\n\n {!disableSearch && <Input\n endIcon={<IconSearch />}\n p={1}\n placeholder='Search...'\n {...slotProps?.search}\n value={state.search}\n onChange={(e: any) => {\n update({ search: e.target.value })\n onSearch && onSearch(e.target.value, state)\n }}\n />}\n </Stack>\n </Stack>\n )\n}\n\nexport default FilterBox"],"names":["_jsx","_jsxs","Stack","Tabs","Tab","Select","Option","Input"],"mappings":"uXAWA,MAAM,SAAS,GAAG,CAAC,KAA8B,KAAI;AAClD,IAAA,IAAI,EACD,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,GACR,GAAG,KAAK;AAET,IAAA,IAAI,QAAQ,GAAG,KAAK,CAAC,WAAW;IAChC,IAAI,OAAO,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM;AAElD,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,uCAAK;IAEzB,QACGC,eAAA,CAACC,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACH,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,EAAE,EAAE,CAAC,EACL,MAAM,EAAE,EAAE,EACV,KAAK,EAAC,MAAM,EAAA,EAAA,EAAA,QAAA,EAAA,CAEZF,cAAA,CAACE,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAElB,IAAI,IAAIF,cAAA,CAACG,eAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACV,QAAQ,EAAE,CAAC,KAAU,KAAI;AACtB,wBAAA,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAC5B,wBAAA,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC;AAC3C,oBAAA,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,SAAS,EAAA,EAAA,EAAA,QAAA,EAGnB,IAAI,CAAC,GAAG,CAAC,CAAC,IAAIH,cAAA,CAACI,eAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAe,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,EAAA,EAAA,EAAA,QAAA,EAAG,CAAC,CAAC,KAAK,EAAA,CAAA,EAA1D,CAAC,CAAC,KAAK,CAA0D,CAAC,EAAA,CAAA,CAEzF,EAAA,CAAA,CAEL,EACRJ,eAACE,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAE1D,OAAO,IAAIF,cAAA,CAACE,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,OAAO,EAAA,IAAA,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,gBAEjC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,IAAG;AAC7B,wBAAA,MAAM,KAAK,GAAuB,OAAe,CAAC,IAAI,CAAC;AACvD,wBAAA,QACGF,cAAA,CAACK,eAAM,EAAA,MAAA,CAAA,MAAA,CAAA,EAEJ,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EACzD,KAAK,EAAG,KAAa,CAAC,IAAI,CAAC,IAAI,EAAE,EACjC,QAAQ,EAAE,CAAC,KAAK,KAAI;gCACjB,MAAM,CAAC,EAAE,CAAC,IAAI,GAAG,KAAK,EAAS,CAAC;AACnC,4BAAA,CAAC,EAAA,EAAA,EAAA,QAAA,EAGE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAKL,cAAA,CAACM,eAAM,EAAA,MAAA,CAAA,MAAA,CAAA,EAAyB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAAA,EAAA,QAAA,EACjE,IAAI,CAAC,KAAK,EAAA,CAAA,EADmB,IAAI,GAAG,IAAI,CAAC,KAAK,CAEzC,CAAC,EAAA,CAAA,EAVR,IAAI,CAYH;oBAEf,CAAC,CAAC,EAAA,CAAA,CAEA,EAAA,CAAA,CAEN,EACRN,cAAA,CAACE,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,OAAO,EAAA,IAAA,EAAC,GAAG,EAAE,CAAC,EAAE,SAAS,EAAC,6BAA6B,EAAA,EAAA,EAAA,QAAA,EAE1D,CAAC,aAAa,IAAIF,cAAA,CAACO,eAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACtB,OAAO,EAAEP,cAAA,CAAC,UAAU,EAAA,EAAA,CAAG,EACvB,CAAC,EAAE,CAAC,EACJ,WAAW,EAAC,WAAW,EAAA,EACnB,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,MAAM,EAAA,EACrB,KAAK,EAAE,KAAK,CAAC,MAAM,EACnB,QAAQ,EAAE,CAAC,CAAM,KAAI;wBAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;wBAClC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC;AAC9C,oBAAA,CAAC,EAAA,CAAA,CACF,EAAA,CAAA,CACG,CAAA,EAAA,CAAA,CACH;AAEd"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import {jsx,Fragment,jsxs}from'react/jsx-runtime';import Stack from'../Stack/index.mjs';import Tabs from'../Tabs/index.mjs';import Tab from'../Tab/index.mjs';import Select from'../Select/index.mjs';import Option from'../Option/index.mjs';import Input from'../Input/index.mjs';import IconSearch from'@xanui/icons/Search';const FilterBox = (props) => {
|
|
2
|
+
let { tabs, filters, onSearch, onTabChange, disableSearch, slotProps, state, update, } = props;
|
|
3
|
+
let selected = state.selectedIds;
|
|
4
|
+
let checked = state.selectAll || !!selected.length;
|
|
5
|
+
if (checked)
|
|
6
|
+
return jsx(Fragment, {});
|
|
7
|
+
return (jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%" }, { children: [jsx(Stack, Object.assign({ gap: 2.4, flexRow: true }, { children: tabs && jsx(Tabs, Object.assign({ onChange: (value) => {
|
|
8
|
+
update({ activeTab: value });
|
|
9
|
+
onTabChange && onTabChange(value, state);
|
|
10
|
+
}, value: state.activeTab }, { children: tabs.map(t => jsx(Tab, Object.assign({ value: t.value || t.label.toLowerCase() }, { children: t.label }), t.label)) })) })), jsx(Stack, Object.assign({ className: 'datatable-header-filter-area', flex: 1, flexRow: true }, { children: filters && jsx(Stack, Object.assign({ flexRow: true, gap: 2, px: 2 }, { children: Object.keys(filters).map(name => {
|
|
11
|
+
const items = filters[name];
|
|
12
|
+
return (jsx(Select, Object.assign({ placeholder: name.charAt(0).toUpperCase() + name.slice(1), value: state[name] || "", onChange: (value) => {
|
|
13
|
+
update({ [name]: value });
|
|
14
|
+
} }, { children: items.map((item) => jsx(Option, Object.assign({ value: item.value }, { children: item.label }), name + item.value)) }), name));
|
|
15
|
+
}) })) })), jsx(Stack, Object.assign({ flexRow: true, gap: 2, className: 'datatable-header-right-area' }, { children: !disableSearch && jsx(Input, Object.assign({ endIcon: jsx(IconSearch, {}), p: 1, placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
|
|
16
|
+
update({ search: e.target.value });
|
|
17
|
+
onSearch && onSearch(e.target.value, state);
|
|
18
|
+
} })) }))] })));
|
|
19
|
+
};export{FilterBox as default};//# sourceMappingURL=FilterBox.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBox.mjs","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\nimport Stack from '../Stack'\nimport { DatatableFilter, DatatablePropsWithState } from '.'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Select from '../Select'\nimport Option from '../Option'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\n\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n let {\n tabs,\n filters,\n onSearch,\n onTabChange,\n disableSearch,\n slotProps,\n state,\n update,\n } = props\n\n let selected = state.selectedIds\n let checked = state.selectAll || !!selected.length\n\n if (checked) return <></>\n\n return (\n <Stack\n direction=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n zIndex={1}\n radius={1}\n mb={1}\n height={50}\n width=\"100%\"\n >\n <Stack gap={2.4} flexRow>\n {\n tabs && <Tabs\n onChange={(value: any) => {\n update({ activeTab: value })\n onTabChange && onTabChange(value, state)\n }}\n value={state.activeTab}\n >\n {\n tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n }\n </Tabs>\n }\n </Stack>\n <Stack className='datatable-header-filter-area' flex={1} flexRow>\n {\n filters && <Stack flexRow gap={2} px={2}>\n {\n Object.keys(filters).map(name => {\n const items: DatatableFilter[] = (filters as any)[name]\n return (\n <Select\n key={name}\n placeholder={name.charAt(0).toUpperCase() + name.slice(1)}\n value={(state as any)[name] || \"\"}\n onChange={(value) => {\n update({ [name]: value } as any)\n }}\n >\n {\n items.map((item) => <Option key={name + item.value} value={item.value}>\n {item.label}\n </Option>)\n }\n </Select>\n )\n })\n }\n </Stack>\n }\n </Stack>\n <Stack flexRow gap={2} className='datatable-header-right-area'>\n\n {!disableSearch && <Input\n endIcon={<IconSearch />}\n p={1}\n placeholder='Search...'\n {...slotProps?.search}\n value={state.search}\n onChange={(e: any) => {\n update({ search: e.target.value })\n onSearch && onSearch(e.target.value, state)\n }}\n />}\n </Stack>\n </Stack>\n )\n}\n\nexport default FilterBox"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/Datatable/Row.js
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../TableRow/index.js'),index$1=require('../TableCell/index.js'),index$2=require('../Checkbox/index.js'),index$3=require('../IconButton/index.js'),index$5=require('../List/index.js'),index$6=require('../ListItem/index.js'),ActionIcon=require('@xanui/icons/MoreVert'),index$4=require('../Menu/index.js');const Row = ({ rows, rawRow, row, rowAction, disableRow, disableSelect, columns, state, update }) => {
|
|
2
|
+
let selectesIds = state.selectedIds;
|
|
3
|
+
const selected = row.id ? state.selectedIds.includes(row === null || row === void 0 ? void 0 : row.id) : false;
|
|
4
|
+
let selectedColor = selected ? "primary.soft" : "transparent";
|
|
5
|
+
const [target, setTarget] = React.useState();
|
|
6
|
+
const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false;
|
|
7
|
+
return (jsxRuntime.jsxs(index.default, Object.assign({ disabled: isDisable }, { children: [!disableSelect && jsxRuntime.jsx(index$1.default, Object.assign({ width: 40, bgcolor: selectedColor }, { children: !!row.id && jsxRuntime.jsx(index$2.default, { checked: selected, onChange: () => {
|
|
8
|
+
if (isDisable || !row.id)
|
|
9
|
+
return;
|
|
10
|
+
let ids = [...selectesIds];
|
|
11
|
+
ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id);
|
|
12
|
+
let selectedLength = 0;
|
|
13
|
+
rows.forEach(r => {
|
|
14
|
+
const isDisable = (disableRow ? disableRow(r, state) : false) || false;
|
|
15
|
+
if (!isDisable)
|
|
16
|
+
selectedLength++;
|
|
17
|
+
});
|
|
18
|
+
update({
|
|
19
|
+
selectAll: selectedLength === ids.length,
|
|
20
|
+
selectedIds: ids
|
|
21
|
+
});
|
|
22
|
+
} }) })), columns.map((_a, idx) => {
|
|
23
|
+
var { label, field } = _a, rest = tslib.__rest(_a, ["label", "field"]);
|
|
24
|
+
field = field || label;
|
|
25
|
+
if (!row[field])
|
|
26
|
+
return jsxRuntime.jsx(index$1.default, {}, idx);
|
|
27
|
+
return (jsxRuntime.jsx(index$1.default, Object.assign({ textAlign: "left" }, rest, { bgcolor: selectedColor }, { children: row[field] }), idx));
|
|
28
|
+
}), jsxRuntime.jsx(index$1.default, Object.assign({ width: 30, bgcolor: selectedColor, borderColor: "divider" }, { children: rowAction && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index$3.default, Object.assign({ disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "default" }, { children: jsxRuntime.jsx(ActionIcon, {}) })), jsxRuntime.jsx(index$4.default, Object.assign({ target: target, placement: "bottom-right", onClickOutside: () => setTarget(null) }, { children: jsxRuntime.jsx(index$5.default, Object.assign({ bgcolor: "background.primary", minWidth: 160, sx: {
|
|
29
|
+
'& > li': {
|
|
30
|
+
borderBottom: 1,
|
|
31
|
+
'&:last-child': {
|
|
32
|
+
borderBottom: 0
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
} }, { children: rowAction({ row, state }).map(({ label, icon, onClick }) => {
|
|
36
|
+
return (jsxRuntime.jsx(index$6.default, Object.assign({ startIcon: icon, onClick: (e) => {
|
|
37
|
+
onClick && onClick(e);
|
|
38
|
+
setTarget(null);
|
|
39
|
+
} }, { children: label }), label));
|
|
40
|
+
}) })) }))] }) }))] })));
|
|
41
|
+
};exports.default=Row;//# sourceMappingURL=Row.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Row.js","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\nimport { useState } from 'react'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport { DataTableDefaultRow, DatatablePropsWithState } from '.'\nimport Checkbox from '../Checkbox'\nimport IconButton from '../IconButton'\nimport List from '../List'\nimport ListItem from '../ListItem'\nimport ActionIcon from '@xanui/icons/MoreVert'\nimport Menu from '../Menu'\n\n\ntype Props = DatatablePropsWithState & {\n rawRow: DataTableDefaultRow;\n row: DataTableDefaultRow;\n}\n\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, disableSelect, columns, state, update }: Props) => {\n let selectesIds = state.selectedIds\n const selected = row.id ? state.selectedIds.includes(row?.id) : false\n let selectedColor = selected ? \"primary.soft\" : \"transparent\"\n const [target, setTarget] = useState<any>()\n const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\n\n return (\n <TableRow disabled={isDisable}>\n {!disableSelect && <TableCell width={40} bgcolor={selectedColor}>\n {\n !!row.id && <Checkbox\n checked={selected}\n onChange={() => {\n if (isDisable || !row.id) return\n let ids = [...selectesIds]\n ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\n let selectedLength = 0\n rows.forEach(r => {\n const isDisable = (disableRow ? disableRow(r, state) : false) || false\n if (!isDisable) selectedLength++\n })\n\n update({\n selectAll: selectedLength === ids.length,\n selectedIds: ids\n })\n }}\n />\n }\n\n </TableCell>}\n {\n columns.map(({ label, field, ...rest }, idx) => {\n field = field || label\n if (!row[field]) return <TableCell key={idx}></TableCell>\n return (\n <TableCell\n key={idx}\n textAlign=\"left\"\n {...rest}\n bgcolor={selectedColor}\n >\n {row[field]}\n </TableCell>\n )\n })\n }\n <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\n {rowAction && <>\n <IconButton\n disabled={isDisable || selected}\n onClick={(e: any) => setTarget(e.currentTarget)}\n variant=\"text\"\n color=\"default\"\n >\n <ActionIcon />\n </IconButton>\n <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\n <List\n bgcolor=\"background.primary\"\n minWidth={160}\n sx={{\n '& > li': {\n borderBottom: 1,\n '&:last-child': {\n borderBottom: 0\n }\n }\n }}\n >\n {rowAction({ row, state }).map(({ label, icon, onClick }) => {\n return (\n <ListItem\n key={label}\n startIcon={icon}\n onClick={(e: any) => {\n onClick && onClick(e)\n setTarget(null)\n }}\n >{label}</ListItem>\n )\n })}\n </List>\n </Menu>\n </>}\n </TableCell>\n </TableRow>\n )\n}\n\nexport default Row"],"names":["useState","_jsxs","TableRow","_jsx","TableCell","Checkbox","__rest","_Fragment","IconButton","Menu","List","ListItem"],"mappings":"6dAkBA,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAS,KAAI;AACvG,IAAA,IAAI,WAAW,GAAG,KAAK,CAAC,WAAW;IACnC,MAAM,QAAQ,GAAG,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,EAAE,CAAC,GAAG,KAAK;IACrE,IAAI,aAAa,GAAG,QAAQ,GAAG,cAAc,GAAG,aAAa;IAC7D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,EAAO;IAC3C,MAAM,SAAS,GAAG,CAAC,UAAU,GAAG,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,KAAK,KAAK,KAAK;AAE3E,IAAA,QACIC,eAAA,CAACC,aAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,QAAQ,EAAE,SAAS,EAAA,EAAA,EAAA,QAAA,EAAA,CACxB,CAAC,aAAa,IAAIC,cAAA,CAACC,eAAS,kBAAC,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,gBAEvD,CAAC,CAAC,GAAG,CAAC,EAAE,IAAID,cAAA,CAACE,eAAQ,EAAA,EACjB,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,MAAK;AACX,wBAAA,IAAI,SAAS,IAAI,CAAC,GAAG,CAAC,EAAE;4BAAE;AAC1B,wBAAA,IAAI,GAAG,GAAG,CAAC,GAAG,WAAW,CAAC;AAC1B,wBAAA,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;wBAC5E,IAAI,cAAc,GAAG,CAAC;AACtB,wBAAA,IAAI,CAAC,OAAO,CAAC,CAAC,IAAG;4BACb,MAAM,SAAS,GAAG,CAAC,UAAU,GAAG,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,KAAK,KAAK,KAAK;AACtE,4BAAA,IAAI,CAAC,SAAS;AAAE,gCAAA,cAAc,EAAE;AACpC,wBAAA,CAAC,CAAC;AAEF,wBAAA,MAAM,CAAC;AACH,4BAAA,SAAS,EAAE,cAAc,KAAK,GAAG,CAAC,MAAM;AACxC,4BAAA,WAAW,EAAE;AAChB,yBAAA,CAAC;AACN,oBAAA,CAAC,EAAA,CACH,EAAA,CAAA,CAGE,EAER,OAAO,CAAC,GAAG,CAAC,CAAC,EAAyB,EAAE,GAAG,KAAI;oBAAlC,EAAE,KAAK,EAAE,KAAK,EAAA,GAAA,EAAW,EAAN,IAAI,GAAAC,YAAA,CAAA,EAAA,EAAvB,kBAAyB,CAAF;AAChC,gBAAA,KAAK,GAAG,KAAK,IAAI,KAAK;AACtB,gBAAA,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;AAAE,oBAAA,OAAOH,cAAA,CAACC,eAAS,EAAA,EAAA,EAAM,GAAG,CAAc;gBACzD,QACID,eAACC,eAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAEN,SAAS,EAAC,MAAM,EAAA,EACZ,IAAI,EAAA,EACR,OAAO,EAAE,aAAa,EAAA,EAAA,EAAA,QAAA,EAErB,GAAG,CAAC,KAAK,CAAC,EAAA,CAAA,EALN,GAAG,CAMA;AAEpB,YAAA,CAAC,CAAC,EAEND,cAAA,CAACC,eAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAC,SAAS,EAAA,EAAA,EAAA,QAAA,EAC9D,SAAS,IAAIH,eAAA,CAAAM,mBAAA,EAAA,EAAA,QAAA,EAAA,CACVJ,cAAA,CAACK,eAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,QAAQ,EAAE,SAAS,IAAI,QAAQ,EAC/B,OAAO,EAAE,CAAC,CAAM,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,EAC/C,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,SAAS,EAAA,EAAA,EAAA,QAAA,EAEfL,cAAA,CAAC,UAAU,EAAA,EAAA,CAAG,EAAA,CAAA,CACL,EACbA,cAAA,CAACM,eAAI,kBAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAC,cAAc,EAAC,cAAc,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,gBAChFN,cAAA,CAACO,eAAI,kBACD,OAAO,EAAC,oBAAoB,EAC5B,QAAQ,EAAE,GAAG,EACb,EAAE,EAAE;AACA,oCAAA,QAAQ,EAAE;AACN,wCAAA,YAAY,EAAE,CAAC;AACf,wCAAA,cAAc,EAAE;AACZ,4CAAA,YAAY,EAAE;AACjB;AACJ;iCACJ,EAAA,EAAA,EAAA,QAAA,EAEA,SAAS,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,KAAI;AACxD,oCAAA,QACIP,cAAA,CAACQ,eAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAEL,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,CAAC,CAAM,KAAI;AAChB,4CAAA,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC;4CACrB,SAAS,CAAC,IAAI,CAAC;AACnB,wCAAA,CAAC,gBACH,KAAK,EAAA,CAAA,EANE,KAAK,CAMK;AAE3B,gCAAA,CAAC,CAAC,EAAA,CAAA,CACC,EAAA,CAAA,CACJ,IACR,EAAA,CAAA,CACK,CAAA,EAAA,CAAA,CACL;AAEnB"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import {__rest}from'tslib';import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState}from'react';import TableRow from'../TableRow/index.mjs';import TableCell from'../TableCell/index.mjs';import Checkbox from'../Checkbox/index.mjs';import IconButton from'../IconButton/index.mjs';import List from'../List/index.mjs';import ListItem from'../ListItem/index.mjs';import ActionIcon from'@xanui/icons/MoreVert';import Menu from'../Menu/index.mjs';const Row = ({ rows, rawRow, row, rowAction, disableRow, disableSelect, columns, state, update }) => {
|
|
2
|
+
let selectesIds = state.selectedIds;
|
|
3
|
+
const selected = row.id ? state.selectedIds.includes(row === null || row === void 0 ? void 0 : row.id) : false;
|
|
4
|
+
let selectedColor = selected ? "primary.soft" : "transparent";
|
|
5
|
+
const [target, setTarget] = useState();
|
|
6
|
+
const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false;
|
|
7
|
+
return (jsxs(TableRow, Object.assign({ disabled: isDisable }, { children: [!disableSelect && jsx(TableCell, Object.assign({ width: 40, bgcolor: selectedColor }, { children: !!row.id && jsx(Checkbox, { checked: selected, onChange: () => {
|
|
8
|
+
if (isDisable || !row.id)
|
|
9
|
+
return;
|
|
10
|
+
let ids = [...selectesIds];
|
|
11
|
+
ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id);
|
|
12
|
+
let selectedLength = 0;
|
|
13
|
+
rows.forEach(r => {
|
|
14
|
+
const isDisable = (disableRow ? disableRow(r, state) : false) || false;
|
|
15
|
+
if (!isDisable)
|
|
16
|
+
selectedLength++;
|
|
17
|
+
});
|
|
18
|
+
update({
|
|
19
|
+
selectAll: selectedLength === ids.length,
|
|
20
|
+
selectedIds: ids
|
|
21
|
+
});
|
|
22
|
+
} }) })), columns.map((_a, idx) => {
|
|
23
|
+
var { label, field } = _a, rest = __rest(_a, ["label", "field"]);
|
|
24
|
+
field = field || label;
|
|
25
|
+
if (!row[field])
|
|
26
|
+
return jsx(TableCell, {}, idx);
|
|
27
|
+
return (jsx(TableCell, Object.assign({ textAlign: "left" }, rest, { bgcolor: selectedColor }, { children: row[field] }), idx));
|
|
28
|
+
}), jsx(TableCell, Object.assign({ width: 30, bgcolor: selectedColor, borderColor: "divider" }, { children: rowAction && jsxs(Fragment, { children: [jsx(IconButton, Object.assign({ disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "default" }, { children: jsx(ActionIcon, {}) })), jsx(Menu, Object.assign({ target: target, placement: "bottom-right", onClickOutside: () => setTarget(null) }, { children: jsx(List, Object.assign({ bgcolor: "background.primary", minWidth: 160, sx: {
|
|
29
|
+
'& > li': {
|
|
30
|
+
borderBottom: 1,
|
|
31
|
+
'&:last-child': {
|
|
32
|
+
borderBottom: 0
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
} }, { children: rowAction({ row, state }).map(({ label, icon, onClick }) => {
|
|
36
|
+
return (jsx(ListItem, Object.assign({ startIcon: icon, onClick: (e) => {
|
|
37
|
+
onClick && onClick(e);
|
|
38
|
+
setTarget(null);
|
|
39
|
+
} }, { children: label }), label));
|
|
40
|
+
}) })) }))] }) }))] })));
|
|
41
|
+
};export{Row as default};//# sourceMappingURL=Row.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Row.mjs","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\nimport { useState } from 'react'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport { DataTableDefaultRow, DatatablePropsWithState } from '.'\nimport Checkbox from '../Checkbox'\nimport IconButton from '../IconButton'\nimport List from '../List'\nimport ListItem from '../ListItem'\nimport ActionIcon from '@xanui/icons/MoreVert'\nimport Menu from '../Menu'\n\n\ntype Props = DatatablePropsWithState & {\n rawRow: DataTableDefaultRow;\n row: DataTableDefaultRow;\n}\n\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, disableSelect, columns, state, update }: Props) => {\n let selectesIds = state.selectedIds\n const selected = row.id ? state.selectedIds.includes(row?.id) : false\n let selectedColor = selected ? \"primary.soft\" : \"transparent\"\n const [target, setTarget] = useState<any>()\n const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\n\n return (\n <TableRow disabled={isDisable}>\n {!disableSelect && <TableCell width={40} bgcolor={selectedColor}>\n {\n !!row.id && <Checkbox\n checked={selected}\n onChange={() => {\n if (isDisable || !row.id) return\n let ids = [...selectesIds]\n ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\n let selectedLength = 0\n rows.forEach(r => {\n const isDisable = (disableRow ? disableRow(r, state) : false) || false\n if (!isDisable) selectedLength++\n })\n\n update({\n selectAll: selectedLength === ids.length,\n selectedIds: ids\n })\n }}\n />\n }\n\n </TableCell>}\n {\n columns.map(({ label, field, ...rest }, idx) => {\n field = field || label\n if (!row[field]) return <TableCell key={idx}></TableCell>\n return (\n <TableCell\n key={idx}\n textAlign=\"left\"\n {...rest}\n bgcolor={selectedColor}\n >\n {row[field]}\n </TableCell>\n )\n })\n }\n <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\n {rowAction && <>\n <IconButton\n disabled={isDisable || selected}\n onClick={(e: any) => setTarget(e.currentTarget)}\n variant=\"text\"\n color=\"default\"\n >\n <ActionIcon />\n </IconButton>\n <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\n <List\n bgcolor=\"background.primary\"\n minWidth={160}\n sx={{\n '& > li': {\n borderBottom: 1,\n '&:last-child': {\n borderBottom: 0\n }\n }\n }}\n >\n {rowAction({ row, state }).map(({ label, icon, onClick }) => {\n return (\n <ListItem\n key={label}\n startIcon={icon}\n onClick={(e: any) => {\n onClick && onClick(e)\n setTarget(null)\n }}\n >{label}</ListItem>\n )\n })}\n </List>\n </Menu>\n </>}\n </TableCell>\n </TableRow>\n )\n}\n\nexport default Row"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),index$2=require('../IconButton/index.js'),index=require('../Stack/index.js'),index$1=require('../Text/index.js');const SelectedBox = (props) => {
|
|
2
|
+
let { state, rowAction } = props;
|
|
3
|
+
let selected = state.selectedIds;
|
|
4
|
+
let checked = state.selectAll || !!selected.length;
|
|
5
|
+
if (!checked)
|
|
6
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
7
|
+
return (jsxRuntime.jsxs(index.default, Object.assign({ bgcolor: "background.secondary", direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", px: 1.5 }, { children: [jsxRuntime.jsxs(index$1.default, Object.assign({ fontWeight: 600 }, { children: ["Selected: ", selected.length] })), jsxRuntime.jsx(index.default, Object.assign({ flexRow: true, gap: 1 }, { children: rowAction && rowAction({ row: null, state }).map((_a) => {
|
|
8
|
+
var { label, icon } = _a, bprops = tslib.__rest(_a, ["label", "icon"]);
|
|
9
|
+
return (jsxRuntime.jsx(index$2.default, Object.assign({ variant: "alpha", color: "brand" }, bprops, { children: icon }), label));
|
|
10
|
+
}) }))] })));
|
|
11
|
+
};exports.default=SelectedBox;//# sourceMappingURL=SelectedBox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectedBox.js","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["\nimport IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from '.'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n let {\n state,\n rowAction\n } = props\n\n let selected = state.selectedIds\n let checked = state.selectAll || !!selected.length\n\n if (!checked) return <></>\n\n return (\n <Stack\n bgcolor=\"background.secondary\"\n direction=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n zIndex={1}\n radius={1}\n mb={1}\n height={50}\n width=\"100%\"\n px={1.5}\n >\n <Text fontWeight={600}>Selected: {selected.length}</Text>\n <Stack\n flexRow\n gap={1}\n >\n {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n return (\n <IconButton\n key={label}\n variant=\"alpha\"\n color=\"brand\"\n {...bprops}\n >\n {icon}\n </IconButton>\n )\n })}\n </Stack>\n </Stack>\n )\n}\n\nexport default SelectedBox"],"names":["_jsx","_jsxs","Stack","Text","__rest","IconButton"],"mappings":"0PAMA,MAAM,WAAW,GAAG,CAAC,KAA8B,KAAI;AACpD,IAAA,IAAI,EACD,KAAK,EACL,SAAS,EACX,GAAG,KAAK;AAET,IAAA,IAAI,QAAQ,GAAG,KAAK,CAAC,WAAW;IAChC,IAAI,OAAO,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM;AAElD,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAOA,uCAAK;AAE1B,IAAA,QACGC,eAAA,CAACC,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACH,OAAO,EAAC,sBAAsB,EAC9B,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,EAAE,EAAE,CAAC,EACL,MAAM,EAAE,EAAE,EACV,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE,GAAG,iBAEPD,eAAA,CAACE,eAAI,kBAAC,UAAU,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,YAAA,EAAa,QAAQ,CAAC,MAAM,KAAQ,EACzDH,cAAA,CAACE,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACH,OAAO,QACP,GAAG,EAAE,CAAC,EAAA,EAAA,EAAA,QAAA,EAEL,SAAS,IAAI,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAA0B,KAAI;wBAA9B,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAAa,EAAR,MAAM,GAAAE,YAAA,CAAA,EAAA,EAAxB,iBAA0B,CAAF;AACxE,oBAAA,QACGJ,cAAA,CAACK,eAAU,kBAER,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,OAAO,EAAA,EACT,MAAM,EAAA,EAAA,QAAA,EAET,IAAI,KALA,KAAK,CAMA;AAEnB,gBAAA,CAAC,CAAC,EAAA,CAAA,CACG,CAAA,EAAA,CAAA,CACH;AAEd"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import {__rest}from'tslib';import {jsx,Fragment,jsxs}from'react/jsx-runtime';import IconButton from'../IconButton/index.mjs';import Stack from'../Stack/index.mjs';import Text from'../Text/index.mjs';const SelectedBox = (props) => {
|
|
2
|
+
let { state, rowAction } = props;
|
|
3
|
+
let selected = state.selectedIds;
|
|
4
|
+
let checked = state.selectAll || !!selected.length;
|
|
5
|
+
if (!checked)
|
|
6
|
+
return jsx(Fragment, {});
|
|
7
|
+
return (jsxs(Stack, Object.assign({ bgcolor: "background.secondary", direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", px: 1.5 }, { children: [jsxs(Text, Object.assign({ fontWeight: 600 }, { children: ["Selected: ", selected.length] })), jsx(Stack, Object.assign({ flexRow: true, gap: 1 }, { children: rowAction && rowAction({ row: null, state }).map((_a) => {
|
|
8
|
+
var { label, icon } = _a, bprops = __rest(_a, ["label", "icon"]);
|
|
9
|
+
return (jsx(IconButton, Object.assign({ variant: "alpha", color: "brand" }, bprops, { children: icon }), label));
|
|
10
|
+
}) }))] })));
|
|
11
|
+
};export{SelectedBox as default};//# sourceMappingURL=SelectedBox.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectedBox.mjs","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["\nimport IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from '.'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n let {\n state,\n rowAction\n } = props\n\n let selected = state.selectedIds\n let checked = state.selectAll || !!selected.length\n\n if (!checked) return <></>\n\n return (\n <Stack\n bgcolor=\"background.secondary\"\n direction=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n zIndex={1}\n radius={1}\n mb={1}\n height={50}\n width=\"100%\"\n px={1.5}\n >\n <Text fontWeight={600}>Selected: {selected.length}</Text>\n <Stack\n flexRow\n gap={1}\n >\n {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n return (\n <IconButton\n key={label}\n variant=\"alpha\"\n color=\"brand\"\n {...bprops}\n >\n {icon}\n </IconButton>\n )\n })}\n </Stack>\n </Stack>\n )\n}\n\nexport default SelectedBox"],"names":["_jsx","_jsxs"],"mappings":"uMAMA,MAAM,WAAW,GAAG,CAAC,KAA8B,KAAI;AACpD,IAAA,IAAI,EACD,KAAK,EACL,SAAS,EACX,GAAG,KAAK;AAET,IAAA,IAAI,QAAQ,GAAG,KAAK,CAAC,WAAW;IAChC,IAAI,OAAO,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM;AAElD,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAOA,iBAAK;AAE1B,IAAA,QACGC,IAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACH,OAAO,EAAC,sBAAsB,EAC9B,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,EAAE,EAAE,CAAC,EACL,MAAM,EAAE,EAAE,EACV,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE,GAAG,iBAEPA,IAAA,CAAC,IAAI,kBAAC,UAAU,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,YAAA,EAAa,QAAQ,CAAC,MAAM,KAAQ,EACzDD,GAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACH,OAAO,QACP,GAAG,EAAE,CAAC,EAAA,EAAA,EAAA,QAAA,EAEL,SAAS,IAAI,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAA0B,KAAI;wBAA9B,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAAa,EAAR,MAAM,GAAA,MAAA,CAAA,EAAA,EAAxB,iBAA0B,CAAF;AACxE,oBAAA,QACGA,GAAA,CAAC,UAAU,kBAER,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,OAAO,EAAA,EACT,MAAM,EAAA,EAAA,QAAA,EAET,IAAI,KALA,KAAK,CAMA;AAEnB,gBAAA,CAAC,CAAC,EAAA,CAAA,CACG,CAAA,EAAA,CAAA,CACH;AAEd"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),TableHead=require('./TableHead.js'),index=require('../Table/index.js'),index$1=require('../TableBody/index.js'),Row=require('./Row.js');const TableArea = (props) => {
|
|
2
|
+
let { rows, renderRow, state, update, slotProps } = props;
|
|
3
|
+
return (jsxRuntime.jsxs(index.default, Object.assign({ width: "100%", border: 1 }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsxRuntime.jsx(TableHead.default, Object.assign({}, props, { update: update, state: state })), jsxRuntime.jsx(index$1.default, Object.assign({ sx: {
|
|
4
|
+
'& tr:last-child td': {
|
|
5
|
+
borderBottom: 0
|
|
6
|
+
}
|
|
7
|
+
} }, { children: rows === null || rows === void 0 ? void 0 : rows.map((row, idx) => {
|
|
8
|
+
let _row = renderRow ? renderRow(Object.assign({}, row), state) : row;
|
|
9
|
+
return jsxRuntime.jsx(Row.default, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), row.id + idx);
|
|
10
|
+
}) }))] })));
|
|
11
|
+
};exports.default=TableArea;//# sourceMappingURL=Table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from '.'\n\nconst TableArea = (props: DatatablePropsWithState) => {\n let {\n rows,\n renderRow,\n state,\n update,\n slotProps\n } = props\n\n return (\n <Table width=\"100%\" border={1} {...slotProps?.table}>\n <TableHead {...props} update={update} state={state} />\n <TableBody\n sx={{\n '& tr:last-child td': {\n borderBottom: 0\n }\n }}\n >\n {\n rows?.map((row: any, idx) => {\n let _row = renderRow ? renderRow({ ...row }, state) : row\n return <Row\n key={row.id + idx}\n rawRow={row}\n row={_row}\n {...props}\n update={update}\n state={state}\n />\n })\n }\n </TableBody>\n </Table>\n )\n}\n\nexport default TableArea"],"names":["_jsxs","Table","_jsx","TableHead","TableBody","Row"],"mappings":"0PAOA,MAAM,SAAS,GAAG,CAAC,KAA8B,KAAI;AAClD,IAAA,IAAI,EACD,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACX,GAAG,KAAK;AAET,IAAA,QACGA,eAAA,CAACC,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,CAAC,EAAA,EAAM,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,EAAA,EAAA,QAAA,EAAA,CAChDC,cAAA,CAACC,iBAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAA,CAAA,CAAI,EACtDD,eAACE,eAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,EAAE,EAAE;AACD,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,YAAY,EAAE;AAChB;AACH,iBAAA,EAAA,EAAA,EAAA,QAAA,EAGE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,GAAQ,EAAE,GAAG,KAAI;AACzB,oBAAA,IAAI,IAAI,GAAG,SAAS,GAAG,SAAS,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,GAAG,CAAA,EAAI,KAAK,CAAC,GAAG,GAAG;oBACzD,OAAOF,cAAA,CAACG,WAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAER,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,IAAI,EAAA,EACL,KAAK,EAAA,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EAAA,CAAA,EALP,GAAG,CAAC,EAAE,GAAG,GAAG,CAMlB;AACL,gBAAA,CAAC,CAAC,EAAA,CAAA,CAEI,CAAA,EAAA,CAAA,CACP;AAEd"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import {jsxs,jsx}from'react/jsx-runtime';import TableHeadRender from'./TableHead.mjs';import Table from'../Table/index.mjs';import TableBody from'../TableBody/index.mjs';import Row from'./Row.mjs';const TableArea = (props) => {
|
|
2
|
+
let { rows, renderRow, state, update, slotProps } = props;
|
|
3
|
+
return (jsxs(Table, Object.assign({ width: "100%", border: 1 }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsx(TableHeadRender, Object.assign({}, props, { update: update, state: state })), jsx(TableBody, Object.assign({ sx: {
|
|
4
|
+
'& tr:last-child td': {
|
|
5
|
+
borderBottom: 0
|
|
6
|
+
}
|
|
7
|
+
} }, { children: rows === null || rows === void 0 ? void 0 : rows.map((row, idx) => {
|
|
8
|
+
let _row = renderRow ? renderRow(Object.assign({}, row), state) : row;
|
|
9
|
+
return jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), row.id + idx);
|
|
10
|
+
}) }))] })));
|
|
11
|
+
};export{TableArea as default};//# sourceMappingURL=Table.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.mjs","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from '.'\n\nconst TableArea = (props: DatatablePropsWithState) => {\n let {\n rows,\n renderRow,\n state,\n update,\n slotProps\n } = props\n\n return (\n <Table width=\"100%\" border={1} {...slotProps?.table}>\n <TableHead {...props} update={update} state={state} />\n <TableBody\n sx={{\n '& tr:last-child td': {\n borderBottom: 0\n }\n }}\n >\n {\n rows?.map((row: any, idx) => {\n let _row = renderRow ? renderRow({ ...row }, state) : row\n return <Row\n key={row.id + idx}\n rawRow={row}\n row={_row}\n {...props}\n update={update}\n state={state}\n />\n })\n }\n </TableBody>\n </Table>\n )\n}\n\nexport default TableArea"],"names":["_jsxs","_jsx","TableHead"],"mappings":"qMAOA,MAAM,SAAS,GAAG,CAAC,KAA8B,KAAI;AAClD,IAAA,IAAI,EACD,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACX,GAAG,KAAK;AAET,IAAA,QACGA,IAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,CAAC,EAAA,EAAM,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,EAAA,EAAA,QAAA,EAAA,CAChDC,GAAA,CAACC,eAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAA,CAAA,CAAI,EACtDD,IAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,EAAE,EAAE;AACD,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,YAAY,EAAE;AAChB;AACH,iBAAA,EAAA,EAAA,EAAA,QAAA,EAGE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,GAAQ,EAAE,GAAG,KAAI;AACzB,oBAAA,IAAI,IAAI,GAAG,SAAS,GAAG,SAAS,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,GAAG,CAAA,EAAI,KAAK,CAAC,GAAG,GAAG;oBACzD,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAER,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,IAAI,EAAA,EACL,KAAK,EAAA,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EAAA,CAAA,EALP,GAAG,CAAC,EAAE,GAAG,GAAG,CAMlB;AACL,gBAAA,CAAC,CAAC,EAAA,CAAA,CAEI,CAAA,EAAA,CAAA,CACP;AAEd"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),index=require('../TableHead/index.js'),index$1=require('../TableRow/index.js'),index$2=require('../TableCell/index.js'),index$3=require('../Checkbox/index.js'),IndeterminateCheckBoxIcon=require('@xanui/icons/IndeterminateCheckBox');const TableHeadRender = ({ columns, rows, disableRow, disableSelect, state, update }) => {
|
|
2
|
+
if (!columns.length)
|
|
3
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
4
|
+
let selected = state.selectedIds;
|
|
5
|
+
let checked = state.selectAll || !!selected.length;
|
|
6
|
+
return (jsxRuntime.jsx(index.default, Object.assign({ position: "relative" }, { children: jsxRuntime.jsxs(index$1.default, Object.assign({ bgcolor: "default", borderBottom: 1 }, { children: [!disableSelect && jsxRuntime.jsx(index$2.default, Object.assign({ th: true, width: 40 }, { children: jsxRuntime.jsx(index$3.default, { checkIcon: selected.length && !state.selectAll ? jsxRuntime.jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
|
|
7
|
+
let ids = [];
|
|
8
|
+
let undefinedCount = 0;
|
|
9
|
+
for (let i = 0; i < rows.length; i++) {
|
|
10
|
+
const row = rows[i];
|
|
11
|
+
const isDisable = (disableRow ? disableRow(row, state) : false) || false;
|
|
12
|
+
if (!isDisable && row.id) {
|
|
13
|
+
ids.push(row.id);
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
undefinedCount += 1;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
if (undefinedCount) {
|
|
20
|
+
update({
|
|
21
|
+
selectedIds: selected.length ? [] : ids,
|
|
22
|
+
selectAll: !selected.length
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
update({
|
|
27
|
+
selectedIds: state.selectAll ? [] : ids,
|
|
28
|
+
selectAll: !state.selectAll
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
} }) })), columns.map((_a, idx) => {
|
|
32
|
+
var { label, field: _f } = _a, rest = tslib.__rest(_a, ["label", "field"]);
|
|
33
|
+
return jsxRuntime.jsx(index$2.default, Object.assign({ th: true, textAlign: "left" }, rest, { children: label }), idx);
|
|
34
|
+
}), jsxRuntime.jsx(index$2.default, { th: true, width: 30 })] })) })));
|
|
35
|
+
};exports.default=TableHeadRender;//# sourceMappingURL=TableHead.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableHead.js","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\nimport TableHead from '../TableHead'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport { DatatablePropsWithState } from '.'\nimport Checkbox from '../Checkbox'\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\n\n\nconst TableHeadRender = ({ columns, rows, disableRow, disableSelect, state, update }: DatatablePropsWithState) => {\n if (!columns.length) return <></>\n let selected = state.selectedIds\n let checked = state.selectAll || !!selected.length\n\n return (\n <TableHead position=\"relative\">\n <TableRow bgcolor=\"default\" borderBottom={1} >\n {!disableSelect && <TableCell th width={40}>\n <Checkbox\n checkIcon={selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\n checked={checked}\n onChange={() => {\n let ids: any = []\n let undefinedCount = 0\n for (let i = 0; i < rows.length; i++) {\n const row = rows[i]\n const isDisable = (disableRow ? disableRow(row, state) : false) || false\n if (!isDisable && row.id) {\n ids.push(row.id)\n } else {\n undefinedCount += 1\n }\n }\n\n if (undefinedCount) {\n update({\n selectedIds: selected.length ? [] : ids,\n selectAll: !selected.length\n })\n } else {\n update({\n selectedIds: state.selectAll ? [] : ids,\n selectAll: !state.selectAll\n })\n }\n }}\n />\n </TableCell>}\n {\n columns.map(({ label, field: _f, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>{label}</TableCell>)\n }\n <TableCell th width={30}>\n\n </TableCell>\n </TableRow>\n </TableHead>\n )\n}\n\nexport default TableHeadRender\n"],"names":["_jsx","TableHead","_jsxs","TableRow","TableCell","Checkbox","IntermidiatIcon","__rest"],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import {__rest}from'tslib';import {jsx,Fragment,jsxs}from'react/jsx-runtime';import TableHead from'../TableHead/index.mjs';import TableRow from'../TableRow/index.mjs';import TableCell from'../TableCell/index.mjs';import Checkbox from'../Checkbox/index.mjs';import IndeterminateCheckBoxIcon from'@xanui/icons/IndeterminateCheckBox';const TableHeadRender = ({ columns, rows, disableRow, disableSelect, state, update }) => {
|
|
2
|
+
if (!columns.length)
|
|
3
|
+
return jsx(Fragment, {});
|
|
4
|
+
let selected = state.selectedIds;
|
|
5
|
+
let checked = state.selectAll || !!selected.length;
|
|
6
|
+
return (jsx(TableHead, Object.assign({ position: "relative" }, { children: jsxs(TableRow, Object.assign({ bgcolor: "default", borderBottom: 1 }, { children: [!disableSelect && jsx(TableCell, Object.assign({ th: true, width: 40 }, { children: jsx(Checkbox, { checkIcon: selected.length && !state.selectAll ? jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
|
|
7
|
+
let ids = [];
|
|
8
|
+
let undefinedCount = 0;
|
|
9
|
+
for (let i = 0; i < rows.length; i++) {
|
|
10
|
+
const row = rows[i];
|
|
11
|
+
const isDisable = (disableRow ? disableRow(row, state) : false) || false;
|
|
12
|
+
if (!isDisable && row.id) {
|
|
13
|
+
ids.push(row.id);
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
undefinedCount += 1;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
if (undefinedCount) {
|
|
20
|
+
update({
|
|
21
|
+
selectedIds: selected.length ? [] : ids,
|
|
22
|
+
selectAll: !selected.length
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
update({
|
|
27
|
+
selectedIds: state.selectAll ? [] : ids,
|
|
28
|
+
selectAll: !state.selectAll
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
} }) })), columns.map((_a, idx) => {
|
|
32
|
+
var { label, field: _f } = _a, rest = __rest(_a, ["label", "field"]);
|
|
33
|
+
return jsx(TableCell, Object.assign({ th: true, textAlign: "left" }, rest, { children: label }), idx);
|
|
34
|
+
}), jsx(TableCell, { th: true, width: 30 })] })) })));
|
|
35
|
+
};export{TableHeadRender as default};//# sourceMappingURL=TableHead.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableHead.mjs","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\nimport TableHead from '../TableHead'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport { DatatablePropsWithState } from '.'\nimport Checkbox from '../Checkbox'\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\n\n\nconst TableHeadRender = ({ columns, rows, disableRow, disableSelect, state, update }: DatatablePropsWithState) => {\n if (!columns.length) return <></>\n let selected = state.selectedIds\n let checked = state.selectAll || !!selected.length\n\n return (\n <TableHead position=\"relative\">\n <TableRow bgcolor=\"default\" borderBottom={1} >\n {!disableSelect && <TableCell th width={40}>\n <Checkbox\n checkIcon={selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\n checked={checked}\n onChange={() => {\n let ids: any = []\n let undefinedCount = 0\n for (let i = 0; i < rows.length; i++) {\n const row = rows[i]\n const isDisable = (disableRow ? disableRow(row, state) : false) || false\n if (!isDisable && row.id) {\n ids.push(row.id)\n } else {\n undefinedCount += 1\n }\n }\n\n if (undefinedCount) {\n update({\n selectedIds: selected.length ? [] : ids,\n selectAll: !selected.length\n })\n } else {\n update({\n selectedIds: state.selectAll ? [] : ids,\n selectAll: !state.selectAll\n })\n }\n }}\n />\n </TableCell>}\n {\n columns.map(({ label, field: _f, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>{label}</TableCell>)\n }\n <TableCell th width={30}>\n\n </TableCell>\n </TableRow>\n </TableHead>\n )\n}\n\nexport default TableHeadRender\n"],"names":["_jsx","_jsxs","IntermidiatIcon"],"mappings":"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"}
|