Software: Apache/2.4.41 (Ubuntu). PHP/8.0.30 

uname -a: Linux apirnd 5.4.0-204-generic #224-Ubuntu SMP Thu Dec 5 13:38:28 UTC 2024 x86_64 

uid=33(www-data) gid=33(www-data) groups=33(www-data) 

Safe-mode: OFF (not secure)

/var/www/html/wincloud_gateway/.cache/admin/src/components/LeftMenu/LeftMenuLinkHeader/   drwxr-xr-x
Free 13.25 GB of 57.97 GB (22.86%)
                            Encoder    Tools    Proc.    FTP brute    Sec.    SQL    PHP-code    Update    Self remove    Logout    

Viewing file:     index.js (2.13 KB)      -rw-r--r--

import React, { useState, createRef, useEffect } from 'react';
import { camelCase } from 'lodash';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

// TODO remove this
import messages from './messages.json';
import Search from './Search';
import Title from './Title';
import SearchButton from './SearchButton';
import SearchWrapper from './SearchWrapper';

const LeftMenuLinkHeader = ({ section, searchable, setSearch, search }) => {
  const [showSearch, setShowSearch] = useState(false);
  const ref = createRef();
  const { id, defaultMessage } = messages[camelCase(section)];

  useEffect(() => {
    if (showSearch && ref.current) {
      ref.current.focus();
    }
  }, [ref, showSearch]);

  const toggleSearch = () => {
    setShowSearch(prev => !prev);
  };

  const handleChange = ({ target: { value } }) => {
    setSearch(value);
  };

  const clearSearch = () => {
    setSearch('');
    setShowSearch(false);
  };

  return (
    <Title>
      {!showSearch ? (
        <>
          <FormattedMessage id={id} defaultMessage={defaultMessage} />
          {searchable && (
            <SearchButton onClick={toggleSearch}>
              <FontAwesomeIcon icon="search" />
            </SearchButton>
          )}
        </>
      ) : (
        <SearchWrapper>
          <div>
            <FontAwesomeIcon style={{ fontSize: 12 }} icon="search" />
          </div>
          <FormattedMessage id="components.Search.placeholder">
            {message => (
              <Search ref={ref} onChange={handleChange} value={search} placeholder={message} />
            )}
          </FormattedMessage>
          <SearchButton onClick={clearSearch}>
            <FontAwesomeIcon icon="times" />
          </SearchButton>
        </SearchWrapper>
      )}
    </Title>
  );
};

LeftMenuLinkHeader.propTypes = {
  section: PropTypes.string.isRequired,
  searchable: PropTypes.bool,
  setSearch: PropTypes.func,
  search: PropTypes.string,
};

LeftMenuLinkHeader.defaultProps = {
  search: null,
  searchable: false,
  setSearch: () => {},
};

export default LeftMenuLinkHeader;