Skip to content

Instantly share code, notes, and snippets.

@GennadySX

GennadySX/HOC.tsx

Last active August 8, 2024 11:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save GennadySX/c16f18fc93e30d8f7f607f4210e59d3e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save GennadySX/c16f18fc93e30d8f7f607f4210e59d3e to your computer and use it in GitHub Desktop.
Download ZIP
Сбер Спорт Рядом (Задача в интервью)
Raw
Readme.md
  1. В файле HOC.tsx написать компонент высшего порядка (HOC)*
  2. Написать типы для передаваемых пропсов (параметров)
  3. Прокомментировать свое решение

Требование к HOC: Функция должна сокращать абзац текста до указанной длины, а также выделять красным цветом все части текста, где длина меньше 3х символов.

  1. По умолчанию textLength = 30
  2. Если textLength равно -1, то сокращений не происходит.
  3. Должна быть возможность передачи дополнительных параметров новому компонетну.

Файл App.tsx редактировать нельзя.

Удачи :)

Raw
HOC.tsx
export const withShortenParagraph = (Component) => {
// make your HOC
return function ShortParagraph(props: {
textLength?: number;
redTextRegLimit?: number;
children: string;
}) {
const { textLength = 30, redTextRegLimit, children: text } = props || {};
const defaultLength = textLength < 1 ? text.length : textLength;
const shortedText = text
.slice(0, defaultLength)
.split(' ')
.map((word) => {
if (word.length < (redTextRegLimit || 3)) {
return <span style={{ color: 'red' }}>{word} </span>;
}
return word + ' ';
});
return <Component {...props}>{shortedText}</Component>;
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment