Skip to content

Commit

Permalink
Merge 415d866 into b640a81
Browse files Browse the repository at this point in the history
  • Loading branch information
@LukasMasuch
LukasMasuch committed Jan 12, 2024
2 parents b640a81 + 415d866 commit f86b84e
Show file tree
Hide file tree
Showing 6 changed files with 862 additions and 20 deletions.
14 changes: 14 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions packages/cells/package.json
View file
Expand Up @@ -54,10 +54,12 @@
"@linaria/react": "^4.5.3",
"@toast-ui/editor": "3.1.10",
"@toast-ui/react-editor": "3.1.10",
"chroma-js": "^2.4.2",
"react-select": "^5.2.2"
},
"devDependencies": {
"@babel/cli": "^7.16.0",
"@types/chroma-js": "^2.4.3",
"@types/prosemirror-commands": "^1.0.4",
"@types/react": "16.14.21",
"eslint": "^8.19.0",
Expand Down
118 changes: 98 additions & 20 deletions packages/cells/src/cell.stories.tsx
View file
@@ -1,7 +1,7 @@
import { styled } from "@linaria/react";
import * as React from "react";
import { DataEditor, type DataEditorProps, GridCellKind } from "@glideapps/glide-data-grid";
import { DropdownCell as DropdownRenderer, allCells } from "./index.js";
import { DataEditor, type DataEditorProps, GridCellKind, type BubbleCell } from "@glideapps/glide-data-grid";
import { DropdownCell as DropdownRenderer, MultiSelectCell as MultiSelectRenderer, allCells } from "./index.js";
import type { StarCell } from "./cells/star-cell.js";
import type { SparklineCell } from "./cells/sparkline-cell.js";
import range from "lodash/range.js";
Expand All @@ -20,6 +20,7 @@ import type { DatePickerCell } from "./cells/date-picker-cell.js";
import type { LinksCell } from "./cells/links-cell.js";
import type { ButtonCell } from "./cells/button-cell.js";
import type { TreeViewCell } from "./cells/tree-view-cell.js";
import type { MultiSelectCell } from "./cells/multi-select-cell.js";

const SimpleWrapper = styled.div`
box-sizing: border-box;
Expand Down Expand Up @@ -448,13 +449,32 @@ export const CustomCells: React.VFC = () => {
readonly: true,
};
return t;
} else if (col === 16) {
const t: MultiSelectCell = {
kind: GridCellKind.Custom,
allowOverlay: true,
copyData: ["glide", "data", "grid"].join(","),
readonly: row % 2 === 0,
data: {
kind: "multi-select-cell",
values: ["glide", "data", "grid"],
options: [
{ value: "glide", color: "#ffc38a" },
{ value: "data", color: "#ebfdea" },
{ value: "grid", color: "teal" },
],
allowDuplicates: false,
allowCreation: true,
},
};
return t;
}
throw new Error("Fail");
}}
columns={[
{
title: "Stars",
width: 200,
width: 100,
},
{
title: "Sparkline (area)",
Expand Down Expand Up @@ -514,7 +534,11 @@ export const CustomCells: React.VFC = () => {
},
{
title: "TreeView",
width: 200,
width: 150,
},
{
id: "multiselect",
title: "Multiselect",
},
]}
rows={500}
Expand All @@ -529,7 +553,7 @@ export const CustomCells: React.VFC = () => {
};

export const CustomCellEditing: React.VFC = () => {
const data = React.useRef<string[]>([]);
const data = React.useRef<any[][]>([[]]);

return (
<BeautifulWrapper
Expand All @@ -543,30 +567,84 @@ export const CustomCellEditing: React.VFC = () => {
{...defaultProps}
customRenderers={allCells}
onPaste={true}
fillHandle={true}
onCellEdited={(cell, newVal) => {
if (newVal.kind !== GridCellKind.Custom) return;
if (DropdownRenderer.isMatch(newVal)) {
data.current[cell[1]] = newVal.data.value ?? "";
const [col, row] = cell;
if (newVal.kind !== GridCellKind.Custom) {
return;
}
if (data.current?.[col] == null) {
data.current[col] = [];
}
if (DropdownRenderer.isMatch(newVal) && col === 0) {
data.current[col][row] = newVal.data.value ?? "";
} else if (MultiSelectRenderer.isMatch(newVal) && (col === 1 || col === 2)) {
data.current[col][row] = newVal.data.values ?? [];
}
}}
getCellsForSelection={true}
getCellContent={cell => {
const [, row] = cell;
const val = data.current[row] ?? "A";
return {
kind: GridCellKind.Custom,
allowOverlay: true,
copyData: val,
data: {
kind: "dropdown-cell",
allowedValues: ["A", "B", "C"],
value: val,
},
} as DropdownCell;
const [col, row] = cell;
if (col === 0) {
const val = data.current?.[col]?.[row] ?? "A";
return {
kind: GridCellKind.Custom,
allowOverlay: true,
copyData: val,
data: {
kind: "dropdown-cell",
allowedValues: ["A", "B", "C"],
value: val,
},
} as DropdownCell;
} else if (col === 1) {
const val = data.current?.[col]?.[row] ?? ["glide"];
return {
kind: GridCellKind.Custom,
allowOverlay: true,
copyData: val?.join(","),
data: {
kind: "multi-select-cell",
values: val,
options: [
{ value: "glide", color: "#ffc38a", label: "Glide" },
{ value: "data", color: "#ebfdea", label: "Data" },
{ value: "grid", color: "teal", label: "Grid" },
],
allowDuplicates: false,
allowCreation: true,
},
} as MultiSelectCell;
} else if (col === 2) {
const val = data.current?.[col]?.[row] ?? ["glide data grid"];
return {
kind: GridCellKind.Custom,
allowOverlay: true,
copyData: val?.join(","),
data: {
kind: "multi-select-cell",
values: val,
allowDuplicates: true,
allowCreation: true,
},
} as MultiSelectCell;
}
throw new Error("Fail");
}}
columns={[
{
title: "Dropdown",
width: 150,
},
{
title: "Multi Select",
width: 200,
themeOverride: {
roundingRadius: 4,
},
},
{
title: "Multi Select (no options)",
width: 200,
},
]}
Expand Down

0 comments on commit f86b84e

Please sign in to comment.