Ответы пользователя по тегу Фронтенд
  • Как реализовать этот ползунок?

    @SuperOleg39ru
    Front-end разработчик
    1) Треугольная форма прогресс-бара делается бордерами: https://css-tricks.com/snippets/css/css-triangle/

    2) Движение ползунков, ключевые моменты:
    Событие mousedown вы отслеживаете на ползунке либо на прогресс-баре.
    Внутри обработки mousedown вешаете события mousemove и mouseup на document или window (не забудьте их убрать по mouseup)

    Во время mousemove вычисляете положение курсора относительно левого края слайдера (например event.clientX - sliderElement.getBoundingClientRect().left).

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

    Еще, для адаптивности, желательно все из пикселей в % переводить
    Ответ написан
    Комментировать
  • Как протестить то, что случится после нажатия кнопки в React(Jest, enzyme)?

    @SuperOleg39ru
    Front-end разработчик
    На самом деле вам не нужно это тестировать.

    Разделяйте тестирование частей React + Redux приложения:

    1) Отдельно reducer и соответствующие actions, что делать очень просто, так как это чистые функции и простые объекты.

    2) Отдельно react компонент, и вы должны проверить только то, что при simulate('click') вызовется соответствующий обработчик.
    Пример:
    const props = {
        onClick: jest.fn()
    };
    let component;
    
    beforeEach(() => {
        component = enzyme.shallow(<Button {...props} />);
    });
    
    it('срабатывает событие onClick', () => {
        field.simulate('click');
        expect(props.onClick).toHaveBeenCalled();
    });


    Если вам нужно проверить, отреагировал ли компонент на изменение его свойств, то вы меняете его свойства напрямую через component.setProps({ key: 'value' });
    Ответ написан
    Комментировать
  • С помощью каких технологий лучше разработать визуальный Drag&Drop конструктор?

    @SuperOleg39ru
    Front-end разработчик
    Существуют drag&drop библиотеки и для ванильного js, и для фреймворков.

    Вот топовая библиотека - https://bevacqua.github.io/dragula/

    Вот библиотека для использования с React - react-dnd.github.io/react-dnd

    React или Angular нужны вам для создания аккуратной, модульной и расширяемой кодовой базы. Но если вы ими не пользовались, или опыта немного, конечно в начале их использование притормозит работу, но в конечном счете оно того стоит.
    Ответ написан
    1 комментарий