react Architecture Docs
Home / File/ ScrollIntoViewCase.js — react Source File

ScrollIntoViewCase.js — react Source File

Architecture documentation for ScrollIntoViewCase.js, a javascript file in the react codebase. 11 imports, 1 dependents.

File javascript BabelCompiler Optimization 11 imports 1 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  31c15496_1aa2_12cd_6859_37fdcdc9b145["ScrollIntoViewCase.js"]
  14dde3c9_48ef_6e34_3667_978d06aff15d["TestCase.js"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> 14dde3c9_48ef_6e34_3667_978d06aff15d
  e1e356f5_b085_dad5_a81f_4b4844381311["TestCase"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> e1e356f5_b085_dad5_a81f_4b4844381311
  bc8ae172_cc20_3692_943c_bbdb1ad34855["Fixture.js"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> bc8ae172_cc20_3692_943c_bbdb1ad34855
  2851624d_a736_f3f6_2132_5a20630983fe["Fixture"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> 2851624d_a736_f3f6_2132_5a20630983fe
  a3aeab4c_4f93_b8d8_01c2_7a351a28a3fb["Fixture"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> a3aeab4c_4f93_b8d8_01c2_7a351a28a3fb
  7486449c_3e36_bfbd_2139_9b76ff3b0f05["ScrollIntoViewCaseComplex.js"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> 7486449c_3e36_bfbd_2139_9b76ff3b0f05
  96c2ac9d_c342_aef4_fd9e_e67ddc63264d["ScrollIntoViewCaseComplex"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> 96c2ac9d_c342_aef4_fd9e_e67ddc63264d
  dc954d72_882f_8ac7_aa54_99a4a5bbb387["ScrollIntoViewCaseSimple.js"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> dc954d72_882f_8ac7_aa54_99a4a5bbb387
  a35405e2_21ea_6bbe_364b_e4cd9da9d1cf["ScrollIntoViewCaseSimple"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> a35405e2_21ea_6bbe_364b_e4cd9da9d1cf
  54fdfb71_d9cb_227f_9ddd_db85674e3758["ScrollIntoViewTargetElement.js"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> 54fdfb71_d9cb_227f_9ddd_db85674e3758
  4b4658ce_d9f4_1bbb_1e0e_690781063dda["ScrollIntoViewTargetElement"]
  31c15496_1aa2_12cd_6859_37fdcdc9b145 --> 4b4658ce_d9f4_1bbb_1e0e_690781063dda
  463c662d_adfd_912e_a87b_b390bc35e100["index.js"]
  463c662d_adfd_912e_a87b_b390bc35e100 --> 31c15496_1aa2_12cd_6859_37fdcdc9b145
  style 31c15496_1aa2_12cd_6859_37fdcdc9b145 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import TestCase from '../../TestCase';
import Fixture from '../../Fixture';
import ScrollIntoViewCaseComplex from './ScrollIntoViewCaseComplex';
import ScrollIntoViewCaseSimple from './ScrollIntoViewCaseSimple';
import ScrollIntoViewTargetElement from './ScrollIntoViewTargetElement';

const React = window.React;
const {Fragment, useRef, useState, useEffect} = React;
const ReactDOM = window.ReactDOM;

function Controls({
  alignToTop,
  setAlignToTop,
  scrollVertical,
  exampleType,
  setExampleType,
}) {
  return (
    <div>
      <label>
        Example Type:
        <select
          value={exampleType}
          onChange={e => setExampleType(e.target.value)}>
          <option value="simple">Simple</option>
          <option value="multiple">Multiple Scroll Containers</option>
          <option value="horizontal">Horizontal</option>
          <option value="empty">Empty Fragment</option>
        </select>
      </label>
      <div>
        <label>
          Align to Top:
          <input
            type="checkbox"
            checked={alignToTop}
            onChange={e => setAlignToTop(e.target.checked)}
          />
        </label>
      </div>
      <div>
        <button onClick={scrollVertical}>scrollIntoView()</button>
      </div>
    </div>
  );
}

export default function ScrollIntoViewCase() {
  const [exampleType, setExampleType] = useState('simple');
  const [alignToTop, setAlignToTop] = useState(true);
  const [caseInViewport, setCaseInViewport] = useState(false);
  const fragmentRef = useRef(null);
  const testCaseRef = useRef(null);
  const noChildRef = useRef(null);
  const scrollContainerRef = useRef(null);

  const scrollVertical = () => {
    fragmentRef.current.scrollIntoView(alignToTop);
  };

// ... (125 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does ScrollIntoViewCase.js do?
ScrollIntoViewCase.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Optimization subdomain.
What functions are defined in ScrollIntoViewCase.js?
ScrollIntoViewCase.js defines 2 function(s): Controls, ScrollIntoViewCase.
What does ScrollIntoViewCase.js depend on?
ScrollIntoViewCase.js imports 11 module(s): Fixture, Fixture, Fixture.js, ScrollIntoViewCaseComplex, ScrollIntoViewCaseComplex.js, ScrollIntoViewCaseSimple, ScrollIntoViewCaseSimple.js, ScrollIntoViewTargetElement, and 3 more.
What files import ScrollIntoViewCase.js?
ScrollIntoViewCase.js is imported by 1 file(s): index.js.
Where is ScrollIntoViewCase.js in the architecture?
ScrollIntoViewCase.js is located at fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js (domain: BabelCompiler, subdomain: Optimization, directory: fixtures/dom/src/components/fixtures/fragment-refs).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free