Thulasizwe/en/file list

shesha-reactjs/src/components/editableTagGroup/index.tsx

@@ -143,7 +143,7 @@ export const EditableTagGroup: FC<IEditableTagGroupProps> = ({ value = [], onCha
 
       <Show when={!inputVisible && !readOnly}>
         <Tag onClick={showInput} className="site-tag-plus">
-          <PlusOutlined /> New value
+          <PlusOutlined /> New Value
         </Tag>
       </Show>
     </>

shesha-reactjs/src/components/storedFilesRendererBase/index.tsx

@@ -143,11 +143,10 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
     fetchStyles();
   }, [background, backendUrl, httpHeaders, jsStyle]);
 
-  const styling = JSON.parse(model.stylingBox || '{}');
+  const styling = JSON.parse(model.container?.stylingBox || '{}');
   const stylingBoxAsCSS = pickStyleFromModel(styling);
 
   const additionalStyles: CSSProperties = removeUndefinedProps({
-    ...stylingBoxAsCSS,
     ...dimensionsStyles,
     ...borderStyles,
     ...fontStyles,
@@ -159,8 +158,8 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
   const finalStyle = removeUndefinedProps(additionalStyles);
 
   const { styles } = useStyles({
-    containerStyles: { ...{ ...containerDimensions, width: layout === 'vertical' ? '' : addPx(containerDimensions.width), height: layout === 'horizontal' ? '' : addPx(containerDimensions.height) }, ...containerJsStyle },
-    style: finalStyle, model: { gap, layout: listType === 'thumbnail' && !isDragger, hideFileName: rest.hideFileName && listType === 'thumbnail', isDragger },
+    containerStyles: { ...{ ...containerDimensions, width: layout === 'vertical' ? '' : addPx(containerDimensions.width), height: layout === 'horizontal' ? '' : addPx(containerDimensions.height) }, ...containerJsStyle, ...stylingBoxAsCSS },
+    style: finalStyle, model: { gap: addPx(gap), layout: listType === 'thumbnail' && !isDragger, hideFileName: rest.hideFileName && listType === 'thumbnail', isDragger, isStub },
     primaryColor
   });
 
@@ -212,7 +211,6 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
     setPreviewOpen(true);
   };
 
-
   const iconRender = (file) => {
     const { type, uid } = file;
 
@@ -304,19 +302,25 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
         theme={{
           components: {
             Upload: {
-              actionsColor: '#1890ff',
+              actionsColor: primaryColor,
             },
           },
         }}
       >
         {isStub
           ? (isDragger
             ? <Dragger disabled><DraggerStub /></Dragger>
-            : <div>{renderUploadContent()}</div>)
+            : <div
+              className={listType !== 'text' ? 'ant-upload-list-item-thumbnail ant-upload-list-item thumbnail-stub' : ''}>
+              {renderUploadContent()}
+              {listType !== 'text' && !rest.hideFileName && <span className='ant-upload-list-item-name' style={{ position: 'absolute', bottom: '0' }}>{'name'}</span>}
+            </div>)
           : (props.disabled
             ? <Upload {...props} style={finalStyle} listType={listTypeAndLayout} />
-            : isDragger
-              ? <Dragger {...props}><DraggerStub /></Dragger>
+            : isDragger ?
+              <Dragger {...props}>
+                <DraggerStub />
+              </Dragger>
               : <Upload {...props} listType={listTypeAndLayout}>{!disabled ? renderUploadContent() : null}</Upload>)
         }
       </ConfigProvider>