react-feather#ChevronDown JavaScript Examples

export function ButtonDropdown({ disabled = false, children, open, ...rest }) {
  return (
    <ButtonFaded {...rest} disabled={disabled} ope={open}>
      <RowBetween>
        <div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
        {open ? (
          <StyledIcon>
            <ChevronUp size={24} />
          </StyledIcon>
        ) : (
          <StyledIcon>
            <ChevronDown size={24} />
          </StyledIcon>
        )}
      </RowBetween>
    </ButtonFaded>
  )
}

renderContextMenuButton() {
    const {country, pending} = this.props.charts;
    return (
      <OpenContextMenuButton
        className="select"
        renderContextMenu={this.renderContextMenu}
        renderContent={toggleContextMenu => {
          return (
            <div
              className="select__label"
              onClick={toggleContextMenu}
            >
              <span>{country}</span>
              {pending
                ? <Loader/>
                : <ChevronDown className="chevron-up"/>
              }
            </div>
          );
        }}
      />
    );
  }

export function ButtonDropdown({ disabled = false, children, ...rest }) {
  return (
    <ButtonPrimary {...rest} disabled={disabled}>
      {/* <RowBetween> */}
      <div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
      <ChevronDown size={24} />
      {/* </RowBetween> */}
    </ButtonPrimary>
  )
}

export function ButtonDropdownLight({ disabled = false, children, ...rest }) {
  return (
    <ButtonOutlined {...rest} disabled={disabled}>
      {/* <RowBetween> */}
      <div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
      <ChevronDown size={24} />
      {/* </RowBetween> */}
    </ButtonOutlined>
  )
}

export function ButtonDropdown({ disabled = false, children, ...rest }) {
  return (
    <ButtonPrimary {...rest} disabled={disabled}>
      {/* <RowBetween> */}
      <div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
      <ChevronDown size={24} />
      {/* </RowBetween> */}
    </ButtonPrimary>
  )
}

export function ButtonDropdownLight({ disabled = false, children, ...rest }) {
  return (
    <ButtonOutlined {...rest} disabled={disabled}>
      {/* <RowBetween> */}
      <div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
      <ChevronDown size={24} />
      {/* </RowBetween> */}
    </ButtonOutlined>
  )
}

function SidebarSubmenu({ route }) {
  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);

  function handleDropdownMenuClick() {
    setIsDropdownMenuOpen(!isDropdownMenuOpen);
  }

  return (
    <li className="relative px-6 py-3" key={route.name}>
      <Route path={route.path} exact={route.exact}>
        <span
          className="absolute inset-y-0 left-0 w-1 bg-primary-500 rounded-br-lg rounded-tr-lg"
          aria-hidden="true"
        />
      </Route>
      <button
        type="button"
        className="dark:hover:text-gray-200 inline-flex items-center justify-between w-full hover:text-gray-800 text-sm font-semibold transition-colors duration-150"
        onClick={handleDropdownMenuClick}
        aria-haspopup="true"
      >
        <span className="inline-flex items-center">
          <span className="ml-4">{route.name}</span>
        </span>
        <ChevronDown className="w-4 h-4" aria-hidden="true" />
      </button>
      <Transition
        show={isDropdownMenuOpen}
        enter="transition-all ease-in-out duration-300"
        enterFrom="opacity-25 max-h-0"
        enterTo="opacity-100 max-h-xl"
        leave="transition-all ease-in-out duration-300"
        leaveFrom="opacity-100 max-h-xl"
        leaveTo="opacity-0 max-h-0"
      >
        <ul
          className="bg-gray-50 mt-2 p-2 dark:text-gray-400 text-gray-500 text-sm font-medium dark:bg-gray-900 rounded-md shadow-inner overflow-hidden space-y-2"
          aria-label="submenu"
        >
          {route.routes.map((r) => (
            <li
              className="dark:hover:text-gray-200 px-2 py-1 hover:text-gray-800 transition-colors duration-150"
              key={r.name}
            >
              <NavLink
                className="w-full"
                to={r.path}
                activeClassName="text-gray-800 dark:text-gray-100"
              >
                {r.name}
              </NavLink>
            </li>
          ))}
        </ul>
      </Transition>
    </li>
  );
}

DropDown = (({ title, children, align = "left" }) => {
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    function onDocumentClick() {
      if (visible) {
        setVisible(false)
      }
    }

    document.addEventListener("click", onDocumentClick)

    return () => {
      document.removeEventListener("click", onDocumentClick)
    }
  }, [visible])

  function onClick() {
    // Let the click propagate to the parent element first before we make
    // the drop down menu visible. This makes sure other drop down menus on the
    // page are closed. If we'd call setVisible without setTimeout here, our
    // menu would never be displayed because the onDocumentClick handler above
    // would just hide it again.
    setTimeout(() => {
      setVisible(!visible)
    }, 0)
  }

  let hasActive = false
  Children.forEach(children, c => {
    let active = isValidElement(c) && c.props !== undefined && c.props.active
    if (active) {
      hasActive = true
    }
  })

  let menuItems = children
  if (hasActive) {
    menuItems = Children.map(children, c => cloneElement(c, { hasActiveSiblings: true }))
  }

  return (
    <div className="dropdown">
      <a className="dropdown-title" onClick={onClick}>{title}<ChevronDown /></a>
      <ul className={classNames("dropdown-menu", { visible, "align-right": align === "right" })}>
        {menuItems}
      </ul>
      <style jsx>{styles}</style>
    </div>
  )
})

function TransactionHistoryTable({ data }) {
  const breakpoint = useBreakpoints();
  const isMobile = breakpoint === 'isMobile';

  const columns = useMemo(
    () => [
      {
        Header: 'Kimden',
        accessor: 'from.name',
        Cell: ({ value }) => (
          <div className="person with-icon">
            <div>{value || 'Anonim'}</div>
            <div className="icon">
              <ArrowRight />
            </div>
          </div>
        ),
      },

      {
        Header: 'Kime',
        accessor: 'to.name',
        Cell: ({
          value,
          row: {
            original: { to },
          },
        }) => {
          let Element = 'div';
          let linkProps;
          if (to.campaignCode && to.campaignCode !== 'donate-all') {
            Element = 'a';
            linkProps = {
              href: `https://www.ucurtmaprojesi.com/campaign/${to.campaignCode}`,
            };
          }
          return (
            <Element className="person" {...linkProps}>
              {value}
            </Element>
          );
        },
      },
      {
        Header: 'Ne Zaman',
        accessor: 'when',
        id: 'when',
        Cell: ({ value }) => <div>{dayjs().to(dayjs(value * 1000))}</div>,
      },
      {
        Header: 'Ne Kadar',
        accessor: 'amount',
        Cell: ({
          value,
          row: {
            original: { tokenName },
          },
        }) => (
          <div className="amount">{`${
            typeof value === 'number' ? Math.floor(value) : value
          } ${tokenName}`}</div>
        ),
      },
    ],
    []
  );

  const defaultSort = useMemo(() => [{ id: 'when', desc: true }], []);

  const tableInstance = useTable(
    {
      columns,
      data,
      initialState: { sortBy: defaultSort, pageSize: 10, pageIndex: 0 },
      disableMultiSort: true,
      disableSortRemove: true,
    },
    useFlexLayout,
    useSortBy,
    usePagination
  );
  const {
    getTableProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    state: { pageIndex },
  } = tableInstance;

  return (
    <div className="table-wrapper">
      <div {...(!isMobile && getTableProps())} className="table">
        {!isMobile &&
          headerGroups.map(headerGroup => (
            <div {...headerGroup.getHeaderGroupProps({})} className="tr">
              {headerGroup.headers.map(column => (
                <div
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  className="th title"
                >
                  {column.render('Header')}
                  {column.isSorted ? (
                    column.isSortedDesc ? (
                      <ChevronDown />
                    ) : (
                      <ChevronUp />
                    )
                  ) : (
                    ''
                  )}
                </div>
              ))}
            </div>
          ))}
        <div className="tbody">
          {page.map(row => {
            prepareRow(row);
            return (
              <div {...row.getRowProps()} className="tr">
                {row.cells.map(cell => {
                  return (
                    <div {...cell.getCellProps()} className="td">
                      {isMobile && (
                        <div className="td-header">{cell.render('Header')}</div>
                      )}
                      <div className="td-content">{cell.render('Cell')}</div>
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
      <div className="pagination">
        <div>
          <button
            className="button icon-button"
            type="button"
            onClick={() => gotoPage(0)}
            disabled={!canPreviousPage}
          >
            <ChevronsLeft />
          </button>
          <button
            className="button icon-button"
            type="button"
            onClick={() => previousPage()}
            disabled={!canPreviousPage}
          >
            <ChevronLeft />
          </button>
          <button
            className="button icon-button"
            type="button"
            onClick={() => nextPage()}
            disabled={!canNextPage}
          >
            <ChevronRight />
          </button>
          <button
            className="button icon-button"
            type="button"
            onClick={() => gotoPage(pageCount - 1)}
            disabled={!canNextPage}
          >
            <ChevronsRight />
          </button>
        </div>
        <span>
          Toplam {pageOptions.length} sayfadan
          <strong>{pageIndex + 1}.</strong>
          sayfayı görüntülüyorsunuz.
        </span>
      </div>
    </div>
  );
}

function Filter({
  timeseries,
  setTimeseries,
  date,
  dateOnChange,
  dates,
  datesOnChange,
  maxDate,
  floating,
  filterFacilityTypes,
  setFilterFacilityTypes,
  content,
}) {
  const [facilityTypesFilterOptions, setFacilityTypesFilterOptions] =
    useState(FACILITY_TYPES);
  const [_filterFacilityTypes, _setFilterFacilityTypes] =
    useState(filterFacilityTypes);
  const [facilityTypeFilterOpen, setFacilityTypeFilterOpen] = useState(false);
  const resetFacilityTypeFilter = () => {
    setFacilityTypeFilterOpen(false);
    setFacilityTypesFilterOptions(FACILITY_TYPES);
  };

  return (
    <div
      className={clsx(
        floating ? " mt-10 flex-shrink-0 " : "mb-8 rounded-lg",
        "flex flex-col items-center justify-between px-1 py-1 dark:bg-gray-800 bg-white shadow-md sm:px-4 sm:py-2 md:flex-row"
      )}
    >
      <p className="inline-flex dark:text-gray-400">Filters</p>
      <div className="inline-grid gap-1 grid-rows-none w-full sm:grid-flow-col-dense sm:grid-rows-1 sm:place-content-end">
        {![CONTENT.COVID, CONTENT.LSG].includes(content) && (
          <div className="relative h-10 dark:bg-gray-900 bg-white rounded-lg">
            <Button
              layout="link"
              onClick={() => setFacilityTypeFilterOpen(true)}
              iconRight={ChevronDown}
              className="w-full shadow-xs"
              disabled={facilityTypeFilterOpen}
            >
              Facility Type
            </Button>
            <Dropdown
              isOpen={facilityTypeFilterOpen}
              align="right"
              onClose={() => resetFacilityTypeFilter()}
              className="z-40"
            >
              <Label className="mb-2">
                <div className="inline-grid gap-1 grid-rows-none w-full xl:grid-flow-col-dense xl:grid-rows-1 xl:place-content-end">
                  <Input
                    className="dark:bg-gray-900"
                    placeholder="Search facility types"
                    onChange={(e) => {
                      setFacilityTypesFilterOptions(
                        e.target.value
                          ? fuzzysort
                              .go(e.target.value, facilityTypesFilterOptions)
                              .map((v) => v.target)
                          : FACILITY_TYPES
                      );
                    }}
                  />
                  <Button
                    layout="link"
                    onClick={() => _setFilterFacilityTypes([])}
                    className="dark:bg-gray-900 shadow-xs"
                  >
                    Clear
                  </Button>
                  <Button
                    layout="link"
                    onClick={() => {
                      _setFilterFacilityTypes(GOVT_FACILITY_TYPES);
                    }}
                    className="whitespace-no-wrap dark:bg-gray-900 shadow-xs"
                  >
                    All Govt.
                  </Button>
                  <Button
                    layout="link"
                    onClick={() => _setFilterFacilityTypes(FACILITY_TYPES)}
                    className="dark:bg-gray-900 shadow-xs"
                  >
                    All
                  </Button>
                </div>

                <HelperText className="ml-1">
                  {`Selected ${_filterFacilityTypes.length} items`}
                </HelperText>
              </Label>

              <Card className="flex flex-col mb-2 p-2 h-64 overflow-y-auto">
                {facilityTypesFilterOptions.map((d, i) => (
                  <Label key={i} check>
                    <Input
                      onChange={() => {
                        const _t = _filterFacilityTypes.indexOf(d);
                        const _tmp = [..._filterFacilityTypes];
                        if (_t > -1) {
                          _tmp.splice(_t, 1);
                        } else {
                          _tmp.push(d);
                        }
                        _setFilterFacilityTypes(_tmp);
                      }}
                      type="checkbox"
                      checked={_filterFacilityTypes.includes(d)}
                    />
                    <span className="ml-2">{d}</span>
                  </Label>
                ))}
              </Card>
              <div className="flex justify-end space-x-2">
                <Button
                  onClick={() => setFilterFacilityTypes(_filterFacilityTypes)}
                  className="shadow-xs"
                >
                  Apply
                </Button>
                <Button
                  onClick={() => resetFacilityTypeFilter()}
                  className="shadow-xs"
                >
                  Cancel
                </Button>
              </div>
            </Dropdown>
          </div>
        )}

        <div className="flex justify-evenly dark:text-gray-700 dark:bg-gray-900 bg-white rounded-lg">
          <Button
            layout="link"
            onClick={() => setTimeseries(false)}
            className="rounded-r-none shadow-xs"
            disabled={!timeseries}
          >
            <span className="capitalize">Single</span>
          </Button>
          <Button
            layout="link"
            onClick={() => setTimeseries(true)}
            className="rounded-l-none shadow-xs"
            disabled={timeseries}
          >
            <span className="capitalize">Range</span>
          </Button>
        </div>
        {!timeseries ? (
          <DatePicker
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus={false}
            calendarIcon={
              <Calendar className="dark:text-gray-400 text-gray-600" />
            }
            clearIcon={null}
            tileClassName="font-sans rounded-lg p-2"
            value={date}
            onChange={dateOnChange}
            maxDate={maxDate}
            format="dd/MM/yyyy"
            className="h-10"
          />
        ) : (
          <DateRangePicker
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus={false}
            calendarIcon={
              <Calendar className="dark:text-gray-400 text-gray-600" />
            }
            clearIcon={null}
            tileClassName="font-sans rounded-lg p-2"
            value={dates}
            onChange={datesOnChange}
            maxDate={maxDate}
            format="dd/MM/yyyy"
          />
        )}
      </div>
    </div>
  );
}

function DistrictDashboard() {
  const todayDate = new Date();
  const params = useParams();
  const [isOpen, setIsOpen] = useState(false);
  const [timeseries, setTimeseries] = useState(false);
  const [filterDistrict, setFilterDistrict] = useState(ACTIVATED_DISTRICTS[0]);
  const [filterFacilityTypes, setFilterFacilityTypes] =
    useState(FACILITY_TYPES);
  const [content, setContent] = useState(
    CONTENT[params.content?.toUpperCase()] || CONTENT.CAPACITY
  );
  const [dates, datesOnChange] = useState([
    getNDateBefore(todayDate, 14),
    todayDate,
  ]);
  const [date, dateOnChange] = useState(todayDate);
  const [ref, inView] = useInView({
    threshold: 0,
  });

  const getDistrict = (name) => {
    const district = ACTIVATED_DISTRICTS.find(
      (district) => district.name.toLowerCase() === name?.toLowerCase()
    );

    return district === undefined ? ACTIVATED_DISTRICTS[0] : district;
  };

  useEffect(() => {
    setFilterDistrict(getDistrict(params.district));
  }, [params.district]);

  useEffect(() => {
    setContent(CONTENT[params.content?.toUpperCase()] || CONTENT.CAPACITY);
  }, [params.content]);

  useEffect(() => {
    window.history.replaceState(
      null,
      "Care Dashboard",
      `/district/${filterDistrict.name.toLowerCase()}/${Object.entries(CONTENT)
        .find((a) => a[1] === content)[0]
        .toLowerCase()}`
    );
  }, [content, filterDistrict]);

  const renderContent = () => {
    switch (content) {
      case CONTENT.CAPACITY:
        return !timeseries ? (
          <Capacity
            filterDistrict={filterDistrict}
            filterFacilityTypes={filterFacilityTypes}
            date={date}
          />
        ) : (
          <CapacityTimeseries
            filterDistrict={filterDistrict}
            filterFacilityTypes={filterFacilityTypes}
            dates={dates}
          />
        );
      case CONTENT.PATIENT:
        return !timeseries ? (
          <Patient
            filterDistrict={filterDistrict}
            filterFacilityTypes={filterFacilityTypes}
            date={date}
          />
        ) : (
          <PatientTimeseries
            filterDistrict={filterDistrict}
            filterFacilityTypes={filterFacilityTypes}
            dates={dates}
          />
        );
      case CONTENT.TESTS:
        return !timeseries ? (
          <Tests
            filterDistrict={filterDistrict}
            filterFacilityTypes={filterFacilityTypes}
            date={date}
          />
        ) : (
          <TestsTimeseries
            filterDistrict={filterDistrict}
            filterFacilityTypes={filterFacilityTypes}
            dates={dates}
          />
        );
      case CONTENT.TRIAGE:
        return !timeseries ? (
          <Triage
            filterDistrict={filterDistrict}
            filterFacilityTypes={filterFacilityTypes}
            date={date}
          />
        ) : (
          <TriageTimeseries
            filterDistrict={filterDistrict}
            filterFacilityTypes={filterFacilityTypes}
            dates={dates}
          />
        );
      case CONTENT.LSG:
        return !timeseries ? (
          <Lsg filterDistrict={filterDistrict} date={date} />
        ) : (
          <div>Work in Progress</div>
        );
      case CONTENT.OXYGEN:
        return !timeseries ? (
          <OxygenMonitor
            filterDistrict={filterDistrict}
            filterFacilityTypes={filterFacilityTypes}
            date={date}
          />
        ) : (
          <div>Work in Progress</div>
        );
      case CONTENT.MAP:
        return !timeseries ? (
          <DistrictMap
            filterDistrict={filterDistrict}
            filterFacilityTypes={filterFacilityTypes}
            date={date}
          />
        ) : (
          <div>Work in Progress</div>
        );
      default:
        return <div />;
    }
  };

  function ConditionalFilter({ floating }) {
    return (
      <Filter
        floating={floating}
        timeseries={timeseries}
        setTimeseries={setTimeseries}
        date={date}
        dateOnChange={dateOnChange}
        dates={dates}
        datesOnChange={datesOnChange}
        maxDate={todayDate}
        filterFacilityTypes={filterFacilityTypes}
        setFilterFacilityTypes={setFilterFacilityTypes}
        content={content}
      />
    );
  }
  const transitions = useTransition(content, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 1 },
  });
  return (
    <div className="overflow-hidden md:overflow-auto">
      <PageTitle>District Dashboard</PageTitle>
      <div className="flex flex-col items-center justify-between mb-2 px-4 py-2 bg-primary-500 rounded-lg shadow-md md:flex-row">
        <p className="text-white font-semibold">{filterDistrict.name}</p>
        <div className="md:flex md:space-x-2">
          <div className="flex flex-wrap justify-center dark:text-gray-700 dark:bg-gray-900 bg-white rounded-lg space-x-1 space-y-1 md:space-x-0 md:space-y-0">
            {Object.keys(CONTENT).map((k, i) => {
              let t = "shadow-xs ";
              if (i === 0) {
                t += "md:rounded-r-none";
              } else if (i === Object.keys(CONTENT).length - 1) {
                t += "md:rounded-l-none";
              } else {
                t += "md:rounded-l-none md:rounded-r-none";
              }
              return (
                <Button
                  layout="link"
                  onClick={() => setContent(CONTENT[k])}
                  className={t}
                  disabled={content === CONTENT[k]}
                  key={i}
                >
                  <span className="capitalize">{k.toLowerCase()}</span>
                </Button>
              );
            })}
          </div>
          <div className="relative mt-2 dark:bg-gray-900 bg-white rounded-lg md:mt-0">
            <Button
              layout="link"
              onClick={() => setIsOpen(!isOpen)}
              aria-label="Select district"
              aria-haspopup="true"
              disabled={false}
              iconRight={ChevronDown}
              className="w-full shadow-xs"
            >
              {filterDistrict.name}
            </Button>
            <Dropdown
              isOpen={isOpen}
              align="right"
              onClose={() => setIsOpen(false)}
              className="z-40"
            >
              {ACTIVATED_DISTRICTS.map((d, i) => (
                <DropdownItem
                  key={i}
                  onClick={() => {
                    setFilterDistrict(d);
                    setIsOpen(false);
                  }}
                >
                  <span>{d.name}</span>
                </DropdownItem>
              ))}
            </Dropdown>
          </div>
        </div>
      </div>
      <div ref={ref}>
        <ConditionalFilter floating={false} />
      </div>
      {!inView && <ConditionalFilter floating />}
      <Suspense fallback={<ThemedSuspense />}>
        <SWRConfig
          value={{
            suspense: true,
            loadingTimeout: 10_000,
            refreshInterval: 300_000,
            onError: (error, key) => {
              // eslint-disable-next-line no-console
              console.error(error, key);
            },
          }}
        >
          {transitions.map(({ key, props }) => (
            <animated.div key={key} style={props}>
              {renderContent()}
            </animated.div>
          ))}
        </SWRConfig>
      </Suspense>
    </div>
  );
}

MapSelector = ({selectedMapId, maps, selectMap, selectStat}) => {
  const selectedMap = maps.find(m => m.name === selectedMapId)

  const [isOpen, setIsOpen] = useState(false)

  const handleMap = useCallback(map => {
    const {name, property} = map
    selectStat(property)
    selectMap(name)
    setIsOpen(false)
  }, [selectMap, selectStat])

  const handleClick = useCallback(event => {
    event.stopPropagation()
    setIsOpen(!isOpen)
  }, [isOpen])

  return (
    <div className='switch'>
      <div className='header' onClick={handleClick}>
        <span>{selectedMap.name}</span> {isOpen ? <ChevronUp /> : <ChevronDown />}
      </div>
      {isOpen && (
        <div className='menu'>
          {maps.map(map => (
            <div
              key={map.name}
              className={`menu-item ${selectedMapId === map.name ? 'selected' : ''}`}
              onClick={() => handleMap(map)}
            >
              <span>{map.name}</span> {map.name === selectedMapId && <Check />}
            </div>
          ))}
        </div>
      )}

      <style jsx>{`
        .switch {
          display: flex;
          flex-direction: column;
          position: relative;
        }

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.5em;
        }

        .switch:hover {
          cursor: pointer;
        }

        .menu {
          position: absolute;
          display: flex;
          flex-direction: column;
          width: 100%;
          top: 100%;
          background-color: #000000aa;
        }

        .menu-item {
          display: flex;
          align-items: center;
          padding: 0.2em 0.5em;
        }

        .menu-item:hover {
          background-color: ${colors.lightGrey};
          color: #000;
        }

        .menu-item.selected:hover {
          background-color: transparent;
          cursor: initial;
        }

        span {
          margin-right: 0.4em;
        }
        `}</style>
    </div>
  )
}

SelectInput = ({selected, options, handleSelect}) => {
  const [isOpen, setIsOpen] = useState(false)

  const theme = useContext(ThemeContext)
  const {isTabletDevice} = useContext(AppContext)

  const onSelect = useCallback(option => {
    handleSelect(option)
    setIsOpen(false)
  }, [handleSelect])

  return (
    <div className='select-input'>
      <div className='custom-select' onClick={() => setIsOpen(!isOpen)}>
        <span>{selected.label}</span> {isOpen ? <ChevronDown /> : <ChevronUp />}
      </div>

      {isOpen && (
        <div className='custom-options'>
          {options.map(option => {
            const {value, label} = option
            return (
              <div
                key={value}
                className={`option ${value === selected.value ? 'selected' : ''}`}
                onClick={() => onSelect(option)}
              >
                <span>{label}</span>
              </div>
            )
          })}
        </div>
      )}

      <style jsx>{`
        .select-input {
          position: relative;
          display: flex;
          flex-direction: column;
          width: ${isTabletDevice ? '100%' : ''};
          height: ${isTabletDevice ? '100%' : ''};
          background-color: ${colors.lightGrey};
        }

        .custom-select {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: ${isTabletDevice ? '0.8em' : '0.5em'};;
        }

        .custom-select,
        .select-input:hover {
          cursor: pointer;
        }

        .custom-options {
          display: flex;
          z-index: 1;
          position: absolute;
          top: 100%;
          width: 100%;
          flex-direction: column;
          background-color: ${colors.lighterGrey};
          box-shadow: 0 1px 4px ${colors.lightGrey};
          transition: height 1s;
        }

        .option {
          display: flex;
          align-items: center;
          padding: 0.5em 1em;
        }

        .option:hover {
          background-color: ${theme.secondary};
          color: #fff;
        }

        .option.selected {
          background-color: ${theme.primary};
          color: #fff;
        }

        span {
          margin-right: 0.4em;
        }
        `}</style>
    </div>
  )
}

TerritoriesMobileMap = ({maps, context, children, disableClick}) => {
  const themeContext = useContext(ThemeContext)
  const {selectedLocation, setSelectedLocation} = useContext(AppContext)
  const {selectedMapId, setSelectedMapId, setSelectedStat} = useContext(context)

  const [showStats, setShowStats] = useState(false)
  const [showDrom, setShowDrom] = useState(selectedLocation && droms.find(({code}) => selectedLocation === code))

  const selectedMap = maps.find(m => m.name === selectedMapId)

  const onClick = () => {
    setShowDrom(!showDrom)

    if (showDrom) {
      setSelectedLocation('FRA')
    }
  }

  return (
    <div className='mobile-map-container'>
      <div className='map-switch clickable' onClick={() => onClick()}>
        Voir la France {showDrom ? 'métropolitaine' : 'd’outremer'}
      </div>
      {maps.length > 1 && (
        <div className='map-selector clickable'>
          <MapSelector selectedMapId={selectedMapId} maps={maps} selectMap={setSelectedMapId} selectStat={setSelectedStat} />
        </div>
      )}
      <div className='map-content'>
        <div>
          {showDrom ? (
            <Drom map={selectedMap} disableClick={disableClick} />
          ) : (
            <MapContext
              code={selectedLocation}
              map={selectedMap}
              disableClick={disableClick}
              disableFitbound={selectedMap.disableFitbound}
            />
          )}
        </div>
      </div>

      {children && selectedLocation && (
        <div className={`mobile-sumup ${showStats ? 'show' : 'hide'}`}>
          <div className='show-stats clickable' onClick={() => setShowStats(!showStats)}>
            {showStats ? 'Masquer' : 'Afficher'} les données {geo[selectedLocation].nom} {showStats ? <ChevronDown /> : <ChevronUp />}
          </div>
          <div className='mobile-statistics'>
            {children}
          </div>
        </div>
      )}

      <style jsx>{`
        .mobile-map-container {
          z-index: 2;
          flex: 1;
          position: relative;
          display: flex;
          flex-direction: column;
        }

        .map-switch {
          padding: 0.5em;
          text-align: center;
          color: #FFF;
          background-color: ${themeContext.primary};
        }

        .map-selector {
          z-index: 2;
          background-color: #00000099;
          color: #fff;
        }

        .map-content,
        .map-content div {
          z-index: 1;
          display: flex;
          flex: 1;
        }

        .mobile-sumup {
          z-index: 2;
          display: flex;
          position: absolute;
          flex-direction: column;
          bottom: 0;
          background-color: #fff;
          width: 100%;
          height: 100%;
          margin: auto;
          transition: 0.5s;
        }

        .mobile-sumup.hide {
          height: ${SHOW_STATS_HEIGHT}px;
          padding: 0;
        }

        .mobile-sumup.show {
          height: 100%;
        }

        .show-stats {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0.4em;
          color: #fff;
          min-height: ${SHOW_STATS_HEIGHT}px;
          background-color: ${themeContext.primary};
        }

        .mobile-statistics {
          position: relative;
          flex: 1;
          overflow: auto;
        }

        .clickable:hover {
          cursor:
        }
      `}</style>
    </div>

  )
}