Layout disposti (ft. React TypeScript)

Uno degli elementi costitutivi di una GUI è un layout; potrebbe essere un layout singolo, un layout doppio o anche più layout. Mentre cercavo in rete soluzioni per crearne uno, ho trovato piuttosto difficile imbattermi in un approccio reattivo dattiloscritto alla creazione di layout. Quindi, quando ho sentito di aver compilato una soluzione riutilizzabile decente, ho pensato di poterla condividere. In questo articolo, ti guiderò attraverso il mio processo di sviluppo del layout insieme a tutte le creste e le depressioni che ho passato.

**Poiché questo articolo evidenzia la costruzione di un layout, presuppone almeno una comprensione di livello principiante di React-Typescript.**

Parliamo della struttura dei file prima di arrivare al punto cruciale.
Di solito ci sono tre tipi di CSS elencati di seguito:
- CSS in linea - CSS
interni o incorporati
- CSS esterni
In questo progetto, ho scelto di utilizzare CSS esterni poiché facilita la distinzione nei file. Il CSS esterno conterrà solo la proprietà di stile con l'aiuto degli attributi dei tag. Per brevità, uso:
1. one-column.tsx per racchiudere il contenuto del display insieme agli stili in un unico layout.
2. one-column.styles.ts per css (e sass)
Un modello simile è stabilito per due o più schermi a pannelli.
Tutte le informazioni sullo schermo saranno codificate nelle rispettive cartelle e contenute in 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;

Gli attributi CSS inclusi ( one-column.styles.ts) hanno un aspetto simile a questo:

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

Lo scopo di questa schermata è di visualizzare una singola riga a scopo dimostrativo, quindi questa viene aggiunta nel 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;

Qui, la prima colonna corrisponde al pannello di navigazione e la seconda colonna corrisponde al pannello dei contenuti. Il nostro two-columns.tsx sarà modellato per contenere due colonne, quindi:

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

Grazie per aver letto fin qui!