feat(DateInput): add placeholder prop

[EldarMuhamethanov]

• close [Feature]: Добавить возможность кастомной текстовой заглушки для пустого DateInput #6040

---

• Unit-тесты
• e2e-тесты
• Дизайн-ревью
• Документация фичи
• Release notes

Описание

Нужно добавить отображение placeholder - текст, который будет отображаться при пустом значении value

Изменения

• Добавил свойство renderCustomValue, которое позволяет отрендерить кастомный текст в зависимости от значения в поле
• Добавил скришоты, тесты нового функционала

Release notes

Улучшения

• DateInput: добавлено свойство renderCustomValue, которое позволяет отрендерить кастомный текст в зависимости от значения в поле

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[github-actions]

size-limit report 📦

Path	Size
JS	392.68 KB (+0.09% 🔺)
JS (gzip)	119.06 KB (+0.06% 🔺)
JS (brotli)	97.92 KB (+0.08% 🔺)
JS import Div (tree shaking)	1.56 KB (0%)
CSS	344.9 KB (+0.26% 🔺)
CSS (gzip)	42.76 KB (+0.29% 🔺)
CSS (brotli)	34.04 KB (+0.09% 🔺)

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook
• ✅ Docs beta

Commit 995627f

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.50%. Comparing base (d5629e8) to head (9200905).
Report is 2 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8168      +/-   ##
==========================================
+ Coverage   95.49%   95.50%   +0.01%     
==========================================
  Files         403      403              
  Lines       11456    11460       +4     
  Branches     3781     3784       +3     
==========================================
+ Hits        10940    10945       +5     
+ Misses        516      515       -1     

Flag	Coverage Δ
unittests	95.50% <100.00%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[inomdzhon]

Suggested change

	-webkit-user-select: none;
	-moz-user-select: none;

автопрефиксер сам выставит

[inomdzhon]

placeholder всё же должен означать, что ничего не задано и быть тусклого цвета 🤔 сейчас placholder это считай это __.__.___

учитывая, что ребятам хочется значение по умолчанию, то тут нужен defaulValue куда нужно будет передать текущую дату (если рассматривать их задачу), а чтобы вместо даты был текст, нужен 2-ой параметр и тут два решения:

Graceful degradation – relativeTimeFormat

Note

Не везде поддерживается https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/formatToParts

const rtf = new Intl.RelativeTimeFormat('ru', { numeric: "auto" });
console.log(rtf.formatToParts(0, "second")[0].value);

type RelativeTimeFormat = { value: number, unit: "year" | "quarter" | "month" | "week" | "day" | "hour" | "minute" | "second" };

локаль берём из контекста const { locale } = useConfigProvider();

Progressive enhancement – renderValue()

или renderDate()

type RenderValue = (date: Date) => string | number | React.ReactElement;
const today = Date.now();
const App = () => {
  const [value, setValue] = React.useState();
  return (
    <DateInput
      defaultValue={today}
      renderValue={value === undefined ? (() => 'Сейчас') : undefined}
    />
  );
};

или

type RenderValue = (date: Date) => undefined | string | number | React.ReactElement;
const today = Date.now();
const App = () => {
   const [value, setValue] = React.useState();
   return (
    <DateInput
      defaultValue={today}
      renderValue={(date) => value === undefined && isToday(date) ? 'Сейчас' : undefined}
    />
  );
};

[EldarMuhamethanov]

👍 решил сделать вторым способом, так как это более гибко. Добавил свойство renderCustomValue, с помощью которого можно настроить отображение