@hortiview/shared-components 0.0.8731 → 0.0.8936

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.
Files changed (5) hide show
  1. package/README.md +3 -1
  2. package/dist/components/FormComponents/FormDatePicker/FormDatePicker.js +76 -71
  3. package/dist/components/HashTabView/HashTabView.d.ts +1 -2
  4. package/dist/components/HashTabView/HashTabView.js +48 -41
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -534,7 +534,9 @@ return <GenericTable<DataType>
534
534
 
535
535
  ### HashTabView
536
536
 
537
- A tab view component, which can use the hash value in the url to render the tab regarding to the hash. For the best experience use `react-router`.
537
+ A tab view component, which can use the hash value in the url to render the tab regarding to the hash.
538
+ Pass `window.location.hash` as hash prop as it is the most reliable hash value.
539
+ When navigating back from a page with a `HashTabView`, the last page without hash will be shown.
538
540
 
539
541
  ```jsx
540
542
  import { HashTabView, HashTab } from '@hortiview/shared-components';
package/dist/components/FormComponents/FormDatePicker/FormDatePicker.js CHANGED
@@ -1,92 +1,97 @@
1
- import { jsx as o, jsxs as Y } from "react/jsx-runtime";
2
- import { Datepicker as w, Divider as M, Padding as U, Button as b } from "@element/react-components";
3
- import { g as j } from "../../../get-UxX31Aph.js";
4
- import { useMemo as s, useState as H } from "react";
5
- import { useFormContext as I, Controller as Q } from "react-hook-form";
6
- import { s as l } from "../../../formDatePicker.module-BV3ma_7y.js";
7
- const $ = (t) => {
8
- const a = new Date(t), u = a.getUTCDate(), f = a.getUTCMonth(), d = a.getUTCFullYear();
9
- return new Date(d, f, u);
1
+ import { jsx as s, jsxs as Y } from "react/jsx-runtime";
2
+ import { Datepicker as M, Divider as U, Padding as b, Button as j } from "@element/react-components";
3
+ import { g as H } from "../../../get-UxX31Aph.js";
4
+ import { useMemo as a, useState as Q } from "react";
5
+ import { useFormContext as $, Controller as B } from "react-hook-form";
6
+ import { s as d } from "../../../formDatePicker.module-BV3ma_7y.js";
7
+ const f = (e) => {
8
+ const i = new Date(e), D = i.getUTCDate(), g = i.getUTCMonth(), m = i.getUTCFullYear();
9
+ return new Date(m, g, D);
10
10
  }, G = ({
11
- propertyName: t,
12
- label: a,
13
- closeLabel: u,
14
- className: f,
15
- minRangeYear: d,
16
- maxRangeYear: g,
17
- locale: h,
18
- rules: i,
19
- ...k
11
+ propertyName: e,
12
+ label: i,
13
+ closeLabel: D,
14
+ className: g,
15
+ minRangeYear: m,
16
+ maxRangeYear: S,
17
+ locale: p,
18
+ rules: c,
19
+ ...P
20
20
  }) => {
21
21
  const {
22
- control: p,
23
- formState: { errors: r, isValidating: x }
24
- } = I(), C = s(
25
- () => i?.required?.value,
26
- [i]
27
- ), S = s(
28
- () => i?.required?.message,
29
- [i]
30
- ), P = s(
31
- () => (/* @__PURE__ */ new Date()).getFullYear() - (d ?? 95),
32
- [d]
33
- ), T = s(
34
- () => (/* @__PURE__ */ new Date()).getFullYear() + (g ?? 15),
35
- [g]
36
- ), m = s(
37
- () => !x && j(r, t) !== void 0,
38
- [r, t, x]
39
- ), v = s(() => ({
40
- valid: !m,
41
- helperTextPersistent: m || C,
22
+ control: T,
23
+ formState: { errors: n, isValidating: C }
24
+ } = $(), h = a(
25
+ () => c?.required?.value,
26
+ [c]
27
+ ), k = a(
28
+ () => c?.required?.message,
29
+ [c]
30
+ ), O = a(
31
+ () => (/* @__PURE__ */ new Date()).getFullYear() - (m ?? 95),
32
+ [m]
33
+ ), v = a(
34
+ () => (/* @__PURE__ */ new Date()).getFullYear() + (S ?? 15),
35
+ [S]
36
+ ), u = a(
37
+ () => !C && H(n, e) !== void 0,
38
+ [n, e, C]
39
+ ), w = a(() => ({
40
+ valid: !u,
41
+ helperTextPersistent: u || h,
42
42
  helperText: (() => {
43
- if (r && r[t]) {
44
- const n = r[t]?.message;
45
- return n || "Invalid input";
43
+ if (n && n[e]) {
44
+ const o = n[e]?.message;
45
+ return o || "Invalid input";
46
46
  }
47
- return S;
47
+ return k;
48
48
  })(),
49
- className: `${l.fromPickerText} ${m ? l.invalid : ""}`
50
- }), [r, S, t, C, m]), [F, D] = H(!1);
51
- return /* @__PURE__ */ o(
52
- Q,
49
+ className: `${d.fromPickerText} ${u ? d.invalid : ""}`
50
+ }), [n, k, e, h, u]), [F, x] = Q(!1);
51
+ return /* @__PURE__ */ s(
52
+ B,
53
53
  {
54
- name: t,
55
- rules: i,
56
- control: p,
57
- render: ({ field: { ref: q, onChange: n, value: c, ...O } }) => /* @__PURE__ */ o("div", { className: l.datePickerContainer, children: /* @__PURE__ */ o(
58
- w,
54
+ name: e,
55
+ rules: c,
56
+ control: T,
57
+ render: ({ field: { ref: I, onChange: o, value: l, ...q } }) => /* @__PURE__ */ s("div", { className: d.datePickerContainer, children: /* @__PURE__ */ s(
58
+ M,
59
59
  {
60
- ...k,
61
- ...O,
62
- className: f ?? "",
63
- value: c,
60
+ ...P,
61
+ ...q,
62
+ className: g ?? "",
63
+ value: l,
64
64
  variant: "outlined",
65
- label: a,
66
- format: (e) => e ? $(e.toISOString()).toLocaleDateString(h ?? "en") : "",
65
+ label: i,
66
+ format: (t) => t ? f(t.toISOString()).toLocaleDateString(p ?? "en") : "",
67
67
  disableClearing: !0,
68
- trailingContent: /* @__PURE__ */ Y("div", { className: l.trailingContent, children: [
69
- /* @__PURE__ */ o(M, {}),
70
- /* @__PURE__ */ o(U, { variant: "dense", children: /* @__PURE__ */ o(b, { label: u, variant: "text", onClick: () => D(!1) }) })
68
+ trailingContent: /* @__PURE__ */ Y("div", { className: d.trailingContent, children: [
69
+ /* @__PURE__ */ s(U, {}),
70
+ /* @__PURE__ */ s(b, { variant: "dense", children: /* @__PURE__ */ s(j, { label: D, variant: "text", onClick: () => x(!1) }) })
71
71
  ] }),
72
72
  onClick: () => {
73
- D(!0);
73
+ x(!0);
74
74
  },
75
- onSelect: (e) => {
76
- n(e), D(!1);
75
+ onSelect: (t) => {
76
+ const r = f(t.toISOString());
77
+ o(r), x(!1);
77
78
  },
78
- onSelectMonth: (e) => {
79
- c && (e.setDate(c.getDate()), n(e));
79
+ onSelectMonth: (t) => {
80
+ const r = f(t.toISOString());
81
+ l && (r.setDate(l.getDate()), o(r));
80
82
  },
81
- onSelectYear: (e) => {
82
- c && (e.setDate(c.getDate()), n(e));
83
+ onSelectYear: (t) => {
84
+ if (l) {
85
+ const r = f(t.toISOString());
86
+ r.setDate(l.getDate()), o(r);
87
+ }
83
88
  },
84
89
  hoisted: !0,
85
- calendarProps: { hoisted: !0, className: l.datePickerCalendar },
86
- minQuickSelectYear: P,
87
- maxQuickSelectYear: T,
90
+ calendarProps: { hoisted: !0, className: d.datePickerCalendar },
91
+ minQuickSelectYear: O,
92
+ maxQuickSelectYear: v,
88
93
  readOnly: !0,
89
- textfieldProps: v,
94
+ textfieldProps: w,
90
95
  alwaysOpen: F
91
96
  }
92
97
  ) })
package/dist/components/HashTabView/HashTabView.d.ts CHANGED
@@ -14,8 +14,7 @@ type HashTabViewProps = {
14
14
  */
15
15
  hasHash?: boolean;
16
16
  /**
17
- * hash of the tab in the url, use react-router to have the best experience (use useLocation and its hash property)
18
- * or if not present the hash from the url like '#myHash'.
17
+ * hash of the tab in the url, use window.location.hash for the most reliable value
19
18
  */
20
19
  hash?: string;
21
20
  /**
package/dist/components/HashTabView/HashTabView.js CHANGED
@@ -1,65 +1,72 @@
1
- import { jsx as r, jsxs as m, Fragment as B } from "react/jsx-runtime";
2
- import { Elevation as b, Group as o, TabBar as y, Tab as I, Padding as N } from "@element/react-components";
3
- import { useState as $ } from "react";
4
- import { u as k } from "../../useBreakpoints-MzTZ0tCT.js";
5
- import { s as n } from "../../HashTabView.module-DUekkiTC.js";
6
- const w = (a, i) => !i || !a ? 0 : a.findIndex((c) => c.hash === i.replace("#", "")) ?? 0, z = ({
7
- tabs: a,
8
- hasHash: i = !0,
9
- hash: c = "",
10
- clusterAlign: h = "start",
11
- hasClusteredTabs: p,
1
+ import { jsx as i, jsxs as m, Fragment as y } from "react/jsx-runtime";
2
+ import { Elevation as I, Group as o, TabBar as N, Tab as $, Padding as b } from "@element/react-components";
3
+ import { useState as k, useEffect as w } from "react";
4
+ import { u as x } from "../../useBreakpoints-MzTZ0tCT.js";
5
+ import { s as r } from "../../HashTabView.module-DUekkiTC.js";
6
+ const u = (n, t) => !t || !n ? 0 : n.findIndex((a) => a.hash === t.replace("#", "")) ?? 0, z = ({
7
+ tabs: n,
8
+ hasHash: t = !0,
9
+ hash: a = "",
10
+ clusterAlign: f = "start",
11
+ hasClusteredTabs: g,
12
12
  children: s,
13
- verticalGap: u = "none",
14
- elevation: g = 0,
15
- backgroundColor: v = "themeBackground",
16
- onChange: f
13
+ verticalGap: v = "none",
14
+ elevation: h = 0,
15
+ backgroundColor: T = "themeBackground",
16
+ onChange: A
17
17
  }) => {
18
- const [l, T] = $(w(a, c)), { isDesktop: d } = k(), A = (e) => {
19
- const t = a[e].hash;
20
- t != null && i && window.history.replaceState(null, "", `#${t}`), T(e), f?.(e);
18
+ const [l, p] = k(u(n, a)), { isDesktop: d } = x();
19
+ w(() => {
20
+ if (!t || !a)
21
+ return;
22
+ const e = u(n, a);
23
+ p(e);
24
+ }, [n, a, t]);
25
+ const B = (e) => {
26
+ const c = n[e].hash;
27
+ c != null && t && window.history.replaceState(null, "", `#${c}`), p(e), A?.(e);
21
28
  };
22
- return /* @__PURE__ */ r(
23
- b,
29
+ return /* @__PURE__ */ i(
30
+ I,
24
31
  {
25
- elevation: g,
26
- className: `${n.elevation} ${v === "none" ? "" : n.themeBackground}`,
27
- children: /* @__PURE__ */ m(o, { direction: "vertical", gap: u, secondaryAlign: "stretch", children: [
28
- /* @__PURE__ */ m(o, { direction: d ? "horizontal" : "vertical", className: n.tabWrapper, children: [
29
- /* @__PURE__ */ r(
30
- y,
32
+ elevation: h,
33
+ className: `${r.elevation} ${T === "none" ? "" : r.themeBackground}`,
34
+ children: /* @__PURE__ */ m(o, { direction: "vertical", gap: v, secondaryAlign: "stretch", children: [
35
+ /* @__PURE__ */ m(o, { direction: d ? "horizontal" : "vertical", className: r.tabWrapper, children: [
36
+ /* @__PURE__ */ i(
37
+ N,
31
38
  {
32
- className: n.tabBar,
33
- clustered: d ? p : !1,
34
- clusterAlign: h,
39
+ className: r.tabBar,
40
+ clustered: d ? g : !1,
41
+ clusterAlign: f,
35
42
  variant: "surface",
36
43
  activeTabIndex: l,
37
- onTabActivated: A,
38
- children: a.map((e, t) => /* @__PURE__ */ r(
39
- I,
44
+ onTabActivated: B,
45
+ children: n.map((e, c) => /* @__PURE__ */ i(
46
+ $,
40
47
  {
41
48
  icon: e.leadingIcon,
42
- className: s ? n.tabButton : "",
43
- active: l === t,
49
+ className: s ? r.tabButton : "",
50
+ active: l === c,
44
51
  children: /* @__PURE__ */ m(o, { gap: "dense", children: [
45
52
  e.title,
46
53
  e.trailingIcon
47
54
  ] })
48
55
  },
49
- `${t}_${e.hash}`
56
+ `${c}_${e.hash}`
50
57
  ))
51
58
  }
52
59
  ),
53
- s ? /* @__PURE__ */ r(
54
- N,
60
+ s ? /* @__PURE__ */ i(
61
+ b,
55
62
  {
56
63
  variant: "dense",
57
- className: d ? n.childContainer : n.childContainerPhone,
58
- children: /* @__PURE__ */ r(o, { gap: "dense", primaryAlign: "center", secondaryAlign: "center", children: s })
64
+ className: d ? r.childContainer : r.childContainerPhone,
65
+ children: /* @__PURE__ */ i(o, { gap: "dense", primaryAlign: "center", secondaryAlign: "center", children: s })
59
66
  }
60
- ) : /* @__PURE__ */ r(B, {})
67
+ ) : /* @__PURE__ */ i(y, {})
61
68
  ] }),
62
- a[l]?.component
69
+ n[l]?.component
63
70
  ] })
64
71
  }
65
72
  );
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.8731",
4
+ "version": "0.0.8936",
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>",