@openmrs/esm-stock-management-app 1.0.1-pre.327

package/src/core/components/tabs/vertical-tabs.scss

@@ -0,0 +1,126 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.heading {
+  @include type.type-style('productive-heading-02');
+  color: colors.$gray-70;
+  margin-bottom: spacing.$spacing-05;;
+}
+
+.heading:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.mainContainer {
+  padding-bottom: 1.5rem;
+  background: $ui-01;
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  padding: 1rem;
+  font-size: 1.2rem;
+}
+
+.desktopContainer {
+  width: 50%;
+}
+
+.tabletContainer {
+  width: 90%;
+}
+
+.cohortBuilder {
+  :global(.cds--date-picker.cds--date-picker--single .cds--date-picker__input) {
+    width: auto;
+  }
+
+  :global(.cds--tab-content) {
+    width: 100% !important;
+    overflow-x: hidden;
+    padding: 0;
+  }
+
+  :global(.cds--tab--list) {
+    flex-direction: column;
+  }
+
+  :global(.cds--tabs) {
+    width: auto;
+    max-height: 20rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  :global(.cds--tabs__panel) {
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  :global(.cds--tabs .cds--tabs__nav-link) {
+    border-bottom: 0;
+    border-left: 3px solid $ui-03;
+    line-height: 3.5;
+  }
+
+  :global(.cds--tabs .cds--tabs__nav-item--selected) {
+    border-left: 3px solid var(--brand-03);
+    border-bottom: 0;
+    font-weight: 600;
+  }
+
+  :global(.cds--tabs__nav-link) {
+    &:active, &:focus {
+      outline: 0 !important;
+      outline-offset: 0 !important;
+    }
+
+    max-height: 4rem;
+  }
+
+  :global(.cds--col) {
+    padding-left: 0;
+    width: 100%;
+  }
+}
+
+.tabletTab {
+  width: 25%;
+}
+
+.desktopTab {
+  width: 20%;
+}
+
+.tab {
+  display: flex;
+}
+
+.tabContainer {
+  background: white;
+  padding-left: 1.5rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.optionCell {
+  padding: 0 !important;
+}
+
+.optionHeader {
+  width: 1.5rem !important;
+}
+
+.text {
+  font-size: 0.9rem;
+  padding: 0.5rem;
+}

package/src/core/hooks/debounce-hook.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+
+type Timer = ReturnType<typeof setTimeout>;
+type SomeFunction = (...args: any[]) => void;
+
+/**
+ *
+ * @param func The original, non debounced function (You can pass any number of args to it)
+ * @param delay The delay (in ms) for the function to return
+ * @returns The debounced function, which will run only if the debounced function has not been called in the last (delay) ms
+ */
+
+export function useDebounce<Func extends SomeFunction>(
+  func: Func,
+  delay = 1000
+) {
+  const timer = useRef<Timer>();
+
+  useEffect(() => {
+    return () => {
+      if (!timer.current) return;
+      clearTimeout(timer.current);
+    };
+  }, []);
+
+  const debouncedFunction = ((...args) => {
+    const newTimer = setTimeout(() => {
+      func(...args);
+    }, delay);
+    clearTimeout(timer.current);
+    timer.current = newTimer;
+  }) as Func;
+
+  return debouncedFunction;
+}