Skip to content

Tshepo/f/text #3107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
James-Baloyi merged 6 commits into from
Apr 4, 2025
Merged

Tshepo/f/text #3107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
55d73de
chore: dynamically showing the font size and title size
Tshepo1103-lab Apr 3, 2025
20706c2
chore: adding default values
Tshepo1103-lab Apr 3, 2025
fb84017
fix: fix alignment of the text
Tshepo1103-lab Apr 3, 2025
ee06057
chore: adding tooltips to the shadow settings
Tshepo1103-lab Apr 3, 2025
88960e8
chore: adding additional properties
Tshepo1103-lab Apr 3, 2025
5ab7ee5
fix: removing console log
Tshepo1103-lab Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions shesha-reactjs/src/designer-components/text/genericText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export const GenericText: FC<PropsWithChildren<IGenericTextProps>> = ({
contentType,
dataType,
dateFormat,
fontSize,
level,
size,
numberFormat,
textType,
style,
Expand All @@ -48,7 +48,6 @@ export const GenericText: FC<PropsWithChildren<IGenericTextProps>> = ({
model.strong,
]);


const baseProps: ITypographyProps = {
code: model?.code,
copyable: model?.copyable,
Expand All @@ -59,14 +58,18 @@ export const GenericText: FC<PropsWithChildren<IGenericTextProps>> = ({
keyboard: model?.keyboard,
italic: model?.italic,
type: contentType !== 'custom' && contentType !== 'info' && contentType !== 'primary' ? contentType : null,
style: {...style, color: contentType === 'custom' ? style.color : undefined, textAlign: 'right'},
style: {
...style,
color: contentType === 'custom' ? style.color : undefined,
fontSize: textType === 'title' ? undefined : style?.fontSize,
justifyContent: style.textAlign,
},
Comment on lines +61 to +66
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Potential misuse of justifyContent property

The code uses justifyContent: style.textAlign which may not work as expected since these CSS properties have different behaviors. textAlign controls text alignment, while justifyContent aligns flex items along the main axis.

-      justifyContent: style.textAlign,
+      textAlign: style.textAlign,

Also, the conditional fontSize handling for titles should be documented for clarity:

-      fontSize: textType === 'title' ? undefined : style?.fontSize,
+      // Title components use their own fontSize based on level prop
+      fontSize: textType === 'title' ? undefined : style?.fontSize,
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
style: {
...style,
color: contentType === 'custom' ? style.color : undefined,
fontSize: textType === 'title' ? undefined : style?.fontSize,
justifyContent: style.textAlign,
},
style: {
...style,
color: contentType === 'custom' ? style.color : undefined,
// Title components use their own fontSize based on level prop
fontSize: textType === 'title' ? undefined : style?.fontSize,
textAlign: style.textAlign,
},

};

const textProps: TextProps = {
...baseProps,
strong: model?.strong,
};

const paragraphProps: ParagraphProps = {
...baseProps,
strong: model?.strong,
Expand All @@ -84,7 +87,7 @@ export const GenericText: FC<PropsWithChildren<IGenericTextProps>> = ({

if (textType === 'span') {
return (
<Text key={`text-${updateKey}`} style={{ display: 'block' }} {...textProps} className={className}>
<Text key={`text-${updateKey}`} {...textProps} className={className}>
{children}
</Text>
);
Expand All @@ -103,4 +106,4 @@ export const GenericText: FC<PropsWithChildren<IGenericTextProps>> = ({
{children}
</Title>
);
};
};
2 changes: 1 addition & 1 deletion shesha-reactjs/src/designer-components/text/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const TextComponent: IToolboxComponent<ITextTypographyProps> = {
backgroundColor: legacyColor2Hex(prev.backgroundColor),
}))
.add<ITextTypographyProps>(2, (prev) => ({ ...migrateFormApi.properties(prev) }))
.add<ITextTypographyProps>(3, (prev) => ({ ...migratePrevStyles(prev, defaultStyles()) })),
.add<ITextTypographyProps>(3, (prev) => ({ ...migratePrevStyles(prev, defaultStyles(prev.textType)) })),
};

export default TextComponent;
214 changes: 190 additions & 24 deletions shesha-reactjs/src/designer-components/text/settingsForm.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,98 @@ export const getSettings = (data: any) => {
},
],
})
.addSettingsInputRow({
id: 'switeches-s4gmBg31azZC0UjZjpfTm',
parentId: 's4gmBg31azZC0UjZjpfTm',
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
inputs: [
{
type: 'switch',
id: 'italic-s4gmBg31azZC0UjZjpfTm',
propertyName: 'italic',
label: 'Italic',
size: 'small',
jsSetting: true,
},
{
type: 'switch',
id: 'code-s4gmBg31azZC0UjZjpfTm',
propertyName: 'code',
label: 'Code',
size: 'small',
jsSetting: true,
},
],
})
.addSettingsInputRow({
id: 'switeches-s4gmBg31azZC0UjZjpfTm',
parentId: 's4gmBg31azZC0UjZjpfTm',
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
inputs: [
{
type: 'switch',
id: 'delete-s4gmBg31azZC0UjZjpfTm',
propertyName: 'delete',
label: 'Strikethrough',
size: 'small',
jsSetting: true,
},
{
type: 'switch',
id: 'underline-s4gmBg31azZC0UjZjpfTm',
propertyName: 'underline',
label: 'Underline',
size: 'small',
jsSetting: true,
},
],
})
.addSettingsInputRow({
id: 'switeches-s4gmBg31azZC0UjZjpfTm',
parentId: 's4gmBg31azZC0UjZjpfTm',
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
inputs: [
{
type: 'switch',
id: 'strong-s4gmBg31azZC0UjZjpfTm',
propertyName: 'ellipsis',
label: 'Ellipsis',
size: 'small',
jsSetting: true,
},
{
type: 'switch',
id: 'mark-s4gmBg31azZC0UjZjpfTm',
propertyName: 'mark',
label: 'Mark',
size: 'small',
jsSetting: true,
},
],
})
.addSettingsInputRow({
id: 'switeches-s4gmBg31azZC0UjZjpfTm',
parentId: 's4gmBg31azZC0UjZjpfTm',
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
inputs: [
{
type: 'switch',
id: 'keyboard-s4gmBg31azZC0UjZjpfTm',
propertyName: 'keyboard',
label: 'Keyboard',
size: 'small',
jsSetting: true,
},
{
type: 'switch',
id: 'copyable-s4gmBg31azZC0UjZjpfTm',
propertyName: 'copyable',
label: 'Copyable',
size: 'small',
jsSetting: true,
},
],
})
.toJson(),
],
},
Expand Down Expand Up @@ -329,6 +421,46 @@ export const getSettings = (data: any) => {
propertyName: 'font.size',
hideLabel: true,
width: 50,
hidden: {
_code: 'return getSettingValue(data.textType) === "title";',
_mode: 'code',
_value: false,
} as any,
},
{
type: 'dropdown',
id: 'size-s4gmBg31azZC0UjZjpfTm',
label: 'Size unit',
propertyName: 'level',
hideLabel: true,
defaultValue: '1',
dropdownOptions: [
{
label: 'H1',
value: '1',
},
{
label: 'H2',
value: '2',
},
{
label: 'H3',
value: '3',
},
{
label: 'H4',
value: '4',
},
{
label: 'H5',
value: '5',
},
],
hidden: {
_code: 'return getSettingValue(data.textType) !== "title";',
_mode: 'code',
_value: false,
} as any,
},
{
type: 'dropdown',
Expand Down Expand Up @@ -357,8 +489,7 @@ export const getSettings = (data: any) => {
type: 'dropdown',
id: 'fontAlign-s4gmBg31azZC0UjZjpfTm',
label: 'Align',
propertyName: 'textAlign',
defaultValue: 'left',
propertyName: 'font.align',
hideLabel: true,
width: 60,
dropdownOptions: textAlign,
Expand Down Expand Up @@ -691,46 +822,68 @@ export const getSettings = (data: any) => {
],
})
.addSettingsInputRow({
id: "backgroundStyleRow-controls",
id: 'backgroundStyleRow-controls',
parentId: 'backgroundStyleRow',
inline: true,
hidden: { _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', _mode: 'code', _value: false } as any,
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
hidden: {
_code:
'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";',
_mode: 'code',
_value: false,
} as any,
readOnly: {
_code: 'return getSettingValue(data?.readOnly);',
_mode: 'code',
_value: false,
} as any,
inputs: [
{
type: 'customDropdown',
id: 'backgroundStyleRow-size',
label: "Size",
label: 'Size',
hideLabel: true,
propertyName: "background.size",
customTooltip: 'Size of the background image, two space separated values with units e.g "100% 100px"',
propertyName: 'background.size',
customTooltip:
'Size of the background image, two space separated values with units e.g "100% 100px"',
dropdownOptions: sizeOptions,
},
{
type: 'customDropdown',
id: 'backgroundStyleRow-position',
label: "Position",
label: 'Position',
hideLabel: true,
customTooltip: 'Position of the background image, two space separated values with units e.g "5em 100px"',
propertyName: "background.position",
customTooltip:
'Position of the background image, two space separated values with units e.g "5em 100px"',
propertyName: 'background.position',
dropdownOptions: positionOptions,
}
]
},
],
})
.addSettingsInputRow({
id: 'backgroundStyleRow-repeat',
parentId: 'backgroundStyleRow',
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
inputs: [{
type: 'radio',
id: 'backgroundStyleRow-repeat-radio',
label: 'Repeat',
hideLabel: true,
propertyName: 'background.repeat',
inputType: 'radio',
buttonGroupOptions: repeatOptions,
}],
hidden: { _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', _mode: 'code', _value: false } as any,
readOnly: {
_code: 'return getSettingValue(data?.readOnly);',
_mode: 'code',
_value: false,
} as any,
inputs: [
{
type: 'radio',
id: 'backgroundStyleRow-repeat-radio',
label: 'Repeat',
hideLabel: true,
propertyName: 'background.repeat',
inputType: 'radio',
buttonGroupOptions: repeatOptions,
},
],
hidden: {
_code:
'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";',
_mode: 'code',
_value: false,
} as any,
})
.toJson(),
],
Expand Down Expand Up @@ -763,6 +916,7 @@ export const getSettings = (data: any) => {
id: 'shadowStyleRow-offsetX',
label: 'Offset X',
hideLabel: true,
tooltip: 'Offset X',
width: 80,
icon: 'offsetHorizontalIcon',
propertyName: 'shadow.offsetX',
Expand All @@ -772,6 +926,7 @@ export const getSettings = (data: any) => {
id: 'shadowStyleRow-offsetY',
label: 'Offset Y',
hideLabel: true,
tooltip: 'Offset Y',
width: 80,
icon: 'offsetVerticalIcon',
propertyName: 'shadow.offsetY',
Expand All @@ -781,10 +936,21 @@ export const getSettings = (data: any) => {
id: 'shadowStyleRow-blurRadius',
label: 'Blur',
hideLabel: true,
tooltip: 'Blur Radius',
width: 80,
icon: 'blurIcon',
propertyName: 'shadow.blurRadius',
},
{
type: 'numberField',
id: 'shadowStyleRow-spreadRadius',
label: 'Spread',
hideLabel: true,
tooltip: 'Spread Radius',
width: 80,
icon: 'spreadIcon',
propertyName: 'shadow.spreadRadius',
},
{
type: 'colorPicker',
id: 'shadowStyleRow-color',
Expand Down
7 changes: 4 additions & 3 deletions shesha-reactjs/src/designer-components/text/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,14 @@ export const getContent = (content: string, { dataType = 'string', dateFormat, n
}
};

export const defaultStyles = (): IStyleType => {
export const defaultStyles = (textType: string): IStyleType => {
return {
font: {
color: '#000',
type: 'Segoe UI',
size: textType === 'title' ? undefined : 14
},
background: { type: 'color', color: 'transparent' },
background: { type: 'color', color: '#fff' },
border: {
border: {
all: {
Expand All @@ -107,7 +108,7 @@ export const defaultStyles = (): IStyleType => {
},
dimensions: {
width: '100%',
height: '32px',
height: '100%',
minHeight: '0px',
maxHeight: 'auto',
minWidth: '0px',
Expand Down
Loading