Układy rozplanowane (np. React TypeScript)

Jednym z elementów składowych GUI jest układ; może to być pojedynczy układ, podwójny układ lub wiele układów. Przeszukując sieć w poszukiwaniu rozwiązań dotyczących ich tworzenia, dość trudno było natknąć się na podejście typu „react-maszynopis” do budowania layoutów. Dlatego, kiedy poczułem, że skompilowałem przyzwoite rozwiązanie wielokrotnego użytku, pomyślałem, że mogę się nim podzielić. W tym artykule przeprowadzę Cię przez proces tworzenia układu wraz ze wszystkimi grzbietami i dolinami, po których przeszłam.

**Ponieważ ten artykuł podkreśla budowę layoutu, zakłada co najmniej poziom zrozumienia React-Typescript na poziomie początkującym.**

Porozmawiajmy o strukturze plików, zanim przejdziemy do sedna sprawy.
Zazwyczaj istnieją trzy typy CSS wymienione poniżej:
-
Wbudowany CSS - Wewnętrzny lub osadzony CSS
- Zewnętrzny CSS
W trakcie tego projektu wybrałem zewnętrzny CSS, ponieważ ułatwia on rozróżnienie w plikach. Zewnętrzny CSS będzie zawierał tylko właściwość stylu za pomocą atrybutów tagów. Dla zwięzłości używam:
1. one-column.tsx do pakowania zawartości wyświetlacza wraz ze stylami w jeden układ.
2. jednokolumnowe style.ts dla css (i sass)
Podobny wzór jest ustalany dla dwóch lub więcej paneli ekranowych.
Wszystkie informacje na ekranie zostaną zakodowane w odpowiednich folderach i zawarte w 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;

Dołączone atrybuty css ( one-column.styles.ts) wyglądają trochę tak:

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,
    }
 }))

Celem tego ekranu jest wyświetlenie pojedynczej linii do celów demonstracyjnych, więc jest to dodawane w 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;

Tutaj pierwsza kolumna odpowiada panelowi nawigacyjnemu, a druga kolumna odpowiada panelowi zawartości. Nasz plik two-columns.tsx zostanie uformowany tak, aby zawierał dwie kolumny, dlatego:

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 />}
  />
)};

Dziękuję za przeczytanie tak daleko!