generated from nl-design-system/example
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This commit updates the code to use the simplified ref handling introduced in React 19. - Removed unnecessary `forwardRef` wrappers. - Passed refs directly as props to function components. This change simplifies the code and improves readability while taking advantage of the latest React features.
- Loading branch information
Showing
4 changed files
with
117 additions
and
119 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,55 @@ | ||
| import { Heading, Paragraph, Alert as UtrechtAlert } from '@utrecht/component-library-react'; | ||
| import clsx from 'clsx'; | ||
| import { ForwardedRef, forwardRef, PropsWithChildren, ReactNode } from 'react'; | ||
| import { PropsWithChildren, ReactNode, RefObject } from 'react'; | ||
| import { Icon } from './icon/Icon'; | ||
|
|
||
| export interface AlertProps { | ||
| ref?: RefObject<HTMLDivElement>; | ||
| type: 'info' | 'ok' | 'warning' | 'error'; | ||
| heading?: ReactNode; | ||
| headingLevel?: 1 | 2 | 3 | 4 | 5; | ||
| textContent?: ReactNode; | ||
| } | ||
| export const Alert = forwardRef( | ||
| ( | ||
| { type, heading, headingLevel, textContent, children, ...restProps }: PropsWithChildren<AlertProps>, | ||
| ref: ForwardedRef<HTMLDivElement>, | ||
| ) => { | ||
| return ( | ||
| <UtrechtAlert className="rhc-alert" ref={ref} type={type} {...restProps}> | ||
| <div | ||
| className={clsx('rhc-alert__icon-container', { | ||
| 'rhc-alert__icon-container--ok': type === 'ok', | ||
| 'rhc-alert__icon-container--error': type === 'error', | ||
| 'rhc-alert__icon-container--warning': type === 'warning', | ||
| 'rhc-alert__icon-container--info': type === 'info', | ||
| })} | ||
| > | ||
| <Icon | ||
| icon={ | ||
| type === 'info' | ||
| ? 'info-circle' | ||
| : type === 'ok' | ||
| ? 'circle-check' | ||
| : type === 'warning' | ||
| ? 'let-op' | ||
| : 'alert-circle' | ||
| } | ||
| /> | ||
| </div> | ||
| <div> | ||
| <Heading appearance="utrecht-heading-5" level={headingLevel || 3}> | ||
| {heading} | ||
| </Heading> | ||
| <Paragraph>{textContent}</Paragraph> | ||
| {children} | ||
| </div> | ||
| </UtrechtAlert> | ||
| ); | ||
| }, | ||
| ); | ||
| export const Alert = ({ | ||
| ref, | ||
| type, | ||
| heading, | ||
| headingLevel, | ||
| textContent, | ||
| children, | ||
| ...restProps | ||
| }: PropsWithChildren<AlertProps>) => { | ||
| return ( | ||
| <UtrechtAlert className="rhc-alert" ref={ref} type={type} {...restProps}> | ||
| <div | ||
| className={clsx('rhc-alert__icon-container', { | ||
| 'rhc-alert__icon-container--ok': type === 'ok', | ||
| 'rhc-alert__icon-container--error': type === 'error', | ||
| 'rhc-alert__icon-container--warning': type === 'warning', | ||
| 'rhc-alert__icon-container--info': type === 'info', | ||
| })} | ||
| > | ||
| <Icon | ||
| icon={ | ||
| type === 'info' | ||
| ? 'info-circle' | ||
| : type === 'ok' | ||
| ? 'circle-check' | ||
| : type === 'warning' | ||
| ? 'let-op' | ||
| : 'alert-circle' | ||
| } | ||
| /> | ||
| </div> | ||
| <div> | ||
| <Heading appearance="utrecht-heading-5" level={headingLevel || 3}> | ||
| {heading} | ||
| </Heading> | ||
| <Paragraph>{textContent}</Paragraph> | ||
| {children} | ||
| </div> | ||
| </UtrechtAlert> | ||
| ); | ||
| }; | ||
|
|
||
| Alert.displayName = 'Alert'; |
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 |
|---|---|---|
| @@ -1,24 +1,18 @@ | ||
| import * as prettier from 'prettier'; | ||
| import pluginHTML from 'prettier/plugins/html'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { use } from 'react'; | ||
|
|
||
| interface Props { | ||
| ugly: string; | ||
| } | ||
|
|
||
| export function Prettify({ ugly }: Props): string { | ||
| const [prettySrc, setPrettySrc] = useState(''); | ||
| useEffect(() => { | ||
| const prettify = async () => { | ||
| const pretty = await prettier.format(ugly, { | ||
| parser: 'html', | ||
| plugins: [pluginHTML], | ||
| }); | ||
| setPrettySrc(pretty); | ||
| }; | ||
| const prettify = async () => { | ||
| return prettier.format(ugly, { | ||
| parser: 'html', | ||
| plugins: [pluginHTML], | ||
| }); | ||
| }; | ||
|
|
||
| prettify(); | ||
| }, []); | ||
|
|
||
| return prettySrc; | ||
| return use(prettify()); | ||
| } |