Moving inbox search composer: Updated react components and workbench version

micro-ui/web/micro-ui-internals/packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-react-components",
-  "version": "1.8.1-beta.9",
+  "version": "1.8.1-beta.10",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",

micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/CheckBox.js

@@ -1,19 +1,15 @@
-import React ,{Fragment}from "react";
+import React,{Fragment} from "react";
 import { CheckSvg } from "./svgindex";
 import PropTypes from "prop-types";
-import BreakLine from "./BreakLine";
-import { useTranslation } from "react-i18next";
 
-
-const CheckBox = ({ onChange, label, value, disable, ref, checked, inputRef, pageType, style, index, isLabelFirst, customLabelMarkup,  ...props }) => {
-  const { t } = useTranslation()
+const CheckBox = ({ onChange, label, value, disable, ref, checked, inputRef, pageType, style, index, isLabelFirst,customLabelMarkup,  ...props }) => {
   const userType = pageType || Digit.SessionStorage.get("userType");
   let wrkflwStyle = props.styles;
   if (isLabelFirst) {
     return (
       <div className="checkbox-wrap" style={wrkflwStyle ? wrkflwStyle : {}}>
         <p style={style ? style : null}> {index+1}.</p>
-        <p className="label" style={{ maxWidth: "80%", marginLeft: "10px" }}>
+        <p className="label" style={{maxWidth: "80%", marginLeft: "10px"}}>
           {label}
         </p>
         <div>
@@ -50,14 +46,13 @@ const CheckBox = ({ onChange, label, value, disable, ref, checked, inputRef, pag
             // {(checked ? (checked = { checked }) : null)}
             checked={checked}
           />
-          <p className={userType === "employee" ? "custom-checkbox-emp" : "custom-checkbox"} style={disable ? { opacity: 0.5 } : null}>
+          <p className={userType === "employee" ? "custom-checkbox-emp" : "custom-checkbox"} style={disable ? { opacity: 0.5 } : (props?.checkboxWidth ? {...props?.checkboxWidth} : null)}>
             {/* <img src={check} alt="" /> */}
             <CheckSvg />
           </p>
         </div>
-        <p className="label" style={style ? style : {}}>
-
-          {customLabelMarkup ? 
+        <p className="label" style={style ? style : null}>
+        {customLabelMarkup ? 
           <>
             <p>{t("COMMON_CERTIFY_ONE")}</p>
             <br />

micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/HorizontalNavV2.js

@@ -0,0 +1,56 @@
+import React, {useState} from 'react'
+import { useTranslation } from 'react-i18next'
+import BreakLine from './BreakLine'
+const HorizontalNavV2 = ({ configNavItems, activeLink, setActiveLink, showNav = false, children, customStyle = {}, customClassName = "", inFormComposer = true, navClassName = "", navStyles = {},fromSearchComp=false,horizontalLine=false }) => {
+    const { t } = useTranslation()
+    const setActive = (item) => {
+        setActiveLink(item)
+    }
+
+    const MenuItem = ({ item }) => {
+        let itemComponent = item.code;
+
+        const Item = () => (
+            <span className="menu-item">
+                <div className="menu-label">{t(itemComponent)}</div>
+            </span>
+        );
+
+        return (
+            <Item />
+        );
+    };
+
+    if(fromSearchComp) {
+        return (
+            <div className={navClassName} style={fromSearchComp ?{width:"100%",...navStyles} :{...navStyles}}>
+                {showNav && <div className={fromSearchComp?`horizontal-nav ${customClassName}`:`horizontal-nav ${customClassName}`} style={inFormComposer?{ marginLeft: "16px", marginRight: "16px", marginTop:"0px",...customStyle }:{...customStyle}} >
+                    {configNavItems?.map((item, index) => (
+                        <div className={`sidebar-list-search-form ${activeLink?.name === item.name ? "active" : ""}`} key={index} onClick={() => setActive(item)}>
+                            <MenuItem item={item} />
+                        </div>
+                    ))}
+                </div>
+              }
+              {/* Commenting out for now due to horizontal line coming in every inbox as well */}
+              {horizontalLine && <BreakLine style={{margin:"0px 16px 0px 16px"}}/>}
+              {children}
+          </div>
+        )
+    }
+  return (
+      <div className={navClassName} style={{...navStyles}}>
+          {showNav && <div className={`horizontal-nav ${customClassName}`} style={inFormComposer?{ marginLeft: "16px", marginRight: "16px", ...customStyle }:{...customStyle}} >
+              {configNavItems?.map((item, index) => (
+                  <div className={`sidebar-list ${activeLink?.name === item.name ? "active" : ""}`} key={index} onClick={() => setActive(item)}>
+                      <MenuItem item={item} />
+                  </div>
+              ))}
+          </div>
+        }
+        {children}
+    </div>
+  )
+}
+
+export default HorizontalNavV2

micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/InboxSearchLinks.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { PropertyHouse, BioMetricIcon,WorksMgmtIcon} from "./svgindex";
 
 const getIconComponent = (iconName="")=>{
     return require("@egovernments/digit-ui-react-components")?.[iconName];

micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/MultiSelectDropdown.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useReducer, useRef, useState } from "react";
 import { ArrowDown, CheckSvg } from "./svgindex";
 import { useTranslation } from "react-i18next";
-import RemoveableTag from "./RemoveableTag";
-const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, defaultLabel = "", defaultUnit = "",BlockNumber=1,isOBPSMultiple=false,props={},isPropsNeeded=false,ServerStyle={}, config}) => {
+
+const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, defaultLabel = "", defaultUnit = "",BlockNumber=1,isOBPSMultiple=false,props={},isPropsNeeded=false,ServerStyle={}, isSurvey=false,placeholder, disable=false,config}) => {
   const [active, setActive] = useState(false);
   const [searchQuery, setSearchQuery] = useState();
   const [optionIndex, setOptionIndex] = useState(-1);
@@ -14,11 +14,7 @@ const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, def
       case "ADD_TO_SELECTED_EVENT_QUEUE":
         return [...state, {[optionsKey]: action.payload?.[1]?.[optionsKey], propsData: action.payload} ] 
       case "REMOVE_FROM_SELECTED_EVENT_QUEUE":
-        const newState = state.filter(
-          (e) => e?.[optionsKey] !== action.payload?.[1]?.[optionsKey]
-        );
-        onSelect(newState.map((e) => e.propsData), props); // Update the form state here
-        return newState;
+        return state.filter( e => e?.[optionsKey] !== action.payload?.[1]?.[optionsKey]) 
       case "REPLACE_COMPLETE_STATE":
         return action.payload
       default:
@@ -28,7 +24,7 @@ const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, def
 
   useEffect(() => {
     dispatch({type: "REPLACE_COMPLETE_STATE", payload: fnToSelectOptionThroughProvidedSelection(selected) })
-  },[selected?.length])
+  },[selected?.length, selected?.[0]?.code])
 
   function fnToSelectOptionThroughProvidedSelection(selected){
     return selected?.map( e => ({[optionsKey]: e?.[optionsKey], propsData: [null, e]}))
@@ -84,16 +80,17 @@ const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, def
   }
 
   const MenuItem = ({ option, index }) => (
-    <div key={index} style={isOBPSMultiple ? (index%2 !== 0 ?{background : "#EEEEEE"}:{}):{}}>
+    <div key={index} className={`${option.isDisabled ? "disabled" : ""}`}style={isOBPSMultiple ? (index%2 !== 0 ?{background : "#EEEEEE"}:{}):{}}>
       <input
         type="checkbox"
         value={option[optionsKey]}
         checked={alreadyQueuedSelectedState.find((selectedOption) => selectedOption[optionsKey] === option[optionsKey]) ? true : false}
         onChange={(e) => isPropsNeeded?onSelectToAddToQueue(e, option,props):isOBPSMultiple?onSelectToAddToQueue(e, option,BlockNumber):onSelectToAddToQueue(e, option)}
         style={{minWidth: "24px", width: "100%"}}
+        disabled={option.isDisabled || false}
       />
       <div className="custom-checkbox">
-        <CheckSvg style={{innerWidth: "24px", width: "24px"}}/>
+        <CheckSvg style={{innerWidth: "24px", width: "24px"}} fill={option.isDisabled ? "#505050" : "#F47738"} />
       </div>
       <p className="label" style={index === optionIndex ? {
                     opacity: 1,
@@ -110,20 +107,20 @@ const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, def
 
   return (
     <div>
-    <div className="multi-select-dropdown-wrap" ref={dropdownRef} style={{marginBottom: '24px'}}>
-      <div className={`master${active ? `-active` : ``}`}>
-        <input className="cursorPointer"  style={{opacity: 0}} type="text" onKeyDown={keyChange} onFocus={() => setActive(true)} value={searchQuery} onChange={onSearch} />
+    <div className={`multi-select-dropdown-wrap ${disable ? "disabled" : ""}`} ref={dropdownRef}>
+      <div className={`master${active ? `-active` : ``} ${disable ? "disabled" : ""}`}>
+        <input className="cursorPointer" type="text" onKeyDown={keyChange} onFocus={() => setActive(true)} value={searchQuery} onChange={onSearch} placeholder={t(placeholder)} />
         <div className="label">
-          <p>{alreadyQueuedSelectedState.length > 0 ? `${alreadyQueuedSelectedState.length} ${defaultUnit}` : defaultLabel}</p>
-          <ArrowDown />
+          <p>{alreadyQueuedSelectedState.length > 0 ? `${isSurvey? alreadyQueuedSelectedState?.filter((ob) => ob?.i18nKey !== undefined).length : alreadyQueuedSelectedState.length} ${defaultUnit}` : defaultLabel}</p>
+          <ArrowDown disable={disable} />
         </div>
       </div>
       {active ? (
         <div className="server" id="jk-dropdown-unique" style={ServerStyle?ServerStyle:{}}>
           <Menu />
         </div>
       ) : null}
-
+      
     </div>
     {config?.isDropdownWithChip ? <div className="tag-container">
               {alreadyQueuedSelectedState.length > 0 &&

micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/RemovableTagNew.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Close } from "./svgindex";
+
+const RemoveableTagNew = ({ text={}, onClick, extraStyles,disabled = false }) => (
+  <div className="tag inbox-tag" style={extraStyles?extraStyles?.tagStyles:{}} >
+    <span className="text inbox-tag-label" style={extraStyles?extraStyles?.textStyles:{}}>{`${text?.label} :`}</span>
+    <span className="text inbox-tag-values" style={extraStyles?extraStyles?.textStyles:{}}>{text?.value}</span>
+    <span onClick={disabled?null:onClick}>
+      <Close className="close" style={extraStyles?extraStyles?.closeIconStyles:{}} />
+    </span>
+  </div>
+);
+
+export default RemoveableTagNew;