@alxgrn/telefrag-ui 0.0.46 → 0.0.47

package/dist/components/form/form/Form.js

@@ -35,7 +35,8 @@ import l from "../../ui/block/Block.js";
 /* empty css                         */
 /* empty css                        */
 /* empty css                           */
-const Ee = ({
+import "../../../index.es-CZnvHQxj.js";
+const Ie = ({
   info: d,
   error: k,
   success: b,
@@ -162,6 +163,6 @@ const Ee = ({
   ] });
 };
 export {
-  Ee as Form,
-  Ee as default
+  Ie as Form,
+  Ie as default
 };

package/dist/components/form/image/Image.js

@@ -33,7 +33,8 @@ import j from "../../icons/Trash.js";
 /* empty css                         */
 /* empty css                        */
 /* empty css                           */
-const cr = ({
+import "../../../index.es-CZnvHQxj.js";
+const gr = ({
   id: u,
   value: o,
   text: l,
@@ -100,6 +101,6 @@ const cr = ({
   ) });
 };
 export {
-  cr as Image,
-  cr as default
+  gr as Image,
+  gr as default
 };

package/dist/components/layout/Layout.js

@@ -29,8 +29,9 @@ import "react-dom";
 import { Sidebar as c } from "../ui/sidebar/Sidebar.js";
 /* empty css                      */
 /* empty css                        */
+import "../../index.es-CZnvHQxj.js";
 import b from "./MainMenu.js";
-const X = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick: r }) => {
+const Y = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick: r }) => {
   const [a, t] = n(!1);
   return /* @__PURE__ */ f("div", { className: "Layout", children: [
     /* @__PURE__ */ o(
@@ -62,5 +63,5 @@ const X = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick:
   ] });
 };
 export {
-  X as default
+  Y as default
 };

package/dist/components/layout/Page.js

@@ -30,7 +30,8 @@ import { Sidebar as n } from "../ui/sidebar/Sidebar.js";
 /* empty css                      */
 /* empty css                     */
 /* empty css                        */
-const L = ({ header: t, children: p, sidebar: r, isSidebarVisible: e = !1, onSidebarClose: m }) => /* @__PURE__ */ o("div", { className: "Page", children: [
+import "../../index.es-CZnvHQxj.js";
+const M = ({ header: t, children: p, sidebar: r, isSidebarVisible: e = !1, onSidebarClose: m }) => /* @__PURE__ */ o("div", { className: "Page", children: [
   t && /* @__PURE__ */ i(a, { children: t }),
   /* @__PURE__ */ o("div", { className: "PageBody", children: [
     /* @__PURE__ */ i("div", { className: "PageContent", children: p }),
@@ -49,5 +50,5 @@ const L = ({ header: t, children: p, sidebar: r, isSidebarVisible: e = !1, onSid
   )
 ] });
 export {
-  L as default
+  M as default
 };

package/dist/components/ui/infinitescroll/InfiniteScroll.d.ts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+type Props = {
+    dataLength: number;
+    loadMore: () => void;
+    hasMore: boolean;
+    loader?: ReactNode;
+    endMessage?: ReactNode;
+    scrollThreshold?: number | string;
+    className?: string;
+    style?: object;
+};
+export declare const MyInfiniteScroll: FC<PropsWithChildren<Props>>;
+export default MyInfiniteScroll;

package/dist/components/ui/infinitescroll/InfiniteScroll.js

@@ -0,0 +1,30 @@
+import { jsx as p } from "react/jsx-runtime";
+import { I as s } from "../../../index.es-CZnvHQxj.js";
+const c = ({
+  dataLength: o,
+  children: t,
+  loadMore: r,
+  hasMore: i,
+  loader: n,
+  endMessage: e,
+  scrollThreshold: f = "200px",
+  className: l,
+  style: m
+}) => /* @__PURE__ */ p(
+  s,
+  {
+    dataLength: o,
+    next: r,
+    hasMore: i,
+    loader: n,
+    endMessage: e,
+    className: l,
+    style: m,
+    scrollThreshold: f,
+    children: t
+  }
+);
+export {
+  c as MyInfiniteScroll,
+  c as default
+};

package/dist/index.es-CZnvHQxj.js

@@ -0,0 +1,176 @@
+import h, { Component as T } from "react";
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+var u = function(o, r) {
+  return u = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(t, e) {
+    t.__proto__ = e;
+  } || function(t, e) {
+    for (var n in e) e.hasOwnProperty(n) && (t[n] = e[n]);
+  }, u(o, r);
+};
+function S(o, r) {
+  u(o, r);
+  function t() {
+    this.constructor = o;
+  }
+  o.prototype = r === null ? Object.create(r) : (t.prototype = r.prototype, new t());
+}
+var a = function() {
+  return a = Object.assign || function(r) {
+    for (var t, e = 1, n = arguments.length; e < n; e++) {
+      t = arguments[e];
+      for (var i in t) Object.prototype.hasOwnProperty.call(t, i) && (r[i] = t[i]);
+    }
+    return r;
+  }, a.apply(this, arguments);
+};
+function _(o, r, t, e) {
+  var n, i = !1, s = 0;
+  function p() {
+    n && clearTimeout(n);
+  }
+  function g() {
+    p(), i = !0;
+  }
+  typeof r != "boolean" && (e = t, t = r, r = void 0);
+  function f() {
+    var w = this, d = Date.now() - s, E = arguments;
+    if (i)
+      return;
+    function c() {
+      s = Date.now(), t.apply(w, E);
+    }
+    function y() {
+      n = void 0;
+    }
+    e && !n && c(), p(), e === void 0 && d > o ? c() : r !== !0 && (n = setTimeout(e ? y : c, e === void 0 ? o - d : o));
+  }
+  return f.cancel = g, f;
+}
+var l = {
+  Pixel: "Pixel",
+  Percent: "Percent"
+}, m = {
+  unit: l.Percent,
+  value: 0.8
+};
+function v(o) {
+  return typeof o == "number" ? {
+    unit: l.Percent,
+    value: o * 100
+  } : typeof o == "string" ? o.match(/^(\d*(\.\d+)?)px$/) ? {
+    unit: l.Pixel,
+    value: parseFloat(o)
+  } : o.match(/^(\d*(\.\d+)?)%$/) ? {
+    unit: l.Percent,
+    value: parseFloat(o)
+  } : (console.warn('scrollThreshold format is invalid. Valid formats: "120px", "50%"...'), m) : (console.warn("scrollThreshold should be string or number"), m);
+}
+var D = (
+  /** @class */
+  function(o) {
+    S(r, o);
+    function r(t) {
+      var e = o.call(this, t) || this;
+      return e.lastScrollTop = 0, e.actionTriggered = !1, e.startY = 0, e.currentY = 0, e.dragging = !1, e.maxPullDownDistance = 0, e.getScrollableTarget = function() {
+        return e.props.scrollableTarget instanceof HTMLElement ? e.props.scrollableTarget : typeof e.props.scrollableTarget == "string" ? document.getElementById(e.props.scrollableTarget) : (e.props.scrollableTarget === null && console.warn(`You are trying to pass scrollableTarget but it is null. This might
+        happen because the element may not have been added to DOM yet.
+        See https://github.com/ankeetmaini/react-infinite-scroll-component/issues/59 for more info.
+      `), null);
+      }, e.onStart = function(n) {
+        e.lastScrollTop || (e.dragging = !0, n instanceof MouseEvent ? e.startY = n.pageY : n instanceof TouchEvent && (e.startY = n.touches[0].pageY), e.currentY = e.startY, e._infScroll && (e._infScroll.style.willChange = "transform", e._infScroll.style.transition = "transform 0.2s cubic-bezier(0,0,0.31,1)"));
+      }, e.onMove = function(n) {
+        e.dragging && (n instanceof MouseEvent ? e.currentY = n.pageY : n instanceof TouchEvent && (e.currentY = n.touches[0].pageY), !(e.currentY < e.startY) && (e.currentY - e.startY >= Number(e.props.pullDownToRefreshThreshold) && e.setState({
+          pullToRefreshThresholdBreached: !0
+        }), !(e.currentY - e.startY > e.maxPullDownDistance * 1.5) && e._infScroll && (e._infScroll.style.overflow = "visible", e._infScroll.style.transform = "translate3d(0px, " + (e.currentY - e.startY) + "px, 0px)")));
+      }, e.onEnd = function() {
+        e.startY = 0, e.currentY = 0, e.dragging = !1, e.state.pullToRefreshThresholdBreached && (e.props.refreshFunction && e.props.refreshFunction(), e.setState({
+          pullToRefreshThresholdBreached: !1
+        })), requestAnimationFrame(function() {
+          e._infScroll && (e._infScroll.style.overflow = "auto", e._infScroll.style.transform = "none", e._infScroll.style.willChange = "unset");
+        });
+      }, e.onScrollListener = function(n) {
+        typeof e.props.onScroll == "function" && setTimeout(function() {
+          return e.props.onScroll && e.props.onScroll(n);
+        }, 0);
+        var i = e.props.height || e._scrollableNode ? n.target : document.documentElement.scrollTop ? document.documentElement : document.body;
+        if (!e.actionTriggered) {
+          var s = e.props.inverse ? e.isElementAtTop(i, e.props.scrollThreshold) : e.isElementAtBottom(i, e.props.scrollThreshold);
+          s && e.props.hasMore && (e.actionTriggered = !0, e.setState({ showLoader: !0 }), e.props.next && e.props.next()), e.lastScrollTop = i.scrollTop;
+        }
+      }, e.state = {
+        showLoader: !1,
+        pullToRefreshThresholdBreached: !1,
+        prevDataLength: t.dataLength
+      }, e.throttledOnScrollListener = _(150, e.onScrollListener).bind(e), e.onStart = e.onStart.bind(e), e.onMove = e.onMove.bind(e), e.onEnd = e.onEnd.bind(e), e;
+    }
+    return r.prototype.componentDidMount = function() {
+      if (typeof this.props.dataLength > "u")
+        throw new Error('mandatory prop "dataLength" is missing. The prop is needed when loading more content. Check README.md for usage');
+      if (this._scrollableNode = this.getScrollableTarget(), this.el = this.props.height ? this._infScroll : this._scrollableNode || window, this.el && this.el.addEventListener("scroll", this.throttledOnScrollListener), typeof this.props.initialScrollY == "number" && this.el && this.el instanceof HTMLElement && this.el.scrollHeight > this.props.initialScrollY && this.el.scrollTo(0, this.props.initialScrollY), this.props.pullDownToRefresh && this.el && (this.el.addEventListener("touchstart", this.onStart), this.el.addEventListener("touchmove", this.onMove), this.el.addEventListener("touchend", this.onEnd), this.el.addEventListener("mousedown", this.onStart), this.el.addEventListener("mousemove", this.onMove), this.el.addEventListener("mouseup", this.onEnd), this.maxPullDownDistance = this._pullDown && this._pullDown.firstChild && this._pullDown.firstChild.getBoundingClientRect().height || 0, this.forceUpdate(), typeof this.props.refreshFunction != "function"))
+        throw new Error(`Mandatory prop "refreshFunction" missing.
+          Pull Down To Refresh functionality will not work
+          as expected. Check README.md for usage'`);
+    }, r.prototype.componentWillUnmount = function() {
+      this.el && (this.el.removeEventListener("scroll", this.throttledOnScrollListener), this.props.pullDownToRefresh && (this.el.removeEventListener("touchstart", this.onStart), this.el.removeEventListener("touchmove", this.onMove), this.el.removeEventListener("touchend", this.onEnd), this.el.removeEventListener("mousedown", this.onStart), this.el.removeEventListener("mousemove", this.onMove), this.el.removeEventListener("mouseup", this.onEnd)));
+    }, r.prototype.componentDidUpdate = function(t) {
+      this.props.dataLength !== t.dataLength && (this.actionTriggered = !1, this.setState({
+        showLoader: !1
+      }));
+    }, r.getDerivedStateFromProps = function(t, e) {
+      var n = t.dataLength !== e.prevDataLength;
+      return n ? a(a({}, e), { prevDataLength: t.dataLength }) : null;
+    }, r.prototype.isElementAtTop = function(t, e) {
+      e === void 0 && (e = 0.8);
+      var n = t === document.body || t === document.documentElement ? window.screen.availHeight : t.clientHeight, i = v(e);
+      return i.unit === l.Pixel ? t.scrollTop <= i.value + n - t.scrollHeight + 1 : t.scrollTop <= i.value / 100 + n - t.scrollHeight + 1;
+    }, r.prototype.isElementAtBottom = function(t, e) {
+      e === void 0 && (e = 0.8);
+      var n = t === document.body || t === document.documentElement ? window.screen.availHeight : t.clientHeight, i = v(e);
+      return i.unit === l.Pixel ? t.scrollTop + n >= t.scrollHeight - i.value : t.scrollTop + n >= i.value / 100 * t.scrollHeight;
+    }, r.prototype.render = function() {
+      var t = this, e = a({ height: this.props.height || "auto", overflow: "auto", WebkitOverflowScrolling: "touch" }, this.props.style), n = this.props.hasChildren || !!(this.props.children && this.props.children instanceof Array && this.props.children.length), i = this.props.pullDownToRefresh && this.props.height ? { overflow: "auto" } : {};
+      return h.createElement(
+        "div",
+        { style: i, className: "infinite-scroll-component__outerdiv" },
+        h.createElement(
+          "div",
+          { className: "infinite-scroll-component " + (this.props.className || ""), ref: function(s) {
+            return t._infScroll = s;
+          }, style: e },
+          this.props.pullDownToRefresh && h.createElement(
+            "div",
+            { style: { position: "relative" }, ref: function(s) {
+              return t._pullDown = s;
+            } },
+            h.createElement("div", { style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: -1 * this.maxPullDownDistance
+            } }, this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent)
+          ),
+          this.props.children,
+          !this.state.showLoader && !n && this.props.hasMore && this.props.loader,
+          this.state.showLoader && this.props.hasMore && this.props.loader,
+          !this.props.hasMore && this.props.endMessage
+        )
+      );
+    }, r;
+  }(T)
+);
+export {
+  D as I
+};

package/dist/main.d.ts

@@ -32,6 +32,7 @@ import { default as Layout } from './components/layout/Layout';
 import { MainMenuItem } from './components/layout/MainMenu';
 import { default as Page } from './components/layout/Page';
 import { default as PageHeader } from './components/layout/PageHeader';
+import { MyInfiniteScroll as InfiniteScroll } from './components/ui/infinitescroll/InfiniteScroll';
 import * as Icons from './components/icons';
-export { Form, Date, Time, Files, Image, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Overlay, Popup, Portal, Message, Alert, Confirm, Prompt, Sidebar, Editable, Layout, Page, PageHeader, Icons, };
+export { Form, Date, Time, Files, Image, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Overlay, Popup, Portal, Message, Alert, Confirm, Prompt, Sidebar, Editable, Layout, Page, PageHeader, Icons, InfiniteScroll, };
 export type { FormData, MainMenuItem, MenuItem, ModalProps, ButtonType, CheckboxListOption, RadioListOption, RadioListValue, SelectOption, };

package/dist/main.js

@@ -2,18 +2,18 @@ import './assets/Page.css';/* empty css              */
 import { Form as t } from "./components/form/form/Form.js";
 import { default as f } from "./components/form/form/FormRow.js";
 import { default as p } from "./components/form/form/FormCol.js";
-import { default as l } from "./components/form/date/Date.js";
-import { default as s } from "./components/form/date/DatePicker.js";
+import { default as x } from "./components/form/date/Date.js";
+import { default as d } from "./components/form/date/DatePicker.js";
 import { default as i } from "./components/form/time/Time.js";
-import { Files as P } from "./components/form/files/Files.js";
+import { Files as c } from "./components/form/files/Files.js";
 import { Image as b } from "./components/form/image/Image.js";
-import { default as g } from "./components/form/input/Input.js";
-import { default as C } from "./components/form/label/Label.js";
-import { RadioList as I } from "./components/form/radio/RadioList.js";
-import { Button as h } from "./components/form/button/Button.js";
-import { Select as B } from "./components/form/select/Select.js";
-import { default as H } from "./components/form/hidden/Hidden.js";
-import { default as S } from "./components/form/checkbox/Checkbox.js";
+import { default as I } from "./components/form/input/Input.js";
+import { default as k } from "./components/form/label/Label.js";
+import { RadioList as L } from "./components/form/radio/RadioList.js";
+import { Button as S } from "./components/form/button/Button.js";
+import { Select as h } from "./components/form/select/Select.js";
+import { default as D } from "./components/form/hidden/Hidden.js";
+import { default as R } from "./components/form/checkbox/Checkbox.js";
 import { CheckboxList as w } from "./components/form/checkbox/CheckboxList.js";
 import { default as E } from "./components/form/fieldset/Fieldset.js";
 import { Menu as T } from "./components/ui/menu/Menu.js";
@@ -29,31 +29,33 @@ import { default as eo } from "./components/ui/confirm/Confirm.js";
 import { default as to } from "./components/ui/prompt/Prompt.js";
 import { Sidebar as fo } from "./components/ui/sidebar/Sidebar.js";
 import { default as po } from "./components/ui/editable/Editable.js";
-import { default as lo } from "./components/layout/Layout.js";
+import { default as xo } from "./components/layout/Layout.js";
 import { default as uo } from "./components/layout/Page.js";
 import { default as no } from "./components/layout/PageHeader.js";
-import { i as co } from "./index-2Dtbwxm_.js";
+import { i as Po } from "./index-2Dtbwxm_.js";
+import { MyInfiniteScroll as Fo } from "./components/ui/infinitescroll/InfiniteScroll.js";
 export {
   $ as Alert,
   q as Block,
-  h as Button,
-  S as Checkbox,
+  S as Button,
+  R as Checkbox,
   w as CheckboxList,
   eo as Confirm,
-  l as Date,
-  s as DatePicker,
+  x as Date,
+  d as DatePicker,
   po as Editable,
   E as Fieldset,
-  P as Files,
+  c as Files,
   t as Form,
   p as FormCol,
   f as FormRow,
-  H as Hidden,
-  co as Icons,
+  D as Hidden,
+  Po as Icons,
   b as Image,
-  g as Input,
-  C as Label,
-  lo as Layout,
+  Fo as InfiniteScroll,
+  I as Input,
+  k as Label,
+  xo as Layout,
   T as Menu,
   Z as Message,
   K as Modal,
@@ -64,8 +66,8 @@ export {
   V as Popup,
   X as Portal,
   to as Prompt,
-  I as RadioList,
-  B as Select,
+  L as RadioList,
+  h as Select,
   fo as Sidebar,
   i as Time
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alxgrn/telefrag-ui",
   "description": "UI library for The Daily Telefrag project",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "private": false,
   "author": "Alexander Fedorov <alex@molner.ru>",
   "license": "Apache-2.0",
@@ -31,6 +31,7 @@
     "react": "^19.0.0",
     "react-children-utilities": "^2.10.0",
     "react-dom": "^19.0.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {