From f762f4663662c13c47100c86b15448993effecbd Mon Sep 17 00:00:00 2001 From: ako92 Date: Fri, 7 Aug 2020 22:23:49 +0430 Subject: [PATCH 1/6] package use-onclickoutside added --- .../docusaurus-theme-classic/package.json | 3 ++- yarn.lock | 25 +++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 15fcbe1f43c0..f20df340b28a 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -26,7 +26,8 @@ "prismjs": "^1.20.0", "prop-types": "^15.7.2", "react-router-dom": "^5.1.2", - "react-toggle": "^4.1.1" + "react-toggle": "^4.1.1", + "use-onclickoutside": "^0.3.1" }, "devDependencies": { "@docusaurus/module-type-aliases": "^2.0.0-alpha.61", diff --git a/yarn.lock b/yarn.lock index f8ca800f29bc..72c35006a2f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4947,6 +4947,11 @@ archiver@^4.0.0: tar-stream "^2.1.2" zip-stream "^3.0.1" +are-passive-events-supported@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/are-passive-events-supported/-/are-passive-events-supported-1.1.1.tgz#3db180a1753a2186a2de50a32cded3ac0979f5dc" + integrity sha512-5wnvlvB/dTbfrCvJ027Y4L4gW/6Mwoy1uFSavney0YO++GU+0e/flnjiBBwH+1kh7xNCgCOGvmJC3s32joYbww== + are-we-there-yet@~1.1.2: version "1.1.5" resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21" @@ -21043,6 +21048,26 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-isomorphic-layout-effect@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.0.0.tgz#f56b4ed633e1c21cd9fc76fe249002a1c28989fb" + integrity sha512-JMwJ7Vd86NwAt1jH7q+OIozZSIxA4ND0fx6AsOe2q1H8ooBUp5aN6DvVCqZiIaYU6JaMRJGyR0FO7EBCIsb/Rg== + +use-latest@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.1.0.tgz#7bf9684555869c3f5f37e10d0884c8accf4d3aa6" + integrity sha512-gF04d0ZMV3AMB8Q7HtfkAWe+oq1tFXP6dZKwBHQF5nVXtGsh2oAYeeqma5ZzxtlpOcW8Ro/tLcfmEodjDeqtuw== + dependencies: + use-isomorphic-layout-effect "^1.0.0" + +use-onclickoutside@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/use-onclickoutside/-/use-onclickoutside-0.3.1.tgz#fdd723a6a499046b6bc761e4a03af432eee5917b" + integrity sha512-aahvbW5+G0XJfzj31FJeLsvc6qdKbzeTsQ8EtkHHq5qTg6bm/qkJeKLcgrpnYeHDDbd7uyhImLGdkbM9BRzOHQ== + dependencies: + are-passive-events-supported "^1.1.0" + use-latest "^1.0.0" + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" From 540644539ebd96a81685194e6ca3018302484276 Mon Sep 17 00:00:00 2001 From: ako92 Date: Fri, 7 Aug 2020 22:24:14 +0430 Subject: [PATCH 2/6] fix:dropdown toggle updated and tab behavior fixed --- .../theme/NavbarItem/DefaultNavbarItem.tsx | 56 ++++++++++++++----- 1 file changed, 41 insertions(+), 15 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx index 80659c6d0e3e..682ec0a8aea6 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx @@ -5,10 +5,11 @@ * LICENSE file in the root directory of this source tree. */ -import React, {ComponentProps, ComponentType} from 'react'; +import React, {ComponentProps, ComponentType, useState} from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import useOnClickOutside from 'use-onclickoutside'; function NavLink({ activeBasePath, @@ -33,6 +34,7 @@ function NavLink({ const toUrl = useBaseUrl(to); const activeBaseUrl = useBaseUrl(activeBasePath); const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true}); + return ( (null); + const dropDownChildrenRef = React.useRef(null); + const [showDropDown, setShowDropDown] = useState(false); + useOnClickOutside(dropDownRef, () => toggle(false)); + function toggle(state: boolean) { + if ( + state && + dropDownChildrenRef && + dropDownChildrenRef.current && + dropDownChildrenRef.current.firstChild && + dropDownChildrenRef.current.firstChild.firstChild + ) { + dropDownChildrenRef.current.firstChild.firstChild.focus(); + } + setShowDropDown(state); + } const navLinkClassNames = (extraClassName, isDropdownItem = false) => clsx( { @@ -76,32 +94,40 @@ function NavItemDesktop({items, position, className, ...props}) { return (
+ ref={dropDownRef} + className={clsx( + 'navbar__item', + 'dropdown', + 'dropdown--hoverable', + { + 'dropdown--left': position === 'left', + + 'dropdown--right': position === 'right', + }, + {'dropdown--show': showDropDown}, + )}> e.preventDefault()} onKeyDown={(e) => { - function toggle() { - ((e.target as HTMLElement) - .parentNode as HTMLElement).classList.toggle('dropdown--show'); - } - if (e.key === 'Enter' && !props.to) { - toggle(); - } - if (e.key === 'Tab') { - toggle(); + if ((e.key === 'Enter' && !props.to) || e.key === 'Tab') { + e.preventDefault(); + toggle(true); } }}> {props.label} -
    +
      {items.map(({className: childItemClassName, ...childItemProps}, i) => (
    • { + if (i === items.length - 1 && e.key === 'Tab') { + e.preventDefault(); + toggle(false); + } + }} activeClassName="dropdown__link--active" className={navLinkClassNames(childItemClassName, true)} {...childItemProps} From 065b9993cf69eb3748d41d47d35390190dd12d09 Mon Sep 17 00:00:00 2001 From: ako92 Date: Fri, 7 Aug 2020 22:33:53 +0430 Subject: [PATCH 3/6] fix:variable name and type checker on drop down updated --- .../src/theme/NavbarItem/DefaultNavbarItem.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx index 682ec0a8aea6..834f57d76765 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx @@ -64,18 +64,18 @@ function NavLink({ function NavItemDesktop({items, position, className, ...props}) { const dropDownRef = React.useRef(null); - const dropDownChildrenRef = React.useRef(null); + const dropDownMenuRef = React.useRef(null); // TODO should find better solution for this. anything else will get a error when retrieve children. const [showDropDown, setShowDropDown] = useState(false); useOnClickOutside(dropDownRef, () => toggle(false)); function toggle(state: boolean) { if ( state && - dropDownChildrenRef && - dropDownChildrenRef.current && - dropDownChildrenRef.current.firstChild && - dropDownChildrenRef.current.firstChild.firstChild + dropDownMenuRef && + dropDownMenuRef.current && + dropDownMenuRef.current.firstChild && + dropDownMenuRef.current.firstChild.firstChild ) { - dropDownChildrenRef.current.firstChild.firstChild.focus(); + dropDownMenuRef.current.firstChild.firstChild.focus(); } setShowDropDown(state); } @@ -118,7 +118,7 @@ function NavItemDesktop({items, position, className, ...props}) { }}> {props.label} -
        +
          {items.map(({className: childItemClassName, ...childItemProps}, i) => (
        • Date: Sat, 8 Aug 2020 15:17:46 +0430 Subject: [PATCH 4/6] fix: optional chaining added to dropdown toggle function --- .../theme/NavbarItem/DefaultNavbarItem.tsx | 32 +++++++------------ 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx index 834f57d76765..eb05a52a31ad 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx @@ -64,18 +64,16 @@ function NavLink({ function NavItemDesktop({items, position, className, ...props}) { const dropDownRef = React.useRef(null); - const dropDownMenuRef = React.useRef(null); // TODO should find better solution for this. anything else will get a error when retrieve children. + const dropDownMenuRef = React.useRef(null); // TODO should find better solution for this. anything else will get a error when retrieve children. const [showDropDown, setShowDropDown] = useState(false); useOnClickOutside(dropDownRef, () => toggle(false)); function toggle(state: boolean) { - if ( - state && - dropDownMenuRef && - dropDownMenuRef.current && - dropDownMenuRef.current.firstChild && - dropDownMenuRef.current.firstChild.firstChild - ) { - dropDownMenuRef.current.firstChild.firstChild.focus(); + if (state) { + const firstNavLinkOfULElement = + dropDownMenuRef?.current?.firstChild?.firstChild; + if (firstNavLinkOfULElement) { + firstNavLinkOfULElement.focus(); + } } setShowDropDown(state); } @@ -95,17 +93,11 @@ function NavItemDesktop({items, position, className, ...props}) { return (
          + className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', { + 'dropdown--left': position === 'left', + 'dropdown--right': position === 'right', + 'dropdown--show': showDropDown, + })}> Date: Sat, 8 Aug 2020 19:43:29 +0430 Subject: [PATCH 5/6] fix: package.json problem fixed and type of element updated --- packages/docusaurus-theme-classic/package.json | 2 +- .../src/theme/NavbarItem/DefaultNavbarItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 60cb44979873..6602523d71ef 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -27,7 +27,7 @@ "prop-types": "^15.7.2", "react-router-dom": "^5.1.2", "react-toggle": "^4.1.1", - "use-onclickoutside": "^0.3.1" + "use-onclickoutside": "^0.3.1", "@docusaurus/utils-validation": "^2.0.0-alpha.61" }, "devDependencies": { diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx index eb05a52a31ad..0a46a1a9d823 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx @@ -64,7 +64,7 @@ function NavLink({ function NavItemDesktop({items, position, className, ...props}) { const dropDownRef = React.useRef(null); - const dropDownMenuRef = React.useRef(null); // TODO should find better solution for this. anything else will get a error when retrieve children. + const dropDownMenuRef = React.useRef(null); // TODO should find better solution for this. anything else will get a error when retrieve children. const [showDropDown, setShowDropDown] = useState(false); useOnClickOutside(dropDownRef, () => toggle(false)); function toggle(state: boolean) { From b145dde57f38e7d25c166ebaeb33dd4557769c2e Mon Sep 17 00:00:00 2001 From: ako92 Date: Sat, 8 Aug 2020 20:05:57 +0430 Subject: [PATCH 6/6] fix:type problem fixed --- .../src/theme/NavbarItem/DefaultNavbarItem.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx index 0a46a1a9d823..e1bbe0e822a1 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx @@ -64,15 +64,16 @@ function NavLink({ function NavItemDesktop({items, position, className, ...props}) { const dropDownRef = React.useRef(null); - const dropDownMenuRef = React.useRef(null); // TODO should find better solution for this. anything else will get a error when retrieve children. + const dropDownMenuRef = React.useRef(null); const [showDropDown, setShowDropDown] = useState(false); useOnClickOutside(dropDownRef, () => toggle(false)); function toggle(state: boolean) { if (state) { const firstNavLinkOfULElement = dropDownMenuRef?.current?.firstChild?.firstChild; + if (firstNavLinkOfULElement) { - firstNavLinkOfULElement.focus(); + (firstNavLinkOfULElement as HTMLElement).focus(); } } setShowDropDown(state);