Skip to content

Commit

Permalink
Update storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
@garronej
garronej committed Jul 1, 2023
1 parent ece142a commit 10d4375
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 112 deletions.
84 changes: 26 additions & 58 deletions stories/Header.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,48 +259,6 @@ export const WithControlledSearchBar = getStory(
\`\`\`tsx
type MySearchInputProps = {
className?: string;
id: string;
placeholder: string;
type: "search";
search: string;
onSearchChange: (search: string) => void;
};
function MySearchInput(props: MySearchInputProps) {
const { className, id, placeholder, type, search, onSearchChange } = props;
const [
inputElement,
setInputElement
] = useState<HTMLInputElement | null>(null);
return (
<input
ref={setInputElement}
className={className}
id={id}
placeholder={placeholder}
type={type}
value={search}
// Note: The default behavior for an input of type 'text' is to clear the input value when the escape key is pressed.
// However, due to a bug in @gouvfr/dsfr the escape key event is not propagated to the input element.
// As a result this onChange is not called when the escape key is pressed.
onChange={event => onSearchChange(event.currentTarget.value)}
// Same goes for the keydown event so this is useless but we hope the bug will be fixed soon.
onKeyDown={event => {
if (event.key === "Escape") {
inputElement?.blur();
}
}}
/>
);
}
function Root(){
const [search, onSearchChange] = useState("");
Expand All @@ -309,21 +267,32 @@ function Root(){
<>
<Header
...
renderSearchInput={({
className,
id,
placeholder,
type
})=>
<MySearchInput
className={className}
id={id}
placeholder={placeholder}
type={type}
search={search}
onSearchChange={onSearchChange}
/>
}
renderSearchInput={({ className, id, placeholder, type }) => {
const [inputElement, setInputElement] =
useState<HTMLInputElement | null>(null);
return (
<input
ref={setInputElement}
className={className}
id={id}
placeholder={placeholder}
type={type}
value={search}
// Note: The default behavior for an input of type 'text' is to clear the input value when the escape key is pressed.
// However, due to a bug in @gouvfr/dsfr the escape key event is not propagated to the input element.
// As a result this onChange is not called when the escape key is pressed.
onChange={event => onSearchChange(event.currentTarget.value)}
// Same goes for the keydown event so this is useless but we hope the bug will be fixed soon.
onKeyDown={event => {
if (event.key === "Escape") {
assert(inputElement !== null);
inputElement.blur();
}
}}
/>
);
}}
...
/>
<p>Search results for: {search}</p>
Expand All @@ -332,7 +301,6 @@ function Root(){
);
}
\`\`\`
If you want to feature a modern search experience with realtime hinting you can omit providing a \`onSearchButtonClick\` callback and instead
Expand Down
80 changes: 26 additions & 54 deletions stories/SearchBar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,45 +103,7 @@ export const WithControlledInput = getStory(
"description": `
\`\`\`tsx
import { SearchBar } from "@codegouvfr/react-dsfr/SearchBar";
type MySearchInputProps = {
className?: string;
id: string;
placeholder: string;
type: "search";
search: string;
onSearchChange: (search: string) => void;
};
function MySearchInput(props: MySearchInputProps) {
const { className, id, placeholder, type, search, onSearchChange } = props;
const [
inputElement,
setInputElement
] = useState<HTMLInputElement | null>(null);
return (
<input
className={className}
id={id}
placeholder={placeholder}
type={type}
value={search}
onChange={event => onSearchChange(event.currentTarget.value)}
onKeyDown={event => {
if (event.key === "Escape") {
setInputElement?.blur();
}
}}
/>
);
}
function Root(){
Expand All @@ -151,21 +113,32 @@ function Root(){
<>
<SearchBar
...
renderInput={({
className,
id,
placeholder,
type
})=>
<MySearchInput
className={className}
id={id}
placeholder={placeholder}
type={type}
search={search}
onSearchChange={onSearchChange}
/>
}
renderInput={({ className, id, placeholder, type }) => {
const [inputElement, setInputElement] =
useState<HTMLInputElement | null>(null);
return (
<input
ref={setInputElement}
className={className}
id={id}
placeholder={placeholder}
type={type}
value={search}
// Note: The default behavior for an input of type 'text' is to clear the input value when the escape key is pressed.
// However, due to a bug in @gouvfr/dsfr the escape key event is not propagated to the input element.
// As a result this onChange is not called when the escape key is pressed.
onChange={event => onSearchChange(event.currentTarget.value)}
// Same goes for the keydown event so this is useless but we hope the bug will be fixed soon.
onKeyDown={event => {
if (event.key === "Escape") {
assert(inputElement !== null);
inputElement.blur();
}
}}
/>
);
}}
...
/>
<p>Search results for: {search}</p>
Expand All @@ -174,7 +147,6 @@ function Root(){
);
}
\`\`\`
If you want to feature a modern search experience with realtime hinting you can omit providing a \`onSearchButtonClick\` callback and instead
Expand Down

0 comments on commit 10d4375

Please sign in to comment.