oolib 2.42.1 → 2.42.3

package/dist/icons/custom/index.d.ts

@@ -16,5 +16,6 @@ export function BadgeSuperAdmin(props: any): any;
 export function BadgeMod(props: any): any;
 export function BadgeVetted(props: any): any;
 export function IndiaFlag(props: any): any;
+export function NigeriaFlag(props: any): any;
 export function KenyaFlag(props: any): any;
 export function ModalBulbIcon(): any;

package/dist/icons/custom/index.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalBulbIcon = exports.KenyaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.IndexIcon = void 0;
+exports.ModalBulbIcon = exports.KenyaFlag = exports.NigeriaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.IndexIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../themes");
 var comps_1 = require("../../utils/comps");
@@ -91,6 +91,13 @@ var IndiaFlag = function (props) { return (react_1.default.createElement("svg",
         react_1.default.createElement("path", { fill: "#3D58DB", d: "M15 20a5 5 0 1010 0 5 5 0 00-10 0zm8.75 0a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" }),
         react_1.default.createElement("path", { fill: "#3D58DB", d: "M19.993 21.076l-.713 3.9.414-3.943-1.784 3.541 1.509-3.667-2.71 2.896 2.482-3.094-3.416 2.015 3.252-2.269-3.845.971 3.76-1.261-3.963-.151 3.963-.151-3.76-1.262 3.845.972-3.252-2.27 3.415 2.015-2.48-3.093 2.709 2.895-1.509-3.667 1.784 3.542-.414-3.944.713 3.9.714-3.9-.415 3.944 1.784-3.542-1.509 3.667 2.71-2.895-2.481 3.093 3.415-2.015-3.252 2.27 3.845-.972-3.76 1.262 3.963.15-3.963.152 3.76 1.261-3.845-.971 3.252 2.27-3.415-2.016 2.48 3.094-2.709-2.896 1.509 3.668-1.784-3.542.415 3.944-.714-3.901z" })))); };
 exports.IndiaFlag = IndiaFlag;
+var NigeriaFlag = function (props) { return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size || 30, height: props.size || 30, fill: "none", viewBox: "0 0 40 40" },
+    react_1.default.createElement("mask", { id: "mask0_863_1249", style: { maskType: "alpha" }, width: "40", height: "28", x: "0", y: "6", maskUnits: "userSpaceOnUse" },
+        react_1.default.createElement("path", { fill: "#fff", d: "M0 6H40V34H0z" })),
+    react_1.default.createElement("g", { fillRule: "evenodd", clipRule: "evenodd", mask: "url(#mask0_863_1249)" },
+        react_1.default.createElement("path", { fill: "#F7FCFF", d: "M4 6h32v28H4V6z" }),
+        react_1.default.createElement("path", { fill: "#093", d: "M26.25 6H35a5 5 0 015 5v18a5 5 0 01-5 5h-8.75V6zM0 11a5 5 0 015-5h8.75v28H5a5 5 0 01-5-5V11z" })))); };
+exports.NigeriaFlag = NigeriaFlag;
 var KenyaFlag = function (props) { return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size || 40, height: props.size || 40, fill: "none", viewBox: "0 0 40 40" },
     react_1.default.createElement("mask", { id: "mask0_4893_23143", style: { maskType: "alpha" }, width: "40", height: "28", x: "0", y: "6", maskUnits: "userSpaceOnUse" },
         react_1.default.createElement("path", { fill: "#fff", d: "M40 6H0v28h40V6z" })),

package/dist/icons/index.d.ts

@@ -14,6 +14,7 @@ export namespace icons {
     export { UserCirclePlus };
     export { MapPinLine };
     export { WarningCircle };
+    export { HighlighterCircle };
     export { Paperclip };
     export { SpeakerHigh };
     export { ArrowLeft };
@@ -96,6 +97,7 @@ export namespace icons {
     export { BadgeVetted };
     export { IndiaFlag };
     export { KenyaFlag };
+    export { NigeriaFlag };
     export { LightbulbFilament };
     export { ModalBulbIcon };
     export { Keyboard };
@@ -116,6 +118,7 @@ import { User } from "phosphor-react";
 import { UserCirclePlus } from "phosphor-react";
 import { MapPinLine } from "phosphor-react";
 import { WarningCircle } from "phosphor-react";
+import { HighlighterCircle } from "phosphor-react";
 import { Paperclip } from "phosphor-react";
 import { SpeakerHigh } from "phosphor-react";
 import { ArrowLeft } from "phosphor-react";
@@ -198,6 +201,7 @@ import { BadgeMod } from "./custom";
 import { BadgeVetted } from "./custom";
 import { IndiaFlag } from "./custom";
 import { KenyaFlag } from "./custom";
+import { NigeriaFlag } from "./custom";
 import { LightbulbFilament } from "phosphor-react";
 import { ModalBulbIcon } from "./custom";
 import { Keyboard } from "phosphor-react";

package/dist/icons/index.js

@@ -19,6 +19,7 @@ exports.icons = {
     UserCirclePlus: phosphor_react_1.UserCirclePlus,
     MapPinLine: phosphor_react_1.MapPinLine,
     WarningCircle: phosphor_react_1.WarningCircle,
+    HighlighterCircle: phosphor_react_1.HighlighterCircle,
     Paperclip: phosphor_react_1.Paperclip,
     SpeakerHigh: phosphor_react_1.SpeakerHigh,
     ArrowLeft: phosphor_react_1.ArrowLeft,
@@ -102,6 +103,7 @@ exports.icons = {
     BadgeVetted: custom_1.BadgeVetted,
     IndiaFlag: custom_1.IndiaFlag,
     KenyaFlag: custom_1.KenyaFlag,
+    NigeriaFlag: custom_1.NigeriaFlag,
     LightbulbFilament: phosphor_react_1.LightbulbFilament,
     ModalBulbIcon: custom_1.ModalBulbIcon,
     Keyboard: phosphor_react_1.Keyboard,

package/dist/utils/customHooks/useScrollBar.js

@@ -6,48 +6,35 @@ var react_1 = require("react");
  * @summary The hook sets the initial state values of scrollX and scrollIsAtEnd,
  *          and uses an effect to check whether the width of the scrollable element is less than or equal to its parent element's width.
  *          If so, it sets scrollIsAtEnd to true.
- * @returns scrollContainerRef: reference to the scrollable element. You need to pass this reference to the ref attribute of your scrollable element in your component.
- *          scrollX: The current scroll position in pixels, from the left side of the content.
- *          scrollIsAtEnd: A boolean value that indicates whether the scroll bar is at the end of the content.
- *          slide (shift: string): A function that shifts the scroll position by shifting pixels by direction (left/right) string provided.
- *          checkScrollPosition: A function that updates the scrollX and scrollIsAtEnd values based on the current scroll position.
+ * @returns scrollContainerRef: useRef object that can be attached to the container element to enable scrolling
+ *          scrollX: state variable that keeps track of the current horizontal scroll position of container
+ *          slide (string): function that takes a string argument "left" or "right", and adjusts the scroll position of the container accordingly
+ *          scrollIsAtEnd: state (boolean) variable that indicates whether the scroll position of the container is at the end of the scrollable content
+ *          scrollIsAtStart: state variable that indicates whether the scroll position of the container is at the start of the scrollable content
  */
 var useScrollBar = function () {
     var _a = (0, react_1.useState)(0), scrollX = _a[0], setScrollX = _a[1];
     var _b = (0, react_1.useState)(false), scrollIsAtEnd = _b[0], setScrollIsAtEnd = _b[1];
     var scrollContainerRef = (0, react_1.useRef)(null);
     var slide = function (direction) {
-        var _a = scrollContainerRef.current, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth, scrollLeft = _a.scrollLeft;
-        // const containerWidth = scrollContainerRef.current.parentNode.getBoundingClientRect().width;
+        var _a = scrollContainerRef.current, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth;
         if (direction === "left") {
-            var newScrollX = scrollX + Math.min(offsetWidth, Math.abs(scrollX)); //Math.max(, 0); // // ensures that the content is always visible within the scrollable element and no part of it is hidden.
-            // if (scrollLeft === newScrollLeft) {
-            //   setScrollIsAtEnd(true);
-            // }
+            var newScrollX = scrollX + Math.min(offsetWidth, Math.abs(scrollX));
+            //newScrollX = minimum value between offsetWidth (the width of container) and Math.abs(scrollX) (distance scrolled from the left edge of the container)
             setScrollX(newScrollX);
-            // scrollContainerRef.current.scrollTo({
-            //   left: newScrollLeft,
-            //   behavior: "smooth"
-            // });
         }
         else if (direction === "right") {
-            var newScrollX = scrollX - Math.min(offsetWidth, scrollWidth - offsetWidth + scrollX); // // ensures that the content is always visible within the scrollable element and no part of it is hidden.
-            // if (scrollLeft === newScrollLeft) {
-            //   setScrollIsAtEnd(true);
-            // }
-            console.log({
-                offsetWidth: offsetWidth,
-                remainingHidden: scrollWidth - offsetWidth + scrollX,
-                scrollWidth: scrollWidth
-            });
+            var newScrollX = scrollX - Math.min(offsetWidth, scrollWidth - offsetWidth + scrollX);
+            // calculate minimum value between offsetWidth (the width of the container) and 
+            // scrollWidth - offsetWidth + scrollX (distance from left edge of container to right edge of scrollable content hidden from view). 
+            // result subtracted from scrollX, which gives the new scroll position then used to set scrollX
             setScrollX(newScrollX);
-            // scrollContainerRef.current.scrollTo({
-            //   left: newScrollLeft,
-            //   behavior: "smooth"
-            // });
         }
     };
     (0, react_1.useEffect)(function () {
+        // update scrollIsAtEnd state variable everytime the scrollX state variable changes. 
+        // checks if current scroll position plus the width of the container is equal to the width of the scrollable content, 
+        // which indicates that the scroll position is at the end of the content. If scrollIsAtEnd is true and the scroll position changes, set scrollIsAtEnd to false.
         if (Math.abs(scrollX) + scrollContainerRef.current.offsetWidth === scrollContainerRef.current.scrollWidth) {
             setScrollIsAtEnd(true);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.42.1",
+  "version": "2.42.3",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",