Merge branch 'release/v1.0.87'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hisptz/react-ui",
   "homepage": "https://hisptz.github.io/react-ui",
-  "version": "1.0.86",
+  "version": "1.0.87",
   "description": "A collection of reusable complex DHIS2 react ui components.",
   "license": "BSD-3-Clause",
   "scripts": {

src/components/DataConfigurationArea/components/CustomAccordion/index.tsx

@@ -41,8 +41,6 @@ export default function CustomAccordion({
   const [expand, setExpanded] = useState(defaultExpanded);
   const [placeholderStyle, setPlaceholderStyle] = useState<any>({});
 
-  console.log(placeholderStyle);
-
   const onExpand = useCallback(() => {
     setExpanded((prevState) => !prevState);
   }, []);

src/components/Map/components/MapLayer/components/GoogleEngineLayer/components/EarthEngineLegend.tsx

@@ -18,13 +18,11 @@ function getLegendsFromParams(params?: { min: number; max: number; palette: stri
   if (!params) return [];
 
   const { palette, min, max } = params;
-  console.log(params);
   const sanitizedPalette = Array.isArray(palette) ? palette : palette.split(",");
   const classes = sanitizedPalette.length;
   const difference = max - min;
   const interval = Math.round(difference / classes);
   const legends = [];
-  console.log(10 / 9);
   for (let i = 0; i < classes; i++) {
     const min = i * interval;
     const max = min + interval;

src/components/Map/components/MapLayer/components/LegendArea/index.tsx

@@ -124,7 +124,6 @@ function Legend({ children, collapsible }: { children: React.ReactElement; colla
   const name = head(React.Children.toArray(children) as React.ReactElement[])?.props.name;
 
   const shouldCollapse = collapsed && !inPrintMode;
-  console.log(inPrintMode);
 
   return (
     <div className="w-100">

src/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.tsx

@@ -143,11 +143,6 @@ export function useThematicLayers(): any {
               classesCount: scale,
               colorClass,
             });
-            console.log({
-              scale,
-              colorClass,
-              sortedData,
-            });
             legends.push(...autoLegends);
           }
           return {

src/components/Map/components/MapProvider/components/MapLayerProvider/index.tsx

@@ -44,8 +44,6 @@ export function MapLayersProvider({ layers, children }: { layers: MapLayerConfig
       const sanitizedPointLayer = head(pointLayers ?? []) ? await sanitizePointLayer(head(pointLayers) as CustomPointLayer) : undefined;
       const sanitizedEarthEngineLayers = await sanitizeEarthEngineLayers([...(earthEngineLayers ?? [])] as unknown as CustomGoogleEngineLayer[]);
 
-      console.log(sanitizedThematicLayers);
-
       setUpdatedLayers(
         compact([...(sanitizedBoundaryLayers ?? []), ...(sanitizedThematicLayers ?? []), sanitizedPointLayer, ...(sanitizedEarthEngineLayers ?? [])])
       );

src/components/OrgUnitSelector/components/OrgUnitTree/index.tsx

@@ -37,8 +37,6 @@ function Tree({
   const { searchMode, searchValue, expanded, filtering, filteredOrgUnits, handleExpand } = useFilterOrgUnits();
   const selectedOrgUnits = value?.orgUnits ?? [];
 
-  console.log(expanded);
-
   const onSelect = (orgUnit: any) => {
     const orgUnitLevel = orgUnit.level ?? orgUnit.path.split("/").length - 1;
     const allowSelection = limitSelectionToLevels?.includes(orgUnitLevel) ?? true;

src/components/PeriodSelector/PeriodSelector.stories.tsx

@@ -92,8 +92,8 @@ SelectedPeriods.args = {
   enableDateRange: true,
   selectedPeriods: [
     {
-      id: "2022",
-      name: "2022",
+      id: "202209",
+      name: "September 2022",
     },
   ],
   excludedPeriodTypes: [],
@@ -108,8 +108,8 @@ WithAllowedFuturePeriods.args = {
   enableDateRange: true,
   selectedPeriods: [
     {
-      id: "2022",
-      name: "2022",
+      id: "202209",
+      name: "September 2022",
     },
   ],
   allowFuturePeriods: false,

src/components/PeriodSelector/components/CalendarSpecificPeriodDimension/index.tsx

@@ -32,17 +32,21 @@ export default function CalendarSpecificPeriodSelector({
   singleSelection,
   allowFuturePeriods,
 }: CalendarSpecificPeriodSelectorProps) {
-  const periodInstance = new Period().setCalendar(CalendarTypes.ETHIOPIAN);
+  const periodInstance = new Period().setCalendar(CalendarTypes.ETHIOPIAN).setPreferences({ allowFuturePeriods: true });
+  const selectedPeriod = !isEmpty(selectedPeriods) ? periodInstance.getById(head(selectedPeriods)?.id as unknown as string) : undefined;
+  const defaultPeriodType = selectedPeriod?.type;
 
-  const [year, setYear] = useState<number>(new Date().getFullYear());
+  const defaultPeriodTypeIsFixed = typeof selectedPeriod?.id === "string" && /\d{4}/.test(selectedPeriod?.id);
+
+  const [year, setYear] = useState<number>(
+    defaultPeriodTypeIsFixed ? new Date(selectedPeriod?.startDate as unknown as string).getFullYear() ?? new Date().getFullYear() : new Date().getFullYear()
+  );
 
   useEffect(() => {
     periodInstance.setPreferences({ openFuturePeriods: 4, allowFuturePeriods: true });
     periodInstance.setCalendar(calendar);
     if (calendar === CalendarTypes.ETHIOPIAN) {
       setYear(new Date().getFullYear() - 7);
-    } else {
-      setYear(new Date().getFullYear());
     }
   }, [calendar]);
   const periodType = new PeriodType();
@@ -54,8 +58,12 @@ export default function CalendarSpecificPeriodSelector({
   const relativePeriodTypes = filter(filteredPeriodTypes, ({ id }) => id.toLowerCase().match(RegExp("relative".toLowerCase())));
   const fixedPeriodTypes = filter(filteredPeriodTypes, ({ id }) => !id.toLowerCase().match(RegExp("relative".toLowerCase())));
 
-  const [selectedRelativePeriodType, setSelectedRelativePeriodType] = useState(head(relativePeriodTypes)?.id);
-  const [selectedFixedPeriodType, setSelectedFixedPeriodType] = useState(head(fixedPeriodTypes)?.id);
+  const [selectedRelativePeriodType, setSelectedRelativePeriodType] = useState(
+    defaultPeriodTypeIsFixed ? head(relativePeriodTypes)?.id : defaultPeriodType ?? head(relativePeriodTypes)?.id
+  );
+  const [selectedFixedPeriodType, setSelectedFixedPeriodType] = useState(
+    defaultPeriodTypeIsFixed ? defaultPeriodType ?? head(fixedPeriodTypes)?.id : head(fixedPeriodTypes)?.id
+  );
 
   const tabs = useMemo(() => {
     const tabs = [];
@@ -69,7 +77,9 @@ export default function CalendarSpecificPeriodSelector({
     return tabs;
   }, []);
 
-  const [selectedPeriodCategory, setSelectedPeriodCategory] = useState(head(tabs));
+  const defaultTab = find(Object.values(PeriodCategories), ["key", defaultPeriodTypeIsFixed ? "fixed" : "relative"]);
+
+  const [selectedPeriodCategory, setSelectedPeriodCategory] = useState(defaultTab);
 
   useEffect(() => {
     if (excludeFixedPeriods && excludeRelativePeriods) {
@@ -100,8 +110,6 @@ export default function CalendarSpecificPeriodSelector({
             .get()
             .list();
 
-          console.log(periods);
-
           if (allowFuturePeriods) {
             return periods;
           } else {
@@ -171,7 +179,7 @@ export default function CalendarSpecificPeriodSelector({
                     dense
                     label={i18n.t("Year")}
                     type={"number"}
-                    value={year}
+                    value={year.toString()}
                     onChange={({ value }: { value: number }) => setYear(value)}
                   />
                 </div>