From 3a4f602f028d005517276d6acc7f8244dddb7db6 Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Tue, 24 Dec 2019 17:30:11 +0800 Subject: [PATCH] =?UTF-8?q?PopOver=20=E6=94=B9=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/components/_images.scss | 8 ++++++++ src/renderers/CRUD.tsx | 8 +++++--- src/renderers/Form/Image.tsx | 9 +++++++-- src/renderers/Image.tsx | 18 ++++++++++++++---- src/renderers/Images.tsx | 15 +++++++++++++-- src/renderers/PopOver.tsx | 12 ++++++------ 6 files changed, 53 insertions(+), 17 deletions(-) diff --git a/scss/components/_images.scss b/scss/components/_images.scss index 5d29388f..9ea78378 100644 --- a/scss/components/_images.scss +++ b/scss/components/_images.scss @@ -31,6 +31,14 @@ } } + &-thumb--4-3 { + height: px2rem(108px * 3 / 4); + } + + &-thumb--16-9 { + height: px2rem(108px * 9 / 16); + } + &-thumb--w-full > img { width: 100%; height: auto; diff --git a/src/renderers/CRUD.tsx b/src/renderers/CRUD.tsx index a10ca1b2..3e8cb478 100644 --- a/src/renderers/CRUD.tsx +++ b/src/renderers/CRUD.tsx @@ -1591,7 +1591,9 @@ export default class CRUD extends React.Component { ) : null} - {keepItemSelectionOnPageChange && multiple ? this.renderSelection() : null} + {keepItemSelectionOnPageChange && multiple + ? this.renderSelection() + : null} {render( 'body', @@ -1630,8 +1632,8 @@ export default class CRUD extends React.Component { onSaveOrder: this.handleSaveOrder, onQuery: this.handlQuery, onSelect: this.handleSelect, - onPopOverOpen: this.handleChildPopOverOpen, - onPopOverClose: this.handleChildPopOverClose, + onPopOverOpened: this.handleChildPopOverOpen, + onPopOverClosed: this.handleChildPopOverClose, headerToolbarRender: this.renderHeaderToolbar, footerToolbarRender: this.renderFooterToolbar, data: store.mergedData diff --git a/src/renderers/Form/Image.tsx b/src/renderers/Form/Image.tsx index c4bd166a..56a024ea 100644 --- a/src/renderers/Form/Image.tsx +++ b/src/renderers/Form/Image.tsx @@ -45,6 +45,8 @@ export interface ImageProps extends FormControlProps { delimiter?: string; autoUpload?: boolean; multiple?: boolean; + thumbMode?: 'w-full' | 'h-full' | 'contain' | 'cover'; + thumbRatio?: '1-1' | '4-3' | '16-9'; } export interface ImageState { @@ -846,7 +848,9 @@ export default class ImageControl extends React.Component< accept, maxLength, autoUpload, - hideUploadButton + hideUploadButton, + thumbMode, + thumbRatio } = this.props; const {files, error, crop, uploading, cropFile} = this.state; @@ -1000,7 +1004,8 @@ export default class ImageControl extends React.Component< )} src={file.preview || file.url} alt={file.name} - thumbMode="contain" + thumbMode={thumbMode} + thumbRatio={thumbRatio} />
; @@ -23,6 +24,7 @@ export class Image extends React.Component { className, imageClassName, thumbMode, + thumbRatio, src, alt, title, @@ -35,7 +37,8 @@ export class Image extends React.Component {
{ - static defaultProps: Pick = { + static defaultProps: Pick< + ImageFieldProps, + 'defaultImage' | 'thumbMode' | 'thumbRatio' + > = { defaultImage: 'https://fex.bdstatic.com/n/static/amis/renderers/crud/field/placeholder_cfad9b1.png', - thumbMode: 'contain' + thumbMode: 'contain', + thumbRatio: '1-1' }; render() { @@ -85,7 +93,8 @@ export class ImageField extends React.Component { imageClassName, classnames: cx, src, - thumbMode + thumbMode, + thumbRatio } = this.props; const finnalSrc = src ? filter(src, data, '| raw') : ''; @@ -99,6 +108,7 @@ export class ImageField extends React.Component { title={filter(title, data)} description={filter(description, data)} thumbMode={thumbMode} + thumbRatio={thumbRatio} />
); diff --git a/src/renderers/Images.tsx b/src/renderers/Images.tsx index c5107a01..3dce0f61 100644 --- a/src/renderers/Images.tsx +++ b/src/renderers/Images.tsx @@ -10,6 +10,8 @@ export interface ImagesProps extends RendererProps { placeholder: string; delimiter: string; thumbMode: 'w-full' | 'h-full' | 'contain' | 'cover'; + thumbRatio: '1-1' | '4-3' | '16-9'; + name?: string; value?: any; source?: string; @@ -18,14 +20,20 @@ export interface ImagesProps extends RendererProps { export class ImagesField extends React.Component { static defaultProps: Pick< ImagesProps, - 'className' | 'delimiter' | 'defaultImage' | 'placehoder' | 'thumbMode' + | 'className' + | 'delimiter' + | 'defaultImage' + | 'placehoder' + | 'thumbMode' + | 'thumbRatio' > = { className: '', delimiter: ',', defaultImage: 'https://fex.bdstatic.com/n/static/amis/renderers/crud/field/placeholder_cfad9b1.png', placehoder: '-', - thumbMode: 'contain' + thumbMode: 'contain', + thumbRatio: '1-1' }; render() { @@ -33,6 +41,7 @@ export class ImagesField extends React.Component { className, defaultImage, thumbMode, + thumbRatio, data, name, value, @@ -70,6 +79,7 @@ export class ImagesField extends React.Component { title={item && item.title} description={item && item.description} thumbMode={thumbMode} + thumbRatio={thumbRatio} /> ))}
@@ -78,6 +88,7 @@ export class ImagesField extends React.Component { className={cx('Images-item')} src={defaultImage} thumbMode={thumbMode} + thumbRatio={thumbRatio} /> ) : ( placeholder diff --git a/src/renderers/PopOver.tsx b/src/renderers/PopOver.tsx index 5655565d..a4df5ce3 100644 --- a/src/renderers/PopOver.tsx +++ b/src/renderers/PopOver.tsx @@ -38,8 +38,8 @@ export interface PopOverProps extends RendererProps { name?: string; label?: string; popOver: boolean | PopOverConfig; - onPopOverOpen: (popover: any) => void; - onPopOverClose: (popover: any) => void; + onPopOverOpened: (popover: any) => void; + onPopOverClosed: (popover: any) => void; } export interface PopOverState { @@ -69,12 +69,12 @@ export const HocPopOver = (config: Partial = {}) => ( } openPopOver() { - const onPopOverOpen = this.props.onPopOverOpen; + const onPopOverOpened = this.props.onPopOverOpened; this.setState( { isOpened: true }, - () => onPopOverOpen && onPopOverOpen(this.props.popOver) + () => onPopOverOpened && onPopOverOpened(this.props.popOver) ); } @@ -83,12 +83,12 @@ export const HocPopOver = (config: Partial = {}) => ( return; } - const onPopOverClose = this.props.onPopOverClose; + const onPopOverClosed = this.props.onPopOverClosed; this.setState( { isOpened: false }, - () => onPopOverClose && onPopOverClose(this.props.popOver) + () => onPopOverClosed && onPopOverClosed(this.props.popOver) ); }