@titaui/pc 1.9.32 → 1.9.36

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

@@ -85,33 +85,33 @@ export const getBimonthlyMonthKeyValue = (startMonth) => {
   const getNextMonth = (month, step = 1) => (month + step) % 12 || 12;
   let datas: {
     title: string;
-    value: string[];
+    value: string;
   }[] = [];
   const monthLang = getMonth();
   if (!isEn) {
     datas.push({
       title: `${start} - ${getNextMonth(start)}月`,
-      value: [`4,${start}`],
+      value: `4,${start}`,
     });
     while (1) {
       month = getNextMonth(month, 2);
       if (month == start) break;
       datas.push({
         title: `${month} - ${getNextMonth(month)}月`,
-        value: [`4,${month}`],
+        value: `4,${month}`,
       });
     }
   } else {
     datas.push({
       title: `${monthLang[start - 1]} - ${monthLang[getNextMonth(start) - 1]}`,
-      value: [`4,${start}`],
+      value: `4,${start}`,
     });
     while (1) {
       month = getNextMonth(month, 2);
       if (month == start) break;
       datas.push({
         title: `${monthLang[month - 1]} - ${monthLang[getNextMonth(month)-1]}`,
-        value: [`4,${month}`],
+        value: `4,${month}`,
       });
     }
   }

package/src/components/create-okr-modal/kr-items/kr-item-weight.tsx

@@ -23,7 +23,7 @@ const ErrorContent: FC<{ hasErr: boolean }> = ({ hasErr }) => {
     <Fragment>
       {hasErr ? (
         <span className={"kr-weight__error-popup-text-wrapper"}>
-          允许输入 0-100 的数字，支持小数点后一位
+          {getLocale('OKR_MyO_KRP_Please0and100')}
         </span>
       ) : null}
     </Fragment>

package/src/components/dialog/index.scss

@@ -113,8 +113,14 @@ Microsoft YaHei;
     }
 
     &-not-allowed {
-      background-color: #5C8EFF;
+      background: #93BCFF;
+      border-color: #93BCFF;
       cursor: not-allowed;
+
+      &:hover {
+        background: #93BCFF;
+        border-color: #93BCFF;
+      }
     }
 
     &-loading {
@@ -173,4 +179,4 @@ Microsoft YaHei;
   to {
     transform: rotate(360deg);
   }
-}
+}

package/src/components/dynamic/dynamic-item/dynamic-project/index.tsx

@@ -46,7 +46,7 @@ const DynamicProject: FC<IDynamicItemContentProps> = ({
   const renderDesc = useMemo(() => {
     return (
       <Fragment>
-        <span className={prefix + "__operate-desc"}>{getLocale('Mod_InChargeof')}{getLocale('Mod_Project')}</span>
+        <span className={prefix + "__operate-desc"}>{getLocale('Mod_InChargeof')}{getLocale('Feed_Set_Project')}</span>
         <span
           className={prefix + "-desc-operate-type"}
           style={{ background: feedTypeColor }}

package/src/components/dynamic/dynamic.scss

@@ -133,8 +133,8 @@
   }
   &__go-to-top {
     position: fixed;
-    bottom: 28px;
-    right: 28px;
+    bottom: 128px;
+    right: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -144,6 +144,7 @@
     box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
     border-radius: 50%;
     cursor: pointer;
+    z-index: 1;
     &-img {
       display: inline-block;
       width: 24px;

package/src/components/dynamic/export-module/index.tsx

@@ -1,11 +1,13 @@
 import _DynamicQuickOperation from "../quick-operation";
 import _Dynamic from '../dynamic';
+import _DynamicList from '../dynamic-list';
 import _DynamicItem from '../dynamic-item';
 import _DynamicTopping from '../dynamic-topping';
 import _DynamicLiking from '../dynamic-liking';
 import _DynamicLikeRanking from '../dynamic-like-ranking';
 
 export default _Dynamic;
+export const DynamicList = _DynamicList;
 export const DynamicQuickOperation = _DynamicQuickOperation;
 export const DynamicItem = _DynamicItem;
 export const DynamicTopping = _DynamicTopping;

package/src/components/dynamic/index.tsx

@@ -1,11 +1,13 @@
 import Dynamic, {
   DynamicQuickOperation,
+  DynamicList,
   DynamicItem,
   DynamicTopping,
   DynamicLiking,
   DynamicLikeRanking,
 } from './export-module';
 
+Dynamic.List = DynamicList;
 Dynamic.Item = DynamicItem;
 Dynamic.LikeRanking = DynamicLikeRanking;
 Dynamic.Liking = DynamicLiking;

package/src/components/dynamic/new-ui.scss

@@ -132,8 +132,8 @@
   }
   &__go-to-top {
     position: fixed;
-    bottom: 28px;
-    right: 28px;
+    bottom: 128px;
+    right: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -143,6 +143,7 @@
     box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
     border-radius: 50%;
     cursor: pointer;
+    z-index: 1;
     &-img {
       display: inline-block;
       width: 24px;

package/src/components/form/form-fields/input/index.scss

@@ -83,4 +83,11 @@
       font-weight: unset;
     }
   }
+
+  &__tail {
+    margin-left: 4px;
+    font-size: 14px;
+    line-height: 22px;
+    color: #89919F;
+  }
 }

package/src/components/form/form-fields/input/index.tsx

@@ -23,6 +23,7 @@ interface Props {
   disabled?: boolean;
   layout?: 'column'|'row';
   className?:string;
+  tail?: any;
 }
 interface Error {
   name: string;
@@ -50,6 +51,7 @@ export default forwardRef((props: Props, ref) => {
     layout,
     onCheckSuccess,
     className="",
+    tail
   } = props;
 
   const inputRef = useRef<any>();
@@ -78,6 +80,7 @@ export default forwardRef((props: Props, ref) => {
 
   const onInputFocusHandler = () => {
     setHasActive(true);
+    if (type && type == 'number') return;
     inputRef.current.setSelectionRange(9999999, 9999999);
   }
 
@@ -144,6 +147,11 @@ export default forwardRef((props: Props, ref) => {
           autoComplete='off'
         />
       </ToolTip>
+      {typeof tail == 'string' ? (
+        <span className={classNames(`${preCls}__tail`)}>{tail}</span>
+      ) : (
+        tail
+      )}
     </div>
   </div>
-})
+})

package/src/components/form/form-fields/textarea/index.scss

@@ -1,4 +1,17 @@
 .form-field-textarea {
+  &-row{
+    display: flex;
+    
+    .form-field-textarea__label{
+      margin-top: 7px;
+      margin-bottom: unset;
+    }
+    .form-field-textarea__border{
+      margin-left: 16px;
+      flex: 1;
+    }
+  }
+
   &__label {
     height: 22px;
     font-size: 14px;
@@ -18,8 +31,8 @@
 
   &__border {
     // display: inline-block;
-    padding: 6px;
-    border-radius: 3px;
+    padding: 6px 12px;
+    border-radius: 8px;
     transition: all 0.2s;
     border: 1px solid #e9ecf0;
     box-sizing: border-box;

package/src/components/form/form-fields/textarea/index.tsx

@@ -45,6 +45,7 @@ export default forwardRef((props: Props, ref) => {
     getContainer,
     resizeType = 'none',
     areaHeight,
+    layout,
   } = props
 
   const [hasError, setHasError] = useState<boolean>(false);
@@ -107,7 +108,7 @@ export default forwardRef((props: Props, ref) => {
   }))
 
   return (
-    <div className={classNames(preCls)}>
+    <div className={classNames(preCls, {[`${preCls}-row`]: layout==='row'})}>
       <div className={classNames(`${preCls}__label`)}>
         <span className={classNames(`${preCls}__label-text`)}>{label}</span>
         {require && <span className={classNames(`${preCls}__label-require`)}>*</span>}
@@ -137,4 +138,4 @@ export default forwardRef((props: Props, ref) => {
       </div>
     </div>
   )
-})
+})

package/src/components/form/index.tsx

@@ -75,6 +75,7 @@ const Form =  forwardRef((props: Props, ref) => {
   return (
     <div className={classNames(preCls, className)}>
       {React.Children.map(children, (child) => {
+        if (!child) return null;
         const { name, value } = child.props;
         initFieldsValue(name, value);
         return (

package/src/components/grid-layout/near-visitors/index.scss

@@ -7,8 +7,9 @@
   margin: 20px 4px;
   overflow: hidden;
   &__item {
-    width: 25%;
-    min-width: 53px;
+    width: 30%;
+    word-break: keep-all;
+    white-space: nowrap;
     height: 88px;
     margin-bottom: 16px;
     display: flex;

package/src/components/grid-layout/near-visitors/visitor.tsx

@@ -15,11 +15,11 @@ interface Props {
 export default function Visitor(props: Props) {
   const { iconSrc, name, dateTime, avatarColor, userId } = props;
 
-  const [visitTime, setVisitTime] = useState(judgeTimeSpaceFromNow(dateTime));
+  const [visitTime, setVisitTime] = useState(judgeTimeSpaceFromNow(dateTime, false));
   const toolTipRef = useRef<any>();
 
   useEffect(() => {
-    setVisitTime(judgeTimeSpaceFromNow(dateTime));
+    setVisitTime(judgeTimeSpaceFromNow(dateTime, false));
   }, [dateTime]);
 
   return (

package/src/components/keyword-search/index.scss

@@ -0,0 +1,64 @@
+.titaui-keyword-search {
+  background: #fff;
+  height: 36px;
+  padding: 8px;
+  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
+  display: flex;
+  border-radius: 18px;
+  box-sizing: border-box;
+  align-items: center;
+
+  &--active {
+    box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1),
+      0px 0px 4px 0px rgba(40, 121, 255, 0.3);
+    border: 1px solid #2879ff;
+  }
+
+  &__del-icon {
+    font-size: 20px;
+    color: #89919f;
+    margin-right: 4px;
+    &:hover {
+      cursor: pointer;
+      color: #f05e5e;
+    }
+  }
+  &__search-icon.tu-icon-search {
+    font-size: 20px !important;
+    cursor: pointer;
+    &:hover {
+      color: #2879ff;
+    }
+  }
+  &__input {
+    width: 0;
+    input {
+      width: 100%;
+      border: none;
+    }
+    animation: shrink 0.1s ease;
+  }
+  &--active {
+    .titaui-keyword-search__input {
+      width: 120px;
+      margin-right: 12px;
+      animation: grow 0.1s ease;
+    }
+  }
+}
+@keyframes grow {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 120px;
+  }
+}
+@keyframes shrink {
+  0% {
+    width: 120px;
+  }
+  100% {
+    width: 0;
+  }
+}

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

@@ -0,0 +1,60 @@
+
+import React, { useState, useRef }  from 'react';
+import classnames from 'classnames';
+import { getLocale } from '../../utils/getLocale';
+import './index.scss';
+
+const precls = 'titaui-keyword-search';
+
+interface IProps {
+  onSearch?: Function;
+}
+
+const KeywordSearch = (props: IProps) => {;
+  const { onSearch } = props;
+  const inputRef = useRef();
+  const [active, setActive] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const handleSearchClick = () => {
+    if(!active) {
+      setActive(true);
+      //@ts-ignore
+      inputRef?.current?.focus();
+    } else {
+      handleSearch()
+    }
+  }
+  const handleSearch = () => {
+    onSearch && onSearch({keyWords:keyword});
+  }
+
+  const handleOnBlur = (e) => {
+    if(!keyword.length) setActive(false);
+  }
+  const changeValue = (e) =>{
+    setKeyword(e.target.value)
+  }
+  const handleOnKeyDown = (e) => {
+    if(e.keyCode == 13) {
+      handleSearch();
+    }
+  }
+  const clearKeyword = (e) =>{
+    setKeyword('')
+  };
+
+  return <div className={classnames(precls, {[`${precls}--active`]: active})}>
+    <span className={`${precls}__input` }>
+      <input value={keyword} onKeyUp={handleOnKeyDown} onChange={changeValue} ref={inputRef} onBlur={handleOnBlur} placeholder={getLocale('Mod_Enterkeywords')} />
+    </span>
+    {
+      keyword.length > 0 && 
+      <span className={classnames('tu-icon-cross', `${precls}__del-icon` )} onClick={clearKeyword} />
+    }
+    <span className={classnames('tu-icon-search', `${precls}__search-icon`)} onClick={handleSearchClick}/>
+  </div>
+
+
+}
+export default KeywordSearch;
+ 

package/src/components/menus/components/flip-menu-card/index.tsx

@@ -5,7 +5,7 @@ import React, {
   useImperativeHandle,
   useEffect,
 } from "react";
-import SimpleBar from '../../../scrollbar/simplebar/simplebar'
+import SimpleBar from "../../../scrollbar/simplebar/simplebar";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 import MenuCard from "../menu-card";
@@ -36,7 +36,8 @@ export default forwardRef((props: Props, ref) => {
   const [isFloatHide, setIsFloatHide] = useState(false);
   const [isHideTopRightIcon, setIsHideTopRightIcon] = useState(false);
 
-  const [showMore, setShowMore] = useState(false);
+  const [showMore, setShowMore] = useState(true);
+  const [showFrontMore, setShowFrontMore] = useState(true);
 
   const hideFloatRef = useRef<any>();
   const flipCardRef = useRef<any>();
@@ -144,28 +145,29 @@ export default forwardRef((props: Props, ref) => {
   };
 
   useEffect(() => {
-    const targetNode = document.getElementsByClassName(
-      "simplebar-content-wrapper"
-    )[0];
-
+    let targetNode = document.querySelector(`.${preCls}__inner-back-content`);
     const config = { attributes: true, childList: true, subtree: true };
-
     const callback = function (_mutationsList, _observer) {
-      const scrollArea = document.getElementsByClassName(
-        "simplebar-content-wrapper"
-      )[0];
-      if (scrollArea && scrollArea.scrollHeight > scrollArea.offsetHeight) {
-        setShowMore(true);
+      let scrollArea = SimpleBar.instances.get(
+        document.querySelector(`.${preCls}__inner-back [data-simplebar]`)
+      );
+      const el = scrollArea?.getScrollElement();
+      if (el && el.scrollHeight > el.offsetHeight) {
+        if (el.scrollHeight - el.offsetHeight == el.scrollTop) {
+          setShowFrontMore(false);
+        } else {
+          setShowFrontMore(true);
+        }
       } else {
         setShowMore(false);
       }
-      scrollArea.addEventListener('scroll', () => {
-        if(scrollArea.scrollHeight - scrollArea.offsetHeight == scrollArea.scrollTop) {
-          setShowMore(false)
+      el?.addEventListener("scroll", () => {
+        if (el.scrollHeight - el.offsetHeight == el.scrollTop) {
+          setShowMore(false);
         } else {
           setShowMore(true);
         }
-      })
+      });
     };
     const observer = new MutationObserver(callback);
 
@@ -174,13 +176,61 @@ export default forwardRef((props: Props, ref) => {
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [isBack]);
+
+  useEffect(() => {
+    if (isBack) return;
+    let targetNode = document.querySelector(`.${preCls}__inner-front-content`);
+
+    const config = { attributes: true, childList: true, subtree: true };
+
+    const callback = function (_mutationsList, _observer) {
+      let scrollArea = SimpleBar.instances.get(
+        document.querySelector(`.${preCls}__inner-front [data-simplebar]`)
+      );
+      const el = scrollArea?.getScrollElement();
+      if (el && el.scrollHeight > el.offsetHeight) {
+        if (el.scrollHeight - el.offsetHeight == el.scrollTop) {
+          setShowFrontMore(false);
+        } else {
+          setShowFrontMore(true);
+        }
+      } else {
+        setShowFrontMore(false);
+      }
+      el?.addEventListener("scroll", () => {
+        if (el.scrollHeight - el.offsetHeight == el.scrollTop) {
+          setShowFrontMore(false);
+        } else {
+          setShowFrontMore(true);
+        }
+      });
+    };
+    const observer = new MutationObserver(callback);
+
+    targetNode && observer.observe(targetNode, config);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [isBack]);
 
   const onClickShowMore = () => {
-    const instance = SimpleBar.instances.get(document.querySelector(`.${preCls}__inner [data-simplebar]`))
-    const el = instance.getScrollElement();
-    el.scrollTop = el.scrollTop + 150
-  }
+    let instance = null;
+    if (isBack) {
+      instance = SimpleBar.instances.get(
+        document.querySelector(`.${preCls}__inner-back [data-simplebar]`)
+      );
+    } else {
+      instance = SimpleBar.instances.get(
+        document.querySelector(`.${preCls}__inner-front [data-simplebar]`)
+      );
+    }
+    const el = instance?.getScrollElement();
+    if (el) {
+      el.scrollTop = el.scrollTop + 150;
+    }
+  };
 
   return (
     <React.Fragment>
@@ -216,6 +266,12 @@ export default forwardRef((props: Props, ref) => {
                   {children[0]}
                 </MenuCard>
               </div>
+              {showFrontMore && (
+                <div
+                  className={`${preCls}__has-more`}
+                  onClick={onClickShowMore}
+                />
+              )}
             </div>
 
             {/* 第二屏的内容 */}
@@ -234,11 +290,13 @@ export default forwardRef((props: Props, ref) => {
                   {children[1]}
                 </MenuCard>
               </div>
+              {showMore && (
+                <div
+                  className={`${preCls}__has-more`}
+                  onClick={onClickShowMore}
+                ></div>
+              )}
             </div>
-            {showMore && (
-              <div className={`${preCls}__has-more`} onClick={onClickShowMore}>
-              </div>
-            )}
           </div>
         </DragResize>
 

package/src/components/menus/export-modules/okr-menus/depart-menus/index.tsx

@@ -9,6 +9,7 @@ import { DEPART_NODE, USER_NODE } from '../../../components/menu-tree/tree-node/
 import { toTree } from "../../../utils";
 import { ITreeNode } from "../../../types";
 import preCls from '../../../precls';
+import Scrollbar from '../../../../scrollbar';
 
 import "../../../index.scss";
 import "./index.scss";
@@ -52,7 +53,7 @@ export default () => {
 
   // 因为要实现虚拟列表的功能，所有要动态的计算出一个菜单的高度
   useEffect(() => {
-    setHeight(document.body.offsetHeight - 240);
+    setHeight(document.body.offsetHeight - 210);
   }, [])
 
   useEffect(() => {
@@ -92,7 +93,7 @@ export default () => {
     const obs = new ResizeObserver(entries => {
       for (let entry of entries) {
         const cr = entry.contentRect;
-        setHeight(cr.height - 240);
+        setHeight(cr.height - 210);
       }
     })
     obs.observe(document.body);
@@ -103,22 +104,24 @@ export default () => {
 
   return <div
     className={classNames(`${preCls}__depart-menus`)}
-    style={{ 'height': `${height}px` }}
+    // style={{ 'height': `${height}px` }}
   >
     {loading ?
       <div className={classNames(`${preCls}__depart-menus--loading`)}>
         <span />
       </div> :
-      <MenuTree
+      <Scrollbar style={{ 'maxHeight': height }}>
+        <MenuTree
         data={treeData}
         itemHeight={itemHeight}
-        height={height}
+        // height={height}
         virtual={true}
         onSelect={onSelectHandler}
         defaultExpandedKeys={["0"]}
         selectedKeys={selectedMenuKeys}
         loadData={onLoadTreeNodeDataHandler}
-      />
+        />
+      </Scrollbar>
     }
   </div>
 }

package/src/components/okr-detail/components/okr-tree/tree-node/o-child-node/edit-child-okr-weight.tsx

@@ -4,6 +4,7 @@ import Toast from "../../../../../toast";
 import DialogConfirm from "../../../../../dialog-confirm";
 import { getRelWorks, updateChildOkrWeight } from "../../../../request-apis";
 import WeightInput from "./weight-input";
+import { getLocale } from "../../../../../../utils/getLocale";
 
 import "./index.scss";
 const { CancelButton, SureButton } = DialogConfirm;
@@ -114,10 +115,10 @@ const EditChildOkrWeight = (props: IProps) => {
         {/* @ts-ignore */}
         <span type="title">当前子目标权重合计小于100%，确定要保存吗？</span>
         <CancelButton type="button" onClick={closeDialogConfirm}>
-          取消
+          {getLocale('Mod_Cancel')}
         </CancelButton>
         <SureButton type="button" onClick={postData}>
-          确定
+          {getLocale('Mod_Determiness')}
         </SureButton>
       </DialogConfirm>
     </>

package/src/components/okr-detail/components/okr-tree/tree-node/o-child-node/weight-input.tsx

@@ -1,4 +1,5 @@
 import classNames from "classnames";
+import { getLocale } from "../../../../../../utils/getLocale";
 import React, { useState } from "react";
 import Tooltip from "../../../../../tooltip";
 import "./index.scss";
@@ -38,7 +39,7 @@ const WeightInput = (props: IProps) => {
       <Tooltip.Error
         overlay={
           <span style={{ color: "#F05E5E" }}>
-            仅允许输入 0-100 的数字，仅支持一位小数
+            {getLocale('OKR_MyO_KRP_Please0and100')}
           </span>
         }
         placement="top"