Skip to content

Thulasizwe/en/read only style #3655

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
czwe-01 merged 3 commits into from
Jul 30, 2025
Merged

Thulasizwe/en/read only style #3655

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f3ef2d
enable styles on readinly
czwe-01 Jul 30, 2025
ac0d49d
Merge branch 'main' into thulasizwe/en/read-only-style
czwe-01 Jul 30, 2025
c818b3a
pointer events
czwe-01 Jul 30, 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
2 changes: 0 additions & 2 deletions shesha-reactjs/src/components/autocomplete/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,6 @@ const AutocompleteInner: FC<IAutocompleteBaseProps> = (props: IAutocompleteBaseP
};

return (
<div style={{ width: 'fit-content' }}>
<ReadOnlyDisplayFormItem
value={readonlyValue}
type={props.mode === 'multiple' ? 'dropdownMultiple' : 'dropdown'}
Expand All @@ -256,7 +255,6 @@ const AutocompleteInner: FC<IAutocompleteBaseProps> = (props: IAutocompleteBaseP
quickviewGetEntityUrl={props.quickviewGetEntityUrl}
quickviewWidth={props.quickviewWidth ? Number(props.quickviewWidth) : null} // quick fix string value of quickviewWidth (from configurator)
/>
</div>
);
}

Expand Down
2 changes: 0 additions & 2 deletions shesha-reactjs/src/components/autocomplete/models.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,6 @@ export interface IAutocompleteBaseProps {
* @deprecated
*/
typeShortAlias?: string;

disabledStyleOnReadonly?: boolean;
}

export interface IAutocompleteProps extends Omit<IAutocompleteBaseProps, 'uid'> {
Expand Down
14 changes: 6 additions & 8 deletions shesha-reactjs/src/components/buttonGroupConfigurator/buttonGroupItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu

const { icon, label, tooltip, iconPosition, size, buttonType, borderColor, borderRadius,
height, width, backgroundColor, fontSize, fontWeight, color, borderStyle, borderWidth,
readOnly, block, danger, disabledStyleOnReadonly } = actualItem;
readOnly, block, danger } = actualItem;

const model = {
...actualItem,
Expand All @@ -59,15 +59,14 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
const prevStyles = migratePrevStyles(model, initialValues());

const buttonStyles = useFormComponentStyles(prevStyles);
const disableReadonlyStyles = disabledStyleOnReadonly && readOnly;

const newStyles = {
...buttonStyles.dimensionsStyles,
...(['primary', 'default', 'ghost'].includes(item.buttonType) && !disableReadonlyStyles && buttonStyles.borderStyles),
...(['primary', 'default', 'ghost'].includes(item.buttonType) && buttonStyles.borderStyles),
...buttonStyles.fontStyles,
...(['dashed', 'default', 'ghost'].includes(item.buttonType) && !disableReadonlyStyles && buttonStyles.backgroundStyles),
...(['primary', 'default', 'dashed', 'ghost'].includes(item.buttonType) && !disableReadonlyStyles && buttonStyles.shadowStyles),
...(!disableReadonlyStyles && buttonStyles.jsStyle),
...(['dashed', 'default', 'ghost'].includes(item.buttonType) && buttonStyles.backgroundStyles),
...(['primary', 'default', 'dashed', 'ghost'].includes(item.buttonType) && buttonStyles.shadowStyles),
...(buttonStyles.jsStyle),
...buttonStyles.stylingBoxAsCSS,
justifyContent: buttonStyles.fontStyles.textAlign,
};
Expand All @@ -85,8 +84,7 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
className={classNames('sha-toolbar-btn sha-toolbar-btn-configurable')}
size={size}
block={block}
disabled={readOnly}
style={{ ...newStyles }}
style={{ ...newStyles, ...(readOnly && { cursor: 'not-allowed' }) }}
>
{label}
</Button>
Expand Down
4 changes: 2 additions & 2 deletions shesha-reactjs/src/components/buttonGroupConfigurator/itemSettings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,8 +246,8 @@ export const getItemSettings = () => {
{
id: nanoid(),
type: 'switch',
propertyName: 'disabledStyleOnReadonly',
label: 'Disable Style On Readonly',
propertyName: 'enableStyleOnReadonly',
label: 'Enable Style On Readonly',
tooltip: 'Removes all visual styling except typography when the component becomes read-only',
jsSetting: true,
hidden: {
Expand Down
2 changes: 1 addition & 1 deletion shesha-reactjs/src/components/customFile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export interface ICustomFileProps extends IInputStyles {
hideFileName?: boolean;
container?: IStyleType;
primaryColor?: string;
disabledStyleOnReadonly?: boolean;
enableStyleOnReadonly?: boolean;
}
Comment on lines +31 to 32
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Jul 30, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Unused prop detected

enableStyleOnReadonly is declared but never referenced inside CustomFile.
Either wire it into the rendering logic or drop it to avoid dead-code and API confusion.

🤖 Prompt for AI Agents 
In shesha-reactjs/src/components/customFile/index.tsx around lines 31 to 32, the
prop enableStyleOnReadonly is declared but not used anywhere in the CustomFile
component. To fix this, either integrate enableStyleOnReadonly into the
component's rendering logic to apply conditional styling when the component is
readonly, or remove the prop declaration entirely if it is not needed, to
prevent dead code and reduce API confusion.


export const CustomFile: FC<ICustomFileProps> = (props) => {
Expand Down
11 changes: 6 additions & 5 deletions shesha-reactjs/src/components/dropdown/dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export const Dropdown: FC<IDropdownProps> = ({
showItemName,
allowClear = true,
displayStyle,
tagStyle
tagStyle,
enableStyleOnReadonly
}) => {

const { styles } = useStyles({ style });
Expand Down Expand Up @@ -143,6 +144,7 @@ export const Dropdown: FC<IDropdownProps> = ({
filterOption={filterOption}
incomeValueFunc={incomeValueFunc}
outcomeValueFunc={outcomeValueFunc}
enableStyleOnReadonly={enableStyleOnReadonly}
/>
);
}
Expand All @@ -156,14 +158,13 @@ export const Dropdown: FC<IDropdownProps> = ({
return options?.filter(({ value: currentValue }) => selectedValues.indexOf(currentValue) > -1)?.map(({ label }) => ({ label }));
};



if (readOnly) {
return <ReadOnlyDisplayFormItem
showIcon={showIcon}
solidColor={solidColor}
showItemName={showItemName}
style={displayStyle === 'tags' ? tagStyle : style}
tagStyle={tagStyle}
style={style}
dropdownDisplayMode={displayStyle === 'tags' ? 'tags' : 'raw'}
type={mode === 'multiple' ? 'dropdownMultiple' : 'dropdown'}
value={mode === 'multiple' ?
Expand Down Expand Up @@ -224,7 +225,7 @@ export const Dropdown: FC<IDropdownProps> = ({
return (
<Select
{...commonSelectProps}
style={{ ...style }}
style={style}
showSearch
filterOption={filterOption}
placeholder={placeholder}
Expand Down
2 changes: 1 addition & 1 deletion shesha-reactjs/src/components/dropdown/model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,5 @@ export interface IDropdownProps {
showItemName?: boolean;
showIcon?: boolean;
solidColor?: boolean;
disabledStyleOnReadonly?: boolean;
enableStyleOnReadonly?: boolean;
}
4 changes: 2 additions & 2 deletions shesha-reactjs/src/components/quickView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const QuickView: FC<Omit<IQuickViewProps, 'formType'>> = ({
const { backendUrl, httpHeaders } = useSheshaApplication();
const { refetch: fetchForm } = useFormConfiguration({ formId: formIdentifier, lazy: true });
const { notification } = App.useApp();
const {styles, cx} = useStyles();
const { styles, cx } = useStyles();

useEffect(() => {
if (formIdentifier) {
Expand Down Expand Up @@ -194,7 +194,7 @@ const QuickView: FC<Omit<IQuickViewProps, 'formType'>> = ({
export const GenericQuickView: FC<IQuickViewProps> = (props) => {
const { getEntityFormId } = useConfigurationItemsLoader();
const [formConfig, setFormConfig] = useState<FormIdentifier>(props.formIdentifier ?? undefined);
const {styles, cx} = useStyles();
const { styles, cx } = useStyles();

useEffect(() => {
if (props.className && !formConfig)
Expand Down
13 changes: 6 additions & 7 deletions shesha-reactjs/src/components/readOnlyDisplayFormItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Space, Switch } from 'antd';
import { Switch } from 'antd';
import Checkbox from 'antd/lib/checkbox/Checkbox';
import { ValueRenderer } from '@/components/valueRenderer/index';
import React, { FC, useMemo } from 'react';
Expand Down Expand Up @@ -90,11 +90,10 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
solidColor={solidColor}
showItemName={showItemName}
label={displayName}
/>
: <InputField style={style} value={displayName ?? (typeof value === 'object' ? null : value)} />;
/> :
<InputField style={style} value={displayName ?? (typeof value === 'object' ? null : value)} />;
}
}

return null;

case 'dropdownMultiple': {
Expand All @@ -103,7 +102,7 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props

return dropdownDisplayMode === 'raw'
? <InputField style={style} value={values?.join(', ')} />
: <Space size={8}>
: <div style={{ padding: '0px 4px', ...style, display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, justifyContent: style?.textAlign }}>
{value?.map(({ label, color, icon, value, description }) => {
return <ReflistTag
key={value}
Expand All @@ -118,7 +117,7 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
label={label}
/>;
})}
</Space>;
</div>;
}

throw new Error(
Expand All @@ -135,7 +134,7 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
return <Checkbox checked={checked} defaultChecked={defaultChecked} disabled style={style} />;
}
case 'switch': {
return <Switch checked={checked} defaultChecked={defaultChecked} style={{ pointerEvents: 'none', ...style }} />;
return <Switch checked={checked} defaultChecked={defaultChecked} style={{ pointerEvents: 'none', ...style }} size={props.size} />;
}
case 'textArea': {
return <div style={{ ...style, whiteSpace: 'pre-wrap' }}>{value}</div>;
Expand Down
6 changes: 3 additions & 3 deletions shesha-reactjs/src/components/readOnlyDisplayFormItem/inputField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { useStyles } from './styles/styles';

interface IInputFieldProps {
value: string | number | React.ReactNode;
value?: string | number | React.ReactNode;
style?: React.CSSProperties;
children?: React.ReactNode;
}
Expand All @@ -14,8 +14,8 @@ function InputField({ value, style, children }: IInputFieldProps) {
const { fontSize, fontWeight, color, fontFamily, textAlign, height, } = style || {};

return value || children ? (
<div style={{ ...style, height: height === 'auto' ? '32px' : height, display: 'flex', alignItems: 'center', justifyContent: textAlign }} >
<div className={styles.inputField} style={{ fontSize, fontWeight, color, fontFamily }}>{value || children}</div>
<div style={{ padding: '4px', ...style, height: height, display: 'flex', alignItems: 'center', justifyContent: textAlign }} >
<div className={styles.inputField} style={{ fontSize, fontWeight, color, fontFamily, whiteSpace: height === 'auto' ? 'pre-wrap' : 'nowrap' }}>{value || children}</div>
</div>
) : null;
}
Expand Down
3 changes: 2 additions & 1 deletion shesha-reactjs/src/components/readOnlyDisplayFormItem/models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ReactNode } from 'react';
import { FormIdentifier } from '@/providers/form/models';
import { SwitchSize } from 'antd/es/switch';

export interface IReadOnlyDisplayFormItemProps {
value?: any;
Expand Down Expand Up @@ -31,5 +32,5 @@ export interface IReadOnlyDisplayFormItemProps {
quickviewWidth?: number;
style?: React.CSSProperties;
tagStyle?: React.CSSProperties;
disabledStyleOnReadonly?: boolean;
size?: SwitchSize;
}
7 changes: 3 additions & 4 deletions shesha-reactjs/src/components/readOnlyDisplayFormItem/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { createStyles } from '@/styles';
import { sheshaStyles, getTextHoverEffects } from '@/styles';

export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
const readOnlyModeToggler = "read-only-mode-toggler";
const readOnlyDisplayFormItem = cx("read-only-display-form-item", css`
const readOnlyModeToggler = "read-only-mode-toggler";
const readOnlyDisplayFormItem = cx("read-only-display-form-item", css`
width: 100%;
max-width: 100%;
overflow: hidden;
Expand Down Expand Up @@ -50,11 +50,10 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
padding: 0px 8px;
margin: 0;
margin-right: 8px;
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// white-space: nowrap;
`;

return {
Expand Down
1 change: 1 addition & 0 deletions shesha-reactjs/src/components/refListDropDown/models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export interface IRefListDropDownProps<TValue = any> extends Omit<SelectProps<an
size?: SizeType;
displayStyle?: 'tags' | 'text';
onChange?: (value: TValue | TValue[]) => void;
enableStyleOnReadonly?: boolean;
}

export interface IRefListDropDownOption {
Expand Down
21 changes: 14 additions & 7 deletions shesha-reactjs/src/components/storedFilesRendererBase/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export interface IStoredFilesRendererBaseProps extends IInputStyles {
container?: IStyleType;
primaryColor?: string;
allStyles?: IFormComponentStyles;
disabledStyleOnReadonly?: boolean;
enableStyleOnReadonly?: boolean;
}

export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
Expand Down Expand Up @@ -93,7 +93,7 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
layout,
listType,
gap,
disabledStyleOnReadonly = true,
enableStyleOnReadonly = true,
...rest
}) => {
const { message, notification } = App.useApp();
Expand All @@ -105,16 +105,23 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
const model = rest;
const hasFiles = !!fileList.length;

const { dimensionsStyles: containerDimensionsStyles, jsStyle: containerJsStyle, stylingBoxAsCSS } = useFormComponentStyles({ ...model.container });
const { dimensionsStyles: containerDimensionsStyles, stylingBoxAsCSS, ...restStyles } = useFormComponentStyles({ ...model.container });

const { styles } = useStyles({
containerStyles: {
containerStyles: !enableStyleOnReadonly && disabled ? {
...containerDimensionsStyles,
width: layout === 'vertical' ? '' : addPx(containerDimensionsStyles.width), height: layout === 'horizontal' ? '' : addPx(containerDimensionsStyles.height),
...containerJsStyle, ...stylingBoxAsCSS,
...stylingBoxAsCSS,
} : {
...containerDimensionsStyles,
width: layout === 'vertical' ? '' : addPx(containerDimensionsStyles.width), height: layout === 'horizontal' ? '' : addPx(containerDimensionsStyles.height),
...stylingBoxAsCSS,
...restStyles,
},
style: disabledStyleOnReadonly && disabled ?
{ ...model.allStyles.dimensionsStyles, ...model.allStyles.fontStyles } : { ...model?.allStyles?.fullStyle }, model: { gap: addPx(gap), layout: listType === 'thumbnail' && !isDragger, hideFileName: rest.hideFileName && listType === 'thumbnail', isDragger, isStub },
style: !enableStyleOnReadonly && disabled ?
{ ...model.allStyles.dimensionsStyles, ...model.allStyles.fontStyles } :
{ ...model?.allStyles?.fullStyle },
model: { gap: addPx(gap), layout: listType === 'thumbnail' && !isDragger, hideFileName: rest.hideFileName && listType === 'thumbnail', isDragger, isStub },
primaryColor
});

Expand Down
8 changes: 4 additions & 4 deletions shesha-reactjs/src/designer-components/_common-migrations/migrateStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,10 @@ export const migratePrevStyles = <T extends ExtendedType>(prev: T, defaults?: Om

const result: T = {
...prev,
disabledStyleOnReadonly: prev.disabledStyleOnReadonly || true,
desktop: { ...prev.desktop, ...migrateStyles(prev, defaults, 'desktop'), disabledStyleOnReadonly: prev.desktop?.disabledStyleOnReadonly || true },
tablet: { ...prev.tablet, ...migrateStyles(prev, defaults, 'tablet'), disabledStyleOnReadonly: prev.tablet?.disabledStyleOnReadonly || true },
mobile: { ...prev.mobile, ...migrateStyles(prev, defaults, 'mobile'), disabledStyleOnReadonly: prev.mobile?.disabledStyleOnReadonly || true },
enableStyleOnReadonly: prev.enableStyleOnReadonly || false,
desktop: { ...prev.desktop, ...migrateStyles(prev, defaults, 'desktop'), enableStyleOnReadonly: prev.desktop?.enableStyleOnReadonly || false },
tablet: { ...prev.tablet, ...migrateStyles(prev, defaults, 'tablet'), enableStyleOnReadonly: prev.tablet?.enableStyleOnReadonly || false },
mobile: { ...prev.mobile, ...migrateStyles(prev, defaults, 'mobile'), enableStyleOnReadonly: prev.mobile?.enableStyleOnReadonly || false },
};

return result;
Expand Down
5 changes: 2 additions & 3 deletions shesha-reactjs/src/designer-components/address/formSettings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,12 +310,11 @@ export const getSettings = (data: IAddressCompomentProps) => {
.addSettingsInput({
id: nanoid(),
parentId: styleRouterId,
propertyName: 'disabledStyleOnReadonly',
label: 'Disable Style On Readonly',
propertyName: 'enableStyleOnReadonly',
label: 'Enable Style On Readonly',
tooltip: 'Removes all visual styling except typography when the component becomes read-only',
inputType: 'switch',
jsSetting: true,
defaultValue: true,
})
.addCollapsiblePanel({
id: nanoid(),
Expand Down
8 changes: 7 additions & 1 deletion shesha-reactjs/src/designer-components/address/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,17 @@ const AddressCompoment: IToolboxComponent<IAddressCompomentProps> = {
Factory: ({ model }) => {
const allData = useAvailableConstantsData();
const customEvents = getEventHandlers(model, allData);

const finalStyle = !model.enableStyleOnReadonly && model.readOnly ? {
...model.allStyles.fontStyles,
...model.allStyles.dimensionsStyles,
} : model.allStyles.fullStyle;

return (
<ConfigurableFormItem model={model}>
{(value, onChange) => {
return model.readOnly
? <ReadOnlyDisplayFormItem disabledStyleOnReadonly={model.disabledStyleOnReadonly} value={value} style={model.allStyles.fullStyle} />
? <ReadOnlyDisplayFormItem value={value} style={finalStyle} />
: <AutoCompletePlacesControl {...model} value={value} onChange={onChange} onFocusCustom={customEvents.onFocus} />;
}}
</ConfigurableFormItem>
Expand Down
7 changes: 3 additions & 4 deletions shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,12 +287,11 @@ export const getSettings = () => {
.addSettingsInput({
id: nanoid(),
parentId: styleRouterId,
propertyName: 'disabledStyleOnReadonly',
label: 'Disable Style On Readonly',
propertyName: 'enableStyleOnReadonly',
label: 'Style Readonly',
tooltip: 'Removes all visual styling except typography when the component becomes read-only',
inputType: 'switch',
jsSetting: true,
defaultValue: true,
jsSetting: true
})
.addCollapsiblePanel({
id: nanoid(),
Expand Down
Loading
Loading