@titaui/pc 1.9.48 → 1.9.49

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

@@ -1,16 +1,16 @@
-import React, { useState, useRef } from 'react';
-import classNames from 'classnames';
-import Cropper from 'react-cropper';
-import Toast from '../../components/toast';
-import ConditionRender from '../condition-render';
-import { saveTenantLogo, saveBrowserIcon, saveUserPhoto } from './request-api';
-import Dialog from '../../components/dialog';
-import { List } from './constant';
-import { getLocale } from '../../utils/getLocale'
-import 'cropperjs/dist/cropper.css';
-import './index.scss';
-
-const preCls = 'tita-ui-change-person-photo';
+import React, { useState, useRef } from "react";
+import classNames from "classnames";
+import Cropper from "react-cropper";
+import Toast from "../../components/toast";
+import ConditionRender from "../condition-render";
+import { saveTenantLogo, saveBrowserIcon, saveUserPhoto } from "./request-api";
+import Dialog from "../dialog";
+import { List } from "./constant";
+import { getLocale } from "../../utils/getLocale";
+import "cropperjs/dist/cropper.css";
+import "./index.scss";
+
+const preCls = "tita-ui-change-person-photo";
 interface Props {
   visible: boolean;
 	type: string; // person enterprise browser
@@ -18,212 +18,213 @@ interface Props {
   handleSuccessUploadPhoto: Function;
 }
 
-const ChangePhoto = (props: Props) => {
-	const { visible, onCancel, type = 'person', handleSuccessUploadPhoto } = props;
+function ChangePhoto(props: Props) {
+  const {
+    visible, onCancel, type = "person", handleSuccessUploadPhoto,
+  } = props;
 
-	const modalRef = useRef<any>();
+  const modalRef = useRef<any>();
   const cropperRef = useRef<HTMLImageElement>(null);
 
-	const [ image, setImage ] = useState('');
-	const [ cropper, setCropper ] = useState<any>();
-	const [ cropData, setCropData ] = useState('#');
-  const [ isEnter, setIsEnter ] = useState(false);
-  const [ fileName, setFileName ] = useState('')
-
-  const item = List.find(item => item.id === type)
-	
-	const onChange = (e: any) => {    
-		let files;
-		if (e.dataTransfer) {
-			files = e.dataTransfer.files;
-		} else if (e.target) {
-			files = e.target.files;
-		}    
-    setFileName(files[0].name)
-		const reader = new FileReader();    
-		reader.onload = () => {
-			setImage(reader.result as any);            
-		};
-		reader.readAsDataURL(files[0]);
-	};
-
-
-  const dataURLtoFile = (dataurl, filename)  => {
-    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
-        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-    while(n--){
-        u8arr[n] = bstr.charCodeAt(n);
+  const [image, setImage] = useState("");
+  const [cropper, setCropper] = useState<any>();
+  const [cropData, setCropData] = useState("#");
+  const [isEnter, setIsEnter] = useState(false);
+  const [fileName, setFileName] = useState("");
+
+  const item = List.find((item) => item.id === type);
+
+  const onChange = (e: any) => {
+    let files;
+    if (e.dataTransfer) {
+      files = e.dataTransfer.files;
+    } else if (e.target) {
+      files = e.target.files;
     }
-    return new File([u8arr], filename, {type:mime});
-}
+    setFileName(files[0].name);
+    const reader = new FileReader();
+    reader.onload = () => {
+      setImage(reader.result as any);
+    };
+    reader.readAsDataURL(files[0]);
+  };
+
+  const dataURLtoFile = (dataurl, filename) => {
+    const arr = dataurl.split(","); const mime = arr[0].match(/:(.*?);/)[1];
+    const bstr = atob(arr[1]); let n = bstr.length; const
+      u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, { type: mime });
+  };
+
+  const onCrop = () => {
+    const imageElement: any = cropperRef.current;
+    const { cropper } = imageElement;
 
+    setCropData(cropper.getCroppedCanvas().toDataURL());
 
-	const onCrop = () => {   
-		const imageElement: any = cropperRef.current;
-		const cropper: any = imageElement.cropper;    
+    const base64Url = cropper.getCroppedCanvas().toDataURL();
 
-		setCropData(cropper.getCroppedCanvas().toDataURL());
-    
-    let base64Url = cropper.getCroppedCanvas().toDataURL();
-        
-    const newFile = dataURLtoFile(base64Url, fileName);    
+    const newFile = dataURLtoFile(base64Url, fileName);
 
-    let formData = new FormData();
+    const formData = new FormData();
 
-    formData.append('file', newFile);
+    formData.append("file", newFile);
 
     setCropper(formData);
-	};
+  };
 
   const handleSuccessSave = (resp) => {
     if (resp.Code === 1) {
-      Toast.Success(getLocale('Pro_page_Plan_Saved'), {
+      Toast.Success(getLocale("Pro_page_Plan_Saved"), {
         style: { position: "fixed", top: " 36px", left: "50%" },
       });
       onCancel();
-      setImage('');
+      setImage("");
       handleSuccessUploadPhoto(cropData);
     } else {
       Toast.Error(resp.Message, {
         style: { position: "fixed", top: " 36px", left: "50%" },
       });
-      setImage('');
+      setImage("");
     }
-  }
+  };
 
-  const handleSaveInfo =  () => {
+  const handleSaveInfo = () => {
     if (!image) {
-      return;
+
+    } else if (type === "person") {
+      saveUserPhoto(cropper).then((resp) => {
+        handleSuccessSave(resp);
+      });
+    } else if (type === "enterprise") {
+      saveTenantLogo(cropper).then((resp) => {
+        handleSuccessSave(resp);
+      });
     } else {
-      if(type === "person")  {
-        saveUserPhoto(cropper).then((resp) => {
-          handleSuccessSave(resp);
-        });
-      } else if(type === "enterprise") {  
-        saveTenantLogo( cropper ).then((resp) => {
-          handleSuccessSave(resp);
-        });
-      }  else {
-        saveBrowserIcon( cropper ).then((resp) => {
-          handleSuccessSave(resp);
-        });
-      }  
+      saveBrowserIcon(cropper).then((resp) => {
+        handleSuccessSave(resp);
+      });
     }
   };
 
   const handleEnterAgain = () => {
     setIsEnter(true);
-  }
+  };
 
   const handleLeaveAgain = () => {
     setIsEnter(false);
-  }
+  };
 
   const handleCancel = () => {
     onCancel();
-    setImage('');
-  } 
-
-	return (
-		<Dialog
-			visible={visible}
-			ref={modalRef}
-			width={480}
-			mask
-			centered
-			title={getLocale('Set_PI_Uploadavatar')}
-			noHeadLine
-			maskClosable={false}
-			onClose={handleCancel}
-			onCancel={handleCancel}
-			okText={getLocale('Mod_Save')}
-			noFooterLine
-			onOk={handleSaveInfo}
-		>
-			<div className={preCls}>
-				{!image ? 
-					<div className={`${preCls}__upload`}>
-						<div className={`${preCls}__upload-preview`}>
-							<div className={`${preCls}__upload-right`}>
-								<i className={classNames(`${preCls}__upload-right-icon`, 'tu-icon-upload')} />
-								<input
-									type="file"
-									onChange={onChange}
-									className={`${preCls}__upload-right-input`}
-									accept={item?.accept}
-								/>
-								<span className={`${preCls}__upload-right-title`}>{getLocale('Pro_detail_ClickUpload')}</span>
-								<span className={`${preCls}__upload-right-tips`}>
-									{item?.tips}
-								</span>
-							</div>
-						</div>
-						<div className={`${preCls}__upload-left`}>
-							<ConditionRender condition={type === 'person'}>
-								<div className={`${preCls}__upload-left-box1`} />
-								<div className={`${preCls}__upload-left-box2`} />
-								<div className={`${preCls}__upload-left-box3`} />
-							</ConditionRender>
-							<ConditionRender condition={type === 'enterprise' || type === 'browser'}>
-								<div className={`${preCls}__upload-left-box`} />
-								<span className={`${preCls}__upload-left-preview`}>{item?.previewTitle}</span>
-							</ConditionRender>
-						</div>
-					</div>
-         :
-					<div className={`${preCls}__img`}>
-						<Cropper
-							src={image}
-							style={{ height: 240, width: 240 }}
-							background={false}
-							responsive={true}
-							autoCropArea={item?.autoCropArea}
-							checkOrientation={true}
-							minCropBoxHeight={item?.minCropBoxHeight}
-							minCropBoxWidth={item?.minCropBoxWidth}
-							initialAspectRatio={item?.initialAspectRatio}
-							guides={true}
-							preview=".img-preview"
-							ref={cropperRef}
-							crop={onCrop}
-						/>
-						<div className={classNames(`${preCls}__preview-box`, {[`${preCls}__preview-box-bgc`]:type === "enterprise"}, {[`${preCls}__preview-box-browser`]:type === "browser"})}>
-              <ConditionRender condition={type === "person"}>
-							  <img src={cropData} className={`${preCls}__preview-box1`} />
-							  <img src={cropData} className={`${preCls}__preview-box2`} />
-							  <img src={cropData} className={`${preCls}__preview-box3`} />
-              </ConditionRender>
-              <ConditionRender condition={type === "enterprise"}>
-                <img src={cropData} className={`${preCls}__preview-enterprise-img`}/>
-                <span className={`${preCls}__preview-enterprise-title`}>{item?.previewTitle}</span>
-              </ConditionRender>
-              <ConditionRender condition={type === "browser"}>
-                <img src={cropData} className={`${preCls}__preview-browser-img`}/>
-                <span className={`${preCls}__preview-browser-name`}>一体化人才管理云平台</span>
-                <span className={`${preCls}__preview-browser-title`}>{item?.previewTitle}</span>
-              </ConditionRender>
-						</div>
-					</div>
-          }
-				<div className={`${preCls}__title`}>
-					<input
-						accept={item?.accept}
-						type="file"
-						onChange={onChange}
-						className={classNames(`${preCls}__title-input`, { [`${preCls}__title-input--show`]: image })}
+    setImage("");
+  };
+
+  return (
+    <Dialog
+      visible={visible}
+      ref={modalRef}
+      width={480}
+      mask
+      centered
+      title={getLocale("Set_PI_Uploadavatar")}
+      noHeadLine
+      maskClosable={false}
+      onClose={handleCancel}
+      onCancel={handleCancel}
+      okText={getLocale("Mod_Save")}
+      noFooterLine
+      onOk={handleSaveInfo}
+    >
+      <div className={preCls}>
+        {!image
+          ? (
+            <div className={`${preCls}__upload`}>
+              <div className={`${preCls}__upload-preview`}>
+                <div className={`${preCls}__upload-right`}>
+                  <i className={classNames(`${preCls}__upload-right-icon`, "tu-icon-upload")} />
+                  <input
+                    type="file"
+                    onChange={onChange}
+                    className={`${preCls}__upload-right-input`}
+                    accept={item?.accept}
+                  />
+                  <span className={`${preCls}__upload-right-title`}>{getLocale("Pro_detail_ClickUpload")}</span>
+                  <span className={`${preCls}__upload-right-tips`}>
+                    {item?.tips}
+                  </span>
+                </div>
+              </div>
+              <div className={`${preCls}__upload-left`}>
+                <ConditionRender condition={type === "person"}>
+                  <div className={`${preCls}__upload-left-box1`} />
+                  <div className={`${preCls}__upload-left-box2`} />
+                  <div className={`${preCls}__upload-left-box3`} />
+                </ConditionRender>
+                <ConditionRender condition={type === "enterprise" || type === "browser"}>
+                  <div className={`${preCls}__upload-left-box`} />
+                  <span className={`${preCls}__upload-left-preview`}>{item?.previewTitle}</span>
+                </ConditionRender>
+              </div>
+            </div>
+          )
+          :					(
+            <div className={`${preCls}__img`}>
+              <Cropper
+                src={image}
+                style={{ height: 240, width: 240 }}
+                background={false}
+                responsive
+                autoCropArea={item?.autoCropArea}
+                checkOrientation
+                minCropBoxHeight={item?.minCropBoxHeight}
+                minCropBoxWidth={item?.minCropBoxWidth}
+                initialAspectRatio={item?.initialAspectRatio}
+                guides
+                preview=".img-preview"
+                ref={cropperRef}
+                crop={onCrop}
+              />
+              <div className={classNames(`${preCls}__preview-box`, { [`${preCls}__preview-box-bgc`]: type === "enterprise" }, { [`${preCls}__preview-box-browser`]: type === "browser" })}>
+                <ConditionRender condition={type === "person"}>
+                  <img src={cropData} className={`${preCls}__preview-box1`} />
+                  <img src={cropData} className={`${preCls}__preview-box2`} />
+                  <img src={cropData} className={`${preCls}__preview-box3`} />
+                </ConditionRender>
+                <ConditionRender condition={type === "enterprise"}>
+                  <img src={cropData} className={`${preCls}__preview-enterprise-img`} />
+                  <span className={`${preCls}__preview-enterprise-title`}>{item?.previewTitle}</span>
+                </ConditionRender>
+                <ConditionRender condition={type === "browser"}>
+                  <img src={cropData} className={`${preCls}__preview-browser-img`} />
+                  <span className={`${preCls}__preview-browser-name`}>一体化人才管理云平台</span>
+                  <span className={`${preCls}__preview-browser-title`}>{item?.previewTitle}</span>
+                </ConditionRender>
+              </div>
+            </div>
+          )}
+        <div className={`${preCls}__title`}>
+          <input
+            accept={item?.accept}
+            type="file"
+            onChange={onChange}
+            className={classNames(`${preCls}__title-input`, { [`${preCls}__title-input--show`]: image })}
             onMouseEnter={handleEnterAgain}
             onMouseLeave={handleLeaveAgain}
-					/>
-					<span className={classNames(`${preCls}__title-again`, { [`${preCls}__title-again--show`]: image },{ [`${preCls}__title-again--hover`]: isEnter })}>
-						{getLocale('Set_PI_Reupload')}
-					</span>
-					<ConditionRender condition={type === 'person'}>
-						<span className={`${preCls}__title-preview`}>{item?.previewTitle}</span>
-					</ConditionRender>
-				</div>
-			</div>
-		</Dialog>
-	);
-};
+          />
+          <span className={classNames(`${preCls}__title-again`, { [`${preCls}__title-again--show`]: image }, { [`${preCls}__title-again--hover`]: isEnter })}>
+            {getLocale("Set_PI_Reupload")}
+          </span>
+          <ConditionRender condition={type === "person"}>
+            <span className={`${preCls}__title-preview`}>{item?.previewTitle}</span>
+          </ConditionRender>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
 
 export default ChangePhoto;

package/src/components/upload-photo-modal/request-api.ts

@@ -2,32 +2,21 @@ import qs from "qs";
 import { rput, rpost } from "../../utils/request";
 import { getUserInfo } from "../../utils/bs-global";
 
-export const getUserInfoFun = () => {
-  return rpost("v1")(`manage/user/profile?toUserId=${getUserInfo().Id}`);
-};
+export const getUserInfoFun = () => rpost("v1")(`manage/user/profile?toUserId=${getUserInfo().Id}`);
 
-export const saveUserInfo = ({ data }) => {
-  return rput("v1")("manage/user/update", data, {
-    "headers": { "Content-Type": "multipart/form-data"},
-    "transformRequest": qs.stringify,
-  });
-};
+export const saveUserInfo = ({ data }) => rput("v1")("manage/user/update", data, {
+  headers: { "Content-Type": "multipart/form-data" },
+  transformRequest: qs.stringify,
+});
 
-export const saveUserPhoto = (params)  => {
-  return rpost("v1")("manage/user/avatar", params, {
-    "headers": { "Content-Type": "multipart/form-data"},
-  });
-}
+export const saveUserPhoto = (params) => rpost("v1")("manage/user/avatar", params, {
+  headers: { "Content-Type": "multipart/form-data" },
+});
 
-export const saveTenantLogo = (params)  => {
-  return rpost("v1")("tenant/update/logo", params, {
-    "headers": { "Content-Type": "multipart/form-data"},
-  });
-}
-
-export const saveBrowserIcon = (params)  => {
-  return rpost("v1")("tenant/update/browerIcon", params, {
-    "headers": { "Content-Type": "multipart/form-data"},
-  });
-}
+export const saveTenantLogo = (params) => rpost("v1")("tenant/update/logo", params, {
+  headers: { "Content-Type": "multipart/form-data" },
+});
 
+export const saveBrowserIcon = (params) => rpost("v1")("tenant/update/browerIcon", params, {
+  headers: { "Content-Type": "multipart/form-data" },
+});

package/src/components/upvote/attitude.ts

@@ -1,36 +1,34 @@
 import { getLocale } from "../../utils/getLocale";
 
-export default () => {
-  return [
-    {
-      type: 2,
-      tittle: getLocale('Pro_page_Int_Butt_Congratulate'),
-      img: require('./img/welldone.svg'),
-    },
-    {
-      type: 4,
-      tittle: getLocale('Pro_page_Int_Butt_Comeon'),
-      img: require('./img/fighting.svg'),
-    },
-    {
-      type: 3,
-      tittle: getLocale('Pro_page_Int_Butt_Finheart'),
-      img: require('./img/bixin.svg'),
-    },
-    {
-      type: 6,
-      tittle: '666',
-      img: require('./img/666.svg'),
-    },
-    {
-      type: 5,
-      tittle: getLocale('Pro_page_Int_Beinsightful'),
-      img: require('./img/nice.svg'),
-    },
-    {
-      type: 1,
-      tittle: getLocale('Mod_Kudos'),
-      img: require('./img/thumb-up.svg'),
-    },
-  ]
-};
+export default () => [
+  {
+    type: 2,
+    tittle: getLocale("Pro_page_Int_Butt_Congratulate"),
+    img: require("./img/welldone.svg"),
+  },
+  {
+    type: 4,
+    tittle: getLocale("Pro_page_Int_Butt_Comeon"),
+    img: require("./img/fighting.svg"),
+  },
+  {
+    type: 3,
+    tittle: getLocale("Pro_page_Int_Butt_Finheart"),
+    img: require("./img/bixin.svg"),
+  },
+  {
+    type: 6,
+    tittle: "666",
+    img: require("./img/666.svg"),
+  },
+  {
+    type: 5,
+    tittle: getLocale("Pro_page_Int_Beinsightful"),
+    img: require("./img/nice.svg"),
+  },
+  {
+    type: 1,
+    tittle: getLocale("Mod_Kudos"),
+    img: require("./img/thumb-up.svg"),
+  },
+];

package/src/components/upvote/index.tsx

@@ -5,10 +5,10 @@ import React, {
   useRef,
   useState,
 } from "react";
+import classnames from "classnames";
 import firework from "../firework";
 import VoteSelector from "./selector";
 import getAttitudeArr from "./attitude";
-import classnames from "classnames";
 import { praise, cancelPraise } from "./request-apis";
 import UpvoteListModal from "./upvoteListModal";
 import Tooltip from "../tooltip";
@@ -31,7 +31,7 @@ interface Props {
 }
 
 const getBackgroundImage = (type) => {
-  let selected = getAttitudeArr().find((a) => a.type == type);
+  const selected = getAttitudeArr().find((a) => a.type == type);
   if (selected) {
     return {
       backgroundImage: `url(${selected.img})`,
@@ -50,8 +50,8 @@ function UpvoteButton({
   onChange,
   handleRequest,
   popAlign = "right",
-  buttonType = '',
-  customUpvoteBtnCls = '',
+  buttonType = "",
+  customUpvoteBtnCls = "",
 }: Props): ReactElement {
   const [upvoteState, setUpvoteState] = useState({ type, count });
   const btnref = useRef<HTMLAnchorElement>();
@@ -65,8 +65,8 @@ function UpvoteButton({
   const setFirework = useCallback(() => {
     const { x, y } = (btnref.current as any).getBoundingClientRect();
     firework({
-      x: x,
-      y: y,
+      x,
+      y,
       images: getAttitudeArr().map((a) => a.img),
     });
   }, []);
@@ -84,7 +84,7 @@ function UpvoteButton({
             : upvoteState.count + 1;
           setUpvoteState({
             type,
-            count: count,
+            count,
           });
           setFirework();
           handleRequest
@@ -132,7 +132,7 @@ function UpvoteButton({
           upvoteState.count > 0 && setModalVisible(true);
         }}
       >
-        <Tooltip overlay={getLocale('Tasks_Tab_MyS_Kudosrec')} placement="top">
+        <Tooltip overlay={getLocale("Tasks_Tab_MyS_Kudosrec")} placement="top">
           <span>
             {renderCount
               ? renderCount(upvoteState.type, upvoteState.count)
@@ -148,12 +148,12 @@ function UpvoteButton({
     </div>
   );
 }
-export const UpvoteButtonForFeed = (props: Props) => {
+export function UpvoteButtonForFeed(props: Props) {
   return (
     <UpvoteButton
       {...props}
       renderBuntton={(type) => {
-        let text = !type ? getLocale('Mod_Kudos') : getLocale('Mod_Alreadyliked');
+        const text = !type ? getLocale("Mod_Kudos") : getLocale("Mod_Alreadyliked");
         return (
           <div style={{ display: "flex", alignItems: "center" }}>
             <div
@@ -170,11 +170,11 @@ export const UpvoteButtonForFeed = (props: Props) => {
           </div>
         );
       }}
-      renderCount={(type, count) => (count ? count : null)}
+      renderCount={(type, count) => (count || null)}
     />
   );
-};
-UpvoteButton.getAttitudes = () => getAttitudeArr().map(att => ({...att}))
+}
+UpvoteButton.getAttitudes = () => getAttitudeArr().map((att) => ({ ...att }));
 UpvoteButton.ForFeed = UpvoteButtonForFeed;
 
 export default UpvoteButton;