@hortiview/shared-components 0.0.4730 → 0.0.4775

package/README.md

@@ -12,10 +12,19 @@ This is a shared component library. It should used in the HortiView platform and
 
 `yarn add @hortiview/shared-components`
 
+## Prerequisites
+
+This library is based in Bayers element component library. To use it properly you need to install this package first. 
+To get access to this restricted package please contact your Bayer contact person.
+
+After you gain access use `yarn add @element/react-components @element/themes` or `npm i @element/react-components @element/themes` to add the package to your solution.
+
 ## Remarks
 
 For the best experience use [react-router](https://reactrouter.com/en/main) in your solution, because some of the component rely on properties like pathname, hash or components like `Link` out of `react-router`.
 
+Additionally the library provides form components using [react-hook-form](https://react-hook-form.com/get-started). When you want to use these components please install `react-hook-form` before using them.  
+
 ## Available packages:
 
 1. [BaseView](#baseview)
@@ -24,8 +33,15 @@ For the best experience use [react-router](https://reactrouter.com/en/main) in y
 1. [DeleteModal](#deletemodal)
 1. [Disclaimer](#disclaimer)
 1. [EmptyView](#emptyview)
+1. [FormComponents](#formcomponents)
+   1. [FormCheckBox](#formcheckbox)
+   1. [FormDatePicker](#formdatepicker)
+   1. [FormRadio](#formradio)
+   1. [FormSelect](#formselect)
+   1. [FormSlider](#formslider)
+   1. [FormText](#formtext)
 1. [HashTabView](#hashtabview)
-1. [HaederFilter](#headerfilter)
+1. [HeaderFilter](#headerfilter)
 1. [Iconify](#iconify)
 1. [ListArea](#listarea)
 1. [ScrollBar](#scrollbar)
@@ -153,6 +169,188 @@ import { EmptyView } from '@hortiview/shared-components';
 <EmptyView title='No Content' subtitle='nothing' icon='grass' />;
 ```
 
+### FormComponents
+
+The library provides some form components based on [react-hook-form](https://react-hook-form.com/). The components can only be use within a form provided by react-hook-form.
+So please add the package before you use the components.
+
+```
+yarn add react-hook-form
+```
+
+or
+
+```
+npm install react-hook-form
+```
+
+#### FormCheckBox
+
+Provides a checkbox form component
+
+```typescript
+import { FormCheckBox } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ check: boolean }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormCheckBox<{ check: boolean }>
+      propertyName={`check`}
+      label={'My Checkbox'}
+      onChange={() => additionalOnChange()}
+      validate={validateFn}
+    />
+  </form>
+</FormProvider>;
+```
+
+#### FormDatePicker
+
+Provides a datepicker form component
+
+```typescript
+import { FormDatePicker } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ birthday: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormDatePicker<{ birthday: string }>
+      propertyName={'birthday'}
+      label={'user.date-of-birth'}
+      maxRangeYear={0}
+    />
+  </form>
+</FormProvider>;
+```
+
+#### FormRadio
+
+Provides a radio button form component
+
+```typescript
+import { FormRadio } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ radioValue: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+     <FormRadio<{ radioValue: string }>
+        propertyName='radioValue'
+        options={[
+          { value: 'priced', label: 'Priced' },
+          { value: 'free', label: 'Free },
+        ]}
+      />
+  </form>
+</FormProvider>;
+```
+
+#### FormSelect
+
+Provides a select form component
+
+```typescript
+import { FormSelect } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ type: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+const typeOptions = [
+  {
+    id: 1,
+    value: 'Car',
+  },
+  {
+    id: 2,
+    value: 'Bike',
+  },
+];
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormSelect<{ type: string }>
+      propertyName='type'
+      label='Type'
+      options={typeOptions}
+      valueKey='id'
+      textKey='value'
+      requiredText='required'
+      required
+    />
+  </form>
+</FormProvider>;
+```
+
+#### FormSlider
+
+Provides a slider form component
+
+```typescript
+import { FormSlider } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ range: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormSlider<{ range: string }> propertyName='range' minValue={30} maxValue={90} step={30} />
+  </form>
+</FormProvider>;
+```
+
+#### FormText
+
+Provides a text form component
+
+```typescript
+import { FormText } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ address: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormText<{ address: string }>
+      maxLength={200}
+      label='address'
+      propertyName='address'
+      required
+      requiredText='required'
+      textarea
+    />
+  </form>
+</FormProvider>;
+```
+
 ### HashTabView
 
 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`.

package/dist/_baseToString-ByHt83eL.js

@@ -0,0 +1,282 @@
+import { c as v } from "./_commonjsHelpers-CT_km90n.js";
+function G(t, a) {
+  for (var e = -1, r = t == null ? 0 : t.length, n = Array(r); ++e < r; )
+    n[e] = a(t[e], e, t);
+  return n;
+}
+var H = G, N = Array.isArray, E = N, F = typeof v == "object" && v && v.Object === Object && v, A = F, R = A, L = typeof self == "object" && self && self.Object === Object && self, q = R || L || Function("return this")(), f = q, K = f, U = K.Symbol, d = U, b = d, P = Object.prototype, J = P.hasOwnProperty, V = P.toString, h = b ? b.toStringTag : void 0;
+function X(t) {
+  var a = J.call(t, h), e = t[h];
+  try {
+    t[h] = void 0;
+    var r = !0;
+  } catch {
+  }
+  var n = V.call(t);
+  return r && (a ? t[h] = e : delete t[h]), n;
+}
+var Z = X, Y = Object.prototype, k = Y.toString;
+function B(t) {
+  return k.call(t);
+}
+var Q = B, y = d, W = Z, tt = Q, at = "[object Null]", et = "[object Undefined]", C = y ? y.toStringTag : void 0;
+function rt(t) {
+  return t == null ? t === void 0 ? et : at : C && C in Object(t) ? W(t) : tt(t);
+}
+var D = rt;
+function nt(t) {
+  return t != null && typeof t == "object";
+}
+var ot = nt, it = D, st = ot, ct = "[object Symbol]";
+function ht(t) {
+  return typeof t == "symbol" || st(t) && it(t) == ct;
+}
+var vt = ht;
+function lt(t) {
+  var a = typeof t;
+  return t != null && (a == "object" || a == "function");
+}
+var M = lt, pt = D, ut = M, _t = "[object AsyncFunction]", ft = "[object Function]", dt = "[object GeneratorFunction]", gt = "[object Proxy]";
+function $t(t) {
+  if (!ut(t))
+    return !1;
+  var a = pt(t);
+  return a == ft || a == dt || a == _t || a == gt;
+}
+var bt = $t, yt = f, Ct = yt["__core-js_shared__"], mt = Ct, _ = mt, m = function() {
+  var t = /[^.]+$/.exec(_ && _.keys && _.keys.IE_PROTO || "");
+  return t ? "Symbol(src)_1." + t : "";
+}();
+function St(t) {
+  return !!m && m in t;
+}
+var jt = St, Ot = Function.prototype, Tt = Ot.toString;
+function wt(t) {
+  if (t != null) {
+    try {
+      return Tt.call(t);
+    } catch {
+    }
+    try {
+      return t + "";
+    } catch {
+    }
+  }
+  return "";
+}
+var Pt = wt, Dt = bt, Mt = jt, xt = M, zt = Pt, It = /[\\^$.*+?()[\]{}|]/g, Gt = /^\[object .+?Constructor\]$/, Ht = Function.prototype, Nt = Object.prototype, Et = Ht.toString, Ft = Nt.hasOwnProperty, At = RegExp(
+  "^" + Et.call(Ft).replace(It, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+);
+function Rt(t) {
+  if (!xt(t) || Mt(t))
+    return !1;
+  var a = Dt(t) ? At : Gt;
+  return a.test(zt(t));
+}
+var Lt = Rt;
+function qt(t, a) {
+  return t?.[a];
+}
+var Kt = qt, Ut = Lt, Jt = Kt;
+function Vt(t, a) {
+  var e = Jt(t, a);
+  return Ut(e) ? e : void 0;
+}
+var x = Vt, Xt = x, Zt = Xt(Object, "create"), l = Zt, S = l;
+function Yt() {
+  this.__data__ = S ? S(null) : {}, this.size = 0;
+}
+var kt = Yt;
+function Bt(t) {
+  var a = this.has(t) && delete this.__data__[t];
+  return this.size -= a ? 1 : 0, a;
+}
+var Qt = Bt, Wt = l, ta = "__lodash_hash_undefined__", aa = Object.prototype, ea = aa.hasOwnProperty;
+function ra(t) {
+  var a = this.__data__;
+  if (Wt) {
+    var e = a[t];
+    return e === ta ? void 0 : e;
+  }
+  return ea.call(a, t) ? a[t] : void 0;
+}
+var na = ra, oa = l, ia = Object.prototype, sa = ia.hasOwnProperty;
+function ca(t) {
+  var a = this.__data__;
+  return oa ? a[t] !== void 0 : sa.call(a, t);
+}
+var ha = ca, va = l, la = "__lodash_hash_undefined__";
+function pa(t, a) {
+  var e = this.__data__;
+  return this.size += this.has(t) ? 0 : 1, e[t] = va && a === void 0 ? la : a, this;
+}
+var ua = pa, _a = kt, fa = Qt, da = na, ga = ha, $a = ua;
+function i(t) {
+  var a = -1, e = t == null ? 0 : t.length;
+  for (this.clear(); ++a < e; ) {
+    var r = t[a];
+    this.set(r[0], r[1]);
+  }
+}
+i.prototype.clear = _a;
+i.prototype.delete = fa;
+i.prototype.get = da;
+i.prototype.has = ga;
+i.prototype.set = $a;
+var ba = i;
+function ya() {
+  this.__data__ = [], this.size = 0;
+}
+var Ca = ya;
+function ma(t, a) {
+  return t === a || t !== t && a !== a;
+}
+var Sa = ma, ja = Sa;
+function Oa(t, a) {
+  for (var e = t.length; e--; )
+    if (ja(t[e][0], a))
+      return e;
+  return -1;
+}
+var p = Oa, Ta = p, wa = Array.prototype, Pa = wa.splice;
+function Da(t) {
+  var a = this.__data__, e = Ta(a, t);
+  if (e < 0)
+    return !1;
+  var r = a.length - 1;
+  return e == r ? a.pop() : Pa.call(a, e, 1), --this.size, !0;
+}
+var Ma = Da, xa = p;
+function za(t) {
+  var a = this.__data__, e = xa(a, t);
+  return e < 0 ? void 0 : a[e][1];
+}
+var Ia = za, Ga = p;
+function Ha(t) {
+  return Ga(this.__data__, t) > -1;
+}
+var Na = Ha, Ea = p;
+function Fa(t, a) {
+  var e = this.__data__, r = Ea(e, t);
+  return r < 0 ? (++this.size, e.push([t, a])) : e[r][1] = a, this;
+}
+var Aa = Fa, Ra = Ca, La = Ma, qa = Ia, Ka = Na, Ua = Aa;
+function s(t) {
+  var a = -1, e = t == null ? 0 : t.length;
+  for (this.clear(); ++a < e; ) {
+    var r = t[a];
+    this.set(r[0], r[1]);
+  }
+}
+s.prototype.clear = Ra;
+s.prototype.delete = La;
+s.prototype.get = qa;
+s.prototype.has = Ka;
+s.prototype.set = Ua;
+var Ja = s, Va = x, Xa = f, Za = Va(Xa, "Map"), Ya = Za, j = ba, ka = Ja, Ba = Ya;
+function Qa() {
+  this.size = 0, this.__data__ = {
+    hash: new j(),
+    map: new (Ba || ka)(),
+    string: new j()
+  };
+}
+var Wa = Qa;
+function te(t) {
+  var a = typeof t;
+  return a == "string" || a == "number" || a == "symbol" || a == "boolean" ? t !== "__proto__" : t === null;
+}
+var ae = te, ee = ae;
+function re(t, a) {
+  var e = t.__data__;
+  return ee(a) ? e[typeof a == "string" ? "string" : "hash"] : e.map;
+}
+var u = re, ne = u;
+function oe(t) {
+  var a = ne(this, t).delete(t);
+  return this.size -= a ? 1 : 0, a;
+}
+var ie = oe, se = u;
+function ce(t) {
+  return se(this, t).get(t);
+}
+var he = ce, ve = u;
+function le(t) {
+  return ve(this, t).has(t);
+}
+var pe = le, ue = u;
+function _e(t, a) {
+  var e = ue(this, t), r = e.size;
+  return e.set(t, a), this.size += e.size == r ? 0 : 1, this;
+}
+var fe = _e, de = Wa, ge = ie, $e = he, be = pe, ye = fe;
+function c(t) {
+  var a = -1, e = t == null ? 0 : t.length;
+  for (this.clear(); ++a < e; ) {
+    var r = t[a];
+    this.set(r[0], r[1]);
+  }
+}
+c.prototype.clear = de;
+c.prototype.delete = ge;
+c.prototype.get = $e;
+c.prototype.has = be;
+c.prototype.set = ye;
+var Ce = c, z = Ce, me = "Expected a function";
+function g(t, a) {
+  if (typeof t != "function" || a != null && typeof a != "function")
+    throw new TypeError(me);
+  var e = function() {
+    var r = arguments, n = a ? a.apply(this, r) : r[0], o = e.cache;
+    if (o.has(n))
+      return o.get(n);
+    var $ = t.apply(this, r);
+    return e.cache = o.set(n, $) || o, $;
+  };
+  return e.cache = new (g.Cache || z)(), e;
+}
+g.Cache = z;
+var Se = g, je = Se, Oe = 500;
+function Te(t) {
+  var a = je(t, function(r) {
+    return e.size === Oe && e.clear(), r;
+  }), e = a.cache;
+  return a;
+}
+var we = Te, Pe = we, De = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g, Me = /\\(\\)?/g, xe = Pe(function(t) {
+  var a = [];
+  return t.charCodeAt(0) === 46 && a.push(""), t.replace(De, function(e, r, n, o) {
+    a.push(n ? o.replace(Me, "$1") : r || e);
+  }), a;
+}), Ee = xe, O = d, ze = H, Ie = E, Ge = vt, He = 1 / 0, T = O ? O.prototype : void 0, w = T ? T.toString : void 0;
+function I(t) {
+  if (typeof t == "string")
+    return t;
+  if (Ie(t))
+    return ze(t, I) + "";
+  if (Ge(t))
+    return w ? w.call(t) : "";
+  var a = t + "";
+  return a == "0" && 1 / t == -He ? "-0" : a;
+}
+var Fe = I;
+export {
+  Fe as _,
+  vt as a,
+  Ee as b,
+  Ja as c,
+  Ya as d,
+  Ce as e,
+  f,
+  d as g,
+  Sa as h,
+  E as i,
+  D as j,
+  ot as k,
+  A as l,
+  x as m,
+  Pt as n,
+  bt as o,
+  M as p,
+  H as q
+};