момент и реагировать - отключить дни, проверенные на массив дней - PullRequest
Новая
       2

момент и реагировать - отключить дни, проверенные на массив дней

1 голос
/ 26 июня 2019 
<Query query={GET_SPACE} 
  variables={{ 
    spaceId: this.props.spaceId,
    fromDate: today,
    toDate: moment().add(3, 'years').format('YYYY-MM-DD'),
  }}
>
  {({ loading, error, data }) => {
    if (loading) return null;
    if (error) return null;

    const { space } = data;
    const days = space.calendar.days;

    return (
      <div className={css.datePickerContainer}>
        <DayRangePicker
          month={month}
          selectDate={selectDate}
          startDate={startDate}
          endDate={endDate}
          onInteraction={this.handleDayPickerChange}
          onMonthChange={this.handleMonthChange}
          isDisabled={(d) => d.isBefore(today, 'day')}
          classNames={{header: 'fs-ignore-rage-clicks'}}
        />
      </div>
    );
  }}
</Query>

В этом запросе у меня есть константа days, которая дает мне массив bookable дней, и каждый день имеет date, bookable, который может быть true или false и open который также может быть true или false, как показано ниже: 

{
  "date": "2019-07-01",
  "bookable": true,
  "open": true
}

То, чего я хочу достичь сейчас, это что-то вроде ниже ... отключить дни с bookable : false.

isDisabled={(d) => d.isBefore(today, 'day') && disable days that has bookable: false}
, где d - это moment.

Какой лучший способ сделать это?

Ответы [ 2 ]

1 голос
/ 26 июня 2019

Если я правильно понял, что-то вроде этого будет работать:

isDisabled={(d) => d.isBefore(today, 'day') && days.find(day => day.date === d.format('YYYY-MM-DD') && !day.bookable)

Немного объяснений:

days.find вернет первый элемент массива, который возвращает true с предоставленной функцией. Этот элемент truthy, поэтому условие является правильным. Если не найдено, days.find вернет undefined, отменяя условие.

0 голосов
/ 26 июня 2019

Вы можете включить массив с недопустимыми датами и проверить, находится ли внутри него текущая дата: 

{({ loading, error, data }) => {
if (loading) return null;
if (error) return null;

const { space } = data;
const days = space.calendar.days;
//filter the nonbookable objects than return only date
const notBookable = days.filter((el) => !el.bookable).map((elem) => return elem.date);
return (
  <div className={css.datePickerContainer}>
    <DayRangePicker
      month={month}
      selectDate={selectDate}
      startDate={startDate}
      endDate={endDate}
      onInteraction={this.handleDayPickerChange}
      onMonthChange={this.handleMonthChange}
      isDisabled={(d) => d.isBefore(today, 'day') && notBookable.includes(d)}
      classNames={{header: 'fs-ignore-rage-clicks'}}
    />
  </div>
);
}}

и аналогично другому постеру: будет работать до тех пор, пока d соответствует формату даты.

, чтобы завершить, и если d - другой формат, используйте notBookable.includes(d.format('YYYY-MM-DD'))

...