備忘録。

Compound Patternとは？

参考記事

複合パターン｜フロントエンドのデザインパターン

Reactでコンポーネントを作成するデザインパターンの１つ。

コード例（Component側）

    import { FC, Fragment } from 'react';
import { css } from '@emotion/core';

type ModalSubComponentsType = {
  Content: typeof Content;
  Overlay: typeof Overlay;
};

export const Modal: FC & ModalSubComponentsType = ({ children }) => {
  return <Fragment>{children}</Fragment>;
};

type ContentProps = {
  width?: number;
  height?: number;
  backgroundColor?: string;
};

const Content: FC<ContentProps> = ({
  children,
  width,
  height,
  backgroundColor = '#fff',
}) => {

  return (
    <div
      css={[
        css`
          display: flex;
          flex-direction: column;
          row-gap: 20px;
          background: ${backgroundColor};
          left: 50%;
          position: fixed;
          top: 50%;
          transform: translate(-50%, -50%);
          width: ${width ? `${width}px` : 'auto'};
          height: ${height ? `${height}px` : 'auto'};
          z-index: 10;
        `,
      ]}
    >
      {children}
    </div>
  );
};

type OverlayProps = {
  onClick: () => void;
  backgroundColor?: string;
  opacity?: number;
};
const Overlay: FC<OverlayProps> = ({ onClick, backgroundColor = '#000', opacity = 0.5 }) => {
  return (
    <div
      onClick={onClick}
      css={css`
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: ${backgroundColor};
        opacity: ${opacity};
        width: 100vw;
        height: 100vh;
      `}
    />
  );
};

PlainModal.Content = Content;
PlainModal.Overlay = Overlay
  

    import { FC } from 'react';
import { PlainModal } from './PlainModal';

export const BlockWorkerModal: FC = () => {
  return (
    <PlainModal>
      <PlainModal.Content height={500} width={500}>
        Modal Content
      </PlainModal.Content>
      <PlainModal.Overlay onClick={onClose} />
    </PlainModal>
  );
};