Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Create WDS Text Widget (#28211)

Browse Source 
Fixes #28210
This commit is contained in:
Pawan Kumar 2023-10-20 14:32:30 +05:30 committed by GitHub
parent 8d8e03ef76
commit 468fff707e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 437 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/src/components/wds/constants.ts
View File

@ -2,5 +2,6 @@ export const WDS_V2_WIDGET_MAP = {
BUTTON_WIDGET: "WDS_BUTTON_WIDGET",
INPUT_WIDGET_V2: "WDS_INPUT_WIDGET",
CHECKBOX_WIDGET: "WDS_CHECKBOX_WIDGET",
TEXT_WIDGET: "WDS_TEXT_WIDGET",
TABLE_WIDGET_V2: "WDS_TABLE_WIDGET",
};

2
app/client/src/widgets/index.ts
View File

@ -60,6 +60,7 @@ import ListWidgetV2 from "./ListWidgetV2";
import { WDSButtonWidget } from "./wds/WDSButtonWidget";
import { WDSInputWidget } from "./wds/WDSInputWidget";
import { WDSCheckboxWidget } from "./wds/WDSCheckboxWidget";
import { WDSTextWidget } from "./wds/WDSTextWidget";
import type BaseWidget from "./BaseWidget";
import { WDSTableWidget } from "./wds/WDSTableWidget";
@ -116,6 +117,7 @@ const Widgets = [
WDSButtonWidget,
WDSInputWidget,
WDSCheckboxWidget,
WDSTextWidget,
WDSTableWidget,
//Deprecated Widgets

9
app/client/src/widgets/wds/WDSTextWidget/config/autocompleteConfig.ts Normal file
View File

@ -0,0 +1,9 @@
import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils";
export const autocompleteConfig = {
"!doc":
"‌Text widget is used to display textual information. Whether you want to display a paragraph or information or add a heading to a container, a text widget makes it easy to style and display text",
"!url": "https://docs.appsmith.com/widget-reference/text",
isVisible: DefaultAutocompleteDefinitions.isVisible,
text: "string",
};

52
app/client/src/widgets/wds/WDSTextWidget/config/defaultsConfig.ts Normal file
View File

@ -0,0 +1,52 @@
import { get } from "lodash";
import type { WidgetProps } from "widgets/BaseWidget";
import { isDynamicValue } from "utils/DynamicBindingUtils";
import type { DynamicPath } from "utils/DynamicBindingUtils";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { BlueprintOperationTypes } from "WidgetProvider/constants";
import { ResponsiveBehavior } from "layoutSystems/common/utils/constants";
export const defaultsConfig = {
text: "Hello {{appsmith.user.name || appsmith.user.email}}",
fontSize: "body",
textAlign: "left",
textColor: "neutral",
rows: 4,
columns: 16,
widgetName: "Text",
shouldTruncate: false,
version: 1,
animateLoading: true,
responsiveBehavior: ResponsiveBehavior.Fill,
minWidth: FILL_WIDGET_MIN_WIDTH,
blueprint: {
operations: [
{
type: BlueprintOperationTypes.MODIFY_PROPS,
fn: (widget: WidgetProps & { children?: WidgetProps[] }) => {
if (!isDynamicValue(widget.text)) {
return [];
}
const dynamicBindingPathList: DynamicPath[] = [
...get(widget, "dynamicBindingPathList", []),
];
dynamicBindingPathList.push({
key: "text",
});
const updatePropertyMap = [
{
widgetId: widget.widgetId,
propertyName: "dynamicBindingPathList",
propertyValue: dynamicBindingPathList,
},
];
return updatePropertyMap;
},
},
],
},
};

6
app/client/src/widgets/wds/WDSTextWidget/config/featuresConfig.ts Normal file
View File

@ -0,0 +1,6 @@
export const featuresConfig = {
dynamicHeight: {
sectionIndex: 0,
active: true,
},
};

7
app/client/src/widgets/wds/WDSTextWidget/config/index.ts Normal file
View File

@ -0,0 +1,7 @@
export * from "./propertyPaneConfig";
export { metaConfig } from "./metaConfig";
export { settersConfig } from "./settersConfig";
export { methodsConfig } from "./methodsConfig";
export { defaultsConfig } from "./defaultsConfig";
export { featuresConfig } from "./featuresConfig";
export { autocompleteConfig } from "./autocompleteConfig";

9
app/client/src/widgets/wds/WDSTextWidget/config/metaConfig.ts Normal file
View File

@ -0,0 +1,9 @@
import IconSVG from "../icon.svg";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const metaConfig = {
name: "Text",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.CONTENT],
searchTags: ["typography", "paragraph", "label"],
};

18
app/client/src/widgets/wds/WDSTextWidget/config/methodsConfig.ts Normal file
View File

@ -0,0 +1,18 @@
import type {
PropertyUpdates,
SnipingModeProperty,
} from "WidgetProvider/constants";
export const methodsConfig = {
getSnipingModeUpdates: (
propValueMap: SnipingModeProperty,
): PropertyUpdates[] => {
return [
{
propertyPath: "text",
propertyValue: propValueMap.data,
isDynamicPropertyPath: true,
},
];
},
};

58
app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/contentConfig.ts Normal file
View File

@ -0,0 +1,58 @@
import { ValidationTypes } from "constants/WidgetValidation";
export const propertyPaneContentConfig = [
{
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: "lineClamp",
helpText: "Controls the number of lines displayed",
label: "Line clamp (max lines)",
controlType: "INPUT_TEXT",
placeholderText: "No. of lines to display",
isBindProperty: true,
isTriggerProperty: false,
validation: {
type: ValidationTypes.NUMBER,
params: {
min: 1,
},
},
},
{
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 },
},
],
},
];

2
app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/index.ts Normal file
View File

@ -0,0 +1,2 @@
export { propertyPaneContentConfig } from "./contentConfig";
export { propertyPaneStyleConfig } from "./styleConfig";

159
app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/styleConfig.ts Normal file
View File

@ -0,0 +1,159 @@
import { COLORS } from "@design-system/widgets";
import { TYPOGRAPHY_VARIANTS } from "@design-system/theming";
import { ValidationTypes } from "constants/WidgetValidation";
export const propertyPaneStyleConfig = [
{
sectionName: "General",
children: [
{
propertyName: "fontSize",
label: "Font size",
helpText: "Controls the size of the font used",
controlType: "DROP_DOWN",
defaultValue: "body",
options: [
{
label: "Footnote",
value: "footnote",
},
{
label: "Body",
value: "body",
},
{
label: "Caption",
value: "caption",
},
{
label: "Subtitle",
value: "subtitle",
},
{
label: "Title",
value: "title",
},
{
label: "Heading",
value: "heading",
},
],
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: {
type: ValidationTypes.TEXT,
params: {
allowedValues: Object.values(TYPOGRAPHY_VARIANTS),
default: TYPOGRAPHY_VARIANTS.body,
},
},
},
],
},
{
sectionName: "Color",
children: [
{
propertyName: "textColor",
label: "Text Color",
helpText: "Controls the color of the text displayed",
controlType: "DROP_DOWN",
defaultValue: "neutral",
options: [
{
label: "Accent",
value: "accent",
},
{
label: "Neutral",
value: "neutral",
},
{
label: "Positive",
value: "positive",
},
{
label: "Negative",
value: "negative",
},
{
label: "Warning",
value: "warning",
},
{
label: "Heading",
value: "heading",
},
],
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: {
type: ValidationTypes.TEXT,
params: {
allowedValues: Object.values(COLORS),
default: COLORS.neutral,
},
},
},
],
},
{
sectionName: "Text formatting",
children: [
{
propertyName: "textAlign",
label: "Alignment",
helpText: "Controls the horizontal alignment of the text",
controlType: "ICON_TABS",
fullWidth: true,
options: [
{
startIcon: "align-left",
value: "left",
},
{
startIcon: "align-center",
value: "center",
},
{
startIcon: "align-right",
value: "right",
},
],
defaultValue: "left",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: {
type: ValidationTypes.TEXT,
params: {
allowedValues: ["left", "center", "right"],
default: "left",
},
},
},
{
propertyName: "fontStyle",
label: "Emphasis",
helpText: "Controls the font emphasis of the text displayed",
controlType: "BUTTON_GROUP",
options: [
{
icon: "text-bold",
value: "bold",
},
{
icon: "text-italic",
value: "italic",
},
],
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
],
},
];

24
app/client/src/widgets/wds/WDSTextWidget/config/settersConfig.ts Normal file
View File

@ -0,0 +1,24 @@
export const settersConfig = {
__setters: {
setVisibility: {
path: "isVisible",
type: "boolean",
},
setDisabled: {
path: "isDisabled",
type: "boolean",
},
setRequired: {
path: "isRequired",
type: "boolean",
},
setText: {
path: "text",
type: "string",
},
setTextColor: {
path: "textColor",
type: "string",
},
},
};

3
app/client/src/widgets/wds/WDSTextWidget/icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3334 19V5.66666H5.66667V8.33337H3V3H21.6667V8.33337H19V5.66666H14.3333V19H17V21.6667H7.66665V19H10.3334Z" fill="#4C5664"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 239 B

3
app/client/src/widgets/wds/WDSTextWidget/index.ts Normal file
View File

@ -0,0 +1,3 @@
import { WDSTextWidget } from "./widget";
export { WDSTextWidget };

81
app/client/src/widgets/wds/WDSTextWidget/widget/index.tsx Normal file
View File

@ -0,0 +1,81 @@
import React from "react";
import type { SetterConfig } from "entities/AppTheming";
import type { DerivedPropertiesMap } from "WidgetProvider/factory";
import * as config from "./../config";
import BaseWidget from "widgets/BaseWidget";
import { Text } from "@design-system/widgets";
import type { TextWidgetProps } from "./types";
import type { WidgetState } from "widgets/BaseWidget";
class WDSTextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
static type = "WDS_TEXT_WIDGET";
static getConfig() {
return config.metaConfig;
}
static getFeatures() {
return config.featuresConfig;
}
static getDefaults() {
return config.defaultsConfig;
}
static getMethods() {
return config.methodsConfig;
}
static getAutoLayoutConfig() {
return {};
}
static getAutocompleteDefinitions() {
return config.autocompleteConfig;
}
static getPropertyPaneContentConfig() {
return config.propertyPaneContentConfig;
}
static getPropertyPaneStyleConfig() {
return config.propertyPaneStyleConfig;
}
static getDefaultPropertiesMap(): Record<string, string> {
return {};
}
static getDerivedPropertiesMap(): DerivedPropertiesMap {
return {
value: `{{ this.text }}`,
};
}
static getMetaPropertiesMap(): Record<string, any> {
return {};
}
static getSetterConfig(): SetterConfig {
return config.settersConfig;
}
getWidgetView() {
return (
<Text
color={this.props.textColor}
isBold={this.props?.fontStyle?.includes("bold")}
isItalic={this.props?.fontStyle?.includes("italic")}
lineClamp={this.props.lineClamp ? this.props.lineClamp : undefined}
textAlign={this.props.textAlign}
title={this.props.lineClamp ? this.props.text : undefined}
variant={this.props.fontSize}
>
{this.props.text}
</Text>
);
}
}
export { WDSTextWidget };

3
app/client/src/widgets/wds/WDSTextWidget/widget/types.ts Normal file
View File

@ -0,0 +1,3 @@
import type { WidgetProps } from "widgets/BaseWidget";
export interface TextWidgetProps extends WidgetProps {}