Как оформить раскрывающийся список с помощью стилизованных компонентов - PullRequest
Новая
       22

Как оформить раскрывающийся список с помощью стилизованных компонентов

1 голос
/ 09 июля 2020

Я использую React JS + Typescript для своего приложения. Для стилизации я использую styled-components . Я действительно новичок в стилизованных компонентах. Я создал одно раскрывающееся меню. Logi c работает нормально, но пользовательский интерфейс выглядит ужасно. Я загрузил свой код в Песочницу кода . Я хочу оформить свой раскрывающийся список как Tailwind . Но поскольку я новый стилизованные компоненты , я просто не знаю, как это сделать.

Это мой выпадающий компонент 

import React, { useState } from "react";
import styled from "styled-components";
import Arrow from './Arrow.svg'
const Wrapper = styled.div<
  {
    active: boolean;
  }
  >`
text-align: left;
width: 100%;
color: #bfc5cd;
font-size: 16px;
font-weight: 300;
position: relative;
margin: 2em 0;
@media (min-width: 400px) {
  max-width: 300px;
}
svg {
  fill: #798697;
  transition: all 0.2s ease;
}
${props =>
    props.active
      ? `
  svg {
    transform: rotate(180deg);
  }
`
      : ``}
`;

const MenuLabel = styled.span`
display:inline-block;
color: grey;
border: 1px solid green;
background: white;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
cursor:pointer;
vertical-align:middle;
max-width: 100px;
padding: 40px 40px;
font-size: 12px;
text-align: center;
border: 1px solid ${({ theme }) => theme.inputBorderColor};
&:focus {
  outline: none;
  box-shadow: 0px 0px 0px 1px ${({ theme }) => theme.inputBorderColorActive};
  border: 1px solid ${({ theme }) => theme.inputBorderColorActive};
}
`;

const ItemList = styled.div`
color: #798697;
background: white;
line-height: 30px;
padding: .25em 2em .25em 2em;
cursor: defaul;
user-select: none;
transition: all .25s ease;
&:hover,
&.selected {
  background: #F7F7F7;
  color: #4A4A4A;
}
`;

export interface IOptions {
  label: string;
  value: number;
}

export interface IDropdown {
  labelDefault: string;
  options: IOptions[];
}

const Dropdown = ({ labelDefault, options }: IDropdown) => {
  const [isOpened, setIsOpened] = useState(false);
  const [selectedOption, setSelectedOption] = useState("");
  const [label, setLabel] = useState("");

  const handleSelectedItem = (obj: any) => {
    setSelectedOption(obj.value);
    setLabel(obj.label);
    setIsOpened(!isOpened);
  };

  return (
    <Wrapper active={isOpened}>
      <MenuLabel onClick={() => setIsOpened(!isOpened)}>
        {selectedOption ? label : labelDefault}
      </MenuLabel>
      <ul
        style={
          isOpened
            ? {
              display: "block",
              listStyleType: "none"
            }
            : { display: "none" }
        }
      >
        {options.map(el => (
          <ItemList
            key={el.value.toString()}
            onClick={() => handleSelectedItem(el)}
          >
            {el.label}
          </ItemList>
        ))}

      </ul>
    </Wrapper>
  );
}

export default Dropdown;

Это родительский компонент 

import * as React from "react";
import Dropdown from "./dropdown";

const MockData = [
  { label: "one", value: 1 },
  { label: "two", value: 2 },
  { label: "three", value: 3 }
];

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Dropdown labelDefault="Select a label" options={MockData} />
    </div>
  );
}
...