@zat-design/sisyphus-react 3.0.13

package/lib/ProUpload/style/fileItem.less

@@ -0,0 +1,158 @@
+.filelist-item-wrapper {
+  // width: 392px;
+  .file-info-box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 30px;
+    margin-top: 8px;
+    color: #343434;
+    font-weight: 400;
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    line-height: 17px;
+    &:hover {
+      background: #F8F9FA;
+      border-radius: 4px;
+    }
+    &:hover,&.file-box-error {
+      .file-actions-wrap {
+        .file-actions{
+          display: flex;
+
+          .file-action-item{
+            color: #FF005F;
+          }
+        }
+      }
+
+    }
+
+    .file-type-icon {
+      display: block;
+      width: 18px;
+      height: 23px;
+      margin-left: 6px;
+      overflow: hidden;
+      position: absolute;
+    }
+    .file-name {
+      display: -webkit-box;
+      padding-left: 32px;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+    .file-name.file-name-pf0 {
+      padding-left: 0;
+    }
+
+    .file-percent {
+      margin-left: 8px;
+      color: #939599;
+      font-weight: 400;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+    }
+
+    &.file-box-error {
+      color: #FF005F;
+    }
+
+    .file-actions-wrap {
+      width: 100px;
+      margin-left: auto;
+      .file-actions {
+        display: none;
+        justify-content: right;
+
+        transition: all 1s;
+
+        .file-action-item {
+          margin-left: 8px;
+          padding: 0;
+          cursor: pointer;
+          color: var(--zaui-brand);
+        }
+      }
+    }
+  }
+}
+
+
+.drag-Single-item-wrapper {
+  .file-info-box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 30px;
+    margin-top: 8px;
+    color: #343434;
+    font-weight: 400;
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    line-height: 17px;
+    justify-content: center;
+    &:hover {
+      background: #F8F9FA;
+      border-radius: 4px;
+    }
+    &:hover,&.file-box-error {
+      .file-actions-wrap {
+        .file-actions{
+          display: flex;
+
+          // .file-action-item{
+          //   color: #FF005F;
+          // }
+        }
+      }
+
+    }
+
+    .file-type-icon {
+      display: block;
+      width: 18px;
+      height: 23px;
+      margin-left: 6px;
+      overflow: hidden;
+      position: absolute;
+    }
+    .file-name {
+      display: -webkit-box;
+      padding-left: 32px;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+    .file-name.file-name-pf0 {
+      padding-left: 0;
+    }
+
+    .file-percent {
+      margin-left: 8px;
+      color: #939599;
+      font-weight: 400;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+    }
+
+    &.file-box-error {
+      color: #FF005F;
+    }
+
+    .file-actions-wrap {
+      margin-left: 10px;
+      .file-actions {
+        justify-content: right;
+        transition: all 1s;
+        .file-action-item {
+          margin-left: 8px;
+          padding: 0;
+          cursor: pointer;
+          color: var(--zaui-brand);
+        }
+      }
+    }
+  }
+}

package/lib/ProUpload/style/index.less

@@ -0,0 +1,242 @@
+.pro-upload {
+   // 拖拽上传
+  .pro-upload-dragger {
+    .pro-upload-handle-box {
+      background: #F8F9FA;
+      border-radius: 4px;
+      padding: 8px;
+      .ant-upload.ant-upload-drag {
+        background-color: #fff;
+      }
+      .drag-upload-inner {
+        min-width: 392px;
+        height: 110px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .upload-dragger-control  {
+          background-color: #fff;
+          .dragger-txt-line1{
+            display: flex;
+            line-height: 26px;
+            align-items: center;
+
+            .icon-upload {
+              display: inline-block;
+              // width: 34px;
+              // height: 26px;
+              font-size: 30px;
+              color: #C5C7CD;
+              // background: #c5c7cd;
+            }
+
+            .dragger-txt {
+              margin-left: 9px;
+              font-size: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: rgba(0,0,0,0.85);
+              line-height: 20px;
+            }
+            .click-txt {
+              color: #006AFF;
+            }
+          }
+
+          .file-ext {
+            text-align: center;
+            margin-top: 10px;
+            font-size: 10px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #939599;
+            line-height: 14px;
+          }
+        }
+
+        // 单个文件展示样式
+        .dragger-single-file {
+          display: flex;
+
+          justify-content: center;
+          flex-direction: column;
+          padding: 0 32px;
+          .file-type-icon {
+            width: 18px;
+            height: 22px;
+            margin: 0 auto;
+          }
+          .file-item-wrapper {
+            padding: 0 30px;
+          }
+
+
+          .file-info-box {
+            margin-top: 11px;
+            display: flex;
+
+            &.file-box-error {
+              color: red;
+            }
+            .file-name {
+              display: -webkit-box;
+              overflow: hidden;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+            }
+
+
+            .file-download {
+              margin-left: 8px;
+            }
+          }
+
+          .file-action-box{
+            display: flex;
+            justify-content: center;
+            margin-top: 3px;
+            .file-del {
+              margin-left: 30px
+            }
+          }
+        }
+
+      }
+    }
+
+    .pro-upload-file-list{
+
+    }
+  }
+
+  // 按钮上传
+  .pro-upload-button {
+    display: flex;
+    >span{
+      width: 100%;
+      display: block;
+    }
+    .upload-tip-txt{
+      margin-left: 10px;
+      line-height: 32px;
+      font-size: 10px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #939599;
+    }
+  }
+
+
+  // 图片
+
+  .pro-upload-image {
+
+    position: relative;
+
+    .ant-upload-list-picture-card-container,.ant-upload-select-picture-card {
+      width: 126px;
+      height: 126px;
+    }
+
+    .image-example {
+      position: absolute;
+      word-break: keep-all;
+      top: 0;
+      right: -10px;
+      width: 88px;
+      height: 32px;
+      transform: translate(100%, 0);
+      text-align: center;
+      line-height: 32px;
+      background: #FFFFFF;
+      border-radius: 4px;
+      border: 1px solid #DCDCDC;
+      .exam-con {
+        width: 100%;
+        max-height: 600px;
+        overflow-y: auto;
+      }
+    }
+
+    .file-item-image {
+      position: relative;
+      overflow: hidden;
+      height: 100%;
+      border: 1px dashed #d9d9d9;
+      overflow: hidden;
+      border-radius: 8px;
+
+      .image-con {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      &:hover .actions-wrap{
+        display: block;
+        background-color: rgba(0,0,0,0.75);
+      }
+
+      .actions-wrap {
+        transition:  all 2s;
+        position: absolute;
+        display: none;
+        width: 100%;
+        top: 0;
+        bottom: 0;
+        background-color: rgba(0,0,0,0.5);
+
+
+
+        .action-top{
+          flex: 1;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          height: calc(100% - 36px);
+          justify-content: center;
+        }
+        .action-button{
+          height: 36px;
+          line-height: 36px;
+          background: #FFFFFF;
+          text-align:center;
+        }
+        .action-item {
+          color: #fff;
+          font-size: 12px;
+          opacity: 0.8;
+          // cursor: pointer;
+          .action-icon {
+            margin-right: 10px;
+            transform: translate(0, 3px);
+          }
+          &:hover{
+            opacity: 1;
+          }
+        }
+        // .action-top {
+          // .action-item:last-child {
+          //   margin-top: 17px;
+          // }
+        // }
+        .action-button {
+          .action-item {
+            color: #FF005F;
+          }
+        }
+      }
+    }
+    .file-item-image.actions-wrap-error {
+      border: 1px solid #FF005F;
+    }
+
+    .image-uploading {
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      height: inherit;
+    }
+  }
+
+}

package/lib/ProUpload/style/look.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678850531044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8854" id="mx_n_1678850531045" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M461.4144 0a461.4144 461.4144 0 0 1 360.0384 749.841067l5.7344 4.9152 131.754667 131.754666a51.2 51.2 0 0 1-66.628267 77.4144l-5.7344-4.9152-131.822933-131.822933-4.9152-5.7344A461.4144 461.4144 0 1 1 461.346133 0z m0 102.4a359.0144 359.0144 0 1 0 0 717.960533 359.0144 359.0144 0 0 0 0-717.960533z m0 135.645867a51.2 51.2 0 0 1 51.2 51.2L512.546133 414.378667h125.3376a51.2 51.2 0 0 1 6.894934 101.9904l-6.894934 0.477866-125.3376-0.068266v133.9392l-0.4096 6.9632a51.2 51.2 0 0 1-101.922133-6.9632l-0.068267-133.9392H284.945067a51.2 51.2 0 0 1-6.9632-101.853867l6.9632-0.477867 125.201066-0.068266V289.245867l0.477867-6.9632a51.2 51.2 0 0 1 50.7904-44.2368z" p-id="8855" width="16" height="16" fill="currentColor" ></path></svg>

package/lib/ProUtils/utils/index.d.ts

@@ -0,0 +1,6 @@
+export declare const valueTypeRender: {
+    percentage: (val: any, precision: any) => string;
+    permillage: (val: any, precision: any) => string;
+    thousandth: (val: any, precision: any) => string;
+    thousandthCNY: (val: any, precision: any) => string;
+};

package/lib/ProUtils/utils/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.valueTypeRender = void 0;
+var _utils = require("@zat-design-pro-component/utils");
+var calc = _utils.tools.calc;
+var valueTypeRender = {
+  percentage: function percentage(val, precision) {
+    var _calc;
+    return (_calc = calc(val !== null && val !== void 0 ? val : 0, '*', 100)) === null || _calc === void 0 ? void 0 : _calc.toFixed(precision);
+  },
+  permillage: function permillage(val, precision) {
+    var _calc2;
+    return (_calc2 = calc(val !== null && val !== void 0 ? val : 0, '*', 1000)) === null || _calc2 === void 0 ? void 0 : _calc2.toFixed(precision);
+  },
+  thousandth: function thousandth(val, precision) {
+    return Number(val).toLocaleString('en-us', {
+      minimumFractionDigits: precision,
+      maximumFractionDigits: precision
+    });
+  },
+  thousandthCNY: function thousandthCNY(val, precision) {
+    return "CNY ".concat(Number(val).toLocaleString('en-us', {
+      minimumFractionDigits: precision,
+      maximumFractionDigits: precision
+    }));
+  }
+};
+exports.valueTypeRender = valueTypeRender;

package/lib/ProViewer/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProViewerPropsType } from './propsType';
+declare const ProViewer: React.ForwardRefExoticComponent<Pick<ProViewerPropsType, keyof ProViewerPropsType> & React.RefAttributes<unknown>>;
+export default ProViewer;

package/lib/ProViewer/index.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _ahooks = require("ahooks");
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+/* eslint-disable jsx-a11y/iframe-has-title */
+
+// 用于解析word | excel
+var officeApp = 'https://view.officeapps.live.com/op/view.aspx?src=';
+// 文件MIME类型
+var MIMEType = {
+  img: 'image/png',
+  pdf: 'application/pdf',
+  word: 'application/msword',
+  excel: 'application/vnd.ms-excel'
+};
+var ProViewer = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var disabled = _ref.disabled,
+    mode = _ref.mode,
+    fileType = _ref.fileType,
+    modalProps = _ref.modalProps,
+    src = _ref.src,
+    onClick = _ref.onClick,
+    previewFile = _ref.previewFile,
+    previewData = _ref.previewData,
+    children = _ref.children,
+    buttonProps = _ref.buttonProps;
+  var ProViewerRef = (0, _react.useRef)(null);
+  var _useSetState = (0, _ahooks.useSetState)({
+      imgVisible: false,
+      modalVisible: false,
+      url: src || ''
+    }),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var imgVisible = state.imgVisible,
+    modalVisible = state.modalVisible,
+    url = state.url;
+  _react.default.useImperativeHandle(ref, function () {
+    return {
+      current: ProViewerRef.current
+    };
+  });
+  /**
+   * 跳转页面
+   */
+  var jumpPage = function jumpPage(_ref2) {
+    var src = _ref2.src,
+      blob = _ref2.blob;
+    var jumpSrc = src;
+    if (blob instanceof Blob) {
+      jumpSrc = window.URL.createObjectURL(blob);
+    }
+    var doc = document;
+    var ele = doc.createElement('a');
+    doc.body.appendChild(ele);
+    ele.style.display = 'none';
+    ele.href = jumpSrc || '';
+    ele.target = '_blank';
+    ele.click();
+    doc.body.removeChild(ele);
+  };
+  var getSrc = function getSrc(src) {
+    if (['word', 'excel'].includes(fileType || 'pdf')) {
+      return "".concat(officeApp).concat(src);
+    }
+    return src;
+  };
+  var previewHandle = function previewHandle() {
+    if (mode === 'modal' && url) {
+      switch (fileType) {
+        case 'img':
+          setState({
+            imgVisible: true
+          });
+          break;
+        case 'pdf':
+        case 'word':
+        case 'excel':
+          setState({
+            modalVisible: true
+          });
+          break;
+        default:
+          setState({
+            modalVisible: true
+          });
+          break;
+      }
+    }
+    if (mode === 'page' && url) {
+      jumpPage({
+        src: getSrc(url)
+      });
+    }
+    onClick && onClick();
+  };
+  // 调用接口获取二进制流转blob处理
+  (0, _react.useEffect)(function () {
+    if (previewFile) {
+      try {
+        previewFile().then( /*#__PURE__*/function () {
+          var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(response) {
+            var res, blob, blobUrl;
+            return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return response.blob();
+                case 2:
+                  res = _context.sent;
+                  blob = new Blob([res], {
+                    type: MIMEType[fileType || 'pdf']
+                  });
+                  blobUrl = window.URL.createObjectURL(blob);
+                  setState({
+                    url: blobUrl
+                  });
+                case 6:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          return function (_x) {
+            return _ref3.apply(this, arguments);
+          };
+        }());
+      } catch (error) {
+        console.warn(error);
+      }
+    }
+  }, [previewFile]);
+  // 二进制流转blob处理
+  (0, _react.useEffect)(function () {
+    if (previewData) {
+      try {
+        previewData.blob().then(function (res) {
+          var blob = new Blob([res], {
+            type: MIMEType[fileType || 'pdf']
+          });
+          var blobUrl = window.URL.createObjectURL(blob);
+          setState({
+            url: blobUrl
+          });
+        });
+      } catch (error) {
+        console.warn(error);
+      }
+    }
+  }, [previewData]);
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "pro-viewer"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, (0, _objectSpread2.default)({
+    disabled: disabled || !url && !previewFile,
+    ref: ProViewerRef,
+    onClick: previewHandle
+  }, buttonProps), children), mode && fileType === 'img' && /*#__PURE__*/_react.default.createElement(_antd.Image, {
+    src: url,
+    preview: {
+      visible: imgVisible,
+      onVisibleChange: function onVisibleChange(value) {
+        setState({
+          imgVisible: value
+        });
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement(_antd.Modal, (0, _objectSpread2.default)({
+    onCancel: function onCancel() {
+      setState({
+        modalVisible: false
+      });
+    },
+    visible: modalVisible
+  }, modalProps), url && /*#__PURE__*/_react.default.createElement("iframe", {
+    title: "pro-viewer",
+    src: getSrc(url),
+    height: modalProps === null || modalProps === void 0 ? void 0 : modalProps.height,
+    width: "100%",
+    frameBorder: "0",
+    scrolling: "auto"
+  })));
+});
+ProViewer.defaultProps = {
+  modalProps: {
+    width: '1200px',
+    height: '650px',
+    centered: true,
+    title: '预览',
+    footer: null,
+    bodyStyle: {
+      padding: 0
+    }
+  },
+  buttonProps: {
+    type: 'link'
+  },
+  mode: 'page',
+  fileType: 'pdf',
+  disabled: false
+};
+var _default = ProViewer;
+exports.default = _default;

package/lib/ProViewer/propsType.d.ts

@@ -0,0 +1,35 @@
+import { ButtonProps, ModalProps } from 'antd';
+import React from 'react';
+export type ProViewerModePropsType = 'modal' | 'page';
+export type ProViewerFilePropsType = 'pdf' | 'img' | 'word' | 'excel';
+export type PreviewFileHandlerPropsType = () => PromiseLike<any>;
+export type BufferSource = ArrayBufferView | ArrayBuffer;
+export type BlobPart = string | Blob | BufferSource;
+declare module 'antd' {
+    interface ModalProps {
+        height?: string;
+    }
+}
+export interface JumpPagePropsType {
+    blob?: Blob;
+    src?: string;
+}
+export interface StatePropsType {
+    imgVisible?: boolean;
+    modalVisible?: boolean;
+    url: string;
+}
+export interface ProViewerPropsType {
+    disabled?: boolean;
+    mode: ProViewerModePropsType | string;
+    fileType?: ProViewerFilePropsType;
+    src?: string;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    modalProps?: ModalProps;
+    buttonProps?: Omit<ButtonProps, 'onClick'>;
+    previewFile?: PreviewFileHandlerPropsType;
+    previewData?: any;
+    children?: any;
+    [key: string]: any;
+}