-
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.
task: Adopt the new Limitless UI components into the Facets code sample
- Loading branch information
Anand Gorantala
committed
Nov 19, 2024
1 parent
e56be00
commit cb6d52d
Showing
11 changed files
with
865 additions
and
845 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
8 changes: 4 additions & 4 deletions
8
examples/facets/src/components/applied-facet-multi-select.jsx
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
9 changes: 4 additions & 5 deletions
9
examples/facets/src/components/applied-facet-number-range.jsx
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
9 changes: 4 additions & 5 deletions
9
examples/facets/src/components/applied-facets-number-stats.jsx
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,17 +1,16 @@ | ||
| import {AssetTag} from "@bloomreach/react-banana-ui"; | ||
| import { Tag } from "@bloomreach/limitless-ui-react"; | ||
|
|
||
| export const AppliedFacetNumberStats = ({ value, onClear }) => { | ||
| const val = value[0]; | ||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <AssetTag | ||
| className="applied-facet-tag" | ||
| dismissible | ||
| <Tag | ||
| className="font-semibold leading-none" | ||
| key={val} | ||
| onDismiss={() => onClear(val)} | ||
| > | ||
| {val.slice(1, -1).split(" TO ").join(" - ")} | ||
| </AssetTag> | ||
| </Tag> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,37 @@ | ||
| import { useEffect, useState } from "react"; | ||
| import { Button } from "@bloomreach/react-banana-ui"; | ||
| import { CheckboxGroup as CG } from "@bloomreach/limitless-ui-react"; | ||
|
|
||
| export const CheckboxGroup = ({ options, value, onChange }) => { | ||
| const DEFAULT_DISPLAYED_OPTIONS = 5; | ||
| const [expanded, setExpanded] = useState(false); | ||
| const [selected, setSelected] = useState([]); | ||
|
|
||
| useEffect(() => { | ||
| setSelected(value); | ||
| setSelected(value || []); | ||
| }, [value]); | ||
|
|
||
| const handleChange = (event) => { | ||
| let newSelected; | ||
| if (event.target.checked) { | ||
| newSelected = [...[], ...(selected || []), event.target.value]; | ||
| } else { | ||
| newSelected = selected.filter((item) => item !== event.target.value); | ||
| } | ||
| onChange(newSelected); | ||
| }; | ||
|
|
||
| const displayedOptions = expanded | ||
| ? options | ||
| : options.slice(0, DEFAULT_DISPLAYED_OPTIONS); | ||
| const displayedOptions = options.slice(0, DEFAULT_DISPLAYED_OPTIONS); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="py-2 flex flex-col gap-2"> | ||
| {displayedOptions.map((opt) => ( | ||
| <label className="text-sm flex gap-2" key={opt.value}> | ||
| <input | ||
| type="checkbox" | ||
| value={opt.value} | ||
| onChange={handleChange} | ||
| checked={selected ? selected.includes(opt.value) : false} | ||
| /> | ||
| <span className="grow">{opt.label}</span> | ||
| <span className="px-2 bg-slate-200 rounded-full">{opt.count}</span> | ||
| </label> | ||
| ))} | ||
| </div> | ||
| {!expanded && options.length > DEFAULT_DISPLAYED_OPTIONS ? ( | ||
| <Button | ||
| type="secondary" | ||
| className="py-1 px-2 mt-2 text-xs h-auto" | ||
| onClick={() => setExpanded(true)} | ||
| > | ||
| + View all ({options.length}) | ||
| </Button> | ||
| <CG.Root value={selected} onChange={onChange} className="py-2"> | ||
| {displayedOptions.map((opt) => ( | ||
| <CG.Item value={opt.value}> | ||
| <span className="grow">{opt.label}</span> | ||
| <span className="px-2 bg-slate-200 rounded-full">{opt.count}</span> | ||
| </CG.Item> | ||
| ))} | ||
| {options.length > DEFAULT_DISPLAYED_OPTIONS ? ( | ||
| <CG.Overflow> | ||
| <CG.OverflowContent> | ||
| {options.slice(DEFAULT_DISPLAYED_OPTIONS).map((opt) => ( | ||
| <CG.Item value={opt.value}> | ||
| <span className="grow">{opt.label}</span> | ||
| <span className="px-2 bg-slate-200 rounded-full">{opt.count}</span> | ||
| </CG.Item> | ||
| ))} | ||
| </CG.OverflowContent> | ||
| <CG.OverflowTrigger /> | ||
| </CG.Overflow> | ||
| ) : null} | ||
| </div> | ||
| </CG.Root> | ||
| ); | ||
| }; |
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 was deleted.
Oops, something went wrong.