Skip to content
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.

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

Feature/height siteeditor #96

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

### Fixed

- fix Height on images

## [0.22.3] - 2024-09-04

### Removed
Expand Down
4 changes: 2 additions & 2 deletions messages/context.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
"admin/editor.image-list.description": "Show a list of images",
"admin/editor.image-list.height.title": "Maximum height for each image (px)",
"admin/editor.image-list.images.description.title": "Image alt text",
"admin/editor.image-list.images.height.description": "Image height for a single image (px)",
"admin/editor.image-list.images.height.title": "Image height",
"admin/editor.image-list.images.image.title": "Image",
"admin/editor.image-list.images.link.noFollow.title": "Should be a nofollow link",
"admin/editor.image-list.images.link.openNewTab.title": "Should open on new tab",
Expand All @@ -13,6 +11,8 @@
"admin/editor.image-list.images.title.title": "Image title",
"admin/editor.image-list.images.title": "Images",
"admin/editor.image-list.images.width.description": "Image width for a single image (% or px)",
"admin/editor.image-list.images.height.title": "Image height",
"admin/editor.image-list.images.height.description": "Image height for a single image (px)",
"admin/editor.image-list.images.width.title": "Image width",
"admin/editor.image-list.title": "Image List",
"admin/editor.image-slider.description": "Image Slider",
Expand Down
4 changes: 2 additions & 2 deletions messages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
"admin/editor.image-list.description": "Show a list of images",
"admin/editor.image-list.height.title": "Maximum height for each image (px)",
"admin/editor.image-list.images.description.title": "Image alt text",
"admin/editor.image-list.images.height.description": "Image height for a single image (px)",
"admin/editor.image-list.images.height.title": "Image height",
"admin/editor.image-list.images.image.title": "Image",
"admin/editor.image-list.images.link.noFollow.title": "Nofollow link",
"admin/editor.image-list.images.link.openNewTab.title": "Open in new tab",
Expand All @@ -13,6 +11,8 @@
"admin/editor.image-list.images.title.title": "Image title",
"admin/editor.image-list.images.title": "Images",
"admin/editor.image-list.images.width.description": "Image width for a single image (% or px)",
"admin/editor.image-list.images.height.title": "Image height",
"admin/editor.image-list.images.height.description": "Image height for a single image (px)",
"admin/editor.image-list.images.width.title": "Image width",
"admin/editor.image-list.title": "Image List",
"admin/editor.image-slider.description": "Image slider",
Expand Down
18 changes: 10 additions & 8 deletions react/Image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ export interface ImageProps
classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
preload?: boolean
loading?: 'eager' | 'lazy'
fetchpriority?: 'high' | 'low' | 'auto'
fetchpriority?: 'high' | 'low' | 'auto'
width?: string | number
height?: string | number
/**
* Warning: This property is for internal usage, please avoid using it.
* This property is used when the Image is children of the SliderTrack component and it prevents triggering the promoView event twice for cloned images.
Expand Down Expand Up @@ -118,18 +120,17 @@ function Image(props: ImageProps) {
maxWidth,
maxHeight,
width,
height,
}

const placeholderSize = height ?? minHeight ?? maxHeight ?? 'auto'

const widthWithoutUnits = width ? width.toString().replace(/\D/g, '') : null
const widthWithoutUnits = width ? (width.toString().includes('%') ? width : width.toString().replace(/\D/g, '')) : null
const heightWithoutUnits = height
? height.toString().replace(/\D/g, '')
: null

const explicitDimensionsAreAvailable =
!width?.toString().includes('%') &&
width?.toString() &&
!height?.toString().includes('%') &&
(widthWithoutUnits || heightWithoutUnits)

Expand All @@ -143,17 +144,18 @@ function Image(props: ImageProps) {
srcSet={srcSet}
src={typeof formattedSrc === 'string' ? formattedSrc : ''}
alt={typeof formattedAlt === 'string' ? formattedAlt : ''}
style={imageDimensions}
ref={imageRef}
className={handles.imageElement}
loading={loading}
fetchpriority={fetchpriority}
{...(experimentalSetExplicitDimensions && explicitDimensionsAreAvailable
? {
width: widthWithoutUnits ?? undefined,
height: heightWithoutUnits ?? undefined,
width: widthWithoutUnits || imageDimensions.width || undefined,
height: heightWithoutUnits || height || undefined,
}
: {})}
: {
style: imageDimensions
})}
{...(preload
? {
'data-vtex-preload': 'true',
Expand Down
4 changes: 2 additions & 2 deletions react/ImageList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ import type { ImagesSchema } from './ImageTypes'

export interface ImageListProps {
images: ImagesSchema
height?: number
height?: string
preload?: boolean
experimentalPreventLayoutShift?: boolean
experimentalSetExplicitDimensions?: boolean
}

function ImageList({
images,
height = 420,
height = "auto",
children,
preload,
experimentalPreventLayoutShift,
Expand Down
1 change: 1 addition & 0 deletions react/ImageTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export type ImagesSchema = Array<{
experimentalSetExplicitDimensions?: boolean
loading?: 'eager' | 'lazy'
width?: number | string
height?: number | string
analyticsProperties?: 'none' | 'provide'
promotionId?: string
promotionName?: string
Expand Down
3 changes: 3 additions & 0 deletions react/modules/imageAsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const getImagesAsJSXList = (
experimentalPreventLayoutShift?: boolean,
experimentalSetExplicitDimensions?: boolean
) => {

return images.map(
(
{
Expand All @@ -20,6 +21,7 @@ export const getImagesAsJSXList = (
experimentalPreventLayoutShift: experimentalPreventLayoutShiftChild,
experimentalSetExplicitDimensions: experimentalSetExplicitDimensionsChild,
width = '100%',
height: _height,
...props
},
idx
Expand All @@ -30,6 +32,7 @@ export const getImagesAsJSXList = (
alt={description}
maxHeight={height}
width={width}
height={_height ?? height}
experimentalPreventLayoutShift={
experimentalPreventLayoutShift ?? experimentalPreventLayoutShiftChild
}
Expand Down
2 changes: 1 addition & 1 deletion react/modules/schema.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export const IMAGE_LIST_SCHEMA = {
default: 420,
isLayout: false,
title: IMAGE_LIST_MESSAGES.heightTitle.id,
type: 'number',
type: 'string',
},
},
}
6 changes: 6 additions & 0 deletions store/contentSchemas.json
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,12 @@
"$ref": "app:vtex.native-types#/definitions/text",
"default": "100%"
},
"height": {
"title": "admin/editor.image-list.images.height.title",
"description": "admin/editor.image-list.images.height.description",
"$ref": "app:vtex.native-types#/definitions/text",
"default": ""
},
"loading": {
"title": "admin/editor.store-image.loading.title",
"enum": ["eager", "lazy"],
Expand Down
Loading