Skip to content

Thulasizwe/fix/4098 #4180

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
IvanIlyichev merged 19 commits into from
Nov 13, 2025
Merged

Thulasizwe/fix/4098 #4180

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
f95fa5c
fix: clean up storedFilesRendererBase component and styles
czwe-01 Nov 4, 2025
ecee50c
Merge branch 'main' into thulasizwe/fix/4098
czwe-01 Nov 6, 2025
e8d455f
Merge branch 'main' into thulasizwe/fix/4098
czwe-01 Nov 6, 2025
530866f
style: update sidebar and storedFilesRendererBase styles for improved…
czwe-01 Nov 6, 2025
40839ed
Merge branch 'main' into thulasizwe/fix/4098
czwe-01 Nov 6, 2025
94462ad
Merge remote-tracking branch 'origin' into thulasizwe/fix/4098
czwe-01 Nov 7, 2025
9a39cea
refactor: restructure StoredFilesRendererBase component and update st…
czwe-01 Nov 7, 2025
1f92e8e
lint-fix
czwe-01 Nov 10, 2025
0fc1eb1
Merge remote-tracking branch 'origin' into thulasizwe/fix/4098
czwe-01 Nov 12, 2025
1c0abf0
rm unrelated style
czwe-01 Nov 12, 2025
3452ad7
Update storedFilesRendererBase styles for text alignment and layout
czwe-01 Nov 12, 2025
3cfdab1
Fix formatting issue by adding missing comma for downloadZip prop in …
czwe-01 Nov 12, 2025
c9199d8
Refactor styles in StoredFilesRendererBase component to use consisten…
czwe-01 Nov 12, 2025
10b9dad
Update styles in StoredFilesRendererBase component to improve layout …
czwe-01 Nov 12, 2025
c174372
default font-size
czwe-01 Nov 12, 2025
22342cf
Merge branch 'main' into thulasizwe/fix/4098
czwe-01 Nov 13, 2025
a68db42
Refactor styles in StoredFilesRendererBase component to utilize compu…
czwe-01 Nov 13, 2025
9f9bfb7
Update styles in StoredFilesRendererBase component to dynamically adj…
czwe-01 Nov 13, 2025
9defe95
Update gap property in StoredFilesRendererBase styles to use !important
czwe-01 Nov 13, 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
42 changes: 20 additions & 22 deletions shesha-reactjs/src/components/customFile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,28 +45,26 @@ export const CustomFile: FC<ICustomFileProps> = (props) => {
const { backendUrl } = useSheshaApplication();

return (
<div className="stored-files-renderer-wrapper">
<StoredFilesRendererBase
{...props}
isStub={props.isStub}
disabled={props.disabled || !props.allowAdd}
isDragger={props?.isDragger}
fileList={fileList?.map(({ url, ...rest }) => ({ url: `${backendUrl}${url}`, ...rest }))}
allowUpload={false}
allowDelete={props.allowDelete}
deleteFile={deleteFile}
uploadFile={props.uploadFile ?? uploadFile}
downloadZipFile={downloadZipFile}
downloadZip={props.downloadZip}
downloadFile={downloadFile}
isDownloadingFileListZip={downloadZip}
isDownloadZipSucceeded={downloadZipSuccess}
allowedFileTypes={props?.allowedFileTypes}
maxHeight={props?.maxHeight}
layout={props?.filesLayout}
listType={props?.listType}
/>
</div>
<StoredFilesRendererBase
{...props}
isStub={props.isStub}
disabled={props.disabled || !props.allowAdd}
isDragger={props?.isDragger}
fileList={fileList?.map(({ url, ...rest }) => ({ url: `${backendUrl}${url}`, ...rest }))}
allowUpload={false}
allowDelete={props.allowDelete}
deleteFile={deleteFile}
uploadFile={props.uploadFile ?? uploadFile}
downloadZipFile={downloadZipFile}
downloadZip={props.downloadZip}
downloadFile={downloadFile}
isDownloadingFileListZip={downloadZip}
isDownloadZipSucceeded={downloadZipSuccess}
allowedFileTypes={props?.allowedFileTypes}
maxHeight={props?.maxHeight}
layout={props?.filesLayout}
listType={props?.listType}
/>
);
};

Expand Down
129 changes: 64 additions & 65 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 @@ -122,6 +122,7 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
hideFileName: rest.hideFileName && listType === 'thumbnail',
isDragger,
isStub,
downloadZip,
},
});

Expand Down Expand Up @@ -284,71 +285,69 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
};

return (
<div className={`${styles.shaStoredFilesRenderer} ${layout === 'horizontal' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererHorizontal
: layout === 'vertical' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererVertical
: layout === 'grid' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererGrid : ''}`}
>
{isStub
? (isDragger
? <Dragger disabled><DraggerStub styles={styles} /></Dragger>
: (
<div
className={listType === 'thumbnail' ? 'ant-upload-list-item-thumbnail ant-upload-list-item thumbnail-stub' : ''}
>
{renderUploadContent()}
{listType !== 'text' && !rest.hideFileName && (
<span className="ant-upload-list-item-name ant-upload-list-item-name-stub">
file name
</span>
)}
</div>
))
: (props.disabled && fileList.length === 0
? (
<div className={listType === 'thumbnail' ? styles.thumbnailReadOnly : ''}>
{renderUploadContent()}
</div>
)
: props.disabled
? <Upload {...props} style={model?.allStyles?.fullStyle} listType={listTypeAndLayout} />
: isDragger
? (
<Dragger {...props}>
<DraggerStub styles={styles} />
</Dragger>
)
: <Upload {...props} listType={listTypeAndLayout}>{renderUploadContent()}</Upload>)}
{previewImage && (
<Image
wrapperStyle={{ display: 'none' }}
preview={{
visible: previewOpen,
onVisibleChange: (visible) => setPreviewOpen(visible),
afterOpenChange: (visible) => !visible && setPreviewImage(null),
toolbarRender: (original) => {
return <div style={{ display: 'flex', flexDirection: 'row-reverse' }}><DownloadOutlined className={styles.antPreviewDownloadIcon} onClick={() => downloadFile({ fileId: previewImage.uid, fileName: previewImage.name })} />{original}</div>;
},
}}
src={previewImage.url}
/>
)}

{fetchFilesError && (
<Alert message="Error" description="Sorry, an error occurred while trying to fetch file list." type="error" />
)}

{downloadZipFileError && (
<Alert message="Error" description="Sorry, an error occurred while trying to download zip file." type="error" />
)}

{downloadZip && hasFiles && !!downloadZipFile && (
<div className={styles.storedFilesRendererBtnContainer}>
<Button size="small" type="link" icon onClick={() => downloadZipFile()} loading={isDownloadingFileListZip}>
{!isDownloadingFileListZip && <FileZipOutlined />} Download Zip
</Button>
</div>
)}

<div className={styles.storedFilesRendererWrapper}>
<div className={`${styles.shaStoredFilesRenderer} ${layout === 'horizontal' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererHorizontal
: layout === 'vertical' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererVertical
: layout === 'grid' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererGrid : ''}`}
>
{isStub
? (isDragger
? <Dragger disabled><DraggerStub styles={styles} /></Dragger>
: (
<div
className={listType === 'thumbnail' ? 'ant-upload-list-item-thumbnail ant-upload-list-item thumbnail-stub' : ''}
>
{renderUploadContent()}
{listType !== 'text' && !rest.hideFileName && (
<span className="ant-upload-list-item-name ant-upload-list-item-name-stub">
file name
</span>
)}
</div>
))
: (props.disabled && fileList.length === 0
? null
: props.disabled
? <Upload {...props} style={model?.allStyles?.fullStyle} listType={listTypeAndLayout} />
: isDragger
? (
<Dragger {...props}>
<DraggerStub styles={styles} />
</Dragger>
)
: <Upload {...props} listType={listTypeAndLayout}>{renderUploadContent()}</Upload>)}
{previewImage && (
<Image
wrapperStyle={{ display: 'none' }}
preview={{
visible: previewOpen,
onVisibleChange: (visible) => setPreviewOpen(visible),
afterOpenChange: (visible) => !visible && setPreviewImage(null),
toolbarRender: (original) => {
return <div style={{ display: 'flex', flexDirection: 'row-reverse' }}><DownloadOutlined className={styles.antPreviewDownloadIcon} onClick={() => downloadFile({ fileId: previewImage.uid, fileName: previewImage.name })} />{original}</div>;
},
}}
src={previewImage.url}
/>
)}

{fetchFilesError && (
<Alert message="Error" description="Sorry, an error occurred while trying to fetch file list." type="error" />
)}

{downloadZipFileError && (
<Alert message="Error" description="Sorry, an error occurred while trying to download zip file." type="error" />
)}

{downloadZip && hasFiles && !!downloadZipFile && (
<div className={styles.storedFilesRendererBtnContainer}>
<Button size="small" type="link" icon onClick={() => downloadZipFile()} loading={isDownloadingFileListZip}>
{!isDownloadingFileListZip && <FileZipOutlined />} Download Zip
</Button>
</div>
)}

</div>
</div>
);
};
Expand Down
56 changes: 33 additions & 23 deletions shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,17 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
].join(' ');

const antUploadDragIcon = `${prefixCls}-upload-drag-icon`;
const storedFilesRendererWrapper = cx("stored-files-renderer-wrapper", css`
margin-top: ${marginTop};
margin-left: ${marginLeft};
margin-right: ${marginRight};
margin-bottom: ${marginBottom};
padding-top: ${paddingTop ?? '2px'};
padding-left: ${paddingLeft ?? '2px'};
padding-right: ${paddingRight ?? '2px'};
padding-bottom: ${paddingBottom ?? '2px'};
`);

const shaStoredFilesRenderer = cx("sha-stored-files-renderer", css`
--thumbnail-width: ${layout ? (width ?? '54px') : '100%'};
--thumbnail-height: ${layout ? (height ?? '54px') : '100%'};
Expand All @@ -45,28 +56,12 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
--ant-button-font-weight: ${fontWeight ?? '400'} !important;
--ant-font-family: ${fontFamily ?? 'Segoe UI'} !important;
--ant-button-font-weight: ${fontWeight ?? '400'} !important;
margin-top: ${marginTop};
margin-left: ${marginLeft};
margin-right: ${marginRight};
margin-bottom: ${marginBottom};
padding-top: ${paddingTop ?? '2px'};
padding-left: ${paddingLeft ?? '2px'};
padding-right: ${paddingRight ?? '2px'};
padding-bottom: ${paddingBottom ?? '2px'};
${restContainerStyles}
width: var(--container-width) !important;
max-width: var(--container-max-width) !important;;
max-width: var(--container-max-width) !important;
min-width: var(--container-min-width) !important;
height: var(--container-height) !important;
max-height: var(--container-max-height) !important;
min-height: var(--container-min-height) !important;
overflow: auto;
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 8px;
background-color: transparent;
}


.ant-upload:not(.ant-upload-disabled) {
.icon {
Expand All @@ -77,9 +72,11 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
.ant-upload-list-item {
--ant-line-width: 0px !important;
--ant-padding-xs: 0px !important;
--ant-margin-xs: 0px !important;
--font-size: ${fontSize ?? '14px'} !important;
--ant-font-size: ${fontSize ?? '14px'} !important;
display: flex;
flex: 1;
width: ${layout ? (width ?? '54px') + ' !important' : ''};
height: ${layout ? (height ?? '54px') + ' !important' : ''};

Expand All @@ -93,6 +90,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
}

.ant-upload-list-item-thumbnail {
${rest}
background: ${background ?? backgroundImage ?? (backgroundColor ?? 'transparent')} !important;
border: ${borderWidth} ${borderStyle} ${borderColor};
border-top: ${borderTopWidth ?? borderWidth} ${borderTopStyle ?? borderStyle} ${borderTopColor ?? borderColor};
Expand All @@ -101,7 +99,9 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
border-bottom: ${borderBottomWidth ?? borderWidth} ${borderBottomStyle ?? borderStyle} ${borderBottomColor ?? borderColor};
box-shadow: ${boxShadow};
border-radius: ${borderRadius ?? '8px'} !important;
${rest}
background-position: ${backgroundPosition} !important;
background-repeat: ${backgroundRepeat} !important;
background-size: ${backgroundSize} !important;

img {
width: var(--thumbnail-width, 54px) !important;
Expand All @@ -123,7 +123,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
font-family: ${fontFamily ?? 'Segoe UI'};
font-size: ${fontSize ?? '14px'};
font-weight: ${fontWeight ?? '400'};
text-align: ${textAlign ?? 'center'};
text-align: ${textAlign ?? 'center'} !important;
padding: 0 8px !important;
width: ${(layout && width) ?? '54px'} !important;
font-size: var(--font-size, 14px) !important;
Expand All @@ -142,13 +142,18 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
border-color: ${token.colorPrimary} !important;
}

.ant-upload-drag {
height: max-content !important;
}

.${prefixCls}-upload {
${(layout && !isDragger) && 'width: var(--thumbnail-width) !important;'};
${(layout && !isDragger) && 'height: var(--thumbnail-height) !important'};
${rest}
align-items: center;

&.${prefixCls}-upload-btn {
padding: 8px 0px;
.${prefixCls}-upload-drag-icon {
margin: unset;
}
Expand Down Expand Up @@ -196,7 +201,9 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
}

.ant-upload-list-item-container {
display: inline-block !important;
display: flex !important;
flex-direction: row;
width: 100%;
&.ant-upload-animate-inline-appear,
&.ant-upload-animate-inline-appear-active,
&.ant-upload-animate-inline {
Expand All @@ -206,6 +213,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
}
width: ${layout ? (width ?? '54px') + ' !important' : ''};
height: ${layout ? (height ?? '54px') + ' !important' : ''};
justify-content: ${textAlign === 'left' ? 'flex-start' : textAlign === 'right' ? 'flex-end' : (textAlign ?? 'center')};
}

.ant-upload-list-item-action {
Expand All @@ -226,7 +234,6 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m

.ant-upload-list-item-name-stub {
position: absolute;
bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Expand Down Expand Up @@ -288,12 +295,12 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
min-height: var(--container-min-height) !important;
.${prefixCls}-upload-list {
display: flex !important;
flex-direction: column-reverse !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
padding: 2px ${borderWidth ?? '2px'} !important;
height: var(--container-height) !important;
width: 100% !important;
max-height: calc(var(--container-max-height) - 32px) !important;
max-height: calc(var(--container-max-height) - ${model.downloadZip ? "32px" : "0px"}) !important;
min-height: calc(var(--container-min-height) - 32px) !important;
}

Expand Down Expand Up @@ -336,6 +343,8 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
width: 100% !important;
height: 100% !important;
border-radius: ${borderRadius ?? '8px'} !important;
margin-top: 0px !important;
margin-bottom: 8px !important;
}
}

Expand Down Expand Up @@ -373,5 +382,6 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
antUploadDragIcon,
antPreviewDownloadIcon,
thumbnailReadOnly,
storedFilesRendererWrapper,
};
});