Skip to content

Commit

Permalink
Merge pull request #102 from MPEGGroup/brands-support
Browse files Browse the repository at this point in the history 
Brand Support
  • Loading branch information
@podborski
podborski authored Oct 24, 2023
2 parents da09e64 + fc7faa6 commit 598492c
Show file tree
Hide file tree
Showing 21 changed files with 18,451 additions and 15,220 deletions.
188 changes: 168 additions & 20 deletions conformance-search/src/components/BoxComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Box, SearchResultRefined } from "@/types";
import RefinementContext from "@/contexts/RefinementContext";
import Chip from "./Chip";
import Drawer from "./Drawer";
import Checkbox from "./Checkbox";

SyntaxHighlighter.registerLanguage("javascript", js);

Expand Down Expand Up @@ -157,6 +158,150 @@ export default function BoxComponent({ box }: { box: SearchResultRefined<Box> })
))}
</div>
</Drawer>
<Drawer hidden={box.item.type !== "brand_type"} title="Brand Flavor">
<ul className="p-3">
<li className="flex flex-row items-center gap-2">
<button
onClick={() => {
// Create refinements object if it doesn't exist
let { refinements } = box;
if (!refinements)
refinements = {
variant: {
versions: {
value: []
},
flags: {
value: [],
exact: false
},
metadata: {}
}
};

// Turn off the brand flavor
delete refinements.variant.metadata.BrandFlavor;

refineHandler(
{
...box,
refinements
},
"box"
);
}}
type="button"
>
<Checkbox
checked={
box?.refinements?.variant.metadata.BrandFlavor === undefined
}
intermediate={box?.refinements?.variant.metadata.BrandFlavor}
/>
</button>
<span>All flavors</span>
</li>
<li className="ml-4 flex flex-row items-center gap-2">
<button
onClick={() => {
// Create refinements object if it doesn't exist
let { refinements } = box;
if (!refinements)
refinements = {
variant: {
versions: {
value: []
},
flags: {
value: [],
exact: false
},
metadata: {}
}
};

// Turn on major brand
if (!refinements.variant.metadata.BrandFlavor)
refinements.variant.metadata.BrandFlavor = "Compatible";
else if (
refinements.variant.metadata.BrandFlavor === "Major" ||
refinements.variant.metadata.BrandFlavor === "Compatible"
)
delete refinements.variant.metadata.BrandFlavor;
else refinements.variant.metadata.BrandFlavor = "Major";

refineHandler(
{
...box,
refinements
},
"box"
);
}}
type="button"
>
<Checkbox
checked={
box?.refinements?.variant.metadata.BrandFlavor ===
undefined ||
box?.refinements?.variant.metadata.BrandFlavor === "Major"
}
/>
</button>
<span>Major brand</span>
</li>
<li className="ml-4 flex flex-row items-center gap-2">
<button
onClick={() => {
// Create refinements object if it doesn't exist
let { refinements } = box;
if (!refinements)
refinements = {
variant: {
versions: {
value: []
},
flags: {
value: [],
exact: false
},
metadata: {}
}
};

// Turn on compatible brand
if (!refinements.variant.metadata.BrandFlavor)
refinements.variant.metadata.BrandFlavor = "Major";
else if (
refinements.variant.metadata.BrandFlavor === "Compatible" ||
refinements.variant.metadata.BrandFlavor === "Major"
)
delete refinements.variant.metadata.BrandFlavor;
else refinements.variant.metadata.BrandFlavor = "Compatible";

refineHandler(
{
...box,
refinements
},
"box"
);
}}
type="button"
>
<Checkbox
checked={
box?.refinements?.variant.metadata.BrandFlavor ===
undefined ||
box?.refinements?.variant.metadata.BrandFlavor ===
"Compatible"
}
/>
</button>
<span>Compatible brand</span>
</li>
</ul>
</Drawer>
<Drawer hidden={box.item.versions.length < 1} title="Versions">
<ul className="p-3">
{box.item.versions.map((version) => (
Expand All @@ -175,7 +320,8 @@ export default function BoxComponent({ box }: { box: SearchResultRefined<Box> })
flags: {
value: [],
exact: false
}
},
metadata: {}
}
};

Expand All @@ -197,12 +343,12 @@ export default function BoxComponent({ box }: { box: SearchResultRefined<Box> })
}}
type="button"
>
{box.refinements &&
box.refinements.variant.versions.value.includes(version) ? (
<ImCheckboxChecked />
) : (
<ImCheckboxUnchecked />
)}
<Checkbox
checked={
box.refinements &&
box.refinements.variant.versions.value.includes(version)
}
/>
</button>
Version {version}
</li>
Expand Down Expand Up @@ -236,7 +382,8 @@ export default function BoxComponent({ box }: { box: SearchResultRefined<Box> })
flags: {
value: [],
exact: false
}
},
metadata: {}
}
};

Expand All @@ -258,12 +405,12 @@ export default function BoxComponent({ box }: { box: SearchResultRefined<Box> })
}}
type="button"
>
{box.refinements &&
box.refinements.variant.flags.value.includes(value) ? (
<ImCheckboxChecked />
) : (
<ImCheckboxUnchecked />
)}
<Checkbox
checked={
box.refinements &&
box.refinements.variant.flags.value.includes(value)
}
/>
</button>
<div className="flex flex-col">
<span className="text-sm font-bold">
Expand Down Expand Up @@ -297,7 +444,8 @@ export default function BoxComponent({ box }: { box: SearchResultRefined<Box> })
flags: {
value: [],
exact: false
}
},
metadata: {}
}
};

Expand All @@ -313,11 +461,11 @@ export default function BoxComponent({ box }: { box: SearchResultRefined<Box> })
}}
type="button"
>
{box.refinements && box.refinements.variant.flags.exact ? (
<ImCheckboxChecked />
) : (
<ImCheckboxUnchecked />
)}
<Checkbox
checked={
box.refinements && box.refinements.variant.flags.exact === true
}
/>
</button>
<span className="text-sm">
Combined flags must match exactly (no extra flags).
Expand Down
17 changes: 17 additions & 0 deletions conformance-search/src/components/Checkbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { MdCheckBox, MdIndeterminateCheckBox, MdOutlineCheckBoxOutlineBlank } from "react-icons/md";

export default function Checkbox({
checked,
intermediate
}: {
checked: boolean | undefined | unknown;
intermediate?: boolean | undefined | unknown;
}) {
if (intermediate) return <MdIndeterminateCheckBox size={22} />;
if (checked) return <MdCheckBox size={22} />;
return <MdOutlineCheckBoxOutlineBlank size={22} />;
}

Checkbox.defaultProps = {
intermediate: false
};
2 changes: 2 additions & 0 deletions conformance-search/src/components/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import BoxComponent from "./BoxComponent";
import Checkbox from "./Checkbox";
import Chip from "./Chip";
import CoverageSummary from "./CoverageSummary";
import Drawer from "./Drawer";
Expand All @@ -12,6 +13,7 @@ import Select from "./Select";

export {
BoxComponent,
Checkbox,
Chip,
CoverageSummary,
Drawer,
Expand Down
Loading

0 comments on commit 598492c

Please sign in to comment.