githubmirror/immutable-js

website/src/Sidebar.tsx
184 строки5 KB
Julien Deniau
replace tslint by typescript-eslint (#1979)
29 янв 2024, 22:43
29 янв 2024, 22:43b3d6e1b
'use client';

import Link from 'next/link';
import { Fragment, useEffect, useState } from 'react';
import type { TypeDefinition } from './TypeDefs';
import { collectMemberGroups } from './collectMemberGroups';
import { ArrowDown } from './ArrowDown';

export type SidebarLinks = Array<{ label: string; url: string }>;

function Links({
  links,
  focus,
  showInGroups,
  showInherited,
}: {
  links: SidebarLinks;
  focus?: TypeDefinition;
  showInGroups?: boolean;
  showInherited?: boolean;
}) {
  const [isForcedClosed, setIsForcedClosed] = useState(false);
  useEffect(() => {
    setIsForcedClosed(false);
  }, [focus?.label]);

  return (
    <div>
      <h2>Immutable.js</h2>
      {links.map(link => {
        const isCurrent = focus?.label === link.label;
        const isActive = isCurrent && !isForcedClosed;
        return (
          <Fragment key={link.url}>
            <div
              className={`sideBar__Link ${
                isActive ? 'sideBar__Link--active' : ''
              }`}
            >
              <Link
                href={link.url}
                onClick={e => {
                  if (isCurrent) {
                    e.preventDefault();
                    setIsForcedClosed(!isForcedClosed);
                  }
                }}
              >
                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/anchor-is-valid */}

                {link.label}
                {isActive && (focus?.interface || focus?.functions) && (
                  <>
                    {' '}
                    <ArrowDown isActive={isActive} />
                  </>
                )}
              </Link>
            </div>

            {isActive && (
              <Focus
                focus={focus}
                showInherited={showInherited}
                showInGroups={showInGroups}
              />
            )}
          </Fragment>
        );
      })}
    </div>
  );
}

function Focus({
  focus,
  showInGroups,
  showInherited,
}: {
  focus?: TypeDefinition;
  showInGroups?: boolean;
  showInherited?: boolean;
}) {
  if (!focus || (!focus.interface && !focus.functions)) {
    return null;
  }

  return (
    <div className="members">
      {focus.call && (
        <section>
          <h4 className="groupTitle">Construction</h4>
          <div>
            <Link href={focus.call.url}>{focus.call.label}</Link>
          </div>
        </section>
      )}

      {focus.functions && (
        <section>
          <h4 className="groupTitle">Static Methods</h4>
          {Object.values(focus.functions).map(fn => (
            <div key={fn.id}>
              <Link href={fn.url}>{fn.label}</Link>
            </div>
          ))}
        </section>
      )}

      <section>
        {collectMemberGroups(
          focus.interface,
          showInGroups,
          showInherited
        ).flatMap(([title, groupMembers]) =>
          groupMembers.length === 0
            ? null
            : [
                <h4 key={title || 'Members'} className="groupTitle">
                  {title || 'Members'}
                </h4>,
                groupMembers.map(member => (
                  <div key={member.id}>
                    <Link href={member.url}>{member.label}</Link>
                  </div>
                )),
              ]
        )}
      </section>
    </div>
  );
}

export function SideBar({
  links,
  focus,
  toggleShowInherited,
  toggleShowInGroups,
  showInherited,
  showInGroups,
}: {
  links: SidebarLinks;
  focus?: TypeDefinition;
  toggleShowInherited?: () => void;
  toggleShowInGroups?: () => void;
  showInherited?: boolean;
  showInGroups?: boolean;
}) {
  return (
    <div className="sideBar">
      <div className="sideBar__background" />
      <div className="scrollContent">
        {toggleShowInherited && toggleShowInGroups && (
          <div className="toolBar">
            <div onClick={toggleShowInGroups} onKeyPress={toggleShowInGroups}>
              <span className={showInGroups ? 'selected' : undefined}>
                Grouped
              </span>
              {' • '}
              <span className={!showInGroups ? 'selected' : undefined}>
                Alphabetized
              </span>
            </div>
            <div onClick={toggleShowInherited} onKeyPress={toggleShowInherited}>
              <span className={showInherited ? 'selected' : undefined}>
                Inherited
              </span>
              {' • '}
              <span className={!showInherited ? 'selected' : undefined}>
                Defined
              </span>
            </div>
          </div>
        )}
        <Links
          links={links}
          focus={focus}
          showInGroups={showInGroups}
          showInherited={showInherited}
        />
      </div>
    </div>
  );
}