-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'upstream/main' into ianlet/main
- Loading branch information
Showing
17 changed files
with
455 additions
and
258 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
packages/docs/src/routes/demo/events/use-on/use-on-window/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { $, component$, useOnWindow, useSignal } from '@builder.io/qwik'; | ||
|
|
||
| // Custom hook to manage the dropdown state. Listens to click events on the window. | ||
| // If the clicked element is not the dropdown toggle button, it closes the dropdown. | ||
| function useCloseDropdown() { | ||
| // Signal to manage the open/close state of the dropdown | ||
| const isOpen = useSignal(false); | ||
| // Signal to hold a reference to the dropdown toggle button | ||
| const dropdownToggleBtn = useSignal<HTMLElement | null>(null); | ||
|
|
||
| // Event listener function for window clicks | ||
| const closeDropdown = $((event: Event): void => { | ||
| // If the clicked element is not contained within the dropdown toggle button, close the dropdown | ||
| if ( | ||
| dropdownToggleBtn.value && | ||
| !dropdownToggleBtn.value.contains(event.target as Node) | ||
| ) { | ||
| isOpen.value = false; | ||
| } | ||
| }); | ||
| // Attach the window click event listener | ||
| useOnWindow('click', closeDropdown); | ||
|
|
||
| return { | ||
| isOpen, | ||
| dropdownToggleBtn, | ||
| }; | ||
| } | ||
|
|
||
| export default component$(() => { | ||
| // Use the custom hook in the component | ||
| const { isOpen, dropdownToggleBtn } = useCloseDropdown(); | ||
|
|
||
| // Function to set the reference of the dropdown toggle button | ||
| const setDropdownToggleBtnRef = (item: Element): void => { | ||
| dropdownToggleBtn.value = item as HTMLElement; | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <button | ||
| ref={setDropdownToggleBtnRef} | ||
| onClick$={() => (isOpen.value = true)} | ||
| > | ||
| Click me! | ||
| </button> | ||
| {isOpen.value && ( | ||
| <> | ||
| <div> | ||
| <i>The dropdown is open!</i> | ||
| </div> | ||
| <div style={{ margin: '1.5rem', marginLeft: '1.5rem' }}> | ||
| <b>CLICK OUTSIDE</b> | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { ESLintUtils, TSESTree } from '@typescript-eslint/utils'; | ||
|
|
||
| const createRule = ESLintUtils.RuleCreator(() => 'https://qwik.builder.io/docs/advanced/dollar/'); | ||
|
|
||
| export const jsxAtag = createRule({ | ||
| defaultOptions: [], | ||
| name: 'jsx-a-tag', | ||
| meta: { | ||
| type: 'problem', | ||
| docs: { | ||
| description: 'For a perfect SEO score, always provide href attribute for <a> elements.', | ||
| recommended: 'warn', | ||
| }, | ||
| fixable: 'code', | ||
| schema: [], | ||
| messages: { | ||
| noHref: 'For a perfect SEO score, always provide href attribute for <a> elements.', | ||
| }, | ||
| }, | ||
| create(context) { | ||
| return { | ||
| JSXElement(node: TSESTree.JSXElement) { | ||
| if ( | ||
| node.openingElement.name.type === 'JSXIdentifier' && | ||
| node.openingElement.name.name === 'a' | ||
| ) { | ||
| const hasSpread = node.openingElement.attributes.some( | ||
| (attr) => attr.type === 'JSXSpreadAttribute' | ||
| ); | ||
|
|
||
| if (!hasSpread) { | ||
| const hasHref = node.openingElement.attributes.some( | ||
| (attr) => | ||
| attr.type === 'JSXAttribute' && | ||
| attr.name.type === 'JSXIdentifier' && | ||
| attr.name.name === 'href' | ||
| ); | ||
| if (!hasHref) { | ||
| context.report({ | ||
| node: node as any, | ||
| messageId: 'noHref', | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| }; | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.