fix: Table reskinning (#17228)
* update rich text editor styles * fix disalbed text color * add border * fix gaps and borders in json form * fix disabled state * fix checkbox disabled state color on checkbox + font size of title in json * fix pagination arrows * update list + modal * update tabs widget * fix border color * fix pagination styles * fix font weight * update colors * update colors * fix table hidden header * add config for variant * add check header border * fix hover colors * fix hover colors * add fixes for feedbacks from dilip * move cell borders * move cell borders * update label * add dilip feedback fixes * remove unused import * fix font in filter popup * fix margin and datepicker getting cut off * table disabled state for header input * fix icon color * fix cypress tests
This commit is contained in:
Pawan Kumar
GitHub
parent
01f2fac326
commit
5ab8e57e0d
|
|
@ -321,7 +321,7 @@ describe("Table Widget V2 property pane feature validation", function() {
|
|||
"0",
|
||||
"0",
|
||||
"background",
|
||||
"rgb(126, 34, 206) none repeat scroll 0% 0% / auto padding-box border-box",
|
||||
"rgb(113, 30, 184) none repeat scroll 0% 0% / auto padding-box border-box",
|
||||
true,
|
||||
);
|
||||
// Changing Cell backgroud color to PURPLE and validate using JS
|
||||
|
|
@ -332,7 +332,7 @@ describe("Table Widget V2 property pane feature validation", function() {
|
|||
"0",
|
||||
"0",
|
||||
"background",
|
||||
"rgb(128, 0, 128) none repeat scroll 0% 0% / auto padding-box border-box",
|
||||
"rgb(102, 0, 102) none repeat scroll 0% 0% / auto padding-box border-box",
|
||||
true,
|
||||
);
|
||||
// close property pane
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ describe("Checkbox column type funtionality test", () => {
|
|||
cy.get(selector + " div").should(
|
||||
"have.css",
|
||||
"background-color",
|
||||
"rgb(128, 0, 128)",
|
||||
"rgb(102, 0, 102)",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ describe("Switch column type funtionality test", () => {
|
|||
cy.get(selector + " div").should(
|
||||
"have.css",
|
||||
"background-color",
|
||||
"rgb(128, 0, 128)",
|
||||
"rgb(102, 0, 102)",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export type PopperProps = {
|
|||
parentElement?: Element | null;
|
||||
zIndex: number;
|
||||
isOpen: boolean;
|
||||
borderRadius?: string;
|
||||
themeMode?: ThemeMode;
|
||||
targetNode?: Element;
|
||||
children: JSX.Element | null;
|
||||
|
|
@ -31,6 +32,7 @@ export type PopperProps = {
|
|||
isDraggable?: boolean;
|
||||
disablePopperEvents?: boolean;
|
||||
cypressSelectorDragHandle?: string;
|
||||
portalContainer?: Element;
|
||||
position?: {
|
||||
top: number;
|
||||
left: number;
|
||||
|
|
@ -39,9 +41,12 @@ export type PopperProps = {
|
|||
// DraggableNode?: any;
|
||||
};
|
||||
|
||||
const PopperWrapper = styled.div<{ zIndex: number }>`
|
||||
const PopperWrapper = styled.div<{ zIndex: number; borderRadius?: string }>`
|
||||
z-index: ${(props) => props.zIndex};
|
||||
position: absolute;
|
||||
border-radius: ${(props) => props.borderRadius || "0"};
|
||||
box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const DragHandleBlock = styled.div`
|
||||
|
|
@ -178,10 +183,14 @@ export default (props: PopperProps) => {
|
|||
]);
|
||||
return createPortal(
|
||||
props.isOpen && (
|
||||
<PopperWrapper ref={contentRef} zIndex={props.zIndex}>
|
||||
<PopperWrapper
|
||||
borderRadius={props.borderRadius}
|
||||
ref={contentRef}
|
||||
zIndex={props.zIndex}
|
||||
>
|
||||
{props.children}
|
||||
</PopperWrapper>
|
||||
),
|
||||
document.body,
|
||||
props.portalContainer ? props.portalContainer : document.body,
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -31,7 +31,10 @@ export const DropdownTrigger = styled.div<{ skin: Skin }>`
|
|||
}
|
||||
}
|
||||
`;
|
||||
export const DropdownContent = styled.div<{ skin: Skin }>`
|
||||
export const DropdownContent = styled.div<{
|
||||
skin: Skin;
|
||||
borderRadius?: string;
|
||||
}>`
|
||||
&&& * {
|
||||
font-size: ${(props) => props.theme.fontSizes[3]}px;
|
||||
}
|
||||
|
|
@ -40,6 +43,7 @@ export const DropdownContent = styled.div<{ skin: Skin }>`
|
|||
background: ${(props) => props.theme.dropdown[props.skin].background};
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border-radius: ${(props) => `min(0.375rem, ${props.borderRadius || "0"})`};
|
||||
`;
|
||||
|
||||
export const DropdownContentSection = styled.div<{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { ReactNode } from "react";
|
||||
import { withTheme } from "styled-components";
|
||||
import { createGlobalStyle, withTheme } from "styled-components";
|
||||
import {
|
||||
Popover,
|
||||
IconName,
|
||||
|
|
@ -49,9 +49,24 @@ export type CustomizedDropdownProps = {
|
|||
openOnHover?: boolean;
|
||||
usePortal?: boolean;
|
||||
skin?: Skin;
|
||||
borderRadius?: string;
|
||||
customizedDropdownId?: string;
|
||||
modifiers?: IPopoverSharedProps["modifiers"];
|
||||
};
|
||||
|
||||
const PopoverStyles = createGlobalStyle<{
|
||||
id?: string;
|
||||
borderRadius?: string;
|
||||
}>`
|
||||
${({ borderRadius, id }) => `
|
||||
.${id}.${Classes.POPOVER} {
|
||||
border-radius: min(${borderRadius}, 0.375rem);
|
||||
box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export const getIcon = (icon?: string | MaybeElement, intent?: Intent) => {
|
||||
if (icon && typeof icon === "string") {
|
||||
if (MenuIcons[icon]) {
|
||||
|
|
@ -133,29 +148,38 @@ export function CustomizedDropdown(
|
|||
</DropdownContentSection>
|
||||
));
|
||||
return (
|
||||
<Popover
|
||||
enforceFocus={false}
|
||||
interactionKind={
|
||||
props.openOnHover
|
||||
? PopoverInteractionKind.HOVER
|
||||
: PopoverInteractionKind.CLICK
|
||||
}
|
||||
minimal
|
||||
modifiers={props.modifiers}
|
||||
onClose={() => {
|
||||
if (props.onCloseDropDown) {
|
||||
props.onCloseDropDown();
|
||||
<>
|
||||
<Popover
|
||||
enforceFocus={false}
|
||||
interactionKind={
|
||||
props.openOnHover
|
||||
? PopoverInteractionKind.HOVER
|
||||
: PopoverInteractionKind.CLICK
|
||||
}
|
||||
}}
|
||||
position={
|
||||
getDirectionBased.POPPER_POSITION(
|
||||
props.openDirection,
|
||||
) as PopoverPosition
|
||||
}
|
||||
>
|
||||
<DropdownTrigger skin={skin}>{trigger}</DropdownTrigger>
|
||||
<DropdownContent skin={skin}>{content}</DropdownContent>
|
||||
</Popover>
|
||||
minimal
|
||||
modifiers={props.modifiers}
|
||||
onClose={() => {
|
||||
if (props.onCloseDropDown) {
|
||||
props.onCloseDropDown();
|
||||
}
|
||||
}}
|
||||
popoverClassName={props.customizedDropdownId}
|
||||
position={
|
||||
getDirectionBased.POPPER_POSITION(
|
||||
props.openDirection,
|
||||
) as PopoverPosition
|
||||
}
|
||||
>
|
||||
<DropdownTrigger skin={skin}>{trigger}</DropdownTrigger>
|
||||
<DropdownContent borderRadius={props.borderRadius} skin={skin}>
|
||||
{content}
|
||||
</DropdownContent>
|
||||
</Popover>
|
||||
<PopoverStyles
|
||||
borderRadius={props.borderRadius}
|
||||
id={props.customizedDropdownId}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
--wds-color-icon: #858282;
|
||||
--wds-color-icon-disabled: #A9A7A7;
|
||||
--wds-color-hover: #4B4848;
|
||||
--wds-color-icon-hover: #4B4848;
|
||||
|
||||
--wds-color-text: #090707;
|
||||
--wds-color-text-danger: #D91921;
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@ export interface ButtonStyleProps {
|
|||
buttonVariant?: ButtonVariant;
|
||||
dimension?: number;
|
||||
hasOnClickAction?: boolean;
|
||||
compactMode?: string;
|
||||
}
|
||||
|
||||
export const StyledButton = styled((props) => (
|
||||
|
|
@ -119,16 +120,25 @@ export const StyledButton = styled((props) => (
|
|||
"boxShadow",
|
||||
"dimension",
|
||||
"hasOnClickAction",
|
||||
"compactMode",
|
||||
])}
|
||||
/>
|
||||
))<ThemeProp & ButtonStyleProps>`
|
||||
background-image: none !important;
|
||||
height: ${({ dimension }) => (dimension ? `${dimension}px` : "auto")};
|
||||
width: ${({ dimension }) => (dimension ? `${dimension}px` : "auto")};
|
||||
min-height: 32px !important;
|
||||
min-width: 32px !important;
|
||||
min-height: ${({ compactMode }) =>
|
||||
compactMode === "SHORT" ? "24px" : "30px"};
|
||||
min-width: ${({ compactMode }) =>
|
||||
compactMode === "SHORT" ? "24px" : "30px"};
|
||||
font-size: ${({ compactMode }) =>
|
||||
compactMode === "SHORT" ? "12px" : "14px"};
|
||||
line-height: ${({ compactMode }) =>
|
||||
compactMode === "SHORT" ? "24px" : "28px"};
|
||||
|
||||
${({ buttonColor, buttonVariant, hasOnClickAction, theme }) => `
|
||||
|
||||
|
||||
${({ buttonColor, buttonVariant, compactMode, hasOnClickAction, theme }) => `
|
||||
&:enabled {
|
||||
background: ${
|
||||
getCustomBackgroundColor(buttonVariant, buttonColor) !== "none"
|
||||
|
|
@ -177,7 +187,7 @@ export const StyledButton = styled((props) => (
|
|||
: "transparent"
|
||||
} !important;
|
||||
color: var(--wds-color-text-disabled) !important;
|
||||
|
||||
|
||||
span {
|
||||
color: var(--wds-color-text-disabled) !important;
|
||||
}
|
||||
|
|
@ -213,8 +223,10 @@ export const StyledButton = styled((props) => (
|
|||
& > span > svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
min-height:
|
||||
${compactMode === "SHORT" ? "14px" : "16px"};
|
||||
min-width:
|
||||
${compactMode === "SHORT" ? "14px" : "16px"};
|
||||
}
|
||||
`}
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ const ControlBtn = styled.a<{
|
|||
background: var(--wds-color-bg-hover);
|
||||
|
||||
svg path {
|
||||
fill: var(--wds-color-hover);
|
||||
fill: var(--wds-color-icon-hover);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -195,6 +195,10 @@ const paginatorCss = css<{
|
|||
.rc-pagination-disabled:hover,
|
||||
.rc-pagination-disabled:focus {
|
||||
cursor: not-allowed;
|
||||
|
||||
& > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.rc-pagination-disabled .rc-pagination-item-link,
|
||||
.rc-pagination-disabled:hover .rc-pagination-item-link,
|
||||
|
|
@ -322,7 +326,6 @@ const paginatorCss = css<{
|
|||
box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
|
||||
color: var(--wds-color-text) !important;
|
||||
border-color: transparent !important;
|
||||
|
||||
}
|
||||
|
||||
.rc-pagination-prev .rc-pagination-item-link, .rc-pagination-next .rc-pagination-item-link {
|
||||
|
|
@ -340,6 +343,10 @@ const paginatorCss = css<{
|
|||
}
|
||||
}
|
||||
|
||||
.rc-pagination-disabled .rc-pagination-item-link {
|
||||
color: var(--wds-color-text-disabled) !important;
|
||||
}
|
||||
|
||||
.rc-pagination-item:hover {
|
||||
background-color: var(--wds-color-bg-hover) !important;
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ export const TableIconWrapper = styled.div<{
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--wds-color-bg);
|
||||
opacity: ${(props) => (props.disabled ? 0.6 : 1)};
|
||||
cursor: ${(props) => !props.disabled && "pointer"};
|
||||
color: ${(props) => (props.selected ? Colors.CODE_GRAY : Colors.GRAY)};
|
||||
|
|
@ -34,7 +35,7 @@ export const TableIconWrapper = styled.div<{
|
|||
margin-left: 5px;
|
||||
padding: 0 5px;
|
||||
&:hover {
|
||||
background: ${Colors.ATHENS_GRAY};
|
||||
background: var(--wds-color-bg-hover);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import styled from "styled-components";
|
||||
import { Icon, InputGroup } from "@blueprintjs/core";
|
||||
import { InputGroup } from "@blueprintjs/core";
|
||||
import { debounce } from "lodash";
|
||||
import { AnyStyledComponent } from "styled-components";
|
||||
|
||||
import CustomizedDropdown from "pages/common/CustomizedDropdown";
|
||||
import { Directions } from "utils/helpers";
|
||||
import { Colors } from "constants/Colors";
|
||||
import { ControlIcons } from "icons/ControlIcons";
|
||||
import { Skin } from "constants/DefaultTheme";
|
||||
import AutoToolTipComponent from "./cellComponents/AutoToolTipComponent";
|
||||
import {
|
||||
|
|
@ -24,21 +22,13 @@ import DatePickerComponent from "widgets/DatePickerWidget2/component";
|
|||
import { TimePrecision } from "widgets/DatePickerWidget2/constants";
|
||||
import { ColumnTypes, ReadOnlyColumnTypes } from "../constants";
|
||||
|
||||
const StyledRemoveIcon = styled(
|
||||
ControlIcons.CLOSE_CIRCLE_CONTROL as AnyStyledComponent,
|
||||
)`
|
||||
padding: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&.hide-icon {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
import CloseIcon from "remixicon-react/CloseCircleFillIcon";
|
||||
import ArrowDownIcon from "remixicon-react/ArrowDownSLineIcon";
|
||||
|
||||
const LabelWrapper = styled.div`
|
||||
width: 95px;
|
||||
margin-left: 10px;
|
||||
color: ${Colors.BLUE_BAYOUX};
|
||||
color: var(--wds-color-text-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
`;
|
||||
|
|
@ -55,18 +45,29 @@ const DropdownWrapper = styled.div<{ width: number }>`
|
|||
margin-left: 10px;
|
||||
`;
|
||||
|
||||
const StyledInputGroup = styled(InputGroup)`
|
||||
background: ${Colors.WHITE};
|
||||
border: 1px solid #d3dee3;
|
||||
const StyledInputGroup = styled(InputGroup)<{
|
||||
borderRadius?: string;
|
||||
}>`
|
||||
background: var(--wds-color-bg);
|
||||
border: 1px solid var(--wds-color-border);
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
color: ${Colors.OXFORD_BLUE};
|
||||
border-radius: ${(props) => props.borderRadius || "0"};
|
||||
color: var(--wds-color-text);
|
||||
height: 32px;
|
||||
width: 150px;
|
||||
width: 120px;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
input {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--wds-color-border-hover);
|
||||
}
|
||||
`;
|
||||
|
||||
const DatePickerWrapper = styled.div`
|
||||
|
|
@ -74,20 +75,26 @@ const DatePickerWrapper = styled.div`
|
|||
width: 150px;
|
||||
`;
|
||||
|
||||
const DropdownTrigger = styled.div`
|
||||
const DropdownTrigger = styled.div<{
|
||||
borderRadius?: string;
|
||||
}>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background: ${Colors.WHITE};
|
||||
border: 1px solid #d3dee3;
|
||||
background: var(--wds-color-bg);
|
||||
border: 1px solid var(--wds-color-border);
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
border-radius: ${(props) => props.borderRadius || "0"};
|
||||
font-size: 14px;
|
||||
padding: 5px 12px 7px;
|
||||
color: ${Colors.OXFORD_BLUE};
|
||||
color: var(--wds-color-text);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--wds-color-border-hover);
|
||||
}
|
||||
&&& span {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -209,6 +216,7 @@ function RenderOptions(props: {
|
|||
value?: string | Condition;
|
||||
showType?: boolean;
|
||||
className?: string;
|
||||
borderRadius?: string;
|
||||
}) {
|
||||
const [selectedValue, selectValue] = useState(props.placeholder);
|
||||
const configs = {
|
||||
|
|
@ -239,15 +247,20 @@ function RenderOptions(props: {
|
|||
openDirection: Directions.DOWN,
|
||||
trigger: {
|
||||
content: (
|
||||
<DropdownTrigger className={props.className}>
|
||||
<AutoToolTipComponentWrapper title={selectedValue}>
|
||||
<DropdownTrigger
|
||||
borderRadius={props.borderRadius}
|
||||
className={props.className}
|
||||
>
|
||||
<AutoToolTipComponentWrapper disablePadding title={selectedValue}>
|
||||
{selectedValue}
|
||||
</AutoToolTipComponentWrapper>
|
||||
<Icon color={Colors.SLATE_GRAY} icon="caret-down" iconSize={16} />
|
||||
<ArrowDownIcon className="w-5 h-5" color="var(--wds-color-icon)" />
|
||||
</DropdownTrigger>
|
||||
),
|
||||
},
|
||||
skin: Skin.LIGHT,
|
||||
borderRadius: props.borderRadius,
|
||||
customizedDropdownId: "cascade-dropdown",
|
||||
};
|
||||
useEffect(() => {
|
||||
if (props.value && props.columns) {
|
||||
|
|
@ -270,6 +283,7 @@ function RenderInput(props: {
|
|||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
className?: string;
|
||||
borderRadius?: string;
|
||||
}) {
|
||||
const debouncedOnChange = useCallback(debounce(props.onChange, 400), []);
|
||||
const [value, setValue] = useState(props.value);
|
||||
|
|
@ -283,6 +297,7 @@ function RenderInput(props: {
|
|||
}, [props.value]);
|
||||
return (
|
||||
<StyledInputGroup
|
||||
borderRadius={props.borderRadius}
|
||||
className={props.className}
|
||||
defaultValue={value}
|
||||
onChange={onChange}
|
||||
|
|
@ -547,18 +562,17 @@ function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
|
|||
}, [props]);
|
||||
return (
|
||||
<FieldWrapper className="t--table-filter">
|
||||
<StyledRemoveIcon
|
||||
className={`t--table-filter-remove-btn ${
|
||||
hasAnyFilters ? "" : "hide-icon"
|
||||
<CloseIcon
|
||||
className={`t--table-filter-remove-btn w-6 h-6 cursor-pointer ${
|
||||
hasAnyFilters ? "" : "hidden"
|
||||
}`}
|
||||
color={Colors.GRAY}
|
||||
height={16}
|
||||
color="var(--wds-color-icon)"
|
||||
onClick={handleRemoveFilter}
|
||||
width={16}
|
||||
/>
|
||||
{index === 1 ? (
|
||||
<DropdownWrapper width={95}>
|
||||
<RenderOptions
|
||||
borderRadius={props.borderRadius}
|
||||
className="t--table-filter-operators-dropdown"
|
||||
columns={operatorOptions}
|
||||
placeholder="or"
|
||||
|
|
@ -571,8 +585,9 @@ function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
|
|||
{index === 0 ? "Where" : OperatorTypes[props.operator]}
|
||||
</LabelWrapper>
|
||||
)}
|
||||
<DropdownWrapper width={150}>
|
||||
<DropdownWrapper width={120}>
|
||||
<RenderOptions
|
||||
borderRadius={props.borderRadius}
|
||||
className="t--table-filter-columns-dropdown"
|
||||
columns={props.columns}
|
||||
placeholder="Attribute"
|
||||
|
|
@ -584,6 +599,7 @@ function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
|
|||
{showConditions ? (
|
||||
<DropdownWrapper width={200}>
|
||||
<RenderOptions
|
||||
borderRadius={props.borderRadius}
|
||||
className="t--table-filter-conditions-dropdown"
|
||||
columns={conditions}
|
||||
placeholder=""
|
||||
|
|
@ -594,6 +610,7 @@ function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
|
|||
) : null}
|
||||
{showInput ? (
|
||||
<RenderInput
|
||||
borderRadius={props.borderRadius}
|
||||
className="t--table-filter-value-input"
|
||||
onChange={onValueChange}
|
||||
value={value}
|
||||
|
|
@ -617,7 +634,6 @@ function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
|
|||
shortcuts={false}
|
||||
timePrecision={TimePrecision.MINUTE}
|
||||
widgetId=""
|
||||
withoutPortal
|
||||
/>
|
||||
</DatePickerWrapper>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ import { Scrollbars } from "react-custom-scrollbars";
|
|||
import { renderEmptyRows } from "./cellComponents/EmptyCell";
|
||||
import { renderHeaderCheckBoxCell } from "./cellComponents/SelectionCheckboxCell";
|
||||
import { HeaderCell } from "./cellComponents/HeaderCell";
|
||||
import { EditableCell } from "../constants";
|
||||
import { EditableCell, TableVariant } from "../constants";
|
||||
import { TableBody } from "./TableBody";
|
||||
|
||||
interface TableProps {
|
||||
|
|
@ -81,8 +81,11 @@ interface TableProps {
|
|||
accentColor: string;
|
||||
borderRadius: string;
|
||||
boxShadow?: string;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
onBulkEditDiscard: () => void;
|
||||
onBulkEditSave: () => void;
|
||||
variant?: TableVariant;
|
||||
primaryColumnId?: string;
|
||||
}
|
||||
|
||||
|
|
@ -236,13 +239,17 @@ export function Table(props: TableProps) {
|
|||
<TableWrapper
|
||||
accentColor={props.accentColor}
|
||||
backgroundColor={Colors.ATHENS_GRAY_DARKER}
|
||||
borderColor={props.borderColor}
|
||||
borderRadius={props.borderRadius}
|
||||
borderWidth={props.borderWidth}
|
||||
boxShadow={props.boxShadow}
|
||||
height={props.height}
|
||||
id={`table${props.widgetId}`}
|
||||
isHeaderVisible={isHeaderVisible}
|
||||
isResizingColumn={isResizingColumn.current}
|
||||
tableSizes={tableSizes}
|
||||
triggerRowSelection={props.triggerRowSelection}
|
||||
variant={props.variant}
|
||||
width={props.width}
|
||||
>
|
||||
{isHeaderVisible && (
|
||||
|
|
@ -263,6 +270,7 @@ export function Table(props: TableProps) {
|
|||
backgroundColor={Colors.WHITE}
|
||||
serverSidePaginationEnabled={props.serverSidePaginationEnabled}
|
||||
tableSizes={tableSizes}
|
||||
variant={props.variant}
|
||||
width={props.width}
|
||||
>
|
||||
<TableHeader
|
||||
|
|
|
|||
|
|
@ -12,17 +12,21 @@ interface TableActionProps {
|
|||
icon: string;
|
||||
title: string;
|
||||
titleColor?: string;
|
||||
borderRadius?: string;
|
||||
}
|
||||
|
||||
export const TableIconWrapper = styled.div<{
|
||||
selected?: boolean;
|
||||
disabled?: boolean;
|
||||
titleColor?: string;
|
||||
borderRadius?: string;
|
||||
}>`
|
||||
height: 38px;
|
||||
height: calc(100% - 12px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--wds-color-bg);
|
||||
border-radius: ${(props) => props.borderRadius || "0"};
|
||||
opacity: ${(props) => (props.disabled ? 0.6 : 1)};
|
||||
cursor: ${(props) => !props.disabled && "pointer"};
|
||||
color: ${(props) => (props.selected ? Colors.CODE_GRAY : Colors.GRAY)};
|
||||
|
|
@ -32,10 +36,18 @@ export const TableIconWrapper = styled.div<{
|
|||
color: ${(props) => props.titleColor || Colors.GRAY};
|
||||
}
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
padding: 0 5px;
|
||||
margin-left: 8px;
|
||||
padding: 0 6px;
|
||||
&:hover {
|
||||
background: ${Colors.ATHENS_GRAY};
|
||||
background: var(--wds-color-bg-hover);
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -59,6 +71,7 @@ function TableAction(props: TableActionProps) {
|
|||
|
||||
return (
|
||||
<TableIconWrapper
|
||||
borderRadius={props.borderRadius}
|
||||
className={props.className}
|
||||
onClick={handleIconClick}
|
||||
selected={props.selected}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { Colors } from "constants/Colors";
|
|||
import { ReactTableColumnProps } from "./Constants";
|
||||
import { TableIconWrapper } from "./TableStyledWrappers";
|
||||
import TableAction from "./TableAction";
|
||||
import styled from "styled-components";
|
||||
import styled, { createGlobalStyle } from "styled-components";
|
||||
import { transformTableDataIntoCsv } from "./CommonUtilities";
|
||||
import zipcelx from "zipcelx";
|
||||
import { ReactComponent as DownloadIcon } from "assets/icons/control/download-data-icon.svg";
|
||||
|
|
@ -33,10 +33,10 @@ const OptionWrapper = styled.div`
|
|||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px 12px;
|
||||
color: ${Colors.CHARCOAL};
|
||||
color: var(--wds-color-text);
|
||||
min-width: 200px;
|
||||
cursor: pointer;
|
||||
background: ${Colors.WHITE};
|
||||
background: var(--wds-color-bg);
|
||||
border-left: none;
|
||||
border-radius: none;
|
||||
.option-title {
|
||||
|
|
@ -45,15 +45,28 @@ const OptionWrapper = styled.div`
|
|||
line-height: 20px;
|
||||
}
|
||||
&:hover {
|
||||
background: ${Colors.SEA_SHELL};
|
||||
color: ${Colors.CODE_GRAY};
|
||||
background: var(--wds-color-bg-hover);
|
||||
}
|
||||
`;
|
||||
|
||||
const PopoverStyles = createGlobalStyle<{
|
||||
id?: string;
|
||||
borderRadius?: string;
|
||||
}>`
|
||||
${({ borderRadius, id }) => `
|
||||
.${id}.${Classes.POPOVER} {
|
||||
border-radius: min(${borderRadius}, 0.375rem);
|
||||
box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
interface TableDataDownloadProps {
|
||||
data: Array<Record<string, unknown>>;
|
||||
columns: ReactTableColumnProps[];
|
||||
widgetName: string;
|
||||
delimiter: string;
|
||||
borderRadius?: string;
|
||||
}
|
||||
|
||||
type FileDownloadType = "CSV" | "EXCEL";
|
||||
|
|
@ -192,37 +205,45 @@ function TableDataDownload(props: TableDataDownloadProps) {
|
|||
);
|
||||
}
|
||||
return (
|
||||
<Popover
|
||||
enforceFocus={false}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
isOpen={selected}
|
||||
minimal
|
||||
onClose={handleCloseMenu}
|
||||
position={Position.BOTTOM}
|
||||
>
|
||||
<TableAction
|
||||
className="t--table-download-btn"
|
||||
icon="download"
|
||||
selectMenu={selectMenu}
|
||||
selected={selected}
|
||||
title="Download"
|
||||
<>
|
||||
<Popover
|
||||
enforceFocus={false}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
isOpen={selected}
|
||||
minimal
|
||||
onClose={handleCloseMenu}
|
||||
popoverClassName="table-download-popover"
|
||||
position={Position.BOTTOM}
|
||||
>
|
||||
<TableAction
|
||||
borderRadius={props.borderRadius}
|
||||
className="t--table-download-btn"
|
||||
icon="download"
|
||||
selectMenu={selectMenu}
|
||||
selected={selected}
|
||||
title="Download"
|
||||
/>
|
||||
<DropDownWrapper>
|
||||
{dowloadOptions.map((item: DownloadOptionProps, index: number) => {
|
||||
return (
|
||||
<OptionWrapper
|
||||
className={`${Classes.POPOVER_DISMISS} t--table-download-data-option`}
|
||||
key={index}
|
||||
onClick={() => {
|
||||
downloadFile(item.value);
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</OptionWrapper>
|
||||
);
|
||||
})}
|
||||
</DropDownWrapper>
|
||||
</Popover>
|
||||
<PopoverStyles
|
||||
borderRadius={props.borderRadius}
|
||||
id="table-download-popover"
|
||||
/>
|
||||
<DropDownWrapper>
|
||||
{dowloadOptions.map((item: DownloadOptionProps, index: number) => {
|
||||
return (
|
||||
<OptionWrapper
|
||||
className={`${Classes.POPOVER_DISMISS} t--table-download-data-option`}
|
||||
key={index}
|
||||
onClick={() => {
|
||||
downloadFile(item.value);
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</OptionWrapper>
|
||||
);
|
||||
})}
|
||||
</DropDownWrapper>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import { ReactComponent as DragHandleIcon } from "assets/icons/ads/app-icons/dra
|
|||
const DragBlock = styled.div`
|
||||
height: 40px;
|
||||
width: 83px;
|
||||
background: ${Colors.WHITE_SNOW};
|
||||
background: var(--wds-color-bg-light);
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
color: ${Colors.GREY_11};
|
||||
|
|
@ -33,7 +33,7 @@ const DragBlock = styled.div`
|
|||
cursor: pointer;
|
||||
span {
|
||||
padding-left: 8px;
|
||||
color: ${Colors.GREY_11};
|
||||
color: var(--wds-color-text-light);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -86,6 +86,7 @@ class TableFilterPane extends Component<Props> {
|
|||
|
||||
return (
|
||||
<Popper
|
||||
borderRadius={this.props.borderRadius}
|
||||
boundaryParent={boundaryParent || "viewport"}
|
||||
disablePopperEvents={get(this.props, "metaProps.isMoved", false)}
|
||||
isDraggable
|
||||
|
|
@ -93,6 +94,7 @@ class TableFilterPane extends Component<Props> {
|
|||
onPositionChange={this.handlePositionUpdate}
|
||||
parentElement={boundaryParent}
|
||||
placement="top"
|
||||
portalContainer={document.getElementById("art-board") || undefined}
|
||||
position={get(this.props, "metaProps.position") as PositionPropsInt}
|
||||
renderDragBlock={
|
||||
<DragBlock>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useCallback } from "react";
|
||||
import styled, { AnyStyledComponent } from "styled-components";
|
||||
import styled from "styled-components";
|
||||
import { Classes } from "@blueprintjs/core";
|
||||
import { Colors } from "constants/Colors";
|
||||
import {
|
||||
|
|
@ -9,36 +9,27 @@ import {
|
|||
OperatorTypes,
|
||||
} from "./Constants";
|
||||
import { DropdownOption } from "./TableFilters";
|
||||
import Button from "components/editorComponents/Button";
|
||||
import CascadeFields from "./CascadeFields";
|
||||
import {
|
||||
createMessage,
|
||||
TABLE_FILTER_COLUMN_TYPE_CALLOUT,
|
||||
} from "@appsmith/constants/messages";
|
||||
import { ControlIcons } from "icons/ControlIcons";
|
||||
import { Icon, IconSize } from "design-system";
|
||||
import Button from "pages/AppViewer/AppViewerButton";
|
||||
import { ButtonVariantTypes } from "components/constants";
|
||||
|
||||
import AddIcon from "remixicon-react/AddLineIcon";
|
||||
import { cloneDeep } from "lodash";
|
||||
|
||||
const StyledPlusCircleIcon = styled(
|
||||
ControlIcons.ADD_CIRCLE_CONTROL as AnyStyledComponent,
|
||||
)`
|
||||
padding: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
circle {
|
||||
fill: none !important;
|
||||
stroke: ${Colors.GREEN};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const TableFilterOuterWrapper = styled.div`
|
||||
const TableFilterOuterWrapper = styled.div<{
|
||||
borderRadius?: string;
|
||||
}>`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
background: ${Colors.WHITE};
|
||||
box-shadow: 0px 12px 28px -8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15);
|
||||
border-radius: ${(props) => props.borderRadius || "0"};
|
||||
`;
|
||||
|
||||
const TableFilerWrapper = styled.div`
|
||||
|
|
@ -75,10 +66,10 @@ const ButtonActionsWrapper = styled.div`
|
|||
const ColumnTypeBindingMessage = styled.div`
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: ${Colors.WHITE_SNOW};
|
||||
background: var(--wds-color-bg-light);
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
color: ${Colors.GREY_11};
|
||||
color: var(--wds-color-text-light);
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 500;
|
||||
margin-left: 83px;
|
||||
|
|
@ -180,6 +171,7 @@ function TableFilterPaneContent(props: TableFilterProps) {
|
|||
);
|
||||
return (
|
||||
<TableFilterOuterWrapper
|
||||
borderRadius={props.borderRadius}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
|
|
@ -254,25 +246,29 @@ function TableFilterPaneContent(props: TableFilterProps) {
|
|||
{hasAnyFilters ? (
|
||||
<ButtonWrapper>
|
||||
<Button
|
||||
borderRadius={props.borderRadius}
|
||||
buttonColor={props.accentColor}
|
||||
buttonVariant={ButtonVariantTypes.TERTIARY}
|
||||
className="t--add-filter-btn"
|
||||
icon={<StyledPlusCircleIcon height={16} width={16} />}
|
||||
intent="primary"
|
||||
icon={<AddIcon className="w-5 h-5" color={props.accentColor} />}
|
||||
onClick={addFilter}
|
||||
size="small"
|
||||
text="Add Filter"
|
||||
/>
|
||||
<ButtonActionsWrapper>
|
||||
<Button
|
||||
borderRadius={props.borderRadius}
|
||||
buttonColor={props.accentColor}
|
||||
buttonVariant={ButtonVariantTypes.SECONDARY}
|
||||
className="t--clear-all-filter-btn"
|
||||
intent="primary"
|
||||
onClick={clearFilters}
|
||||
outline
|
||||
text="CLEAR ALL"
|
||||
/>
|
||||
<Button
|
||||
borderRadius={props.borderRadius}
|
||||
buttonColor={props.accentColor}
|
||||
buttonVariant={ButtonVariantTypes.PRIMARY}
|
||||
className="t--apply-filter-btn"
|
||||
filled
|
||||
intent="primary"
|
||||
onClick={applyFilter}
|
||||
text="APPLY"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ function TableFilters(props: TableFilterProps) {
|
|||
return (
|
||||
<>
|
||||
<TableAction
|
||||
borderRadius={props.borderRadius}
|
||||
className={className}
|
||||
icon="filter"
|
||||
selectMenu={toggleFilterPane}
|
||||
|
|
|
|||
|
|
@ -17,15 +17,16 @@ import {
|
|||
import TableDataDownload from "./TableDataDownload";
|
||||
import { Colors } from "constants/Colors";
|
||||
import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
|
||||
import { lightenColor } from "widgets/WidgetUtils";
|
||||
|
||||
const PageNumberInputWrapper = styled(NumericInput)<{
|
||||
borderRadius: string;
|
||||
accentColor?: string;
|
||||
}>`
|
||||
&&& input {
|
||||
box-shadow: none;
|
||||
border: 1px solid ${Colors.ALTO2};
|
||||
background: linear-gradient(0deg, ${Colors.WHITE}, ${Colors.WHITE}),
|
||||
${Colors.POLAR};
|
||||
border: 1px solid var(--wds-color-border);
|
||||
background: var(--wds-color-bg);
|
||||
box-sizing: border-box;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -34,10 +35,26 @@ const PageNumberInputWrapper = styled(NumericInput)<{
|
|||
text-align: center;
|
||||
font-size: 12px;
|
||||
border-radius: ${({ borderRadius }) => borderRadius};
|
||||
|
||||
&:disabled {
|
||||
border-color: var(--wds-color-border-disabled);
|
||||
background: var(--wds-color-bg-disabled);
|
||||
color: var(--wds-color-text-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
&&&.bp3-control-group > :only-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
& input:hover:not(:disabled) {
|
||||
border-color: var(--wds-color-border-hover) !important;
|
||||
}
|
||||
|
||||
& input:focus {
|
||||
box-shadow: 0 0 0 2px ${({ accentColor }) => lightenColor(accentColor)} !important;
|
||||
border-color: ${({ accentColor }) => accentColor} !important;
|
||||
}
|
||||
margin: 0 8px;
|
||||
`;
|
||||
|
||||
|
|
@ -46,12 +63,65 @@ const SearchComponentWrapper = styled.div<{
|
|||
boxShadow?: string;
|
||||
accentColor: string;
|
||||
}>`
|
||||
margin: 3px 10px;
|
||||
margin: 6px 8px;
|
||||
padding: 0 8px;
|
||||
flex: 0 0 200px;
|
||||
border: 1px solid var(--wds-color-border);
|
||||
border-radius: ${({ borderRadius }) => borderRadius} !important;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--wds-color-border-hover);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: ${({ accentColor }) => accentColor} !important;
|
||||
box-shadow: 0 0 0 2px ${({ accentColor }) => lightenColor(accentColor)} !important;
|
||||
}
|
||||
|
||||
& .${Classes.INPUT} {
|
||||
border-radius: ${({ borderRadius }) => borderRadius} !important;
|
||||
height: 100%;
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
& > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// search component
|
||||
& > div > div {
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
|
||||
path {
|
||||
fill: var(--wds-color-icon) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// cross icon component
|
||||
& > div > div + div {
|
||||
top: 0;
|
||||
right: -4px;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
svg {
|
||||
top: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .${Classes.ICON} {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& .${Classes.INPUT}:active, & .${Classes.INPUT}:focus {
|
||||
border-radius: ${({ borderRadius }) => borderRadius};
|
||||
border: 0px solid !important;
|
||||
|
|
@ -66,6 +136,7 @@ function PageNumberInput(props: {
|
|||
updatePageNo: (pageNo: number, event?: EventType) => void;
|
||||
disabled: boolean;
|
||||
borderRadius: string;
|
||||
accentColor?: string;
|
||||
}) {
|
||||
const [pageNumber, setPageNumber] = React.useState(props.pageNo || 0);
|
||||
useEffect(() => {
|
||||
|
|
@ -95,6 +166,7 @@ function PageNumberInput(props: {
|
|||
);
|
||||
return (
|
||||
<PageNumberInputWrapper
|
||||
accentColor={props.accentColor}
|
||||
borderRadius={props.borderRadius}
|
||||
buttonPosition="none"
|
||||
clampValueOnBlur
|
||||
|
|
@ -178,6 +250,7 @@ function TableHeader(props: TableHeaderProps) {
|
|||
|
||||
{props.isVisibleDownload && (
|
||||
<TableDataDownload
|
||||
borderRadius={props.borderRadius}
|
||||
columns={props.tableColumns}
|
||||
data={props.tableData}
|
||||
delimiter={props.delimiter}
|
||||
|
|
@ -257,7 +330,8 @@ function TableHeader(props: TableHeaderProps) {
|
|||
onClick={() => {
|
||||
const pageNo =
|
||||
props.currentPageIndex > 0 ? props.currentPageIndex - 1 : 0;
|
||||
props.updatePageNo(pageNo + 1, EventType.ON_PREV_PAGE);
|
||||
!(props.currentPageIndex === 0) &&
|
||||
props.updatePageNo(pageNo + 1, EventType.ON_PREV_PAGE);
|
||||
}}
|
||||
>
|
||||
<Icon color={Colors.GRAY} icon="chevron-left" iconSize={16} />
|
||||
|
|
@ -265,6 +339,7 @@ function TableHeader(props: TableHeaderProps) {
|
|||
<TableHeaderContentWrapper>
|
||||
Page{" "}
|
||||
<PageNumberInput
|
||||
accentColor={props.accentColor}
|
||||
borderRadius={props.borderRadius}
|
||||
disabled={props.pageCount === 1}
|
||||
pageCount={props.pageCount}
|
||||
|
|
@ -283,7 +358,8 @@ function TableHeader(props: TableHeaderProps) {
|
|||
props.currentPageIndex < props.pageCount - 1
|
||||
? props.currentPageIndex + 1
|
||||
: 0;
|
||||
props.updatePageNo(pageNo + 1, EventType.ON_NEXT_PAGE);
|
||||
!(props.currentPageIndex === props.pageCount - 1) &&
|
||||
props.updatePageNo(pageNo + 1, EventType.ON_NEXT_PAGE);
|
||||
}}
|
||||
>
|
||||
<Icon color={Colors.GRAY} icon="chevron-right" iconSize={16} />
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import { hideScrollbar, invisible } from "constants/DefaultTheme";
|
|||
import { lightenColor, darkenColor } from "widgets/WidgetUtils";
|
||||
import { FontStyleTypes } from "constants/WidgetConstants";
|
||||
import { Classes } from "@blueprintjs/core";
|
||||
import { TableVariant, TableVariantTypes } from "../constants";
|
||||
|
||||
const OFFSET_WITHOUT_HEADER = 40;
|
||||
const OFFSET_WITH_HEADER = 80;
|
||||
|
|
@ -34,12 +35,17 @@ export const TableWrapper = styled.div<{
|
|||
isHeaderVisible?: boolean;
|
||||
borderRadius: string;
|
||||
boxShadow?: string;
|
||||
borderColor?: string;
|
||||
borderWidth?: number;
|
||||
isResizingColumn?: boolean;
|
||||
variant?: TableVariant;
|
||||
}>`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border: ${({ boxShadow }) =>
|
||||
boxShadow === "none" ? `1px solid ${Colors.GEYSER_LIGHT}` : `none`};
|
||||
border-style: solid;
|
||||
border-width: ${({ borderWidth }) => `${borderWidth}px`};
|
||||
border-color: ${({ borderColor }) => borderColor};
|
||||
border-radius: ${({ borderRadius }) => borderRadius};
|
||||
box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -65,7 +71,6 @@ export const TableWrapper = styled.div<{
|
|||
border-spacing: 0;
|
||||
color: ${Colors.THUNDER};
|
||||
position: relative;
|
||||
background: ${Colors.ATHENS_GRAY_DARKER};
|
||||
display: table;
|
||||
width: 100%;
|
||||
${hideScrollbar};
|
||||
|
|
@ -92,17 +97,31 @@ export const TableWrapper = styled.div<{
|
|||
&.selected-row {
|
||||
background: ${({ accentColor }) =>
|
||||
`${lightenColor(accentColor)}`} !important;
|
||||
|
||||
&:hover {
|
||||
background: ${({ accentColor }) =>
|
||||
`${lightenColor(accentColor, "0.9")}`} !important;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: ${({ accentColor }) =>
|
||||
`${lightenColor(accentColor)}`} !important;
|
||||
background: var(--wds-color-bg-hover) !important;
|
||||
}
|
||||
}
|
||||
.th,
|
||||
.td {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid ${Colors.GEYSER_LIGHT};
|
||||
border-right: 1px solid ${Colors.GEYSER_LIGHT};
|
||||
border-bottom: ${(props) =>
|
||||
props.variant === TableVariantTypes.DEFAULT ||
|
||||
props.variant === undefined ||
|
||||
props.variant === TableVariantTypes.VARIANT3
|
||||
? `1px solid var(--wds-color-border-onaccent)`
|
||||
: `1px solid transparent`};
|
||||
border-right: ${(props) =>
|
||||
props.variant === TableVariantTypes.DEFAULT ||
|
||||
props.variant === undefined ||
|
||||
props.isResizingColumn
|
||||
? `1px solid var(--wds-color-border-onaccent)`
|
||||
: `1px solid transparent`};
|
||||
position: relative;
|
||||
font-size: ${(props) => props.tableSizes.ROW_FONT_SIZE}px;
|
||||
line-height: ${(props) => props.tableSizes.ROW_FONT_SIZE}px;
|
||||
|
|
@ -125,13 +144,23 @@ export const TableWrapper = styled.div<{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.th {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.thead:hover .th {
|
||||
border-right: 1px solid var(--wds-color-border-onaccent);
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: 0 10px 0 0;
|
||||
height: ${(props) =>
|
||||
props.isHeaderVisible ? props.tableSizes.COLUMN_HEADER_HEIGHT : 40}px;
|
||||
line-height: ${(props) =>
|
||||
props.isHeaderVisible ? props.tableSizes.COLUMN_HEADER_HEIGHT : 40}px;
|
||||
background: ${Colors.ATHENS_GRAY_DARKER};
|
||||
background: var(--wds-color-bg);
|
||||
font-weight: bold;
|
||||
}
|
||||
.td {
|
||||
min-height: ${(props) => props.tableSizes.ROW_HEIGHT}px;
|
||||
|
|
@ -154,7 +183,6 @@ export const TableWrapper = styled.div<{
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: ${Colors.OXFORD_BLUE};
|
||||
font-weight: 500;
|
||||
padding-left: 10px;
|
||||
&.sorted {
|
||||
padding-left: 5px;
|
||||
|
|
@ -171,6 +199,8 @@ export const TableWrapper = styled.div<{
|
|||
}
|
||||
}
|
||||
.hidden-header {
|
||||
opacity: 0.6;
|
||||
|
||||
${invisible};
|
||||
}
|
||||
.column-menu {
|
||||
|
|
@ -248,8 +278,8 @@ export const PaginationWrapper = styled.div`
|
|||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
color: ${Colors.GRAY};
|
||||
padding: 8px;
|
||||
color: var(--wds-color-text-light);
|
||||
`;
|
||||
|
||||
export const PaginationItemWrapper = styled.div<{
|
||||
|
|
@ -258,8 +288,13 @@ export const PaginationItemWrapper = styled.div<{
|
|||
borderRadius: string;
|
||||
accentColor: string;
|
||||
}>`
|
||||
background: ${(props) => (props.disabled ? Colors.MERCURY : Colors.WHITE)};
|
||||
border: 1px solid ${Colors.ALTO2};
|
||||
background: ${(props) =>
|
||||
props.disabled ? `var(--wds-color-bg-disabled)` : `var(--wds-color-bg)`};
|
||||
border: 1px solid
|
||||
${(props) =>
|
||||
props.disabled
|
||||
? `var(--wds-color-border-disabled)`
|
||||
: `var(--wds-color-border)`};
|
||||
box-sizing: border-box;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -267,12 +302,29 @@ export const PaginationItemWrapper = styled.div<{
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 4px;
|
||||
pointer-events: ${(props) => props.disabled && "none"};
|
||||
cursor: pointer;
|
||||
cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
|
||||
border-radius: ${({ borderRadius }) => borderRadius};
|
||||
&:hover {
|
||||
border-color: ${({ accentColor }) => accentColor};
|
||||
|
||||
& > * {
|
||||
pointer-events: ${(props) => props.disabled && "none"};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& svg {
|
||||
fill: ${(props) =>
|
||||
props.disabled
|
||||
? `var(--wds-color-icon-disabled)`
|
||||
: `var(--wds-color-icon)`};
|
||||
}
|
||||
${({ disabled }) =>
|
||||
!disabled &&
|
||||
`&:hover {
|
||||
border-color: var(--wds-color-border-hover);
|
||||
background-color: var(--wds-color-bg-hover);
|
||||
}`}
|
||||
`;
|
||||
|
||||
export const MenuColumnWrapper = styled.div<{ selected: boolean }>`
|
||||
|
|
@ -312,6 +364,9 @@ export const ActionWrapper = styled.div<{ disabled: boolean }>`
|
|||
|
||||
export const IconButtonWrapper = styled.div<{ disabled: boolean }>`
|
||||
${(props) => (props.disabled ? "cursor: not-allowed;" : null)}
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
export const TableStyles = css<{
|
||||
|
|
@ -334,6 +389,7 @@ export const CellWrapper = styled.div<{
|
|||
textColor?: string;
|
||||
cellBackground?: string;
|
||||
textSize?: string;
|
||||
disablePadding?: boolean;
|
||||
}>`
|
||||
display: ${(props) => (props.isCellVisible !== false ? "flex" : "none")};
|
||||
align-items: center;
|
||||
|
|
@ -357,11 +413,21 @@ export const CellWrapper = styled.div<{
|
|||
align-items: ${(props) =>
|
||||
props.verticalAlignment && ALIGN_ITEMS[props.verticalAlignment]};
|
||||
background: ${(props) => props.cellBackground};
|
||||
|
||||
&:hover, .selected-row & {
|
||||
background: ${(props) =>
|
||||
props.cellBackground ? darkenColor(props.cellBackground, 5) : ""};
|
||||
}
|
||||
font-size: ${(props) => props.textSize};
|
||||
|
||||
padding: ${(props) =>
|
||||
props.compactMode ? TABLE_SIZES[props.compactMode].VERTICAL_PADDING : 0}px
|
||||
10px;
|
||||
props.disablePadding
|
||||
? 0
|
||||
: `${
|
||||
props.compactMode
|
||||
? `${TABLE_SIZES[props.compactMode].VERTICAL_PADDING}px 10px`
|
||||
: `${0}px 10px`
|
||||
}`};
|
||||
line-height: ${CELL_WRAPPER_LINE_HEIGHT}px;
|
||||
.${Classes.POPOVER_WRAPPER} {
|
||||
width: 100%;
|
||||
|
|
@ -448,7 +514,7 @@ export const CellCheckboxWrapper = styled(CellWrapper)<{
|
|||
background: ${props.accentColor};
|
||||
&:hover {
|
||||
background: ${darkenColor(props.accentColor)};
|
||||
}
|
||||
}
|
||||
`
|
||||
: `
|
||||
border: 1px solid ${Colors.GREY_3};
|
||||
|
|
@ -505,12 +571,15 @@ export const TableHeaderInnerWrapper = styled.div<{
|
|||
width: number;
|
||||
tableSizes: TableSizes;
|
||||
backgroundColor?: Color;
|
||||
variant?: TableVariant;
|
||||
}>`
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: 1px solid ${Colors.GEYSER_LIGHT};
|
||||
border-bottom: ${(props) =>
|
||||
props.variant !== "VARIANT2" &&
|
||||
`1px solid var(--wds-color-border-onaccent)`};
|
||||
`;
|
||||
|
||||
export const CommonFunctionsMenuWrapper = styled.div<{
|
||||
|
|
@ -518,7 +587,17 @@ export const CommonFunctionsMenuWrapper = styled.div<{
|
|||
}>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: ${(props) => props.tableSizes.TABLE_HEADER_HEIGHT}px;
|
||||
height: 100%;
|
||||
|
||||
& .bp3-popover-target,
|
||||
& .bp3-popover-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& .bp3-popover-target {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
export const TableHeaderContentWrapper = styled.div`
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@ interface Props {
|
|||
fontStyle?: string;
|
||||
cellBackground?: string;
|
||||
textSize?: string;
|
||||
disablePadding?: boolean;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
|
|
@ -130,6 +131,7 @@ function AutoToolTipComponent(props: Props) {
|
|||
cellBackground={props.cellBackground}
|
||||
className="cell-wrapper"
|
||||
compactMode={props.compactMode}
|
||||
disablePadding={props.disablePadding}
|
||||
fontStyle={props.fontStyle}
|
||||
horizontalAlignment={props.horizontalAlignment}
|
||||
isCellVisible={props.isCellVisible}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,17 @@ import { BaseButton } from "widgets/ButtonWidget/component";
|
|||
import { ButtonColumnActions } from "widgets/TableWidgetV2/constants";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledButton = styled(BaseButton)`
|
||||
const StyledButton = styled(BaseButton)<{
|
||||
compactMode?: string;
|
||||
}>`
|
||||
min-width: 40px;
|
||||
|
||||
min-height: ${({ compactMode }) =>
|
||||
compactMode === "SHORT" ? "24px" : "30px"};
|
||||
font-size: ${({ compactMode }) =>
|
||||
compactMode === "SHORT" ? "12px" : "14px"};
|
||||
line-height: ${({ compactMode }) =>
|
||||
compactMode === "SHORT" ? "24px" : "28px"};
|
||||
`;
|
||||
|
||||
type ButtonProps = {
|
||||
|
|
@ -14,6 +23,7 @@ type ButtonProps = {
|
|||
isSelected: boolean;
|
||||
isDisabled?: boolean;
|
||||
action: ButtonColumnActions;
|
||||
compactMode?: string;
|
||||
onCommandClick: (dynamicTrigger: string, onComplete: () => void) => void;
|
||||
};
|
||||
|
||||
|
|
@ -40,6 +50,7 @@ export function Button(props: ButtonProps) {
|
|||
boxShadow={props.action.boxShadow}
|
||||
buttonColor={props.action.backgroundColor}
|
||||
buttonVariant={props.action.variant}
|
||||
compactMode={props.compactMode}
|
||||
disabled={props.isDisabled}
|
||||
iconAlign={props.action.iconAlign}
|
||||
iconName={props.action.iconName}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ function IconButton(props: {
|
|||
borderRadius: string;
|
||||
boxShadow: string;
|
||||
disabled: boolean;
|
||||
compactMode?: string;
|
||||
}): JSX.Element {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const onComplete = () => {
|
||||
|
|
@ -55,6 +56,7 @@ function IconButton(props: {
|
|||
boxShadow={props.boxShadow}
|
||||
buttonColor={props.buttonColor}
|
||||
buttonVariant={props.buttonVariant}
|
||||
compactMode={props.compactMode}
|
||||
disabled={props.disabled}
|
||||
icon={props.iconName}
|
||||
loading={loading}
|
||||
|
|
@ -122,6 +124,7 @@ export function IconButtonCell(props: RenderIconButtonProps) {
|
|||
boxShadow={boxShadow}
|
||||
buttonColor={buttonColor}
|
||||
buttonVariant={buttonVariant}
|
||||
compactMode={compactMode}
|
||||
disabled={disabled}
|
||||
iconName={iconName}
|
||||
isSelected={isSelected}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ interface MenuButtonProps extends Omit<RenderMenuButtonProps, "columnActions"> {
|
|||
function MenuButton({
|
||||
borderRadius,
|
||||
boxShadow,
|
||||
compactMode,
|
||||
iconAlign,
|
||||
iconName,
|
||||
isCompact,
|
||||
|
|
@ -45,6 +46,7 @@ function MenuButton({
|
|||
<MenuButtonTableComponent
|
||||
borderRadius={borderRadius}
|
||||
boxShadow={boxShadow}
|
||||
compactMode={compactMode}
|
||||
iconAlign={iconAlign}
|
||||
iconName={iconName}
|
||||
isCompact={isCompact}
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ interface BaseStyleProps {
|
|||
buttonVariant?: ButtonVariant;
|
||||
isCompact?: boolean;
|
||||
textColor?: string;
|
||||
compactMode?: string;
|
||||
}
|
||||
|
||||
const BaseButton = styled(Button)<ThemeProp & BaseStyleProps>`
|
||||
|
|
@ -88,6 +89,12 @@ const BaseButton = styled(Button)<ThemeProp & BaseStyleProps>`
|
|||
border: 1.2px solid #ebebeb;
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
min-height: ${({ compactMode }) =>
|
||||
compactMode === "SHORT" ? "24px" : "30px"};
|
||||
font-size: ${({ compactMode }) =>
|
||||
compactMode === "SHORT" ? "12px" : "14px"};
|
||||
line-height: ${({ compactMode }) =>
|
||||
compactMode === "SHORT" ? "24px" : "28px"};
|
||||
|
||||
${({ buttonColor, buttonVariant, theme }) => `
|
||||
&:enabled {
|
||||
|
|
@ -269,6 +276,7 @@ interface PopoverTargetButtonProps {
|
|||
iconAlign?: Alignment;
|
||||
isDisabled?: boolean;
|
||||
label?: string;
|
||||
compactMode?: string;
|
||||
}
|
||||
|
||||
function PopoverTargetButton(props: PopoverTargetButtonProps) {
|
||||
|
|
@ -277,6 +285,7 @@ function PopoverTargetButton(props: PopoverTargetButtonProps) {
|
|||
boxShadow,
|
||||
buttonColor,
|
||||
buttonVariant,
|
||||
compactMode,
|
||||
iconAlign,
|
||||
iconName,
|
||||
isDisabled,
|
||||
|
|
@ -290,6 +299,7 @@ function PopoverTargetButton(props: PopoverTargetButtonProps) {
|
|||
boxShadow={boxShadow}
|
||||
buttonColor={buttonColor}
|
||||
buttonVariant={buttonVariant}
|
||||
compactMode={compactMode}
|
||||
disabled={isDisabled}
|
||||
fill
|
||||
icon={iconAlign !== Alignment.RIGHT ? iconName : undefined}
|
||||
|
|
@ -314,6 +324,7 @@ export interface MenuButtonComponentProps {
|
|||
iconAlign?: Alignment;
|
||||
onItemClicked: (onClick: string | undefined) => void;
|
||||
rowIndex: number;
|
||||
compactMode?: string;
|
||||
}
|
||||
|
||||
function MenuButtonTableComponent(props: MenuButtonComponentProps) {
|
||||
|
|
@ -321,6 +332,7 @@ function MenuButtonTableComponent(props: MenuButtonComponentProps) {
|
|||
borderRadius = "0px",
|
||||
boxShadow,
|
||||
boxShadowColor,
|
||||
compactMode,
|
||||
iconAlign,
|
||||
iconName,
|
||||
isCompact,
|
||||
|
|
@ -365,6 +377,7 @@ function MenuButtonTableComponent(props: MenuButtonComponentProps) {
|
|||
boxShadowColor={boxShadowColor}
|
||||
buttonColor={menuColor}
|
||||
buttonVariant={menuVariant}
|
||||
compactMode={compactMode}
|
||||
iconAlign={iconAlign}
|
||||
iconName={iconName}
|
||||
isDisabled={isDisabled}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { Row } from "react-table";
|
|||
|
||||
import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
|
||||
import equal from "fast-deep-equal/es6";
|
||||
import { ColumnTypes, EditableCell } from "../constants";
|
||||
import { ColumnTypes, EditableCell, TableVariant } from "../constants";
|
||||
import { useCallback } from "react";
|
||||
|
||||
export interface ColumnMenuOptionProps {
|
||||
|
|
@ -83,12 +83,17 @@ interface ReactTableComponentProps {
|
|||
borderRadius: string;
|
||||
boxShadow?: string;
|
||||
isEditableCellValid?: boolean;
|
||||
borderColor?: string;
|
||||
borderWidth?: number;
|
||||
variant?: TableVariant;
|
||||
primaryColumnId?: string;
|
||||
}
|
||||
|
||||
function ReactTableComponent(props: ReactTableComponentProps) {
|
||||
const {
|
||||
applyFilter,
|
||||
borderColor,
|
||||
borderWidth,
|
||||
columns,
|
||||
columnWidthMap,
|
||||
compactMode,
|
||||
|
|
@ -127,6 +132,7 @@ function ReactTableComponent(props: ReactTableComponentProps) {
|
|||
triggerRowSelection,
|
||||
unSelectAllRow,
|
||||
updatePageNo,
|
||||
variant,
|
||||
widgetId,
|
||||
widgetName,
|
||||
width,
|
||||
|
|
@ -268,7 +274,9 @@ function ReactTableComponent(props: ReactTableComponentProps) {
|
|||
<Table
|
||||
accentColor={props.accentColor}
|
||||
applyFilter={applyFilter}
|
||||
borderColor={borderColor}
|
||||
borderRadius={props.borderRadius}
|
||||
borderWidth={borderWidth}
|
||||
boxShadow={props.boxShadow}
|
||||
columnWidthMap={columnWidthMap}
|
||||
columns={columns}
|
||||
|
|
@ -307,6 +315,7 @@ function ReactTableComponent(props: ReactTableComponentProps) {
|
|||
totalRecordsCount={totalRecordsCount}
|
||||
triggerRowSelection={triggerRowSelection}
|
||||
updatePageNo={updatePageNo}
|
||||
variant={variant}
|
||||
widgetId={widgetId}
|
||||
widgetName={widgetName}
|
||||
width={width}
|
||||
|
|
@ -350,6 +359,8 @@ export default React.memo(ReactTableComponent, (prev, next) => {
|
|||
prev.width === next.width &&
|
||||
prev.borderRadius === next.borderRadius &&
|
||||
prev.boxShadow === next.boxShadow &&
|
||||
prev.borderWidth === next.borderWidth &&
|
||||
prev.borderColor === next.borderColor &&
|
||||
prev.accentColor === next.accentColor &&
|
||||
equal(prev.columnWidthMap, next.columnWidthMap) &&
|
||||
equal(prev.tableData, next.tableData) &&
|
||||
|
|
@ -358,6 +369,7 @@ export default React.memo(ReactTableComponent, (prev, next) => {
|
|||
JSON.stringify(prev.columns) === JSON.stringify(next.columns) &&
|
||||
equal(prev.editableCell, next.editableCell) &&
|
||||
prev.isEditableCellValid === next.isEditableCellValid &&
|
||||
prev.variant === next.variant &&
|
||||
prev.primaryColumnId === next.primaryColumnId
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -80,9 +80,18 @@ export interface TableWidgetProps extends WidgetProps, WithMeta, TableStyles {
|
|||
inlineEditingSaveOption?: InlineEditingSaveOptions;
|
||||
showInlineEditingOptionDropdown?: boolean;
|
||||
isEditableCellValid: boolean;
|
||||
variant?: TableVariant;
|
||||
selectColumnFilterText?: Record<string, string>;
|
||||
}
|
||||
|
||||
export enum TableVariantTypes {
|
||||
DEFAULT = "DEFAULT",
|
||||
VARIANT2 = "VARIANT2",
|
||||
VARIANT3 = "VARIANT3",
|
||||
}
|
||||
|
||||
export type TableVariant = keyof typeof TableVariantTypes;
|
||||
|
||||
export const ORIGINAL_INDEX_KEY = "__originalIndex__";
|
||||
|
||||
export const PRIMARY_COLUMN_KEY_VALUE = "__primaryKey__";
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@ export const CONFIG = {
|
|||
totalRecordsCount: 0,
|
||||
defaultPageSize: 0,
|
||||
dynamicPropertyPathList: [],
|
||||
borderColor: Colors.GREY_5,
|
||||
borderWidth: "1",
|
||||
dynamicBindingPathList: [
|
||||
{
|
||||
key: "primaryColumns.step.computedValue",
|
||||
|
|
|
|||
|
|
@ -828,7 +828,9 @@ class TableWidgetV2 extends BaseWidget<TableWidgetProps, WidgetState> {
|
|||
<ReactTableComponent
|
||||
accentColor={this.props.accentColor}
|
||||
applyFilter={this.updateFilters}
|
||||
borderColor={this.props.borderColor}
|
||||
borderRadius={this.props.borderRadius}
|
||||
borderWidth={this.props.borderWidth}
|
||||
boxShadow={this.props.boxShadow}
|
||||
columnWidthMap={this.props.columnWidthMap}
|
||||
columns={tableColumns}
|
||||
|
|
@ -875,6 +877,7 @@ class TableWidgetV2 extends BaseWidget<TableWidgetProps, WidgetState> {
|
|||
triggerRowSelection={this.props.triggerRowSelection}
|
||||
unSelectAllRow={this.unSelectAllRow}
|
||||
updatePageNo={this.updatePageNumber}
|
||||
variant={this.props.variant}
|
||||
widgetId={this.props.widgetId}
|
||||
widgetName={this.props.widgetName}
|
||||
width={componentWidth}
|
||||
|
|
|
|||
|
|
@ -191,6 +191,29 @@ export default [
|
|||
{
|
||||
sectionName: "Border and Shadow",
|
||||
children: [
|
||||
{
|
||||
propertyName: "variant",
|
||||
helpText: "Selects the variant",
|
||||
label: "Cell borders",
|
||||
controlType: "DROP_DOWN",
|
||||
defaultValue: "DEFAULT",
|
||||
isBindProperty: true,
|
||||
isTriggerProperty: false,
|
||||
options: [
|
||||
{
|
||||
label: "Default",
|
||||
value: "DEFAULT",
|
||||
},
|
||||
{
|
||||
label: "No borders",
|
||||
value: "VARIANT2",
|
||||
},
|
||||
{
|
||||
label: "Horizonal borders only",
|
||||
value: "VARIANT3",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
propertyName: "borderRadius",
|
||||
label: "Border Radius",
|
||||
|
|
@ -212,6 +235,26 @@ export default [
|
|||
isTriggerProperty: false,
|
||||
validation: { type: ValidationTypes.TEXT },
|
||||
},
|
||||
{
|
||||
helpText: "Use a html color name, HEX, RGB or RGBA value",
|
||||
placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)",
|
||||
propertyName: "borderColor",
|
||||
label: "Border Color",
|
||||
controlType: "COLOR_PICKER",
|
||||
isBindProperty: true,
|
||||
isTriggerProperty: false,
|
||||
validation: { type: ValidationTypes.TEXT },
|
||||
},
|
||||
{
|
||||
helpText: "Enter value for border width",
|
||||
propertyName: "borderWidth",
|
||||
label: "Border Width",
|
||||
placeholderText: "Enter value in px",
|
||||
controlType: "INPUT_TEXT",
|
||||
isBindProperty: true,
|
||||
isTriggerProperty: false,
|
||||
validation: { type: ValidationTypes.NUMBER },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user