Нужна помощь, пытаясь установить объект каждый день, пока я не решу его изменить - PullRequest
Новая
       5

Нужна помощь, пытаясь установить объект каждый день, пока я не решу его изменить

0 голосов
/ 28 мая 2020

это может показаться странным для чтения, но у меня есть этот компонент (react-native-calendar-strip), и моя идея состоит в том, чтобы щелкнуть день и создать объект для отображения, начиная с этого дня и позже

enter image description here я нажимаю на этот день и на втором экране выбираю набор элементов, которые будут отображаться на первом экране.

enter image description here 

{2020-05-28: Array(2)}
2020-05-28: Array(2)
  0: {title: "CODELCO - CONTRATO LEGACY y SHAREPOINT - SWD-PROY", cliente: "Axity", tipoProyecto: "Tradicional", idCliente: "4", idTipoProyecto: "2", …}
  1: {title: "Celula One Pay FX", cliente: "Banco Santander", tipoProyecto: "Agil", idCliente: "7", idTipoProyecto: "1", …}
length: 2
  __proto__: Array(0)
  __proto__: Object

здесь объект сохраняет список элементов ВНУТРИ даты.

вот моя проблема. мне сказали, что объект должен отображаться с этого дня И далее, ПОКА я не нажму на «Editar Favoritos» (в зависимости от того, в какой день я щелкнул), где я редактирую объект, и в этот момент объект будет отображаться из этого день и позже, ЗА ИСКЛЮЧЕНИЕМ тех, что были в предыдущие дни.

как лучше всего решить эту проблему? помощь: (

1 Ответ

0 голосов
/ 30 мая 2020

Лучшим подходом было бы иметь дату начала и дату окончания для ваших данных вместо использования даты в качестве ключа, что значительно усложнит задачу. Это также упростит вам хранение в базе данных. Компонент календаря, который вы используете, использует момент, который упростит вам задачу. На основе даты начала и даты окончания вы можете отобразить элемент в сетке. Компонент ниже даст вам примерный подход. Вам необходимо отфильтровать массив данных по выбранной дате. Чтобы показать элемент с несколькими датами, вам просто нужно обновить дату окончания. 

const data = [
  { id: 1, title: 'test 123', startDate: moment('2020-06-01') },
  { id: 2, title: 'test item 2', startDate: moment('2020-06-01') },
  { id: 3, title: 'test item 3', startDate: moment('2020-06-02'),endDate: moment('2020-06-07')},
  { id: 4, title: 'test item 4',startDate: moment('2020-06-04'),endDate: moment('2020-06-06')}
];

const Planner = () => {
  const [selectedDate, setSelectedDate] = React.useState(moment('2020-06-01'));

  const filteredArray = data.filter(item => {
    if (item.startDate && !item.endDate) {
      return selectedDate.isSame(item.startDate);
    }
    if (item.startDate && item.endDate)
      return (
        selectedDate.isBetween(item.startDate, item.endDate) ||
        selectedDate.isSame(item.startDate) ||
        selectedDate.isSame(item.endDate)
      );
    return false;
  });

  return (
    <View>
      <CalendarStrip
        style={{ height: 150, paddingTop: 20, paddingBottom: 10 }}
        onDateSelected={prop => setSelectedDate(moment(prop))}
        selectedDate={selectedDate}
      />
      <View>
        {filteredArray.map(item => (
          <Text>{item.title}</Text>
        ))}
      </View>
    </View>
  );
};

Надеюсь, это поможет.

...