от Эмбер Вилки

Это рассказ о трех кнопках и о том, как веб-разработчик, не занимающийся дизайном, осуществил свои мечты по поводу интерфейса.

Вы должны знать заранее, что большинство стилей здесь шаблонный Bootstrap. Он хорошо смотрится, и это внутренний продукт, поэтому мы не исправляем то, что не сломано.

Нашей задачей было создать простой для понимания интерфейс для работы с записью. Наша пластинка состоит из трех частейstate — любой available, sick или vab. Немного информации, чтобы сообщить один раз, но нам нужно пять недель их на странице.

Примечание: «VAB» — это шведское слово, означающее оставаться дома с больным ребенком. Есть разница между этим и болеть здесь как в оплате, так и в отпуске!

Проверка существующей записи

Первым шагом было показать, была ли у пользователя запись за соответствующий день. Как и в каждом React-проекте, который я знаю, мы брали список из API (наше собственное) и повторяли его. Поскольку API будет возвращать список имеющихся записей и игнорировать дни без записей, нам нужно будет настроить свой массив дней.

Вот наш код для получения дней через пять недель:

export const dateArray = (numberOfDays, startDate) => {  const day = moment(startDate);  const days = [];  while (days.length < numberOfDays) {    if (day.day() === 6 || day.day() === 0) {      day.add(1, 'days');    } else {      days.push(day.format('YYYY-MM-DD'));    }    day.add(1, 'days');  }  return days;};

Я уже писал о Moment.js раньше. Если вы им не пользуетесь, берите его! Это делает работу с датами глупо-легкой, как здесь, где мы можем позвонить day.add(1, 'days') или откуда мы получаем день недели moment(startDate).day().

Моментные объекты переменные! Поэтому в общем будьте осторожны, но здесь это замечательно, потому что нам нужно обновить наш day и мы можем сделать это с очень маленьким кодом.

Примечание: американцы, естественно, сделали бы субботу последним днем ​​недели — 6 — и воскресенье — первым днем ​​— 0. Но не шведы или остальной мир. Почти для всех не американцев неделя начинается в понедельник. Программирование может быть очень удивительным образом ориентировано на Америку.

Здесь вы видите, что мы собираем список дат, начиная с startDateи мы продолжаем, пока не достигнем numberOfDays, пропуская выходные Мы используем этот массив для создания нашего списка записей, чтобы мы могли разместить несколько вкусных кнопок.

Картирование нашего массива дней для отображения фактических записей

Теперь, когда у нас есть все дни, которые нам нужно показать (ниже мы звоним dateArray), нам придется прокрутить наш набор данных по API, чтобы определить, нужно ли показывать запись. Поскольку мы хотим видеть даты, не имеющие записей, мы должны создать массив с заполненными и пустыми записями:

const userRecords = dateArray(50, startDay).map(date => {  const recordToReturn = data.find(record =>    record.date === date  );  return { date, record: recordToReturn };});

Теперь у нас есть массив дат, одни с полной записью, а другие с record: undefined.

Доступная логика кнопок

Теперь, когда мы можем увидеть, есть ли запись в этот день, мы можем сделать так, чтобы наша кнопка была зеленой и говорила «Доступно» или белой и «Добавить». Опять же я использую Reactstrap для базовой укладки. The Button Компонент поставляется с хорошими интервалами, закругленными углами и т.п., а также с удобными параметрами «цвет», которые я могу установить на такие вещи, как «info» и «success».

<Button color={setColor(record)} >  {this.state.buttonText}</Button>

Настройка текста кнопки

Чтобы установить buttonTextя проверю есть ли запись:

const buttonText = () =>   isEmpty(this.props.data.record) ? 'Add' : 'Available'

Помните, что я прохожу {date: 'some date', record: {some: 'record'}} каждый из компонентов моих кнопок. Если мой userRecords не нашел записи за этот день, у нас ничего не будет data.record и мы можем сказать «Добавить». isEmpty происходит от великолепной библиотеки Javascript lodash. Опять же на подножку. Lodash делает Javascript гораздо чище и легче для работы.

Настройка цвета кнопки

наш setColor функция также проверит, существует ли запись, но дальше ей придется просмотреть state записи, чтобы увидеть, какой цвет нам нужно отобразить.

const setColor = () => {  if (existingRecord && record.status === 'available') {    return 'success';  } else if (existingRecord)) {    return 'gray';  } else {    return 'secondary';  }};

По умолчанию Bootstrap приятен. Мы заменили эти слова по умолчанию своими цветами, но стандартные параметры также хороши. Здесь проверяем, есть ли запись available. Если он недоступен, но запись все еще есть, она должна быть sick или vabно в любом случае пользователя больше нет available в тот день, потому нам придется сделать кнопку серой.

Две другие кнопки

Я могу использовать чрезвычайно удобный условный дисплей React, чтобы скрыть кнопки sick и vab, когда нет записи. Вот код для остальных двух кнопок:

{existingRecord && (  <div>    <Button      color={setSecondaryColor(record, 'sick')}      style={{ marginRight: '5px' }}    >      Sick    </Button>    <Button      color={setSecondaryColor(record, 'vab')}      style={{ marginRight: '5px' }}    >      VAB    </Button>  </div>)}

Чтобы убедиться, что наши кнопки имеют правильный цвет, мы просто проверим, что record имеет status «больной» или «мани» соответственно. Если статус записи не совпадает со статусом кнопки, мы убедимся, что она не окрашена (цвет нашей «вторичной» кнопки – белый).

const setSecondaryColor = (record, status) => {  if (record.status !== status) { return 'secondary'}  if (status === 'sick') { return 'danger'}  if (status === 'vab') { return 'yellow'}}

Получить фантазию с опрокидываниями

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

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

Я добавил a onMouseOver и onMouseOut события к моей кнопке «Доступно» / «Добавить»:

const mouseOver = () => {  if (existingRecord) {    this.setState({ buttonText: 'Remove' });  }};const mouseOut = () => this.setState({ buttonText: buttonText() });

Теперь, когда вы наведете курсор мыши на кнопку, она изменится на «Удалить», если запись существует (и в других случаях останется неизменной). Когда вы выведете мышь, она снова вернется к сообщению «Доступно». Так хорошо, так функционально!

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