Andrew Ghostuhin

import { useRef } from "react";

const Item = ({ element, renderIn }) => {
  const node = useRef(null);

  const chooseThis = (event) => {
    renderIn.current.appendChild(node.current);
  };

  return (
    <li onClick={chooseThis}>
      <h1 ref={node}>{element}</h1>
    </li>
  );
};

const List = ({ elements, renderIn }) => (
  <ul>
    {elements.map((element) => (
      <Item element={element} renderIn={renderIn} />
    ))}
  </ul>
);

const App = () => {
  const elements = ["one", "two", "three"];
  const renderIn = useRef(null);

  return (
    <>
      <h1>
        Chosen one: <div style={{ color: "red" }} ref={renderIn}></div>
      </h1>
      <List elements={elements} renderIn={renderIn} />
    </>
  );
};
export default App;

const TopNavigation: FC = () => {
  const { opened, setOpened } = useData()
  const { state: cityState } = useCityState()
  const { dispatch } = useNavigationDispatch()
  const { state: navigationState } = useNavigationState()
  const navRef = useRef(null)

  useEffect(() => {
    dispatch({ type: 'setTopNavHeight', payload: { topNavHeight: navRef.current.offsetHeight } })
  }, [])

  return (
    <Navigation
      size='tiny'
      fixed
      dispatch={dispatch}
      transparent={navigationState.transparent}
      borderBottom='white'
      backgroundColor={navigationState.transparent ? 'transparent' : 'slightlyGray'}
    >
      <Layout justifyContent='center'>
        <Box
          maxWidth={['90%', '90%', '1200px']}
          width='100%'
          height='48px'
          ref={navRef}
          alignSelf='center'
          alignItems='center'
        >
          <CityPinIcon
            color={navigationState.transparent ? 'white' : ''}
            width='10px'
            height='13px'
          />
          <Layout flexBasis='8px' />
          <Text
            fontSize='small'
            lineHeight='normal'
            color={navigationState.transparent ? 'white' : 'dustyGray'}
            cursor='pointer'
            onClick={() => setOpened(true)}
          >
            {cityState.city.name}
          </Text>
          <Layout flexGrow={1} />
          <TopBarList />
        </Box>
      </Layout>
      <CityModal onClose={() => setOpened(false)} opened={opened} />
    </Navigation>
  )
}

export default TopNavigation

import React, { useState, useRef } from 'react'
import { withYMaps } from 'react-yandex-maps'
import { Column, Layout } from '@ui/layout'
import { ContentLight } from '@ui/dropdown'
import { Input } from '@ui/input'
import styled from '@emotion/styled'
import OnOutsideClick from '@ui/layer/src/OnOutsideClick'
import Dropdown from './Dropdown'
import SuggestView from './SuggestView'
import { update, change, select } from './handlers'
import { SuggestProps } from './types'

const Wrapper = styled('div')({
  position: 'relative',
  width: '100%',
})

const Suggest = ({
  color,
  disabled,
  id,
  readOnly,
  placeholder,
  value,
  ymaps,
  onChange,
  onSuggest,
}: SuggestProps) => {
  const [items, setItems] = useState([])
  const [toggle, setToggle] = useState(false)
  const suggestRef = useRef()
  const onUpdate = update(ymaps, setItems)
  const content = []
  content.push(
    <Input
      id={id}
      key='smart-input'
      disabled={disabled}
      value={value}
      onChange={
        disabled ? null : targetValue => change(targetValue, onUpdate, onChange)
      }
      color={color}
      readOnly={readOnly}
      placeholder={placeholder}
      onClick={() => setToggle(true)}
    />,
  )

  if (
    toggle &&
    items.length > 0 &&
    !(items[0] !== value && items.length === 1)
  ) {
    content.push(
      <OnOutsideClick
        key='smart-suggest'
        target={suggestRef.current}
        onOutsideClick={() => setToggle(false)}
      >
        <Dropdown>
          <ContentLight borderRadius='s' width='large' noPopup>
            <Column>
              <Layout basis='12px' />
              {items.map(s => (
                <SuggestView
                  key={Math.random()}
                  onClick={() =>
                    select(s.value, onSuggest, onUpdate, onChange, setToggle)
                  }
                >
                  {s.displayName}
                </SuggestView>
              ))}
              <Layout basis='12px' />
            </Column>
          </ContentLight>
        </Dropdown>
      </OnOutsideClick>,
    )
  }

  return <Wrapper ref={suggestRef}>{content}</Wrapper>
}

{
            test: /\.(png|jpg|svg|ttf|eot|woff|woff2|gif)$/,
            use: [
                'file-loader?name=[hash:12].[ext]&outputPath=images/',
                'image-webpack-loader',
            ],
        },

const info = [
    {
        title: 'Сделать уроки',
        description: 'Нужно сделать математику и русский язык',
        importance: 'Важно',
        done: '12.12.2017',
        deadline: '14.12.2017'
    }
], 
const newObject={}
info.push(newObject)