@hortiview/shared-components 0.0.7897 → 0.0.8063
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AlertBanner/AlertBanner.js +1 -1
- package/dist/components/AlertBanner/AlertBanner.test.js +1 -1
- package/dist/components/BaseView/BaseView.js +1 -1
- package/dist/components/BaseView/BaseView.test.js +1 -1
- package/dist/components/BasicHeading/BasicHeading.js +1 -1
- package/dist/components/DeleteModal/DeleteModal.js +1 -1
- package/dist/components/Filter/Filter.js +1 -1
- package/dist/components/Filter/Filter.test.js +1 -1
- package/dist/components/FormComponents/FormSelect/FormSelect.d.ts +1 -3
- package/dist/components/GenericTable/GenericTable.js +1 -1
- package/dist/components/GenericTable/GenericTable.test.js +1 -1
- package/dist/components/HashTabView/HashTabView.js +1 -1
- package/dist/components/InfoGroup/InfoGroup.js +1 -1
- package/dist/hooks/useBreakpoints.d.ts +20 -1
- package/dist/hooks/useBreakpoints.js +3 -2
- package/dist/hooks/useBreakpoints.test.js +1 -1
- package/dist/main.js +1 -1
- package/dist/useBreakpoints-MzTZ0tCT.js +45 -0
- package/package.json +1 -1
- package/dist/useBreakpoints-BNeVhjjZ.js +0 -33
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as r, Fragment as l, jsxs as c } from "react/jsx-runtime";
|
|
2
2
|
import { Group as m, TypoBody as p } from "@element/react-components";
|
|
3
|
-
import { u as d } from "../../useBreakpoints-
|
|
3
|
+
import { u as d } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
4
4
|
import { s as o } from "../../alertBanner.module-BPiKN0gh.js";
|
|
5
5
|
const h = ({
|
|
6
6
|
text: e,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as e, Fragment as m } from "react/jsx-runtime";
|
|
2
2
|
import { a as t, s } from "../../react.esm-Dy4VzU4L.js";
|
|
3
|
-
import { a as l } from "../../useBreakpoints-
|
|
3
|
+
import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
4
4
|
import { AlertBanner as n } from "./AlertBanner.js";
|
|
5
5
|
import { d as c, b as p, t as r, g as o, v as a } from "../../vi.JYQecGiw-BbUbJcT8.js";
|
|
6
6
|
c("AlertBanner Test", () => {
|
|
@@ -5,7 +5,7 @@ import { BasicHeading as u } from "../BasicHeading/BasicHeading.js";
|
|
|
5
5
|
import { EmptyView as L } from "../EmptyView/EmptyView.js";
|
|
6
6
|
import { ListArea as W } from "../ListArea/ListArea.js";
|
|
7
7
|
import { VerticalDivider as A } from "../VerticalDivider/VerticalDivider.js";
|
|
8
|
-
import { u as V } from "../../useBreakpoints-
|
|
8
|
+
import { u as V } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
9
9
|
import { s as r } from "../../baseView.module-uWbm_a5f.js";
|
|
10
10
|
const C = ({
|
|
11
11
|
action: c,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as a, Fragment as s } from "react/jsx-runtime";
|
|
2
2
|
import { a as r, s as e, f as p } from "../../react.esm-Dy4VzU4L.js";
|
|
3
|
-
import { a as l } from "../../useBreakpoints-
|
|
3
|
+
import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
4
4
|
import { BaseView as i } from "./BaseView.js";
|
|
5
5
|
import { d as u, b as m, t as n, g as t, v as c } from "../../vi.JYQecGiw-BbUbJcT8.js";
|
|
6
6
|
u("BaseView Test", () => {
|
|
@@ -2,7 +2,7 @@ import { jsxs as s, jsx as t } from "react/jsx-runtime";
|
|
|
2
2
|
import { TypoDisplay as g, TypoBody as N, Icon as I } from "@element/react-components";
|
|
3
3
|
import { I as x } from "../../Iconify-CY9lZjFd.js";
|
|
4
4
|
import { AvailableCustomIcons as B } from "../../enums/AvailableCustomIcons.js";
|
|
5
|
-
import { u as C } from "../../useBreakpoints-
|
|
5
|
+
import { u as C } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
6
6
|
import { OverflowTooltip as T } from "../OverflowTooltip/OverflowTooltip.js";
|
|
7
7
|
import { s as e } from "../../basicHeading.module-BYb8xvuk.js";
|
|
8
8
|
const $ = ({ icon: i }) => i ? typeof i != "string" ? /* @__PURE__ */ t("div", { className: e.iconContainer, children: i }) : i in B ? /* @__PURE__ */ t(
|
|
@@ -2,7 +2,7 @@ import { jsx as r, jsxs as p, Fragment as s } from "react/jsx-runtime";
|
|
|
2
2
|
import { Button as u, Group as c, Icon as D, TypoBody as t } from "@element/react-components";
|
|
3
3
|
import { uniqueId as N } from "lodash";
|
|
4
4
|
import { AvailableCustomIcons as S } from "../../enums/AvailableCustomIcons.js";
|
|
5
|
-
import { u as x } from "../../useBreakpoints-
|
|
5
|
+
import { u as x } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
6
6
|
import { I as M } from "../../Iconify-CY9lZjFd.js";
|
|
7
7
|
import { Modal as j } from "../Modal/Modal.js";
|
|
8
8
|
import { s as n } from "../../deleteModal.module-Ds3MDzdl.js";
|
|
@@ -2,7 +2,7 @@ import { jsx as t, jsxs as B, Fragment as I } from "react/jsx-runtime";
|
|
|
2
2
|
import { Group as y, Button as h, Select as T, Switch as W, IconButton as j, NotificationBadge as b } from "@element/react-components";
|
|
3
3
|
import { useState as v } from "react";
|
|
4
4
|
import { s as c } from "../../genericTable.module-Dk3yy2S3.js";
|
|
5
|
-
import { u as A } from "../../useBreakpoints-
|
|
5
|
+
import { u as A } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
6
6
|
import "../../alertBanner.module-BPiKN0gh.js";
|
|
7
7
|
import { I as z } from "../../Iconify-CY9lZjFd.js";
|
|
8
8
|
import "../../react-tooltip.min-BzHiZW8k.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { a, s as t, f as c, t as u, w as d } from "../../react.esm-Dy4VzU4L.js";
|
|
3
|
-
import { a as s } from "../../useBreakpoints-
|
|
3
|
+
import { a as s } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
4
4
|
import { Filter as T } from "./Filter.js";
|
|
5
5
|
import { v as x, b as f, d as y, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
|
|
6
6
|
const o = x.fn();
|
|
@@ -4,7 +4,7 @@ import { FieldPath, FieldValues, Path, RegisterOptions } from 'react-hook-form';
|
|
|
4
4
|
/**
|
|
5
5
|
* a generic FormSelector property type. the generic T represents the interface, which is used in the form, like {@link CreateOrganizationDto}
|
|
6
6
|
*/
|
|
7
|
-
type FormSelectProps<T extends FieldValues> = Omit<SelectProps, 'className' | 'clearable' | 'disabled' | 'helperText' | 'helperTextPersistent' | 'hidden' | 'hoisted' | 'label' | 'menuMaxHeight' | 'multi' | 'multiSelect' | '
|
|
7
|
+
type FormSelectProps<T extends FieldValues> = Omit<SelectProps, 'className' | 'clearable' | 'disabled' | 'helperText' | 'helperTextPersistent' | 'hidden' | 'hoisted' | 'label' | 'menuMaxHeight' | 'multi' | 'multiSelect' | 'options' | 'searchable' | 'textKey' | 'valid' | 'value' | 'valueKey' | 'variant'> & {
|
|
8
8
|
/** the name of the property in the form */
|
|
9
9
|
propertyName: Path<T>;
|
|
10
10
|
/** the label of the select */
|
|
@@ -27,8 +27,6 @@ type FormSelectProps<T extends FieldValues> = Omit<SelectProps, 'className' | 'c
|
|
|
27
27
|
clearable?: boolean;
|
|
28
28
|
/** if true, the select allows the user to search for options */
|
|
29
29
|
searchable?: boolean;
|
|
30
|
-
/** a message if no options a present */
|
|
31
|
-
noOptionsMessage?: string;
|
|
32
30
|
/**
|
|
33
31
|
* the rules for the picker
|
|
34
32
|
* @default undefined
|
|
@@ -2,7 +2,7 @@ import { jsx as r, jsxs as B } from "react/jsx-runtime";
|
|
|
2
2
|
import { Elevation as D, Table as G, TableTopBar as u, Group as m, Padding as W, TypoDisplay as k, TypoSubtitle as C } from "@element/react-components";
|
|
3
3
|
import { Fragment as j } from "react";
|
|
4
4
|
import { a as t } from "../../genericTable.module-Dk3yy2S3.js";
|
|
5
|
-
import { u as x } from "../../useBreakpoints-
|
|
5
|
+
import { u as x } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
6
6
|
import "../../alertBanner.module-BPiKN0gh.js";
|
|
7
7
|
import "../../iconify.module-C89oaw5b.js";
|
|
8
8
|
import "../../isArray-Ca4KR8TK.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as a, jsxs as B } from "react/jsx-runtime";
|
|
2
2
|
import { a as o, s as e } from "../../react.esm-Dy4VzU4L.js";
|
|
3
|
-
import { a as m } from "../../useBreakpoints-
|
|
3
|
+
import { a as m } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
4
4
|
import { GenericTable as s } from "./GenericTable.js";
|
|
5
5
|
import { d as h, v as r, t as i, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
|
|
6
6
|
h("GenericTable Test", () => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as r, jsxs as d, Fragment as I } from "react/jsx-runtime";
|
|
2
2
|
import { Elevation as N, Group as c, TabBar as b, Tab as k, Padding as x } from "@element/react-components";
|
|
3
3
|
import { useState as y, useEffect as $ } from "react";
|
|
4
|
-
import { u as w } from "../../useBreakpoints-
|
|
4
|
+
import { u as w } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
5
5
|
import { s as a } from "../../HashTabView.module-DUekkiTC.js";
|
|
6
6
|
const h = (n, t) => !t || !n ? 0 : n.findIndex((i) => i.hash === t.replace("#", "")) ?? 0, D = ({
|
|
7
7
|
tabs: n,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as d, Fragment as p, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { Divider as h, Group as s, TypoCaption as g, TypoSubtitle as v } from "@element/react-components";
|
|
3
3
|
import { useMemo as y, Fragment as A } from "react";
|
|
4
|
-
import { u } from "../../useBreakpoints-
|
|
4
|
+
import { u } from "../../useBreakpoints-MzTZ0tCT.js";
|
|
5
5
|
import { s as l } from "../../infoGroup.module-Cxw88dfC.js";
|
|
6
6
|
const w = ({ fields: r, bold: i }) => {
|
|
7
7
|
const { isDesktop: a } = u(), e = !!r.length && Array.isArray(r.at(0)), n = y(() => e && a ? r.map((o, c) => /* @__PURE__ */ d(p, { children: [
|
|
@@ -19,9 +19,28 @@
|
|
|
19
19
|
* - isDesktopNavbar: lg-nav, xl-nav, xxl-nav
|
|
20
20
|
* @returns {Object} An object with the current breakpoint
|
|
21
21
|
*/
|
|
22
|
-
export declare const useBreakpoints: (
|
|
22
|
+
export declare const useBreakpoints: () => {
|
|
23
23
|
isMobile: boolean;
|
|
24
24
|
isTablet: boolean;
|
|
25
25
|
isDesktop: boolean;
|
|
26
26
|
isDesktopNavbar: boolean;
|
|
27
27
|
};
|
|
28
|
+
/**
|
|
29
|
+
* a hook that returns all breakpoints that are in the range of the desktop size (greater than 840px)
|
|
30
|
+
* - lg: 840-1023px
|
|
31
|
+
* - xl: 1024-1439px
|
|
32
|
+
* - xxl: 1440px and up
|
|
33
|
+
* - lg-nav: (840 + 256) - (1023 + 256)px
|
|
34
|
+
* - xl-nav: (1024 + 256) - (1439 + 256)px
|
|
35
|
+
* - xxl-nav: (1440 + 256)px and up
|
|
36
|
+
* @param navBarWidth
|
|
37
|
+
* @returns
|
|
38
|
+
*/
|
|
39
|
+
export declare const useDesktopBreakpoints: (navBarWidth?: number) => {
|
|
40
|
+
isLgNavbar: boolean;
|
|
41
|
+
isXlNavbar: boolean;
|
|
42
|
+
isXxlNavbar: boolean;
|
|
43
|
+
isLg: boolean;
|
|
44
|
+
isXl: boolean;
|
|
45
|
+
isXxl: boolean;
|
|
46
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as t, w as s } from "../react.esm-Dy4VzU4L.js";
|
|
2
|
-
import { u as o } from "../useBreakpoints-
|
|
2
|
+
import { u as o } from "../useBreakpoints-MzTZ0tCT.js";
|
|
3
3
|
import { d as a, t as i, g as r } from "../vi.JYQecGiw-BbUbJcT8.js";
|
|
4
4
|
a("useBreakpoint Test", () => {
|
|
5
5
|
i("returns object", () => {
|
package/dist/main.js
CHANGED
|
@@ -28,7 +28,7 @@ import { FormSlider as rr } from "./components/FormComponents/FormSlider/FormSli
|
|
|
28
28
|
import { FormText as er } from "./components/FormComponents/FormText/FormText.js";
|
|
29
29
|
import { AvailableCustomIcons as mr } from "./enums/AvailableCustomIcons.js";
|
|
30
30
|
import { ThemeColor as fr } from "./enums/ThemeColor.js";
|
|
31
|
-
import { u as ir } from "./useBreakpoints-
|
|
31
|
+
import { u as ir } from "./useBreakpoints-MzTZ0tCT.js";
|
|
32
32
|
import { capitalizeFirstLetters as lr } from "./services/UtilService.js";
|
|
33
33
|
export {
|
|
34
34
|
t as AlertBanner,
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { useState as p, useEffect as m } from "react";
|
|
2
|
+
const t = (s) => {
|
|
3
|
+
const [n, i] = p(!1);
|
|
4
|
+
return m(
|
|
5
|
+
() => {
|
|
6
|
+
const e = window.matchMedia(s);
|
|
7
|
+
i(e.matches);
|
|
8
|
+
const a = (o) => i(o.matches);
|
|
9
|
+
return e.addEventListener("change", a), () => e.removeEventListener("change", a);
|
|
10
|
+
},
|
|
11
|
+
[]
|
|
12
|
+
// Empty array ensures effect is only run on mount and unmount
|
|
13
|
+
), n;
|
|
14
|
+
}, h = () => {
|
|
15
|
+
const { isLgNavbar: s, isXlNavbar: n, isXxlNavbar: i, isLg: e, isXl: a, isXxl: o } = c(), r = t("(max-width: 599px)"), d = t("(min-width: 600px) and (max-width: 719px)"), x = t("(min-width: 720px) and (max-width: 839px)");
|
|
16
|
+
return {
|
|
17
|
+
isMobile: r,
|
|
18
|
+
isTablet: d || x,
|
|
19
|
+
isDesktop: e || a || o,
|
|
20
|
+
isDesktopNavbar: s || n || i
|
|
21
|
+
};
|
|
22
|
+
}, c = (s = 256) => {
|
|
23
|
+
const n = t(
|
|
24
|
+
`(min-width: ${840 + s}px) and (max-width: ${1023 + s}px)`
|
|
25
|
+
), i = t(
|
|
26
|
+
`(min-width: ${1024 + s}px) and (max-width: ${1439 + s}px)`
|
|
27
|
+
), e = t(`(min-width: ${1440 + s}px)`), a = t("(min-width: 840px) and (max-width: 1023px)"), o = t("(min-width: 1024px) and (max-width: 1439px)"), r = t("(min-width: 1440px)");
|
|
28
|
+
return {
|
|
29
|
+
isLgNavbar: n,
|
|
30
|
+
isXlNavbar: i,
|
|
31
|
+
isXxlNavbar: e,
|
|
32
|
+
isLg: a,
|
|
33
|
+
isXl: o,
|
|
34
|
+
isXxl: r
|
|
35
|
+
};
|
|
36
|
+
}, w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
37
|
+
__proto__: null,
|
|
38
|
+
useBreakpoints: h,
|
|
39
|
+
useDesktopBreakpoints: c
|
|
40
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
41
|
+
export {
|
|
42
|
+
w as a,
|
|
43
|
+
c as b,
|
|
44
|
+
h as u
|
|
45
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hortiview/shared-components",
|
|
3
3
|
"description": "This is a shared component library. It should used in the HortiView platform and its modules.",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.8063",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
|
|
7
7
|
"author": "Falk Menge <falk.menge.ext@bayer.com>",
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { useState as p, useEffect as r } from "react";
|
|
2
|
-
const t = (s) => {
|
|
3
|
-
const [a, i] = p(!1);
|
|
4
|
-
return r(
|
|
5
|
-
() => {
|
|
6
|
-
const e = window.matchMedia(s);
|
|
7
|
-
i(e.matches);
|
|
8
|
-
const n = (o) => i(o.matches);
|
|
9
|
-
return e.addEventListener("change", n), () => e.removeEventListener("change", n);
|
|
10
|
-
},
|
|
11
|
-
[]
|
|
12
|
-
// Empty array ensures effect is only run on mount and unmount
|
|
13
|
-
), a;
|
|
14
|
-
}, h = (s = 256) => {
|
|
15
|
-
const a = t("(max-width: 599px)"), i = t("(min-width: 600px) and (max-width: 719px)"), e = t("(min-width: 720px) and (max-width: 839px)"), n = t("(min-width: 840px) and (max-width: 1023px)"), o = t("(min-width: 1024px) and (max-width: 1439px)"), d = t("(min-width: 1440px)"), c = t(
|
|
16
|
-
`(min-width: ${840 + s}px) and (max-width: ${1023 + s}px)`
|
|
17
|
-
), x = t(
|
|
18
|
-
`(min-width: ${1024 + s}px) and (max-width: ${1439 + s}px)`
|
|
19
|
-
), m = t(`(min-width: ${1440 + s}px)`);
|
|
20
|
-
return {
|
|
21
|
-
isMobile: a,
|
|
22
|
-
isTablet: i || e,
|
|
23
|
-
isDesktop: n || o || d,
|
|
24
|
-
isDesktopNavbar: c || x || m
|
|
25
|
-
};
|
|
26
|
-
}, u = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
27
|
-
__proto__: null,
|
|
28
|
-
useBreakpoints: h
|
|
29
|
-
}, Symbol.toStringTag, { value: "Module" }));
|
|
30
|
-
export {
|
|
31
|
-
u as a,
|
|
32
|
-
h as u
|
|
33
|
-
};
|