feffery_antd_components 0.3.15 → 0.4.0-rc5

package/src/lib/fragments/dataEntry/AntdTreeSelect.react.js

@@ -6,7 +6,7 @@ import { TreeSelect, ConfigProvider } from 'antd';
 import { str2Locale } from '../../components/locales.react';
 import { isUndefined, isString, cloneDeep } from 'lodash';
 import { pickBy } from 'ramda';
-import { flatToTree } from '../../components/utils';
+import { flatToTree, useLoading } from '../../components/utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 // 上下文
@@ -63,6 +63,7 @@ const AntdTreeSelect = (props) => {
         popupClassName,
         key,
         name,
+        enableBatchControl,
         locale,
         treeData,
         treeNodeKeyToTitle,
@@ -106,8 +107,8 @@ const AntdTreeSelect = (props) => {
         persistence,
         persisted_props,
         persistence_type,
-        loading_state,
-        batchPropsNames
+        batchPropsNames,
+        ...others
     } = props;
 
     // 异步数据加载标识
@@ -148,7 +149,7 @@ const AntdTreeSelect = (props) => {
     useEffect(() => {
         return () => {
             // 若上文中存在有效表单id
-            if (formId && (name || id)) {
+            if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
                 deleteItemValue(formId, name || id)
             }
@@ -172,14 +173,14 @@ const AntdTreeSelect = (props) => {
     const updateSelectedValue = (e) => {
         if (treeCheckStrictly) {
             // AntdForm表单批量控制
-            if (formId && (name || id)) {
+            if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
                 updateItemValue(formId, name || id, e.map(item => item.value))
             }
             setProps({ value: e.map(item => item.value) })
         } else {
             // AntdForm表单批量控制
-            if (formId && (name || id)) {
+            if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
                 updateItemValue(formId, name || id, e)
             }
@@ -191,7 +192,7 @@ const AntdTreeSelect = (props) => {
         <ConfigProvider locale={str2Locale.get(locale)}>
             <TreeSelect
                 // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
                 id={id}
                 className={
                     isString(className) ?
@@ -226,12 +227,12 @@ const AntdTreeSelect = (props) => {
                 listHeight={listHeight}
                 placeholder={placeholder}
                 defaultValue={
-                    formId && (name || id) ?
+                    formId && (name || id) && enableBatchControl ?
                         undefined :
                         defaultValue
                 }
                 value={
-                    formId && (name || id) ?
+                    formId && (name || id) && enableBatchControl ?
                         currentFormValue :
                         value
                 }
@@ -310,9 +311,7 @@ const AntdTreeSelect = (props) => {
                 persistence={persistence}
                 persisted_props={persisted_props}
                 persistence_type={persistence_type}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
+                data-dash-is-loading={useLoading()}
                 getPopupContainer={
                     popupContainer === 'parent' ?
                         (triggerNode) => triggerNode.parentNode :

package/src/lib/fragments/dataEntry/check-card/AntdCheckCard.react.js

@@ -5,6 +5,7 @@ import { CheckCard } from '@ant-design/pro-components';
 // 辅助库
 import { isUndefined, isString } from 'lodash';
 import { pickBy } from 'ramda';
+import { useLoading } from '../../../components/utils';
 // 自定义hooks
 import useCss from '../../../hooks/useCss';
 // 上下文
@@ -26,6 +27,7 @@ const AntdCheckCard = (props) => {
         style,
         key,
         name,
+        enableBatchControl,
         checked,
         bordered,
         value,
@@ -34,10 +36,10 @@ const AntdCheckCard = (props) => {
         size,
         readOnly,
         setProps,
-        loading_state,
         persistence,
         persisted_props,
-        persistence_type
+        persistence_type,
+        ...others
     } = props;
 
     const context = useContext(PropsContext)
@@ -49,7 +51,7 @@ const AntdCheckCard = (props) => {
     // 处理AntdForm表单值搜集功能
     useEffect(() => {
         // 若上文中存在有效表单id
-        if (formId && (name || id)) {
+        if (formId && (name || id) && enableBatchControl) {
             // 表单值更新
             updateItemValue(formId, name || id, checked)
         }
@@ -59,7 +61,7 @@ const AntdCheckCard = (props) => {
     useEffect(() => {
         return () => {
             // 若上文中存在有效表单id
-            if (formId && (name || id)) {
+            if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
                 deleteItemValue(formId, name || id)
             }
@@ -75,7 +77,7 @@ const AntdCheckCard = (props) => {
     return (
         <CheckCard
             // 提取具有data-*或aria-*通配格式的属性
-            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
             id={id}
             className={
                 isString(className) ?
@@ -103,9 +105,7 @@ const AntdCheckCard = (props) => {
             persistence={persistence}
             persisted_props={persisted_props}
             persistence_type={persistence_type}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            } />
+            data-dash-is-loading={useLoading()} />
     );
 }
 

package/src/lib/fragments/dataEntry/check-card/AntdCheckCardGroup.react.js

@@ -3,7 +3,7 @@ import React, { useEffect, useContext } from 'react';
 // antd核心
 import { CheckCard } from '@ant-design/pro-components';
 // 辅助库
-import { parseChildrenToArray } from '../../../components/utils';
+import { parseChildrenToArray, useLoading } from '../../../components/utils';
 import { isString, isUndefined } from 'lodash';
 import { pickBy } from 'ramda';
 // 自定义hooks
@@ -27,6 +27,7 @@ const AntdCheckCardGroup = (props) => {
         style,
         key,
         name,
+        enableBatchControl,
         multiple,
         allowNoValue,
         bordered,
@@ -36,10 +37,10 @@ const AntdCheckCardGroup = (props) => {
         size,
         readOnly,
         setProps,
-        loading_state,
         persistence,
         persisted_props,
-        persistence_type
+        persistence_type,
+        ...others
     } = props;
 
     const context = useContext(PropsContext)
@@ -51,7 +52,7 @@ const AntdCheckCardGroup = (props) => {
     // 处理AntdForm表单值搜集功能
     useEffect(() => {
         // 若上文中存在有效表单id
-        if (formId && (name || id)) {
+        if (formId && (name || id) && enableBatchControl) {
             // 表单值更新
             updateItemValue(formId, name || id, value)
         }
@@ -61,7 +62,7 @@ const AntdCheckCardGroup = (props) => {
     useEffect(() => {
         return () => {
             // 若上文中存在有效表单id
-            if (formId && (name || id)) {
+            if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
                 deleteItemValue(formId, name || id)
             }
@@ -79,7 +80,7 @@ const AntdCheckCardGroup = (props) => {
     return (
         <CheckCard.Group
             // 提取具有data-*或aria-*通配格式的属性
-            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
             id={id}
             className={
                 isString(className) ?
@@ -113,9 +114,7 @@ const AntdCheckCardGroup = (props) => {
             persistence={persistence}
             persisted_props={persisted_props}
             persistence_type={persistence_type}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            } >
+            data-dash-is-loading={useLoading()} >
             {children}
         </ CheckCard.Group>
     );

package/src/lib/fragments/dataEntry/form/AntdForm.react.js

@@ -6,6 +6,7 @@ import { Form } from 'antd';
 import { isString, isUndefined, isEmpty } from 'lodash';
 import { useUnmount } from 'ahooks';
 import { pickBy } from 'ramda';
+import { useLoading } from '../../../components/utils';
 // 自定义hooks
 import useCss from '../../../hooks/useCss';
 // 上下文
@@ -36,7 +37,7 @@ const AntdForm = (props) => {
         validateStatuses,
         helps,
         setProps,
-        loading_state
+        ...others
     } = props;
 
     // 订阅当前表单值搜集状态的变动
@@ -92,7 +93,7 @@ const AntdForm = (props) => {
         >
             <Form
                 // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
                 id={id}
                 className={
                     isString(className) ?
@@ -107,9 +108,7 @@ const AntdForm = (props) => {
                 labelAlign={labelAlign}
                 labelWrap={labelWrap}
                 layout={layout}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }>
+                data-dash-is-loading={useLoading()}>
                 {children}
             </Form>
         </FormContext.Provider >

package/src/lib/fragments/dataEntry/form/AntdFormItem.react.js

@@ -5,6 +5,7 @@ import { Form } from 'antd';
 // 辅助库
 import { isString } from 'lodash';
 import { pickBy } from 'ramda';
+import { useLoading } from '../../../components/utils';
 // 自定义hooks
 import useCss from '../../../hooks/useCss';
 // 上下文
@@ -40,7 +41,7 @@ const AntdFormItem = (props) => {
         hasFeedback,
         layout,
         setProps,
-        loading_state
+        ...others
     } = props;
 
     const formId = useContext(FormContext);
@@ -50,7 +51,7 @@ const AntdFormItem = (props) => {
     return (
         <Item
             // 提取具有data-*或aria-*通配格式的属性
-            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
             id={id}
             className={
                 isString(className) ?
@@ -72,9 +73,7 @@ const AntdFormItem = (props) => {
             required={required}
             validateStatus={validateStatus || (formId && _validateStatus)}
             layout={layout}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }>
+            data-dash-is-loading={useLoading()}>
             {children}
         </Item>
     );

package/src/lib/fragments/upload/AntdDraggerUpload.react.js

@@ -9,6 +9,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { pickBy } from 'ramda';
 import { pick } from 'ramda';
 import { str2Locale, locale2text } from '../../components/locales.react';
+import { useLoading } from '../../components/utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 // 上下文
@@ -57,6 +58,7 @@ const AntdDraggerUpload = (props) => {
         draggerStyle,
         key,
         name,
+        enableBatchControl,
         locale,
         apiUrl,
         apiUrlExtraParams,
@@ -86,10 +88,13 @@ const AntdDraggerUpload = (props) => {
         defaultFileList,
         disabled,
         status,
-        loading_state,
-        setProps
+        setProps,
+        ...others
     } = props;
 
+    const [messageApi, messageContextHolder] = message.useMessage();
+    const [modalApi, modalContextHolder] = Modal.useModal();
+
     const context = useContext(PropsContext)
     const formId = useContext(FormContext)
 
@@ -105,7 +110,7 @@ const AntdDraggerUpload = (props) => {
     // 针对上传类组件，特殊处理由表单值控制上传列表的清空
     useEffect(() => {
         // 若上文中存在有效表单id
-        if (formId && (name || id)) {
+        if (formId && (name || id) && enableBatchControl) {
             if (!currentFormValue || currentFormValue.length === 0) {
                 // 清空上传列表
                 updateFileList([])
@@ -121,7 +126,7 @@ const AntdDraggerUpload = (props) => {
     useEffect(() => {
         return () => {
             // 若上文中存在有效表单id
-            if (formId && (name || id)) {
+            if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
                 deleteItemValue(formId, name || id)
             }
@@ -169,12 +174,12 @@ const AntdDraggerUpload = (props) => {
         beforeUpload: (file) => {
             const sizeCheck = file.size / 1024 / 1024 < fileMaxSize;
             if (!sizeCheck) {
-                message.error(`${file.name}${locale2text.Upload[locale].sizeError[0]}${fileMaxSize}${locale2text.Upload[locale].sizeError[1]}`);
+                messageApi.error(`${file.name}${locale2text.Upload[locale].sizeError[0]}${fileMaxSize}${locale2text.Upload[locale].sizeError[1]}`);
             }
 
             if (fileTypes) {
                 if (fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) === -1) {
-                    message.error(`${locale2text.Upload[locale].typeError[0]}${file.name}${locale2text.Upload[locale].typeError[1]}`);
+                    messageApi.error(`${locale2text.Upload[locale].typeError[0]}${file.name}${locale2text.Upload[locale].typeError[1]}`);
                 }
 
                 return sizeCheck && fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) !== -1;
@@ -235,7 +240,7 @@ const AntdDraggerUpload = (props) => {
                     )
 
                     // AntdForm表单批量控制
-                    if (formId && (name || id)) {
+                    if (formId && (name || id) && enableBatchControl) {
                         // 表单值更新
                         updateItemValue(formId, name || id, _listUploadTaskRecord)
                     }
@@ -290,7 +295,7 @@ const AntdDraggerUpload = (props) => {
                                 )
 
                                 // AntdForm表单批量控制
-                                if (formId && (name || id)) {
+                                if (formId && (name || id) && enableBatchControl) {
                                     // 表单值更新
                                     updateItemValue(formId, name || id, _listUploadTaskRecord)
                                 }
@@ -375,7 +380,7 @@ const AntdDraggerUpload = (props) => {
                     )
 
                     // AntdForm表单批量控制
-                    if (formId && (name || id)) {
+                    if (formId && (name || id) && enableBatchControl) {
                         // 表单值更新
                         updateItemValue(formId, name || id, _listUploadTaskRecord)
                     }
@@ -422,7 +427,7 @@ const AntdDraggerUpload = (props) => {
                     )
 
                     // AntdForm表单批量控制
-                    if (formId && (name || id)) {
+                    if (formId && (name || id) && enableBatchControl) {
                         // 表单值更新
                         updateItemValue(formId, name || id, _listUploadTaskRecord)
                     }
@@ -456,9 +461,9 @@ const AntdDraggerUpload = (props) => {
             }
 
             if ((info.file.status === 'done' || info.file.status === 'success') && showSuccessMessage) {
-                message.success(`${info.file.name} ${locale2text.Upload[locale].uploadSuccess}`);
+                messageApi.success(`${info.file.name} ${locale2text.Upload[locale].uploadSuccess}`);
             } else if (info.file.status === 'error' && showErrorMessage) {
-                message.error(`${info.file.name} ${locale2text.Upload[locale].uploadFailed}`);
+                messageApi.error(`${info.file.name} ${locale2text.Upload[locale].uploadFailed}`);
             }
 
             // 获取当前上传文件列表
@@ -526,7 +531,6 @@ const AntdDraggerUpload = (props) => {
 
     // 添加accept参数
     if (fileTypes && fileTypes.length != 0) {
-
         Object.assign(uploadProps, { accept: '.' + fileTypes.join(',.') })
     }
 
@@ -534,7 +538,7 @@ const AntdDraggerUpload = (props) => {
         <ConfigProvider locale={str2Locale.get(locale)}>
             <div
                 // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
                 id={id}
                 className={
                     isString(className) ?
@@ -548,9 +552,9 @@ const AntdDraggerUpload = (props) => {
                     ...style
                 }}
                 key={key}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }>
+                data-dash-is-loading={useLoading()}>
+                {messageContextHolder}
+                {modalContextHolder}
                 <Dragger
                     draggerStyle={draggerStyle}
                     draggerClassName={
@@ -585,7 +589,7 @@ const AntdDraggerUpload = (props) => {
                         confirmBeforeDelete ?
                             () => {
                                 return new Promise((resolve, reject) => {
-                                    Modal.confirm({
+                                    modalApi.confirm({
                                         title: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteTitle,
                                         okText: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteOkText,
                                         cancelText: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteCancelText,

package/src/lib/fragments/upload/AntdPictureUpload.react.js

@@ -9,6 +9,7 @@ import { str2Locale, locale2text } from '../../components/locales.react';
 import { isUndefined, isString } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import { pickBy } from 'ramda';
+import { useLoading } from '../../components/utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 // 上下文
@@ -62,6 +63,7 @@ const AntdPictureUpload = (props) => {
         style,
         key,
         name,
+        enableBatchControl,
         locale,
         apiUrl,
         apiUrlExtraParams,
@@ -89,10 +91,13 @@ const AntdPictureUpload = (props) => {
         defaultFileList,
         disabled,
         status,
-        loading_state,
-        setProps
+        setProps,
+        ...others
     } = props;
 
+    const [messageApi, messageContextHolder] = message.useMessage();
+    const [modalApi, modalContextHolder] = Modal.useModal();
+
     const context = useContext(PropsContext)
     const formId = useContext(FormContext)
 
@@ -108,7 +113,7 @@ const AntdPictureUpload = (props) => {
     // 针对上传类组件，特殊处理由表单值控制上传列表的清空
     useEffect(() => {
         // 若上文中存在有效表单id
-        if (formId && (name || id)) {
+        if (formId && (name || id) && enableBatchControl) {
             if (!currentFormValue || currentFormValue.length === 0) {
                 // 清空上传列表
                 updateFileList([])
@@ -124,7 +129,7 @@ const AntdPictureUpload = (props) => {
     useEffect(() => {
         return () => {
             // 若上文中存在有效表单id
-            if (formId && (name || id)) {
+            if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
                 deleteItemValue(formId, name || id)
             }
@@ -195,12 +200,12 @@ const AntdPictureUpload = (props) => {
         beforeUpload: (file) => {
             const sizeCheck = file.size / 1024 / 1024 < fileMaxSize;
             if (!sizeCheck) {
-                message.error(`${file.name}${locale2text.Upload[locale].sizeError[0]}${fileMaxSize}${locale2text.Upload[locale].sizeError[1]}`);
+                messageApi.error(`${file.name}${locale2text.Upload[locale].sizeError[0]}${fileMaxSize}${locale2text.Upload[locale].sizeError[1]}`);
             }
 
             if (fileTypes) {
                 if (fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) === -1) {
-                    message.error(`${locale2text.Upload[locale].typeError[0]}${file.name}${locale2text.Upload[locale].typeError[1]}`);
+                    messageApi.error(`${locale2text.Upload[locale].typeError[0]}${file.name}${locale2text.Upload[locale].typeError[1]}`);
                 }
 
                 return sizeCheck && fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) !== -1;
@@ -252,7 +257,7 @@ const AntdPictureUpload = (props) => {
                 )
 
                 // AntdForm表单批量控制
-                if (formId && (name || id)) {
+                if (formId && (name || id) && enableBatchControl) {
                     // 表单值更新
                     updateItemValue(formId, name || id, _listUploadTaskRecord)
                 }
@@ -291,7 +296,7 @@ const AntdPictureUpload = (props) => {
                 )
 
                 // AntdForm表单批量控制
-                if (formId && (name || id)) {
+                if (formId && (name || id) && enableBatchControl) {
                     // 表单值更新
                     updateItemValue(formId, name || id, _listUploadTaskRecord)
                 }
@@ -324,9 +329,9 @@ const AntdPictureUpload = (props) => {
             }
 
             if ((info.file.status === 'done' || info.file.status === 'success') && showSuccessMessage) {
-                message.success(`${info.file.name} ${locale2text.Upload[locale].uploadSuccess}`);
+                messageApi.success(`${info.file.name} ${locale2text.Upload[locale].uploadSuccess}`);
             } else if (info.file.status === 'error' && showErrorMessage) {
-                message.error(`${info.file.name} ${locale2text.Upload[locale].uploadFailed}`);
+                messageApi.error(`${info.file.name} ${locale2text.Upload[locale].uploadFailed}`);
             }
 
             // 获取当前上传文件列表
@@ -404,7 +409,7 @@ const AntdPictureUpload = (props) => {
             <ConfigProvider locale={str2Locale.get(locale)}>
                 <div
                     // 提取具有data-*或aria-*通配格式的属性
-                    {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+                    {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
                     id={id}
                     className={
                         isString(className) ?
@@ -418,6 +423,8 @@ const AntdPictureUpload = (props) => {
                         ...style
                     }}
                     key={key}>
+                    {messageContextHolder}
+                    {modalContextHolder}
                     <ImgCrop modalOk={locale === 'zh-cn' ? '确定' : 'OK'}
                         modalCancel={locale === 'zh-cn' ? '取消' : 'Cancel'}
                         {...editConfig}>
@@ -452,7 +459,7 @@ const AntdPictureUpload = (props) => {
                                 confirmBeforeDelete ?
                                     () => {
                                         return new Promise((resolve, reject) => {
-                                            Modal.confirm({
+                                            modalApi.confirm({
                                                 title: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteTitle,
                                                 okText: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteOkText,
                                                 cancelText: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteCancelText,
@@ -465,9 +472,7 @@ const AntdPictureUpload = (props) => {
                                     } :
                                     undefined
                             }
-                            data-dash-is-loading={
-                                (loading_state && loading_state.is_loading) || undefined
-                            }>
+                            data-dash-is-loading={useLoading()}>
                             {uploadButton}
                         </Upload>
                     </ImgCrop>
@@ -488,7 +493,7 @@ const AntdPictureUpload = (props) => {
         <ConfigProvider locale={str2Locale.get(locale)}>
             <div
                 // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
                 id={id}
                 className={
                     isString(className) ?
@@ -502,6 +507,8 @@ const AntdPictureUpload = (props) => {
                     ...style
                 }}
                 key={key}>
+                {messageContextHolder}
+                {modalContextHolder}
                 <Upload {...uploadProps}
                     fileList={fileList}
                     listType="picture-card"
@@ -533,7 +540,7 @@ const AntdPictureUpload = (props) => {
                         confirmBeforeDelete ?
                             () => {
                                 return new Promise((resolve, reject) => {
-                                    Modal.confirm({
+                                    modalApi.confirm({
                                         title: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteTitle,
                                         okText: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteOkText,
                                         cancelText: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteCancelText,
@@ -546,9 +553,7 @@ const AntdPictureUpload = (props) => {
                             } :
                             undefined
                     }
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    }>
+                    data-dash-is-loading={useLoading()}>
                     {uploadButton}
                 </Upload>
                 <Modal