@titaui/pc 1.9.53 → 1.9.57

package/src/components/period-selector/common.ts

@@ -1,10 +1,10 @@
-import moment from "moment";
 import { getLocale, isEn } from "../../utils/getLocale";
 import { SelectedInterface, PeriodObj } from "./type";
+import moment from "moment";
 import { getMonth } from "../../utils/constant";
 
 export const dealSelectedPeriodData = (period: string) => {
-  const option: any = {};
+  let option: any = {};
   option.cycleType = period == "-1" ? "-1" : period.substring(0, 1);
   option.yqmNum = period.substring(2) == "" ? "0" : period.substring(2);
   return option;
@@ -12,34 +12,34 @@ export const dealSelectedPeriodData = (period: string) => {
 
 export const dealYearsRange = (
   yearsRange: number[],
-  showAllYears?: boolean,
+  showAllYears?: boolean
 ) => {
   let yearsData: PeriodObj[] = [];
   if (yearsRange.length) {
     if (yearsRange.length > 1 && showAllYears) {
       yearsData = [
         {
-          title: `${getLocale("OKR_MyO_Butt_Allyears")}`,
+          title: `${getLocale('OKR_MyO_Butt_Allyears')}`,
           order: ["-1"],
           checked: false,
         },
       ];
     }
-    const startYear = yearsRange[0];
-    const endYear = yearsRange[yearsRange.length - 1];
-    for (let i = startYear; i <= endYear; i++) {
+    let startYear = yearsRange[0];
+    let endYear = yearsRange[yearsRange.length - 1];
+    for (var i = startYear; i <= endYear; i++) {
       yearsData.push({
         checked: false,
-        order: [`${i}`],
-        title: `${i}`,
+        order: [i + ""],
+        title: i + "",
       });
     }
   } else {
-    const nowYear = new Date().getFullYear();
+    let nowYear = new Date().getFullYear();
     yearsData = [
       {
-        title: `${nowYear}`,
-        order: [`${nowYear}`],
+        title: nowYear + "",
+        order: [nowYear + ""],
         checked: false,
       },
     ];
@@ -49,16 +49,17 @@ export const dealYearsRange = (
 
 export const formatPeriod = (selected: SelectedInterface) => {
   if (!selected) return "";
-  const quarter = ["", `${getLocale("OKR_MyO_Pop_1stQuarter")}`, `${getLocale("OKR_MyO_Pop_2ndQuarter")}`, `${getLocale("OKR_MyO_Pop_3rdQuarter")}`, `${getLocale("OKR_MyO_Pop_4thQuarter")}`];
-  let cycleDate = "";
-  const annualNum = selected.annualNum == "-1" ? `${getLocale("OKR_MyO_Butt_Allyears")}` : `${selected.annualNum}${isEn ? "" : "年"}`;
+  var quarter = ["", `${getLocale('OKR_MyO_Pop_1stQuarter')}`, `${getLocale('OKR_MyO_Pop_2ndQuarter')}`, `${getLocale('OKR_MyO_Pop_3rdQuarter')}`, `${getLocale('OKR_MyO_Pop_4thQuarter')}`];
+  var cycleDate = "";
+  var annualNum =
+    selected.annualNum == "-1" ? `${getLocale('OKR_MyO_Butt_Allyears')}` : selected.annualNum + `${isEn ? '' : '年'}`;
   const month = getMonth();
   switch (`${selected.cycleType}`) {
     case "-1":
-      cycleDate = `${getLocale("OKR_MyO_Butt_AllStatee")}`;
+      cycleDate = `${getLocale('OKR_MyO_Butt_AllStatee')}`;
       break;
     case "1":
-      cycleDate = `${getLocale("OKR_MyO_Pop_Year")}`;
+      cycleDate = `${getLocale('OKR_MyO_Pop_Year')}`;
       break;
     case "2":
       // 季度
@@ -68,27 +69,27 @@ export const formatPeriod = (selected: SelectedInterface) => {
       cycleDate = month[Number(selected.yqmNum) - 1];
       break;
     case "4":
-      cycleDate = `${month[Number(selected.yqmNum) - 1]} - ${
-        month[((Number(selected.yqmNum) + 1) % 12 || 12) - 1]
+      cycleDate = `${month[Number(selected.yqmNum)-1]} - ${
+        month[((Number(selected.yqmNum) + 1) % 12 || 12)-1]
       }`;
       break;
     case "5":
-      cycleDate = selected.yqmNum == "1" ? `${getLocale("OKR_MyO_Pop_Firsthalf")}` : `${getLocale("OKR_MyO_Pop_Secondhalf")}`;
+      cycleDate = selected.yqmNum == "1" ? `${getLocale('OKR_MyO_Pop_Firsthalf')}` : `${getLocale('OKR_MyO_Pop_Secondhalf')}`;
       break;
     default:
-      cycleDate = `${getLocale("Mod_Customization")}`;
+      cycleDate = `${getLocale('Mod_Customization')}`;
   }
-  return `${annualNum}  ${cycleDate}`;
+  return annualNum + "  " + cycleDate;
 };
 
 export const computeYearIndex = (
   currentYear: number,
   yearsData: PeriodObj[],
-  computeType: string,
+  computeType: string
 ) => {
   let newIndex;
-  const currentYearIndex = yearsData.findIndex(
-    (item) => Number(item.title) == currentYear,
+  let currentYearIndex = yearsData.findIndex(
+    (item) => Number(item.title) == currentYear
   );
   if (computeType == "add") {
     newIndex = currentYearIndex + 1;
@@ -136,9 +137,9 @@ export const getDateRangeByCycle = (cycle: ICycle, startMonth: number = 1) => {
     case "3": {
       return {
         startDate: `${cycle.annualNum}/${
-          Number(cycle.yqmNum) < 10 ? `0${cycle.yqmNum}` : cycle.yqmNum
+          Number(cycle.yqmNum) < 10 ? "0" + cycle.yqmNum : cycle.yqmNum
         }/01`,
-        endDate: moment(`${cycle.annualNum}/${cycle.yqmNum}/${1}`)
+        endDate: moment(cycle.annualNum + "/" + cycle.yqmNum + "/" + 1)
           .add(1, "month")
           .set("date", 0)
           .format("YYYY/MM/DD"),
@@ -180,53 +181,53 @@ export const getDateRangeByCycle = (cycle: ICycle, startMonth: number = 1) => {
 };
 
 export function getQuaterNum(month, startMonth = 1) {
-  const m = month >= startMonth ? month : month + 12;
+  let m = month >= startMonth ? month : month + 12;
   return Math.floor((m - startMonth) / 3) + 1;
 }
 
 export function getDefalutCycle(setting) {
   if (setting.isOpenQuarter) {
     const cycle = {
-      annualNum: `${new Date().getFullYear()}`,
+      annualNum: new Date().getFullYear() + "",
       cycleType: "2",
       yqmNum: `${getQuaterNum(
         new Date().getMonth() + 1,
-        setting.yearStartMonth,
+        setting.yearStartMonth
       )}`,
     };
     return {
       ...cycle,
       ...getDateRangeByCycle(cycle, setting.yearStartMonth),
     };
-  } if (setting.isOpenMonth) {
+  } else if (setting.isOpenMonth) {
     const cycle = {
-      annualNum: `${new Date().getFullYear()}`,
+      annualNum: new Date().getFullYear() + "",
       cycleType: "3",
-      yqmNum: `${new Date().getMonth() + 1}`,
+      yqmNum: new Date().getMonth() + 1 + "",
     };
     return {
       ...cycle,
       ...getDateRangeByCycle(cycle, setting.yearStartMonth),
     };
-  } if (setting.isOpenBimonthly) {
+  } else if (setting.isOpenBimonthly) {
     let month = new Date().getMonth() + 1;
     if (setting.yearStartMonth % 2 == 1) {
-      month -= (month % 2 == 1 ? 0 : 1);
+      month = month - (month % 2 == 1 ? 0 : 1);
     } else {
       month = month - (month % 2) || 12;
     }
     const cycle = {
-      annualNum: `${new Date().getFullYear()}`,
+      annualNum: new Date().getFullYear() + "",
       cycleType: "4",
-      yqmNum: `${month}`,
+      yqmNum: month + "",
     };
     return {
       ...cycle,
       ...getDateRangeByCycle(cycle, setting.yearStartMonth),
     };
-  } if (setting.isOpenHalfYear) {
+  } else if (setting.isOpenHalfYear) {
     const cycle = {
-      annualNum: `${new Date().getFullYear()}`,
+      annualNum: new Date().getFullYear() + "",
       cycleType: "5",
       yqmNum: "1",
     };
@@ -236,14 +237,14 @@ export function getDefalutCycle(setting) {
     };
   }
   const cycle = {
-    annualNum: `${new Date().getFullYear()}`,
+    annualNum: new Date().getFullYear() + "",
     cycleType: "1",
     yqmNum: "1",
   };
   return {
-    annualNum: `${new Date().getFullYear()}`,
+    annualNum: new Date().getFullYear() + "",
     cycleType: "1",
     yqmNum: "1",
     ...getDateRangeByCycle(cycle, setting.yearStartMonth),
   };
-}
+}

package/src/components/period-selector/components/button/index.tsx

@@ -1,8 +1,6 @@
 import React, { forwardRef } from "react";
+import { DefaultWrapper, PrimaryWrapper, BorderWrapper, LinkWrapper } from "./style";
 import { StyledComponent } from "styled-components";
-import {
-  DefaultWrapper, PrimaryWrapper, BorderWrapper, LinkWrapper,
-} from "./style";
 
 type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
 
@@ -13,7 +11,7 @@ export type Props = Overwrite<
     type?: "primary" | "default" | "border" | "link";
     size?: BtnSize,
     css?: any
-    theme?: "default" | "danger"
+    theme?: 'default' | 'danger'
   }
 >;
 
@@ -24,7 +22,7 @@ const Button: React.FC<Props> = function ({
   className,
   style,
   size = "m",
-  theme = "default",
+  theme = 'default',
   ...others
 }, ref) {
   let Wrapper: StyledComponent<"button", any, any> = DefaultWrapper;
@@ -43,7 +41,7 @@ const Button: React.FC<Props> = function ({
     }
     case "link": {
       Wrapper = LinkWrapper;
-      break;
+      break
     }
   }
 
@@ -51,7 +49,7 @@ const Button: React.FC<Props> = function ({
     <Wrapper
       onClick={onClick}
       {...others}
-      className={`${className} btn-size-${size}`}
+      className={className + ' btn-size-' + size}
       style={style}
       size={size}
       ref={ref}
@@ -61,5 +59,5 @@ const Button: React.FC<Props> = function ({
     </Wrapper>
   );
 };
-// @ts-ignore
+//@ts-ignore
 export default forwardRef(Button);

package/src/components/period-selector/components/button/style.ts

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import { BtnSize } from "./index";
-
 interface BtnProps {
   size: BtnSize;
 }
@@ -66,7 +65,8 @@ export const BorderWrapper = styled(DefaultWrapper)`
   background: transparent;
   border: 1px solid ${(p) => (p.theme == "danger" ? "#F05E5E" : "#2879ff")};
   :hover {
-    background: ${(p) => (p.theme == "danger" ? "rgba(240,94,94,.1)" : "#e9f1ff")};
+    background: ${(p) =>
+    p.theme == "danger" ? "rgba(240,94,94,.1)" : "#e9f1ff"};
     color: ${(p) => (p.theme == "danger" ? "#F05E5E" : "#2879ff")};
     border-color: ${(p) => (p.theme == "danger" ? "#F05E5E" : "#2879ff")};
   }
@@ -84,4 +84,4 @@ export const LinkWrapper = styled.button`
   :hover{
     color: #5c8eff;
   }
-`;
+`;

package/src/components/period-selector/components/selector/index.tsx

@@ -8,9 +8,7 @@ import {
 } from "../../common";
 import { getMockMonth, getMockPeriod, getMockQuarter } from "../../mockData";
 import { PeriodObj, SelectedInterface } from "../../type";
-import {
-  Head, List, Item, Icon, Title, Wrapper, PlaceHolder,
-} from "./style";
+import { Head, List, Item, Icon, Title, Wrapper, PlaceHolder } from "./style";
 import { getBSGlobal } from "../../helper";
 import { getMonth } from "../../../../utils/constant";
 
@@ -62,16 +60,18 @@ function PeriodList({
   }, [actived]);
   return (
     <List style={style}>
-      {periodData.map((item: PeriodObj, index: number) => (
-        <Item
-          className={item.order[0] == activeOrder[0] ? "active" : ""}
-          key={index}
-          onClick={() => onSelected(item.order[0])}
-          size={size}
-        >
-          {item.title}
-        </Item>
-      ))}
+      {periodData.map((item: PeriodObj, index: number) => {
+        return (
+          <Item
+            className={item.order[0] == activeOrder[0] ? "active" : ""}
+            key={index}
+            onClick={() => onSelected(item.order[0])}
+            size={size}
+          >
+            {item.title}
+          </Item>
+        );
+      })}
       {new Array(6).fill(1).map(() => (
         <PlaceHolder size={size} />
       ))}
@@ -80,10 +80,10 @@ function PeriodList({
 }
 
 function getDoubleMonthData(startMonth) {
-  const start = startMonth % 2 == 1 ? 1 : 2;
+  let start = startMonth % 2 == 1 ? 1 : 2;
   let month = start;
   const getNextMonth = (month, step = 1) => (month + step) % 12 || 12;
-  const datas: {
+  let datas: {
     title: string;
     order: string[];
     checked: boolean;
@@ -114,7 +114,7 @@ function getDoubleMonthData(startMonth) {
       month = getNextMonth(month, 2);
       if (month == start) break;
       datas.push({
-        title: `${monthLang[month - 1]} - ${monthLang[getNextMonth(month) - 1]}`,
+        title: `${monthLang[month - 1]} - ${monthLang[getNextMonth(month)-1]}`,
         order: [`4,${month}`],
         checked: false,
       });
@@ -138,7 +138,7 @@ function Selector({
   wrapperStyle,
   startMonth = 1,
 }: ISelectorProps) {
-  const [annualNum, setAnnualNum] = useState(`${new Date().getFullYear()}`);
+  const [annualNum, setAnnualNum] = useState(new Date().getFullYear() + "");
   const [annualNumIndex, setAnnualNumIndex] = useState(0);
   const [cycleType, setCycleType] = useState("-1");
   const [periodData, setPeriodData] = useState(getMockPeriod());
@@ -146,12 +146,12 @@ function Selector({
   const yearsRangeLen = dealYearsRange(yearsRange).length;
 
   function setYear(computeType: string, condition: boolean) {
-    const yearsData = dealYearsRange(yearsRange);
+    let yearsData = dealYearsRange(yearsRange);
     if (condition) {
-      const yearIndex = computeYearIndex(
+      let yearIndex = computeYearIndex(
         Number(annualNum),
         yearsData,
-        computeType,
+        computeType
       );
       setAnnualNum(yearsData[yearIndex].title);
       setAnnualNumIndex(yearIndex);
@@ -161,7 +161,7 @@ function Selector({
   }
 
   function handleSelected(period: string) {
-    const selected = {
+    let selected = {
       annualNum,
       cycleType: dealSelectedPeriodData(period).cycleType,
       yqmNum: dealSelectedPeriodData(period).yqmNum,
@@ -179,11 +179,11 @@ function Selector({
     setYqmNum(selected.yqmNum);
     setAnnualNumIndex(
       dealYearsRange(yearsRange).findIndex(
-        (item) => Number(item.title) == Number(selected.annualNum),
-      ),
+        (item) => Number(item.title) == Number(selected.annualNum)
+      )
     );
 
-    const periodDatas: any[] = [
+    let periodDatas: any[] = [
       showFullCycle && {
         title: `${getLocale("OKR_MyO_Butt_AllStatee")}`,
         order: ["-1"],
@@ -206,7 +206,7 @@ function Selector({
           title: getLocale("OKR_MyO_Pop_Secondhalf"),
           order: ["5,2"],
           checked: false,
-        },
+        }
       );
     }
     if (showQuarter) {
@@ -229,7 +229,9 @@ function Selector({
             className={`tu-icon-angle-left ${
               yearsRangeLen > 1 && annualNumIndex != 0 ? "" : "disabled"
             }`}
-            onClick={() => setYear("subtract", yearsRangeLen > 1 && annualNumIndex != 0)}
+            onClick={() =>
+              setYear("subtract", yearsRangeLen > 1 && annualNumIndex != 0)
+            }
           />
         )}
         <Title>{annualNum}</Title>
@@ -240,10 +242,12 @@ function Selector({
                 ? ""
                 : "disabled"
             }`}
-            onClick={() => setYear(
-              "add",
-              yearsRangeLen > 1 && annualNumIndex != yearsRangeLen - 1,
-            )}
+            onClick={() =>
+              setYear(
+                "add",
+                yearsRangeLen > 1 && annualNumIndex != yearsRangeLen - 1
+              )
+            }
           />
         )}
       </Head>
@@ -253,8 +257,8 @@ function Selector({
             cycleType == "-1"
               ? "-1"
               : cycleType == "1"
-                ? cycleType
-                : `${cycleType},${yqmNum}`
+              ? cycleType
+              : `${cycleType},${yqmNum}`
           }`,
         ]}
         periodData={periodData}
@@ -269,8 +273,8 @@ function Selector({
               cycleType == "-1"
                 ? "-1"
                 : cycleType == "1"
-                  ? cycleType
-                  : `${cycleType},${yqmNum}`
+                ? cycleType
+                : `${cycleType},${yqmNum}`
             }`,
           ]}
           periodData={getDoubleMonthData(startMonth)}
@@ -286,8 +290,8 @@ function Selector({
               cycleType == "-1"
                 ? "-1"
                 : cycleType == "1"
-                  ? cycleType
-                  : `${cycleType},${yqmNum}`
+                ? cycleType
+                : `${cycleType},${yqmNum}`
             }`,
           ]}
           size="s"

package/src/components/period-selector/components/selector/style.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const Wrapper = styled.div`
     width: 262px;
@@ -61,13 +61,13 @@ export const List = styled.div`
 `;
 
 const getItemWidthBySize = (size) => {
-  if (size == "s") return 48;
-  if (size == "m") return 72;
-  return 72;
-};
+    if(size == 's') return 48
+    if(size == 'm') return 72
+    return 72
+}
 
-export const Item = styled.a<{size:"s"|"m"}>`
-    width: ${(p) => getItemWidthBySize(p.size)}px;
+export const Item = styled.a<{size:'s'|'m'}>`
+    width: ${p => getItemWidthBySize(p.size)}px;
     padding: 8px;
     font-size: 12px;
     line-height: 17px;
@@ -89,7 +89,7 @@ export const Item = styled.a<{size:"s"|"m"}>`
     }
 `;
 
-export const PlaceHolder = styled.div<{size:"s"|"m"}>`
-    width: ${(p) => getItemWidthBySize(p.size)}px;
+export const PlaceHolder = styled.div<{size:'s'|'m'}>`
+    width: ${p => getItemWidthBySize(p.size)}px;
     height: 0;
-`;
+`;

package/src/components/period-selector/helper/index.ts

@@ -1,6 +1,7 @@
+
 export function getBSGlobal(name: string) {
   // @ts-ignore
-  return name && window.BSGlobal ? window.BSGlobal[name] : "";
+  return name && window.BSGlobal ? window.BSGlobal[name] : '';
 }
 
 /**
@@ -9,7 +10,7 @@ export function getBSGlobal(name: string) {
  * {"Id":200605,"Name":"wg","Domain":"abc.com","Abbreviation":"wg"}
  */
 export function getTenantInfo() {
-  return getBSGlobal("tenantInfo");
+  return getBSGlobal('tenantInfo');
 }
 /**
  * 获取当前登录用户信息
@@ -17,7 +18,7 @@ export function getTenantInfo() {
  *
  */
 export function getUserInfo() {
-  return getBSGlobal("loginUserInfo");
+  return getBSGlobal('loginUserInfo');
 }
 
 /**
@@ -28,8 +29,8 @@ export function getUserInfo() {
 export function getApiUrl(url: string) {
   const uid = getUserInfo().Id;
   const tid = getTenantInfo().Id;
-  const apiServer = getBSGlobal("apiPath");
-  return `${apiServer}/api/v1/${tid}/${uid}/${url}`;
+  const apiServer = getBSGlobal('apiPath');
+  return apiServer + '/api/v1/' + tid + '/' + uid + '/' + url;
 }
 
 export async function taker(url: string, method?: string, body?: any, header = {}) {
@@ -38,8 +39,8 @@ export async function taker(url: string, method?: string, body?: any, header = {
     // @ts-ignore
     settings.headers = {
       ...{
-        Accept: "application/json, application/xml, text/play, text/html, *.*",
-        "Content-Type": "application/json; charset=utf-8",
+        Accept: 'application/json, application/xml, text/play, text/html, *.*',
+        'Content-Type': 'application/json; charset=utf-8',
       },
       ...header,
     };
@@ -51,9 +52,9 @@ export async function taker(url: string, method?: string, body?: any, header = {
   // @ts-ignore
   if (settings.headers) {
     // @ts-ignore
-    if (settings.headers["Content-Type"] === "application/x-www-form-urlencoded") {
-      let bodyStr = "";
-      for (const key in body) {
+    if (settings.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
+      let bodyStr = '';
+      for (let key in body) {
         bodyStr += `${key}=${body[key]}&`;
       }
       bodyStr.substring(0, bodyStr.length - 1);
@@ -62,12 +63,12 @@ export async function taker(url: string, method?: string, body?: any, header = {
     }
   }
   // @ts-ignore
-  settings.credentials = "same-origin";
+  settings.credentials = 'same-origin';
   try {
-    const response = await fetch(url, settings);
+    let response = await fetch(url, settings);
     const data = await response.json();
     return data;
   } catch (e) {
     await Promise.reject(e);
   }
-}
+}

package/src/components/period-selector/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useRef } from "react";
 import moment from "moment";
-import classNames from "classnames";
 import Button from "./components/button";
 import Selector from "./components/selector";
+import classNames from "classnames";
 import Popup from "../popup";
 import { getApiUrl, taker } from "./helper";
 import { formatPeriod, getDateRangeByCycle, getDefalutCycle } from "./common";
@@ -95,7 +95,7 @@ function PeriodSelector({
     yearStartMonth: 1,
   });
   const [selectedPeriod, setSelectedPeriod] = useState<SelectedInterface>({
-    annualNum: `${new Date().getFullYear()}`,
+    annualNum: new Date().getFullYear() + "",
     cycleType: "2",
     yqmNum: `${moment().quarter()}`,
   });
@@ -125,11 +125,13 @@ function PeriodSelector({
           }
         })
         .catch((error) => console.log(error));
-    } else if (selected) {
-      setSelectedPeriod(selected);
     } else {
-      setSelectedPeriod(getDefalutCycle(cycleSetting));
-      onChange && onChange(getDefalutCycle(cycleSetting));
+      if (selected) {
+        setSelectedPeriod(selected);
+      } else {
+        setSelectedPeriod(getDefalutCycle(cycleSetting));
+        onChange && onChange(getDefalutCycle(cycleSetting));
+      }
     }
   }, [visible]);
 
@@ -167,24 +169,26 @@ function PeriodSelector({
         }}
       >
         <div className={className}>
-          {children || (
+          {children ? (
+            children
+          ) : (
             <Button
               type="default"
               style={
                 noBorder
                   ? {
-                    padding: "0",
-                    border: "none",
-                  }
+                      padding: "0",
+                      border: "none",
+                    }
                   : {
-                    padding: "6px 12px",
-                  }
+                      padding: "6px 12px",
+                    }
               }
             >
               <span style={{ lineHeight: "18px", whiteSpace: "nowrap" }}>
                 {formatPeriod(selectedPeriod)}
               </span>
-              <span className="titaui-period-selector__down-arrow" />
+              <span className="titaui-period-selector__down-arrow"></span>
             </Button>
           )}
         </div>

package/src/components/period-selector/style.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const Wrapper = styled.div`
 `;
@@ -13,4 +13,4 @@ export const Icon = styled.span`
   &.tu-icon-sort-down {
     margin-left: 12px;
   }
-`;
+`;

package/src/components/period-selector/type.ts

@@ -8,4 +8,4 @@ export interface PeriodObj {
   checked: boolean
   order: string[]
   title: string;
-}
+}