@bodynarf/react.components 1.6.2 → 1.6.3
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/components/anchor/component/index.d.ts +6 -0
- package/components/anchor/component/index.d.ts.map +1 -0
- package/components/anchor/component/index.js +20 -0
- package/components/anchor/{anchor.scss → component/style.scss} +15 -15
- package/components/anchor/index.d.ts +2 -23
- package/components/anchor/index.d.ts.map +1 -1
- package/components/anchor/index.js +2 -20
- package/components/anchor/types.d.ts +23 -4
- package/components/anchor/types.d.ts.map +1 -1
- package/components/button/component/index.d.ts +9 -0
- package/components/button/component/index.d.ts.map +1 -0
- package/components/button/component/index.js +36 -0
- package/components/button/{button.scss → component/style.scss} +12 -12
- package/components/button/index.d.ts +2 -33
- package/components/button/index.d.ts.map +1 -1
- package/components/button/index.js +2 -37
- package/components/button/types.d.ts +25 -2
- package/components/button/types.d.ts.map +1 -1
- package/components/button/types.js +1 -0
- package/components/dropdown/component/index.d.ts +7 -0
- package/components/dropdown/component/index.d.ts.map +1 -0
- package/components/dropdown/component/index.js +15 -0
- package/components/dropdown/index.d.ts +2 -42
- package/components/dropdown/index.d.ts.map +1 -1
- package/components/dropdown/index.js +2 -15
- package/components/dropdown/types.d.ts +38 -2
- package/components/dropdown/types.d.ts.map +1 -1
- package/components/icon/component/index.d.ts +8 -0
- package/components/icon/component/index.d.ts.map +1 -0
- package/components/icon/component/index.js +23 -0
- package/components/icon/{icon.scss → component/style.scss} +21 -21
- package/components/icon/index.d.ts +2 -21
- package/components/icon/index.d.ts.map +1 -1
- package/components/icon/index.js +2 -23
- package/components/icon/types.d.ts +16 -0
- package/components/icon/types.d.ts.map +1 -0
- package/components/icon/types.js +1 -0
- package/components/index.d.ts +3 -3
- package/components/index.d.ts.map +1 -1
- package/components/index.js +3 -3
- package/components/paginator/component/index.d.ts +8 -0
- package/components/paginator/component/index.d.ts.map +1 -0
- package/components/paginator/component/index.js +47 -0
- package/components/paginator/index.d.ts +3 -33
- package/components/paginator/index.d.ts.map +1 -1
- package/components/paginator/index.js +3 -47
- package/components/paginator/types.d.ts +28 -0
- package/components/paginator/types.d.ts.map +1 -0
- package/components/paginator/types.js +1 -0
- package/components/primitives/checkbox/component/index.d.ts +7 -0
- package/components/primitives/checkbox/component/index.d.ts.map +1 -0
- package/components/primitives/checkbox/component/index.js +37 -0
- package/components/primitives/checkbox/index.d.ts +2 -28
- package/components/primitives/checkbox/index.d.ts.map +1 -1
- package/components/primitives/checkbox/index.js +2 -38
- package/components/primitives/checkbox/types.d.ts +25 -0
- package/components/primitives/checkbox/types.d.ts.map +1 -0
- package/components/primitives/checkbox/types.js +1 -0
- package/components/primitives/date/component/index.d.ts +6 -0
- package/components/primitives/date/component/index.d.ts.map +1 -0
- package/components/primitives/date/component/index.js +48 -0
- package/components/primitives/date/index.d.ts +2 -13
- package/components/primitives/date/index.d.ts.map +1 -1
- package/components/primitives/date/index.js +2 -48
- package/components/primitives/date/types.d.ts +9 -0
- package/components/primitives/date/types.d.ts.map +1 -0
- package/components/primitives/date/types.js +1 -0
- package/components/primitives/index.d.ts +3 -1
- package/components/primitives/index.d.ts.map +1 -1
- package/components/primitives/index.js +3 -1
- package/components/primitives/multiline/component/index.d.ts +7 -0
- package/components/primitives/multiline/component/index.d.ts.map +1 -0
- package/components/primitives/multiline/component/index.js +15 -0
- package/components/primitives/multiline/index.d.ts +2 -15
- package/components/primitives/multiline/index.d.ts.map +1 -1
- package/components/primitives/multiline/index.js +2 -15
- package/components/primitives/multiline/types.d.ts +11 -0
- package/components/primitives/multiline/types.d.ts.map +1 -0
- package/components/primitives/multiline/types.js +1 -0
- package/components/primitives/number/component/index.d.ts +6 -0
- package/components/primitives/number/component/index.d.ts.map +1 -0
- package/components/primitives/number/component/index.js +14 -0
- package/components/primitives/number/index.d.ts +2 -16
- package/components/primitives/number/index.d.ts.map +1 -1
- package/components/primitives/number/index.js +2 -14
- package/components/primitives/number/types.d.ts +13 -0
- package/components/primitives/number/types.d.ts.map +1 -0
- package/components/primitives/number/types.js +1 -0
- package/components/primitives/password/component/index.d.ts +7 -0
- package/components/primitives/password/component/index.d.ts.map +1 -0
- package/components/primitives/password/component/index.js +13 -0
- package/components/primitives/password/index.d.ts +2 -14
- package/components/primitives/password/index.d.ts.map +1 -1
- package/components/primitives/password/index.js +2 -13
- package/components/primitives/password/types.d.ts +10 -0
- package/components/primitives/password/types.d.ts.map +1 -0
- package/components/primitives/password/types.js +1 -0
- package/components/primitives/text/component/index.d.ts +7 -0
- package/components/primitives/text/component/index.d.ts.map +1 -0
- package/components/primitives/text/component/index.js +15 -0
- package/components/primitives/text/index.d.ts +2 -11
- package/components/primitives/text/index.d.ts.map +1 -1
- package/components/primitives/text/index.js +2 -15
- package/components/primitives/text/types.d.ts +7 -0
- package/components/primitives/text/types.d.ts.map +1 -0
- package/components/primitives/text/types.js +1 -0
- package/components/primitives/types/baseProps.d.ts +2 -2
- package/components/primitives/types/baseProps.d.ts.map +1 -1
- package/components/primitives/types/label.d.ts +2 -2
- package/components/primitives/types/label.d.ts.map +1 -1
- package/components/search/component/index.d.ts +6 -0
- package/components/search/component/index.d.ts.map +1 -0
- package/components/search/component/index.js +37 -0
- package/components/search/index.d.ts +2 -29
- package/components/search/index.d.ts.map +1 -1
- package/components/search/index.js +2 -37
- package/components/search/types.d.ts +27 -0
- package/components/search/types.d.ts.map +1 -0
- package/components/search/types.js +1 -0
- package/components/tag/component/index.d.ts +7 -0
- package/components/tag/component/index.d.ts.map +1 -0
- package/components/tag/component/index.js +28 -0
- package/components/tag/index.d.ts +2 -31
- package/components/tag/index.d.ts.map +1 -1
- package/components/tag/index.js +2 -28
- package/components/tag/types.d.ts +27 -0
- package/components/tag/types.d.ts.map +1 -0
- package/components/tag/types.js +1 -0
- package/components/types.d.ts +4 -4
- package/components/types.d.ts.map +1 -1
- package/hooks/usePagination.d.ts.map +1 -1
- package/index.d.ts +2 -12
- package/index.d.ts.map +1 -1
- package/index.js +2 -12
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -0
- package/components/primitives/types/enums.d.ts +0 -29
- package/components/primitives/types/enums.d.ts.map +0 -1
- package/components/primitives/types/enums.js +0 -31
- /package/components/dropdown/{dropdown.scss → component/style.scss} +0 -0
- /package/components/primitives/checkbox/{checkbox.scss → component/style.scss} +0 -0
- /package/components/primitives/password/{style.scss → component/style.scss} +0 -0
- /package/components/search/{search.scss → component/style.scss} +0 -0
- /package/components/tag/{style.scss → component/style.scss} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}
|
package/components/icon/index.js
CHANGED
|
@@ -1,23 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import "./icon.scss";
|
|
4
|
-
import { ElementSize } from "..";
|
|
5
|
-
const sizeToClassMap = new Map([
|
|
6
|
-
[ElementSize.Small, "bbr-icon--size-smal"],
|
|
7
|
-
[ElementSize.Normal, ""],
|
|
8
|
-
[ElementSize.Medium, "bbr-icon--size-medium"],
|
|
9
|
-
[ElementSize.Large, "bbr-icon--size-large"]
|
|
10
|
-
]);
|
|
11
|
-
/**
|
|
12
|
-
* Icon component. Based on bootstrap icons
|
|
13
|
-
*/
|
|
14
|
-
export default function Icon({ name, size = ElementSize.Normal, className, }) {
|
|
15
|
-
const classNames = getClassName([
|
|
16
|
-
"bbr-icon",
|
|
17
|
-
"bi",
|
|
18
|
-
`bi-${name}`,
|
|
19
|
-
sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
|
|
20
|
-
className
|
|
21
|
-
]);
|
|
22
|
-
return (_jsx("i", { className: classNames }));
|
|
23
|
-
}
|
|
1
|
+
export { default } from "./component";
|
|
2
|
+
export * from "./types";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ElementSize } from "..";
|
|
2
|
+
/** Icon component props */
|
|
3
|
+
export interface IconProps {
|
|
4
|
+
/**
|
|
5
|
+
* Icon name. Must be without `bi-`
|
|
6
|
+
* @example ["Arrow repeat", "arrow-repeat"]
|
|
7
|
+
* // Icon name to icon class name.
|
|
8
|
+
* // For class name check bootstrap icons website
|
|
9
|
+
*/
|
|
10
|
+
name: string;
|
|
11
|
+
/** Additional classname */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** Icon size */
|
|
14
|
+
size?: ElementSize;
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,2BAA2B;AAC3B,MAAM,WAAW,SAAS;IACtB;;;;;MAKE;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/components/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export * from "./types";
|
|
2
1
|
export * from "./anchor";
|
|
3
2
|
export * from "./button";
|
|
4
3
|
export * from "./dropdown";
|
|
5
4
|
export * from "./icon";
|
|
6
5
|
export * from "./paginator";
|
|
7
|
-
export * from "./primitives";
|
|
8
6
|
export * from "./search";
|
|
9
|
-
export * from "./tag";
|
|
10
7
|
export * from "./tabs";
|
|
8
|
+
export * from "./tag";
|
|
9
|
+
export * from "./primitives";
|
|
10
|
+
export * from "./types";
|
|
11
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AAEtB,cAAc,cAAc,CAAC;AAE7B,cAAc,SAAS,CAAC"}
|
package/components/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export * from "./types";
|
|
2
1
|
export * from "./anchor";
|
|
3
2
|
export * from "./button";
|
|
4
3
|
export * from "./dropdown";
|
|
5
4
|
export * from "./icon";
|
|
6
5
|
export * from "./paginator";
|
|
7
|
-
export * from "./primitives";
|
|
8
6
|
export * from "./search";
|
|
9
|
-
export * from "./tag";
|
|
10
7
|
export * from "./tabs";
|
|
8
|
+
export * from "./tag";
|
|
9
|
+
export * from "./primitives";
|
|
10
|
+
export * from "./types";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PaginatorProps } from "..";
|
|
3
|
+
/**
|
|
4
|
+
* Paginator component.
|
|
5
|
+
* Used for visualization of pagging configuration
|
|
6
|
+
*/
|
|
7
|
+
export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }: PaginatorProps): JSX.Element;
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAuB,cAAc,EAAE,MAAM,IAAI,CAAC;AAEzD;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAW,EAChC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAClC,eAAe,EAAE,cAAc,EAClC,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA4G9B"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useMemo } from "react";
|
|
3
|
+
import { getClassName, isNullOrEmpty } from "@bodynarf/utils";
|
|
4
|
+
import { generatePageNumbers } from "..";
|
|
5
|
+
/**
|
|
6
|
+
* Paginator component.
|
|
7
|
+
* Used for visualization of pagging configuration
|
|
8
|
+
*/
|
|
9
|
+
export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }) {
|
|
10
|
+
const page = currentPage || 0;
|
|
11
|
+
const pageChange = useCallback((event) => {
|
|
12
|
+
const target = event.target;
|
|
13
|
+
const pageRaw = target.dataset["page"];
|
|
14
|
+
if (isNullOrEmpty(pageRaw)) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
const page = +pageRaw;
|
|
18
|
+
if (page !== currentPage && page > 0 && page <= count) {
|
|
19
|
+
onPageChange(page);
|
|
20
|
+
}
|
|
21
|
+
}, [onPageChange, currentPage, count]);
|
|
22
|
+
const pageNumbers = useMemo(() => generatePageNumbers(page, count, nearPagesCount), [page, count]);
|
|
23
|
+
const canGoBack = useMemo(() => page > 1, [page]);
|
|
24
|
+
const canGoForward = useMemo(() => page < count, [page, count]);
|
|
25
|
+
if (pageNumbers.length <= 1) {
|
|
26
|
+
return _jsx(_Fragment, {});
|
|
27
|
+
}
|
|
28
|
+
const classNames = getClassName([
|
|
29
|
+
"bbr-paginator",
|
|
30
|
+
"pagination",
|
|
31
|
+
paginationPositionToClassMap.has(position || "") ? paginationPositionToClassMap.get(position || "") : "",
|
|
32
|
+
rounded == true ? "is-rounded" : "",
|
|
33
|
+
isNullOrEmpty(size) ? "" : `is-${size}`,
|
|
34
|
+
className
|
|
35
|
+
]);
|
|
36
|
+
return (_jsxs("nav", { className: classNames, role: "navigation", "aria-label": "pagination", children: [showNextButtons === true &&
|
|
37
|
+
_jsxs(_Fragment, { children: [_jsx("a", { className: `pagination-previous${canGoBack ? "" : " is-disabled"}`, "data-page": page - 1, onClick: pageChange, children: "Previous" }), _jsx("a", { className: `pagination-next${canGoForward ? "" : " is-disabled"}`, "data-page": page + 1, onClick: pageChange, children: "Next page" })] }), _jsxs("ul", { className: "pagination-list", children: [page !== 1 && !pageNumbers.includes(1) &&
|
|
38
|
+
_jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": "Goto page 1", "data-page": 1, onClick: pageChange, children: "1" }) }), _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) })] }), pageNumbers.map(x => _jsx("li", { children: _jsx("a", { className: `pagination-link${page === x ? " is-current" : ""}`, "aria-label": `Goto page ${x}`, "data-page": x, onClick: pageChange, children: x }) }, x)), page != count && !pageNumbers.includes(count) &&
|
|
39
|
+
_jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) }), _jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": `Goto page ${count}`, "data-page": count, onClick: pageChange, children: count }) })] })] })] }));
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Position setting to css class name map
|
|
43
|
+
*/
|
|
44
|
+
const paginationPositionToClassMap = new Map([
|
|
45
|
+
["center", "is-centered"],
|
|
46
|
+
["right", "is-right"]
|
|
47
|
+
]);
|
|
@@ -1,34 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
/** Amount of pages */
|
|
5
|
-
count: number;
|
|
6
|
-
/** Page change handler */
|
|
7
|
-
onPageChange: (page: number) => void;
|
|
8
|
-
/** Current page */
|
|
9
|
-
currentPage?: number;
|
|
10
|
-
/**
|
|
11
|
-
* Page numbers position.
|
|
12
|
-
* Usefull with `showNextButtons = true`
|
|
13
|
-
*/
|
|
14
|
-
position?: "left" | "center" | "right";
|
|
15
|
-
/** Buttons should have rounded borders */
|
|
16
|
-
rounded?: boolean;
|
|
17
|
-
/** Size of paginator component elements */
|
|
18
|
-
size?: ElementSize;
|
|
19
|
-
/** Additional class names */
|
|
20
|
-
className?: string;
|
|
21
|
-
/** Display "Previous" \ "Next" buttons */
|
|
22
|
-
showNextButtons?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* Max amount of pages from left & right from current page. `3` by default
|
|
25
|
-
* @description If set to 2 it will show `[1, 2], 3, [4, 5]`
|
|
26
|
-
*/
|
|
27
|
-
nearPagesCount?: number;
|
|
28
|
-
};
|
|
29
|
-
/**
|
|
30
|
-
* Paginator component.
|
|
31
|
-
* Used for visualization of pagging configuration
|
|
32
|
-
*/
|
|
33
|
-
export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }: PaginatorProps): JSX.Element;
|
|
1
|
+
export { default } from "./component";
|
|
2
|
+
export * from "./types";
|
|
3
|
+
export * from "./utils";
|
|
34
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
@@ -1,47 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import { generatePageNumbers } from "./utils";
|
|
5
|
-
/**
|
|
6
|
-
* Paginator component.
|
|
7
|
-
* Used for visualization of pagging configuration
|
|
8
|
-
*/
|
|
9
|
-
export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }) {
|
|
10
|
-
const page = currentPage || 0;
|
|
11
|
-
const pageChange = useCallback((event) => {
|
|
12
|
-
const target = event.target;
|
|
13
|
-
const pageRaw = target.dataset["page"];
|
|
14
|
-
if (isNullOrEmpty(pageRaw)) {
|
|
15
|
-
return;
|
|
16
|
-
}
|
|
17
|
-
const page = +pageRaw;
|
|
18
|
-
if (page !== currentPage && page > 0 && page <= count) {
|
|
19
|
-
onPageChange(page);
|
|
20
|
-
}
|
|
21
|
-
}, [onPageChange, currentPage, count]);
|
|
22
|
-
const pageNumbers = useMemo(() => generatePageNumbers(page, count, nearPagesCount), [page, count]);
|
|
23
|
-
const canGoBack = useMemo(() => page > 1, [page]);
|
|
24
|
-
const canGoForward = useMemo(() => page < count, [page, count]);
|
|
25
|
-
if (pageNumbers.length <= 1) {
|
|
26
|
-
return _jsx(_Fragment, {});
|
|
27
|
-
}
|
|
28
|
-
const classNames = getClassName([
|
|
29
|
-
"bbr-paginator",
|
|
30
|
-
"pagination",
|
|
31
|
-
paginationPositionToClassMap.has(position || "") ? paginationPositionToClassMap.get(position || "") : "",
|
|
32
|
-
rounded == true ? "is-rounded" : "",
|
|
33
|
-
isNullOrEmpty(size) ? "" : `is-${size}`,
|
|
34
|
-
className
|
|
35
|
-
]);
|
|
36
|
-
return (_jsxs("nav", { className: classNames, role: "navigation", "aria-label": "pagination", children: [showNextButtons === true &&
|
|
37
|
-
_jsxs(_Fragment, { children: [_jsx("a", { className: `pagination-previous${canGoBack ? "" : " is-disabled"}`, "data-page": page - 1, onClick: pageChange, children: "Previous" }), _jsx("a", { className: `pagination-next${canGoForward ? "" : " is-disabled"}`, "data-page": page + 1, onClick: pageChange, children: "Next page" })] }), _jsxs("ul", { className: "pagination-list", children: [page !== 1 && !pageNumbers.includes(1) &&
|
|
38
|
-
_jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": "Goto page 1", "data-page": 1, onClick: pageChange, children: "1" }) }), _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) })] }), pageNumbers.map(x => _jsx("li", { children: _jsx("a", { className: `pagination-link${page === x ? " is-current" : ""}`, "aria-label": `Goto page ${x}`, "data-page": x, onClick: pageChange, children: x }) }, x)), page != count && !pageNumbers.includes(count) &&
|
|
39
|
-
_jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) }), _jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": `Goto page ${count}`, "data-page": count, onClick: pageChange, children: count }) })] })] })] }));
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* Position setting to css class name map
|
|
43
|
-
*/
|
|
44
|
-
const paginationPositionToClassMap = new Map([
|
|
45
|
-
["center", "is-centered"],
|
|
46
|
-
["right", "is-right"]
|
|
47
|
-
]);
|
|
1
|
+
export { default } from "./component";
|
|
2
|
+
export * from "./types";
|
|
3
|
+
export * from "./utils";
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ElementSize } from "..";
|
|
2
|
+
export interface PaginatorProps {
|
|
3
|
+
/** Amount of pages */
|
|
4
|
+
count: number;
|
|
5
|
+
/** Page change handler */
|
|
6
|
+
onPageChange: (page: number) => void;
|
|
7
|
+
/** Current page */
|
|
8
|
+
currentPage?: number;
|
|
9
|
+
/**
|
|
10
|
+
* Page numbers position.
|
|
11
|
+
* Usefull with `showNextButtons = true`
|
|
12
|
+
*/
|
|
13
|
+
position?: "left" | "center" | "right";
|
|
14
|
+
/** Buttons should have rounded borders */
|
|
15
|
+
rounded?: boolean;
|
|
16
|
+
/** Size of paginator component elements */
|
|
17
|
+
size?: ElementSize;
|
|
18
|
+
/** Additional class names */
|
|
19
|
+
className?: string;
|
|
20
|
+
/** Display "Previous" \ "Next" buttons */
|
|
21
|
+
showNextButtons?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Max amount of pages from left & right from current page. `3` by default
|
|
24
|
+
* @description If set to 2 it will show `[1, 2], 3, [4, 5]`
|
|
25
|
+
*/
|
|
26
|
+
nearPagesCount?: number;
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,MAAM,WAAW,cAAc;IAC3B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;MAGE;IACF,QAAQ,CAAC,EACP,MAAM,GACN,QAAQ,GACR,OAAO,CACR;IAED,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import "./style.scss";
|
|
3
|
+
import { CheckBoxProps } from "..";
|
|
4
|
+
/** Boolean input component */
|
|
5
|
+
declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }: CheckBoxProps) => JSX.Element;
|
|
6
|
+
export default CheckBox;
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/checkbox/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAEnC,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,6JAMX,aAAa,KAAG,WAoFlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
4
|
+
import "./style.scss";
|
|
5
|
+
/** Boolean input component */
|
|
6
|
+
const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }) => {
|
|
7
|
+
const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
|
|
8
|
+
const id = name || generateGuid();
|
|
9
|
+
const className = getClassName([
|
|
10
|
+
"is-checkradio",
|
|
11
|
+
"m-check-radio",
|
|
12
|
+
(hasBackgroundColor ?? false) ? "has-background-color" : "",
|
|
13
|
+
(fixBackgroundColor ?? false) && (hasBackgroundColor ?? false) ? "m-has-background-color" : "",
|
|
14
|
+
isNullOrUndefined(size) ? "" : size === "normal" ? "" : `is-${size}`,
|
|
15
|
+
(rounded ?? false) ? "is-circle" : "",
|
|
16
|
+
isNullOrUndefined(style) ? "" : `is-${style}`,
|
|
17
|
+
(block ?? false) ? "is-block" : "",
|
|
18
|
+
(withoutBorder ?? false) ? "has-no-border" : "",
|
|
19
|
+
]);
|
|
20
|
+
if (!isNullOrUndefined(label) && isFormLabel === true) {
|
|
21
|
+
const labelClassName = getClassName([
|
|
22
|
+
"label",
|
|
23
|
+
label.className
|
|
24
|
+
]);
|
|
25
|
+
const labelContainerClassName = getClassName([
|
|
26
|
+
"field-label",
|
|
27
|
+
label.horizontalContainerClassName
|
|
28
|
+
]);
|
|
29
|
+
const fieldContainerClassName = getClassName([
|
|
30
|
+
"field-body",
|
|
31
|
+
label.horizontalFieldContainerClassName
|
|
32
|
+
]);
|
|
33
|
+
return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id })] }) })] }));
|
|
34
|
+
}
|
|
35
|
+
return (_jsxs("div", { className: "bbr-input field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id, children: label?.caption })] }));
|
|
36
|
+
};
|
|
37
|
+
export default CheckBox;
|
|
@@ -1,29 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { BaseInputElementProps } from "..";
|
|
4
|
-
export interface CheckBoxProps extends BaseInputElementProps<boolean> {
|
|
5
|
-
/** Is full colored checkbox */
|
|
6
|
-
block?: boolean;
|
|
7
|
-
/** Remove the checkbox border */
|
|
8
|
-
withoutBorder?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* Checkbox has background color.
|
|
11
|
-
* Only works if style is set
|
|
12
|
-
*/
|
|
13
|
-
hasBackgroundColor?: boolean;
|
|
14
|
-
/**
|
|
15
|
-
* Set unchecked background as transparent.
|
|
16
|
-
* Only used with `hasBackgroundColor` set as `true`
|
|
17
|
-
* @example `{ style: ElementColor.Info, hasBackgrounColor: true, fixBackgroundColor: true }` -
|
|
18
|
-
*/
|
|
19
|
-
fixBackgroundColor?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* Display component with label as form element.
|
|
22
|
-
* Label will be placed at left
|
|
23
|
-
*/
|
|
24
|
-
isFormLabel?: boolean;
|
|
25
|
-
}
|
|
26
|
-
/** Boolean input component */
|
|
27
|
-
declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }: CheckBoxProps) => JSX.Element;
|
|
28
|
-
export default CheckBox;
|
|
1
|
+
export { default } from "./component";
|
|
2
|
+
export * from "./types";
|
|
29
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}
|
|
@@ -1,38 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
4
|
-
import "./checkbox.scss";
|
|
5
|
-
;
|
|
6
|
-
/** Boolean input component */
|
|
7
|
-
const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }) => {
|
|
8
|
-
const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
|
|
9
|
-
const id = name || generateGuid();
|
|
10
|
-
const className = getClassName([
|
|
11
|
-
"is-checkradio",
|
|
12
|
-
"m-check-radio",
|
|
13
|
-
(hasBackgroundColor ?? false) ? "has-background-color" : "",
|
|
14
|
-
(fixBackgroundColor ?? false) && (hasBackgroundColor ?? false) ? "m-has-background-color" : "",
|
|
15
|
-
isNullOrUndefined(size) ? "" : size === "normal" ? "" : `is-${size}`,
|
|
16
|
-
(rounded ?? false) ? "is-circle" : "",
|
|
17
|
-
isNullOrUndefined(style) ? "" : `is-${style}`,
|
|
18
|
-
(block ?? false) ? "is-block" : "",
|
|
19
|
-
(withoutBorder ?? false) ? "has-no-border" : "",
|
|
20
|
-
]);
|
|
21
|
-
if (!isNullOrUndefined(label) && isFormLabel === true) {
|
|
22
|
-
const labelClassName = getClassName([
|
|
23
|
-
"label",
|
|
24
|
-
label.className
|
|
25
|
-
]);
|
|
26
|
-
const labelContainerClassName = getClassName([
|
|
27
|
-
"field-label",
|
|
28
|
-
label.horizontalContainerClassName
|
|
29
|
-
]);
|
|
30
|
-
const fieldContainerClassName = getClassName([
|
|
31
|
-
"field-body",
|
|
32
|
-
label.horizontalFieldContainerClassName
|
|
33
|
-
]);
|
|
34
|
-
return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id })] }) })] }));
|
|
35
|
-
}
|
|
36
|
-
return (_jsxs("div", { className: "bbr-input field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id, children: label?.caption })] }));
|
|
37
|
-
};
|
|
38
|
-
export default CheckBox;
|
|
1
|
+
export { default } from "./component";
|
|
2
|
+
export * from "./types";
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { BaseInputElementProps } from "..";
|
|
2
|
+
/** Checkbox component props type */
|
|
3
|
+
export interface CheckBoxProps extends BaseInputElementProps<boolean> {
|
|
4
|
+
/** Is full colored checkbox */
|
|
5
|
+
block?: boolean;
|
|
6
|
+
/** Remove the checkbox border */
|
|
7
|
+
withoutBorder?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Checkbox has background color.
|
|
10
|
+
* Only works if style is set
|
|
11
|
+
*/
|
|
12
|
+
hasBackgroundColor?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Set unchecked background as transparent.
|
|
15
|
+
* Only used with `hasBackgroundColor` set as `true`
|
|
16
|
+
* @example `{ style: ElementColor.Info, hasBackgrounColor: true, fixBackgroundColor: true }` -
|
|
17
|
+
*/
|
|
18
|
+
fixBackgroundColor?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Display component with label as form element.
|
|
21
|
+
* Label will be placed at left
|
|
22
|
+
*/
|
|
23
|
+
isFormLabel?: boolean;
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAE3C,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,qBAAqB,CAAC,OAAO,CAAC;IACjE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;MAIE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import "../../../../common.scss";
|
|
2
|
+
import { DateProps } from "../..";
|
|
3
|
+
/** Date input component */
|
|
4
|
+
declare const DatePicker: ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded, loading, style, label, onBlur }: DateProps) => JSX.Element;
|
|
5
|
+
export default DatePicker;
|
|
6
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/date/component/index.tsx"],"names":[],"mappings":"AAIA,OAAO,yBAAyB,CAAC;AAIjC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2BAA2B;AAC3B,QAAA,MAAM,UAAU,wIAMb,SAAS,KAAG,WA4Gd,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@bodynarf/utils";
|
|
4
|
+
import "../../../../common.scss";
|
|
5
|
+
import { ElementSize } from "../../..";
|
|
6
|
+
import { getValidationValues } from "../../../../utils";
|
|
7
|
+
/** Date input component */
|
|
8
|
+
const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded, loading, style, label, onBlur }) => {
|
|
9
|
+
const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value)
|
|
10
|
+
? undefined
|
|
11
|
+
: new Date(event.target.value)), [onValueChange]);
|
|
12
|
+
const id = name || generateGuid();
|
|
13
|
+
const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
|
|
14
|
+
const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
|
|
15
|
+
const elClassName = getClassName([
|
|
16
|
+
className,
|
|
17
|
+
elSizeClassName,
|
|
18
|
+
styleClassName,
|
|
19
|
+
rounded === true ? "is-rounded" : "",
|
|
20
|
+
"input",
|
|
21
|
+
]);
|
|
22
|
+
const inputContainerClassName = getClassName([
|
|
23
|
+
"control",
|
|
24
|
+
loading === true ? "is-loading" : "",
|
|
25
|
+
]);
|
|
26
|
+
const stingifiedDefValue = defaultValue?.toISOString().split("T")[0];
|
|
27
|
+
const labelClassName = getClassName([
|
|
28
|
+
"label",
|
|
29
|
+
!label.horizontal ? elSizeClassName : "",
|
|
30
|
+
label.className
|
|
31
|
+
]);
|
|
32
|
+
if (label.horizontal) {
|
|
33
|
+
const labelContainerClassName = getClassName([
|
|
34
|
+
"field-label",
|
|
35
|
+
elSizeClassName,
|
|
36
|
+
label.horizontalContainerClassName
|
|
37
|
+
]);
|
|
38
|
+
const fieldContainerClassName = getClassName([
|
|
39
|
+
"field-body",
|
|
40
|
+
label.horizontalFieldContainerClassName
|
|
41
|
+
]);
|
|
42
|
+
return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: elClassName, readOnly: readonly, disabled: disabled, defaultValue: stingifiedDefValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
|
|
43
|
+
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
|
|
44
|
+
}
|
|
45
|
+
return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: elClassName, readOnly: readonly, disabled: disabled, defaultValue: stingifiedDefValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
|
|
46
|
+
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
|
|
47
|
+
};
|
|
48
|
+
export default DatePicker;
|
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { BaseInputElementProps, InputLabel } from "../..";
|
|
4
|
-
/** Date input conponent props type */
|
|
5
|
-
export declare type DateProps = Omit<BaseInputElementProps<Date | undefined>, "placeholder"> & {
|
|
6
|
-
/** Label configuration */
|
|
7
|
-
label: InputLabel;
|
|
8
|
-
/** Focus out event handler */
|
|
9
|
-
onBlur?: () => void;
|
|
10
|
-
};
|
|
11
|
-
/** Date input component */
|
|
12
|
-
declare const DatePicker: ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded, loading, style, label, onBlur }: DateProps) => JSX.Element;
|
|
13
|
-
export default DatePicker;
|
|
1
|
+
export { default } from "./component";
|
|
2
|
+
export * from "./types";
|
|
14
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}
|
|
@@ -1,48 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@bodynarf/utils";
|
|
4
|
-
import "../../../common.scss";
|
|
5
|
-
import { ElementSize } from "../..";
|
|
6
|
-
import { getValidationValues } from "../../../utils";
|
|
7
|
-
/** Date input component */
|
|
8
|
-
const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded, loading, style, label, onBlur }) => {
|
|
9
|
-
const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value)
|
|
10
|
-
? undefined
|
|
11
|
-
: new Date(event.target.value)), [onValueChange]);
|
|
12
|
-
const id = name || generateGuid();
|
|
13
|
-
const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
|
|
14
|
-
const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
|
|
15
|
-
const elClassName = getClassName([
|
|
16
|
-
className,
|
|
17
|
-
elSizeClassName,
|
|
18
|
-
styleClassName,
|
|
19
|
-
rounded === true ? "is-rounded" : "",
|
|
20
|
-
"input",
|
|
21
|
-
]);
|
|
22
|
-
const inputContainerClassName = getClassName([
|
|
23
|
-
"control",
|
|
24
|
-
loading === true ? "is-loading" : "",
|
|
25
|
-
]);
|
|
26
|
-
const stingifiedDefValue = defaultValue?.toISOString().split("T")[0];
|
|
27
|
-
const labelClassName = getClassName([
|
|
28
|
-
"label",
|
|
29
|
-
!label.horizontal ? elSizeClassName : "",
|
|
30
|
-
label.className
|
|
31
|
-
]);
|
|
32
|
-
if (label.horizontal) {
|
|
33
|
-
const labelContainerClassName = getClassName([
|
|
34
|
-
"field-label",
|
|
35
|
-
elSizeClassName,
|
|
36
|
-
label.horizontalContainerClassName
|
|
37
|
-
]);
|
|
38
|
-
const fieldContainerClassName = getClassName([
|
|
39
|
-
"field-body",
|
|
40
|
-
label.horizontalFieldContainerClassName
|
|
41
|
-
]);
|
|
42
|
-
return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: elClassName, readOnly: readonly, disabled: disabled, defaultValue: stingifiedDefValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
|
|
43
|
-
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
|
|
44
|
-
}
|
|
45
|
-
return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: elClassName, readOnly: readonly, disabled: disabled, defaultValue: stingifiedDefValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
|
|
46
|
-
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
|
|
47
|
-
};
|
|
48
|
-
export default DatePicker;
|
|
1
|
+
export { default } from "./component";
|
|
2
|
+
export * from "./types";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { BaseInputElementProps, InputLabel } from "..";
|
|
2
|
+
/** Date input conponent props type */
|
|
3
|
+
export interface DateProps extends Omit<BaseInputElementProps<Date | undefined>, "placeholder"> {
|
|
4
|
+
/** Label configuration */
|
|
5
|
+
label: InputLabel;
|
|
6
|
+
/** Focus out event handler */
|
|
7
|
+
onBlur?: () => void;
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAEvD,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC;IAC3F,0BAA0B;IAC1B,KAAK,EAAE,UAAU,CAAC;IAElB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|