@titaui/pc 1.7.99 → 1.8.1

package/src/components/update-modal/index.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement, useState, useEffect, useCallback } from "react";
 import { Modal } from "tita-ui";
 import { getBSGlobal } from "../period-selector/helper";
-import { getLocale } from "../../utils/getLocale";
 import "./index.scss";
 import { cancelGuide } from "./request-api";
 
@@ -47,7 +46,7 @@ function UpdateModal({ updates = [], detailLink }: Props): ReactElement {
           target="_blank"
           className={preCls + "__detail-btn"}
         >
-          {getLocale('Per_Help_Button_Learnmore')}
+          了解更多
         </a>
       </div>
     </Modal>

package/src/components/upload/components/uploadedPreview.tsx

@@ -1,7 +1,6 @@
 import React, { PureComponent, Fragment } from 'react'
 import { Tooltip } from 'tita-ui';
 import { UploadResultObj } from '../type'
-import { getLocale } from '../../../utils/getLocale';
 import {
   PreviewContent,
   PreviewImageWrapper,
@@ -60,7 +59,7 @@ export default class UploadedPreview extends PureComponent<Props> {
       if (smallImageUrl && deleteable) { // 是图片且能删除
         return (
           [
-            <Tooltip content={getLocale('Mod_Preview')} container={document.body}>
+            <Tooltip content='预览' container={document.body}>
               <span className='upload-file-action-wrapper'>
                 <span className='tu-icon-yulan action-icon'
                   onMouseDown={() => onSubmit(index, 'preview')}>
@@ -68,7 +67,7 @@ export default class UploadedPreview extends PureComponent<Props> {
               </span>
             </Tooltip>
             ,
-            <Tooltip content={getLocale('Mod_Delete')} container={document.body}>
+            <Tooltip content='删除' container={document.body}>
               <span className='upload-file-action-wrapper'>
                 <span className='tu-icon-canceled action-icon delete'
                   onMouseDown={() => onSubmit(index, 'delete')}>
@@ -79,7 +78,7 @@ export default class UploadedPreview extends PureComponent<Props> {
         )
       } else if (!smallImageUrl && deleteable) { // 不是图片但能删除
         return (
-          <Tooltip content={getLocale('Mod_Delete')} container={document.body}>
+          <Tooltip content='删除' container={document.body}>
             <span className='upload-file-action-wrapper'>
               <span className='tu-icon-canceled action-icon delete'
                 onMouseDown={() => onSubmit(index, 'delete')}>
@@ -89,7 +88,7 @@ export default class UploadedPreview extends PureComponent<Props> {
         )
       } else if (smallImageUrl && !deleteable) { // 是图片不能删除
         return (
-          <Tooltip content={getLocale('Mod_Preview')} container={document.body}>
+          <Tooltip content='预览' container={document.body}>
             <span className='upload-file-action-wrapper'>
               <span className='tu-icon-magnifier-circle action-icon'
                 onMouseDown={() => onSubmit(index, 'preview')}>
@@ -102,7 +101,7 @@ export default class UploadedPreview extends PureComponent<Props> {
       }
     } else if (uploadStatus === 5) {
       return (
-        <Tooltip content={getLocale('Mod_Delete')} container={document.body}>
+        <Tooltip content='删除' container={document.body}>
           <span className='upload-file-action-wrapper'>
             <span className='tu-icon-canceled action-icon delete'
               onMouseDown={() => onSubmit(index, 'delete')}>
@@ -120,7 +119,7 @@ export default class UploadedPreview extends PureComponent<Props> {
               </span>
             </span>
           </Tooltip>
-          <Tooltip content={getLocale('Mod_Delete')} container={document.body}>
+          <Tooltip content='删除' container={document.body}>
             <span className='upload-file-action-wrapper'>
               <span className='tu-icon-canceled action-icon delete'
                 onMouseDown={() => onSubmit(index, 'delete')}>

package/src/components/upload/index.tsx

@@ -8,8 +8,7 @@ import UploadedPreview from './components/uploadedPreview';
 import { UploadResultObj, UploadFilesObj, _dealAttachmentType } from './type';
 import { UploadFormContainer } from './style';
 import ImgViewer from '../img-viewer';
-import { getPreviewImgs } from './util';
-import { getLocale } from '../../utils/getLocale';
+import { getPreviewImgs, isImg } from './util';
 
 interface Props {
   action?: string;
@@ -48,6 +47,8 @@ export default class Upload extends PureComponent<Props, State> {
   }
 
   static defaultProps = {
+    attachmentTipText:
+      '<p>支持拖拽上传</p><p>单次最多支持上传 20 个，总数不可超过 50 个</p><p>每个不超过 50MB</p>',
     fileNumLimit: 20,
     fileSizeLimit: 50,
     filesTotal: 50,
@@ -170,8 +171,8 @@ export default class Upload extends PureComponent<Props, State> {
         return;
       };
       uploadStartFiles.push(uploadStartFile);
-      this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件
-      formData.append('file', element);
+      this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件      
+      formData.append('file', element);      
       let url = action || getApiUrl(`Upload/PostFiles?format=json&timestamp=${timestamp}`);
       this._dealUploadXHRRequest(formData, url, uploadStartFile);
     });
@@ -196,7 +197,7 @@ export default class Upload extends PureComponent<Props, State> {
     let xhr = uploadStartFile.requestXHR;
     xhr.onreadystatechange = () => {
       if (xhr.readyState == 4 && xhr.status == 200) {
-        let result = Object.assign({}, { ...JSON.parse(xhr.responseText).Result[0] }); // 上传成功接口返回数据
+        let result = Object.assign({}, { ...JSON.parse(xhr.responseText).Result[0] }); // 上传成功接口返回数据        
         result.percentComplete = 100;
         result.IsSuccess = !!result.IsSuccess;
         result.uploadStatus = result.IsSuccess ? 3 : 4; // 3上传成功；4上传失败
@@ -226,7 +227,7 @@ export default class Upload extends PureComponent<Props, State> {
         }
       });
       this.setState({ uploadSuccessFiles });
-    };
+    };    
     xhr.open('POST', url, true);
     xhr.send(formData); //开始上传，发送form数据
   };
@@ -354,7 +355,7 @@ export default class Upload extends PureComponent<Props, State> {
   };
 
   render() {
-    const { children, className, style, attachmentTipText = getLocale('OKR_MyO_KRP_Draganddropu') } = this.props;
+    const { children, className, style, attachmentTipText } = this.props;
     const { uploadSuccessFiles } = this.state;
     return (
       <>

package/src/components/upload-photo-modal/constant.ts

@@ -0,0 +1,27 @@
+
+export const List = [
+	{
+		id: 'person',
+		accept: '.jpg,.jpeg,.gif,.png',
+		autoCropArea: 0.5,
+		initialAspectRatio: 1,
+		tips: '仅支持 jpg、jpeg、gif、png 格式 建议图片最小尺寸 150*150px',
+		previewTitle: '预览',
+	},
+  {
+		id: 'enterprise',
+		accept: '.jpg,.jpeg,.gif,.png',
+		autoCropArea: 1,
+		initialAspectRatio: 5,
+		tips: '建议 logo 尺寸 400*80 logo 最佳适配颜色为白色 仅支持 jpg、jpeg、gif、png 格式',
+		previewTitle: 'logo 预览',
+	},
+  {
+		id: 'browser',
+		accept: '',
+		autoCropArea: 0.5,
+		initialAspectRatio: 1,
+		tips: '图标尺寸 18*18，超过将被浏览器压缩',
+		previewTitle: '浏览器图标预览',
+	}
+];

package/src/components/upload-photo-modal/index.scss

@@ -0,0 +1,258 @@
+.tita-ui-change-person-photo {
+  &__img {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 32px;
+    .cropper-wrap-box {
+      border-radius: 12px;
+    }
+    .cropper-canvas {
+      border-radius: 12px;
+    }
+    .cropper-crop {
+      border-radius: 12px;
+    }
+  }
+  &__upload {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 32px;
+
+    &-preview {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    &-right {
+      position: relative;
+      width: 240px;
+      height: 240px;
+      background: #f0f2f5;
+      border-radius: 12px;
+      box-sizing: border-box;
+      padding: 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &-input {
+        position: absolute;
+        top: 76px;
+        width: 240px;
+        height: 60px;
+        opacity: 0;
+        cursor: pointer;
+      }
+      &-icon {
+        cursor: pointer;
+        margin-top: 46px;
+        font-size: 32px;
+        color: #2879ff;
+      }
+      &-title {
+        margin-top: 4px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #2879ff;
+        line-height: 18px;
+        cursor: pointer;
+      }
+      &-tips {
+        margin-top: 8px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #a4acb9;
+        line-height: 18px;
+        text-align: center;
+      }
+    }
+    &-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 36px;
+      width: 136px;
+      height: 100%;
+      &-box1 {
+        width: 136px;
+        height: 136px;
+        background: #f0f2f5;
+        border-radius: 50%;
+      }
+      &-box2 {
+        width: 48px;
+        height: 48px;
+        background: #f0f2f5;
+        border-radius: 50%;
+        margin-top: 14px;
+      }
+      &-box3 {
+        width: 28px;
+        height: 28px;
+        background: #f0f2f5;
+        border-radius: 50%;
+        margin-top: 14px;
+      }
+      &-box {
+        width: 160px;
+        height: 32px;
+        background: #F0F2F5;
+        border-radius: 2px;
+        border: 1px solid #E9ECF0;
+      }
+      &-preview {
+        margin-top: 8px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 22px;
+      }
+    }
+  }
+  &__preview {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+    &-box {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      &-bgc {
+        width: 160px;
+        height: 32px;
+        background: #2879FF;
+        border-radius: 2px;
+        border: 1px solid #E9ECF0;
+      }
+      &-browser {
+        margin-left: 16px;
+        width: 176px;
+        height: 48px;
+        background: #F0F2F5;
+        border-radius: 2px;
+        border: 1px solid #E9ECF0;
+        background-image: url('./img/browser-preview-bgc.png');
+        background-size: 170px 28px;
+        background-position: center center;
+        background-repeat: no-repeat;
+      }
+    }
+    &-box1 {
+      width: 136px;
+      height: 136px;
+      border-radius: 50%;
+    }
+    &-box2 {
+      margin-top: 14px;
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+    }
+    &-box3 {
+      margin-top: 14px;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+    }
+    &-enterprise {
+      &-img {
+        position: absolute;
+        top: 1px;
+        right: 45px;
+        width: 70px;
+        height: 28px;
+      }
+      &-title {
+        margin-top: 36px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 22px;
+      }
+    }
+    &-browser {
+      &-img {
+        position: absolute;
+        top: 15px;
+        left: 16px;
+        width: 18px;
+        height: 18px;
+      }
+      &-name {
+        position: absolute;
+        top: 15px;
+        right:10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 18px;
+      }
+      &-title {
+        margin-top: 58px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 22px;
+      }
+    }
+    &-title {
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #6f7886;
+      line-height: 22px;
+    }
+  }
+  &__title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 8px 32px 0 32px;
+    &-input {
+      display: none;
+      position: absolute;
+      width: 240px;
+      height: 30px;
+      &--show {
+        display: block;
+        opacity: 0;
+        cursor: pointer;
+        width: 56px;
+        height: 22px;
+        position: absolute;
+        left: 124px;
+      }
+    }
+    &-again {
+      margin-left: 92px;
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #bfc7d5;
+      line-height: 22px;
+      &--show {
+        cursor: pointer;
+        color: #2879ff;
+        &:hover {
+          color: #DFE3EA;
+        }
+      }
+      &--hover {
+        color: #DFE3EA;
+      }
+    }
+    &-preview {
+      margin-right: 54px;
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #6f7886;
+      line-height: 22px;
+    }
+  }
+}