Cleanup checkbox styles

This commit is contained in:
Laurent Nguyen 2024-09-05 11:40:14 +02:00
parent 1795b8e2e9
commit 04c01256a6
2 changed files with 69 additions and 43 deletions

View File

@ -1,3 +0,0 @@
.tableColumnSelectionCheckbox label {
padding: 4px 8px;
}

View File

@ -1,19 +1,37 @@
import { Checkbox } from "@fluentui/react";
import { import {
Button, Button,
FluentProvider, Checkbox,
CheckboxOnChangeData,
InputOnChangeData, InputOnChangeData,
makeStyles,
SearchBox, SearchBox,
SearchBoxChangeEvent, SearchBoxChangeEvent,
Text, Text,
} from "@fluentui/react-components"; } from "@fluentui/react-components";
import { configContext } from "ConfigContext"; import { configContext } from "ConfigContext";
import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent"; import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
import { getPlatformTheme } from "Explorer/Theme/ThemeUtil"; import { CosmosFluentProvider, getPlatformTheme } from "Explorer/Theme/ThemeUtil";
import React from "react"; import React from "react";
import { useSidePanel } from "../../../hooks/useSidePanel"; import { useSidePanel } from "../../../hooks/useSidePanel";
import "./TableColumnSelectionPane.less";
const useColumnSelectionStyles = makeStyles({
paneContainer: {
height: "100%",
display: "flex",
},
searchBox: {
width: "100%",
},
checkboxContainer: {
display: "flex",
flexDirection: "column",
flex: 1,
},
checkboxLabel: {
padding: "4px 8px",
marginBottom: "0px",
},
});
export interface TableColumnSelectionPaneProps { export interface TableColumnSelectionPaneProps {
columnDefinitions: ColumnDefinition[]; columnDefinitions: ColumnDefinition[];
selectedColumnIds: string[]; selectedColumnIds: string[];
@ -31,9 +49,15 @@ export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> =
const originalSelectedColumnIds = React.useMemo(() => selectedColumnIds, []); const originalSelectedColumnIds = React.useMemo(() => selectedColumnIds, []);
const [columnSearchText, setColumnSearchText] = React.useState<string>(""); const [columnSearchText, setColumnSearchText] = React.useState<string>("");
const [newSelectedColumnIds, setNewSelectedColumnIds] = React.useState<string[]>(originalSelectedColumnIds); const [newSelectedColumnIds, setNewSelectedColumnIds] = React.useState<string[]>(originalSelectedColumnIds);
const styles = useColumnSelectionStyles();
const selectedColumnIdsSet = new Set(newSelectedColumnIds); const selectedColumnIdsSet = new Set(newSelectedColumnIds);
const onCheckedValueChange = (id: string, checked?: boolean): void => { const onCheckedValueChange = (id: string, checkedData?: CheckboxOnChangeData): void => {
const checked = checkedData?.checked;
if (checked === "mixed" || checked === undefined) {
return;
}
if (checked) { if (checked) {
selectedColumnIdsSet.add(id); selectedColumnIdsSet.add(id);
} else { } else {
@ -77,27 +101,31 @@ export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> =
}); });
return ( return (
<FluentProvider theme={theme} style={{ height: "100%" }}> <div className={styles.paneContainer}>
<CosmosFluentProvider>
<div className="panelFormWrapper"> <div className="panelFormWrapper">
<div className="panelMainContent" style={{ display: "flex", flexDirection: "column" }}> <div className="panelMainContent" style={{ display: "flex", flexDirection: "column" }}>
<Text>Select which columns to display in your view of items in your container.</Text> <Text>Select which columns to display in your view of items in your container.</Text>
<div /* Wrap <SearchBox> to avoid margin-bottom set by panelMainContent css */> <div /* Wrap <SearchBox> to avoid margin-bottom set by panelMainContent css */>
<SearchBox <SearchBox
className={styles.searchBox}
value={columnSearchText} value={columnSearchText}
onChange={onSearchChange} onChange={onSearchChange}
style={{ width: "100%" }}
placeholder="Search fields" placeholder="Search fields"
/> />
</div> </div>
<div style={{ flex: 1 }}> <div className={styles.checkboxContainer}>
{columnDefinitionList.map((columnDefinition) => ( {columnDefinitionList.map((columnDefinition) => (
<Checkbox <Checkbox
className="tableColumnSelectionCheckbox" style={{ marginBottom: 0 }}
key={columnDefinition.id} key={columnDefinition.id}
label={`${columnDefinition.label}${columnDefinition.isPartitionKey ? " (partition key)" : ""}`} label={{
className: styles.checkboxLabel,
children: `${columnDefinition.label}${columnDefinition.isPartitionKey ? " (partition key)" : ""}`,
}}
checked={selectedColumnIdsSet.has(columnDefinition.id)} checked={selectedColumnIdsSet.has(columnDefinition.id)}
onChange={(_, checked) => onCheckedValueChange(columnDefinition.id, checked)} onChange={(_, data) => onCheckedValueChange(columnDefinition.id, data)}
/> />
))} ))}
</div> </div>
@ -114,6 +142,7 @@ export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> =
</Button> </Button>
</div> </div>
</div> </div>
</FluentProvider> </CosmosFluentProvider>
</div>
); );
}; };