Skip to content

Commit

Permalink
Add dividers back in
Browse files Browse the repository at this point in the history
  • Loading branch information
@hatton
hatton committed Aug 13, 2024
1 parent 2c5e7fd commit 07eb47d
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 26 deletions.
76 changes: 53 additions & 23 deletions lib/ContentPane.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,7 @@ export const ContentPane: React.FunctionComponent<
// this is the whole settings object that we are editing
initialValues: object;
currentTopLevelPageIndex?: number;
children:
| React.ReactElement<typeof ConfigrPage>
| React.ReactElement<typeof ConfigrPage>[];
children: PageChild | PageChild[];
setValueGetter?: (vg: valueGetter) => void;
onChange?: (currentValues: any) => void;
}>
Expand Down Expand Up @@ -118,16 +116,18 @@ export const ContentPane: React.FunctionComponent<
setFocussedPageKey(pageHistoryStack[pageHistoryStack.length - 1]);
};
const [pageHistoryStack, setPageHistoryStack] = useState<string[]>([]);
const goToPage = (pageKey: string) => {
setPageHistoryStack([...pageHistoryStack, focussedPageKey]);
setFocussedPageKey(pageKey);
};
const getTopLevelPages = () => {
return React.Children.map(props.children, (child: any) => {
if (!child) return null;
return React.cloneElement(child, { topLevel: true });
if (child && child.type === ConfigrPage)
return React.cloneElement(child, { topLevel: true });
else return null;
}).filter((c: any) => c);
};
const goToPage = (pageKey: string) => {
setPageHistoryStack([...pageHistoryStack, focussedPageKey]);
setFocussedPageKey(pageKey);
};

return (
<FocusPageContext.Provider
value={{
Expand Down Expand Up @@ -225,7 +225,7 @@ export const ContentPane: React.FunctionComponent<
// );
// };

const RowCluster: React.FunctionComponent<
const BoxOfRows: React.FunctionComponent<
React.PropsWithChildren<{
label?: string;
inFocussedPage?: boolean;
Expand All @@ -235,9 +235,12 @@ const RowCluster: React.FunctionComponent<
console.log(
'RowCluster infocus' + 'children:' + React.Children.count(props.children),
);

// count the number that we will actually show
const count = React.Children.toArray(props.children).filter((c) => c).length;
return (
<Paper
className="indentIfInSubPage"
// className="indentIfInSubPage"
elevation={2}
css={css`
//width: 100%; doesn't work with shadow
Expand All @@ -253,9 +256,16 @@ const RowCluster: React.FunctionComponent<
`}
>
{/* return clones of our children with our props.inFocussedPage */}
{React.Children.map(props.children, (child: any) => {
{React.Children.map(props.children, (child: any, index: number) => {
if (!child) return null;
return React.cloneElement(child, { inFocussedPage: true });
return (
<>
{React.cloneElement(child, { inFocussedPage: true })}
{index < count - 1 && (
<Divider component="li" key={'divider' + index.toString()} />
)}
</>
);
})?.filter((c: any) => c)}
</List>
</Paper>
Expand All @@ -266,7 +276,8 @@ const RowCluster: React.FunctionComponent<
return (
<>
{React.Children.map(props.children, (child: any) => {
if (child?.type === ConfigrPage || child?.type === ConfigrForEach) return child;
if ((child && child?.type === ConfigrPage) || child?.type === ConfigrForEach)
return child;
else return null;
}).filter((c: any) => c)}
</>
Expand Down Expand Up @@ -825,7 +836,6 @@ export const ConfigrSelect: React.FunctionComponent<
export const ConfigrGroup: React.FunctionComponent<
React.PropsWithChildren<{
label?: string;
pageKey?: string;
searchTerms?: string;
description?: string | React.ReactNode;
getErrorMessage?: (data: any) => string | undefined;
Expand All @@ -836,7 +846,9 @@ export const ConfigrGroup: React.FunctionComponent<

// TODO: after the reorg to allow sub page hierarchy to be independent of data hierarchy, we have yet to
// TODO: re-install the search filter that shows a set of items (not sure what level) that match the search term.
return <RowCluster {...props}>{props.children}</RowCluster>;

return <BoxOfRows {...props}>{props.children}</BoxOfRows>;

// <FilterForSearchText {...props} kids={props.children}>
// <div
// className="indentIfInSubPage"
Expand All @@ -860,6 +872,12 @@ export const ConfigrGroup: React.FunctionComponent<
// </FilterForSearchText>
};

export type PageChild =
| React.ReactElement<typeof ConfigrGroup>
| false // it's hard to avoid this stuff, e.g. if they conditionally show a group;
| undefined
| null;

// In Chrome Settings, most controls live under pages that you get
// to by clicking on a right-facing triangle control. When clicked,
// the whole settings area switches to that of the page, and a back
Expand All @@ -875,12 +893,11 @@ export const ConfigrPage: React.FunctionComponent<
topLevel?: boolean; // NB: not a for public API.
getErrorMessage?: (data: any) => string | undefined;
inFocussedPage?: boolean;
children:
| React.ReactElement<typeof ConfigrGroup | typeof ConfigrForEach>
| React.ReactElement<typeof ConfigrGroup | typeof ConfigrForEach>[];
children: PageChild | PageChild[];
}>
> = (props) => {
const key = props.pageKey || props.label; // REVIEW. Shall we just remove pageKey?

const childOfWrongType = React.Children.toArray(props.children).find(
(child: any) => child && child.type !== ConfigrGroup && child.type !== ConfigrForEach,
);
Expand Down Expand Up @@ -921,12 +938,25 @@ export const ConfigrPage: React.FunctionComponent<
{props.label}
</div>
)}
{props.topLevel && props.label && (
<Typography
variant={'h2'}
css={css`
margin-bottom: 0.5em;
`}
>
{props.label}
</Typography>
)}
<div
css={css`
.indentIfInSubPage {
/* .indentIfInSubPage {
margin-left: 20px;
//margin-right: 20px;
}
} */
display: flex;
flex-direction: column;
gap: 0.5em;
`}
>
{/* <FilterAndJoinWithDividers pageKey={props.pageKey}> */}
Expand All @@ -945,14 +975,14 @@ export const ConfigrPage: React.FunctionComponent<
</>
);
} else {
// traverse children that can contain pagesso we should search down them looking for current page
// traverse children that can contain pages so we should search down them looking for current page
// these will not add anything to the UI except the page we're looking for, if they have it.
return (
<React.Fragment>
{React.Children.map(props.children, (child) => {
if (
(child && (child as any).type === ConfigrGroup) ||
(child as any).type === ConfigrForEach
(child && (child as any).type === ConfigrForEach)
) {
return child;
} else return null;
Expand Down
15 changes: 12 additions & 3 deletions src/stories/bloom.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
ConfigrCustomStringInput,
ConfigrCustomNumberInput,
ConfigrCustomObjectInput,
PageChild,
} from '../../lib/ContentPane';
import { ConfigrColorPicker } from '../../lib/ConfigrColorPicker';
import { SILCharacterAlternates } from './SILCharacterAlternates';
Expand Down Expand Up @@ -117,6 +118,14 @@ const BloomCollectionInner: React.FunctionComponent<{
<ConfigrBoolean label={'hello'} path="blah" />
</ConfigrGroup>
</ConfigrPage> */}

<ConfigrPage label="Languages" pageKey="languages">
{!props.onChange && (
<ConfigrGroup label="Languages">
<h1>test</h1>
</ConfigrGroup>
)}
</ConfigrPage>
<ConfigrPage label="Languages" pageKey="languages">
<ConfigrForEach
path="languages"
Expand All @@ -133,7 +142,7 @@ const BloomCollectionInner: React.FunctionComponent<{
font-weight: bold !important;
`}
>
<ConfigrGroup label={'x' + language.label} key={`x${index}`}>
<ConfigrGroup label={language.label} key={`x${index}`}>
<ConfigrInput path={`${prefix}.id.iso`} label="ISO" />
<ConfigrInput path={`${prefix}.id.name`} label="Name" />
</ConfigrGroup>
Expand All @@ -156,7 +165,7 @@ const BloomCollectionInner: React.FunctionComponent<{

{!language.isSignLanguage && (
<ConfigrPage label="Script Settings" pageKey={`${prefix}-script`}>
<ConfigrGroup label={'x' + language.label} key={`x${index}`}>
<ConfigrGroup label={language.label} key={`x${index}`}>
<ConfigrBoolean
overrideValue={true}
overrideDescription="This is locked by Kyrgyzstan xmatter"
Expand Down Expand Up @@ -240,7 +249,7 @@ const BloomCollectionInner: React.FunctionComponent<{
></ConfigrForEach>
</ConfigrPage>
<ConfigrPage label="Book Defaults" pageKey="book defaults">
<ConfigrGroup label="">
<ConfigrGroup label="Book Defaults">
<ConfigrSelect
path={'pageNumberStyle'}
label="Page Numbering Style"
Expand Down
1 change: 1 addition & 0 deletions vite.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default defineConfig({
name: 'configr',
fileName: (format) => `configr.${format}.js`,
},
sourcemap: true,
rollupOptions: {
// don't bundle these with the library
external: [
Expand Down

0 comments on commit 07eb47d

Please sign in to comment.