Кастомизация приложения

В файле Application.tsx можно кастомизировать приложение, добавив кастомные reducers, components, icons.

Вот так выглядит файл в boilerplate:

import useApplication from '@steroidsjs/core/hooks/useApplication';
1import HttpComponent from '@steroidsjs/core/components/HttpComponent';
2import LocaleComponent from '@steroidsjs/core/components/LocaleComponent';
3import customIcons from 'icons/index';
4
5import 'style/index.scss';
6
7export default function Application() {
8    const {renderApplication} = useApplication({
9        reducers: require('@steroidsjs/core/reducers').default,
10        routes: () => require('routes').default,
11        layoutView: () => require('shared/Layout').default,
12        screen: {},
13        components: {
14            locale: LocaleComponent,
15            http: HttpComponent,
16        },
17        onInit: ({ui}) => {
18            ui.addViews(require('./ui/bootstrap').default);
19            ui.addFields(require('@steroidsjs/core/ui/form').default);
20            ui.addFormatters(require('@steroidsjs/core/ui/format').default);
21            ui.addIcons(require('@steroidsjs/bootstrap/icons/index').default(customIcons));
22        },
23    });
24
25    return renderApplication();
26}

Добавление кастомных reducers

Чтобы добавить reducer в приложение нужно выполнить несколько шагов:

1. Создать папку src/reducers/.

2. Создать в ней файл index.ts и добавить в него export функции, которая комбинирует все reducers из Steroids.

Пример кода:

import steroidsReducers from '@steroidsjs/core/reducers';
1
2export default asyncReducers => steroidsReducers({
3    ...asyncReducers,
4});

3. Создать в папке src/reducers/ необходимые кастомные reducers (каждый в отдельном файле) и добавить их в объект с reducers, который передается первым аргументов в функцию combineReducers.

4. В файле Application.tsx изменить путь до файла с reducers с @steroidsjs/core/reducers на ./reducers.

Добавление кастомных иконок

По умолчанию, Steroids содержит набор иконок для старта. Список предоставляемых иконок можно найти в репозитории react-bootstrap в папке src/icons/svgs.

Для добавления пользовательских иконок нужно выполнить несколько шагов:

1. Добавить иконку в проект, как правило в папку src/icons/svgs.

2. Перейти в файл src/icons/index.ts, который изначально пустой:

export const icons = {
1   // сюда можно добавить иконки
2};

3. Добавить иконку в конфигурационный объект нужно следующим образом:

export const icons = {
1    kozhinDev: require('./svgs/kozhinDev.svg'),
2};

В данном примере kozhinDev это ключ — название для использования иконки в приложении, а require('./svgs/kozhinDev.svg') значение — путь до файла иконки.

4. Затем, в файле Application.tsx нужно подключить кастомные иконки:

{/* ... */}
1import customIcons from 'icons/index'; // импортируем наш объект с иконками
2
3export default function Application() {
4    const {renderApplication} = useApplication({
5        /* ... */
6        onInit: ({ui}) => {
7            /* Подключаем кастомные иконки, передавая их в качестве аргумента  */
8            ui.addIcons(require('@steroidsjs/bootstrap/icons/index').default(customIcons));
9        },
10    });
11
12    return renderApplication();
13}

5. Теперь, добавленные иконки можно использовать в приложении, обращаясь к ним по названию:

import Icon from '@steroidsjs/core/ui/content/Icon';
1
2export default () => (
3    <Icon name='kozhinDev' />
4);

Добавление кастомных компонентов

В Steroids существует набор компонентов для работы с Redux, с запросами на бэкенд, локализацией и т. д.

Кроме использования уже готовых компонентов, вы также можете:

• Расширить функционал уже существующего компонента, добавив бизнес-логику для конкретного проекта.
• Добавить собственный компонент и передать ему необходимые пропсы.

Далее рассмотрим отдельно каждый способ.

1. Расширение функционала уже существующего компонента

Для примера расширим функционал компонента HttpComponent. Допустим, мы хотим, чтобы при отправке запроса на бекенд добавлялся заголовок Accept-Language для локализации ответа от сервера.

Для начала создаём компонент HttpComponent в папке src/components/. Этот компонент будет расширять встроенный в Steroids компонент, добавляя в метод _send заголовок Accept-Language:

import SteroidsHttpComponent from '@steroidsjs/core/components/HttpComponent';
1
2export default class HttpComponent extends SteroidsHttpComponent {
3    _send(method: string, config?: Record<string, any>, options?: Record<string, any>) {
4        const configWithLanguage = {
5            headers: {
6                'Accept-Language': this._components.locale.language,
7            },
8            ...config,
9
10        };
11        
12        return super._send(method, configWithLanguage, options);
13    }
14}

Далее подключаем расширенный компонент в конфигурацию Application.tsx:

import useApplication from '@steroidsjs/core/hooks/useApplication';
1import LocaleComponent from '@steroidsjs/core/components/LocaleComponent';
2import HttpComponent from './components/HttpComponent'; // импортируем компонент
3
4import 'style/index.scss';
5
6export default function Application() {
7    const {renderApplication} = useApplication({
8        reducers: require('@steroidsjs/core/reducers').default,
9        routes: () => require('routes').default,
10        layoutView: () => require('shared/Layout').default,
11        screen: {},
12        components: {
13            locale: {
14                className: LocaleComponent,
15            },
16            http: {
17                className: HttpComponent, // подключаем кастомный компонент
18                apiUrl: process.env.APP_BACKEND_URL, // дополнительно указываем URL адрес
19                // здесь можно передать необходимые пропсы для компонента
20            },
21        },
22        onInit: ({ui}) => {
23            ui.addViews(require('./ui/bootstrap').default);
24            ui.addFields(require('@steroidsjs/core/ui/form').default);
25            ui.addFormatters(require('@steroidsjs/core/ui/format').default);
26            ui.addIcons(require('@steroidsjs/bootstrap/icons/index').default(customIcons));
27        },
28    });
29
30    return renderApplication();
31}

Примечание: если для конфигурации компонента не нужно пробрасывать дополнительные пропсы, можно использовать краткую запись.

Пример кода:

import useApplication from '@steroidsjs/core/hooks/useApplication';
1import HttpComponent from './components/HttpComponent';
2
3export default function Application() {
4    const {renderApplication} = useApplication({
5        components: {
6            http: HttpComponent,
7        },
8    });
9
10    return renderApplication();
11}

После конфигурации кастомного компонента мы можем получить к нему доступ с помощью хука useComponents, указав его название (так же, как при использовании дефолтного компонента из Steroids).

Ниже представлен пример использования компонента http для получения списка комментариев:

import {useEffect, useState} from 'react';
1import {useComponents} from '@steroidsjs/core/hooks';
2import Comment from './views/Comment';
3import API_METHODS from '../../config/api';
4
5import './Comments.scss';
6
7interface ICommentsProps {
8    userId: number;
9}
10
11export default function Comments(props: ICommentsProps) {
12    const [comments, setComments] = useState([]);
13    const {http} = useComponents();
14
15    useEffect(() => {
16        http.get(API_METHODS.COMMENTS, {userId: props.userId})
17            .then((response) => setComments(response?.items));
18    }, [http, props.userId]);
19
20    return (
21        <div className'Comments'>
22            {
23                comments.map(comment => (
24                    <Comment
25                        key={comment.id}
26                        text={comment.text}
27                    />
28                ))
29            }
30        </div>
31    );
32}

2. Добавление собственного компонента

Помимо расширения функционала уже существующих компонентов, мы можем добавить собственный.

Для этого создаём кастомный компонент в папке src/components/, например ConverterComponent для конвертации валют из рублей в доллары:

export default class ConverterComponent {
1    rub: number;
2
3    course: number;
4
5    constructor(components, config: any = {}) {
6        this.rub = config.initialRubValue;
7        this.course = config.course;
8    }
9
10    rubToUsd(rub: number) {
11        return Number(((rub || this.rub) / this.course).toFixed(2));
12    }
13}

Подключаем ConverterComponent в конфигурацию приложения в Application.tsx, указав в качестве названия ключ converter и передав необходимые для конструктора аргументы:

import useApplication from '@steroidsjs/core/hooks/useApplication';
1import Converter from './components/Converter';
2
3import 'style/index.scss';
4
5export default function Application() {
6    const {renderApplication} = useApplication({
7        reducers: require('@steroidsjs/core/reducers').default,
8        routes: () => require('routes').default,
9        layoutView: () => require('shared/Layout').default,
10        screen: {},
11        components: {
12            converter: {
13                className: Converter,
14                initialRubValue: 100,
15                course: 89,
16            },
17        },
18        onInit: ({ui}) => {
19            ui.addViews(require('./ui/bootstrap').default);
20            ui.addFields(require('@steroidsjs/core/ui/form').default);
21            ui.addFormatters(require('@steroidsjs/core/ui/format').default);
22            ui.addIcons(require('@steroidsjs/bootstrap/icons/index').default(customIcons));
23        },
24    });
25
26    return renderApplication();
27}

Ниже представлен пример использования компонента для конвертации валюты:

import {useEffect} from 'react';
1import {useComponents, useDispatch, useSelector} from '@steroidsjs/core/hooks';
2import {formChange} from '@steroidsjs/core/actions/form';
3import {formSelector} from '@steroidsjs/core/reducers/form';
4import {Form, NumberField} from '@steroidsjs/core/ui/form';
5
6const FORM_ID = 'ConverterForm';
7
8export default function ConverterForm() {
9    const dispatch = useDispatch();
10    const {converter} = useComponents();
11    const formValues = useSelector(state => formSelector(state, FORM_ID, ({values}) => values));
12
13    useEffect(() => {
14        const usd = converter.rubToUsd(Number(formValues?.rub));
15        dispatch(formChange(FORM_ID, 'usd', usd));
16    }, [converter, dispatch, formValues?.rub]);
17
18    return (
19        <Form
20            formId={FORM_ID}
21            useRedux
22            initialValues={{
23                rub: converter.rub,
24            }}
25        >
26            <NumberField
27                attribute='rub'
28                label='Сумма в рублях'
29            />
30            <NumberField
31                attribute='usd'
32                label='Сумма в долларах'
33                disabled
34            />
35        </Form>
36    );
37}