@xanui/ui 1.1.9 → 1.1.10
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.js → index.cjs} +17 -3
- package/Accordion/index.cjs.map +1 -0
- package/Accordion/index.mjs +14 -2
- package/Accordion/index.mjs.map +1 -1
- package/Alert/{index.js → index.cjs} +23 -5
- package/Alert/index.cjs.map +1 -0
- package/Alert/index.mjs +18 -2
- package/Alert/index.mjs.map +1 -1
- package/Avatar/{index.js → index.cjs} +13 -2
- package/Avatar/index.cjs.map +1 -0
- package/Avatar/index.mjs +11 -2
- package/Avatar/index.mjs.map +1 -1
- package/Badge/{index.js → index.cjs} +12 -2
- package/Badge/index.cjs.map +1 -0
- package/Badge/index.mjs +10 -2
- package/Badge/index.mjs.map +1 -1
- package/Box/index.cjs +14 -0
- package/Box/index.cjs.map +1 -0
- package/Box/index.mjs +10 -2
- package/Box/index.mjs.map +1 -1
- package/Button/{index.js → index.cjs} +16 -4
- package/Button/index.cjs.map +1 -0
- package/Button/index.mjs +12 -2
- package/Button/index.mjs.map +1 -1
- package/ButtonGroup/{index.js → index.cjs} +12 -2
- package/ButtonGroup/index.cjs.map +1 -0
- package/ButtonGroup/index.mjs +10 -2
- package/ButtonGroup/index.mjs.map +1 -1
- package/Calendar/{index.js → index.cjs} +34 -16
- package/Calendar/index.cjs.map +1 -0
- package/Calendar/index.mjs +18 -2
- package/Calendar/index.mjs.map +1 -1
- package/CalendarInput/index.cjs +29 -0
- package/CalendarInput/index.cjs.map +1 -0
- package/CalendarInput/index.mjs +18 -2
- package/CalendarInput/index.mjs.map +1 -1
- package/Checkbox/{index.js → index.cjs} +15 -2
- package/Checkbox/index.cjs.map +1 -0
- package/Checkbox/index.mjs +13 -2
- package/Checkbox/index.mjs.map +1 -1
- package/Chip/{index.js → index.cjs} +14 -3
- package/Chip/index.cjs.map +1 -0
- package/Chip/index.mjs +11 -2
- package/Chip/index.mjs.map +1 -1
- package/CircleProgress/{index.js → index.cjs} +12 -2
- package/CircleProgress/index.cjs.map +1 -0
- package/CircleProgress/index.mjs +10 -2
- package/CircleProgress/index.mjs.map +1 -1
- package/ClickOutside/{index.js → index.cjs} +12 -2
- package/ClickOutside/index.cjs.map +1 -0
- package/ClickOutside/index.mjs +10 -2
- package/ClickOutside/index.mjs.map +1 -1
- package/Collaps/{index.js → index.cjs} +12 -2
- package/Collaps/index.cjs.map +1 -0
- package/Collaps/index.mjs +10 -2
- package/Collaps/index.mjs.map +1 -1
- package/Container/{index.js → index.cjs} +12 -2
- package/Container/index.cjs.map +1 -0
- package/Container/index.mjs +10 -2
- package/Container/index.mjs.map +1 -1
- package/Datatable/FilterBox.cjs +33 -0
- package/Datatable/FilterBox.cjs.map +1 -0
- package/Datatable/FilterBox.mjs +14 -2
- package/Datatable/FilterBox.mjs.map +1 -1
- package/Datatable/{Row.js → Row.cjs} +24 -7
- package/Datatable/Row.cjs.map +1 -0
- package/Datatable/Row.mjs +17 -2
- package/Datatable/Row.mjs.map +1 -1
- package/Datatable/SelectedBox.cjs +22 -0
- package/Datatable/SelectedBox.cjs.map +1 -0
- package/Datatable/SelectedBox.mjs +11 -2
- package/Datatable/SelectedBox.mjs.map +1 -1
- package/Datatable/Table.cjs +22 -0
- package/Datatable/Table.cjs.map +1 -0
- package/Datatable/Table.mjs +11 -2
- package/Datatable/Table.mjs.map +1 -1
- package/Datatable/{TableHead.js → TableHead.cjs} +18 -5
- package/Datatable/TableHead.cjs.map +1 -0
- package/Datatable/TableHead.mjs +13 -2
- package/Datatable/TableHead.mjs.map +1 -1
- package/Datatable/index.cjs +50 -0
- package/Datatable/index.cjs.map +1 -0
- package/Datatable/index.mjs +15 -2
- package/Datatable/index.mjs.map +1 -1
- package/Divider/{index.js → index.cjs} +12 -2
- package/Divider/index.cjs.map +1 -0
- package/Divider/index.mjs +10 -2
- package/Divider/index.mjs.map +1 -1
- package/Drawer/{index.js → index.cjs} +15 -4
- package/Drawer/index.cjs.map +1 -0
- package/Drawer/index.mjs +11 -2
- package/Drawer/index.mjs.map +1 -1
- package/Form/{index.js → index.cjs} +12 -2
- package/Form/index.cjs.map +1 -0
- package/Form/index.mjs +10 -2
- package/Form/index.mjs.map +1 -1
- package/GridContainer/{index.js → index.cjs} +12 -2
- package/GridContainer/index.cjs.map +1 -0
- package/GridContainer/index.mjs +10 -2
- package/GridContainer/index.mjs.map +1 -1
- package/GridItem/{index.js → index.cjs} +12 -2
- package/GridItem/index.cjs.map +1 -0
- package/GridItem/index.mjs +10 -2
- package/GridItem/index.mjs.map +1 -1
- package/IconButton/{index.js → index.cjs} +14 -3
- package/IconButton/index.cjs.map +1 -0
- package/IconButton/index.mjs +11 -2
- package/IconButton/index.mjs.map +1 -1
- package/Image/{index.js → index.cjs} +12 -2
- package/Image/index.cjs.map +1 -0
- package/Image/index.mjs +10 -2
- package/Image/index.mjs.map +1 -1
- package/Input/{index.js → index.cjs} +17 -6
- package/Input/index.cjs.map +1 -0
- package/Input/index.mjs +14 -5
- package/Input/index.mjs.map +1 -1
- package/Label/{index.js → index.cjs} +12 -2
- package/Label/index.cjs.map +1 -0
- package/Label/index.mjs +10 -2
- package/Label/index.mjs.map +1 -1
- package/Layer/{index.js → index.cjs} +16 -4
- package/Layer/index.cjs.map +1 -0
- package/Layer/index.mjs +12 -2
- package/Layer/index.mjs.map +1 -1
- package/LineProgress/{index.js → index.cjs} +12 -2
- package/LineProgress/index.cjs.map +1 -0
- package/LineProgress/index.mjs +10 -2
- package/LineProgress/index.mjs.map +1 -1
- package/List/{index.js → index.cjs} +12 -2
- package/List/index.cjs.map +1 -0
- package/List/index.mjs +10 -2
- package/List/index.mjs.map +1 -1
- package/ListItem/{index.js → index.cjs} +14 -3
- package/ListItem/index.cjs.map +1 -0
- package/ListItem/index.mjs +11 -2
- package/ListItem/index.mjs.map +1 -1
- package/LoadingBox/{index.js → index.cjs} +14 -3
- package/LoadingBox/index.cjs.map +1 -0
- package/LoadingBox/index.mjs +11 -2
- package/LoadingBox/index.mjs.map +1 -1
- package/Menu/{index.js → index.cjs} +15 -3
- package/Menu/index.cjs.map +1 -0
- package/Menu/index.mjs +12 -2
- package/Menu/index.mjs.map +1 -1
- package/Modal/{index.js → index.cjs} +14 -3
- package/Modal/index.cjs.map +1 -0
- package/Modal/index.mjs +11 -2
- package/Modal/index.mjs.map +1 -1
- package/NoSSR/index.cjs +14 -0
- package/NoSSR/index.cjs.map +1 -0
- package/NoSSR/index.mjs +7 -2
- package/NoSSR/index.mjs.map +1 -1
- package/Option/index.cjs +14 -0
- package/Option/index.cjs.map +1 -0
- package/Option/index.mjs +10 -2
- package/Option/index.mjs.map +1 -1
- package/Paper/{index.js → index.cjs} +12 -2
- package/Paper/index.cjs.map +1 -0
- package/Paper/index.mjs +10 -2
- package/Paper/index.mjs.map +1 -1
- package/Portal/{index.js → index.cjs} +12 -2
- package/Portal/index.cjs.map +1 -0
- package/Portal/index.mjs +10 -2
- package/Portal/index.mjs.map +1 -1
- package/Radio/index.cjs +16 -0
- package/Radio/index.cjs.map +1 -0
- package/Radio/index.mjs +12 -2
- package/Radio/index.mjs.map +1 -1
- package/Scrollbar/{index.js → index.cjs} +12 -2
- package/Scrollbar/index.cjs.map +1 -0
- package/Scrollbar/index.mjs +10 -2
- package/Scrollbar/index.mjs.map +1 -1
- package/Select/{index.js → index.cjs} +21 -5
- package/Select/index.cjs.map +1 -0
- package/Select/index.mjs +16 -2
- package/Select/index.mjs.map +1 -1
- package/Stack/index.cjs +17 -0
- package/Stack/index.cjs.map +1 -0
- package/Stack/index.mjs +10 -2
- package/Stack/index.mjs.map +1 -1
- package/Switch/{index.js → index.cjs} +12 -2
- package/Switch/index.cjs.map +1 -0
- package/Switch/index.mjs +10 -2
- package/Switch/index.mjs.map +1 -1
- package/Tab/index.cjs +16 -0
- package/Tab/index.cjs.map +1 -0
- package/Tab/index.mjs +11 -2
- package/Tab/index.mjs.map +1 -1
- package/Table/{index.js → index.cjs} +14 -3
- package/Table/index.cjs.map +1 -0
- package/Table/index.mjs +11 -2
- package/Table/index.mjs.map +1 -1
- package/TableBody/index.cjs +14 -0
- package/TableBody/index.cjs.map +1 -0
- package/TableBody/index.mjs +10 -2
- package/TableBody/index.mjs.map +1 -1
- package/TableCell/{index.js → index.cjs} +12 -2
- package/TableCell/index.cjs.map +1 -0
- package/TableCell/index.mjs +10 -2
- package/TableCell/index.mjs.map +1 -1
- package/TableFooter/index.cjs +14 -0
- package/TableFooter/index.cjs.map +1 -0
- package/TableFooter/index.mjs +10 -2
- package/TableFooter/index.mjs.map +1 -1
- package/TableHead/index.cjs +14 -0
- package/TableHead/index.cjs.map +1 -0
- package/TableHead/index.mjs +10 -2
- package/TableHead/index.mjs.map +1 -1
- package/TablePagination/{index.js → index.cjs} +22 -6
- package/TablePagination/index.cjs.map +1 -0
- package/TablePagination/index.mjs +16 -2
- package/TablePagination/index.mjs.map +1 -1
- package/TableRow/index.cjs +14 -0
- package/TableRow/index.cjs.map +1 -0
- package/TableRow/index.mjs +10 -2
- package/TableRow/index.mjs.map +1 -1
- package/Tabs/{index.js → index.cjs} +13 -3
- package/Tabs/index.cjs.map +1 -0
- package/Tabs/index.mjs +11 -3
- package/Tabs/index.mjs.map +1 -1
- package/Text/{index.js → index.cjs} +12 -2
- package/Text/index.cjs.map +1 -0
- package/Text/index.mjs +10 -2
- package/Text/index.mjs.map +1 -1
- package/Toast/{index.js → index.cjs} +17 -4
- package/Toast/index.cjs.map +1 -0
- package/Toast/index.mjs +13 -2
- package/Toast/index.mjs.map +1 -1
- package/Tooltip/{index.js → index.cjs} +14 -4
- package/Tooltip/index.cjs.map +1 -0
- package/Tooltip/index.mjs +11 -3
- package/Tooltip/index.mjs.map +1 -1
- package/ViewBox/{index.js → index.cjs} +14 -3
- package/ViewBox/index.cjs.map +1 -0
- package/ViewBox/index.mjs +11 -2
- package/ViewBox/index.mjs.map +1 -1
- package/index.cjs +116 -0
- package/index.cjs.map +1 -0
- package/index.mjs +56 -1
- package/index.mjs.map +1 -1
- package/package.json +4 -14
- package/readme.md +104 -104
- package/useAlert/{index.js → index.cjs} +18 -5
- package/useAlert/index.cjs.map +1 -0
- package/useAlert/index.d.ts +2 -2
- package/useAlert/index.mjs +13 -2
- package/useAlert/index.mjs.map +1 -1
- package/useBlurCss/{index.js → index.cjs} +10 -2
- package/useBlurCss/index.cjs.map +1 -0
- package/useBlurCss/index.mjs +8 -2
- package/useBlurCss/index.mjs.map +1 -1
- package/useCorner/{index.js → index.cjs} +7 -2
- package/useCorner/index.cjs.map +1 -0
- package/useCorner/index.mjs +4 -1
- package/useCorner/index.mjs.map +1 -1
- package/useLayer/{index.js → index.cjs} +13 -3
- package/useLayer/index.cjs.map +1 -0
- package/useLayer/index.mjs +10 -2
- package/useLayer/index.mjs.map +1 -1
- package/useModal/{index.js → index.cjs} +13 -3
- package/useModal/index.cjs.map +1 -0
- package/useModal/index.mjs +10 -2
- package/useModal/index.mjs.map +1 -1
- package/Accordion/index.js.map +0 -1
- package/Alert/index.js.map +0 -1
- package/Avatar/index.js.map +0 -1
- package/Badge/index.js.map +0 -1
- package/Box/index.js +0 -4
- package/Box/index.js.map +0 -1
- package/Button/index.js.map +0 -1
- package/ButtonGroup/index.js.map +0 -1
- package/Calendar/index.js.map +0 -1
- package/CalendarInput/index.js +0 -11
- package/CalendarInput/index.js.map +0 -1
- package/Checkbox/index.js.map +0 -1
- package/Chip/index.js.map +0 -1
- package/CircleProgress/index.js.map +0 -1
- package/ClickOutside/index.js.map +0 -1
- package/Collaps/index.js.map +0 -1
- package/Container/index.js.map +0 -1
- package/Datatable/FilterBox.js +0 -19
- package/Datatable/FilterBox.js.map +0 -1
- package/Datatable/Row.js.map +0 -1
- package/Datatable/SelectedBox.js +0 -11
- package/Datatable/SelectedBox.js.map +0 -1
- package/Datatable/Table.js +0 -11
- package/Datatable/Table.js.map +0 -1
- package/Datatable/TableHead.js.map +0 -1
- package/Datatable/index.js +0 -35
- package/Datatable/index.js.map +0 -1
- package/Divider/index.js.map +0 -1
- package/Drawer/index.js.map +0 -1
- package/Form/index.js.map +0 -1
- package/GridContainer/index.js.map +0 -1
- package/GridItem/index.js.map +0 -1
- package/IconButton/index.js.map +0 -1
- package/Image/index.js.map +0 -1
- package/Input/index.js.map +0 -1
- package/Label/index.js.map +0 -1
- package/Layer/index.js.map +0 -1
- package/LineProgress/index.js.map +0 -1
- package/List/index.js.map +0 -1
- package/ListItem/index.js.map +0 -1
- package/LoadingBox/index.js.map +0 -1
- package/Menu/index.js.map +0 -1
- package/Modal/index.js.map +0 -1
- package/NoSSR/index.js +0 -7
- package/NoSSR/index.js.map +0 -1
- package/Option/index.js +0 -4
- package/Option/index.js.map +0 -1
- package/Paper/index.js.map +0 -1
- package/Portal/index.js.map +0 -1
- package/Radio/index.js +0 -4
- package/Radio/index.js.map +0 -1
- package/Scrollbar/index.js.map +0 -1
- package/Select/index.js.map +0 -1
- package/Stack/index.js +0 -7
- package/Stack/index.js.map +0 -1
- package/Switch/index.js.map +0 -1
- package/Tab/index.js +0 -5
- package/Tab/index.js.map +0 -1
- package/Table/index.js.map +0 -1
- package/TableBody/index.js +0 -4
- package/TableBody/index.js.map +0 -1
- package/TableCell/index.js.map +0 -1
- package/TableFooter/index.js +0 -4
- package/TableFooter/index.js.map +0 -1
- package/TableHead/index.js +0 -4
- package/TableHead/index.js.map +0 -1
- package/TablePagination/index.js.map +0 -1
- package/TableRow/index.js +0 -4
- package/TableRow/index.js.map +0 -1
- package/Tabs/index.js.map +0 -1
- package/Text/index.js.map +0 -1
- package/Toast/index.js.map +0 -1
- package/Tooltip/index.js.map +0 -1
- package/ViewBox/index.js.map +0 -1
- package/index.js +0 -1
- package/index.js.map +0 -1
- package/useAlert/index.js.map +0 -1
- package/useBlurCss/index.js.map +0 -1
- package/useCorner/index.js.map +0 -1
- package/useLayer/index.js.map +0 -1
- package/useModal/index.js.map +0 -1
package/Datatable/index.mjs
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
|
-
import {jsxs,jsx}from'react/jsx-runtime';
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import React, { useState } from 'react';
|
|
3
|
+
import ViewBox from '../ViewBox/index.mjs';
|
|
4
|
+
import { useInterface, Tag } from '@xanui/core';
|
|
5
|
+
import SelectedBox from './SelectedBox.mjs';
|
|
6
|
+
import TableArea from './Table.mjs';
|
|
7
|
+
import FilterBox from './FilterBox.mjs';
|
|
8
|
+
import TablePagination from '../TablePagination/index.mjs';
|
|
9
|
+
import Stack from '../Stack/index.mjs';
|
|
10
|
+
|
|
11
|
+
const DataTable = React.forwardRef((props, ref) => {
|
|
2
12
|
let [_props] = useInterface("Datatable", props, {});
|
|
3
13
|
let { rows, tabs, defaultActiveTab, totalCount, page, perpages, getState, fixedHeader, disablePagination, slotProps, } = _props;
|
|
4
14
|
const [state, setState] = useState({
|
|
@@ -32,4 +42,7 @@ import {jsxs,jsx}from'react/jsx-runtime';import React,{useState}from'react';impo
|
|
|
32
42
|
}, children: [jsx(SelectedBox, Object.assign({}, _props, { update: update, state: state })), jsx(FilterBox, Object.assign({}, _props, { update: update, state: state }))] })), children: [jsx(TableArea, Object.assign({}, _props, { update: update, state: state })), jsx(Stack, { p: 1, alignItems: "flex-end", children: !disablePagination && jsx(TablePagination, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: totalCount || rows.length, page: state.paginationState.page, perpages: perpages, onChange: (state) => {
|
|
33
43
|
update({ paginationState: state });
|
|
34
44
|
} })) })] }));
|
|
35
|
-
});
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
export { DataTable as default };
|
|
48
|
+
//# sourceMappingURL=index.mjs.map
|
package/Datatable/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useState } from 'react'\nimport { TableColumnProps } from '../TableCell'\nimport { IconButtonProps } from '../IconButton'\nimport { InputProps } from '../Input'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationProps } from '../TablePagination'\nimport Stack from '../Stack'\nimport { TableProps } from '../Table'\n\n\nexport type ColumnType = (Omit<TableColumnProps, \"children\"> & { label: string, field?: string })\nexport type DataTableDefaultRow = { id?: number, [key: string | number]: any }\nexport type RowActionType = Omit<IconButtonProps, \"children\"> & {\n label: string;\n icon: ReactElement;\n}\nexport type TabsProps = {\n label: string;\n value?: string\n}\nexport type DatatableFilter = {\n label: string;\n value: string | number\n}\n\nexport type DatatableProps = {\n rows: DataTableDefaultRow[];\n columns: ColumnType[];\n tabs?: TabsProps[];\n defaultActiveTab?: string;\n rowAction?: (props: { row: DataTableDefaultRow | null, state: State }) => RowActionType[];\n renderRow?: (row: DataTableDefaultRow, state: State) => DataTableDefaultRow;\n disableRow?: (row: DataTableDefaultRow, state: State) => boolean | void;\n totalCount?: number;\n page?: number;\n perpages?: number[];\n getState?: (state: State) => void;\n onSearch?: (text: string, state: State) => void;\n onTabChange?: (tab: string, state: State) => void;\n filters?: { [key: string]: DatatableFilter[] }\n fixedHeader?: boolean;\n disablePagination?: boolean;\n disableSearch?: boolean;\n disableSelect?: boolean;\n slotProps?: {\n search?: Omit<InputProps, \"value\" | \"onChange\">;\n table?: Omit<TableProps, 'children'>;\n pagination?: TablePaginationProps;\n }\n}\n\nexport type State = {\n selectedIds: number[];\n selectAll: boolean;\n paginationState: {\n page: number,\n perpage: number\n },\n activeTab: string;\n search: string;\n}\n\nexport type DatatablePropsWithState = DatatableProps & {\n state: State,\n update: (state: Partial<State>) => void;\n}\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [_props] = useInterface<any>(\"Datatable\", props, {})\n let {\n rows,\n tabs,\n defaultActiveTab,\n totalCount,\n page,\n perpages,\n getState,\n\n fixedHeader,\n disablePagination,\n slotProps,\n } = _props\n\n const [state, setState] = useState<State>({\n selectedIds: [],\n selectAll: false,\n paginationState: {\n page: page || 1,\n perpage: perpages ? perpages[0] : 30\n },\n activeTab: tabs ? (defaultActiveTab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n search: \"\"\n })\n\n const update = (s: Partial<State>) => {\n setState(o => {\n let ns = { ...o, ...s }\n getState && getState(ns)\n return ns\n })\n }\n\n return (\n <ViewBox\n baseClass='datatable'\n ref={ref as any}\n height=\"100%\"\n sx={{\n '& thead': fixedHeader ? {\n position: \"sticky\",\n top: 0,\n bgcolor: \"background.primary\",\n zIndex: 1\n } : {},\n }}\n startContent={(\n <Tag\n baseClass='datatable-header'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\"\n }}\n >\n <SelectedBox {..._props} update={update} state={state} />\n <FilterBox {..._props} update={update} state={state} />\n </Tag>\n )}\n >\n <TableArea\n {..._props}\n update={update}\n state={state}\n />\n <Stack\n p={1}\n alignItems=\"flex-end\"\n >\n {!disablePagination && <TablePagination\n {...slotProps?.pagination}\n total={totalCount || rows.length}\n page={state.paginationState.page}\n perpages={perpages}\n onChange={(state: any) => {\n update({ paginationState: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\r\nimport React, { ReactElement, useState } from 'react'\r\nimport { TableColumnProps } from '../TableCell'\r\nimport { IconButtonProps } from '../IconButton'\r\nimport { InputProps } from '../Input'\r\nimport ViewBox from '../ViewBox'\r\nimport { Tag, useInterface } from '@xanui/core';\r\nimport SelectedBox from './SelectedBox'\r\nimport TableArea from './Table'\r\nimport FilterBox from './FilterBox'\r\nimport TablePagination, { TablePaginationProps } from '../TablePagination'\r\nimport Stack from '../Stack'\r\nimport { TableProps } from '../Table'\r\n\r\n\r\nexport type ColumnType = (Omit<TableColumnProps, \"children\"> & { label: string, field?: string })\r\nexport type DataTableDefaultRow = { id?: number, [key: string | number]: any }\r\nexport type RowActionType = Omit<IconButtonProps, \"children\"> & {\r\n label: string;\r\n icon: ReactElement;\r\n}\r\nexport type TabsProps = {\r\n label: string;\r\n value?: string\r\n}\r\nexport type DatatableFilter = {\r\n label: string;\r\n value: string | number\r\n}\r\n\r\nexport type DatatableProps = {\r\n rows: DataTableDefaultRow[];\r\n columns: ColumnType[];\r\n tabs?: TabsProps[];\r\n defaultActiveTab?: string;\r\n rowAction?: (props: { row: DataTableDefaultRow | null, state: State }) => RowActionType[];\r\n renderRow?: (row: DataTableDefaultRow, state: State) => DataTableDefaultRow;\r\n disableRow?: (row: DataTableDefaultRow, state: State) => boolean | void;\r\n totalCount?: number;\r\n page?: number;\r\n perpages?: number[];\r\n getState?: (state: State) => void;\r\n onSearch?: (text: string, state: State) => void;\r\n onTabChange?: (tab: string, state: State) => void;\r\n filters?: { [key: string]: DatatableFilter[] }\r\n fixedHeader?: boolean;\r\n disablePagination?: boolean;\r\n disableSearch?: boolean;\r\n disableSelect?: boolean;\r\n slotProps?: {\r\n search?: Omit<InputProps, \"value\" | \"onChange\">;\r\n table?: Omit<TableProps, 'children'>;\r\n pagination?: TablePaginationProps;\r\n }\r\n}\r\n\r\nexport type State = {\r\n selectedIds: number[];\r\n selectAll: boolean;\r\n paginationState: {\r\n page: number,\r\n perpage: number\r\n },\r\n activeTab: string;\r\n search: string;\r\n}\r\n\r\nexport type DatatablePropsWithState = DatatableProps & {\r\n state: State,\r\n update: (state: Partial<State>) => void;\r\n}\r\n\r\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\r\n let [_props] = useInterface<any>(\"Datatable\", props, {})\r\n let {\r\n rows,\r\n tabs,\r\n defaultActiveTab,\r\n totalCount,\r\n page,\r\n perpages,\r\n getState,\r\n\r\n fixedHeader,\r\n disablePagination,\r\n slotProps,\r\n } = _props\r\n\r\n const [state, setState] = useState<State>({\r\n selectedIds: [],\r\n selectAll: false,\r\n paginationState: {\r\n page: page || 1,\r\n perpage: perpages ? perpages[0] : 30\r\n },\r\n activeTab: tabs ? (defaultActiveTab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\r\n search: \"\"\r\n })\r\n\r\n const update = (s: Partial<State>) => {\r\n setState(o => {\r\n let ns = { ...o, ...s }\r\n getState && getState(ns)\r\n return ns\r\n })\r\n }\r\n\r\n return (\r\n <ViewBox\r\n baseClass='datatable'\r\n ref={ref as any}\r\n height=\"100%\"\r\n sx={{\r\n '& thead': fixedHeader ? {\r\n position: \"sticky\",\r\n top: 0,\r\n bgcolor: \"background.primary\",\r\n zIndex: 1\r\n } : {},\r\n }}\r\n startContent={(\r\n <Tag\r\n baseClass='datatable-header'\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n justifyContent: \"space-between\"\r\n }}\r\n >\r\n <SelectedBox {..._props} update={update} state={state} />\r\n <FilterBox {..._props} update={update} state={state} />\r\n </Tag>\r\n )}\r\n >\r\n <TableArea\r\n {..._props}\r\n update={update}\r\n state={state}\r\n />\r\n <Stack\r\n p={1}\r\n alignItems=\"flex-end\"\r\n >\r\n {!disablePagination && <TablePagination\r\n {...slotProps?.pagination}\r\n total={totalCount || rows.length}\r\n page={state.paginationState.page}\r\n perpages={perpages}\r\n onChange={(state: any) => {\r\n update({ paginationState: state })\r\n }}\r\n />}\r\n </Stack>\r\n </ViewBox>\r\n )\r\n})\r\n\r\nexport default DataTable"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
|
|
8
|
+
const Divider = React.forwardRef((_a, ref) => {
|
|
2
9
|
var _b, _c, _d;
|
|
3
10
|
var { children, direction, color, size } = _a, rest = tslib.__rest(_a, ["children", "direction", "color", "size"]);
|
|
4
11
|
const _p = {};
|
|
@@ -18,4 +25,7 @@
|
|
|
18
25
|
height: isHori ? size : "100%",
|
|
19
26
|
bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,
|
|
20
27
|
}, ref: ref, children: children })));
|
|
21
|
-
});
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
module.exports = Divider;
|
|
31
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n size?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\r\n const _p: any = {}\r\n if (direction) _p.direction = direction\r\n if (color) _p.color = color\r\n if (size) _p.size = size\r\n const p: any = useBreakpointProps(_p)\r\n direction = p.direction ?? \"horizental\"\r\n color = p.color ?? \"default\"\r\n size = p.size ?? 1\r\n\r\n let isHori = direction === 'horizental'\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='divider'\r\n sxr={{\r\n width: isHori ? \"100%\" : size,\r\n height: isHori ? size : \"100%\",\r\n bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\r\n }}\r\n ref={ref}\r\n >{children}</Tag>\r\n )\r\n})\r\n\r\nexport default Divider\r\n\r\n"],"names":["__rest","useBreakpointProps","_jsx","Tag"],"mappings":";;;;;;;AAWA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;;AAAvF,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAA4B,EAAvB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,CAA6C,CAAF;IAC7G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,YAAY;AACvC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AAC5B,IAAA,IAAI,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AAElB,IAAA,IAAI,MAAM,GAAG,SAAS,KAAK,YAAY;IAEvC,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE;YACD,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;YAC7B,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;AAC9B,YAAA,OAAO,EAAE,KAAK,KAAK,SAAS,GAAG,CAAA,oBAAA,CAAsB,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AAC/E,SAAA,EACD,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
|
package/Divider/index.mjs
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { useBreakpointProps, Tag } from '@xanui/core';
|
|
5
|
+
|
|
6
|
+
const Divider = React.forwardRef((_a, ref) => {
|
|
2
7
|
var _b, _c, _d;
|
|
3
8
|
var { children, direction, color, size } = _a, rest = __rest(_a, ["children", "direction", "color", "size"]);
|
|
4
9
|
const _p = {};
|
|
@@ -18,4 +23,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
18
23
|
height: isHori ? size : "100%",
|
|
19
24
|
bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,
|
|
20
25
|
}, ref: ref, children: children })));
|
|
21
|
-
});
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
export { Divider as default };
|
|
29
|
+
//# sourceMappingURL=index.mjs.map
|
package/Divider/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n const _p: any = {}\n if (direction) _p.direction = direction\n if (color) _p.color = color\n if (size) _p.size = size\n const p: any = useBreakpointProps(_p)\n direction = p.direction ?? \"horizental\"\n color = p.color ?? \"default\"\n size = p.size ?? 1\n\n let isHori = direction === 'horizental'\n\n return (\n <Tag\n {...rest}\n baseClass='divider'\n sxr={{\n width: isHori ? \"100%\" : size,\n height: isHori ? size : \"100%\",\n bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\n }}\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Divider\n\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n size?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\r\n const _p: any = {}\r\n if (direction) _p.direction = direction\r\n if (color) _p.color = color\r\n if (size) _p.size = size\r\n const p: any = useBreakpointProps(_p)\r\n direction = p.direction ?? \"horizental\"\r\n color = p.color ?? \"default\"\r\n size = p.size ?? 1\r\n\r\n let isHori = direction === 'horizental'\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='divider'\r\n sxr={{\r\n width: isHori ? \"100%\" : size,\r\n height: isHori ? size : \"100%\",\r\n bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\r\n }}\r\n ref={ref}\r\n >{children}</Tag>\r\n )\r\n})\r\n\r\nexport default Divider\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;AAWA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;;AAAvF,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAA4B,EAAvB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,CAA6C,CAAF;IAC7G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,YAAY;AACvC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AAC5B,IAAA,IAAI,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AAElB,IAAA,IAAI,MAAM,GAAG,SAAS,KAAK,YAAY;IAEvC,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE;YACD,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;YAC7B,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;AAC9B,YAAA,OAAO,EAAE,KAAK,KAAK,SAAS,GAAG,CAAA,oBAAA,CAAsB,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AAC/E,SAAA,EACD,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
|
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var core = require('@xanui/core');
|
|
6
|
+
var index = require('../Layer/index.cjs');
|
|
7
|
+
var index$1 = require('../ClickOutside/index.cjs');
|
|
8
|
+
|
|
9
|
+
const getVariant = (placement) => {
|
|
2
10
|
switch (placement) {
|
|
3
11
|
case "right":
|
|
4
12
|
return "fadeLeft";
|
|
@@ -28,13 +36,13 @@ const Drawer = (_a) => {
|
|
|
28
36
|
large: 400
|
|
29
37
|
};
|
|
30
38
|
let _size = sizes[size] || size;
|
|
31
|
-
return (jsxRuntime.jsx(index
|
|
39
|
+
return (jsxRuntime.jsx(index, Object.assign({}, layerProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer, { transition: getVariant(placement), children: jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
|
|
32
40
|
width: "100vw",
|
|
33
41
|
height: "100vh",
|
|
34
42
|
display: "flex",
|
|
35
43
|
direction: isSide ? "row" : "column",
|
|
36
44
|
justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"
|
|
37
|
-
}, children: jsxRuntime.jsx(index$1
|
|
45
|
+
}, children: jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsxRuntime.jsx(core.Tag, { sxr: {
|
|
38
46
|
width: isSide ? _size : "100%",
|
|
39
47
|
height: isSide ? "100%" : _size,
|
|
40
48
|
bgcolor: "background.primary",
|
|
@@ -63,4 +71,7 @@ Drawer.open = (children, props) => {
|
|
|
63
71
|
};
|
|
64
72
|
Drawer.close = () => {
|
|
65
73
|
core.Renderar.unrender(Drawer);
|
|
66
|
-
};
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
module.exports = Drawer;
|
|
77
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\r\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport Layer, { LayerProps } from '../Layer';\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\n\r\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\r\n placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\r\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n onClickOutside?: () => void;\r\n slotProps?: {\r\n layer?: Partial<Omit<LayerProps, \"children\">>\r\n root?: TagProps<\"div\">;\r\n content?: TagProps<\"div\">;\r\n clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n }\r\n}\r\n\r\nconst getVariant = (placement?: any) => {\r\n switch (placement) {\r\n case \"right\":\r\n return \"fadeLeft\"\r\n case \"top\":\r\n return \"fadeDown\"\r\n case \"bottom\":\r\n return \"fadeUp\"\r\n default:\r\n return \"fadeRight\"\r\n }\r\n}\r\n\r\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\r\n const _p: any = {}\r\n if (placement) _p.placement = placement\r\n if (size) _p.size = size\r\n const p: any = useBreakpointProps(_p)\r\n\r\n placement = p.placement ?? 'left'\r\n size = p.size || \"medium\"\r\n\r\n let isSide = placement === 'left' || placement === 'right'\r\n let sizes: any = {\r\n small: 200,\r\n medium: 300,\r\n large: 400\r\n }\r\n\r\n let _size = sizes[size as any] || size\r\n\r\n return (\r\n <Layer\r\n {...layerProps}\r\n {...slotProps?.layer}\r\n transition={getVariant(placement)}\r\n >\r\n <Tag\r\n {...slotProps?.root}\r\n baseClass='drawer'\r\n sxr={{\r\n width: \"100vw\",\r\n height: \"100vh\",\r\n display: \"flex\",\r\n direction: isSide ? \"row\" : \"column\" as any,\r\n justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\r\n }}\r\n >\r\n <ClickOutside\r\n {...slotProps?.clickOutside}\r\n onClickOutside={onClickOutside || (() => { })}\r\n >\r\n <Tag\r\n sxr={{\r\n width: isSide ? _size : \"100%\",\r\n height: isSide ? \"100%\" : _size,\r\n bgcolor: \"background.primary\",\r\n shadow: 20\r\n }}\r\n baseClass='drawer-content'\r\n >\r\n {children}\r\n </Tag>\r\n </ClickOutside>\r\n </Tag>\r\n </Layer>\r\n )\r\n}\r\n\r\n\r\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\r\n const d = Renderar.render(Drawer as any, {\r\n open: true,\r\n ...props,\r\n children,\r\n onClosed: () => {\r\n d.unrender()\r\n },\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n d.updateProps({ open: false })\r\n }\r\n }\r\n })\r\n\r\n return {\r\n open: () => {\r\n d.updateProps({ open: true })\r\n },\r\n close: () => {\r\n d.updateProps({ open: false })\r\n },\r\n }\r\n}\r\n\r\nDrawer.close = () => {\r\n Renderar.unrender(Drawer as any)\r\n}\r\n\r\nexport default Drawer"],"names":["__rest","useBreakpointProps","_jsx","Layer","Tag","ClickOutside","Renderar"],"mappings":"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"}
|
package/Drawer/index.mjs
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useBreakpointProps, Tag, Renderar } from '@xanui/core';
|
|
4
|
+
import Layer from '../Layer/index.mjs';
|
|
5
|
+
import ClickOutside from '../ClickOutside/index.mjs';
|
|
6
|
+
|
|
7
|
+
const getVariant = (placement) => {
|
|
2
8
|
switch (placement) {
|
|
3
9
|
case "right":
|
|
4
10
|
return "fadeLeft";
|
|
@@ -63,4 +69,7 @@ Drawer.open = (children, props) => {
|
|
|
63
69
|
};
|
|
64
70
|
Drawer.close = () => {
|
|
65
71
|
Renderar.unrender(Drawer);
|
|
66
|
-
};
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export { Drawer as default };
|
|
75
|
+
//# sourceMappingURL=index.mjs.map
|
package/Drawer/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n onClickOutside?: () => void;\n slotProps?: {\n layer?: Partial<Omit<LayerProps, \"children\">>\n root?: TagProps<\"div\">;\n content?: TagProps<\"div\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n }\n}\n\nconst getVariant = (placement?: any) => {\n switch (placement) {\n case \"right\":\n return \"fadeLeft\"\n case \"top\":\n return \"fadeDown\"\n case \"bottom\":\n return \"fadeUp\"\n default:\n return \"fadeRight\"\n }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n const _p: any = {}\n if (placement) _p.placement = placement\n if (size) _p.size = size\n const p: any = useBreakpointProps(_p)\n\n placement = p.placement ?? 'left'\n size = p.size || \"medium\"\n\n let isSide = placement === 'left' || placement === 'right'\n let sizes: any = {\n small: 200,\n medium: 300,\n large: 400\n }\n\n let _size = sizes[size as any] || size\n\n return (\n <Layer\n {...layerProps}\n {...slotProps?.layer}\n transition={getVariant(placement)}\n >\n <Tag\n {...slotProps?.root}\n baseClass='drawer'\n sxr={{\n width: \"100vw\",\n height: \"100vh\",\n display: \"flex\",\n direction: isSide ? \"row\" : \"column\" as any,\n justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n }}\n >\n <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n <Tag\n sxr={{\n width: isSide ? _size : \"100%\",\n height: isSide ? \"100%\" : _size,\n bgcolor: \"background.primary\",\n shadow: 20\n }}\n baseClass='drawer-content'\n >\n {children}\n </Tag>\n </ClickOutside>\n </Tag>\n </Layer>\n )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n const d = Renderar.render(Drawer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n d.unrender()\n },\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n d.updateProps({ open: false })\n }\n }\n })\n\n return {\n open: () => {\n d.updateProps({ open: true })\n },\n close: () => {\n d.updateProps({ open: false })\n },\n }\n}\n\nDrawer.close = () => {\n Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\r\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport Layer, { LayerProps } from '../Layer';\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\n\r\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\r\n placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\r\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n onClickOutside?: () => void;\r\n slotProps?: {\r\n layer?: Partial<Omit<LayerProps, \"children\">>\r\n root?: TagProps<\"div\">;\r\n content?: TagProps<\"div\">;\r\n clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n }\r\n}\r\n\r\nconst getVariant = (placement?: any) => {\r\n switch (placement) {\r\n case \"right\":\r\n return \"fadeLeft\"\r\n case \"top\":\r\n return \"fadeDown\"\r\n case \"bottom\":\r\n return \"fadeUp\"\r\n default:\r\n return \"fadeRight\"\r\n }\r\n}\r\n\r\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\r\n const _p: any = {}\r\n if (placement) _p.placement = placement\r\n if (size) _p.size = size\r\n const p: any = useBreakpointProps(_p)\r\n\r\n placement = p.placement ?? 'left'\r\n size = p.size || \"medium\"\r\n\r\n let isSide = placement === 'left' || placement === 'right'\r\n let sizes: any = {\r\n small: 200,\r\n medium: 300,\r\n large: 400\r\n }\r\n\r\n let _size = sizes[size as any] || size\r\n\r\n return (\r\n <Layer\r\n {...layerProps}\r\n {...slotProps?.layer}\r\n transition={getVariant(placement)}\r\n >\r\n <Tag\r\n {...slotProps?.root}\r\n baseClass='drawer'\r\n sxr={{\r\n width: \"100vw\",\r\n height: \"100vh\",\r\n display: \"flex\",\r\n direction: isSide ? \"row\" : \"column\" as any,\r\n justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\r\n }}\r\n >\r\n <ClickOutside\r\n {...slotProps?.clickOutside}\r\n onClickOutside={onClickOutside || (() => { })}\r\n >\r\n <Tag\r\n sxr={{\r\n width: isSide ? _size : \"100%\",\r\n height: isSide ? \"100%\" : _size,\r\n bgcolor: \"background.primary\",\r\n shadow: 20\r\n }}\r\n baseClass='drawer-content'\r\n >\r\n {children}\r\n </Tag>\r\n </ClickOutside>\r\n </Tag>\r\n </Layer>\r\n )\r\n}\r\n\r\n\r\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\r\n const d = Renderar.render(Drawer as any, {\r\n open: true,\r\n ...props,\r\n children,\r\n onClosed: () => {\r\n d.unrender()\r\n },\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n d.updateProps({ open: false })\r\n }\r\n }\r\n })\r\n\r\n return {\r\n open: () => {\r\n d.updateProps({ open: true })\r\n },\r\n close: () => {\r\n d.updateProps({ open: false })\r\n },\r\n }\r\n}\r\n\r\nDrawer.close = () => {\r\n Renderar.unrender(Drawer as any)\r\n}\r\n\r\nexport default Drawer"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
|
|
8
|
+
const Form = React.forwardRef((_a, ref) => {
|
|
2
9
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
3
10
|
let formRef = ref || React.useRef(null);
|
|
4
11
|
const cloneAllChildren = (childs) => {
|
|
@@ -31,4 +38,7 @@
|
|
|
31
38
|
maxWidth: 400,
|
|
32
39
|
radius: 1,
|
|
33
40
|
}, baseClass: 'form', ref: formRef, children: cloneAllChildren(children) })));
|
|
34
|
-
});
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
module.exports = Form;
|
|
44
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Form/index.tsx"],"sourcesContent":["\r\nimport React, { useRef } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\r\n\r\n}\r\n\r\n\r\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\r\n let formRef: any = ref || useRef(null)\r\n\r\n const cloneAllChildren: any = (childs: any) => {\r\n return React.Children.map(childs, (child: any) => {\r\n let c: any = child;\r\n if (React.isValidElement(child) && c.props.name) {\r\n const form = formRef.current\r\n const formData = new FormData(form);\r\n return React.cloneElement(child, {\r\n onChange: () => {\r\n console.log(formData.get(c.props.name));\r\n },\r\n value: formData.get(c.props.name),\r\n children: cloneAllChildren(c.props.children),\r\n } as any);\r\n }\r\n return child;\r\n });\r\n };\r\n\r\n return (\r\n <Tag\r\n component=\"form\"\r\n {...rest}\r\n onSubmit={(e) => {\r\n e.preventDefault()\r\n const form = formRef.current\r\n\r\n const formData = new FormData(form);\r\n\r\n formData.forEach((value, key) => {\r\n console.log(key + \": \" + value);\r\n });\r\n }}\r\n sxr={{\r\n bgcolor: \"default\",\r\n p: 2,\r\n maxWidth: 400,\r\n radius: 1,\r\n }}\r\n baseClass='form'\r\n ref={formRef}\r\n >\r\n {cloneAllChildren(children)}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Form\r\n\r\n"],"names":["__rest","useRef","_jsx","Tag"],"mappings":";;;;;;;AASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAsC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACnF,IAAI,OAAO,GAAQ,GAAG,IAAIC,YAAM,CAAC,IAAI,CAAC;AAEtC,IAAA,MAAM,gBAAgB,GAAQ,CAAC,MAAW,KAAI;QAC1C,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,KAAU,KAAI;YAC7C,IAAI,CAAC,GAAQ,KAAK;AAClB,YAAA,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO;AAC5B,gBAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC;AACnC,gBAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC7B,QAAQ,EAAE,MAAK;AACX,wBAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBAC3C,CAAC;oBACD,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;oBACjC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AACxC,iBAAA,CAAC;YACb;AACA,YAAA,OAAO,KAAK;AAChB,QAAA,CAAC,CAAC;AACN,IAAA,CAAC;AAED,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,MAAM,EAAA,EACZ,IAAI,IACR,QAAQ,EAAE,CAAC,CAAC,KAAI;YACZ,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO;AAE5B,YAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC;YAEnC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,KAAI;gBAC5B,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;AACnC,YAAA,CAAC,CAAC;QACN,CAAC,EACD,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,CAAC,EAAE,CAAC;AACJ,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,MAAM,EAAE,CAAC;AACZ,SAAA,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,OAAO,EAAA,QAAA,EAEX,gBAAgB,CAAC,QAAQ,CAAC,EAAA,CAAA,CACzB;AAEd,CAAC;;;;"}
|
package/Form/index.mjs
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React, { useRef } from 'react';
|
|
4
|
+
import { Tag } from '@xanui/core';
|
|
5
|
+
|
|
6
|
+
const Form = React.forwardRef((_a, ref) => {
|
|
2
7
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
3
8
|
let formRef = ref || useRef(null);
|
|
4
9
|
const cloneAllChildren = (childs) => {
|
|
@@ -31,4 +36,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{use
|
|
|
31
36
|
maxWidth: 400,
|
|
32
37
|
radius: 1,
|
|
33
38
|
}, baseClass: 'form', ref: formRef, children: cloneAllChildren(children) })));
|
|
34
|
-
});
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
export { Form as default };
|
|
42
|
+
//# sourceMappingURL=index.mjs.map
|
package/Form/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Form/index.tsx"],"sourcesContent":["\nimport React, { useRef } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\n\n}\n\n\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\n let formRef: any = ref || useRef(null)\n\n const cloneAllChildren: any = (childs: any) => {\n return React.Children.map(childs, (child: any) => {\n let c: any = child;\n if (React.isValidElement(child) && c.props.name) {\n const form = formRef.current\n const formData = new FormData(form);\n return React.cloneElement(child, {\n onChange: () => {\n console.log(formData.get(c.props.name));\n },\n value: formData.get(c.props.name),\n children: cloneAllChildren(c.props.children),\n } as any);\n }\n return child;\n });\n };\n\n return (\n <Tag\n component=\"form\"\n {...rest}\n onSubmit={(e) => {\n e.preventDefault()\n const form = formRef.current\n\n const formData = new FormData(form);\n\n formData.forEach((value, key) => {\n console.log(key + \": \" + value);\n });\n }}\n sxr={{\n bgcolor: \"default\",\n p: 2,\n maxWidth: 400,\n radius: 1,\n }}\n baseClass='form'\n ref={formRef}\n >\n {cloneAllChildren(children)}\n </Tag>\n )\n})\n\nexport default Form\n\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Form/index.tsx"],"sourcesContent":["\r\nimport React, { useRef } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\r\n\r\n}\r\n\r\n\r\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\r\n let formRef: any = ref || useRef(null)\r\n\r\n const cloneAllChildren: any = (childs: any) => {\r\n return React.Children.map(childs, (child: any) => {\r\n let c: any = child;\r\n if (React.isValidElement(child) && c.props.name) {\r\n const form = formRef.current\r\n const formData = new FormData(form);\r\n return React.cloneElement(child, {\r\n onChange: () => {\r\n console.log(formData.get(c.props.name));\r\n },\r\n value: formData.get(c.props.name),\r\n children: cloneAllChildren(c.props.children),\r\n } as any);\r\n }\r\n return child;\r\n });\r\n };\r\n\r\n return (\r\n <Tag\r\n component=\"form\"\r\n {...rest}\r\n onSubmit={(e) => {\r\n e.preventDefault()\r\n const form = formRef.current\r\n\r\n const formData = new FormData(form);\r\n\r\n formData.forEach((value, key) => {\r\n console.log(key + \": \" + value);\r\n });\r\n }}\r\n sxr={{\r\n bgcolor: \"default\",\r\n p: 2,\r\n maxWidth: 400,\r\n radius: 1,\r\n }}\r\n baseClass='form'\r\n ref={formRef}\r\n >\r\n {cloneAllChildren(children)}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Form\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;AASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAsC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACnF,IAAI,OAAO,GAAQ,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC;AAEtC,IAAA,MAAM,gBAAgB,GAAQ,CAAC,MAAW,KAAI;QAC1C,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,KAAU,KAAI;YAC7C,IAAI,CAAC,GAAQ,KAAK;AAClB,YAAA,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO;AAC5B,gBAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC;AACnC,gBAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC7B,QAAQ,EAAE,MAAK;AACX,wBAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBAC3C,CAAC;oBACD,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;oBACjC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AACxC,iBAAA,CAAC;YACb;AACA,YAAA,OAAO,KAAK;AAChB,QAAA,CAAC,CAAC;AACN,IAAA,CAAC;AAED,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,MAAM,EAAA,EACZ,IAAI,IACR,QAAQ,EAAE,CAAC,CAAC,KAAI;YACZ,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO;AAE5B,YAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC;YAEnC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,KAAI;gBAC5B,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;AACnC,YAAA,CAAC,CAAC;QACN,CAAC,EACD,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,CAAC,EAAE,CAAC;AACJ,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,MAAM,EAAE,CAAC;AACZ,SAAA,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,OAAO,EAAA,QAAA,EAEX,gBAAgB,CAAC,QAAQ,CAAC,EAAA,CAAA,CACzB;AAEd,CAAC;;;;"}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
|
|
8
|
+
const GridContainer = React.forwardRef((_a, ref) => {
|
|
2
9
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
3
10
|
return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { sxr: {
|
|
4
11
|
display: "flex",
|
|
@@ -6,4 +13,7 @@
|
|
|
6
13
|
flexWrap: 'wrap',
|
|
7
14
|
width: '100%',
|
|
8
15
|
}, baseClass: 'grid-container', ref: ref, children: children })));
|
|
9
|
-
});
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
module.exports = GridContainer;
|
|
19
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\r\n return (\r\n <Tag\r\n {...rest}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n width: '100%',\r\n }}\r\n baseClass='grid-container'\r\n ref={ref}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default GridContainer"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAKA,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA4C,EAAE,GAAoB,KAAI;AAAtE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAkC,EAA7B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AAC3F,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,KAAK,EAAE,MAAM;SAChB,EACD,SAAS,EAAC,gBAAgB,EAC1B,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
|
package/GridContainer/index.mjs
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Tag } from '@xanui/core';
|
|
5
|
+
|
|
6
|
+
const GridContainer = React.forwardRef((_a, ref) => {
|
|
2
7
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
3
8
|
return (jsx(Tag, Object.assign({}, rest, { sxr: {
|
|
4
9
|
display: "flex",
|
|
@@ -6,4 +11,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
6
11
|
flexWrap: 'wrap',
|
|
7
12
|
width: '100%',
|
|
8
13
|
}, baseClass: 'grid-container', ref: ref, children: children })));
|
|
9
|
-
});
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export { GridContainer as default };
|
|
17
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n sxr={{\n display: \"flex\",\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: '100%',\n }}\n baseClass='grid-container'\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default GridContainer"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\r\n return (\r\n <Tag\r\n {...rest}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n width: '100%',\r\n }}\r\n baseClass='grid-container'\r\n ref={ref}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default GridContainer"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA4C,EAAE,GAAoB,KAAI;AAAtE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAkC,EAA7B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AAC3F,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,KAAK,EAAE,MAAM;SAChB,EACD,SAAS,EAAC,gBAAgB,EAC1B,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
|
|
8
|
+
const GridItem = React.forwardRef((_a, ref) => {
|
|
2
9
|
var { children, xs, sm, md, lg, xl } = _a, rest = tslib.__rest(_a, ["children", "xs", "sm", "md", "lg", "xl"]);
|
|
3
10
|
let w = {};
|
|
4
11
|
xs && (w.xs = (100 / 12 * xs) + "%");
|
|
@@ -7,4 +14,7 @@
|
|
|
7
14
|
lg && (w.lg = (100 / 12 * lg) + "%");
|
|
8
15
|
xl && (w.xl = (100 / 12 * xl) + "%");
|
|
9
16
|
return (jsxRuntime.jsx(core.Tag, Object.assign({ ref: ref }, rest, { maxWidth: w, flexBasis: w, flexGrow: 0, baseClass: "grid-item", children: children })));
|
|
10
|
-
});
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
module.exports = GridItem;
|
|
20
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n xs?: number;\r\n sm?: number;\r\n md?: number;\r\n lg?: number;\r\n xl?: number;\r\n}\r\n\r\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\r\n\r\n let w: any = {}\r\n\r\n xs && (w.xs = (100 / 12 * xs) + \"%\")\r\n sm && (w.sm = (100 / 12 * sm) + \"%\")\r\n md && (w.md = (100 / 12 * md) + \"%\")\r\n lg && (w.lg = (100 / 12 * lg) + \"%\")\r\n xl && (w.xl = (100 / 12 * xl) + \"%\")\r\n\r\n return (\r\n <Tag\r\n ref={ref}\r\n {...rest}\r\n maxWidth={w}\r\n flexBasis={w}\r\n flexGrow={0}\r\n baseClass=\"grid-item\"\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default GridItem"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
|
package/GridItem/index.mjs
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Tag } from '@xanui/core';
|
|
5
|
+
|
|
6
|
+
const GridItem = React.forwardRef((_a, ref) => {
|
|
2
7
|
var { children, xs, sm, md, lg, xl } = _a, rest = __rest(_a, ["children", "xs", "sm", "md", "lg", "xl"]);
|
|
3
8
|
let w = {};
|
|
4
9
|
xs && (w.xs = (100 / 12 * xs) + "%");
|
|
@@ -7,4 +12,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
7
12
|
lg && (w.lg = (100 / 12 * lg) + "%");
|
|
8
13
|
xl && (w.xl = (100 / 12 * xl) + "%");
|
|
9
14
|
return (jsx(Tag, Object.assign({ ref: ref }, rest, { maxWidth: w, flexBasis: w, flexGrow: 0, baseClass: "grid-item", children: children })));
|
|
10
|
-
});
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export { GridItem as default };
|
|
18
|
+
//# sourceMappingURL=index.mjs.map
|
package/GridItem/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n xs?: number;\n sm?: number;\n md?: number;\n lg?: number;\n xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n let w: any = {}\n\n xs && (w.xs = (100 / 12 * xs) + \"%\")\n sm && (w.sm = (100 / 12 * sm) + \"%\")\n md && (w.md = (100 / 12 * md) + \"%\")\n lg && (w.lg = (100 / 12 * lg) + \"%\")\n xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n return (\n <Tag\n ref={ref}\n {...rest}\n maxWidth={w}\n flexBasis={w}\n flexGrow={0}\n baseClass=\"grid-item\"\n >\n {children}\n </Tag>\n )\n})\n\nexport default GridItem"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n xs?: number;\r\n sm?: number;\r\n md?: number;\r\n lg?: number;\r\n xl?: number;\r\n}\r\n\r\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\r\n\r\n let w: any = {}\r\n\r\n xs && (w.xs = (100 / 12 * xs) + \"%\")\r\n sm && (w.sm = (100 / 12 * sm) + \"%\")\r\n md && (w.md = (100 / 12 * md) + \"%\")\r\n lg && (w.lg = (100 / 12 * lg) + \"%\")\r\n xl && (w.xl = (100 / 12 * xl) + \"%\")\r\n\r\n return (\r\n <Tag\r\n ref={ref}\r\n {...rest}\r\n maxWidth={w}\r\n flexBasis={w}\r\n flexGrow={0}\r\n baseClass=\"grid-item\"\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default GridItem"],"names":["_jsx"],"mappings":";;;;;AAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
|
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
var index = require('../useCorner/index.cjs');
|
|
8
|
+
|
|
9
|
+
const IconButton = React.forwardRef((_a, ref) => {
|
|
2
10
|
var _b, _c;
|
|
3
11
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
4
12
|
rest.sx = rest.sx || {};
|
|
@@ -18,7 +26,7 @@
|
|
|
18
26
|
variant = p.variant;
|
|
19
27
|
corner = (_c = p.corner) !== null && _c !== void 0 ? _c : "circle";
|
|
20
28
|
let template = core.useColorTemplate(color || "brand", variant || "fill");
|
|
21
|
-
const cornerCss = index
|
|
29
|
+
const cornerCss = index(corner);
|
|
22
30
|
if (size === 'small') {
|
|
23
31
|
size = 28;
|
|
24
32
|
}
|
|
@@ -45,4 +53,7 @@
|
|
|
45
53
|
fontSize: (size / 3) * 2
|
|
46
54
|
}
|
|
47
55
|
}, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
|
|
48
|
-
});
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
module.exports = IconButton;
|
|
59
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner from '../useCorner'\r\n\r\n\r\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\r\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\r\n}\r\n\r\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\r\n rest.sx = (rest as any).sx || {};\r\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\r\n\r\n const _p: any = {}\r\n if (size) _p.size = size\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n if (corner) _p.corner = corner\r\n const p: any = useBreakpointProps(_p)\r\n\r\n size = p.size ?? \"medium\"\r\n color = p.color\r\n variant = p.variant\r\n corner = p.corner ?? \"circle\"\r\n\r\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\r\n const cornerCss = useCorner(corner)\r\n\r\n if (size === 'small') {\r\n size = 28\r\n } else if (size === 'medium') {\r\n size = 34\r\n } else if (size === 'large') {\r\n size = 52\r\n }\r\n\r\n\r\n return (\r\n <Tag\r\n component='button'\r\n ref={ref}\r\n {...cornerCss}\r\n {..._props}\r\n {...template.primary}\r\n baseClass='icon-button'\r\n sxr={{\r\n border: 0,\r\n radius: size,\r\n height: size,\r\n width: size,\r\n cursor: \"pointer\",\r\n fontFamily: \"inherit\",\r\n display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n bgcolor: \"transparent\",\r\n fontSize: (size / 5) * 2,\r\n \"& svg\": {\r\n fontSize: (size / 3) * 2\r\n }\r\n }}\r\n hover={{\r\n ...template.secondary,\r\n ...((_props as any)?.hover || {})\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\r\nexport default IconButton\r\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","useCorner","_jsx","Tag"],"mappings":"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"}
|
package/IconButton/index.mjs
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
|
|
5
|
+
import useCorner from '../useCorner/index.mjs';
|
|
6
|
+
|
|
7
|
+
const IconButton = React.forwardRef((_a, ref) => {
|
|
2
8
|
var _b, _c;
|
|
3
9
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
4
10
|
rest.sx = rest.sx || {};
|
|
@@ -45,4 +51,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
45
51
|
fontSize: (size / 3) * 2
|
|
46
52
|
}
|
|
47
53
|
}, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
|
|
48
|
-
});
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
export { IconButton as default };
|
|
57
|
+
//# sourceMappingURL=index.mjs.map
|
package/IconButton/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n rest.sx = (rest as any).sx || {};\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n const p: any = useBreakpointProps(_p)\n\n size = p.size ?? \"medium\"\n color = p.color\n variant = p.variant\n corner = p.corner ?? \"circle\"\n\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n const cornerCss = useCorner(corner)\n\n if (size === 'small') {\n size = 28\n } else if (size === 'medium') {\n size = 34\n } else if (size === 'large') {\n size = 52\n }\n\n\n return (\n <Tag\n component='button'\n ref={ref}\n {...cornerCss}\n {..._props}\n {...template.primary}\n baseClass='icon-button'\n sxr={{\n border: 0,\n radius: size,\n height: size,\n width: size,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n display: \"inline-flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n bgcolor: \"transparent\",\n fontSize: (size / 5) * 2,\n \"& svg\": {\n fontSize: (size / 3) * 2\n }\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n >\n {children}\n </Tag>\n )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner from '../useCorner'\r\n\r\n\r\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\r\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\r\n}\r\n\r\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\r\n rest.sx = (rest as any).sx || {};\r\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\r\n\r\n const _p: any = {}\r\n if (size) _p.size = size\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n if (corner) _p.corner = corner\r\n const p: any = useBreakpointProps(_p)\r\n\r\n size = p.size ?? \"medium\"\r\n color = p.color\r\n variant = p.variant\r\n corner = p.corner ?? \"circle\"\r\n\r\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\r\n const cornerCss = useCorner(corner)\r\n\r\n if (size === 'small') {\r\n size = 28\r\n } else if (size === 'medium') {\r\n size = 34\r\n } else if (size === 'large') {\r\n size = 52\r\n }\r\n\r\n\r\n return (\r\n <Tag\r\n component='button'\r\n ref={ref}\r\n {...cornerCss}\r\n {..._props}\r\n {...template.primary}\r\n baseClass='icon-button'\r\n sxr={{\r\n border: 0,\r\n radius: size,\r\n height: size,\r\n width: size,\r\n cursor: \"pointer\",\r\n fontFamily: \"inherit\",\r\n display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n bgcolor: \"transparent\",\r\n fontSize: (size / 5) * 2,\r\n \"& svg\": {\r\n fontSize: (size / 3) * 2\r\n }\r\n }}\r\n hover={{\r\n ...template.secondary,\r\n ...((_props as any)?.hover || {})\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\r\nexport default IconButton\r\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
|
|
8
|
+
const Image = React.forwardRef((_a, ref) => {
|
|
2
9
|
var { children, src, alt, errorView } = _a, rest = tslib.__rest(_a, ["children", "src", "alt", "errorView"]);
|
|
3
10
|
const [faild, setFaild] = React.useState();
|
|
4
11
|
if (faild === false) {
|
|
@@ -13,4 +20,7 @@
|
|
|
13
20
|
setFaild(false);
|
|
14
21
|
rest.onError && rest.onError(e);
|
|
15
22
|
}, ref: ref })));
|
|
16
|
-
});
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
module.exports = Image;
|
|
26
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Image/index.tsx"],"sourcesContent":["\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n errorView?: ReactElement\r\n}\r\n\r\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\r\n const [faild, setFaild] = useState<boolean>()\r\n\r\n if (faild === false) {\r\n let t = errorView || alt?.charAt(0).toUpperCase() || children\r\n return (\r\n <Tag\r\n src={src}\r\n {...rest as any}\r\n sxr={{\r\n display: \"inline-flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n component=\"div\"\r\n baseClass='image'\r\n ref={ref}\r\n >{t}</Tag>\r\n )\r\n }\r\n return (\r\n <Tag\r\n objectFit=\"cover\"\r\n {...rest as any}\r\n component=\"img\"\r\n alt={alt}\r\n src={src}\r\n baseClass='image'\r\n onError={(e) => {\r\n setFaild(false)\r\n rest.onError && rest.onError(e as any)\r\n }}\r\n ref={ref}\r\n />\r\n )\r\n})\r\n\r\nexport default Image\r\n\r\n\r\n"],"names":["__rest","useState","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAyD,EAAE,GAAQ,KAAI;AAAvE,IAAA,IAAA,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAxC,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,EAAA,WAAA,CAA0C,CAAF;IACxG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,EAAW;AAE7C,IAAA,IAAI,KAAK,KAAK,KAAK,EAAE;AACjB,QAAA,IAAI,CAAC,GAAG,SAAS,KAAI,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,CAAC,CAAC,CAAA,CAAE,WAAW,EAAE,CAAA,IAAI,QAAQ;QAC7D,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAW,EAAA,EACf,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACvB,aAAA,EACD,SAAS,EAAC,KAAK,EACf,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,CAAC,EAAA,CAAA,CAAO;IAElB;AACA,IAAA,QACID,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,OAAO,EAAA,EACb,IAAW,EAAA,EACf,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,KAAI;YACX,QAAQ,CAAC,KAAK,CAAC;YACf,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAQ,CAAC;AAC1C,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,CAAA,CACV;AAEV,CAAC;;;;"}
|