@titaui/pc 1.8.61 → 1.9.0

package/src/components/upvote/index.tsx

@@ -7,11 +7,12 @@ import React, {
 } from "react";
 import firework from "../firework";
 import VoteSelector from "./selector";
-import attitudeArr from "./attitude";
+import getAttitudeArr from "./attitude";
 import classnames from "classnames";
 import { praise, cancelPraise } from "./request-apis";
 import UpvoteListModal from "./upvoteListModal";
 import Tooltip from "../tooltip";
+import { getLocale } from "../../utils/getLocale";
 import "./index.scss";
 
 interface Props {
@@ -30,7 +31,7 @@ interface Props {
 }
 
 const getBackgroundImage = (type) => {
-  let selected = attitudeArr.find((a) => a.type == type);
+  let selected = getAttitudeArr().find((a) => a.type == type);
   if (selected) {
     return {
       backgroundImage: `url(${selected.img})`,
@@ -66,7 +67,7 @@ function UpvoteButton({
     firework({
       x: x,
       y: y,
-      images: attitudeArr.map((a) => a.img),
+      images: getAttitudeArr().map((a) => a.img),
     });
   }, []);
   return (
@@ -131,7 +132,7 @@ function UpvoteButton({
           upvoteState.count > 0 && setModalVisible(true);
         }}
       >
-        <Tooltip overlay={"点赞记录"} placement="top">
+        <Tooltip overlay={getLocale('Tasks_Tab_MyS_Kudosrec')} placement="top">
           <span>
             {renderCount
               ? renderCount(upvoteState.type, upvoteState.count)
@@ -152,7 +153,7 @@ export const UpvoteButtonForFeed = (props: Props) => {
     <UpvoteButton
       {...props}
       renderBuntton={(type) => {
-        let text = !type ? "点赞" : "已赞";
+        let text = !type ? getLocale('Mod_Kudos') : getLocale('Mod_Alreadyliked');
         return (
           <div style={{ display: "flex", alignItems: "center" }}>
             <div
@@ -173,7 +174,7 @@ export const UpvoteButtonForFeed = (props: Props) => {
     />
   );
 };
-UpvoteButton.getAttitudes = () => attitudeArr.map(att => ({...att}))
+UpvoteButton.getAttitudes = () => getAttitudeArr().map(att => ({...att}))
 UpvoteButton.ForFeed = UpvoteButtonForFeed;
 
 export default UpvoteButton;

package/src/components/upvote/selector.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, cloneElement, useCallback, useRef } from 'react';
 import Trigger from 'rc-trigger';
 import Queue from 'rc-queue-anim';
-import attitudeArr from './attitude';
+import getAttitudeArr from './attitude';
 
 type alignType = 'right'|'center'|'left';
 interface Props {
@@ -96,7 +96,7 @@ const VoteSelector: React.FC<Props> = ({ getPopupContainer, children, onSelect,a
                 onMouseOut={hide}
                 className='feed-upvote-selector'
               >
-                {attitudeArr.map((att) => (
+                {getAttitudeArr().map((att) => (
                   <div
                     key={att.type}
                     className='feed-upvote-selector__item'

package/src/components/upvote/upvoteListModal.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'r
 import { Avatar, Modal } from 'tita-ui';
 import { getPriseList } from './request-apis';
 import { OpenUserName } from '../../utils/open-data';
+import { getLocale } from '../../utils/getLocale';
 
 interface Props {
   feedId: string;
@@ -74,7 +75,7 @@ function UpvoteListModal({ feedId, visible, onClose }) {
     visible={visible}
     className='pull-screen-ignore document-mouse-event-ignore'
     destroyOnClose
-    title='点赞记录'
+    title={getLocale('Tasks_Tab_MyS_Kudosrec')}
     height={480}
     width={480}
     onCancel={onClose}

package/src/components/user-selector/action-btns/btn-cancel.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import {getLocale} from '../../../utils/getLocale';
 import './index.scss';
 
 export default props => {
   return <span className="persel-btn-cancel" onClick={props.onClick}>
-    <span>取消</span>
+    <span>{getLocale('Mod_Cancel')}</span>
   </span>
 }

package/src/components/user-selector/action-btns/btn-ok.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import {getLocale} from '../../../utils/getLocale';
 import './index.scss';
 
 export default props => {
   return <span className="persel-btn-ok" onClick={props.onClick}>
-    <span>确定</span>
+    <span>{getLocale('OKR_MyO_Butt_Determine')}</span>
   </span>
 }

package/src/components/user-selector/category-selector-panel/depart-tree.tsx

@@ -26,19 +26,20 @@ export default (props: Props) => {
     departOnly,
     sourceFrom,
     auth,
+    authType,
     isGetRoot,
     disabledDepartSelect,
   } = useContext(CommonContext);
 
   const onGetDepartTreeData = () => {
     return getTreeData('-1', {
-      departOnly, auth, isGetRoot, sourceFrom,
+      departOnly, auth, authType, isGetRoot, sourceFrom,
     });
   }
 
   const onLoadDepartNodes = nodeId => {
     return getTreeData(nodeId, {
-      departOnly, auth, isGetRoot, sourceFrom,
+      departOnly, auth, authType, isGetRoot, sourceFrom,
       'isLoadNodes': true
     });
   }

package/src/components/user-selector/category-selector-panel/index.tsx

@@ -1,22 +1,12 @@
 import React, { useContext, useState } from 'react';
 import Tabs, { TabPane } from '../../tabs';
+import { getPanesConfig } from '../constant';
 import { CommonContext } from '../context';
 import DepartTree from './depart-tree';
 import GroupTree from './group-tree';
 
 import './index.scss';
 
-const panesConfig = {
-  'depart': {
-    'label': '部门',
-    'Component': DepartTree
-  },
-  'group': {
-    'label': '群组',
-    'Component': GroupTree
-  }
-};
-
 interface Props {
   onSelect?: Function;
   selected?: any;
@@ -57,7 +47,7 @@ export default (props: Props) => {
         animated={{ 'inkBar': true, 'tabPane': true }}
       >
         {Object.keys(panes).map(panelKey => {
-          const { label, Component } = panesConfig[panelKey]
+          const { label, Component } = getPanesConfig()[panelKey]
           return <TabPane tab={label} key={panelKey}>
             {<Component
               onSelect={onSelect}
@@ -75,7 +65,7 @@ export default (props: Props) => {
       const panelKeys = Object.keys(panes);
       for (let i=0; i<panelKeys.length; i++) {
         if (panes[panelKeys[i]]) {
-          Component = panesConfig[panelKeys[i]].Component;
+          Component = getPanesConfig()[panelKeys[i]].Component;
           break;
         }
       }

package/src/components/user-selector/constant.ts

@@ -0,0 +1,16 @@
+import { getLocale } from '../../utils/getLocale';
+import DepartTree from './category-selector-panel/depart-tree';
+import GroupTree from './category-selector-panel/group-tree';
+
+export const getPanesConfig = () => {
+  return {
+    'depart': {
+      'label': getLocale('Mod_Department'),
+      'Component': DepartTree
+    },
+    'group': {
+      'label': getLocale('Mod_Groups'),
+      'Component': GroupTree
+    }
+  }
+};

package/src/components/user-selector/empty/group.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { isWechat } from '../../../utils/open-data';
-
+import {getLocale} from '../../../utils/getLocale';
 import './index.scss';
 
 export default () => {
@@ -16,7 +16,7 @@ export default () => {
         <div className="persel-empty">
           <span className="icon"></span>
         </div>
-        <div className='empty-tip'>您可以根据团队设置群组，设置后可以为团队目标选择群组</div>
+        <div className='empty-tip'>{getLocale('OKR_MyO_Pop_Teamsettings')}</div>
         <a href={url} target="_blank" className='add-group'>添加群组</a>
       </div>
     );

package/src/components/user-selector/empty/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {getLocale} from '../../../utils/getLocale'
 import './index.scss';
 
 export default () => {
@@ -7,7 +8,7 @@ export default () => {
 		<div className="persel-empty">
 			<span className="icon"></span>
 		</div>
-		<span className='empty-tip'>这里什么都没有</span>
+		<span className='empty-tip'>{getLocale('OKR_MyO_Thnothinghere')}</span>
 	</div>
 	)
 }

package/src/components/user-selector/export-modules/field-tree-selector/index.scss

@@ -65,6 +65,6 @@
     background: #ffffff;
     box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
     border: 1px solid #f0f2f5;
-    border-radius: 4px;
+    border-radius: 12px;
   }
 }

package/src/components/user-selector/export-modules/field-tree-selector/index.tsx

@@ -14,7 +14,7 @@ import {
 import SelectorGenerater from './selector-generater';
 import Popup from "../../../popup";
 import { User } from "../../interface";
-
+import { getLocale } from "../../../../utils/getLocale";
 import "../../index.scss";
 import "./index.scss";
 
@@ -47,6 +47,7 @@ export interface PropsInterface {
   sourceFrom?: string;
   departOnly?: boolean;
   auth?: boolean;
+  authType?: string;
   placeholder?: string;
   getDepartRoot?: Function;
   destroyPopupOnHide?: boolean;
@@ -91,7 +92,8 @@ export default forwardRef((props: PropsInterface, ref) => {
     sourceFrom,
     departOnly,
     auth = false, // 数据权限
-    placeholder = "请选择",
+    placeholder = getLocale('Mod_Pleaseselect'),
+    authType,
     getDepartRoot,
     destroyPopupOnHide = true,
     forceRender = false,
@@ -259,6 +261,7 @@ export default forwardRef((props: PropsInterface, ref) => {
         sourceFrom,
         departOnly,
         auth,
+        authType,
         isGetRoot,
         disabledDepartSelect,
         panes,

package/src/components/user-selector/export-modules/multiple-user-selector--bak/index.js

@@ -3,6 +3,7 @@ import { CommonContext } from '../../context';
 import { OpenUserName, OpenDepartmentName, isWechat } from '../../../../utils/open-data';
 import MultiSelector from '../field-tree-selector/multiple-selector';
 import Popup from '../../../popup';
+import {getLocale} from '../../../../utils/getLocale';
 import classNames from 'classnames';
 
 import '../../index.scss';
@@ -19,7 +20,7 @@ export default forwardRef((props, ref) => {
     selectNodes = {},
     sourceFrom,
     auth = false, // 数据权限
-    placeholder = '请选择',
+    placeholder = getLocale('Mod_Pleaseselect'),
     // className,
     destroyPopupOnHide = true,
     forceRender = false,

package/src/components/user-selector/searched-panel/index.js

@@ -6,7 +6,7 @@ import ResultPart from './result-part';
 import Empty from '../empty';
 import GroupEmpty from '../empty/group';
 import { CommonContext } from '../context';
-
+import {getLocale} from '../../../utils/getLocale'
 import './index.scss';
 
 export default props => {
@@ -54,10 +54,10 @@ export default props => {
     {loading ?
       <Loading /> :
       <div>
-        {( searchedPanes.user && person && person.length) ? <ResultPart title="人员" treeData={person} onSelect={onNodeSelect} selected={selected} /> : undefined}
-        {( searchedPanes.depart && departs && departs.length) ? <ResultPart title="部门" treeData={departs} onSelect={onNodeSelect} selected={selected} /> : undefined}
+        {( searchedPanes.user && person && person.length) ? <ResultPart title={getLocale('Per_Ma_form_detail_Personnel')} treeData={person} onSelect={onNodeSelect} selected={selected} /> : undefined}
+        {( searchedPanes.depart && departs && departs.length) ? <ResultPart title={getLocale('Mod_Department')} treeData={departs} onSelect={onNodeSelect} selected={selected} /> : undefined}
         {( searchedPanes.group && group && group.length) ? <ResultPart
-          title="群组"
+          title={getLocale('Mod_Groups')}
           treeData={group}
           onSelect={onNodeSelect}
           selected={selected}

package/src/components/user-selector/selected-panel/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import SelectedPanelTree from '../select-tree/selected-tree';
 import { TreeNodeContext } from '../context';
 import './index.scss';
+import { getLocale } from '../../../utils/getLocale';
 
 export default props => {
   const { selected = [], setSelected } = props;
@@ -17,11 +18,11 @@ export default props => {
       if (it.nodeType == 'person') person.push(1);
       if (it.nodeType == 'group') gourp.push(1);
     })
-    if (person.length) res.push(`人员${person.length}`);
-    if (departments.length) res.push(`部门${departments.length}`);
-    if (gourp.length) res.push(`群组${gourp.length}`);
+    if (person.length) res.push(`${getLocale('OKR_MyO_Ew_Staff')}${person.length}`);
+    if (departments.length) res.push(`${getLocale('Mod_Department')}${departments.length}`);
+    if (gourp.length) res.push(`${getLocale('Mod_Groups')}${gourp.length}`);
     if (!res.length) res.push(`0`);
-    setTotalText(`已选：${res.join('，')}`)
+    setTotalText(`${getLocale('Data_Selected')}${res.join('，')}`)
   }, [selected])
 
   const onClearHandler = () => {
@@ -36,9 +37,9 @@ export default props => {
   return <div className="persel-selected-panel">
     <div className="persel-selected-panel__result">
       <span className="persel-selected-panel__result-total">{totalText}</span>
-      {selected.length ? <span className="persel-selected-panel__result-clear" onClick={onClearHandler}>清空</span> : undefined}
+      {selected.length ? <span className="persel-selected-panel__result-clear" onClick={onClearHandler}>{getLocale('Mod_Empty')}</span> : undefined}
     </div>
-    {selected.length == 0 && <div className="empty-tip">请在左侧选择人员</div>}
+    {selected.length == 0 && <div className="empty-tip">{getLocale('Mod_persononleft')}</div>}
     <div className="persel-selected-panel__content">
       <TreeNodeContext.Provider value={{}}>
         <SelectedPanelTree selected={selected} onRemove={onRemoveHandler} />

package/src/components/version-change-modal/constant.ts

@@ -1,3 +1,5 @@
+import { getLocale } from "../../utils/getLocale";
+
 export enum Versions {
   /**
    * 标准版 项目管理
@@ -21,47 +23,55 @@ export enum Versions {
   Flagship = 6,
 }
 
-export const versionList = [
-  {
-    version: Versions.Standard,
-    name: "项目管理版",
-    color: "blue",
-    image: require("./images/project.png"),
-    items: [
-      "项目里程碑",
-      "项目看板管理",
-      "项目任务分解",
-      "项目报表统计",
-      "工作计划&统计",
-    ],
-  },
-  {
-    version: Versions.WeixinAssess,
-    name: "绩效考核版",
-    color: "blue",
-    image: require("./images/performance.png"),
-    items: ["考核模板", "考核管理", "360 评价", "绩效统计", "绩效结果校准"],
-  },
-  {
-    version: Versions.Professional,
-    name: "OKRs-E 专业版",
-    // subName:'包含以下 2 个版本全部功能',
-    color: "yellow",
-    image: require("./images/okre.png"),
-    items: [
-      "OKR 目标管理版",
-      "OKR 目标地图",
-      "OKR 工作法",
-      "OKR 仪表盘",
-      "项目与计划管理",
-    ],
-  },
-  {
-    version: Versions.Flagship,
-    name: "旗舰版",
-    subName: "包含以下 2 个版本全部功能",
-    color: "green",
-    image: require("./images/performancePlus.png"),
-    items: ["OKRs-E 专业版", "绩效考核版"],
-  },
-];
+export const getVersionList = () => {
+  return [
+    {
+      version: Versions.Standard,
+      name: getLocale("Sw_ProEdition"),
+      color: "blue",
+      image: require("./images/project.png"),
+      items: [
+        getLocale("Pro_card_ProjectMilestone"),
+        getLocale("Sw_ProManagement"),
+        getLocale("Sw_ProBreakdown"),
+        getLocale("Sw_RepStatistics"),
+        getLocale("Sw_WorkStatistics"),
+      ],
+    },
+    {
+      version: Versions.WeixinAssess,
+      name: getLocale("Sw_PerformEdition"),
+      color: "blue",
+      image: require("./images/performance.png"),
+      items: [
+        getLocale("Per_Menu_Title_Assessmenttempla"),
+        getLocale("Per_Menu_Title_AssessmentMana"),
+        getLocale("Sw_360Feedback"),
+        getLocale('Sw_PeStatistics'),
+        getLocale('Sw_PerCalibration'),
+      ],
+    },
+    {
+      version: Versions.Professional,
+      name: getLocale('Sw_OKRsEdition'),
+      // subName:'包含以下 2 个版本全部功能',
+      color: "yellow",
+      image: require("./images/okre.png"),
+      items: [
+        getLocale('Sw_OKRManagement'),
+        getLocale('Sw_OKRAlignment'),
+        getLocale("OKR_Menu_Title_OKRWork"),
+        getLocale("OKR_Menu_Title_Dashboard"),
+        getLocale('Sw_ProjectsPrograms'),
+      ],
+    },
+    {
+      version: Versions.Flagship,
+      name: getLocale('Sw_FlagshipEdit'),
+      subName: getLocale('Sw_Includes2s'),
+      color: "green",
+      image: require("./images/performancePlus.png"),
+      items: [getLocale('Sw_OKRsEdition'), getLocale('Sw_PerformEdition')],
+    },
+  ];
+};

package/src/components/version-change-modal/index.tsx

@@ -8,9 +8,10 @@ import React, {
 import Dialog from "../dialog";
 import { getBSGlobal } from "../../utils/bs-global";
 import { cancelGuide, setVersion } from "./request-api";
-import { versionList, Versions } from "./constant";
-import "./index.scss";
+import { getVersionList, Versions } from "./constant";
 import { getTenantInfo } from "../../utils/helpers";
+import { getLocale } from "../../utils/getLocale";
+import "./index.scss";
 
 const prefix = "titaui-version-change-modal";
 
@@ -82,7 +83,7 @@ const VersionChangeModal: FC<any> = forwardRef(
               />
             </div>
             <div className="versions-wrapper">
-              {versionList.map((version) => (
+              {getVersionList().map((version) => (
                 <div
                   key={version.version}
                   onMouseEnter={() => setActive(version.version)}
@@ -115,7 +116,7 @@ const VersionChangeModal: FC<any> = forwardRef(
                         await handleTryToUseClick(version);
                       }}
                     >
-                      免费试用
+                      {getLocale('Sw_FreeTrial')}
                     </a>
                   </div>
                 </div>

package/src/components/weekly-report/index.tsx

@@ -4,7 +4,8 @@ import RectBtn from "../button/rect-btn";
 import CommonShare from "../common-share";
 import Card from "./card";
 import {rpost,rget, rput, rdelete} from '../../utils/request'
-import {getQueryString,changeQueryString} from '../../utils/tools'
+import {getQueryString,changeQueryString} from '../../utils/tools';
+import { getLocale } from "../../utils/getLocale";
 import "./index.scss";
 
 interface Props {
@@ -45,7 +46,7 @@ function WeeklyReportPreview({ onShare,onClose,data }) {
             a.click()
           }}
         >
-          下载图片
+          {getLocale('OKR_MyO_Popup_Download')}
         </RectBtn>
         <RectBtn
           className={preCls + "__share"}
@@ -54,7 +55,7 @@ function WeeklyReportPreview({ onShare,onClose,data }) {
             onShare(img);
           }}
         >
-          分享到动态
+          {getLocale('Mod_ShareFeed')}
         </RectBtn>
       </div>
     </div>

package/src/components/weekly-report/statistics.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react'
 import classnames from 'classnames'
+import { getLocale } from '../../utils/getLocale'
 import { IWeeklyReportData } from './interface'
 
 interface Props {
@@ -11,7 +12,7 @@ function Statistics({data}: Props): ReactElement {
     <div className={preCls}>
       <div className={classnames(preCls+'__item',preCls+'__finish')}>
         <div className={preCls+'__num'}>{data.TaskNum}</div>
-        <div className={preCls+'__text'}>完成任务</div>
+        <div className={preCls+'__text'}>{getLocale('Rep_Tab_Mys_Completeask')}</div>
       </div>
       <div className={classnames(preCls+'__item',preCls+'__praise')}>
         <div className={preCls+'__num'}>{data.LoveNum}</div>

package/src/components/word-cloud/index.js

@@ -49,7 +49,7 @@ export default props => {
       style={{ 'display': isShow ? 'unset' : 'none' }}
       className={classNames('titaui-wordcloud')}
     >
-      <div className={classNames('titaui-wordcloud__title')}>企业关注热点</div>
+      <div className={classNames('titaui-wordcloud__title')}>{getLocale('HP_Hotcompanies')}</div>
       <canvas ref={canvas} id="worldcloud-titaui-home-canvas" width="235" height="223"></canvas>
     </div>
   </React.Fragment>

package/src/components-v1/confirm/index.tsx

@@ -3,6 +3,7 @@ import Pop from '../pop';
 import suspend from '../pop/Pop';
 import styled from 'styled-components';
 import { Button } from '../buttonv2';
+import { getLocale } from '../../utils/getLocale';
 const ConfirmWrapper = styled.div`
   /* TODO padding 可动态调整 */
   width: 300px;
@@ -69,10 +70,10 @@ export default class Confirm extends Component<ConfirmProp, {}> {
             <FooterWrapper>
               <div className='fr' style={{ float: 'right' }}>
                 <Button type='secondary' floating onClick={this.handleCancel} style={{ marginRight: 5 }}>
-                  取消
+                  {getLocale('Mod_Cancel')}
               </Button>
                 <Button type='primary' floating onClick={this.handleOk}>
-                  确定
+                  {getLocale('OKR_MyO_Butt_Determine')}
               </Button>
               </div>
             </FooterWrapper>

package/src/components-v1/popConfirm/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } f
 import Pop from "../pop";
 import { Button } from 'tita-ui';
 import { ButtonGroup, Wrapper } from './style';
+import { getLocale } from '../../utils/getLocale';
 type TriggerType = "hover" | "click";
 type Aligns =
   | "top"
@@ -170,10 +171,10 @@ const PopConfirm = forwardRef(({
         <Button onClick={() => {
           onCancel && onCancel();
           popRef.current.hide();
-        }}>取消</Button>
+        }}>{getLocale('Mod_Cancel')}</Button>
         <Button type="primary" onClick={() => {
           onConfirm && onConfirm();
-        }}>确定</Button>
+        }}>{getLocale('OKR_MyO_Butt_Determine')}</Button>
       </ButtonGroup>
     </div>
   )

package/src/components-v1/progress/CircleProgress.js

@@ -19,7 +19,7 @@ export default class CircleProgress extends Component {
     if(formatText) {
       return formatText(percent)
     }
-    return percent + '%'
+    return percent + getLocale('OKR_MyO_Pop_Upd_Percentage')
   }
   render() {
     const {size,color,progress,width,percent,backgroundColor, textcolor, linear, linearId, linearStartColor, linearEndColor, showTextContent} = this.props;

package/src/components-v1/radio/radioGroup.tsx

@@ -50,7 +50,7 @@ export default class RadioGroup extends Component<RadioGroupProps, RadioGroupSta
   }
 }
 // 用例
-// <RadioGroup name="gender" labelText="周期">
+// <RadioGroup name="gender" labelText=`${window.getLocale('Mod_period')}`>
 // {radios.map(({ label, value }) => (
 // 	<Radio key={value} value={value} onChange={(e) => setDefValue(e)} checked={value === defValue ? true : false}>
 // 		{label}

package/src/components-v1/search/index.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import uuid from 'uuid';
 import CacheUtil from './cache';
+import { getLocale } from '../../utils/getLocale';
 
 interface Props {
   placeHolder: string;
@@ -100,9 +101,6 @@ export default class Search extends PureComponent<Props, State> {
       keywords: cache && cache.keywords||''
     };
   }
-  static defaultProps = {
-    placeHolder: '请输入关键字',
-  };
   handleEnterPress = (e: any) => {
     if (e.nativeEvent.keyCode == 13) {
       this.handleSearch();
@@ -139,7 +137,7 @@ export default class Search extends PureComponent<Props, State> {
     this.props.onSearch('');
   };
   render() {
-    const { placeHolder, id: HTMLid } = this.props;
+    const { placeHolder = getLocale('OKR_MyO_Pop_Pleaenterwords'), id: HTMLid } = this.props;
     const { id, keywords, active } = this.state;
     return (
       <SearchWrapper id={HTMLid}>