-
Notifications
You must be signed in to change notification settings - Fork 90
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
322 additions
and
39 deletions.
There are no files selected for viewing
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 |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| --- | ||
| "@salt-ds/ag-grid-theme": patch | ||
| --- | ||
|
|
||
| - Fixed background color for custom editor component. | ||
| - Fixed header text being cropped in HD compact. Closes #3675. | ||
| - Fixed Country Symbol taller than expected in HD compact. This alters `--salt-size-base` token so Salt Button, form controls (Input, Dropdown, Combo Box) will be impacted as well. Closes #3775. | ||
| - Fixed group value not center aligned vertically. | ||
| - Updated ag grid menu styling to match closer to Salt Menu component. | ||
| - Updated floating filter column chooser item styles. Closes #3671. | ||
|
|
||
| Note: We previously made a mistake on `rowHeight` recommendation when configurating AG Grid, which should be 1px more to account for border between row. | ||
| `useAgGridHelpers` example hook is updated to reflect this. | ||
|
|
||
| | Density | Row height ([`rowHeight`](https://www.ag-grid.com/javascript-data-grid/row-height/)) | Header height ([`headerHeight`](https://www.ag-grid.com/javascript-data-grid/column-headers/#header-height)) | | ||
| | ------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | | ||
| | HD (Compact) | 21 | 20 | | ||
| | HD | 25 | 24 | | ||
| | MD | 37 | 36 | | ||
| | LD | 49 | 48 | | ||
| | TD | 61 | 60 | |
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
88 changes: 88 additions & 0 deletions
88
packages/ag-grid-theme/src/dependencies/cell-editors/DropdownEditor.tsx
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 |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import { Dropdown, type DropdownProps, Option } from "@salt-ds/core"; | ||
| import type { ICellEditorParams } from "ag-grid-community"; | ||
| import { | ||
| type KeyboardEvent, | ||
| type SyntheticEvent, | ||
| forwardRef, | ||
| useCallback, | ||
| useEffect, | ||
| useImperativeHandle, | ||
| useRef, | ||
| useState, | ||
| } from "react"; | ||
|
|
||
| export type GridCellValue = string | boolean | number; | ||
|
|
||
| export interface DropdownEditorParams extends ICellEditorParams { | ||
| source?: Array<GridCellValue>; | ||
| dropdownProps?: Partial<DropdownProps<string>>; | ||
| } | ||
|
|
||
| export const DropdownEditor = forwardRef((props: DropdownEditorParams, ref) => { | ||
| const { value: initialValue, source = [], dropdownProps } = props; | ||
| const [value, setValue] = useState(initialValue); | ||
|
|
||
| const buttonRef = useRef<HTMLButtonElement>(null); | ||
|
|
||
| const onSelect = useCallback( | ||
| (_event: SyntheticEvent, selectedValue: Array<GridCellValue>) => { | ||
| setValue(selectedValue[0]); | ||
|
|
||
| // hack to make selection actually record the edit. | ||
| // timeout is necessary because otherwise the grid stops editing | ||
| // before the useImperativeHandle getValue returns the new value state | ||
| setTimeout(() => { | ||
| props.api?.stopEditing(); | ||
| }, 100); | ||
| }, | ||
| [props.api], | ||
| ); | ||
|
|
||
| const onEscapeKeyPressed = useCallback( | ||
| (e: KeyboardEvent) => { | ||
| if (e.key === "Escape") { | ||
| props.api?.stopEditing(); | ||
| } | ||
| }, | ||
| [props.api], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| buttonRef.current?.focus(); | ||
| }, []); | ||
|
|
||
| useImperativeHandle(ref, () => ({ getValue: (): typeof value => value })); | ||
|
|
||
| return ( | ||
| <Dropdown | ||
| onSelectionChange={onSelect} | ||
| defaultOpen={props.cellStartedEdit} | ||
| selected={[value || ""]} | ||
| ref={buttonRef} | ||
| onKeyDown={onEscapeKeyPressed} | ||
| className="DropdownEditor" | ||
| {...dropdownProps} | ||
| style={{ | ||
| // Outline will be shown on the cell | ||
| outline: "none", | ||
| // Leave room for cell focus ring | ||
| marginInline: "2px", | ||
| width: "calc(100% - 4px)", | ||
| }} | ||
| > | ||
| <div | ||
| ref={(elem): void => { | ||
| if (!elem) return; | ||
| // current element -> list container -> list box that matters | ||
| ( | ||
| (elem.parentElement as HTMLElement).parentElement as HTMLElement | ||
| ).className += " ag-custom-component-popup"; // https://www.ag-grid.com/react-data-grid/component-filter/#custom-filters-containing-a-popup-element | ||
| }} | ||
| > | ||
| {source.map((item) => ( | ||
| <Option value={item} key={String(item)} /> | ||
| ))} | ||
| </div> | ||
| </Dropdown> | ||
| ); | ||
| }); |
23 changes: 23 additions & 0 deletions
23
packages/ag-grid-theme/src/dependencies/cell-renderers/FlagRenderer.tsx
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 |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { countryMetaMap } from "@salt-ds/countries"; | ||
| import type { CustomCellRendererProps } from "ag-grid-react"; | ||
|
|
||
| export const FlagRenderer = (props: CustomCellRendererProps) => { | ||
| const isoCode = props.value as keyof typeof countryMetaMap; | ||
| return ( | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| flexFlow: "row", | ||
| justifyContent: "center", | ||
| width: "100%", | ||
| height: "100%", | ||
| alignItems: "center", | ||
| }} | ||
| > | ||
| <span | ||
| className={`saltCountrySharp-${isoCode}`} | ||
| aria-label={countryMetaMap[isoCode]?.countryName} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
65 changes: 65 additions & 0 deletions
65
packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsHdCompact.ts
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 |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import type { ColDef } from "ag-grid-community"; | ||
| import { DropdownEditor } from "./cell-editors/DropdownEditor"; | ||
| import { FlagRenderer } from "./cell-renderers/FlagRenderer"; | ||
|
|
||
| const dataGridExampleColumnsHdCompact: ColDef[] = [ | ||
| { | ||
| headerName: "", | ||
| field: "on", | ||
| width: 70, | ||
| flex: 1, | ||
| checkboxSelection: true, | ||
| headerCheckboxSelection: true, | ||
| pinned: "left", | ||
| suppressHeaderMenuButton: true, | ||
| resizable: false, | ||
| suppressColumnsToolPanel: true, | ||
| }, | ||
| { | ||
| headerName: "Name", | ||
| field: "name", | ||
| filterParams: { | ||
| buttons: ["reset", "apply"], | ||
| }, | ||
| editable: false, | ||
| }, | ||
| { | ||
| headerName: "Code", | ||
| field: "code", | ||
| }, | ||
| { | ||
| headerName: "Capital", | ||
| field: "capital", | ||
| filter: "agSetColumnFilter", | ||
| }, | ||
| { | ||
| headerName: "Population", | ||
| type: "numericColumn", | ||
| field: "population", | ||
| filter: "agNumberColumnFilter", | ||
| editable: true, | ||
| cellClass: ["editable-cell"], | ||
| }, | ||
| { | ||
| headerName: "Date", | ||
| field: "date", | ||
| filter: "agDateColumnFilter", | ||
| }, | ||
| { | ||
| headerName: "Rating", | ||
| field: "rating", | ||
| // Not using `editable-cell` as it doesn't work with Dropdown focus style | ||
| editable: true, | ||
| cellEditor: "DropdownEditor", | ||
| cellEditorParams: { | ||
| source: [10, 20, 30, 40, 50, 60], | ||
| }, | ||
| }, | ||
| { | ||
| headerName: "Flag", | ||
| field: "country", | ||
| cellRenderer: FlagRenderer, | ||
| initialWidth: 80, | ||
| }, | ||
| ]; | ||
| export default dataGridExampleColumnsHdCompact; |
Oops, something went wrong.