Skip to content

Tshepo/fix/link #3110

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 3 commits into from
Apr 4, 2025
Merged

Tshepo/fix/link #3110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
149d765
chore: hiding content if has children is checked
Tshepo1103-lab Apr 3, 2025
affb968
chore: fixing the alignment of the link
Tshepo1103-lab Apr 3, 2025
285d086
chore: applying styles to the anchor
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
49 changes: 25 additions & 24 deletions shesha-reactjs/src/designer-components/link/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const LinkComponent: IToolboxComponent<ILinkProps> = {

const fontStyles = useMemo(() => getFontStyle(font), [font]);
const finalStyle = removeUndefinedProps({ ...fontStyles, ...getStyle(style, data) });

// Create link container style with textAlign from fontStyles
const linkStyle: CSSProperties = {};

if (direction === 'horizontal' && justifyContent) {
Expand All @@ -87,18 +87,18 @@ const LinkComponent: IToolboxComponent<ILinkProps> = {

if (!hasChildren) {
return (
<div style={{ ...linkStyle, ...finalStyle, width: '100%' }}>
<a href={href} target={target} className="sha-link">
<div style={{ ...linkStyle }}>
<a href={href} target={target} className="sha-link" style={finalStyle}>
{content}
</a>
</div>

);
}

const containerHolder = () => (
<ParentProvider model={model}>
<ComponentsContainer
style={{ ...linkStyle, ...finalStyle }}
containerId={id}
direction={direction}
justifyContent={model.direction === 'horizontal' ? model?.justifyContent : null}
Expand Down Expand Up @@ -135,26 +135,27 @@ const LinkComponent: IToolboxComponent<ILinkProps> = {

return customProps;
},
migrator: (m) => m
.add<ILinkProps>(0, (prev) => ({ ...prev } as ILinkProps))
.add<ILinkProps>(1, (prev) => {
return {
...prev,
label: prev.label ?? prev['name'],
href: prev.content,
content: prev['name'],
};
})
.add<ILinkProps>(2, (prev) => migratePropertyName(migrateCustomFunctions(prev)))
.add<ILinkProps>(3, (prev) => ({ ...migrateFormApi.properties(prev) }))
.add<ILinkProps>(4, (prev) => {
const styles: IInputStyles = {
style: prev.style
};

return { ...prev, desktop: { ...styles }, tablet: { ...styles }, mobile: { ...styles } };
})
.add<ILinkProps>(5, (prev) => ({ ...migratePrevStyles(prev, defaultStyles()) }))
migrator: (m) =>
m
.add<ILinkProps>(0, (prev) => ({ ...prev }) as ILinkProps)
.add<ILinkProps>(1, (prev) => {
return {
...prev,
label: prev.label ?? prev['name'],
href: prev.content,
content: prev['name'],
};
})
.add<ILinkProps>(2, (prev) => migratePropertyName(migrateCustomFunctions(prev)))
.add<ILinkProps>(3, (prev) => ({ ...migrateFormApi.properties(prev) }))
.add<ILinkProps>(4, (prev) => {
const styles: IInputStyles = {
style: prev.style,
};

return { ...prev, desktop: { ...styles }, tablet: { ...styles }, mobile: { ...styles } };
})
.add<ILinkProps>(5, (prev) => ({ ...migratePrevStyles(prev, defaultStyles()) })),
};

export default LinkComponent;
61 changes: 37 additions & 24 deletions shesha-reactjs/src/designer-components/link/settingsForm.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { DesignerToolbarSettings } from '@/interfaces/toolbarSettings';
import { fontTypes, fontWeights, textAlign } from '../_settings/utils/font/utils';
import { fontTypes, fontWeights } from '../_settings/utils/font/utils';
import { FormLayout } from 'antd/es/form/Form';

export const getSettings = (data: any) => {
Expand Down Expand Up @@ -39,6 +39,22 @@ export const getSettings = (data: any) => {
parentId: 's4gmBg31azZC0UjZjpfTm',
hideLabel: true,
})
.addSettingsInputRow({
id: 'palceholder-tooltip-s4gmBg31azZC0UjZjpfTm',
parentId: 's4gmBg31azZC0UjZjpfTm',
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
hidden: { _code: 'return getSettingValue(data?.hasChildren);', _mode: 'code', _value: false } as any,
inputs: [
{
id: 'palceholder-s4gmBg31azZC0UjZjpfTm',
type: 'textArea',
propertyName: 'content',
label: 'Content',
size: 'small',
jsSetting: true,
},
],
})
.addSettingsInput({
id: 'palceholder-tooltip-s4gmBg31azZC0UjZjpfTm',
parentId: 's4gmBg31azZC0UjZjpfTm',
Expand All @@ -48,6 +64,12 @@ export const getSettings = (data: any) => {
size: 'small',
jsSetting: true,
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
hidden: {
_code:
'return !getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.hasChildren);',
_mode: 'code',
_value: false,
} as any,
})
.addSettingsInput({
id: 'href-s4gmBg31azZC0UjZjpfTm',
Expand Down Expand Up @@ -233,15 +255,6 @@ export const getSettings = (data: any) => {
hideLabel: true,
propertyName: 'font.color',
},
{
type: 'dropdown',
id: 'fontAlign-s4gmBg31azZC0UjZjpfTm',
label: 'Align',
propertyName: 'font.align',
hideLabel: true,
width: 60,
dropdownOptions: textAlign,
},
],
})
.toJson(),
Expand Down Expand Up @@ -276,11 +289,11 @@ export const getSettings = (data: any) => {
value: 'center',
},
{
label: 'Flex Start',
label: 'Flex start',
value: 'flex-start',
},
{
label: 'Flex End',
label: 'Flex end',
value: 'flex-end',
},
{
Expand All @@ -292,15 +305,15 @@ export const getSettings = (data: any) => {
value: 'right',
},
{
label: 'Space Between',
label: 'Space between',
value: 'space-between',
},
{
label: 'Space Around',
label: 'Space around',
value: 'space-around',
},
{
label: 'Space Evenly',
label: 'Space evenly',
value: 'space-evenly',
},
{
Expand Down Expand Up @@ -330,11 +343,11 @@ export const getSettings = (data: any) => {
value: 'end',
},
{
label: 'Flex End',
label: 'Flex end',
value: 'flex-end',
},
{
label: 'Flex Start',
label: 'Flex start',
value: 'flex-start',
},
{
Expand All @@ -354,11 +367,11 @@ export const getSettings = (data: any) => {
value: 'revert',
},
{
label: 'Self End',
label: 'Self end',
value: 'self-end',
},
{
label: 'Self Start',
label: 'Self start',
value: 'self-start',
},
{
Expand All @@ -384,7 +397,7 @@ export const getSettings = (data: any) => {
layout: 'horizontal',
dropdownOptions: [
{
label: 'Baseline',
label: 'baseline',
value: 'baseline',
},
{
Expand All @@ -396,11 +409,11 @@ export const getSettings = (data: any) => {
value: 'end',
},
{
label: 'Flex End',
label: 'Flex end',
value: 'flex-end',
},
{
label: 'Flex Start',
label: 'Flex start',
value: 'flex-start',
},
{
Expand Down Expand Up @@ -432,11 +445,11 @@ export const getSettings = (data: any) => {
value: 'right',
},
{
label: 'Self End',
label: 'Self end',
value: 'self-end',
},
{
label: 'Self Start',
label: 'Self start',
value: 'self-start',
},
{
Expand Down
Loading