From b64a2642ec7e2eae65367faa7ca0526640977abb Mon Sep 17 00:00:00 2001 From: Jacob Mischka Date: Wed, 5 Apr 2023 15:32:03 -0500 Subject: [PATCH 1/3] WIP: Add backgroundColor support for IO table renderCell Needs better handling for `io.select.table` hovered & selected states. --- src/examples/basic/table.ts | 87 ++++++++++++++++++++++++++++++++++++- src/ioSchema.ts | 1 + src/types.ts | 4 +- 3 files changed, 88 insertions(+), 4 deletions(-) diff --git a/src/examples/basic/table.ts b/src/examples/basic/table.ts index 75f1e57..b9fe3d6 100644 --- a/src/examples/basic/table.ts +++ b/src/examples/basic/table.ts @@ -1,5 +1,5 @@ import { IntervalActionDefinition } from '@interval/sdk/src/types' -import { IntervalActionHandler, Page, Layout, io } from '../..' +import { IntervalActionHandler, Action, Page, Layout, io } from '../..' import { faker } from '@faker-js/faker' import fakeUsers from '../utils/fakeUsers' import { generateRows } from '../utils/helpers' @@ -55,6 +55,7 @@ export const display_table: IntervalActionHandler = async io => { url: row.image, size: 'small', }, + backgroundColor: 'rgba(0, 60, 255, 0.3)', }), }, { @@ -107,6 +108,88 @@ export const display_table: IntervalActionHandler = async io => { }) } +export const highlighted_rows = new Action(async () => { + const data = generateRows(50) + + const backgroundColor = await io.input.text('Background color', { + helpText: 'CSS string value', + defaultValue: 'rgba(0, 60, 255, 0.3)', + }) + + await io.select.table('Select users', { + data, + defaultPageSize: 50, + columns: [ + { + label: 'User', + renderCell: row => ({ + label: row.name, + image: { + alt: 'Alt tag', + url: row.image, + size: 'small', + }, + backgroundColor: row.boolean ? backgroundColor : undefined, + }), + }, + { + label: 'Email', + renderCell: row => ({ + url: `mailto:${row.email}`, + label: row.email, + backgroundColor: row.boolean ? backgroundColor : undefined, + }), + }, + { + label: 'Description', + accessorKey: 'description', + renderCell: row => ({ + label: row.description, + backgroundColor: row.boolean ? backgroundColor : undefined, + }), + }, + { + label: 'Date', + accessorKey: 'date', + renderCell: row => ({ + label: row.date, + backgroundColor: row.boolean ? backgroundColor : undefined, + }), + }, + ], + rowMenuItems: row => [ + { + label: 'Edit', + route: 'edit_user', + params: { email: row.email }, + }, + { + label: 'Edit', + route: 'edit_user', + params: { email: row.email }, + disabled: true, + }, + { + label: 'Delete', + route: 'delete_user', + params: { email: row.email }, + theme: 'danger', + }, + { + label: 'Delete', + route: 'delete_user', + params: { email: row.email }, + theme: 'danger', + disabled: true, + }, + { + label: 'External', + url: 'https://google.com', + }, + ], + }) +}) + export const multiple_tables: IntervalActionHandler = async io => { await io.group([ io.display.table('Display users', { @@ -302,7 +385,7 @@ export const table_custom: IntervalActionHandler = async io => { const rows: { [key: string]: any }[] = [] for (let i = 0; i < rowsCount; i++) { - const row: typeof rows[0] = {} + const row: (typeof rows)[0] = {} for (const field of fields) { switch (field.value) { case 'id': diff --git a/src/ioSchema.ts b/src/ioSchema.ts index 1e0454f..31bd450 100644 --- a/src/ioSchema.ts +++ b/src/ioSchema.ts @@ -211,6 +211,7 @@ export const tableRowValue = z.union([ action: z.string().optional(), route: z.string().optional(), params: serializableRecord.optional(), + backgroundColor: z.string().optional(), }), ]) diff --git a/src/types.ts b/src/types.ts index acb8fb7..ce36349 100644 --- a/src/types.ts +++ b/src/types.ts @@ -509,10 +509,10 @@ export type TableColumnResult = } & ({ url: string } | { buffer: Buffer }) url?: string route?: string - // Deprecated in favor of `route` - // TODO: Add TS deprecation soon + /** @deprecated Please use `route` instead. */ action?: string params?: z.infer + backgroundColor?: string } | TableCellValue From 9b8af4f968739d856a6d3fcd0a9411c3caa1e928 Mon Sep 17 00:00:00 2001 From: Dan Philibin Date: Fri, 7 Apr 2023 01:43:18 +0000 Subject: [PATCH 2/3] backgroundColor -> highlightColor, new colors --- src/ioSchema.ts | 15 ++++++++++++++- src/types.ts | 2 +- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/ioSchema.ts b/src/ioSchema.ts index 31bd450..3d9005b 100644 --- a/src/ioSchema.ts +++ b/src/ioSchema.ts @@ -175,6 +175,19 @@ export const richSelectOption = z export type RichSelectOption = z.infer +export const highlightColors = z.enum([ + 'red', + 'orange', + 'yellow', + 'green', + 'blue', + 'purple', + 'pink', + 'gray', +]) + +export type HighlightColors = z.infer + // non-primitive display types such as links, images, etc. export const advancedPrimitive = z.object({ label: z.string().optional(), @@ -211,7 +224,7 @@ export const tableRowValue = z.union([ action: z.string().optional(), route: z.string().optional(), params: serializableRecord.optional(), - backgroundColor: z.string().optional(), + backgroundColor: highlightColors.optional(), }), ]) diff --git a/src/types.ts b/src/types.ts index ce36349..be10318 100644 --- a/src/types.ts +++ b/src/types.ts @@ -512,7 +512,7 @@ export type TableColumnResult = /** @deprecated Please use `route` instead. */ action?: string params?: z.infer - backgroundColor?: string + highlightColor?: string } | TableCellValue From b12b4a2f06add80cb1dcf323a1da219f8e3835a5 Mon Sep 17 00:00:00 2001 From: Dan Philibin Date: Mon, 10 Apr 2023 20:01:11 +0000 Subject: [PATCH 3/3] HighlightColors -> HighlightColor --- src/ioSchema.ts | 6 +++--- src/types.ts | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/ioSchema.ts b/src/ioSchema.ts index 3d9005b..4e08725 100644 --- a/src/ioSchema.ts +++ b/src/ioSchema.ts @@ -175,7 +175,7 @@ export const richSelectOption = z export type RichSelectOption = z.infer -export const highlightColors = z.enum([ +export const highlightColor = z.enum([ 'red', 'orange', 'yellow', @@ -186,7 +186,7 @@ export const highlightColors = z.enum([ 'gray', ]) -export type HighlightColors = z.infer +export type HighlightColor = z.infer // non-primitive display types such as links, images, etc. export const advancedPrimitive = z.object({ @@ -224,7 +224,7 @@ export const tableRowValue = z.union([ action: z.string().optional(), route: z.string().optional(), params: serializableRecord.optional(), - backgroundColor: highlightColors.optional(), + backgroundColor: highlightColor.optional(), }), ]) diff --git a/src/types.ts b/src/types.ts index ba8f03e..a2a31f8 100644 --- a/src/types.ts +++ b/src/types.ts @@ -19,6 +19,7 @@ import type { SerializableRecord, LegacyLinkProps, T_IO_MULTIPLEABLE_METHOD_NAMES, + HighlightColor, } from './ioSchema' import type { AccessControlDefinition, @@ -513,7 +514,7 @@ export type TableColumnResult = /** @deprecated Please use `route` instead. */ action?: string params?: z.infer - highlightColor?: string + highlightColor?: HighlightColor } | TableCellValue