New component library based on ALF (#2459)
* Install on native as well
* Add button and link components
* Comments
* Use new prop
* Add some form elements
* Add labels to input
* Fix line height, add suffix
* Date inputs
* Autofill styles
* Clean up InputDate types
* Improve types for InputText, value handling
* Enforce a11y props on buttons
* Add Dialog, Portal
* Dialog contents
* Native dialog
* Clean up
* Fix animations
* Improvements to web modal, exiting still broken
* Clean up dialog types
* Add Prompt, Dialog refinement, mobile refinement
* Integrate new design tokens, reorg storybook
* Button colors
* Dim mode
* Reorg
* Some styles
* Toggles
* Improve a11y
* Autosize dialog, handle max height, Dialog.ScrolLView not working
* Try to use BottomSheet's own APIs
* Scrollable dialogs
* Add web shadow
* Handle overscroll
* Styles
* Dialog text input
* Shadows
* Button focus states
* Button pressed states
* Gradient poc
* Gradient colors and hovers
* Add hrefAttrs to Link
* Some more a11y
* Toggle invalid states
* Update dialog descriptions for demo
* Icons
* WIP Toggle cleanup
* Refactor toggle to not rely on immediate children
* Make Toggle controlled
* Clean up Toggles storybook
* ToggleButton styles
* Improve a11y labels
* ToggleButton hover darkmode
* Some i18n
* Refactor input
* Allow extension of input
* Remove old input
* Improve icons, add CalendarDays
* Refactor DateField, web done
* Add label example
* Clean up old InputDate, DateField android, text area example
* Consistent imports
* Button context, icons
* Add todo
* Add closeAllDialogs control
* Alignment
* Expand color palette
* Hitslops, add shortcut to Storybook in dev
* Fix multiline on ios
* Mark dialog close button as unused
2024-01-19 03:28:04 +01:00
|
|
|
import React from 'react'
|
|
|
|
|
|
|
|
type Component = React.ReactElement
|
|
|
|
|
|
|
|
type ContextType = {
|
|
|
|
outlet: Component | null
|
|
|
|
append(id: string, component: Component): void
|
|
|
|
remove(id: string): void
|
|
|
|
}
|
|
|
|
|
|
|
|
type ComponentMap = {
|
|
|
|
[id: string]: Component
|
|
|
|
}
|
|
|
|
|
2024-01-26 05:22:40 +01:00
|
|
|
export function createPortalGroup() {
|
|
|
|
const Context = React.createContext<ContextType>({
|
|
|
|
outlet: null,
|
|
|
|
append: () => {},
|
|
|
|
remove: () => {},
|
|
|
|
})
|
New component library based on ALF (#2459)
* Install on native as well
* Add button and link components
* Comments
* Use new prop
* Add some form elements
* Add labels to input
* Fix line height, add suffix
* Date inputs
* Autofill styles
* Clean up InputDate types
* Improve types for InputText, value handling
* Enforce a11y props on buttons
* Add Dialog, Portal
* Dialog contents
* Native dialog
* Clean up
* Fix animations
* Improvements to web modal, exiting still broken
* Clean up dialog types
* Add Prompt, Dialog refinement, mobile refinement
* Integrate new design tokens, reorg storybook
* Button colors
* Dim mode
* Reorg
* Some styles
* Toggles
* Improve a11y
* Autosize dialog, handle max height, Dialog.ScrolLView not working
* Try to use BottomSheet's own APIs
* Scrollable dialogs
* Add web shadow
* Handle overscroll
* Styles
* Dialog text input
* Shadows
* Button focus states
* Button pressed states
* Gradient poc
* Gradient colors and hovers
* Add hrefAttrs to Link
* Some more a11y
* Toggle invalid states
* Update dialog descriptions for demo
* Icons
* WIP Toggle cleanup
* Refactor toggle to not rely on immediate children
* Make Toggle controlled
* Clean up Toggles storybook
* ToggleButton styles
* Improve a11y labels
* ToggleButton hover darkmode
* Some i18n
* Refactor input
* Allow extension of input
* Remove old input
* Improve icons, add CalendarDays
* Refactor DateField, web done
* Add label example
* Clean up old InputDate, DateField android, text area example
* Consistent imports
* Button context, icons
* Add todo
* Add closeAllDialogs control
* Alignment
* Expand color palette
* Hitslops, add shortcut to Storybook in dev
* Fix multiline on ios
* Mark dialog close button as unused
2024-01-19 03:28:04 +01:00
|
|
|
|
2024-01-26 05:22:40 +01:00
|
|
|
function Provider(props: React.PropsWithChildren<{}>) {
|
|
|
|
const map = React.useRef<ComponentMap>({})
|
|
|
|
const [outlet, setOutlet] = React.useState<ContextType['outlet']>(null)
|
|
|
|
|
|
|
|
const append = React.useCallback<ContextType['append']>((id, component) => {
|
|
|
|
if (map.current[id]) return
|
|
|
|
map.current[id] = <React.Fragment key={id}>{component}</React.Fragment>
|
|
|
|
setOutlet(<>{Object.values(map.current)}</>)
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
const remove = React.useCallback<ContextType['remove']>(id => {
|
|
|
|
delete map.current[id]
|
|
|
|
setOutlet(<>{Object.values(map.current)}</>)
|
|
|
|
}, [])
|
New component library based on ALF (#2459)
* Install on native as well
* Add button and link components
* Comments
* Use new prop
* Add some form elements
* Add labels to input
* Fix line height, add suffix
* Date inputs
* Autofill styles
* Clean up InputDate types
* Improve types for InputText, value handling
* Enforce a11y props on buttons
* Add Dialog, Portal
* Dialog contents
* Native dialog
* Clean up
* Fix animations
* Improvements to web modal, exiting still broken
* Clean up dialog types
* Add Prompt, Dialog refinement, mobile refinement
* Integrate new design tokens, reorg storybook
* Button colors
* Dim mode
* Reorg
* Some styles
* Toggles
* Improve a11y
* Autosize dialog, handle max height, Dialog.ScrolLView not working
* Try to use BottomSheet's own APIs
* Scrollable dialogs
* Add web shadow
* Handle overscroll
* Styles
* Dialog text input
* Shadows
* Button focus states
* Button pressed states
* Gradient poc
* Gradient colors and hovers
* Add hrefAttrs to Link
* Some more a11y
* Toggle invalid states
* Update dialog descriptions for demo
* Icons
* WIP Toggle cleanup
* Refactor toggle to not rely on immediate children
* Make Toggle controlled
* Clean up Toggles storybook
* ToggleButton styles
* Improve a11y labels
* ToggleButton hover darkmode
* Some i18n
* Refactor input
* Allow extension of input
* Remove old input
* Improve icons, add CalendarDays
* Refactor DateField, web done
* Add label example
* Clean up old InputDate, DateField android, text area example
* Consistent imports
* Button context, icons
* Add todo
* Add closeAllDialogs control
* Alignment
* Expand color palette
* Hitslops, add shortcut to Storybook in dev
* Fix multiline on ios
* Mark dialog close button as unused
2024-01-19 03:28:04 +01:00
|
|
|
|
2024-01-26 05:22:40 +01:00
|
|
|
return (
|
|
|
|
<Context.Provider value={{outlet, append, remove}}>
|
|
|
|
{props.children}
|
|
|
|
</Context.Provider>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function Outlet() {
|
|
|
|
const ctx = React.useContext(Context)
|
|
|
|
return ctx.outlet
|
|
|
|
}
|
|
|
|
|
|
|
|
function Portal({children}: React.PropsWithChildren<{}>) {
|
|
|
|
const {append, remove} = React.useContext(Context)
|
|
|
|
const id = React.useId()
|
|
|
|
React.useEffect(() => {
|
|
|
|
append(id, children as Component)
|
|
|
|
return () => remove(id)
|
|
|
|
}, [id, children, append, remove])
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
|
|
|
return {Provider, Outlet, Portal}
|
New component library based on ALF (#2459)
* Install on native as well
* Add button and link components
* Comments
* Use new prop
* Add some form elements
* Add labels to input
* Fix line height, add suffix
* Date inputs
* Autofill styles
* Clean up InputDate types
* Improve types for InputText, value handling
* Enforce a11y props on buttons
* Add Dialog, Portal
* Dialog contents
* Native dialog
* Clean up
* Fix animations
* Improvements to web modal, exiting still broken
* Clean up dialog types
* Add Prompt, Dialog refinement, mobile refinement
* Integrate new design tokens, reorg storybook
* Button colors
* Dim mode
* Reorg
* Some styles
* Toggles
* Improve a11y
* Autosize dialog, handle max height, Dialog.ScrolLView not working
* Try to use BottomSheet's own APIs
* Scrollable dialogs
* Add web shadow
* Handle overscroll
* Styles
* Dialog text input
* Shadows
* Button focus states
* Button pressed states
* Gradient poc
* Gradient colors and hovers
* Add hrefAttrs to Link
* Some more a11y
* Toggle invalid states
* Update dialog descriptions for demo
* Icons
* WIP Toggle cleanup
* Refactor toggle to not rely on immediate children
* Make Toggle controlled
* Clean up Toggles storybook
* ToggleButton styles
* Improve a11y labels
* ToggleButton hover darkmode
* Some i18n
* Refactor input
* Allow extension of input
* Remove old input
* Improve icons, add CalendarDays
* Refactor DateField, web done
* Add label example
* Clean up old InputDate, DateField android, text area example
* Consistent imports
* Button context, icons
* Add todo
* Add closeAllDialogs control
* Alignment
* Expand color palette
* Hitslops, add shortcut to Storybook in dev
* Fix multiline on ios
* Mark dialog close button as unused
2024-01-19 03:28:04 +01:00
|
|
|
}
|
2024-01-26 05:22:40 +01:00
|
|
|
|
|
|
|
const DefaultPortal = createPortalGroup()
|
|
|
|
export const Provider = DefaultPortal.Provider
|
|
|
|
export const Outlet = DefaultPortal.Outlet
|
|
|
|
export const Portal = DefaultPortal.Portal
|