Всплывающее окно пользовательского интерфейса материала открывается за пределами - PullRequest
Новая
       35

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

0 голосов
/ 05 августа 2020

Я использую следующий код в своем приложении, пытаясь открыть контроллер выбора даты реакции внутри элемента всплывающего окна, и для большинства случаев использования он отлично работает, только когда кнопка находится в нижней части экрана, всплывающее окно выход за пределы.

Есть ли способ решить эту проблему? поскольку из примера материала ui всплывающее окно всегда перемещается автоматически

edit: https://codesandbox.io/s/focused-https-5w8wb?file= / src / App. js

import 'react-dates/initialize'

import React, { useState, useRef } from 'react'

import Popover from '@material-ui/core/Popover'
import { withStyles } from '@material-ui/core/styles'
import { DayPickerSingleDateController, isInclusivelyBeforeDay, isSameDay } from 'react-dates'

const defaultAnchor = { vertical: 'bottom', horizontal: 'left' }
const defaultTransform = { vertical: 'top', horizontal: 'left' }
const StyledPopover = withStyles(() => ({
  root: { zIndex: '2000 !important' },
  paper: { overflowY: 'auto'}
}))(Popover)

export default function PopoverDatePicker (props) {
  const { date } = props

  const [anchorEl, setAnchorEl] = useState(null)
  const [focus, setFocus] = useState(false)

  const handleOpen = e => setAnchorEl(e.currentTarget)
  const handleClose = () => setAnchorEl(null)

  const open = Boolean(anchorEl)
  const id = open ? 'simple-popover' : undefined

  const value = date
    ? date.clone().format('MM/DD/YYYY')
    : props.placeholder || 'Select date...'

  return (
    <div>
      <div onClick={e => !props.disabled && handleOpen(e)}>
        {value}
      </div>

      <StyledPopover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={defaultAnchor}
        transformOrigin={defaultTransform}
      >
        <DayPickerSingleDateController
          daySize={28}
          focused={focus}
          date={props.date}
          numberOfMonths={1}
          hideKeyboardShortcutsPanel
          onFocusChange={() => setFocus(true)}
          renderMonthElement={date => <MonthElement date={date} />}
          isOutsideRange={day => props.maxDate && !isInclusivelyBeforeDay(day, props.maxDate)}

          navPrev={<DatePickerArrows left />}
          navNext={<DatePickerArrows right />}

          onDateChange={date => {
            props.onChange(date)
            !props.keepOpenOnDateSelect && handleClose(null)
          }}
        />
      </StyledPopover>
    </div>
  )
}

1 Ответ

0 голосов
/ 06 августа 2020

Проблема не в MUI / Popover

, если вы попытаетесь прокомментировать //import "react-dates/lib/css/_datepicker.css";, все работает нормально!

Вы должны проверить документы дат-реакции и попробуйте переопределить стили:

Проверьте документы здесь https://github.com/airbnb/react-dates#overriding -styles

...