// Данные документов
const documents = [
{ id: 'F0100111', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ ПРО МАЙНОВИЙ СТАН І ДОХОДИ' },
{ id: 'F0100703', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ з податку на прибуток підприємств' },
{ id: 'F0102003', name: 'ЗАЯВА про застосування спрощеної системи оподаткування' },
{ id: 'F0102103', name: 'РОЗРАХУНОК доходу за попередній календарний рік, що передує року переходу на спрощену систему оподаткування' },
{ id: 'F0103306', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ ПЛАТНИКА ЄДИНОГО ПОДАТКУ ФІЗИЧНОЇ ОСОБИ - ПІДПРИЄМЦЯ' },
{ id: 'F0111611', name: "РОЗРАХУНОК суми податку, на яку зменшуються податкові зобов'язання з податку на доходи фізичних осіб,у зв'язку з використанням права на податкову знижку" },
{ id: 'F0121211', name: "РОЗРАХУНОК податкових зобов'язань з податку на доходи фізичних осіб та військового збору" },
{ id: 'F0121411', name: "РОЗРАХУНОК податкових зобов'язань з податку на доходи фізичних осіб та військового збору з доходів отриманих самозайнятою особою" },
{ id: 'F0121611', name: "РОЗРАХУНОК суми податку, на яку зменшуються податкові зобов'язання з податку на доходи фізичних осіб, у зв'язку з використанням права на податкову знижку" },
];
// Создаёт выделение текста
const MarkUp = (props) => (<span dangerouslySetInnerHTML={{__html:props.HTML}}></span>)
// Рендерит список документов
const DocsList = () => {
const [searchDocName, setSearchDocName] = React.useState('');
// получает пользовательский ввод
const handleChange = event => {
setSearchDocName(event.target.value);
};
// отменяет перезагрузку страницы при подтверждении формы
const handleSubmit = event => {
event.preventDefault()
};
// выполняет поиск и подсвечивает совпадающие символы
const searchResults = !searchDocName
? documents
: documents.filter(doc =>
doc.name.trim().toLowerCase().includes(searchDocName.trim().toLowerCase())
)
.map(doc => {
// находит подстроку в поисковом запросе и выделяет её
let markedDocName = doc.name.replace(
new RegExp(searchDocName, 'gi'),
match => `<mark style='background: #2769AA; color: white;'>${match}</mark>`
);
return {
...doc,
id: doc.id,
name: markedDocName,
}
});
return (
<RadioGroup name='value' value={active ? active : ''} onChange={handleSelection}>
{searchResults.map(doc => (
<FormControlLabel className={classes.item}
style={{margin: 0}}
label={
<Box className={classes.label}>
<Box className={classes.documentId}>
<span>{doc.id}</span>
</Box>
// подсветка результата поиска
<span className={classes.documentName}>
<MarkUp HTML={doc.name}/>
</span>
</Box>
}
key={doc.id}
value={doc.id}
control={<Radio style={{marginTop: -2}} color='primary'/>}/>
))}
</RadioGroup>
</Paper>
);
};
export default DocsList;
Comments