-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add render features + render strategy (#106)
* add unmount strategy to README (React)
* add unmount strategy to README (Vue)
* add different render features (React)
* use render features in Menu and Listbox (React)
* add different render features (Vue)
* use render features in Menu and Listbox (Vue)
* bump dependencies
* add ability to change the ref property using `refName`
Example use case:
```tsx
// Some components have this API with an `innerRef`. The suggested approach is to use
// `React.forwardRef` so that you get the actual `ref` value. However if you already have this
// `innerRef` API than we can use the `refName="innerRef"` to give the `ref` prop a good name. It
// defaults to `ref` so that it still works everywhere else.
function MyButton({ innerRef, ...props }) {
return <button ref={innerRef} {...props} />
}
<Menu.Button as={MyButton} refName="innerRef" />
```
* small cleanup, move refs to props we control
* add tests for the render abstraction (Render)
+ use the unique __ symbol as a default value in the Props type for the
omitable props.
* use render features in Transition (React)
* add/update Transition examples to also showcase the `unmount={false}` render strategy
* bump dependencies
* add example with nested unmount/hide transitions
* add unmount to Transition documentation- Loading branch information
1 parent
7d4af1a
commit aab23c9
Showing
26 changed files
with
2,467 additions
and
981 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
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
60 changes: 60 additions & 0 deletions
60
packages/@headlessui-react/pages/transitions/component-examples/nested/hidden.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,60 @@ | ||
| import React, { useState } from 'react' | ||
| import { Transition } from '@headlessui/react' | ||
|
|
||
| export default function Home() { | ||
| const [isOpen, setIsOpen] = useState(true) | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex justify-center w-screen h-full p-12 bg-gray-50"> | ||
| <div className="space-y-2 w-96"> | ||
| <span className="inline-flex rounded-md shadow-sm"> | ||
| <button | ||
| type="button" | ||
| onClick={() => setIsOpen(v => !v)} | ||
| className="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition bg-white border border-gray-300 rounded-md duration-150-out hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50" | ||
| > | ||
| {isOpen ? 'Hide' : 'Show'} | ||
| </button> | ||
| </span> | ||
|
|
||
| <Transition show={isOpen} unmount={false}> | ||
| <Box> | ||
| <Box> | ||
| <Box> | ||
| <Box /> | ||
| </Box> | ||
| <Box> | ||
| <Box> | ||
| <Box> | ||
| <Box /> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Transition> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| function Box({ children }: { children?: React.ReactNode }) { | ||
| return ( | ||
| <Transition.Child | ||
| unmount={false} | ||
| enter="transition translate duration-300" | ||
| enterFrom="transform -translate-x-full" | ||
| enterTo="transform translate-x-0" | ||
| leave="transition translate duration-300" | ||
| leaveFrom="transform translate-x-0" | ||
| leaveTo="transform translate-x-full" | ||
| > | ||
| <div className="p-4 space-y-2 text-sm font-semibold tracking-wide text-gray-700 uppercase bg-white rounded-md shadow"> | ||
| <span>This is a box</span> | ||
| {children} | ||
| </div> | ||
| </Transition.Child> | ||
| ) | ||
| } |
60 changes: 60 additions & 0 deletions
60
packages/@headlessui-react/pages/transitions/component-examples/nested/unmount.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,60 @@ | ||
| import React, { useState } from 'react' | ||
| import { Transition } from '@headlessui/react' | ||
|
|
||
| export default function Home() { | ||
| const [isOpen, setIsOpen] = useState(true) | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex justify-center w-screen h-full p-12 bg-gray-50"> | ||
| <div className="space-y-2 w-96"> | ||
| <span className="inline-flex rounded-md shadow-sm"> | ||
| <button | ||
| type="button" | ||
| onClick={() => setIsOpen(v => !v)} | ||
| className="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition bg-white border border-gray-300 rounded-md duration-150-out hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50" | ||
| > | ||
| {isOpen ? 'Hide' : 'Show'} | ||
| </button> | ||
| </span> | ||
|
|
||
| <Transition show={isOpen} unmount={true}> | ||
| <Box> | ||
| <Box> | ||
| <Box> | ||
| <Box /> | ||
| </Box> | ||
| <Box> | ||
| <Box> | ||
| <Box> | ||
| <Box /> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Transition> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| function Box({ children }: { children?: React.ReactNode }) { | ||
| return ( | ||
| <Transition.Child | ||
| unmount={true} | ||
| enter="transition translate duration-300" | ||
| enterFrom="transform -translate-x-full" | ||
| enterTo="transform translate-x-0" | ||
| leave="transition translate duration-300" | ||
| leaveFrom="transform translate-x-0" | ||
| leaveTo="transform translate-x-full" | ||
| > | ||
| <div className="p-4 space-y-2 text-sm font-semibold tracking-wide text-gray-700 uppercase bg-white rounded-md shadow"> | ||
| <span>This is a box</span> | ||
| {children} | ||
| </div> | ||
| </Transition.Child> | ||
| ) | ||
| } |
38 changes: 38 additions & 0 deletions
38
packages/@headlessui-react/pages/transitions/component-examples/peek-a-boo.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,38 @@ | ||
| import React, { useState } from 'react' | ||
| import { Transition } from '@headlessui/react' | ||
|
|
||
| export default function Home() { | ||
| const [isOpen, setIsOpen] = useState(true) | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex justify-center w-screen h-full p-12 bg-gray-50"> | ||
| <div className="space-y-2 w-96"> | ||
| <span className="inline-flex rounded-md shadow-sm"> | ||
| <button | ||
| type="button" | ||
| onClick={() => setIsOpen(v => !v)} | ||
| className="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50" | ||
| > | ||
| {isOpen ? 'Hide' : 'Show'} | ||
| </button> | ||
| </span> | ||
|
|
||
| <Transition | ||
| show={isOpen} | ||
| unmount={false} | ||
| enter="transition ease-out duration-300" | ||
| enterFrom="transform opacity-0" | ||
| enterTo="transform opacity-100" | ||
| leave="transition ease-in duration-300" | ||
| leaveFrom="transform opacity-100" | ||
| leaveTo="transform opacity-0" | ||
| className="p-4 bg-white rounded-md shadow" | ||
| > | ||
| Contents to show and hide | ||
| </Transition> | ||
| </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
Oops, something went wrong.