@titaui/pc 1.7.20 → 1.7.24

package/src/components/cascader/index.scss

@@ -13,37 +13,60 @@
     font-size: 14px;
     color: #3F4755;
   }
+  &-popup{
+    z-index: 2000;
+    box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+    border: 1px solid #F0F2F5;
+    border-radius: 12px;
+    overflow: hidden;
+    .rc-cascader-menu{
+      width: 139px;
+      box-sizing: border-box;
+      border: 1px solid #F0F2F5;
+      padding: 16px 0 16px 6px;
+      &::-webkit-scrollbar{
+        width: 6px !important;
+      }
+    
+    }
+    .rc-cascader-menu-item-active{
+      background: unset;
+      color: #2879ff;
+    }
+    .rc-cascader-menu-item{
+      box-sizing: border-box;
+      cursor: pointer;
+      padding: 0 6px;
+      height: 36px;
+      align-items: center;
+      color: #3F4755;
+      &:hover{
+        color: #2879ff;
+        background: #F7F8FA;
+        border-radius: 8px;
+      }
+    }
+    .rc-cascader-menu-item-disabled{
+      opacity:1;
+      cursor: auto;
+      &:hover{
+        color: #3F4755;
+        background: #FFFFFF;
+        border-radius: 8px;
+      }
+    }
+    .rc-cascader-menu-item-expand-icon{
+      display: none;
+    }
+  }
   .tu-icon-caret-down{
     font-size: 16px;
     transform: scale(0.5);
   }
 }
-.rc-cascader-dropdown{
-  z-index: 2000;
-  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
-  border: 1px solid #F0F2F5;
-
-}
-.rc-cascader-menu{
-  width: 139px;
-  box-sizing: border-box;
-  border: 1px solid #F0F2F5;
-  padding: 16px 6px;
-
-}
-.rc-cascader-menu-item-active{
-  background: unset;
-  color: #2879ff;
-}
-.rc-cascader-menu-item{
-  box-sizing: border-box;
-  cursor: pointer;
-  padding: 0 6px;
-  height: 36px;
-  align-items: center;
-  &:hover{
-    color: #2879ff;
-    background: #F7F8FA;
-    border-radius: 8px;
+.titaui-cascader-time-popup{
+  .rc-cascader-menu{
+    width: 80px;
+    text-align: center;
   }
 }

package/src/components/cascader/index.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect, Fragment, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import Rccascader from "rc-cascader";
+import TimeCascader from "./time";
 import "rc-cascader/assets/index.less";
 import "./index.scss";
 
@@ -10,6 +11,7 @@ interface Props {
   placeholder?: any;
   initText?: any; //想要默认值输入框的值就传进来，不要问组件里为什么不做这个事情，优化算法
   style?: any;
+  popupClassName?: any;
   splitSymbol?: string;
 }
 
@@ -23,13 +25,13 @@ const Cascader = ({
   style = { width: "100px" },
   placeholder = "请选择",
   splitSymbol = "",
+  popupClassName = "",
   ...restProps
 }: Props) => {
   const [selectValue, setSelectValue] = useState(value);
   const [inputValue, setInputValue] = useState(initText);
 
   const handleChange = (value, selectedOptions) => {
-    console.log(value, selectedOptions);
     onChange && onChange(value, selectedOptions);
     setSelectValue(value);
     let str = selectedOptions.map((o) => o.label).join(splitSymbol);
@@ -41,22 +43,22 @@ const Cascader = ({
   }, [value]);
 
   return (
-    <Fragment>
-      <Rccascader
-        options={options}
-        onChange={handleChange}
-        value={selectValue}
-        {...restProps}
-      >
-        <div className={preCls} style={style}>
-          <div className={`${preCls}-text`}>
-            {inputValue ? inputValue : placeholder}
-          </div>
-          <span className="tu-icon-caret-down" />
+    <Rccascader
+      options={options}
+      onChange={handleChange}
+      value={selectValue}
+      popupClassName={`${preCls}-popup ${popupClassName}`}
+      {...restProps}
+    >
+      <div className={preCls} style={style}>
+        <div className={`${preCls}-text`}>
+          {inputValue ? inputValue : placeholder}
         </div>
-      </Rccascader>
-    </Fragment>
+        <span className="tu-icon-caret-down" />
+      </div>
+    </Rccascader>
   );
 };
 
+Cascader.TimeCascader = TimeCascader;
 export default Cascader;

package/src/components/cascader/time.js

@@ -0,0 +1,13 @@
+import React, { FC,Fragment } from "react";
+import Cascader from './index'
+
+const TimeCascader = ({...restProps})=>{
+  return <Fragment>
+    <Cascader
+      popupClassName={' titaui-cascader-time-popup'}
+      {...restProps}
+    />
+  </Fragment>
+}
+
+export default TimeCascader

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

@@ -11,6 +11,7 @@ interface IProps {
   require?: boolean;
   width?: number;
   children?: ReactElement;
+  className?: any;
   direction?: "horizontal" | "vertical";
 }
 
@@ -18,15 +19,14 @@ const FieldGroup = (props: IProps, ref) => {
   const {
     label = "",
     direction = "vertical",
-    // onChange,
-    // values,
+    className,
     children,
   } = props;
 
   useImperativeHandle(ref, () => ({}));
 
   return (
-    <div className={classNames(precls, `${precls}--${direction}`)}>
+    <div className={classNames(precls,className, `${precls}--${direction}`)}>
       <div className={`${precls}__label`}>{label}</div>
       <div className={`${precls}__content`}>
         {React.Children.map(children, (child) => {

package/src/components/menus/components/menu-tree/index.scss

@@ -23,6 +23,9 @@
       color: #2879ff;
       font-weight: 500;
     }
+    .titaui-menus-tree__sub-menu-item-node-title{
+      color: #2879ff;
+    }
   }
   .rc-tree-indent {
     display: none;

package/src/components/menus/export-modules/manage-menus/index.tsx

@@ -23,7 +23,7 @@ interface TreeNode {
 
 const preCls = "titaui-menus";
 
-const expandedKeys = ["okr"]
+const expandedKeys = ["okr"];
 
 const ManageMenus = (props: Props) => {
   const { history } = props;

package/src/components/nav-top/components/user-own-menu/utils.ts

@@ -40,7 +40,7 @@ export const getOwnSet = () => {
       id: "role",
       url: "tu-icon-gongsi",
       title: "企业管理规定",
-      objUrl: `${apiServer}/u/${userId}/Home#/enterprise/manage`,
+      objUrl: `${apiServer}/u/${userId}/Home#/enterprise/manage?reactRouterName=okr`,
     },
   ];
 

package/src/components/okr-detail/components/okr-tree/tree-node/e-node/e-project.js

@@ -70,7 +70,7 @@ export default props => {
 
       <span className={classNames(`${preCls}__e-project-node-actions-user`)}>
         {/* <TextAvatar name={user.name} id={user.userId} width={76} editable onEditUser={onEditUserHandler} /> */}
-        <Avatar.Text name={data.principalUser.name} id={data.principalUser.userId} width={64} extraCls={isGray&&`${preCls}__e-project-node-gray`} />
+        <Avatar.Text name={data?.principalUser?.name} id={data?.principalUser?.userId} width={64} extraCls={isGray&&`${preCls}__e-project-node-gray`} />
       </span>
 
       <span className={classNames(`${preCls}__e-project-node-actions-date`)}>

package/src/components/okr-detail/components/okr-tree/tree-node/e-node/e-task-level2.js

@@ -218,8 +218,8 @@ export default (props) => {
           className={classNames(`${preCls}__e-task-level2-node-actions-user`)}
         >
           <Avatar.Text
-            name={user.name}
-            id={user.userId}
+            name={user?.name}
+            id={user?.userId}
             width={64}
             editable={hasAuth}
             onEditUser={onEditUserHandler}

package/src/components/okr-detail/components/okr-tree/tree-node/e-node/e-task.js

@@ -219,8 +219,8 @@ export default (props) => {
       <span className={classNames(`${preCls}__e-task-node-actions`)}>
         <span className={classNames(`${preCls}__e-task-node-actions-user`)}>
           <Avatar.Text
-            name={user.name}
-            id={user.userId}
+            name={user?.name}
+            id={user?.userId}
             width={64}
             editable={hasEditAuth}
             onEditUser={onEditUserHandler}

package/src/components/scrollbar/index.tsx

@@ -11,13 +11,14 @@ interface Props {
 }
 
 export default (props: Props) => {
-  const { children, style } = props;
+  const { children, style,...restProps } = props;
 
   // @ts-ignore
   return <SimpleBar
     className={classNames(preCls)}
     timeout={800}
     style={style}
+    {...restProps}
   >
     {children}
   </SimpleBar>

package/src/components/select-tags/index.scss

@@ -1,83 +1,112 @@
-.rc-select-single:not(.rc-select-customize-input) .rc-select-selector {
-  border: 1px solid #DFE3EA;
-}
+.titaui-select-tags {
+  display: flex;
+  .rc-select-single:not(.rc-select-customize-input) .rc-select-selector {
+    border: 1px solid #DFE3EA;
+  }
 
-.rc-select-focused{
-  .rc-select-selector{
-    border: 1px solid #DFE3EA !important;
+  .rc-select-focused {
+    .rc-select-selector {
+      border: 1px solid #DFE3EA !important;
+    }
   }
-}
-.rc-select-selection-item-remove{
-  display: flex;
-  align-items: center;
-}
-.rc-select-multiple .rc-select-selector .rc-select-selection-search-input {
-  display: none;
-}
 
-.rc-select-single:not(.rc-select-customize-input) .rc-select-selector .rc-select-selection-search-input{
-  display: none;
-}
+  .rc-select-selection-item-remove {
+    display: flex;
+    align-items: center;
+  }
 
-.rc-select-single .rc-select-selector .rc-select-selection-item, .rc-select-single .rc-select-selector .rc-select-selection-placeholder{
-  top: unset;
-  left: 12px;
-}
+  .rc-select-multiple .rc-select-selector .rc-select-selection-search-input {
+    display: none;
+  }
 
-.rc-select-single .rc-select-selector{
-  align-items: center;
-}
+  .rc-select-single:not(.rc-select-customize-input) .rc-select-selector .rc-select-selection-search-input {
+    display: none;
+  }
 
-.rc-select-selector{
-  cursor: pointer;
-  padding: 0 12px;
-  background: #FFFFFF;
-  border-radius: 8px;
-  border: 1px solid #DFE3EA;
-  height: 36px;
-  box-sizing: border-box;
-}
-.rc-select-multiple .rc-select-selector {
-  height: unset;
-  padding: 7px 12px 0;
-  border: 1px solid #DFE3EA;
-}
-.rc-select-multiple .rc-select-selector .rc-select-selection-overflow-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 7px;
-}
-.rc-select-multiple .rc-select-selector .rc-select-selection-placeholder{
-  line-height: 1;
-  margin-bottom: 7px;
-  position: relative;
-  top: -2px;
-}
+  .rc-select-single .rc-select-selector .rc-select-selection-item,
+  .rc-select-single .rc-select-selector .rc-select-selection-placeholder {
+    top: unset;
+    left: 12px;
+  }
 
-.rc-select-selection-item-content{
-  margin-right: 8px;
-}
+  .rc-select-single .rc-select-selector {
+    align-items: center;
+  }
 
-.rc-select-multiple .rc-select-selector .rc-select-selection-item {
-  font-size: 12px;
-  flex: none;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  background: #F0F4FA;
-  border-radius: 10px;
-  margin-right: 2px;
-  padding: 0 5px 0 10px;
-  .tu-icon-cross{
+  .rc-select-selector {
     cursor: pointer;
-    color:#a4acB9;
-    font-size: 14px;
+    padding: 0 12px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    border: 1px solid #DFE3EA;
+    height: 36px;
+    box-sizing: border-box;
+  }
+
+  .rc-select-multiple .rc-select-selector {
+    height: unset;
+    padding: 7px 12px 0;
+    border: 1px solid #DFE3EA;
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-overflow-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 7px;
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-placeholder {
+    line-height: 1;
+    margin-bottom: 7px;
+    position: relative;
+    top: -2px;
+  }
+
+  .rc-select-selection-item-content {
+    margin-right: 8px;
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-item {
+    font-size: 12px;
+    flex: none;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    background: #F0F4FA;
+    border-radius: 10px;
+    margin-right: 2px;
+    padding: 0 5px 0 10px;
+
+    .tu-icon-cross {
+      cursor: pointer;
+      color: #a4acB9;
+      font-size: 14px;
+    }
+  }
+
+  .titaui-select-noborder {
+    .rc-select-selector {
+      border: none !important;
+      height: 22px;
+      line-height: 1;
+    }
+  }
+
+  .rc-select-arrow {
+    font-size: 16px;
+    transform: scale(0.5);
+  }
+
+  .rc-select-show-arrow .rc-select-arrow {
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    right: 12px;
+    height: 22px;
   }
 }
-.rc-select-item {
-  font-size: 14px;
-}
-.rc-select-dropdown{
+
+.titaui-dropDown {
   z-index: 2000;
   box-sizing: border-box;
   padding: 16px 6px;
@@ -85,48 +114,43 @@
   box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
   border: 1px solid #F0F2F5;
   border-radius: 8px;
-}
 
-.rc-select-item-option{
-  height: 36px;
-  line-height: 36px;
-  cursor: pointer;
-}
-.rc-select-item-option-selected {
+  .rc-select-item {
+    font-size: 14px;
+    padding: 7px 6px;
+  }
 
-  color: #2879FF;
-}
-.rc-select-item-option-active {
-  border-radius: 8px;
-  color: #2879FF;
-  background: #F7F8FA;
-}
+  .rc-select-item-option {
+    height: 36px;
+    box-sizing: border-box;
+    line-height: 36px;
+    cursor: pointer;
+  }
 
-.rc-select-arrow{
-  font-size: 16px;
-  transform: scale(0.5);
-}
-.rc-select-show-arrow .rc-select-arrow {
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  right: 12px;
-  height: 22px;
-}
+  .rc-select-item-option-selected {
 
-.rc-select-item-option-state{
-  display: none;
-}
+    color: #2879FF;
+  }
 
-.titaui-select-hasSelectItem{
-  .rc-select-item-option-state{
-    display: block;
+  .rc-select-item-option-content {
+    line-height: 24px;
+  }
+
+  .rc-select-item-option-active {
+    border-radius: 8px;
+    color: #2879FF;
+    background: #F7F8FA;
+  }
+
+
+
+  .rc-select-item-option-state {
+    display: none;
   }
 }
-.titaui-select-noborder{
-  .rc-select-selector{
-    border: none !important;
-    height: 22px;
-    line-height: 1;
+
+.titaui-select-hasSelectItem {
+  .rc-select-item-option-state {
+    display: block;
   }
 }

package/src/components/select-tags/index.tsx

@@ -22,7 +22,7 @@ interface Props {
   suffix?:string;
 }
 
-const preCls = "titaui-select";
+const preCls = "titaui-select-tags";
 
 const SelectTags: FC<Props> = ({
   selected = [],
@@ -39,43 +39,43 @@ const SelectTags: FC<Props> = ({
 
   const [value, setValue] = useState(selected);
 
-  // useEffect(()=>{
-  //   if(!selected) return
-  //   setValue(selected)
-  // },[selected])
-
   const onhandleChange = (value, options) => {
     onChange && onChange(value, options,name);
     setValue(value);
   };
 
   return (
-    <Select
-      className={classNames(preCls, className,{[`${preCls}-noborder`]: noBorder},)}
-      dropdownClassName={classNames({
-        [`${preCls}-hasSelectItem`]: mode === "multiple",
-      })}
-      value={value}
-      style={style}
-      mode={mode}
-      optionFilterProp="children"
-      optionLabelProp="children"
-      placeholder={placeholder}
-      onChange={onhandleChange}
-      showArrow={true}
-      removeIcon={<span className="tu-icon-cross"></span>}
-      inputIcon={<span className="tu-icon-caret-down" />}
-      menuItemSelectedIcon={<span className="tu-icon-finished" />}
-      {...restProps}
-    >
-      {data.map((item, key) => {
-        return (
-          <Option key={key} value={item.value}>
-            {item.label}
-          </Option>
-        );
-      })}
-    </Select>
+    <div className={preCls}>
+      <Select
+        className={classNames(className,{[`${preCls}-noborder`]: noBorder},)}
+        dropdownClassName={classNames(
+          `titaui-dropDown`,
+        {
+          [`${preCls}-hasSelectItem`]: mode === "multiple",
+        })}
+        value={value}
+        style={style}
+        mode={mode}
+        optionFilterProp="children"
+        optionLabelProp="children"
+        placeholder={placeholder}
+        onChange={onhandleChange}
+        showArrow={true}
+        removeIcon={<span className="tu-icon-cross"></span>}
+        inputIcon={<span className="tu-icon-caret-down" />}
+        menuItemSelectedIcon={<span className="tu-icon-finished" />}
+        {...restProps}
+      >
+        {data.map((item, key) => {
+          return (
+            <Option key={key} value={item.value}>
+              {item.label}
+            </Option>
+          );
+        })}
+      </Select>
+    </div>
+
   );
 };
 

package/src/components/upvote/index.tsx

@@ -29,6 +29,16 @@ interface Props {
   handleRequest?: (type: number) => Promise<any>;
 }
 
+const getBackgroundImage = (type) => {
+  let selected = attitudeArr.find((a) => a.type == type);
+  if (selected) {
+    return {
+      backgroundImage: `url(${selected.img})`,
+    };
+  }
+  return {};
+};
+
 function UpvoteButton({
   type,
   count,
@@ -110,12 +120,7 @@ function UpvoteButton({
                 [buttonType]: buttonType && upvoteState.type == 0,
                 "feed-upvote-button": true,
               })}
-              style={{
-                backgroundImage: `url(${
-                  (attitudeArr.find((a) => a.type == upvoteState.type) || {})
-                    .img
-                })`,
-              }}
+              style={getBackgroundImage(upvoteState.type)}
             />
           )}
         </a>
@@ -156,9 +161,7 @@ export const UpvoteButtonForFeed = (props: Props) => {
                 "feed-upvote-button": true,
               })}
               style={{
-                backgroundImage: `url(${
-                  (attitudeArr.find((a) => a.type == type) || { img: "" }).img
-                })`,
+                ...getBackgroundImage(type),
                 marginRight: 4,
               }}
             />

package/src/index.d.ts

@@ -1,7 +1,8 @@
 interface Window {
   BSGlobal: any;
   Talent: any;
-  trackAction?: (actionName?: string) => {}
+  trackAction?: (actionName?: string) => {};
+  getLocale: Function;
 }
 
 declare module '*.json' {