forked from facebook/lexical
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Gallery] Add option to filter plugins based on tags (facebook#6391)
- Loading branch information
Showing
7 changed files
with
329 additions
and
6 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
100 changes: 100 additions & 0 deletions
100
packages/lexical-website/src/components/Gallery/components/Filters.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,100 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| */ | ||
|
|
||
| import type {CSSProperties, ReactNode} from 'react'; | ||
|
|
||
| import Heading from '@theme/Heading'; | ||
| import clsx from 'clsx'; | ||
| import React from 'react'; | ||
|
|
||
| import {Example} from '../pluginList'; | ||
| import {Tag} from '../tagList'; | ||
| import styles from './styles.module.css'; | ||
| import TagSelect from './TagSelect'; | ||
|
|
||
| function TagCircleIcon({color, style}: {color: string; style?: CSSProperties}) { | ||
| return ( | ||
| <span | ||
| style={{ | ||
| backgroundColor: color, | ||
| borderRadius: '50%', | ||
| height: 10, | ||
| width: 10, | ||
| ...style, | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| function TagListItem({tag, tagKey}: {tag: Tag; tagKey: string}) { | ||
| const {title, description, color} = tag; | ||
| return ( | ||
| <li className={styles.tagListItem}> | ||
| <TagSelect | ||
| tag={tagKey} | ||
| label={title} | ||
| description={description} | ||
| icon={ | ||
| <TagCircleIcon | ||
| color={color} | ||
| style={{ | ||
| backgroundColor: color, | ||
| marginLeft: 8, | ||
| }} | ||
| /> | ||
| } | ||
| /> | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| function TagList({allTags}: {allTags: {[type in string]: Tag}}) { | ||
| return ( | ||
| <ul className={clsx('clean-list', styles.tagList)}> | ||
| {Object.keys(allTags).map((tag) => { | ||
| return <TagListItem key={tag} tag={allTags[tag]} tagKey={tag} />; | ||
| })} | ||
| </ul> | ||
| ); | ||
| } | ||
|
|
||
| function HeadingText({filteredPlugins}: {filteredPlugins: Array<Example>}) { | ||
| return ( | ||
| <div className={styles.headingText}> | ||
| <Heading as="h2">Filters</Heading> | ||
| <span> | ||
| {filteredPlugins.length === 1 | ||
| ? '1 exampe' | ||
| : `${filteredPlugins.length} examples`} | ||
| </span> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function HeadingRow({filteredPlugins}: {filteredPlugins: Array<Example>}) { | ||
| return ( | ||
| <div className={clsx('margin-bottom--sm', styles.headingRow)}> | ||
| <HeadingText filteredPlugins={filteredPlugins} /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function Filters({ | ||
| filteredPlugins, | ||
| tagList, | ||
| }: { | ||
| filteredPlugins: Array<Example>; | ||
| tagList: {[type in string]: Tag}; | ||
| }): ReactNode { | ||
| return ( | ||
| <section className="margin-top--l margin-bottom--lg container"> | ||
| <HeadingRow filteredPlugins={filteredPlugins} /> | ||
| <TagList allTags={tagList} /> | ||
| </section> | ||
| ); | ||
| } |
71 changes: 71 additions & 0 deletions
71
packages/lexical-website/src/components/Gallery/components/TagSelect.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,71 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| */ | ||
|
|
||
| import React, { | ||
| type ComponentProps, | ||
| type ReactElement, | ||
| type ReactNode, | ||
| useCallback, | ||
| useId, | ||
| } from 'react'; | ||
|
|
||
| import {useTags} from '../utils'; | ||
| import styles from './styles.module.css'; | ||
|
|
||
| function useTagState(tag: string) { | ||
| const [tags, setTags] = useTags(); | ||
| const isSelected = tags.includes(tag); | ||
| const toggle = useCallback(() => { | ||
| setTags((list) => { | ||
| return list.includes(tag) | ||
| ? list.filter((t) => t !== tag) | ||
| : [...list, tag]; | ||
| }); | ||
| }, [tag, setTags]); | ||
|
|
||
| return [isSelected, toggle] as const; | ||
| } | ||
|
|
||
| interface Props extends ComponentProps<'input'> { | ||
| tag: string; | ||
| label: string; | ||
| description: string; | ||
| icon: ReactElement<ComponentProps<'svg'>>; | ||
| } | ||
|
|
||
| export default function TagSelect({ | ||
| icon, | ||
| label, | ||
| description, | ||
| tag, | ||
| ...rest | ||
| }: Props): ReactNode { | ||
| const id = useId(); | ||
| const [isSelected, toggle] = useTagState(tag); | ||
| return ( | ||
| <> | ||
| <input | ||
| type="checkbox" | ||
| id={id} | ||
| checked={isSelected} | ||
| onChange={toggle} | ||
| className={styles.screenReaderOnly} | ||
| onKeyDown={(e) => { | ||
| if (e.key === 'Enter') { | ||
| toggle(); | ||
| } | ||
| }} | ||
| {...rest} | ||
| /> | ||
| <label htmlFor={id} className={styles.checkboxLabel} title={description}> | ||
| {label} | ||
| {icon} | ||
| </label> | ||
| </> | ||
| ); | ||
| } |
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
27 changes: 27 additions & 0 deletions
27
packages/lexical-website/src/components/Gallery/tagList.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,27 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| */ | ||
|
|
||
| export type Tag = { | ||
| color: string; | ||
| description: string; | ||
| title: string; | ||
| }; | ||
|
|
||
| export const TagList: {[type in string]: Tag} = { | ||
| favorite: { | ||
| color: '#e9669e', | ||
| description: | ||
| 'Our favorite Docusaurus sites that you must absolutely check out!', | ||
| title: 'Favorite', | ||
| }, | ||
| opensource: { | ||
| color: '#39ca30', | ||
| description: 'Open-Source Lexical plugins for inspiration', | ||
| title: 'Open-Source', | ||
| }, | ||
| }; |
Oops, something went wrong.