@titaui/pc 1.9.55 → 1.9.59

package/src/components/okrcase-library/okrcases-components/caseLibrary-cardList/okrcase-card.tsx

@@ -1,7 +1,9 @@
-import React, { useState, useCallback, useRef, useEffect } from "react";
-import { postApply, postLike } from '../../server/network.js'
-import { CardItem } from '../../index'
-import firework from '../../../firework'
+import React, {
+  useState, useCallback, useRef, useEffect,
+} from "react";
+import { postApply, postLike } from "../../server/network.js";
+import { CardItem } from "../../index";
+import firework from "../../../firework";
 import { getLocale } from "../../../../utils/getLocale";
 
 interface Props {
@@ -10,100 +12,123 @@ interface Props {
   index: number;
 }
 
-const OkrCaseCard = (props: Props) => {
-  const { onApplyTpl, cardInfo, index } = props
-  const { parentName, name, subelements, usedNum, id, isLike, like } = cardInfo
+function OkrCaseCard(props: Props) {
+  const { onApplyTpl, cardInfo, index } = props;
+  const {
+    parentName, name, subelements, usedNum, id, isLike, like,
+  } = cardInfo;
 
-  const [likeNum, setLikeNum] = useState(like)
-  const [hasLike, setHasLike] = useState(isLike)
-  const [usedNumber, setUsedNumber] = useState(usedNum)
+  const [likeNum, setLikeNum] = useState(like);
+  const [hasLike, setHasLike] = useState(isLike);
+  const [usedNumber, setUsedNumber] = useState(usedNum);
 
-  const [isApplyBtnShow, setIsApplyBtnShow] = useState(false)
+  const [isApplyBtnShow, setIsApplyBtnShow] = useState(false);
   // const [isBlue, setIsBlue] = useState(index % 4 > 1 ? true : false)
-  const isBlue = index % 4 > 1 ? true : false
-  const likeRef = useRef<any>()
+  const isBlue = index % 4 > 1;
+  const likeRef = useRef<any>();
 
   useEffect(() => {
-    setLikeNum(like)
-    setHasLike(isLike)
-    setUsedNumber(usedNum)
-  }, [])
-
+    setLikeNum(like);
+    setHasLike(isLike);
+    setUsedNumber(usedNum);
+  }, []);
 
   const setFirework = useCallback(() => {
     const { x, y } = (likeRef.current as any).getBoundingClientRect();
     firework({
-      x: x,
-      y: y,
-      images: [require('../../image/thumb-up.svg'), require('../../image/666.svg'), require('../../image/bixin.svg'), require('../../image/fighting.svg'), require('../../image/nice.svg'), require('../../image/welldone.svg')]
+      x,
+      y,
+      images: [require("../../image/thumb-up.svg"), require("../../image/666.svg"), require("../../image/bixin.svg"), require("../../image/fighting.svg"), require("../../image/nice.svg"), require("../../image/welldone.svg")],
     });
   }, []);
 
   const handleLikeClick = (isLike, id) => {
-
-    setHasLike(!hasLike)
+    setHasLike(!hasLike);
     if (isLike) {
-      postLike(0, id)
-      setLikeNum(likeNum - 1)
+      postLike(0, id);
+      setLikeNum(likeNum - 1);
     } else {
-      setLikeNum(likeNum + 1)
-      postLike(1, id)
-      setFirework()
+      setLikeNum(likeNum + 1);
+      postLike(1, id);
+      setFirework();
     }
-  }
+  };
 
   const handleApplyBtnClick = (id) => {
-    setUsedNumber(usedNumber + 1)
-    postApply(id)
-    onApplyTpl(cardInfo)
+    setUsedNumber(usedNumber + 1);
+    postApply(id);
+    onApplyTpl(cardInfo);
     // @ts-ignore
-    window.titaTracker &&
-      window.titaTracker('action').record({
-        action: getLocale('Per_Ass_Pop_button_Apply'),
-        actionGroup: getLocale('OKR_OKRex_Casebase'),
-        productName: getLocale('OKR_OKRex_Casebase')
-      })
-
-  }
+    window.titaTracker
+      && window.titaTracker("action").record({
+        action: getLocale("Per_Ass_Pop_button_Apply"),
+        actionGroup: getLocale("OKR_OKRex_Casebase"),
+        productName: getLocale("OKR_OKRex_Casebase"),
+      });
+  };
 
   return (
-    <div className="okr-cases-library__cardList__card"
+    <div
+      className="okr-cases-library__cardList__card"
       onMouseEnter={() => setIsApplyBtnShow(true)}
       onMouseLeave={() => setIsApplyBtnShow(false)}
     >
       <div className={`okr-cases-library__cardList__card__title
             ${isBlue ? "okr-cases-library__cardList__card__title-blue" : "okr-cases-library__cardList__card__title-red"}`}
       >
-        <div className="okr-cases-library__cardList__card__title__label">「{parentName}」</div>
-        <div className="okr-cases-library__cardList__card__title__name">O {name}</div>
-        {<div className={`okr-cases-library__cardList__card__title__btn 
+        <div className="okr-cases-library__cardList__card__title__label">
+          「
+          {parentName}
+          」
+        </div>
+        <div className="okr-cases-library__cardList__card__title__name">
+          O
+          {name}
+        </div>
+        <div
+          className={`okr-cases-library__cardList__card__title__btn 
                 ${isApplyBtnShow && "okr-cases-library__cardList__card__title__btn-show"}
-                ${isBlue ? 'okr-cases-library__cardList__card__title__btn-blue' : 'okr-cases-library__cardList__card__title__btn-red'}`
-        }
-          onClick={() => handleApplyBtnClick(id)}>{getLocale('Per_Ass_Pop_button_Apply')}</div>}
+                ${isBlue ? "okr-cases-library__cardList__card__title__btn-blue" : "okr-cases-library__cardList__card__title__btn-red"}`}
+          onClick={() => handleApplyBtnClick(id)}
+        >
+          {getLocale("Per_Ass_Pop_button_Apply")}
+        </div>
       </div>
       <div className="okr-cases-library__cardList__card__content">
         {subelements.map((item, krindex) => (
-          <div className="okr-cases-library__cardList__card__content__kr" key={krindex} >
-            <div style={{ color: isBlue ? '#2879FF' : '#F05E5E', float: 'left', marginRight: '5px' }}>KR{krindex + 1} </div>
-            <div style={{ float: 'left', width: 'calc(100% - 36px)' }}> {item.name}</div>
+          <div className="okr-cases-library__cardList__card__content__kr" key={krindex}>
+            <div style={{ color: isBlue ? "#2879FF" : "#F05E5E", float: "left", marginRight: "5px" }}>
+              KR
+              {krindex + 1}
+            </div>
+            <div style={{ float: "left", width: "calc(100% - 36px)" }}>
+              {" "}
+              {item.name}
+            </div>
           </div>
         ))}
       </div>
-      <div className="okr-cases-library__cardList__card__footer" >
-        <div>{usedNumber}次套用</div>
-        <div style={{display:'flex',alignItems:'center'}}>
+      <div className="okr-cases-library__cardList__card__footer">
+        <div>
+          {usedNumber}
+          次套用
+        </div>
+        <div style={{ display: "flex", alignItems: "center" }}>
           {hasLike
-            ? <img src={require('../../image/thumb-up.svg')} onClick={() => handleLikeClick(hasLike, id)}
-              style={{ cursor: 'pointer' }} />
-            : <span className="tu-icon-dianzan" onClick={() => handleLikeClick(hasLike, id)} ref={likeRef} />
-          }
+            ? (
+              <img
+                src={require("../../image/thumb-up.svg")}
+                onClick={() => handleLikeClick(hasLike, id)}
+                style={{ cursor: "pointer" }}
+              />
+            )
+            : <span className="tu-icon-dianzan" onClick={() => handleLikeClick(hasLike, id)} ref={likeRef} />}
           {likeNum}
         </div>
       </div>
 
-    </div >
-  )
+    </div>
+  );
 }
 
-export default OkrCaseCard
+export default OkrCaseCard;

package/src/components/okrcase-library/okrcases-components/caseLibrary-main.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from "react";
-import OkrCaseCardLsit from './caseLibrary-cardList'
-import OkrEssay from '../../grid-layout/essay-component'
-import { CardList } from '../index'
+import OkrCaseCardLsit from "./caseLibrary-cardList";
+import OkrEssay from "../../grid-layout/essay-component";
+import { CardList } from "../index";
 import { isLocal } from "../../../utils/helpers";
 import { getLocale } from "../../../utils/getLocale";
 
@@ -21,55 +21,83 @@ interface Props {
   // isAsideFix: boolean;
 }
 
-
-const CaseLibraryMain = (props: Props) => {
-  const { onApplyTpl, cardList, isUnlock, okrCasesNum, handleShowSubmitOkrWindow,
+function CaseLibraryMain(props: Props) {
+  const {
+    onApplyTpl, cardList, isUnlock, okrCasesNum, handleShowSubmitOkrWindow,
     handleShowPayWindow, isfix, isLoading, activeNavId, onClose,
-    asideHeightRef, fixAsideTopScroll } = props
+    asideHeightRef, fixAsideTopScroll,
+  } = props;
 
-  //@ts-ignore
-  const { DeadLine } = BSGlobal.tenantAuthentication
-  //@ts-ignore
-  const { Name } = BSGlobal.loginUserInfo
+  // @ts-ignore
+  const { DeadLine } = BSGlobal.tenantAuthentication;
+  // @ts-ignore
+  const { Name } = BSGlobal.loginUserInfo;
 
   return (
-    <Fragment>
-      <div className='okr-cases-library__mainContainer'>
-        <OkrCaseCardLsit cardList={cardList} isUnlock={isUnlock} handleShowPayWindow={handleShowPayWindow}
-          handleShowSubmitOkrWindow={handleShowSubmitOkrWindow} onApplyTpl={onApplyTpl} isLoading={isLoading} />
-        <div className={"okr-cases-library__aside"}
-          style={{
-            right: `0px`,
-            top: `${fixAsideTopScroll}px`,
-            //@ts-ignore
-            position: isfix && cardList.length ? 'absolute' : ''
-          }}
-          ref={asideHeightRef}>
-          {!isLocal() && <div className="okr-cases-library__aside__submitWant">
+    <div className="okr-cases-library__mainContainer">
+      <OkrCaseCardLsit
+        cardList={cardList}
+        isUnlock={isUnlock}
+        handleShowPayWindow={handleShowPayWindow}
+        handleShowSubmitOkrWindow={handleShowSubmitOkrWindow}
+        onApplyTpl={onApplyTpl}
+        isLoading={isLoading}
+      />
+      <div
+        className="okr-cases-library__aside"
+        style={{
+          right: "0px",
+          top: `${fixAsideTopScroll}px`,
+          // @ts-ignore
+          position: isfix && cardList.length ? "absolute" : "",
+        }}
+        ref={asideHeightRef}
+      >
+        {!isLocal() && (
+          <div className="okr-cases-library__aside__submitWant">
             <div
               className="okr-cases-library__aside__submitWant__btn"
               onClick={() => handleShowSubmitOkrWindow(true)}
             >
-              <img src={require('../image/笔.svg')} />提交我想要的OKR类型
+              <img src={require("../image/笔.svg")} />
+              提交我想要的OKR类型
             </div>
-            <div className="okr-cases-library__aside__submitWant__libraryNum">全国最大 OKR 案例库
-              <span style={{ color: '#F05E5E' }}> {okrCasesNum}</span> {getLocale('OKR_MyO_E_Mumber')}
+            <div className="okr-cases-library__aside__submitWant__libraryNum">
+              全国最大 OKR 案例库
+              <span style={{ color: "#F05E5E" }}>
+                {" "}
+                {okrCasesNum}
+              </span>
+              {" "}
+              {getLocale("OKR_MyO_E_Mumber")}
             </div>
-          </div>}
-          {isUnlock
-            ? <div className="okr-cases-library__aside__memberInfo">
+          </div>
+        )}
+        {isUnlock
+          ? (
+            <div className="okr-cases-library__aside__memberInfo">
               <div className="okr-cases-library__aside__memberInfo__name">
-                {Name}的<b> VIP </b>会员</div>
-              <p className="okr-cases-library__aside__memberInfo__deadLine">有效日期至：{DeadLine}</p>
+                {Name}
+                的
+                <b> VIP </b>
+                会员
+              </div>
+              <p className="okr-cases-library__aside__memberInfo__deadLine">
+                有效日期至：
+                {DeadLine}
+              </p>
             </div>
-            : <div className="okr-cases-library__aside__advertise"
-              onClick={() => handleShowPayWindow(true)} />
-          }
-          <OkrEssay essayTypeId={activeNavId} _className="okr-cases-library__aside__essay" />
-        </div>
+          )
+          : (
+            <div
+              className="okr-cases-library__aside__advertise"
+              onClick={() => handleShowPayWindow(true)}
+            />
+          )}
+        <OkrEssay essayTypeId={activeNavId} _className="okr-cases-library__aside__essay" />
       </div>
-    </Fragment >
-  )
+    </div>
+  );
 }
 
-export default CaseLibraryMain
+export default CaseLibraryMain;

package/src/components/okrcase-library/okrcases-components/caseLibrary-nav.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, Fragment } from "react";
-import SlideInput from '../../slider-input'
-import { NavList, CardList } from '../index'
+import SlideInput from "../../slider-input";
+import { NavList, CardList } from "../index";
 
 interface Props {
   navList: NavList;
@@ -16,63 +16,81 @@ interface Props {
   fixNavTopScroll: number;
 }
 
-const CaseLibraryNav = (props: Props) => {
+function CaseLibraryNav(props: Props) {
+  const {
+    navList, isfix, activeNavId, handleNavItemClick, handleSearch,
+    onClose, secondNavList, secondActiveNavId, handleSecondNavItemClick, cardList, fixNavTopScroll,
+  } = props;
 
-  const { navList, isfix, activeNavId, handleNavItemClick, handleSearch,
-    onClose, secondNavList, secondActiveNavId, handleSecondNavItemClick, cardList, fixNavTopScroll } = props
-
-  const [isSearchOpen, setIsSearchOpen] = useState(false)
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
 
   return (
-    <Fragment>
-      {isfix && <div style={{ height: '56px' }} id='NavAnchor' />}
-      <div className={`okr-cases-library__navFirst 
-            ${isfix && cardList.length && 'okr-cases-library__navFirst-fixed'}`}
+    <>
+      {isfix && <div style={{ height: "56px" }} id="NavAnchor" />}
+      <div
+        className={`okr-cases-library__navFirst 
+            ${isfix && cardList.length && "okr-cases-library__navFirst-fixed"}`}
         style={{ top: fixNavTopScroll }}
       >
         {
           navList.map((item) => (
-            <div className={`okr-cases-library__navFirst__item ${item.id === activeNavId && 'okr-cases-library__navFirst__item-active'} `}
-              key={item.id} onClick={() => handleNavItemClick(item.id)}
-            >{item.name}
+            <div
+              className={`okr-cases-library__navFirst__item ${item.id === activeNavId && "okr-cases-library__navFirst__item-active"} `}
+              key={item.id}
+              onClick={() => handleNavItemClick(item.id)}
+            >
+              {item.name}
             </div>
           ))
         }
-        {isfix &&
-          <Fragment>
-            {isSearchOpen && <div className="transparent-mask" style={{ right: '220px' }} />}
-            <div className="okr-cases-library__navFirst-slideInput-wapper"
-              style={{ width: isSearchOpen ? '200px' : '32px', right: onClose ? '70px' : '20px' }}>
+        {isfix
+          && (
+          <>
+            {isSearchOpen && <div className="transparent-mask" style={{ right: "220px" }} />}
+            <div
+              className="okr-cases-library__navFirst-slideInput-wapper"
+              style={{ width: isSearchOpen ? "200px" : "32px", right: onClose ? "70px" : "20px" }}
+            >
               <SlideInput
                 style={{
-                  position: 'absolute',
-                  right: 0
+                  position: "absolute",
+                  right: 0,
                 }}
                 placeholder="请输入关键字来搜索"
                 onChange={handleSearch}
-                onActive={() => { setIsSearchOpen(true) }}
-                onClose={() => { setIsSearchOpen(false) }}
+                onActive={() => { setIsSearchOpen(true); }}
+                onClose={() => { setIsSearchOpen(false); }}
               />
             </div>
-          </Fragment>
-        }
-        {onClose && isfix && <div className="okr-cases-library__navFirst__closeBtn" onClick={() => onClose()}>
+          </>
+          )}
+        {onClose && isfix && (
+        <div className="okr-cases-library__navFirst__closeBtn" onClick={() => onClose()}>
           <div className="tu-icon-canceled" />
-        </div>}
-      </div >
+        </div>
+        )}
+      </div>
       {
-        (!!secondNavList.length) && <div className='okr-cases-library__navSecond'>
+        (!!secondNavList.length) && (
+        <div className="okr-cases-library__navSecond">
           {
             secondNavList.map((item) => (
-              <div className={`okr-cases-library__navSecond__item ${item.id === secondActiveNavId && 'okr-cases-library__navSecond__item-active'} `}
-                key={item.id} onClick={() => handleSecondNavItemClick(item.id, item.name)}
-              >{item.name} </div>
+              <div
+                className={`okr-cases-library__navSecond__item ${item.id === secondActiveNavId && "okr-cases-library__navSecond__item-active"} `}
+                key={item.id}
+                onClick={() => handleSecondNavItemClick(item.id, item.name)}
+              >
+                {item.name}
+                {" "}
+
+              </div>
             ))
           }
         </div>
+        )
       }
-    </Fragment >
-  )
+    </>
+  );
 }
 
-export default CaseLibraryNav
+export default CaseLibraryNav;

package/src/components/okrcase-library/okrcases-components/caseLibray-header.tsx

@@ -6,7 +6,7 @@ interface Props {
   handleSearch: Function;
 }
 
-const CaseLibraryHeader = (props: Props) => {
+function CaseLibraryHeader(props: Props) {
   const { onClose, handleSearch } = props;
 
   const searchRef = useRef<any>();
@@ -47,6 +47,6 @@ const CaseLibraryHeader = (props: Props) => {
       )}
     </div>
   );
-};
+}
 
 export default CaseLibraryHeader;