Разметка макетов (ft. React TypeScript)

Один из строительных блоков графического интерфейса пользователя - это макет; это может быть одиночный макет, двойной макет или несколько макетов. Обыскивая сеть в поисках решений по ее созданию, я обнаружил, что довольно сложно найти подход к построению макетов, основанный на реакции машинописного текста. Следовательно, когда я почувствовал, что скомпилировал достойное решение для многократного использования, я подумал, что могу поделиться им. В этой статье я расскажу вам о моем процессе разработки макета, а также обо всех гребнях и впадинах, которые я просмотрел.

** Поскольку в этой статье рассказывается о создании макета, предполагается, что по крайней мере начальный уровень понимания React-Typescript. **

Давайте поговорим о файловой структуре, прежде чем перейти к сути.
Обычно существует три типа CSS, перечисленных ниже:
- Встроенный CSS
- Внутренний или встроенный CSS
- Внешний CSS
В этом проекте я выбрал внешний CSS, поскольку он облегчает различение файлов. Внешний CSS будет содержать только свойство стиля с помощью атрибутов тега. Для краткости я использую:
1. one-column.tsx для обертывания отображаемого содержимого вместе со стилями в единый макет.
2. one-column.styles.ts для css (и sass)
Аналогичный шаблон установлен для двух или более панельных экранов.
Вся информация на экране будет закодирована в соответствующих папках и содержаться в файлах screens.

...
layouts/
  nav-panel.styles.ts
  nav-panel.tsx
  one-column.styles.ts
  one-column.tsx  
  two-columns.styles.ts
  two-columns.tsx
  ...
routes/
  index.tsx
screens/
  screen-two/
    content-panel/
      index.tsx
    layout.tsx
...

import React from ‘react’;
import { ThemeProvider } from ‘react-jss’;
import theme from ‘../app-theme’;
import useStyles from ‘./one-column.style’;
export interface Props {
    contentPanel: React.ReactElement;
}
const OneColLayoutThemeWrapper: React.FC<Props> = (props) => (<ThemeProvider theme={theme}>
    <OneColLayout {…props} />
</ThemeProvider>);
const OneColLayout: React.FC<Props> = (props) => {
const styles = useStyles();
return <div className={styles.mainLayout}>
    {props.contentPanel}
</div>;
};
export default OneColLayoutThemeWrapper;

Включенные атрибуты css ( one-column.styles.ts) выглядят примерно так:

import { ITheme } from “../app-theme”;
const { createUseStyles } = require(“react-jss”);
export default createUseStyles((theme: ITheme) => ({
    mainLayout: {
        minWidth:"1920px",
        minHeight: "1080px",
        fontSize: "25pt",
        backgroundColor: theme.palette.shade1,
    }
 }))

Цель этого экрана - отобразить одну строку в демонстрационных целях, поэтому она добавляется в content-panel/index.tsx

export interface Props {}
const ContentPanel: React.FC<Props> = (props) => {
    return <div>Wubba Lubba Dub Dub</div>;
};
export default ContentPanel;

export interface Props {}
const ScreenOneLayout: React.FC<Props> = (props) => {
  return <OneColLayoutThemeWrapper 
   contentPanel={<ContentPanel />}
  />
};
export default ScreenOneLayout;

Здесь первый столбец соответствует панели навигации, а второй столбец соответствует панели данных. Наш two-columns.tsx будет сформирован так, чтобы содержать две колонки, поэтому:

export interface Props {
  columnOne: React.ReactElement;
  columnTwo: React.ReactElement;
}
const TwoColsLayoutThemeWrapper: React.FC<Props> = (props) => 
(<ThemeProvider theme={theme}>
  <TwoColsLayout {...props} />
 </ThemeProvider>
);
const TwoColsLayout: React.FC<Props> = (props) => { 
  const styles = useStyles();
  return (
    <div className={styles.twoColumns}>
      <div className={styles.firstColumn}>{props.columnOne} </div>.   
      <div className={styles.secondColumn}>{props.columnTwo}</div>
    </div>
  );
};
export default TwoColsLayoutThemeWrapper;

twoColumns: {
  display: "flex",
  flexDirection: "row",
  width: "100%",
  minHeight: "100vh"
},
firstColumn: {
  minWidth:"300px",
  minHeight: "1080px",
  backgroundColor: theme.palette.shade4,
  display: "inline-block",
  color: theme.white.accent1
},
secondColumn: {
  width:"1620px",
  color: theme.palette.shade4,
  backgroundColor: theme.white.accent1,
  padding:"25px 45px 25px 45px",
}

const ScreenTwoLayout: React.FC<Props> = (props) => {
return (
  <TwoColsLayoutThemeWrapper
    columnOne={<NavPanel />}
    columnTwo={<ContentPanel />}
  />
)};

Спасибо, что дочитали до этого места!