Skip to content

Commit

Permalink
y
Browse files Browse the repository at this point in the history
  • Loading branch information
@Delusoire
Delusoire committed Aug 9, 2024
1 parent 1e55f2c commit cbbbbe1
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 40 deletions.
5 changes: 2 additions & 3 deletions modules/stdlib/lib/components/ChipFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import { React } from "../../src/expose/React.ts";
import { UI } from "../../src/webpack/ComponentLibrary.ts";
import { ScrollableContainer } from "../../src/webpack/ReactComponents.ts";
import { TreeNodeVal, type RFilterOpt } from "./index.tsx";
import { type RFilterOpt, TreeNodeVal } from "./index.tsx";

export interface ChipFilterProps {
availableFilters: RFilterOpt[];
Expand All @@ -30,8 +30,7 @@ export interface ChipFilterProps {
}
export const ChipFilter = React.memo(
({ availableFilters, selectedFilters, toggleFilter, className }: ChipFilterProps) => {
const createChip = (isSelected: boolean) => (filter: RFilterOpt, index: number) =>
(
const createChip = (isSelected: boolean) => (filter: RFilterOpt, index: number) => (
<UI.Chip
onClick={() => toggleFilter(filter)}
selectedColorSet="invertedLight"
Expand Down
10 changes: 5 additions & 5 deletions modules/stdlib/lib/components/MountedNavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
*/

import { React } from "../../src/expose/React.ts";
import { UI } from "../../src/webpack/ComponentLibrary.ts";
import { UI } from "../../src/webpack/ComponentLibrary.xpui.ts";
import { ReactDOM } from "../../src/webpack/React.xpui.ts";
import { NavTo, ScrollableContainer } from "../../src/webpack/ReactComponents.ts";
import { NavTo, ScrollableContainer } from "../../src/webpack/ReactComponents.xpui.ts";
import { isGlobalNavBarEnabled } from "../../src/utils/index.ts";

interface NavToChipProps {
Expand All @@ -29,7 +29,7 @@ interface NavToChipProps {
selected: boolean;
onClick: () => void;
}
const NavToChip: React.FC<NavToChipProps> = props => (
const NavToChip: React.FC<NavToChipProps> = (props) => (
<NavTo
replace={true}
to={props.to}
Expand Down Expand Up @@ -57,7 +57,7 @@ const NavBar = ({ namespace, categories, selectedCategory }: NavBarProps) => (
<div className={`${MAP.search_chips.wrapper} contentSpacing`}>
<div className={MAP.search_chips.container}>
<ScrollableContainer>
{categories.map(category => (
{categories.map((category) => (
<NavToChip
to={`spotify:app:bespoke:${namespace}:${category}`}
title={category}
Expand All @@ -75,7 +75,7 @@ const NavBar = ({ namespace, categories, selectedCategory }: NavBarProps) => (
interface TopBarMountedProps {
children?: React.ReactNode;
}
const TopBarMounted: React.FC<TopBarMountedProps> = props => {
const TopBarMounted: React.FC<TopBarMountedProps> = (props) => {
const children = (
<div
className="qHWqOt_TYlFxiF0Dm2fD"
Expand Down
14 changes: 9 additions & 5 deletions modules/stdlib/lib/components/SettingsButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,14 @@ import { React } from "../../src/expose/React.ts";
import { REACT_FIBER, waitForElement } from "../dom.ts";
import { createIconComponent } from "../createIconComponent.tsx";
import { Platform } from "../../src/expose/Platform.ts";
import { Tooltip } from "../../src/webpack/ReactComponents.ts";
import { UI } from "../../src/webpack/ComponentLibrary.ts";
import { Tooltip } from "../../src/webpack/ReactComponents.xpui.ts";
import { UI } from "../../src/webpack/ComponentLibrary.xpui.ts";

const SettingsIcon = () =>
createIconComponent({
semanticColor: "textSubdued",
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/></svg>',
icon:
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/></svg>',
});

const History = Platform.getHistory();
Expand All @@ -47,11 +48,14 @@ export default function ({ section }: SettingsButtonProps): React.ReactElement<H
buttonSize="sm"
onClick={async () => {
History.push("/preferences");
const searchButton = await waitForElement(`.${MAP.settings.header.container} .${MAP.search_box.expand_button}`);
const searchButton = await waitForElement(
`.${MAP.settings.header.container} .${MAP.search_box.expand_button}`,
);
const recUp = (fiber: any): any => {
const { type } = fiber;
if (type.$$typeof === Symbol.for("react.provider") && type._context._currentValue.setFilter)
if (type.$$typeof === Symbol.for("react.provider") && type._context._currentValue.setFilter) {
return fiber;
}
return recUp(fiber.return);
};

Expand Down
49 changes: 22 additions & 27 deletions modules/stdlib/lib/components/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,11 @@ import { React } from "../../src/expose/React.ts";
import { _ } from "../../deps.ts";
import Dropdown, { type DropdownOptions } from "./Dropdown.tsx";
import { ChipFilter } from "./ChipFilter.tsx";
import { FilterContext } from "../../src/webpack/FilterContext.ts";
import { FilterBox } from "../../src/webpack/ReactComponents.ts";
import { FilterContext } from "../../src/webpack/FilterContext.xpui.ts";
import { FilterBox } from "../../src/webpack/ReactComponents.xpui.ts";

// * Who doesn't love some Fixed Point (Functional) Programming?
const Bluebird =
<A, B>(a: (b: B) => A) =>
<C,>(b: (c: C) => B) =>
(c: C) =>
a(b(c));
const Bluebird = <A, B>(a: (b: B) => A) => <C,>(b: (c: C) => B) => (c: C) => a(b(c));

const createStorage = (provider: Pick<Storage, "getItem" | "setItem">) => ({
getItem(key: string, def: () => any) {
Expand All @@ -46,22 +42,22 @@ type Thunk<A> = () => A;

const usePersistedState =
({ getItem, setItem }: ReturnType<typeof createStorage>) =>
<K extends string>(key: K) =>
<A,>(initialState: Thunk<A>) => {
const [state, setState] = React.useState<A>(() => getItem(key, initialState));
<K extends string>(key: K) =>
<A,>(initialState: Thunk<A>) => {
const [state, setState] = React.useState<A>(() => getItem(key, initialState));

const persistentSetState = React.useCallback(
(reducer: (state: A) => A) => {
const nextState = reducer(state);
const persistentSetState = React.useCallback(
(reducer: (state: A) => A) => {
const nextState = reducer(state);

setItem(key, nextState);
setState(nextState);
},
[state, setItem, key],
);
setItem(key, nextState);
setState(nextState);
},
[state, setItem, key],
);

return [state, persistentSetState] as const;
};
return [state, persistentSetState] as const;
};

const createPersistedState = Bluebird(usePersistedState)(createStorage);

Expand Down Expand Up @@ -93,7 +89,7 @@ export const useDropdown = <O extends DropdownOptions>({
<Dropdown
options={options}
activeOption={activeOption}
onSwitch={o => setActiveOption(() => o)}
onSwitch={(o) => setActiveOption(() => o)}
/>
);

Expand All @@ -107,7 +103,7 @@ export const getProp = (obj: any, path: string) => {
return obj;
};

export const useSearchBar = ({ placeholder, expanded }: { placeholder: string; expanded: boolean; }) => {
export const useSearchBar = ({ placeholder, expanded }: { placeholder: string; expanded: boolean }) => {
const [search, setSearch] = React.useState("");
const searchProps = { filter: "", setFilter: (f: string) => setSearch(f) };

Expand All @@ -134,8 +130,8 @@ export type RTree<E> = {
[key: string]: Tree<E>;
};

export type FilterOpt = { key: string, filter: Tree<React.ReactNode>; };
export type RFilterOpt = { key: string; filter: Required<Tree<React.ReactNode>>; };
export type FilterOpt = { key: string; filter: Tree<React.ReactNode> };
export type RFilterOpt = { key: string; filter: Required<Tree<React.ReactNode>> };

export const useChipFilter = (filters: Tree<React.ReactNode>) => {
const [selectedFilterFullKey, setSelectedFilterFullKey] = React.useState("");
Expand All @@ -144,7 +140,7 @@ export const useChipFilter = (filters: Tree<React.ReactNode>) => {
() =>
selectedFilterFullKey
.split(".")
.slice(1,)
.slice(1)
.reduce(
(selectedFilters, selectedFilterFullKeyPart) => {
const prevSelectedFilter = selectedFilters.at(-1)!;
Expand All @@ -167,8 +163,7 @@ export const useChipFilter = (filters: Tree<React.ReactNode>) => {
}

const toggleFilter = React.useCallback(
(filter: RFilterOpt) =>
setSelectedFilterFullKey(filter.key === selectedFilterFullKey ? "" : filter.key),
(filter: RFilterOpt) => setSelectedFilterFullKey(filter.key === selectedFilterFullKey ? "" : filter.key),
[selectedFilterFullKey],
);
const treeNodeHasVal = (n: FilterOpt): n is RFilterOpt => !!n.filter[TreeNodeVal];
Expand Down

0 comments on commit cbbbbe1

Please sign in to comment.