| 1 | import React, { useEffect, useMemo } from 'react';
|
| 2 | import classNames from 'classnames';
|
| 3 | import Image from '../image';
|
| 4 | import SpinLoading from '../spin-loading';
|
| 5 | import { useConfig } from '../config-provider';
|
| 6 | const classPrefix = `adm-image-uploader`;
|
| 7 | const PreviewItem = props => {
|
| 8 | const {
|
| 9 | locale
|
| 10 | } = useConfig();
|
| 11 | const {
|
| 12 | url,
|
| 13 | file,
|
| 14 | deletable,
|
| 15 | deleteIcon,
|
| 16 | onDelete,
|
| 17 | imageFit
|
| 18 | } = props;
|
| 19 | const src = useMemo(() => {
|
| 20 | if (url) {
|
| 21 | return url;
|
| 22 | }
|
| 23 | if (file) {
|
| 24 | return URL.createObjectURL(file);
|
| 25 | }
|
| 26 | return '';
|
| 27 | }, [url, file]);
|
| 28 | useEffect(() => {
|
| 29 | return () => {
|
| 30 | if (file) URL.revokeObjectURL(src);
|
| 31 | };
|
| 32 | }, [src, file]);
|
| 33 | function renderLoading() {
|
| 34 | return props.status === 'pending' && React.createElement("div", {
|
| 35 | className: `${classPrefix}-cell-mask`
|
| 36 | }, React.createElement("span", {
|
| 37 | className: `${classPrefix}-cell-loading`
|
| 38 | }, React.createElement(SpinLoading, {
|
| 39 | color: 'white'
|
| 40 | }), React.createElement("span", {
|
| 41 | className: `${classPrefix}-cell-mask-message`
|
| 42 | }, locale.ImageUploader.uploading)));
|
| 43 | }
|
| 44 | function renderDelete() {
|
| 45 | return deletable && React.createElement("span", {
|
| 46 | className: `${classPrefix}-cell-delete`,
|
| 47 | onClick: onDelete
|
| 48 | }, deleteIcon);
|
| 49 | }
|
| 50 | return React.createElement("div", {
|
| 51 | className: classNames(`${classPrefix}-cell`, props.status === 'fail' && `${classPrefix}-cell-fail`)
|
| 52 | }, React.createElement(Image, {
|
| 53 | className: `${classPrefix}-cell-image`,
|
| 54 | src: src,
|
| 55 | fit: imageFit,
|
| 56 | onClick: props.onClick
|
| 57 | }), renderLoading(), renderDelete());
|
| 58 | };
|
| 59 | export default PreviewItem; |
| \ | No newline at end of file |