Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5360 | Rev 6159 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5360 Rev 6014
Línea 24... Línea 24...
24 
const ICON_OPTIONS = [
 24 
const ICON_OPTIONS = [
25 
  HomeIcon,
 25 
  HomeIcon,
26 
  PeopleIcon,
 26 
  PeopleIcon,
27 
  BusinessCenterIcon,
 27 
  BusinessCenterIcon,
28 
  GroupsIcon,
 28 
  GroupsIcon,
29 
  SellIcon
 29 
  SellIcon,
30 
]
 30 
]
Línea 31... Línea 31...
31 
 
 31 
 
32 
const Header = ({
 32 
const Header = ({
33 
  menu,
 33 
  menu,
Línea 37... Línea 37...
37 
  linkAdmin,
 37 
  linkAdmin,
38 
  linkImpersonate,
 38 
  linkImpersonate,
39 
  // companyVars,
 39 
  // companyVars,
40 
  // isChatPage,
 40 
  // isChatPage,
41 
  routeCheckSession,
 41 
  routeCheckSession,
42 
  defaultNetwork
 42 
  defaultNetwork,
43 
}) => {
 43 
}) => {
44 
  const [menuItems, setMenuItems] = useState(menu || [])
 44 
  const [menuItems, setMenuItems] = useState(menu || [])
45 
  const [notificationsCount, setNotificationsCount] = useState(0)
 45 
  const [notificationsCount, setNotificationsCount] = useState(0)
46 
  const [aditionalItems, setAditionalItems] = useState([])
 46 
  const [aditionalItems, setAditionalItems] = useState([])
47 
  const [messagesCount, setMessagesCount] = useState(0)
 47 
  const [messagesCount, setMessagesCount] = useState(0)
Línea 55... Línea 55...
55 
 
 55 
 
Línea 56... Línea 56...
56 
  const searchInput = useRef(null)
 56 
  const searchInput = useRef(null)
Línea -... Línea 57...
- 
 
 57 
 
57 
 
 58 
  const { handleSubmit, register } = useForm()
Línea 58... Línea 59...
58 
  const { handleSubmit, register } = useForm()
 59 
 
59 
 
 60 
  const handleOnSubmit = (data) =>
60 
  const handleOnSubmit = (data) => window.location.replace(`/search/entity/user?keyword=${data.keyword}`)
 61 
    window.location.replace(`/search/entity/user?keyword=${data.keyword}`)
61 
 
 62 
 
Línea 117... Línea 118...
117 
    }
 118 
    }
118 
  }, [innerWidth])
 119 
  }, [innerWidth])
Línea 119... Línea 120...
119 
 
 120 
 
120 
  useEffect(() => {
 121 
  useEffect(() => {
- 
 
 122 
    const handleClickOutside = (event) => {
- 
 
 123 
      if (
121 
    const handleClickOutside = (event) => {
 124 
        searchInput?.current &&
- 
 
 125 
        !searchInput?.current?.contains(event.target)
122 
      if (searchInput?.current && !searchInput?.current?.contains(event.target)) {
 126 
      ) {
123 
        setShowMobileSearch(false)
 127 
        setShowMobileSearch(false)
124 
      }
 128 
      }
125 
    }
 129 
    }
Línea 130... Línea 134...
130 
    }
 134 
    }
131 
  }, [searchInput])
 135 
  }, [searchInput])
Línea 132... Línea 136...
132 
 
 136 
 
133 
  return (
 137 
  return (
134 
    <>
 138 
    <>
135 
      <div className='header'>
 139 
      <div className="header">
136 
        <div className='container'>
 140 
        <div className="container px-0">
137 
          <div className='header__nav'>
 - 
 
138 
 
 141 
          <div className="header__nav">
139 
            <div className={`header__left ${showMobileSearch && 'show'}`}>
 - 
 
140 
 
 142 
            <div className={`header__left ${showMobileSearch && 'show'}`}>
141 
              <a href="/">
 143 
              <a href="/">
142 
                <img src={logoForNavbar} alt='Logo' />
 144 
                <img src={logoForNavbar} alt="Logo" />
Línea 143... Línea 145...
143 
              </a>
 145 
              </a>
144 
 
 146 
 
145 
              <form
 147 
              <form
146 
                className='header__search show'
 148 
                className="header__search show"
147 
                onClick={handleDisplayMobileSearch}
 149 
                onClick={handleDisplayMobileSearch}
148 
                onSubmit={handleSubmit(handleOnSubmit)}
 150 
                onSubmit={handleSubmit(handleOnSubmit)}
149 
                ref={searchInput}
 151 
                ref={searchInput}
150 
              >
 152 
              >
151 
                <SearchIcon />
 153 
                <SearchIcon />
152 
                <input
 154 
                <input
153 
                  type='text'
 155 
                  type="text"
154 
                  placeholder='Search'
 156 
                  placeholder="Search"
155 
                  name='keyword'
 157 
                  name="keyword"
156 
                  ref={register}
 158 
                  ref={register}
157 
                />
 159 
                />
Línea 172... Línea 174...
172 
                    />
 174 
                    />
173 
                  )
 175 
                  )
174 
                })}
 176 
                })}
175 
                <NotificationsOption
 177 
                <NotificationsOption
176 
                  Icon={NotificationsIcon}
 178 
                  Icon={NotificationsIcon}
177 
                  title='Notificaciones'
 179 
                  title="Notificaciones"
178 
                  url='/notifications'
 180 
                  url="/notifications"
179 
                  sessionLink={routeCheckSession}
 181 
                  sessionLink={routeCheckSession}
180 
                  notificationsCount={notificationsCount}
 182 
                  notificationsCount={notificationsCount}
181 
                  setNotificationsCount={(value) => setNotificationsCount(value)}
 183 
                  setNotificationsCount={(value) =>
- 
 
 184 
                    setNotificationsCount(value)
- 
 
 185 
                  }
182 
                />
 186 
                />
183 
                <HeaderOptions
 187 
                <HeaderOptions
184 
                  badgeCount={messagesCount}
 188 
                  badgeCount={messagesCount}
185 
                  Icon={ChatIcon}
 189 
                  Icon={ChatIcon}
186 
                  title='Comunicación'
 190 
                  title="Comunicación"
187 
                  childs={[
 191 
                  childs={[
188 
                    ...aditionalItems,
 192 
                    ...aditionalItems,
189 
                    { label: 'Inmail', href: '/inmail', count: messagesCount },
 193 
                    { label: 'Inmail', href: '/inmail', count: messagesCount },
190 
                    { label: 'Chat', href: '/chat' }
 194 
                    { label: 'Chat', href: '/chat' },
191 
                  ]}
 195 
                  ]}
192 
                  isMobile={true}
 196 
                  isMobile={true}
193 
                />
 197 
                />
194 
                <UserOptions
 198 
                <UserOptions
195 
                  image={userImage}
 199 
                  image={userImage}
196 
                  name={fullName}
 200 
                  name={fullName}
197 
                  adminUrl={linkAdmin}
 201 
                  adminUrl={linkAdmin}
198 
                  impersonateUrl={linkImpersonate}
 202 
                  impersonateUrl={linkImpersonate}
199 
                  defaultNetwork={defaultNetwork}
 203 
                  defaultNetwork={defaultNetwork}
200 
                />
 204 
                />
201 
                {MenuDrawer &&
 205 
                {MenuDrawer && (
202 
                  <li className='d-md-none'>
 206 
                  <li className="d-md-none">
203 
                    <a
 207 
                    <a
204 
                      href='/'
 208 
                      href="/"
205 
                      className={'header__option mobile'}
 209 
                      className={'header__option mobile'}
206 
                      onClick={(e) => {
 210 
                      onClick={(e) => {
207 
                        e.preventDefault()
 211 
                        e.preventDefault()
208 
                        setShowDrawer(!showDrawer)
 212 
                        setShowDrawer(!showDrawer)
209 
                      }}
 213 
                      }}
210 
                    >
 214 
                    >
211 
                      <MenuIcon />
 215 
                      <MenuIcon />
212 
                    </a>
 216 
                    </a>
213 
                  </li>
 217 
                  </li>
214 
                }
 218 
                )}
215 
              </ul>
 219 
              </ul>
216 
            </nav>
 220 
            </nav>
217 
          </div>
 221 
          </div>
218 
        </div>
 222 
        </div>
219 
      </div>
 223 
      </div>
220 
      {MenuDrawer &&
 224 
      {MenuDrawer && (
221 
        <React.Suspense fallback={null}>
 225 
        <React.Suspense fallback={null}>
222 
          <MenuDrawer
 226 
          <MenuDrawer
223 
            items={menuItems}
 227 
            items={menuItems}
224 
            icons={ICON_OPTIONS}
 228 
            icons={ICON_OPTIONS}
225 
            isOpen={showDrawer}
 229 
            isOpen={showDrawer}
226 
            closeDrawer={() => setShowDrawer(false)}
 230 
            closeDrawer={() => setShowDrawer(false)}
227 
          />
 231 
          />
228 
        </React.Suspense>
 232 
        </React.Suspense>
229 
      }
 233 
      )}
230 
    </>
 234 
    </>
231 
  )
 235 
  )
232 
}
 236 
}
Línea 233... Línea 237...
233 
 
 237