zy-react-library 1.1.0 → 1.1.2

package/components/Map/index.js

@@ -1,77 +1,90 @@
-import { Button, Col, Form, Input, Row } from "antd";
-import { useState } from "react";
-import MapSelector from "./MapSelector";
-
-/**
- * 定位组件
- */
-const Map = (props) => {
-  const {
-    longitudeProps = "longitude",
-    latitudeProps = "latitude",
-    onConfirm,
-    required = true,
-    area = "",
-    showArea = false,
-  } = props;
-
-  const form = Form.useFormInstance();
-  const [mapVisible, setMapVisible] = useState(false);
-  const [currentLongitude, setCurrentLongitude] = useState("");
-  const [currentLatitude, setCurrentLatitude] = useState("");
-
-  const handleMapConfirm = (longitudeValue, latitudeValue, extra) => {
-    setCurrentLongitude(longitudeValue);
-    setCurrentLatitude(latitudeValue);
-    form.setFieldsValue({
-      [longitudeProps]: longitudeValue,
-      [latitudeProps]: latitudeValue,
-    });
-    onConfirm?.(longitudeValue, latitudeValue, extra);
-    setMapVisible(false);
-  };
-
-  return (
-    <>
-      <Row gutter={24}>
-        <Col span={12}>
-          <Form.Item label="经度" name={longitudeProps} rules={[{ required, message: "请选择经度" }]}>
-            <Input disabled />
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item label="纬度" required={required}>
-            <div style={{ display: "flex", gap: 10 }}>
-              <Form.Item name={latitudeProps} noStyle rules={[{ required, message: "请选择纬度" }]}>
-                <Input disabled />
-              </Form.Item>
-              <Button
-                type="primary"
-                onClick={() => {
-                  setMapVisible(true);
-                  setCurrentLongitude(form.getFieldValue(longitudeProps));
-                  setCurrentLatitude(form.getFieldValue(latitudeProps));
-                }}
-              >
-                地图定位
-              </Button>
-            </div>
-          </Form.Item>
-        </Col>
-      </Row>
-      <MapSelector
-        visible={mapVisible}
-        onClose={() => setMapVisible(false)}
-        longitude={currentLongitude}
-        latitude={currentLatitude}
-        area={area}
-        showArea={showArea}
-        onConfirm={handleMapConfirm}
-      />
-    </>
-  );
-};
-
-Map.displayName = "Map";
-
-export default Map;
+import { Form, Row, Col, Input, Button } from 'antd';
+import { useState } from 'react';
+import MapSelector from './MapSelector.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+const Map = props => {
+  const {
+    longitudeProps = "longitude",
+    latitudeProps = "latitude",
+    onConfirm,
+    required = true,
+    area = "",
+    showArea = false
+  } = props;
+  const form = Form.useFormInstance();
+  const [mapVisible, setMapVisible] = useState(false);
+  const [currentLongitude, setCurrentLongitude] = useState("");
+  const [currentLatitude, setCurrentLatitude] = useState("");
+  const handleMapConfirm = (longitudeValue, latitudeValue, extra) => {
+    setCurrentLongitude(longitudeValue);
+    setCurrentLatitude(latitudeValue);
+    form.setFieldsValue({
+      [longitudeProps]: longitudeValue,
+      [latitudeProps]: latitudeValue
+    });
+    onConfirm?.(longitudeValue, latitudeValue, extra);
+    setMapVisible(false);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Row, {
+      gutter: 24,
+      children: [/*#__PURE__*/jsx(Col, {
+        span: 12,
+        children: /*#__PURE__*/jsx(Form.Item, {
+          label: "\u7ECF\u5EA6",
+          name: longitudeProps,
+          rules: [{
+            required,
+            message: "请选择经度"
+          }],
+          children: /*#__PURE__*/jsx(Input, {
+            disabled: true
+          })
+        })
+      }), /*#__PURE__*/jsx(Col, {
+        span: 12,
+        children: /*#__PURE__*/jsx(Form.Item, {
+          label: "\u7EAC\u5EA6",
+          required: required,
+          children: /*#__PURE__*/jsxs("div", {
+            style: {
+              display: "flex",
+              gap: 10
+            },
+            children: [/*#__PURE__*/jsx(Form.Item, {
+              name: latitudeProps,
+              noStyle: true,
+              rules: [{
+                required,
+                message: "请选择纬度"
+              }],
+              children: /*#__PURE__*/jsx(Input, {
+                disabled: true
+              })
+            }), /*#__PURE__*/jsx(Button, {
+              type: "primary",
+              onClick: () => {
+                setMapVisible(true);
+                setCurrentLongitude(form.getFieldValue(longitudeProps));
+                setCurrentLatitude(form.getFieldValue(latitudeProps));
+              },
+              children: "\u5730\u56FE\u5B9A\u4F4D"
+            })]
+          })
+        })
+      })]
+    }), /*#__PURE__*/jsx(MapSelector, {
+      visible: mapVisible,
+      onClose: () => setMapVisible(false),
+      longitude: currentLongitude,
+      latitude: currentLatitude,
+      area: area,
+      showArea: showArea,
+      onConfirm: handleMapConfirm
+    })]
+  });
+};
+Map.displayName = "Map";
+
+export { Map as default };

package/components/Page/index.d.ts

@@ -18,6 +18,8 @@ export interface PageProps {
   isShowAllAction?: boolean;
   /** 取消按钮文字，默认 "关闭" */
   backButtonText?: string;
+  /** 内容区域的padding，默认 "20px" */
+  contentPadding?: string;
   /** 自定义底部操作按钮组 */
   customActionButtons?: ReactNode;
   /** 额外底部操作按钮组 */

package/components/Page/index.js

@@ -1,9 +1,7 @@
-import { Button, Space } from "antd";
-import HeaderBack from "../HeaderBack";
+import { Space, Button } from 'antd';
+import HeaderBack from '../HeaderBack/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-/**
- * 页面布局组件
- */
 function Page(props) {
   const {
     headerTitle,
@@ -13,37 +11,49 @@ function Page(props) {
     isShowFooter = true,
     isShowAllAction = true,
     backButtonText = "关闭",
+    contentPadding = "20px",
     customActionButtons,
-    extraActionButtons,
+    extraActionButtons
   } = props;
-
-  return (
-    <div className="page">
-      {(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
-      <div style={{ padding: 20 }}>
-        {props.children}
-      </div>
-      {
-        (isShowAllAction && isShowFooter) && (
-          <>
-            <div style={{ height: "52px" }}></div>
-            <div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", margin: "0 -20px", padding: "10px 0", position: "fixed", bottom: "0", width: "100%" }}>
-              {customActionButtons || (
-                <Space>
-                  {extraActionButtons}
-                  <Button onClick={() => history?.goBack?.() || window.history.back()}>
-                    {backButtonText}
-                  </Button>
-                </Space>
-              )}
-            </div>
-          </>
-        )
-      }
-    </div>
-  );
+  return /*#__PURE__*/jsxs("div", {
+    className: "page",
+    children: [isShowAllAction && isShowHeader && /*#__PURE__*/jsx(HeaderBack, {
+      title: headerTitle,
+      history: history,
+      previous: headerPrevious
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        padding: contentPadding
+      },
+      children: props.children
+    }), isShowAllAction && isShowFooter && /*#__PURE__*/jsxs("div", {
+      style: {
+        transform: 'scale(1)',
+        margin: '0px -44px'
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          height: "52px"
+        }
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          textAlign: "center",
+          backgroundColor: "rgb(241, 241, 242)",
+          padding: "10px 0",
+          position: "fixed",
+          bottom: "0",
+          width: "100%"
+        },
+        children: customActionButtons || /*#__PURE__*/jsxs(Space, {
+          children: [extraActionButtons, /*#__PURE__*/jsx(Button, {
+            onClick: () => history?.goBack?.() || window.history.back(),
+            children: backButtonText
+          })]
+        })
+      })]
+    })]
+  });
 }
-
 Page.displayName = "Page";
 
-export default Page;
+export { Page as default };

package/components/Pdf/index.js

@@ -1,16 +1,14 @@
-import { useFullscreen } from "ahooks";
-import { Button, message, Modal, Spin } from "antd";
-import { useRef, useState } from "react";
-import { Document, Page, pdfjs } from "react-pdf";
-import useDownloadFile from "../../hooks/useDownloadFile";
-import { getFileUrl } from "../../utils";
-import "react-pdf/dist/Page/AnnotationLayer.css";
-import "react-pdf/dist/Page/TextLayer.css";
-import "./index.less";
+import { useFullscreen } from 'ahooks';
+import { Modal, Button, Spin, message } from 'antd';
+import { useState, useRef } from 'react';
+import { pdfjs, Document, Page } from 'react-pdf';
+import useDownloadFile from '../../hooks/useDownloadFile/index.js';
+import { getFileUrl } from '../../utils/index.js';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
+import './index.less';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-/**
- * PDF查看组件
- */
 function Pdf(props) {
   const {
     visible = false,
@@ -18,117 +16,121 @@ function Pdf(props) {
     file,
     name,
     inline = false,
-    style = {},
+    style = {}
   } = props;
-
   const fileUrl = getFileUrl();
   const [numPages, setNumPages] = useState(0);
   const [pdfWidth, setPdfWidth] = useState(600);
   const [loading, setLoading] = useState(true);
-
   const fullscreenRef = useRef(null);
-
-  const [isFullscreen, { enterFullscreen, exitFullscreen }] = useFullscreen(fullscreenRef);
-  const { downloadFile } = useDownloadFile();
-
+  const [isFullscreen, {
+    enterFullscreen,
+    exitFullscreen
+  }] = useFullscreen(fullscreenRef);
+  const {
+    downloadFile
+  } = useDownloadFile();
   pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
-
-  const onDocumentLoadSuccess = ({ numPages }) => {
+  const onDocumentLoadSuccess = ({
+    numPages
+  }) => {
     setNumPages(numPages);
     setLoading(false);
   };
-
   const onDocumentLoadError = () => {
     setLoading(false);
     message.error("加载 PDF 文件失败");
-    if (onCancel)
-      onCancel();
+    if (onCancel) onCancel();
   };
-
-  const onPageLoadSuccess = ({ width }) => {
+  const onPageLoadSuccess = ({
+    width
+  }) => {
     setPdfWidth(width);
   };
 
   // 内联模式的PDF内容
-  const renderPdfContent = () => (
-    <>
-      {loading && (
-        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "72vh" }}>
-          <Spin size="large" />
-        </div>
-      )}
-      <div style={{ height: isFullscreen ? "calc(100vh - 40px - 24px - 8px - 32px - 12px)" : "72vh", overflowY: "auto", padding: "24px", ...style }}>
-        <Document
-          file={!file.includes(fileUrl) ? fileUrl + file : file}
-          onLoadSuccess={onDocumentLoadSuccess}
-          onLoadError={onDocumentLoadError}
-        >
-          {
-            Array.from({ length: numPages }).map((_, index) => (
-              <Page key={`page_${index + 1}`} pageNumber={index + 1} onLoadSuccess={onPageLoadSuccess} />
-            ))
-          }
-        </Document>
-      </div>
-    </>
-  );
+  const renderPdfContent = () => /*#__PURE__*/jsxs(Fragment, {
+    children: [loading && /*#__PURE__*/jsx("div", {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "72vh"
+      },
+      children: /*#__PURE__*/jsx(Spin, {
+        size: "large"
+      })
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        height: isFullscreen ? "calc(100vh - 40px - 24px - 8px - 32px - 12px)" : "72vh",
+        overflowY: "auto",
+        padding: "24px",
+        ...style
+      },
+      children: /*#__PURE__*/jsx(Document, {
+        file: !file.includes(fileUrl) ? fileUrl + file : file,
+        onLoadSuccess: onDocumentLoadSuccess,
+        onLoadError: onDocumentLoadError,
+        children: Array.from({
+          length: numPages
+        }).map((_, index) => /*#__PURE__*/jsx(Page, {
+          pageNumber: index + 1,
+          onLoadSuccess: onPageLoadSuccess
+        }, `page_${index + 1}`))
+      })
+    })]
+  });
 
   // 如果是内联模式，直接返回PDF内容
   if (inline) {
     return renderPdfContent();
   }
-
   const onDownloadFile = () => {
     isFullscreen && exitFullscreen();
     downloadFile({
       url: file,
-      name,
+      name
     });
   };
 
   // 默认弹窗模式
-  return (
-    <div ref={fullscreenRef}>
-      <Modal
-        style={{ top: isFullscreen ? 0 : 100, maxWidth: isFullscreen ? "100vw" : "calc(100vw - 32px)", paddingBottom: isFullscreen ? 0 : 24 }}
-        open={visible}
-        maskClosable={false}
-        width={isFullscreen ? "100vw" : pdfWidth + 100}
-        title="PDF预览"
-        onCancel={() => {
+  return /*#__PURE__*/jsx("div", {
+    ref: fullscreenRef,
+    children: /*#__PURE__*/jsx(Modal, {
+      style: {
+        top: isFullscreen ? 0 : 100,
+        maxWidth: isFullscreen ? "100vw" : "calc(100vw - 32px)",
+        paddingBottom: isFullscreen ? 0 : 24
+      },
+      open: visible,
+      maskClosable: false,
+      width: isFullscreen ? "100vw" : pdfWidth + 100,
+      title: "PDF\u9884\u89C8",
+      onCancel: () => {
+        isFullscreen && exitFullscreen();
+        onCancel();
+      },
+      getContainer: false,
+      footer: [/*#__PURE__*/jsx(Button, {
+        onClick: () => {
           isFullscreen && exitFullscreen();
           onCancel();
-        }}
-        getContainer={false}
-        footer={[
-          <Button
-            key="cancel"
-            onClick={() => {
-              isFullscreen && exitFullscreen();
-              onCancel();
-            }}
-          >
-            关闭
-          </Button>,
-          !loading && (
-            <Button
-              key="fullScreen"
-              onClick={() => {
-                isFullscreen ? exitFullscreen() : enterFullscreen();
-              }}
-            >
-              {isFullscreen ? "退出全屏" : "全屏"}
-            </Button>
-          ),
-          <Button key="download" type="primary" onClick={onDownloadFile}>下载</Button>,
-        ]}
-      >
-        {renderPdfContent()}
-      </Modal>
-    </div>
-  );
+        },
+        children: "\u5173\u95ED"
+      }, "cancel"), !loading && /*#__PURE__*/jsx(Button, {
+        onClick: () => {
+          isFullscreen ? exitFullscreen() : enterFullscreen();
+        },
+        children: isFullscreen ? "退出全屏" : "全屏"
+      }, "fullScreen"), /*#__PURE__*/jsx(Button, {
+        type: "primary",
+        onClick: onDownloadFile,
+        children: "\u4E0B\u8F7D"
+      }, "download")],
+      children: renderPdfContent()
+    })
+  });
 }
-
 Pdf.displayName = "Pdf";
 
-export default Pdf;
+export { Pdf as default };

package/components/PreviewImg/index.js

@@ -1,32 +1,26 @@
-import { Image } from "antd";
-import { getFileUrl } from "../../utils/index";
-
-/**
- * 在查看页面中图片预览组件
- */
-const PreviewImg = (props) => {
-  const { files = [], fileUrlKey = "filePath" } = props;
-
-  const fileUrl = getFileUrl();
-
-  return (
-    <Image.PreviewGroup>
-      {
-        files.filter(Boolean).map(item => (
-          <Image
-            key={item[fileUrlKey] || item}
-            src={item[fileUrlKey] ? fileUrl + item[fileUrlKey] : fileUrl + item}
-            wrapperStyle={{ marginRight: 10, marginBottom: 10 }}
-            width={100}
-            height={100}
-            alt=""
-          />
-        ))
-      }
-    </Image.PreviewGroup>
-  );
-};
-
-PreviewImg.displayName = "PreviewImg";
-
-export default PreviewImg;
+import { Image } from 'antd';
+import { getFileUrl } from '../../utils/index.js';
+import { jsx } from 'react/jsx-runtime';
+
+const PreviewImg = props => {
+  const {
+    files = [],
+    fileUrlKey = "filePath"
+  } = props;
+  const fileUrl = getFileUrl();
+  return /*#__PURE__*/jsx(Image.PreviewGroup, {
+    children: files.filter(Boolean).map(item => /*#__PURE__*/jsx(Image, {
+      src: item[fileUrlKey] ? fileUrl + item[fileUrlKey] : fileUrl + item,
+      wrapperStyle: {
+        marginRight: 10,
+        marginBottom: 10
+      },
+      width: 100,
+      height: 100,
+      alt: ""
+    }, item[fileUrlKey] || item))
+  });
+};
+PreviewImg.displayName = "PreviewImg";
+
+export { PreviewImg as default };