test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 12:08:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

PopOver 改名

Browse Source
This commit is contained in:
2betop 2019-12-24 17:30:11 +08:00
parent 64a3a1873f
commit 635d0f5005
6 changed files with 53 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scss/components/_images.scss
View File

@ -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;

8
src/renderers/CRUD.tsx
View File

@ -1591,7 +1591,9 @@ export default class CRUD extends React.Component<CRUDProps, any> {
)
: null}
{keepItemSelectionOnPageChange && multiple ? this.renderSelection() : null}
{keepItemSelectionOnPageChange && multiple
? this.renderSelection()
: null}
{render(
'body',
@ -1630,8 +1632,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
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

9
src/renderers/Form/Image.tsx
View File

@ -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}
/>
<div

18
src/renderers/Image.tsx
View File

@ -11,6 +11,7 @@ export interface ImageProps {
imageClassName?: string;
description?: string;
thumbMode?: 'w-full' | 'h-full' | 'contain' | 'cover';
thumbRatio?: '1-1' | '4-3' | '16-9';
classnames: ClassNamesFn;
classPrefix: string;
onLoad?: React.EventHandler<any>;
@ -23,6 +24,7 @@ export class Image extends React.Component<ImageProps> {
className,
imageClassName,
thumbMode,
thumbRatio,
src,
alt,
title,
@ -35,7 +37,8 @@ export class Image extends React.Component<ImageProps> {
<div
className={cx(
'Image-thumb',
thumbMode ? `Image-thumb--${thumbMode}` : ''
thumbMode ? `Image-thumb--${thumbMode}` : '',
thumbRatio ? `Image-thumb--${thumbRatio}` : ''
)}
>
<img
@ -66,13 +69,18 @@ export interface ImageFieldProps extends RendererProps {
placeholder?: string;
description?: string;
thumbMode: 'w-full' | 'h-full' | 'contain' | 'cover';
thumbRatio: '1-1' | '4-3' | '16-9';
}
export class ImageField extends React.Component<ImageFieldProps, object> {
static defaultProps: Pick<ImageFieldProps, 'defaultImage' | 'thumbMode'> = {
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<ImageFieldProps, object> {
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<ImageFieldProps, object> {
title={filter(title, data)}
description={filter(description, data)}
thumbMode={thumbMode}
thumbRatio={thumbRatio}
/>
</div>
);

15
src/renderers/Images.tsx
View File

@ -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<ImagesProps> {
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<ImagesProps> {
className,
defaultImage,
thumbMode,
thumbRatio,
data,
name,
value,
@ -70,6 +79,7 @@ export class ImagesField extends React.Component<ImagesProps> {
title={item && item.title}
description={item && item.description}
thumbMode={thumbMode}
thumbRatio={thumbRatio}
/>
))}
</div>
@ -78,6 +88,7 @@ export class ImagesField extends React.Component<ImagesProps> {
className={cx('Images-item')}
src={defaultImage}
thumbMode={thumbMode}
thumbRatio={thumbRatio}
/>
) : (
placeholder

12
src/renderers/PopOver.tsx
View File

@ -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<PopOverConfig> = {}) => (
}
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<PopOverConfig> = {}) => (
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)
);
}