@titaui/pc 1.9.76 → 1.9.81

package/src/components/okr-flow/export-modal/index.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useState, useEffect, useRef, Fragment,
+  useState, useEffect, useRef, FC,
 } from "react";
 import classNames from "classnames";
 import Html2Canvas from "html2canvas";
@@ -25,7 +25,7 @@ interface IProps {
   showkr: boolean;
 }
 
-function ExportMapModal(props: IProps) {
+const ExportMapModal: FC<IProps> = (props: IProps) => {
   const {
     visible = false,
     onCloseHandler,
@@ -39,17 +39,19 @@ function ExportMapModal(props: IProps) {
   const [isExport, setIsExport] = useState(false);
   const modalRef = useRef();
   useEffect(() => {
-    if (isWx()) {
-      window.WWOpenData
-        && window.WWOpenData.enableCanvasSharing
-        && window.WWOpenData.enableCanvasSharing();
-      window.WWOpenData
-        && window.WWOpenData.initCanvas
-        && window.WWOpenData.initCanvas();
+    if (isWx() && window.WWOpenData) {
+      if (window.WWOpenData.enableCanvasSharing) {
+        window.WWOpenData.enableCanvasSharing();
+      }
+      if (window.WWOpenData.initCanvas) {
+        window.WWOpenData.initCanvas();
+      }
     }
   }, []);
   useEffect(() => {
-    visible && mapInstance && mapInstance.fitView();
+    if (visible && mapInstance) {
+      mapInstance.fitView();
+    }
   }, [visible, mapInstance]);
 
   const downloadImg = async () => {
@@ -57,7 +59,7 @@ function ExportMapModal(props: IProps) {
     const width = okrMapRef.clientWidth; // 获取dom 宽度
     const height = okrMapRef.clientHeight; // 获取dom 高度
     const canvas = document.createElement("canvas"); // 创建一个canvas节点
-    const scale = 20; // 定义任意放大倍数 支持小数
+    const scale = 10; // 定义任意放大倍数 支持小数   设置成20之后企业微信工作台导出不了
     canvas.width = width * scale; // 定义canvas 宽度 * 缩放
     canvas.height = height * scale; // 定义canvas高度 *缩放
     canvas.style.width = `${width}px`;
@@ -72,34 +74,41 @@ function ExportMapModal(props: IProps) {
       useCORS: true, // 【重要】开启跨域配置
     };
 
-    const result = await Html2Canvas(okrMapRef, opts);
-    if (isWx()) {
-      window.WWOpenData
-        && window.WWOpenData.enableCanvasSharing
-        && window.WWOpenData.enableCanvasSharing();
-      window.WWOpenData
-        && window.WWOpenData.initCanvas
-        && window.WWOpenData.initCanvas();
-    }
-    const imgUrl = result.toDataURL("image/png"); // 得到图片的base64编码数据
-    const url = await getBase64DownloadUrl(imgUrl.split(",")[1]);
-    const image = new Image();
-
-    image.setAttribute("crossOrigin", "anonymous");
-    image.onload = () => {
-      if (!url.Data.obj) {
-        Toast.Error("导出失败，请稍后重试", { canClose: false });
+    await Html2Canvas(okrMapRef, opts).then((result) => {
+      if (isWx() && window.WWOpenData) {
+        if (window.WWOpenData.enableCanvasSharing) {
+          window.WWOpenData.enableCanvasSharing();
+        }
+        if (window.WWOpenData.initCanvas) {
+          window.WWOpenData.initCanvas();
+        }
       }
-      const a = document.createElement("a"); // 生成一个a元素
-      const event = new MouseEvent("click"); // 创建一个单击事件
-      a.download = "okr地图"; // 设置图片名称
-      a.href = url.Data.obj; // 将生成的URL设置为a.href属性
-      a.dispatchEvent(event); // 触发a的单击事件
-      Toast.Success("导出成功");
+      const imgUrl = result.toDataURL("image/png"); // 得到图片的base64编码数据
+      getBase64DownloadUrl(imgUrl.split(",")[1]).then((url) => {
+        const image = new Image();
+
+        image.setAttribute("crossOrigin", "anonymous");
+        image.onload = () => {
+          if (!url.Data.obj) {
+            Toast.Error("导出失败，请稍后重试", { canClose: false });
+          }
+          const a = document.createElement("a"); // 生成一个a元素
+          const event = new MouseEvent("click"); // 创建一个单击事件
+          a.download = "okr地图"; // 设置图片名称
+          a.href = url.Data.obj; // 将生成的URL设置为a.href属性
+          a.dispatchEvent(event); // 触发a的单击事件
+          Toast.Success("导出成功");
+          setIsExport(false);
+          if (onCloseHandler) {
+            onCloseHandler();
+          }
+        };
+        image.src = imgUrl;
+      });
+    }).catch((err) => {
       setIsExport(false);
-      onCloseHandler && onCloseHandler();
-    };
-    image.src = imgUrl;
+      Toast.Error(err, { canClose: false });
+    });
   };
 
   const confirmHandler = () => {
@@ -107,7 +116,7 @@ function ExportMapModal(props: IProps) {
       Toast.Warning("正在导出中", { canClose: true });
       return;
     }
-    setIsExport(true);
+    // setIsExport(true);
     downloadImg();
   };
   const fitViewHandler = (instance) => {
@@ -178,5 +187,9 @@ function ExportMapModal(props: IProps) {
       </>
     </Dialog>
   );
-}
+};
+
+ExportMapModal.defaultProps = {
+  onCloseHandler: () => {},
+};
 export default ExportMapModal;

package/src/components/okr-progress-modal/helper.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from "react";
 import { getLocale } from "../../utils/getLocale";
 
-export const getO_SETTING = () => ({
+export const getOSetting = () => ({
   settingTitle: getLocale("OKR_MyO_Pop_Upd_Setmatically"),
   switchLabel: getLocale("OKR_MyO_Pop_Upd_Setmatically"),
   options: [
@@ -16,31 +16,35 @@ export const getO_SETTING = () => ({
       tooltip: getLocale("OKR_MyO_Pop_Upd_SubO"),
     },
   ],
-  getRecommandText: (autoUpdate = true, updateWay = 1, recommandProgressObj) => {
+  getRecommandText: (recommandProgressObj, autoUpdate = true, updateWay = 1) => {
     if (autoUpdate) {
-      if (updateWay == 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Pop_Upd_Automatic")}</span>;
-      if (updateWay == 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
-    } else {
-      const { childOkrProgress, childkrProgress } = recommandProgressObj;
-      const textArr = [];
-      childkrProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Pop_Upd_KRCom")}${childkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      childOkrProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      if (textArr.length == 0) return "";
-      return (
-        <>
-          <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
-          <span className="auto-update__recommand-tip">
-            （
-            {textArr.join("，")}
-            ）
-          </span>
-        </>
-      );
+      if (updateWay === 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Pop_Upd_Automatic")}</span>;
+      if (updateWay === 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
+      return <span />;
     }
+    const { childOkrProgress, childkrProgress } = recommandProgressObj;
+    const textArr = [];
+    if (childkrProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Pop_Upd_KRCom")}${childkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
+    }
+    if (childOkrProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
+    }
+    if (textArr.length === 0) return "";
+    return (
+      <>
+        <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
+        <span className="auto-update__recommand-tip">
+          （
+          {textArr.join("，")}
+          ）
+        </span>
+      </>
+    );
   },
 });
 
-export const getKR_SETTING = () => ({
+export const getKrSetting = () => ({
   settingTitle: getLocale("OKR_MyO_KRCompletion"),
   switchLabel: getLocale("OKR_MyO_SetKRcompletion"),
   options: [
@@ -55,31 +59,35 @@ export const getKR_SETTING = () => ({
       tooltip: getLocale("OKR_MyO_KRcompletionde"),
     },
   ],
-  getRecommandText: (autoUpdate = true, updateWay = 1, recommandProgressObj) => {
+  getRecommandText: (recommandProgressObj, autoUpdate = true, updateWay = 1) => {
     if (autoUpdate) {
-      if (updateWay == 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Automatic")}</span>;
-      if (updateWay == 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
-    } else {
-      const { childOkrProgress, childEProgress } = recommandProgressObj;
-      const textArr = [];
-      childEProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Ecompletion")}${childEProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      childOkrProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      if (textArr.length == 0) return "";
-      return (
-        <>
-          <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
-          <span className="auto-update__recommand-tip" style={{ marginLeft: 0 }}>
-            (
-            {textArr.join("，")}
-            )
-          </span>
-        </>
-      );
+      if (updateWay === 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Automatic")}</span>;
+      if (updateWay === 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
+      return <span />;
+    }
+    const { childOkrProgress, childEProgress } = recommandProgressObj;
+    const textArr = [];
+    if (childEProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Ecompletion")}${childEProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
+    }
+    if (childOkrProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
     }
+    if (textArr.length === 0) return "";
+    return (
+      <>
+        <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
+        <span className="auto-update__recommand-tip" style={{ marginLeft: 0 }}>
+          (
+          {textArr.join("，")}
+          )
+        </span>
+      </>
+    );
   },
 });
 
-export const transProgress = (progress) => (progress == -1 ? 0 : progress);
+export const transProgress = (progress) => (progress === -1 ? 0 : progress);
 
 export const getKrOptions = () => [
   {

package/src/components/okr-progress-modal/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, FC } from "react";
 import { Input, Modal, Tooltip } from "tita-ui";
 import classNames from "classnames";
 import { getKrRecommandProgress, getORecommandProgress } from "./request-apis";
 import Switch from "../switch";
 import Textarea from "./textarea";
 import {
-  getO_SETTING, getKR_SETTING, transProgress, getKrOptions, getOptions,
+  getOSetting, getKrSetting, transProgress, getKrOptions, getOptions,
 } from "./helper";
 import {
   ErrorTip, List, Item, Icon, Options, OptionsWrapper,
@@ -15,12 +15,12 @@ import { getLocale } from "../../utils/getLocale";
 import { inputWordTrans } from "../../utils/i18n-front-translate";
 import "./index.scss";
 
-const ProgressModal: React.FC<IProgressModalProps> = (props) => {
+const ProgressModal: FC<IProgressModalProps> = (props:IProgressModalProps) => {
   const {
     maxLength, okrInfo, onClose, onOk, title = window.getLocale("OKR_MyO_Prog_Butt_Update"), visible, isKr,
   } = props;
 
-  const configure = isKr ? getKR_SETTING() : getO_SETTING();
+  const configure = isKr ? getKrSetting() : getOSetting();
 
   const reg = /^[0-9]*[1-9][0-9]*$/;
   const [errorProgress, setErrorProgress] = useState(false);
@@ -34,10 +34,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
   const [selected, setSelected] = useState<number>(
     isKr ? okrInfo.riskLevel : okrInfo.manualRiskLevel,
   );
-  const [ShowKrProgress] = useState(() =>
-    // @ts-ignore
-    window.BSGlobal.OkrAdvancedSetting.KRSetting.ShowKrProgress);
-
+  const [ShowKrProgress] = useState(window?.BSGlobal?.OkrAdvancedSetting?.KRSetting?.ShowKrProgress);
   const [autoUpdate, setUpdate] = useState(true); // 设置自动更新
   const [updateWay, setUpdateWay] = useState(0); // 自动更新方式 0: 关闭， 1: 根据关见成果， 2: 子目标
   const [settingFolded, setSettingFold] = useState(false);
@@ -46,11 +43,11 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
   const getRecommendProgress = async () => {
     const getRecommandHandler = isKr ? getKrRecommandProgress : getORecommandProgress;
     const data = await getRecommandHandler(isKr ? okrInfo.mileStoneId : okrInfo.workId);
-    if (data.Code == 1) {
+    if (data.Code === 1) {
       const { UpdateProgressWay, Progress } = data.Data;
       setRecommandProgressObj(data.Data);
-      setUpdate(UpdateProgressWay != 0);
-      setUpdateWay(UpdateProgressWay == 0 ? 1 : UpdateProgressWay);
+      setUpdate(UpdateProgressWay !== 0);
+      setUpdateWay(UpdateProgressWay === 0 ? 1 : UpdateProgressWay);
       setProgress(Progress);
     }
   };
@@ -66,9 +63,12 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
   useEffect(() => {
     if (!autoUpdate) return;
     const { childOkrProgress, childkrProgress, childEProgress } = recommandProgressObj;
-    updateWay == 1
-      && setProgress(isKr ? transProgress(childEProgress) : transProgress(childkrProgress));
-    updateWay == 2 && setProgress(transProgress(childOkrProgress));
+    if (updateWay === 1) {
+      setProgress(isKr ? transProgress(childEProgress) : transProgress(childkrProgress));
+    }
+    if (updateWay === 2) {
+      setProgress(transProgress(childOkrProgress));
+    }
   }, [updateWay, autoUpdate, recommandProgressObj]);
 
   let descriptionText = (
@@ -131,6 +131,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
       title={title}
       visible={visible}
       width={600}
+      zIndex={2400}
     >
       <List>
         <Item>
@@ -165,7 +166,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
                 <Icon
                   color={option.color}
                   className={
-                    selected == option.id ? "tu-icon-singlebox-avtive" : "tu-icon-singlebox-have"
+                    selected === option.id ? "tu-icon-singlebox-avtive" : "tu-icon-singlebox-have"
                   }
                 />
                 <p>{option.text}</p>
@@ -195,7 +196,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
                       <span
                         className={classNames(
                           "auto-update-setting__radio",
-                          `auto-update-setting__radio${updateWay == option.key ? "--selected" : ""
+                          `auto-update-setting__radio${updateWay === option.key ? "--selected" : ""
                           }`,
                         )}
                       />

package/src/components/okr-share/index.tsx

@@ -11,7 +11,7 @@ interface Props {
   data: any;
 }
 
-const ShareContent = function ({ closeModal, getModalRef, data }: Props) {
+const ShareContent = ({ closeModal, getModalRef, data }: Props) => {
   const [shareImg, setShareImg] = useState<string>();
   const [showPublish, setShowPublish] = useState(false);
   return (
@@ -43,12 +43,14 @@ const ShareContent = function ({ closeModal, getModalRef, data }: Props) {
 };
 
 interface ShareProps {
-  shareComponent
   data: any;
   visible:boolean;
+  zIndex?: number;
   onClose: () => void
 }
-const OkrShare: React.FC<ShareProps> = ({ data, visible, onClose }) => {
+const OkrShare: React.FC<ShareProps> = ({
+  data, visible, onClose, zIndex,
+}) => {
   const modalRef = useRef<any>();
 
   return (
@@ -60,6 +62,7 @@ const OkrShare: React.FC<ShareProps> = ({ data, visible, onClose }) => {
         // maskClosable
       onCancel={() => onClose()}
       ref={modalRef}
+      zIndex={zIndex}
     >
       {visible ? (
         <ShareContent
@@ -71,5 +74,7 @@ const OkrShare: React.FC<ShareProps> = ({ data, visible, onClose }) => {
     </Modal>
   );
 };
-
+OkrShare.defaultProps = {
+  zIndex: 1300,
+};
 export default OkrShare;

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

@@ -5,8 +5,8 @@ import { getMonth } from "../../utils/constant";
 
 export const dealSelectedPeriodData = (period: string) => {
   const option: any = {};
-  option.cycleType = period == "-1" ? "-1" : period.substring(0, 1);
-  option.yqmNum = period.substring(2) == "" ? "0" : period.substring(2);
+  option.cycleType = Number(period) === -1 ? "-1" : period.substring(0, 1);
+  option.yqmNum = period.substring(2) === "" ? "0" : period.substring(2);
   return option;
 };
 
@@ -27,7 +27,7 @@ export const dealYearsRange = (
     }
     const startYear = yearsRange[0];
     const endYear = yearsRange[yearsRange.length - 1];
-    for (let i = startYear; i <= endYear; i++) {
+    for (let i = startYear; i <= endYear; i += 1) {
       yearsData.push({
         checked: false,
         order: [`${i}`],
@@ -51,7 +51,7 @@ 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 ? "" : "年"}`;
+  const annualNum = Number(`${selected.annualNum}`) === -1 ? `${getLocale("OKR_MyO_Butt_Allyears")}` : `${selected.annualNum}${isEn ? "" : "年"}`;
   const month = getMonth();
   switch (`${selected.cycleType}`) {
     case "-1":
@@ -73,7 +73,7 @@ export const formatPeriod = (selected: SelectedInterface) => {
       }`;
       break;
     case "5":
-      cycleDate = selected.yqmNum == "1" ? `${getLocale("OKR_MyO_Pop_Firsthalf")}` : `${getLocale("OKR_MyO_Pop_Secondhalf")}`;
+      cycleDate = Number(`${selected.yqmNum}`) === 1 ? `${getLocale("OKR_MyO_Pop_Firsthalf")}` : `${getLocale("OKR_MyO_Pop_Secondhalf")}`;
       break;
     default:
       cycleDate = `${getLocale("Mod_Customization")}`;
@@ -88,9 +88,9 @@ export const computeYearIndex = (
 ) => {
   let newIndex;
   const currentYearIndex = yearsData.findIndex(
-    (item) => Number(item.title) == currentYear,
+    (item) => Number(item.title) === currentYear,
   );
-  if (computeType == "add") {
+  if (computeType === "add") {
     newIndex = currentYearIndex + 1;
   } else {
     newIndex = currentYearIndex - 1;
@@ -112,6 +112,12 @@ export const getDateRangeByCycle = (cycle: ICycle, startMonth: number = 1) => {
     };
   }
   switch (cycle.cycleType) {
+    case "-1": {
+      return {
+        startDate: "",
+        endDate: "",
+      };
+    }
     case "1": {
       const start = moment()
         .year(Number(cycle.annualNum))
@@ -159,7 +165,7 @@ export const getDateRangeByCycle = (cycle: ICycle, startMonth: number = 1) => {
         .year(Number(cycle.annualNum))
         .month(startMonth - 1)
         .date(1);
-      if (cycle.yqmNum == "2") start.add(6, "M");
+      if (cycle.yqmNum === "2") start.add(6, "M");
       return {
         startDate: start.format("YYYY/MM/DD"),
         endDate: start.add(5, "month").endOf("M").format("YYYY/MM/DD"),
@@ -210,8 +216,8 @@ export function getDefalutCycle(setting) {
     };
   } if (setting.isOpenBimonthly) {
     let month = new Date().getMonth() + 1;
-    if (setting.yearStartMonth % 2 == 1) {
-      month -= (month % 2 == 1 ? 0 : 1);
+    if (setting.yearStartMonth % 2 === 1) {
+      month -= (month % 2 === 1 ? 0 : 1);
     } else {
       month = month - (month % 2) || 12;
     }

package/src/pages/okr-map/export-modules/okr-map/header/index.scss

@@ -1,4 +1,5 @@
-$font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+$font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica,
+  sans-serif, PingFang SC, Microsoft YaHei;
 
 .titapage-okr-map {
   &__header {
@@ -6,7 +7,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
     background: #ffffff;
     box-shadow: 0px 0px 8px 0px #e9eef3;
     position: relative;
-    border-bottom: 1px solid #E9ECF0;
+    border-bottom: 1px solid #e9ecf0;
     &__folded {
       // top: -114px;
       height: 0;
@@ -65,7 +66,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
         vertical-align: middle;
       }
       &:hover {
-        color: #2879FF;
+        color: #2879ff;
         &:before {
           background-image: url('../../../images/trigger-hover.svg');
         }
@@ -103,11 +104,11 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
           }
         }
       }
-      &-showkr,&-level {
-
+      &-showkr,
+      &-level {
         padding: 5px 20px;
         &:hover {
-          background: #F7F8FA;
+          background: #f7f8fa;
         }
       }
       &--show-more {
@@ -119,21 +120,22 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
         height: 30px;
         line-height: 30px;
         cursor: pointer;
-        color: #3F4755;
+        color: #3f4755;
         font-family: $font-family;
         font-size: 12px;
         &:after {
           position: absolute;
           display: inline-block;
-          background: url('../../../images/line-down-arrow.svg') transparent no-repeat 50% 50%;
-          content: "";
+          background: url('../../../images/line-down-arrow.svg') transparent
+            no-repeat 50% 50%;
+          content: '';
           height: 6px;
           width: 10px;
           right: 0;
           top: calc(50% - 3px);
         }
       }
-      
+
       &-btns {
         position: absolute;
         vertical-align: middle;
@@ -145,22 +147,24 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   }
   &__show-more-popup {
     padding: 11px 0;
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
-    border: 1px solid #E9ECF0;
+    border: 1px solid #e9ecf0;
     border-radius: 2px;
   }
 }
 .titapage-okr-map__dark {
   .titapage-okr-map__content-search {
     &:before {
-      background: url(../../../images/line-down-arrow-dark.svg) transparent no-repeat 50% 50%;
+      background: url(../../../images/line-down-arrow-dark.svg) transparent
+        no-repeat 50% 50%;
       background-size: 100%;
     }
   }
   .tui-select-selector {
     &:before {
-      background: url(../../../images/down-arrow-dark.svg) transparent no-repeat 50% 50%;
+      background: url(../../../images/down-arrow-dark.svg) transparent no-repeat
+        50% 50%;
       background-size: 100%;
     }
   }
@@ -212,7 +216,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
           border: none;
           color: #fff;
           &:hover {
-            background: #5c8EFF;
+            background: #5c8eff;
           }
         }
         .titaui-period-selector__down-arrow {
@@ -242,7 +246,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
           }
         }
         &:hover {
-          background-color: #515A69;
+          background-color: #515a69;
         }
       }
     }
@@ -261,14 +265,14 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   top: 0;
   bottom: 0;
 }
-.titapage-okr-map--kr-dialog{
+.titapage-okr-map--kr-dialog {
   &--title {
     &:before {
       display: inline-block;
       content: 'i';
       width: 16px;
       height: 16px;
-      background-color: #FFBC00;
+      background-color: #ffbc00;
       color: #fff;
       text-align: center;
       line-height: 16px;
@@ -281,8 +285,9 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   &--content {
     font-size: 14px;
     font-family: $font-family;
-    color: #6F7886;
+    color: #6f7886;
     line-height: 20px;
     padding: 0 32px;
+    display: block;
   }
 }