InfoModal.render - Code Metrics - Inspection of "Merge branch 'dev' into feature/add-2fa-support" - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/add-2fa-support ( 23e818...85b1f3 )

by Chris

created 2019-12-02 20:33 UTC

InfoModal.render B

↳ Parent: InfoModal

Complexity

Conditions

Size

Total Lines	88
Code Lines	80

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
eloc	80
dl	0
loc	88
rs	7.6545
c	0
b	0
f	0

How to fix Long Method

import React, { Component, createRef } from "react";

export interface InfoModalProps {
  /** HTML ID for modal attributes */
  id: string;
  /** Title that appears within the modal when open */
  title: string;
  /** Optional subtitle that appears within the open modal */
  subtitle?: string;
  /** Text displayed on the button that displays the modal */
  openText: string;
  /** Text displayed on the modal confirmation button */
  confirmText: string;
  /** React children */
  children?: React.ReactNode;
}

interface InfoModalState {
  /** Height of the modal itself */
  height: number;
  /** Visibility of the modal */
  visible: boolean;
}

class InfoModal extends Component<InfoModalProps, InfoModalState> {
  private divElement = createRef<HTMLDivElement>();

  public constructor(props: InfoModalProps) {
    super(props);

    this.state = { height: 0, visible: false };
  }

  public componentDidMount = (): void => {
    const node = this.divElement.current;
    if (node) {
      const height = node.clientHeight;
      this.setState({ height });
    }
  };

  protected handleSizing = (): string => {
    const viewportHeight = window.outerHeight;
    const { height } = this.state;

    return height > viewportHeight
      ? "active--overflowing"
      : "active--contained";
  };

  private updateBody = (visible: boolean): void => {
    const body = document.querySelector("body");
    if (body) {
      body.style.overflow = visible ? "hidden" : "visible";
    }
  };

  public handleOpen = (event: React.MouseEvent<HTMLButtonElement>): void => {
    event.preventDefault();
    this.setState(() => ({ visible: true }));
    this.updateBody(true);
  };

  public handleClose = (event: React.MouseEvent<HTMLButtonElement>): void => {
    event.preventDefault();
    this.setState(() => ({ visible: false }));
    this.updateBody(false);
  };

  public render(): React.ReactElement {
    const { id, title, subtitle, openText, confirmText, children } = this.props;

    const { visible } = this.state;

    return (
      <>
        <div data-c-alignment="center">
          <button
            className="modal-info__open-button"
            data-c-dialog-id={id}
            data-c-dialog-action="open"
            type="button"
            onClick={this.handleOpen}
          >
            {openText}
          </button>
        </div>

        <div data-c-dialog-overlay={visible && "active"} />

        <div
          aria-hidden={visible}
          aria-describedby={`${id}-description`}
          aria-labelledby={`${id}-title`}
          data-c-dialog=""
          data-c-dialog-id={id}
          data-c-padding="top(double) bottom(double)"
          role="dialog"
          ref={this.divElement}
        >
          <div data-c-background="white(100)" data-c-radius="rounded">
            <div
              data-c-padding="normal"
              data-c-border="bottom(thin, solid, black)"
              data-c-background="black(90)"
              className="modal-info__header"
            >
              <h5
                data-c-font-size="h4"
                data-c-colour="white"
                id={`${id}-title`}
              >
                {title}
              </h5>

              {subtitle && (
                <span data-c-font-size="h5" data-c-margin="top(half)">
                  {subtitle}
                </span>
              )}

              <button
                className="modal-info__close-button"
                data-c-dialog-action="close"
                data-c-dialog-id={id}
                type="button"
                onClick={this.handleClose}
              >
                <i className="fas fa-times" />
              </button>
            </div>

            <div
              data-c-border="bottom(thin, solid, black)"
              data-c-padding="normal"
            >
              <div id={`${id}-description`}>{children}</div>
            </div>

            <div data-c-padding="normal">
              <div data-c-alignment="center">
                <button
                  data-c-button="solid(go)"
                  data-c-radius="rounded"
                  data-c-dialog-action="close"
                  data-c-dialog-id={id}
                  type="button"
                  onClick={this.handleClose}
                >
                  {confirmText}
                </button>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default InfoModal;


1			import React, { Component, createRef } from "react";
2
3			export interface InfoModalProps {
4			/** HTML ID for modal attributes */
5			id: string;
6			/** Title that appears within the modal when open */
7			title: string;
8			/** Optional subtitle that appears within the open modal */
9			subtitle?: string;
10			/** Text displayed on the button that displays the modal */
11			openText: string;
12			/** Text displayed on the modal confirmation button */
13			confirmText: string;
14			/** React children */
15			children?: React.ReactNode;
16			}
17
18			interface InfoModalState {
19			/** Height of the modal itself */
20			height: number;
21			/** Visibility of the modal */
22			visible: boolean;
23			}
24
25			class InfoModal extends Component<InfoModalProps, InfoModalState> {
26			private divElement = createRef<HTMLDivElement>();
27
28			public constructor(props: InfoModalProps) {
29			super(props);
30
31			this.state = { height: 0, visible: false };
32			}
33
34			public componentDidMount = (): void => {
35			const node = this.divElement.current;
36			if (node) {
37			const height = node.clientHeight;
38			this.setState({ height });
39			}
40			};
41
42			protected handleSizing = (): string => {
43			const viewportHeight = window.outerHeight;
44			const { height } = this.state;
45
46			return height > viewportHeight
47			? "active--overflowing"
48			: "active--contained";
49			};
50
51			private updateBody = (visible: boolean): void => {
52			const body = document.querySelector("body");
53			if (body) {
54			body.style.overflow = visible ? "hidden" : "visible";
55			}
56			};
57
58			public handleOpen = (event: React.MouseEvent<HTMLButtonElement>): void => {
59			event.preventDefault();
60			this.setState(() => ({ visible: true }));
61			this.updateBody(true);
62			};
63
64			public handleClose = (event: React.MouseEvent<HTMLButtonElement>): void => {
65			event.preventDefault();
66			this.setState(() => ({ visible: false }));
67			this.updateBody(false);
68			};
69
70			public render(): React.ReactElement {
71			const { id, title, subtitle, openText, confirmText, children } = this.props;
72
73			const { visible } = this.state;
74
75			return (
76			<>
77			<div data-c-alignment="center">
78			<button
79			className="modal-info__open-button"
80			data-c-dialog-id={id}
81			data-c-dialog-action="open"
82			type="button"
83			onClick={this.handleOpen}
84			>
85			{openText}
86			</button>
87			</div>
88
89			<div data-c-dialog-overlay={visible && "active"} />
90
91			<div
92			aria-hidden={visible}
93			aria-describedby={`${id}-description`}
94			aria-labelledby={`${id}-title`}
95			data-c-dialog=""
96			data-c-dialog-id={id}
97			data-c-padding="top(double) bottom(double)"
98			role="dialog"
99			ref={this.divElement}
100			>
101			<div data-c-background="white(100)" data-c-radius="rounded">
102			<div
103			data-c-padding="normal"
104			data-c-border="bottom(thin, solid, black)"
105			data-c-background="black(90)"
106			className="modal-info__header"
107			>
108			<h5
109			data-c-font-size="h4"
110			data-c-colour="white"
111			id={`${id}-title`}
112			>
113			{title}
114			</h5>
115
116			{subtitle && (
117			<span data-c-font-size="h5" data-c-margin="top(half)">
118			{subtitle}
119			</span>
120			)}
121
122			<button
123			className="modal-info__close-button"
124			data-c-dialog-action="close"
125			data-c-dialog-id={id}
126			type="button"
127			onClick={this.handleClose}
128			>
129			<i className="fas fa-times" />
130			</button>
131			</div>
132
133			<div
134			data-c-border="bottom(thin, solid, black)"
135			data-c-padding="normal"
136			>
137			<div id={`${id}-description`}>{children}</div>
138			</div>
139
140			<div data-c-padding="normal">
141			<div data-c-alignment="center">
142			<button
143			data-c-button="solid(go)"
144			data-c-radius="rounded"
145			data-c-dialog-action="close"
146			data-c-dialog-id={id}
147			type="button"
148			onClick={this.handleClose}
149			>
150			{confirmText}
151			</button>
152			</div>
153			</div>
154			</div>
155			</div>
156			</>
157			);
158			}
159			}
160
161			export default InfoModal;
162

GCTC-NTGC / TalentCloud

Push — feature/add-2fa-support ( 23e818...85b1f3 )

InfoModal.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like