b778b83ac4
* refactor admin settings feature * separated save-restart bar to separate component * created new CE dir to facilitate code split * created separate ee dir and exporting everything we have in ce file. * little mod * minor fix * splitting settings types config * using object literals for category types instead of enums * CE: support use of component for each category * minor style fix * authentication page UI changes implemented * github signup doc url added back * removed comments * routing updates * made subcategories listing in left pane optional * added muted saml to auth listing * added breadcrumbs and enabled button * created separate component for auth page and auth config * added callout and disconnect components * updated breadcrumbs component * minor updates to common components * updated warning callout and added icon * ce: test cases fixed * updated test file name * warning banner callout added on auth page * updated callout banner for form login * CE: Split config files * CE: moved the window declaration in EE file as its dependency will be updated in EE * CE: Splitting ApiConstants and SocialLogin constants * CE: split login page * CE: moved getSocialLoginButtonProps func to EE file as it's dependencies will be updated in EE * added key icon * CE: created a factory class to share social auths list * Minor style fix for social btns * Updated the third party auth styles * Small fixes to styling * ce: splitting forms constants * breadcrumbs implemented for all pages in admin settings * Settings breadcrumbs separated * splitted settings breadcrumbs between ce and ee * renamed default import * minor style fix * added login form config. * updated login/signup pages to use form login disabled config * removed common functionality outside * implemented breadcrumb component from scratch without using blueprint * removed unwanted code * Small style update * updated breadcrumb categories file name and breadcrumb icon * added cypress tests for admin settings auth page * added comments * update locator for upgrade button * added link for intercom on upgrade button * removed unnecessary file * minor style fix * style fix for auth option cards * split messages constant * fixed imports for message constants splitting. * added message constants * updated unit test cases * fixed messages import in cypress index * fixed messages import again, cypress fails to read re-exported objs. * added OIDC auth method on authentication page * updated import statements from ee to @appsmith * removed dead code * updated read more link UI * PR comments fixes * some UI fixes * used color and fonts from theme * fixed some imports * fixed some imports * removed warning imports * updated OIDC logo and auth method desc copies * css changes * css changes * css changes * updated cypress test for breadcrumb * moved callout component to ads as calloutv2 * UI changes for form fields * updated css for spacing between form fields * added sub-text on auth pages * added active class for breadcrumb item * added config for disable signup toggle and fixed UI issues of restart banner * fixed admin settings page bugs * assigned true as default state for signup * fixed messages import statements * updated code for PR comments related suggestions * reverted file path change in cypress support * updated cypress test * updated cypress test Co-authored-by: Ankita Kinger <ankita@appsmith.com>
1928 lines
68 KiB
TypeScript
1928 lines
68 KiB
TypeScript
import { get } from "lodash";
|
|
import { TableWidgetProps } from "../constants";
|
|
import { ValidationTypes } from "constants/WidgetValidation";
|
|
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
|
|
import { AutocompleteDataType } from "utils/autocomplete/TernServer";
|
|
import { PropertyPaneConfig } from "constants/PropertyControlConstants";
|
|
import {
|
|
ButtonBorderRadiusTypes,
|
|
ButtonVariantTypes,
|
|
} from "components/constants";
|
|
import {
|
|
updateDerivedColumnsHook,
|
|
ColumnTypes,
|
|
defaultSelectedRowValidation,
|
|
totalRecordsCountValidation,
|
|
updateColumnStyles,
|
|
updateIconAlignment,
|
|
getBasePropertyPath,
|
|
hideByColumnType,
|
|
uniqueColumnNameValidation,
|
|
} from "./propertyUtils";
|
|
import {
|
|
createMessage,
|
|
TABLE_WIDGET_TOTAL_RECORD_TOOLTIP,
|
|
} from "@appsmith/constants/messages";
|
|
import { IconNames } from "@blueprintjs/icons";
|
|
|
|
const ICON_NAMES = Object.keys(IconNames).map(
|
|
(name: string) => IconNames[name as keyof typeof IconNames],
|
|
);
|
|
|
|
export default [
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
helpText:
|
|
"Takes in an array of objects to display rows in the table. Bind data from an API using {{}}",
|
|
propertyName: "tableData",
|
|
label: "Table Data",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: '[{ "name": "John" }]',
|
|
inputType: "ARRAY",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.OBJECT_ARRAY,
|
|
params: {
|
|
default: [],
|
|
},
|
|
},
|
|
evaluationSubstitutionType: EvaluationSubstitutionType.SMART_SUBSTITUTE,
|
|
},
|
|
{
|
|
helpText: "Columns",
|
|
propertyName: "primaryColumns",
|
|
controlType: "PRIMARY_COLUMNS",
|
|
label: "Columns",
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: ["derivedColumns", "columnOrder"],
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.FUNCTION,
|
|
params: {
|
|
fn: uniqueColumnNameValidation,
|
|
expected: {
|
|
type: "Unique Column Names",
|
|
example: "abc",
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
},
|
|
},
|
|
panelConfig: {
|
|
editableTitle: true,
|
|
titlePropertyName: "label",
|
|
panelIdPropertyName: "id",
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: ["primaryColumns", "derivedColumns", "columnOrder"],
|
|
children: [
|
|
{
|
|
sectionName: "Column Control",
|
|
children: [
|
|
{
|
|
propertyName: "columnType",
|
|
label: "Column Type",
|
|
controlType: "DROP_DOWN",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
options: [
|
|
{
|
|
label: "Plain Text",
|
|
value: "text",
|
|
},
|
|
{
|
|
label: "URL",
|
|
value: "url",
|
|
},
|
|
{
|
|
label: "Number",
|
|
value: "number",
|
|
},
|
|
{
|
|
label: "Image",
|
|
value: "image",
|
|
},
|
|
{
|
|
label: "Video",
|
|
value: "video",
|
|
},
|
|
{
|
|
label: "Date",
|
|
value: "date",
|
|
},
|
|
{
|
|
label: "Button",
|
|
value: "button",
|
|
},
|
|
{
|
|
label: "Menu Button",
|
|
value: "menuButton",
|
|
},
|
|
{
|
|
label: "Icon Button",
|
|
value: "iconButton",
|
|
},
|
|
],
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "displayText",
|
|
label: "Display Text",
|
|
controlType: "COMPUTE_VALUE",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
const baseProperty = getBasePropertyPath(propertyPath);
|
|
const columnType = get(
|
|
props,
|
|
`${baseProperty}.columnType`,
|
|
"",
|
|
);
|
|
return columnType !== "url";
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
helpText:
|
|
"The value computed & shown in each cell. Use {{currentRow}} to reference each row in the table. This property is not accessible outside the column settings.",
|
|
propertyName: "computedValue",
|
|
label: "Computed Value",
|
|
controlType: "COMPUTE_VALUE",
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.DATE,
|
|
ColumnTypes.IMAGE,
|
|
ColumnTypes.NUMBER,
|
|
ColumnTypes.TEXT,
|
|
ColumnTypes.VIDEO,
|
|
ColumnTypes.URL,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "isCellVisible",
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnType",
|
|
],
|
|
label: "Visible",
|
|
helpText: "Controls the visibility of the cell in the column",
|
|
updateHook: updateDerivedColumnsHook,
|
|
defaultValue: true,
|
|
controlType: "SWITCH",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "isDisabled",
|
|
label: "Disabled",
|
|
updateHook: updateDerivedColumnsHook,
|
|
defaultValue: false,
|
|
controlType: "SWITCH",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.ICON_BUTTON,
|
|
ColumnTypes.MENU_BUTTON,
|
|
ColumnTypes.BUTTON,
|
|
]);
|
|
},
|
|
},
|
|
{
|
|
propertyName: "isCompact",
|
|
helpText: "Decides if menu items will consume lesser space",
|
|
updateHook: updateDerivedColumnsHook,
|
|
label: "Compact",
|
|
controlType: "SWITCH",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
},
|
|
isTriggerProperty: false,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.MENU_BUTTON,
|
|
]);
|
|
},
|
|
},
|
|
{
|
|
propertyName: "inputFormat",
|
|
label: "Original Date Format",
|
|
controlType: "DROP_DOWN",
|
|
options: [
|
|
{
|
|
label: "UNIX timestamp (s)",
|
|
value: "Epoch",
|
|
},
|
|
{
|
|
label: "UNIX timestamp (ms)",
|
|
value: "Milliseconds",
|
|
},
|
|
{
|
|
label: "YYYY-MM-DD",
|
|
value: "YYYY-MM-DD",
|
|
},
|
|
{
|
|
label: "YYYY-MM-DD HH:mm",
|
|
value: "YYYY-MM-DD HH:mm",
|
|
},
|
|
{
|
|
label: "ISO 8601",
|
|
value: "YYYY-MM-DDTHH:mm:ss.SSSZ",
|
|
},
|
|
{
|
|
label: "YYYY-MM-DDTHH:mm:ss",
|
|
value: "YYYY-MM-DDTHH:mm:ss",
|
|
},
|
|
{
|
|
label: "YYYY-MM-DD hh:mm:ss",
|
|
value: "YYYY-MM-DD hh:mm:ss",
|
|
},
|
|
{
|
|
label: "Do MMM YYYY",
|
|
value: "Do MMM YYYY",
|
|
},
|
|
{
|
|
label: "DD/MM/YYYY",
|
|
value: "DD/MM/YYYY",
|
|
},
|
|
{
|
|
label: "DD/MM/YYYY HH:mm",
|
|
value: "DD/MM/YYYY HH:mm",
|
|
},
|
|
{
|
|
label: "LLL",
|
|
value: "LLL",
|
|
},
|
|
{
|
|
label: "LL",
|
|
value: "LL",
|
|
},
|
|
{
|
|
label: "D MMMM, YYYY",
|
|
value: "D MMMM, YYYY",
|
|
},
|
|
{
|
|
label: "H:mm A D MMMM, YYYY",
|
|
value: "H:mm A D MMMM, YYYY",
|
|
},
|
|
{
|
|
label: "MM-DD-YYYY",
|
|
value: "MM-DD-YYYY",
|
|
},
|
|
{
|
|
label: "DD-MM-YYYY",
|
|
value: "DD-MM-YYYY",
|
|
},
|
|
{
|
|
label: "MM/DD/YYYY",
|
|
value: "MM/DD/YYYY",
|
|
},
|
|
{
|
|
label: "DD/MM/YYYY",
|
|
value: "DD/MM/YYYY",
|
|
},
|
|
{
|
|
label: "DD/MM/YY",
|
|
value: "DD/MM/YY",
|
|
},
|
|
{
|
|
label: "MM/DD/YY",
|
|
value: "MM/DD/YY",
|
|
},
|
|
],
|
|
defaultValue: "YYYY-MM-DD HH:mm",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
isJSConvertible: true,
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
const baseProperty = getBasePropertyPath(propertyPath);
|
|
const columnType = get(
|
|
props,
|
|
`${baseProperty}.columnType`,
|
|
"",
|
|
);
|
|
return columnType !== "date";
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: [
|
|
"Epoch",
|
|
"Milliseconds",
|
|
"YYYY-MM-DD",
|
|
"YYYY-MM-DD HH:mm",
|
|
"YYYY-MM-DDTHH:mm:ss.sssZ",
|
|
"YYYY-MM-DDTHH:mm:ss",
|
|
"YYYY-MM-DD hh:mm:ss",
|
|
"Do MMM YYYY",
|
|
"DD/MM/YYYY",
|
|
"DD/MM/YYYY HH:mm",
|
|
"LLL",
|
|
"LL",
|
|
"D MMMM, YYYY",
|
|
"H:mm A D MMMM, YYYY",
|
|
"MM-DD-YYYY",
|
|
"DD-MM-YYYY",
|
|
"MM/DD/YYYY",
|
|
"DD/MM/YYYY",
|
|
"DD/MM/YY",
|
|
"MM/DD/YY",
|
|
],
|
|
},
|
|
},
|
|
},
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "outputFormat",
|
|
label: "Display Date Format",
|
|
controlType: "DROP_DOWN",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
isJSConvertible: true,
|
|
options: [
|
|
{
|
|
label: "UNIX timestamp (s)",
|
|
value: "Epoch",
|
|
},
|
|
{
|
|
label: "UNIX timestamp (ms)",
|
|
value: "Milliseconds",
|
|
},
|
|
{
|
|
label: "YYYY-MM-DD",
|
|
value: "YYYY-MM-DD",
|
|
},
|
|
{
|
|
label: "YYYY-MM-DD HH:mm",
|
|
value: "YYYY-MM-DD HH:mm",
|
|
},
|
|
{
|
|
label: "ISO 8601",
|
|
value: "YYYY-MM-DDTHH:mm:ss.SSSZ",
|
|
},
|
|
{
|
|
label: "YYYY-MM-DDTHH:mm:ss",
|
|
value: "YYYY-MM-DDTHH:mm:ss",
|
|
},
|
|
{
|
|
label: "YYYY-MM-DD hh:mm:ss",
|
|
value: "YYYY-MM-DD hh:mm:ss",
|
|
},
|
|
{
|
|
label: "Do MMM YYYY",
|
|
value: "Do MMM YYYY",
|
|
},
|
|
{
|
|
label: "DD/MM/YYYY",
|
|
value: "DD/MM/YYYY",
|
|
},
|
|
{
|
|
label: "DD/MM/YYYY HH:mm",
|
|
value: "DD/MM/YYYY HH:mm",
|
|
},
|
|
{
|
|
label: "LLL",
|
|
value: "LLL",
|
|
},
|
|
{
|
|
label: "LL",
|
|
value: "LL",
|
|
},
|
|
{
|
|
label: "D MMMM, YYYY",
|
|
value: "D MMMM, YYYY",
|
|
},
|
|
{
|
|
label: "H:mm A D MMMM, YYYY",
|
|
value: "H:mm A D MMMM, YYYY",
|
|
},
|
|
{
|
|
label: "MM-DD-YYYY",
|
|
value: "MM-DD-YYYY",
|
|
},
|
|
{
|
|
label: "DD-MM-YYYY",
|
|
value: "DD-MM-YYYY",
|
|
},
|
|
{
|
|
label: "MM/DD/YYYY",
|
|
value: "MM/DD/YYYY",
|
|
},
|
|
{
|
|
label: "DD/MM/YYYY",
|
|
value: "DD/MM/YYYY",
|
|
},
|
|
{
|
|
label: "DD/MM/YY",
|
|
value: "DD/MM/YY",
|
|
},
|
|
{
|
|
label: "MM/DD/YY",
|
|
value: "MM/DD/YY",
|
|
},
|
|
],
|
|
defaultValue: "YYYY-MM-DD HH:mm",
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
const baseProperty = getBasePropertyPath(propertyPath);
|
|
const columnType = get(
|
|
props,
|
|
`${baseProperty}.columnType`,
|
|
"",
|
|
);
|
|
return columnType !== "date";
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnType",
|
|
],
|
|
isBindProperty: true,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: [
|
|
"Epoch",
|
|
"Milliseconds",
|
|
"YYYY-MM-DD",
|
|
"YYYY-MM-DD HH:mm",
|
|
"YYYY-MM-DDTHH:mm:ss.sssZ",
|
|
"YYYY-MM-DDTHH:mm:ss",
|
|
"YYYY-MM-DD hh:mm:ss",
|
|
"Do MMM YYYY",
|
|
"DD/MM/YYYY",
|
|
"DD/MM/YYYY HH:mm",
|
|
"LLL",
|
|
"LL",
|
|
"D MMMM, YYYY",
|
|
"H:mm A D MMMM, YYYY",
|
|
"MM-DD-YYYY",
|
|
"DD-MM-YYYY",
|
|
"MM/DD/YYYY",
|
|
"DD/MM/YYYY",
|
|
"DD/MM/YY",
|
|
"MM/DD/YY",
|
|
],
|
|
},
|
|
},
|
|
},
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "onClick",
|
|
label: "onClick",
|
|
controlType: "ACTION_SELECTOR",
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
const baseProperty = getBasePropertyPath(propertyPath);
|
|
const columnType = get(
|
|
props,
|
|
`${baseProperty}.columnType`,
|
|
"",
|
|
);
|
|
return columnType !== "image";
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Styles",
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(
|
|
props,
|
|
propertyPath,
|
|
[
|
|
ColumnTypes.TEXT,
|
|
ColumnTypes.DATE,
|
|
ColumnTypes.NUMBER,
|
|
ColumnTypes.URL,
|
|
],
|
|
true,
|
|
);
|
|
},
|
|
dependencies: ["primaryColumns", "derivedColumns"],
|
|
children: [
|
|
{
|
|
propertyName: "horizontalAlignment",
|
|
label: "Text Align",
|
|
controlType: "ICON_TABS",
|
|
options: [
|
|
{
|
|
icon: "LEFT_ALIGN",
|
|
value: "LEFT",
|
|
},
|
|
{
|
|
icon: "CENTER_ALIGN",
|
|
value: "CENTER",
|
|
},
|
|
{
|
|
icon: "RIGHT_ALIGN",
|
|
value: "RIGHT",
|
|
},
|
|
],
|
|
defaultValue: "LEFT",
|
|
isJSConvertible: true,
|
|
customJSControl: "COMPUTE_VALUE",
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: ["LEFT", "CENTER", "RIGHT"],
|
|
},
|
|
},
|
|
},
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "textSize",
|
|
label: "Text Size",
|
|
controlType: "DROP_DOWN",
|
|
isJSConvertible: true,
|
|
customJSControl: "COMPUTE_VALUE",
|
|
options: [
|
|
{
|
|
label: "Heading 1",
|
|
value: "HEADING1",
|
|
subText: "24px",
|
|
icon: "HEADING_ONE",
|
|
},
|
|
{
|
|
label: "Heading 2",
|
|
value: "HEADING2",
|
|
subText: "18px",
|
|
icon: "HEADING_TWO",
|
|
},
|
|
{
|
|
label: "Heading 3",
|
|
value: "HEADING3",
|
|
subText: "16px",
|
|
icon: "HEADING_THREE",
|
|
},
|
|
{
|
|
label: "Paragraph",
|
|
value: "PARAGRAPH",
|
|
subText: "14px",
|
|
icon: "PARAGRAPH",
|
|
},
|
|
{
|
|
label: "Paragraph 2",
|
|
value: "PARAGRAPH2",
|
|
subText: "12px",
|
|
icon: "PARAGRAPH_TWO",
|
|
},
|
|
],
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: [
|
|
"HEADING1",
|
|
"HEADING2",
|
|
"HEADING3",
|
|
"PARAGRAPH",
|
|
"PARAGRAPH2",
|
|
],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "fontStyle",
|
|
label: "Font Style",
|
|
controlType: "BUTTON_TABS",
|
|
options: [
|
|
{
|
|
icon: "BOLD_FONT",
|
|
value: "BOLD",
|
|
},
|
|
{
|
|
icon: "ITALICS_FONT",
|
|
value: "ITALIC",
|
|
},
|
|
{
|
|
icon: "UNDERLINE",
|
|
value: "UNDERLINE",
|
|
},
|
|
],
|
|
isJSConvertible: true,
|
|
customJSControl: "COMPUTE_VALUE",
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "verticalAlignment",
|
|
label: "Vertical Alignment",
|
|
controlType: "ICON_TABS",
|
|
options: [
|
|
{
|
|
icon: "VERTICAL_TOP",
|
|
value: "TOP",
|
|
},
|
|
{
|
|
icon: "VERTICAL_CENTER",
|
|
value: "CENTER",
|
|
},
|
|
{
|
|
icon: "VERTICAL_BOTTOM",
|
|
value: "BOTTOM",
|
|
},
|
|
],
|
|
defaultValue: "LEFT",
|
|
isJSConvertible: true,
|
|
customJSControl: "COMPUTE_VALUE",
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: ["TOP", "CENTER", "BOTTOM"],
|
|
},
|
|
},
|
|
},
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "textColor",
|
|
label: "Text Color",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
customJSControl: "COMPUTE_VALUE",
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
},
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "cellBackground",
|
|
label: "Cell Background",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
customJSControl: "COMPUTE_VALUE",
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
},
|
|
isTriggerProperty: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Button Properties",
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(
|
|
props,
|
|
propertyPath,
|
|
[
|
|
ColumnTypes.BUTTON,
|
|
ColumnTypes.MENU_BUTTON,
|
|
ColumnTypes.ICON_BUTTON,
|
|
],
|
|
true,
|
|
);
|
|
},
|
|
children: [
|
|
{
|
|
propertyName: "iconName",
|
|
label: "Icon",
|
|
helpText: "Sets the icon to be used for the icon button",
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.ICON_BUTTON,
|
|
ColumnTypes.MENU_BUTTON,
|
|
]);
|
|
},
|
|
updateHook: updateIconAlignment,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
controlType: "ICON_SELECT",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
defaultIconName: "add",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: ICON_NAMES,
|
|
default: IconNames.ADD,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "iconAlign",
|
|
label: "Icon Alignment",
|
|
helpText: "Sets the icon alignment of the menu button",
|
|
controlType: "ICON_TABS",
|
|
options: [
|
|
{
|
|
icon: "VERTICAL_LEFT",
|
|
value: "left",
|
|
},
|
|
{
|
|
icon: "VERTICAL_RIGHT",
|
|
value: "right",
|
|
},
|
|
],
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.MENU_BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: ["center", "left", "right"],
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "buttonLabel",
|
|
label: "Label",
|
|
controlType: "COMPUTE_VALUE",
|
|
defaultValue: "Action",
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "menuButtonLabel",
|
|
label: "Label",
|
|
controlType: "COMPUTE_VALUE",
|
|
defaultValue: "Open Menu",
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.MENU_BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "buttonColor",
|
|
label: "Button Color",
|
|
controlType: "COLOR_PICKER",
|
|
helpText: "Changes the color of the button",
|
|
isJSConvertible: true,
|
|
customJSControl: "COMPUTE_VALUE",
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.BUTTON,
|
|
ColumnTypes.ICON_BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
},
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "buttonVariant",
|
|
label: "Button Variant",
|
|
controlType: "DROP_DOWN",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
isJSConvertible: true,
|
|
helpText: "Sets the variant of the icon button",
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.ICON_BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
options: [
|
|
{
|
|
label: "Primary",
|
|
value: ButtonVariantTypes.PRIMARY,
|
|
},
|
|
{
|
|
label: "Secondary",
|
|
value: ButtonVariantTypes.SECONDARY,
|
|
},
|
|
{
|
|
label: "Tertiary",
|
|
value: ButtonVariantTypes.TERTIARY,
|
|
},
|
|
],
|
|
defaultValue: ButtonVariantTypes.PRIMARY,
|
|
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
default: ButtonVariantTypes.PRIMARY,
|
|
allowedValues: [
|
|
ButtonVariantTypes.PRIMARY,
|
|
ButtonVariantTypes.SECONDARY,
|
|
ButtonVariantTypes.TERTIARY,
|
|
],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "borderRadius",
|
|
label: "Border Radius",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
isJSConvertible: true,
|
|
helpText:
|
|
"Rounds the corners of the icon button's outer border edge",
|
|
controlType: "BORDER_RADIUS_OPTIONS",
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.ICON_BUTTON,
|
|
]);
|
|
},
|
|
options: [
|
|
ButtonBorderRadiusTypes.SHARP,
|
|
ButtonBorderRadiusTypes.ROUNDED,
|
|
ButtonBorderRadiusTypes.CIRCLE,
|
|
],
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: ["CIRCLE", "SHARP", "ROUNDED"],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "boxShadow",
|
|
label: "Box Shadow",
|
|
helpText:
|
|
"Enables you to cast a drop shadow from the frame of the widget",
|
|
controlType: "BOX_SHADOW_OPTIONS",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
isJSConvertible: true,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.ICON_BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: [
|
|
"NONE",
|
|
"VARIANT1",
|
|
"VARIANT2",
|
|
"VARIANT3",
|
|
"VARIANT4",
|
|
"VARIANT5",
|
|
],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "boxShadowColor",
|
|
helpText: "Sets the shadow color of the widget",
|
|
label: "Shadow Color",
|
|
controlType: "COLOR_PICKER",
|
|
customJSControl: "COMPUTE_VALUE",
|
|
isJSConvertible: true,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.ICON_BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
},
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "buttonLabelColor",
|
|
label: "Label Color",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
customJSControl: "COMPUTE_VALUE",
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
updateHook: updateDerivedColumnsHook,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
{
|
|
propertyName: "menuColor",
|
|
helpText:
|
|
"Sets the custom color preset based on the menu button variant",
|
|
label: "Menu Color",
|
|
controlType: "COLOR_PICKER",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
isJSConvertible: true,
|
|
placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)",
|
|
validation: {
|
|
type: ValidationTypes.TABLE_PROPERTY,
|
|
params: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
},
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.MENU_BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
// Remove menu Style once Custom is Chosen
|
|
updateHook: updateDerivedColumnsHook,
|
|
},
|
|
{
|
|
propertyName: "menuVariant",
|
|
label: "Menu Variant",
|
|
controlType: "DROP_DOWN",
|
|
helpText: "Sets the variant of the menu button",
|
|
options: [
|
|
{
|
|
label: "Primary",
|
|
value: ButtonVariantTypes.PRIMARY,
|
|
},
|
|
{
|
|
label: "Secondary",
|
|
value: ButtonVariantTypes.SECONDARY,
|
|
},
|
|
{
|
|
label: "Tertiary",
|
|
value: ButtonVariantTypes.TERTIARY,
|
|
},
|
|
],
|
|
isJSConvertible: true,
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.MENU_BUTTON,
|
|
]);
|
|
},
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
default: ButtonVariantTypes.PRIMARY,
|
|
allowedValues: [
|
|
ButtonVariantTypes.PRIMARY,
|
|
ButtonVariantTypes.SECONDARY,
|
|
ButtonVariantTypes.TERTIARY,
|
|
],
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "borderRadius",
|
|
label: "Border Radius",
|
|
helpText:
|
|
"Rounds the corners of the icon button's outer border edge",
|
|
controlType: "BUTTON_BORDER_RADIUS_OPTIONS",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.MENU_BUTTON,
|
|
]);
|
|
},
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: ["CIRCLE", "SHARP", "ROUNDED"],
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "boxShadow",
|
|
label: "Box Shadow",
|
|
helpText:
|
|
"Enables you to cast a drop shadow from the frame of the widget",
|
|
controlType: "BOX_SHADOW_OPTIONS",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.MENU_BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
allowedValues: [
|
|
"NONE",
|
|
"VARIANT1",
|
|
"VARIANT2",
|
|
"VARIANT3",
|
|
"VARIANT4",
|
|
"VARIANT5",
|
|
],
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "boxShadowColor",
|
|
helpText: "Sets the shadow color of the widget",
|
|
label: "Shadow Color",
|
|
controlType: "COLOR_PICKER",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
updateHook: updateDerivedColumnsHook,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.MENU_BUTTON,
|
|
]);
|
|
},
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
},
|
|
|
|
{
|
|
helpText: "Triggers an action when the button is clicked",
|
|
propertyName: "onClick",
|
|
label: "onClick",
|
|
controlType: "ACTION_SELECTOR",
|
|
additionalAutoComplete: (props: TableWidgetProps) => ({
|
|
currentRow: Object.assign(
|
|
{},
|
|
...Object.keys(props.primaryColumns).map((key) => ({
|
|
[key]: "",
|
|
})),
|
|
),
|
|
}),
|
|
isJSConvertible: true,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(props, propertyPath, [
|
|
ColumnTypes.BUTTON,
|
|
ColumnTypes.ICON_BUTTON,
|
|
]);
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Menu Items",
|
|
hidden: (props: TableWidgetProps, propertyPath: string) => {
|
|
return hideByColumnType(
|
|
props,
|
|
propertyPath,
|
|
[ColumnTypes.MENU_BUTTON],
|
|
true,
|
|
);
|
|
},
|
|
updateHook: updateDerivedColumnsHook,
|
|
children: [
|
|
{
|
|
helpText: "Menu items",
|
|
propertyName: "menuItems",
|
|
controlType: "MENU_ITEMS",
|
|
label: "",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
dependencies: ["derivedColumns", "columnOrder"],
|
|
panelConfig: {
|
|
editableTitle: true,
|
|
titlePropertyName: "label",
|
|
panelIdPropertyName: "id",
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
children: [
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
propertyName: "label",
|
|
helpText: "Sets the label of a menu item",
|
|
label: "Label",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: "Enter label",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
updateHook: updateDerivedColumnsHook,
|
|
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
},
|
|
{
|
|
propertyName: "backgroundColor",
|
|
helpText:
|
|
"Sets the background color of a menu item",
|
|
label: "Background color",
|
|
controlType: "COLOR_PICKER",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
updateHook: updateDerivedColumnsHook,
|
|
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
},
|
|
{
|
|
propertyName: "textColor",
|
|
helpText: "Sets the text color of a menu item",
|
|
label: "Text color",
|
|
controlType: "COLOR_PICKER",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
updateHook: updateDerivedColumnsHook,
|
|
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
},
|
|
{
|
|
propertyName: "isDisabled",
|
|
helpText: "Disables input to the widget",
|
|
label: "Disabled",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
updateHook: updateDerivedColumnsHook,
|
|
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
},
|
|
{
|
|
propertyName: "isVisible",
|
|
helpText: "Controls the visibility of the widget",
|
|
label: "Visible",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
updateHook: updateDerivedColumnsHook,
|
|
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Icon Options",
|
|
children: [
|
|
{
|
|
propertyName: "iconName",
|
|
label: "Icon",
|
|
helpText:
|
|
"Sets the icon to be used for a menu item",
|
|
controlType: "ICON_SELECT",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
updateHook: updateDerivedColumnsHook,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
},
|
|
{
|
|
propertyName: "iconColor",
|
|
helpText: "Sets the icon color of a menu item",
|
|
label: "Icon color",
|
|
controlType: "COLOR_PICKER",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
updateHook: updateDerivedColumnsHook,
|
|
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
},
|
|
{
|
|
propertyName: "iconAlign",
|
|
label: "Icon alignment",
|
|
helpText: "Sets the icon alignment of a menu item",
|
|
controlType: "ICON_TABS",
|
|
options: [
|
|
{
|
|
icon: "VERTICAL_LEFT",
|
|
value: "left",
|
|
},
|
|
{
|
|
icon: "VERTICAL_RIGHT",
|
|
value: "right",
|
|
},
|
|
],
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
updateHook: updateDerivedColumnsHook,
|
|
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Events",
|
|
children: [
|
|
{
|
|
helpText:
|
|
"Triggers an action when the menu item is clicked",
|
|
propertyName: "onClick",
|
|
label: "onItemClick",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
dependencies: [
|
|
"primaryColumns",
|
|
"derivedColumns",
|
|
"columnOrder",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
},
|
|
{
|
|
helpText:
|
|
"Assigns a unique column which helps maintain selectedRows and triggeredRows based on value",
|
|
propertyName: "primaryColumnId",
|
|
dependencies: ["primaryColumns"],
|
|
label: "Primary key column",
|
|
controlType: "PRIMARY_COLUMNS_DROPDOWN",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
propertyName: "defaultSearchText",
|
|
label: "Default Search Text",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: "{{appsmith.user.name}}",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
helpText: "Selects row(s) by default",
|
|
propertyName: "defaultSelectedRow",
|
|
label: "Default Selected Row",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: "0",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.FUNCTION,
|
|
params: {
|
|
fn: defaultSelectedRowValidation,
|
|
expected: {
|
|
type: "Index of row(s)",
|
|
example: "0 | [0, 1]",
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
},
|
|
},
|
|
dependencies: ["multiRowSelection"],
|
|
},
|
|
{
|
|
propertyName: "compactMode",
|
|
helpText: "Selects row height",
|
|
label: "Default Row Height",
|
|
controlType: "DROP_DOWN",
|
|
defaultValue: "DEFAULT",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
options: [
|
|
{
|
|
label: "Short",
|
|
value: "SHORT",
|
|
},
|
|
{
|
|
label: "Default",
|
|
value: "DEFAULT",
|
|
},
|
|
{
|
|
label: "Tall",
|
|
value: "TALL",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
helpText:
|
|
"Bind the Table.pageNo property in your API and call it onPageChange",
|
|
propertyName: "serverSidePaginationEnabled",
|
|
label: "Server Side Pagination",
|
|
controlType: "SWITCH",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
helpText: createMessage(TABLE_WIDGET_TOTAL_RECORD_TOOLTIP),
|
|
propertyName: "totalRecordsCount",
|
|
label: "Total Record Count",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: "Enter total record count",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.FUNCTION,
|
|
params: {
|
|
fn: totalRecordsCountValidation,
|
|
expected: {
|
|
type: "Number",
|
|
example: "10",
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
},
|
|
},
|
|
hidden: (props: TableWidgetProps) =>
|
|
!!!props.serverSidePaginationEnabled,
|
|
dependencies: ["serverSidePaginationEnabled"],
|
|
},
|
|
{
|
|
helpText: "Controls the visibility of the widget",
|
|
propertyName: "isVisible",
|
|
isJSConvertible: true,
|
|
label: "Visible",
|
|
controlType: "SWITCH",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
},
|
|
{
|
|
propertyName: "animateLoading",
|
|
label: "Animate Loading",
|
|
controlType: "SWITCH",
|
|
helpText: "Controls the loading of the widget",
|
|
defaultValue: true,
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
{
|
|
helpText: "Controls sorting in View Mode",
|
|
propertyName: "isSortable",
|
|
isJSConvertible: true,
|
|
label: "Sortable",
|
|
controlType: "SWITCH",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
params: {
|
|
default: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "multiRowSelection",
|
|
label: "Enable multi row selection",
|
|
controlType: "SWITCH",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "enableClientSideSearch",
|
|
label: "Enable client side search",
|
|
controlType: "SWITCH",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Events",
|
|
children: [
|
|
{
|
|
helpText: "Triggers an action when a table row is selected",
|
|
propertyName: "onRowSelected",
|
|
label: "onRowSelected",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
},
|
|
{
|
|
helpText: "Triggers an action when a table page is changed",
|
|
propertyName: "onPageChange",
|
|
label: "onPageChange",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
},
|
|
{
|
|
helpText: "Triggers an action when a table page size is changed",
|
|
propertyName: "onPageSizeChange",
|
|
label: "onPageSizeChange",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
},
|
|
{
|
|
propertyName: "onSearchTextChanged",
|
|
label: "onSearchTextChanged",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
},
|
|
{
|
|
helpText: "Triggers an action when a table column is sorted",
|
|
propertyName: "onSort",
|
|
label: "onSort",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Header options",
|
|
children: [
|
|
{
|
|
helpText: "Toggle visibility of the search box",
|
|
propertyName: "isVisibleSearch",
|
|
label: "Search",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
{
|
|
helpText: "Toggle visibility of the filters",
|
|
propertyName: "isVisibleFilters",
|
|
label: "Filters",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
{
|
|
helpText: "Toggle visibility of the data download",
|
|
propertyName: "isVisibleDownload",
|
|
label: "Download",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
{
|
|
helpText: "Toggle visibility of the pagination",
|
|
propertyName: "isVisiblePagination",
|
|
label: "Pagination",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
{
|
|
propertyName: "delimiter",
|
|
label: "CSV Separator",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: "Enter CSV separator",
|
|
helpText: "The character used for separating the CSV download file.",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
defaultValue: ",",
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
},
|
|
hidden: (props: TableWidgetProps) => !props.isVisibleDownload,
|
|
dependencies: ["isVisibleDownload"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Styles",
|
|
children: [
|
|
{
|
|
propertyName: "cellBackground",
|
|
label: "Cell Background Color",
|
|
controlType: "COLOR_PICKER",
|
|
updateHook: updateColumnStyles,
|
|
dependencies: ["primaryColumns", "derivedColumns"],
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "textColor",
|
|
label: "Text Color",
|
|
controlType: "COLOR_PICKER",
|
|
updateHook: updateColumnStyles,
|
|
dependencies: ["primaryColumns", "derivedColumns"],
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "textSize",
|
|
label: "Text Size",
|
|
controlType: "DROP_DOWN",
|
|
updateHook: updateColumnStyles,
|
|
dependencies: ["primaryColumns", "derivedColumns"],
|
|
options: [
|
|
{
|
|
label: "Heading 1",
|
|
value: "HEADING1",
|
|
subText: "24px",
|
|
icon: "HEADING_ONE",
|
|
},
|
|
{
|
|
label: "Heading 2",
|
|
value: "HEADING2",
|
|
subText: "18px",
|
|
icon: "HEADING_TWO",
|
|
},
|
|
{
|
|
label: "Heading 3",
|
|
value: "HEADING3",
|
|
subText: "16px",
|
|
icon: "HEADING_THREE",
|
|
},
|
|
{
|
|
label: "Paragraph",
|
|
value: "PARAGRAPH",
|
|
subText: "14px",
|
|
icon: "PARAGRAPH",
|
|
},
|
|
{
|
|
label: "Paragraph 2",
|
|
value: "PARAGRAPH2",
|
|
subText: "12px",
|
|
icon: "PARAGRAPH_TWO",
|
|
},
|
|
],
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "fontStyle",
|
|
label: "Font Style",
|
|
controlType: "BUTTON_TABS",
|
|
updateHook: updateColumnStyles,
|
|
dependencies: ["primaryColumns", "derivedColumns"],
|
|
options: [
|
|
{
|
|
icon: "BOLD_FONT",
|
|
value: "BOLD",
|
|
},
|
|
{
|
|
icon: "ITALICS_FONT",
|
|
value: "ITALIC",
|
|
},
|
|
],
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "horizontalAlignment",
|
|
label: "Text Align",
|
|
controlType: "ICON_TABS",
|
|
updateHook: updateColumnStyles,
|
|
dependencies: ["primaryColumns", "derivedColumns"],
|
|
options: [
|
|
{
|
|
icon: "LEFT_ALIGN",
|
|
value: "LEFT",
|
|
},
|
|
{
|
|
icon: "CENTER_ALIGN",
|
|
value: "CENTER",
|
|
},
|
|
{
|
|
icon: "RIGHT_ALIGN",
|
|
value: "RIGHT",
|
|
},
|
|
],
|
|
defaultValue: "LEFT",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "verticalAlignment",
|
|
label: "Vertical Alignment",
|
|
controlType: "ICON_TABS",
|
|
updateHook: updateColumnStyles,
|
|
dependencies: ["primaryColumns", "derivedColumns"],
|
|
options: [
|
|
{
|
|
icon: "VERTICAL_TOP",
|
|
value: "TOP",
|
|
},
|
|
{
|
|
icon: "VERTICAL_CENTER",
|
|
value: "CENTER",
|
|
},
|
|
{
|
|
icon: "VERTICAL_BOTTOM",
|
|
value: "BOTTOM",
|
|
},
|
|
],
|
|
defaultValue: "LEFT",
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
],
|
|
},
|
|
] as PropertyPaneConfig[];
|