@titaui/pc 1.9.29 → 1.9.33

package/src/components/dialog/index.scss

@@ -1,13 +1,23 @@
-$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;
+
 .rc-dialog-close {
   z-index: 100;
 }
+
 .rc-dialog-wrap {
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1299 !important;
 }
+
 .rc-dialog-mask {
   z-index: 1299 !important;
   background: rgba(20, 28, 40, 0.7) !important;
@@ -16,6 +26,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
 .titaui-dialog {
   border-radius: 24px;
   overflow: hidden;
+
   &.rc-dialog {
     display: inline-block;
     margin: 0;
@@ -49,10 +60,12 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   .rc-dialog-header {
     padding: 18px 32px;
   }
+
   .rc-dialog-body {
     // padding: 0 32px 0 32px;
     padding: 0;
   }
+
   .rc-dialog-footer {
     padding: 20px 32px;
     display: flex;
@@ -72,12 +85,15 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
     justify-content: center;
     cursor: pointer;
     box-sizing: border-box;
-    & > span {
+
+    &>span {
       font-size: 14px;
       font-family: $font-family;
       font-weight: 400;
       line-height: 20px;
       text-align: center;
+      display: flex;
+      align-items: center;
       box-sizing: border-box;
     }
   }
@@ -88,20 +104,36 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
     border: 1px solid #2879ff;
     color: #ffffff;
     transition: 0.2s all;
+    user-select: none;
+
     &:hover {
       border: 1px solid #5c8eff;
       background: #5c8eff;
       color: #ffffff;
     }
+
     &-not-allowed {
+      background-color: #5C8EFF;
       cursor: not-allowed;
     }
+
+    &-loading {
+      &-icon {
+        width: 14px;
+        margin-right: 6px;
+        animation-name: spin;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+        animation-duration: 1s;
+      }
+    }
   }
 
   &__btn-cancel {
     border: 1px solid #DFE3EA;
     color: #6f7886;
     transition: 0.2s all;
+
     &:hover {
       border: 1px solid #2879ff;
       color: #2879ff;
@@ -114,11 +146,13 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
     border-bottom: none;
   }
 }
+
 .titaui-dialog.titaui-dialog-no-footer-line {
   .rc-dialog-footer {
     border-top: none;
   }
 }
+
 .titaui-dialog.titaui-dialog-no-close {
   .rc-dialog-close {
     display: none;
@@ -130,3 +164,13 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
     display: none;
   }
 }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/hr-header/index.tsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import classNames from 'classnames';
 import axios from 'axios';
 import  Popup  from '../popup';
-import { getLoginUserInfo } from '&/utils/helpers';
+import { getLoginUserInfo } from '../../utils/helpers';
 import './index.scss';
 
 interface Props {}

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/appraisal-menus/index.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { withRouter } from "react-router";
-import { ResizeObserver } from '@juggle/resize-observer';
+// import { ResizeObserver } from '@juggle/resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
 import FlipCard, { flipRefIns } from "../../components/flip-menu-card";
 import MenuTree from "../../components/menu-tree";
 import Scrollbar from '../../../scrollbar';
@@ -22,7 +23,7 @@ const AppraisalMenus = (props: Props) => {
   const { onSelect = () => { }, history } = props;
 
   const [maxHeight, setMaxHeight] = useState<number>(() => {
-    return document.body.offsetHeight - 220;
+    return document.body.offsetHeight - 170;
   });
   const [selectedMenuKeys, setSelectedMenuKeys] = useState<string[]>([]);
 
@@ -74,7 +75,7 @@ const AppraisalMenus = (props: Props) => {
     const obs = new ResizeObserver(entries => {
       for (let entry of entries) {
         const cr = entry.contentRect;
-        setMaxHeight(cr.height - 220);
+        setMaxHeight(cr.height - 170);
       }
     })
     obs.observe(document.body);

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

@@ -1,13 +1,15 @@
 import React, { useState, useEffect, useRef } from "react";
 import classNames from 'classnames';
 import { locale } from '../../../i18n';
-import { ResizeObserver } from '@juggle/resize-observer';
+// import { ResizeObserver } from '@juggle/resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
 import MenuTree from "../../../components/menu-tree";
 import { getDepsAndUsers } from "../../../request-apis";
 import { DEPART_NODE, USER_NODE } from '../../../components/menu-tree/tree-node/index';
 import { toTree } from "../../../utils";
 import { ITreeNode } from "../../../types";
 import preCls from '../../../precls';
+import Scrollbar from '../../../../scrollbar';
 
 import "../../../index.scss";
 import "./index.scss";
@@ -51,7 +53,7 @@ export default () => {
 
   // 因为要实现虚拟列表的功能，所有要动态的计算出一个菜单的高度
   useEffect(() => {
-    setHeight(document.body.offsetHeight - 240);
+    setHeight(document.body.offsetHeight - 210);
   }, [])
 
   useEffect(() => {
@@ -91,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);
@@ -102,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/menus/export-modules/okr-menus/okr-front-menus.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 // import classNames from "classnames";
-import { ResizeObserver } from '@juggle/resize-observer';
+// import { ResizeObserver } from '@juggle/resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
 import { flipRefIns } from "../../components/flip-menu-card";
 import Scrollbar from '../../../scrollbar';
 import MenuTree from "../../components/menu-tree";
@@ -31,7 +32,7 @@ export default forwardRef((props: Props, ref) => {
   } = props;
 
   const [maxHeight, setMaxHeight] = useState<number>(() => {
-    return document.body.offsetHeight - 220;
+    return document.body.offsetHeight - 210;
   });
   const [expandedKeys, setExpandedKeys] = useState(['myokr']);
   const [selectedMenuKeys, setSelectedMenuKeys] = useState<string[]>([]);
@@ -158,7 +159,7 @@ export default forwardRef((props: Props, ref) => {
     const obs = new ResizeObserver(entries => {
       for (let entry of entries) {
         const cr = entry.contentRect;
-        setMaxHeight(cr.height - 220);
+        setMaxHeight(cr.height - 210);
       }
     })
     obs.observe(document.body);

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import classNames from 'classnames';
-import { ResizeObserver } from '@juggle/resize-observer';
+// import { ResizeObserver } from '@juggle/resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
 import MenuTree from "../../../components/menu-tree";
 import { getSubordinates } from "../../../request-apis";
 import { ITreeNode } from "../../../types";
@@ -24,7 +25,7 @@ export default (props) => {
   const [selectedMenuKeys, setSelectedMenuKeys] = useState<string[]>([]);
   const [loginUserId] = useState(window.BSGlobal && window.BSGlobal.loginUserInfo.Id || 0);
   const [maxHeight, setMaxHeight] = useState<number>(() => {
-    return document.body.offsetHeight - 220;
+    return document.body.offsetHeight - 200;
   });
 
   useEffect(() => {

package/src/components/scrollbar/simplebar/simplebar.js

@@ -1,7 +1,8 @@
 import throttle from 'lodash.throttle';
 import debounce from 'lodash.debounce';
 import memoize from 'lodash.memoize';
-import { ResizeObserver } from '@juggle/resize-observer';
+// import { ResizeObserver } from '@juggle/resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
 import canUseDOM from 'can-use-dom';
 import scrollbarWidth from './scrollbar-width';
 import { getElementWindow, getElementDocument } from './helpers';

package/src/components/table/index.scss

@@ -42,6 +42,7 @@
     .rc-table td {
       font-size: 14px;
       padding: 13px 4px;
+      overflow: hidden;
     }
 
     .rc-table-content {

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

@@ -118,7 +118,8 @@ export default forwardRef((props: Props, ref) => {
               asyncData={false}
               onSelect={onSelectHandler}
               virtual={true}
-              height={height-44}
+              height={height}
+              switcherIcon=""
             />
           </TreeNodeContext.Provider>
           </div>
@@ -131,8 +132,9 @@ export default forwardRef((props: Props, ref) => {
               multiple={false}
               getTreeData={onGetTreeData}
               itemHeight={itemHeight}
-              height={height-44}
+              height={height}
               virtual={true}
+              switcherIcon=""
             />
           </TreeNodeContext.Provider>
         )}

package/src/components/user-selector/select-tree/choose-tree/index.tsx

@@ -24,7 +24,8 @@ export default props => {
     height,
     virtual,
     isGetRoot,
-    renderEmpty = () => <Empty />
+    renderEmpty = () => <Empty />,
+    ...restProps
   } = props;
 
   const loadedNode = useRef([]);
@@ -118,6 +119,7 @@ export default props => {
   return (
     <div className="perspm-tree">
       <Tree
+        {...restProps}
         multiple={multiple}
         selectNodeHighlight={false}
         defaultExpandedKeys={getDefaultExpandedKeys()}

package/src/pages/aha2021/index.tsx

@@ -41,7 +41,7 @@ const PageLayout = (props) => {
   const { children } = props;
 
   const isTrial =
-    window.BSGlobal.tenantAuthentication.Version !== 1 && isOfficialSite();
+    window.BSGlobal.tenantAuthentication.Version == 1 && isOfficialSite();
 
   const onClickKefu = () => {
     const kefuUrl = isTrial

package/src/pages/home/components/data-list/index.scss

@@ -1,8 +1,6 @@
 .homepage-datalist {
-  background-color: #f7f9fb;
   height: calc(100vh - 41px);
   overflow: auto;
-  padding: 14px 20px;
   box-sizing: border-box;
   padding-bottom: 20px;
   box-sizing: border-box;

package/src/pages/new-okr-list/index.tsx

@@ -89,7 +89,7 @@ const NewOkrList = (props) => {
 
   useEffect(() => {
     setPageNum(1);
-  }, [relation, toUserId, departmentId]);
+  }, [relation, toUserId, departmentId, query]);
 
   useEffect(() => {
     getOkrs();

package/lib/components/table/checkbox/index.css

@@ -1,95 +0,0 @@
-.tita-checkbox {
-  font-size: 14px;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, 0.65);
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  white-space: nowrap;
-  cursor: pointer;
-  outline: 0;
-  display: inline-block;
-  line-height: 1;
-  position: relative;
-  vertical-align: middle;
-  left: 1px;
-}
-
-.tita-checkbox .rc-checkbox-checked .rc-checkbox-inner {
-  background: #2879ff;
-  border: none;
-  border-radius: 2px;
-  width: 16px;
-  height: 16px;
-}
-
-.tita-checkbox .rc-checkbox-checked .rc-checkbox-inner::after {
-  transform: rotate(0deg) scale(0.6);
-  border: 0 solid transparent;
-  transition: none;
-  color: #fff;
-  content: "\E9f9" !important;
-  left: 1px;
-  top: 1px;
-  font-weight: 700;
-}
-
-.tita-checkbox .rc-checkbox-checked::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 2px;
-  border: 1px solid #1687d9;
-  content: "";
-  animation: antCheckboxEffect 0.36s ease-in-out;
-  animation-fill-mode: both;
-  visibility: hidden;
-}
-
-.tita-checkbox .rc-checkbox-input {
-  position: absolute;
-  left: 0;
-  z-index: 1;
-  cursor: pointer;
-  opacity: 0;
-  top: -5px;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.tita-checkbox .rc-checkbox-inner {
-  position: relative;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 14px;
-  height: 14px;
-  border: 1px solid #e9ecf0;
-  border-radius: 2px;
-  background-color: #fff;
-  transition: none;
-  font-family: tu-icon !important;
-  font-style: normal;
-  font-weight: 400;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-
-.tita-checkbox .rc-checkbox-inner::after {
-  transform: rotate(0deg) scale(1);
-  position: absolute;
-  display: table;
-  border: 0 solid #1587d9;
-  border-top: 0;
-  border-left: 0;
-  content: " ";
-  left: 0;
-  transition: none;
-}

package/lib/components/table/checkbox/index.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _rcCheckbox = _interopRequireDefault(require("rc-checkbox"));
-
-require("./index.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = function _default(props) {
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tita-checkbox"
-  }, /*#__PURE__*/_react["default"].createElement(_rcCheckbox["default"], props), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tita-checkbox-sign"
-  }));
-};
-
-exports["default"] = _default;

package/src/components/table/checkbox/index.js

@@ -1,11 +0,0 @@
-import React, { } from "react"
-import Checkbox from 'rc-checkbox'
-import "./index.scss"
-
-export default (props) => {
-
-  return <div className="tita-checkbox">
-    <Checkbox {...props} />
-    <div className="tita-checkbox-sign"></div>
-  </div>
-}