Создание редактируемых полей

Продолжим серию видео по созданию приложения / SPA «Конструктор PDF резюме» на React с нуля. В этом видео / статье:

• напишем несколько layout компонентов;
• познакомимся с children;
• сделаем редактируемые поля.

Создание layouts компонентов

Основная цель создание таких компонентов - легкий способ «контролирования и редактирование» этих компонентов.

Компонент Descr на начальном этапе будет выглядеть как-то так:

import React from 'react'

const Descr = ({ className, children, ...attrs }) => {
  return <p {...attrs}>{children}</p>
}

export default Descr

Где children - это node / дом дерево А …attrs - это все остальные параметры, типа: style, title, alt, href и т.п.

Установка и использование classnames React

Проблема компонента выше заключается в том, что его невозможно «настроить под себя». Поэтому библиотека classnames поможет это исправить.

Для установки:

npm install classnames

// or
yarn add classnames

Чтобы начать использовать classnames в react компоненте нужно сделать импорт: import classNames from 'classnames’.

Пример компонента с classnames в связки с prop-types будет выглядеть так:

import React from 'react'
import propTypes from 'prop-types'
import classNames from 'classnames'

const Descr = ({ isPrimary, isSecondary, className, children, ...attrs }) => {
  const classes = classNames('ui-text', className, {
    isPrimary,
    isSecondary,
  })

  return (
    <p className={classes} {...attrs}>
      {children}
    </p>
  )
}

Descr.propTypes = {
  isPrimary: propTypes.bool,
  isSecondary: propTypes.bool,
  className: propTypes.string,
  children: propTypes.node.isRequired,
}

Descr.defaultProps = {
  isPrimary: false,
  isSecondary: false,
  className: '',
}

export default Descr

Добавление contentEditable для компонентов

Один из способов сделать content в приложении редактируемым это добавить свойства contentEditable.

Пример готового компонента Title:

const Title = ({ size, isUppercase, className, children, ...attrs }) => {
  const classes = classNames(`ui-title-${size}`, className, { isUppercase })

  return (
    <p
      className={classes}
      contentEditable
      suppressContentEditableWarning
      spellCheck={false}
      {...attrs}
    >
      {children}
    </p>
  )
}

Делаем дизайн при помощи styled-components

В предыдущем видео мы уже установили styled-components поэтому сейчас давайте накидаем небольшой дизайн:

Главный wrapper:

const Wrapper = styled.div`
  max-width: 1200px;
  margin: 2rem auto;
  padding: 3rem 2rem;
  background-color: white;
  border: 1px solid #ececec;
  box-shadow: 5px 7px 10px 4px #ececec;
  border-radius: 14px;
`

Компоненты row, sidebar, content:

const Row = styled.section`
  display: flex;
  flex-wrap: wrap;
  align-items: ${(props) => (props.itemsCenter ? 'center' : 'start')};
  margin: 2rem 0;
`

const Sidebar = styled.div`
  flex: 1;
  margin-right: 1rem;
`

const Content = styled.div`
  flex: 3;
  margin-left: 1rem;
`

Пример построение компонента App.js с константами, которые мы написали выше:

<Row itemsCenter>
  <Avatar onClick={handleAvatarClick} />
  <div>
    <Title>Nick Gerner</Title>
    <Descr>
      Experienced Software & Machine Learning Engineer with a
      demonstrated history.
    </Descr>
  </div>
</Row>

Исходники:

• Полный плейлист этого курса доступен на ютубе
• Код из текущего видео можно скачать кликнув тут
• Исходный код и весь проект вы можете скачать на гитахбе буду рад вашей звездочке ✨