6430adb413
* POC: Grouping for ButtonWidget * Adds featureflag * improve feature flag experience for unfinished widgets * Styling of tabs * Adds activation group for ButtonWidget * Makes contentConfig & styleCOnfig optional to avoid typescript errors from tests * Adds UI for search * Fixes title, search & tabs UI to the top * fix: style issue * fix styles * refactor ProeprtyPaneTab * updates Button based on Figma design changes * POC for AudioWidget * chore: JSON Form Grouping & Reorganisation (#15033) * POC: JSON Form grouping * fix: Empty sections * Moves icon into a separate sub section * fix some sections based on updated Designs * fix styling issues * fix: double border * udpdates based on Figma updates * Updates order as per Figma * refactor and better naming of function * address review comments for JSON form configs * fix UI issues * reorder JSON form's array data section * Adds Button Form settings * Address QA comments * update JSON form with new design changes * Open array & object style by default * trigger ci * chore: Grouping & reorganisation of Video widget (#15297) * POC: JSON Form grouping * fix: Empty sections * Moves icon into a separate sub section * fix some sections based on updated Designs * fix styling issues * fix: double border * udpdates based on Figma updates * Updates order as per Figma * Content & Style Config for Video Widget * refactor and better naming of function * address review comments for JSON form configs * fix UI issues * ?? * chore: Grouping & reorganisation of Document Viewer widget (#15514) * Grouping & re-org for Document Viewer * fix: scroll issue * feat: Search properties in property pane (#14876) * Upgrades fuse.js package * Property pane search POC * POC: JSON Form grouping * fix: Empty sections * Moves icon into a separate sub section * fix some sections based on updated Designs * fix styling issues * fix: double border * udpdates based on Figma updates * Updates order as per Figma * fix unused variable after merge * Adds empty search UI * Makes the order of search result proper * Refactor PropertyControlGenerator * refactor and support for panel * Revert "Upgrades fuse.js package" This reverts commit 76d8038139ff4b8add79019a75eaaf40fd620e8e. * extract out search functionality to helper * cleanup * fix: panel issue * Focus on Search bar on opening the property pane * better naming * fix: fuzzy search params * refactor: As suggested in the code review * fix: section is not hidden when there's no children * fix: issue panel properties * Adds TextWidget * Adds RateWidget * Adds DividerWidget * Adds ProgressWidget * Adds ListWidget * adds TabWidget * Adds IframeWidget * Adds StatboxWidget * Adds ModalWidget * changes after design review
714 lines
20 KiB
TypeScript
714 lines
20 KiB
TypeScript
import React, { ReactNode } from "react";
|
|
|
|
import { TextSize } from "constants/WidgetConstants";
|
|
import { countOccurrences } from "workers/helpers";
|
|
|
|
import { ValidationTypes } from "constants/WidgetValidation";
|
|
import { DerivedPropertiesMap } from "utils/WidgetFactory";
|
|
|
|
import { Color } from "constants/Colors";
|
|
import BaseWidget, { WidgetProps, WidgetState } from "widgets/BaseWidget";
|
|
import TextComponent, { TextAlign } from "../component";
|
|
import { ContainerStyle } from "widgets/ContainerWidget/component";
|
|
import { AutocompleteDataType } from "utils/autocomplete/TernServer";
|
|
import { OverflowTypes } from "../constants";
|
|
import WidgetStyleContainer from "components/designSystems/appsmith/WidgetStyleContainer";
|
|
import { pick } from "lodash";
|
|
|
|
const MAX_HTML_PARSING_LENGTH = 1000;
|
|
class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
|
|
static getPropertyPaneConfig() {
|
|
return [
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
propertyName: "text",
|
|
helpText: "Sets the text of the widget",
|
|
label: "Text",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: "Name:",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: { limitLineBreaks: true },
|
|
},
|
|
},
|
|
{
|
|
propertyName: "overflow",
|
|
label: "Overflow",
|
|
helpText: "Controls the text behavior when length of text exceeds",
|
|
controlType: "DROP_DOWN",
|
|
options: [
|
|
{
|
|
label: "Scroll contents",
|
|
value: OverflowTypes.SCROLL,
|
|
},
|
|
{
|
|
label: "Truncate text",
|
|
value: OverflowTypes.TRUNCATE,
|
|
},
|
|
{
|
|
label: "No overflow",
|
|
value: OverflowTypes.NONE,
|
|
},
|
|
],
|
|
defaultValue: OverflowTypes.NONE,
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "isVisible",
|
|
helpText: "Controls the visibility of the widget",
|
|
label: "Visible",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
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 },
|
|
},
|
|
{
|
|
propertyName: "disableLink",
|
|
helpText: "Controls parsing text as Link",
|
|
label: "Disable Link",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Styles",
|
|
children: [
|
|
{
|
|
propertyName: "backgroundColor",
|
|
label: "Cell Background Color",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^((?![<|{{]).+){0,1}/,
|
|
expected: {
|
|
type: "string (HTML color name or HEX value)",
|
|
example: `red | #9C0D38`,
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "textColor",
|
|
label: "Text Color",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "truncateButtonColor",
|
|
label: "Truncate Button Color",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
dependencies: ["overflow"],
|
|
hidden: (props: TextWidgetProps) => {
|
|
return props.overflow !== OverflowTypes.TRUNCATE;
|
|
},
|
|
},
|
|
{
|
|
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 which can also use as margin",
|
|
propertyName: "borderWidth",
|
|
label: "Border Width",
|
|
placeholderText: "Enter value in px",
|
|
controlType: "INPUT_TEXT",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.NUMBER },
|
|
},
|
|
{
|
|
propertyName: "fontSize",
|
|
label: "Text Size",
|
|
controlType: "DROP_DOWN",
|
|
defaultValue: "1rem",
|
|
options: [
|
|
{
|
|
label: "S",
|
|
value: "0.875rem",
|
|
subText: "0.875rem",
|
|
},
|
|
{
|
|
label: "M",
|
|
value: "1rem",
|
|
subText: "1rem",
|
|
},
|
|
{
|
|
label: "L",
|
|
value: "1.25rem",
|
|
subText: "1.25rem",
|
|
},
|
|
{
|
|
label: "XL",
|
|
value: "1.875rem",
|
|
subText: "1.875rem",
|
|
},
|
|
{
|
|
label: "XXL",
|
|
value: "3rem",
|
|
subText: "3rem",
|
|
},
|
|
{
|
|
label: "3XL",
|
|
value: "3.75rem",
|
|
subText: "3.75rem",
|
|
},
|
|
],
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
},
|
|
},
|
|
{
|
|
propertyName: "fontFamily",
|
|
label: "Font Family",
|
|
controlType: "DROP_DOWN",
|
|
options: [
|
|
{
|
|
label: "System Default",
|
|
value: "System Default",
|
|
},
|
|
{
|
|
label: "Nunito Sans",
|
|
value: "Nunito Sans",
|
|
},
|
|
{
|
|
label: "Poppins",
|
|
value: "Poppins",
|
|
},
|
|
{
|
|
label: "Inter",
|
|
value: "Inter",
|
|
},
|
|
{
|
|
label: "Montserrat",
|
|
value: "Montserrat",
|
|
},
|
|
{
|
|
label: "Noto Sans",
|
|
value: "Noto Sans",
|
|
},
|
|
{
|
|
label: "Open Sans",
|
|
value: "Open Sans",
|
|
},
|
|
{
|
|
label: "Roboto",
|
|
value: "Roboto",
|
|
},
|
|
{
|
|
label: "Rubik",
|
|
value: "Rubik",
|
|
},
|
|
{
|
|
label: "Ubuntu",
|
|
value: "Ubuntu",
|
|
},
|
|
],
|
|
defaultValue: "System Default",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
},
|
|
},
|
|
{
|
|
propertyName: "fontStyle",
|
|
label: "Font Style",
|
|
controlType: "BUTTON_TABS",
|
|
options: [
|
|
{
|
|
icon: "BOLD_FONT",
|
|
value: "BOLD",
|
|
},
|
|
{
|
|
icon: "ITALICS_FONT",
|
|
value: "ITALIC",
|
|
},
|
|
],
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
propertyName: "textAlign",
|
|
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,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
static getPropertyPaneContentConfig() {
|
|
return [
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
propertyName: "text",
|
|
helpText: "Sets the text of the widget",
|
|
label: "Text",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: "Name:",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: { limitLineBreaks: true },
|
|
},
|
|
},
|
|
{
|
|
propertyName: "overflow",
|
|
label: "Overflow Text",
|
|
helpText: "Controls the text behavior when length of text exceeds",
|
|
controlType: "DROP_DOWN",
|
|
options: [
|
|
{
|
|
label: "Scroll contents",
|
|
value: OverflowTypes.SCROLL,
|
|
},
|
|
{
|
|
label: "Truncate text",
|
|
value: OverflowTypes.TRUNCATE,
|
|
},
|
|
{
|
|
label: "No overflow",
|
|
value: OverflowTypes.NONE,
|
|
},
|
|
],
|
|
defaultValue: OverflowTypes.NONE,
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
},
|
|
{
|
|
propertyName: "isVisible",
|
|
helpText: "Controls the visibility of the widget",
|
|
label: "Visible",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
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 },
|
|
},
|
|
{
|
|
propertyName: "disableLink",
|
|
helpText: "Controls parsing text as Link",
|
|
label: "Disable Link",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
static getPropertyPaneStyleConfig() {
|
|
return [
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
propertyName: "fontFamily",
|
|
label: "Font Family",
|
|
controlType: "DROP_DOWN",
|
|
options: [
|
|
{
|
|
label: "System Default",
|
|
value: "System Default",
|
|
},
|
|
{
|
|
label: "Nunito Sans",
|
|
value: "Nunito Sans",
|
|
},
|
|
{
|
|
label: "Poppins",
|
|
value: "Poppins",
|
|
},
|
|
{
|
|
label: "Inter",
|
|
value: "Inter",
|
|
},
|
|
{
|
|
label: "Montserrat",
|
|
value: "Montserrat",
|
|
},
|
|
{
|
|
label: "Noto Sans",
|
|
value: "Noto Sans",
|
|
},
|
|
{
|
|
label: "Open Sans",
|
|
value: "Open Sans",
|
|
},
|
|
{
|
|
label: "Roboto",
|
|
value: "Roboto",
|
|
},
|
|
{
|
|
label: "Rubik",
|
|
value: "Rubik",
|
|
},
|
|
{
|
|
label: "Ubuntu",
|
|
value: "Ubuntu",
|
|
},
|
|
],
|
|
defaultValue: "System Default",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
},
|
|
},
|
|
{
|
|
propertyName: "fontSize",
|
|
label: "Font Size",
|
|
controlType: "DROP_DOWN",
|
|
defaultValue: "1rem",
|
|
options: [
|
|
{
|
|
label: "S",
|
|
value: "0.875rem",
|
|
subText: "0.875rem",
|
|
},
|
|
{
|
|
label: "M",
|
|
value: "1rem",
|
|
subText: "1rem",
|
|
},
|
|
{
|
|
label: "L",
|
|
value: "1.25rem",
|
|
subText: "1.25rem",
|
|
},
|
|
{
|
|
label: "XL",
|
|
value: "1.875rem",
|
|
subText: "1.875rem",
|
|
},
|
|
{
|
|
label: "XXL",
|
|
value: "3rem",
|
|
subText: "3rem",
|
|
},
|
|
{
|
|
label: "3XL",
|
|
value: "3.75rem",
|
|
subText: "3.75rem",
|
|
},
|
|
],
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Color",
|
|
children: [
|
|
{
|
|
propertyName: "textColor",
|
|
label: "Text Color",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
propertyName: "backgroundColor",
|
|
label: "Background Color",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^((?![<|{{]).+){0,1}/,
|
|
expected: {
|
|
type: "string (HTML color name or HEX value)",
|
|
example: `red | #9C0D38`,
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
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 },
|
|
},
|
|
{
|
|
propertyName: "truncateButtonColor",
|
|
label: "Truncate Button Color",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
params: {
|
|
regex: /^(?![<|{{]).+/,
|
|
},
|
|
},
|
|
dependencies: ["overflow"],
|
|
hidden: (props: TextWidgetProps) => {
|
|
return props.overflow !== OverflowTypes.TRUNCATE;
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Text Formatting",
|
|
children: [
|
|
{
|
|
propertyName: "textAlign",
|
|
label: "Alignment",
|
|
controlType: "ICON_TABS",
|
|
options: [
|
|
{
|
|
icon: "LEFT_ALIGN",
|
|
value: "LEFT",
|
|
},
|
|
{
|
|
icon: "CENTER_ALIGN",
|
|
value: "CENTER",
|
|
},
|
|
{
|
|
icon: "RIGHT_ALIGN",
|
|
value: "RIGHT",
|
|
},
|
|
],
|
|
defaultValue: "LEFT",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
propertyName: "fontStyle",
|
|
label: "Emphasis",
|
|
controlType: "BUTTON_TABS",
|
|
options: [
|
|
{
|
|
icon: "BOLD_FONT",
|
|
value: "BOLD",
|
|
},
|
|
{
|
|
icon: "ITALICS_FONT",
|
|
value: "ITALIC",
|
|
},
|
|
],
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Border and Shadow",
|
|
children: [
|
|
{
|
|
helpText:
|
|
"Enter value for border width which can also use as margin",
|
|
propertyName: "borderWidth",
|
|
label: "Border Width",
|
|
placeholderText: "Enter value in px",
|
|
controlType: "INPUT_TEXT",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.NUMBER },
|
|
},
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Disable html parsing for long continuous texts
|
|
* @returns boolean
|
|
*/
|
|
shouldDisableLink = (): boolean => {
|
|
const text = this.props.text || "";
|
|
const count: number = countOccurrences(text, "\n", false, 0);
|
|
return (
|
|
(count === 0 && text.length > MAX_HTML_PARSING_LENGTH) ||
|
|
text.length > 50000
|
|
);
|
|
};
|
|
|
|
getPageView() {
|
|
const disableLink: boolean = this.props.disableLink
|
|
? true
|
|
: this.shouldDisableLink();
|
|
return (
|
|
<WidgetStyleContainer
|
|
className="t--text-widget-container"
|
|
{...pick(this.props, [
|
|
"widgetId",
|
|
"containerStyle",
|
|
"borderColor",
|
|
"borderWidth",
|
|
])}
|
|
>
|
|
<TextComponent
|
|
backgroundColor={this.props.backgroundColor}
|
|
bottomRow={this.props.bottomRow}
|
|
disableLink={disableLink}
|
|
fontFamily={this.props.fontFamily}
|
|
fontSize={this.props.fontSize}
|
|
fontStyle={this.props.fontStyle}
|
|
isLoading={this.props.isLoading}
|
|
key={this.props.widgetId}
|
|
leftColumn={this.props.leftColumn}
|
|
overflow={this.props.overflow}
|
|
rightColumn={this.props.rightColumn}
|
|
text={this.props.text}
|
|
textAlign={this.props.textAlign ? this.props.textAlign : "LEFT"}
|
|
textColor={this.props.textColor}
|
|
topRow={this.props.topRow}
|
|
truncateButtonColor={this.props.truncateButtonColor}
|
|
widgetId={this.props.widgetId}
|
|
/>
|
|
</WidgetStyleContainer>
|
|
);
|
|
}
|
|
|
|
static getDerivedPropertiesMap(): DerivedPropertiesMap {
|
|
return {
|
|
value: `{{ this.text }}`,
|
|
};
|
|
}
|
|
|
|
static getWidgetType() {
|
|
return "TEXT_WIDGET";
|
|
}
|
|
}
|
|
|
|
export interface TextStyles {
|
|
backgroundColor?: string;
|
|
textColor?: string;
|
|
fontStyle?: string;
|
|
fontSize?: TextSize;
|
|
textAlign?: TextAlign;
|
|
truncateButtonColor?: string;
|
|
fontFamily: string;
|
|
}
|
|
|
|
export interface TextWidgetProps extends WidgetProps, TextStyles {
|
|
text?: string;
|
|
isLoading: boolean;
|
|
disableLink: boolean;
|
|
widgetId: string;
|
|
containerStyle?: ContainerStyle;
|
|
children?: ReactNode;
|
|
borderColor?: Color;
|
|
borderWidth?: number;
|
|
overflow: OverflowTypes;
|
|
}
|
|
|
|
export default TextWidget;
|