@titaui/pc 1.7.21 → 1.7.25

package/lib/utils/helpers.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.cssSupport = cssSupport;
 exports.escapeHtml = escapeHtml;
+exports.getLoginUserInfo = void 0;
 exports.getTenantInfo = getTenantInfo;
 exports.getUploadMaxSize = getUploadMaxSize;
 exports.isLocal = exports.isDingDing = void 0;
@@ -58,4 +59,10 @@ function escapeHtml(str) {
   return str.replace(/(&|<|>|"|')/g, function (str) {
     return htmlEscapes[str];
   });
-}
+}
+
+var getLoginUserInfo = function getLoginUserInfo() {
+  return (0, _bsGlobal.getBSGlobal)('loginUserInfo');
+};
+
+exports.getLoginUserInfo = getLoginUserInfo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titaui/pc",
-  "version": "1.7.21",
+  "version": "1.7.25",
   "nameCN": "",
   "description": "",
   "main": "src/index.js",

package/src/components/button/text-btn/index.scss

@@ -1,5 +1,6 @@
 .titaui-text-btn{
   cursor: pointer;
+  font-size: 14px;
   &__icon{
     margin-right: 4px;
   }

package/src/components/button/text-btn/index.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import classNames from 'classnames';
-import { TextBtnProps } from '../types';
-import './index.scss';
-const precls = 'titaui-text-btn';
+import React from "react";
+import classNames from "classnames";
+import { TextBtnProps } from "../types";
+import "./index.scss";
+const precls = "titaui-text-btn";
 
 const TextBtn = (props: TextBtnProps) => {
   const {
-    type = 'default',
-    icon = '',
-    size = 14,
-    text = '确定',
+    type = "default",
+    icon = "",
+    text = "确定",
     onClick = () => {},
-    className = '',
+    className = "",
     disabled = false,
+    style ={},
   } = props;
 
   const renderIcon = () => {
-    if (typeof icon == 'string') {
+    if (typeof icon == "string") {
       return (
         <span className={`${precls}__icon`}>
           <span className={icon} />
@@ -37,10 +37,10 @@ const TextBtn = (props: TextBtnProps) => {
         precls,
         `${precls}--${type}`,
         { [`${precls}--disabled`]: disabled },
-        className,
+        className
       )}
       onClick={onClickHandler}
-      style={{fontSize:`${size}px`}}
+      style={style}
     >
       {icon && renderIcon()}
       {text}

package/src/components/button/types.ts

@@ -26,4 +26,5 @@ export interface TextBtnProps {
   onClick?: Function;
   className?: string;
   disabled?: boolean;
+  style?: any;
 }

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/common-share/index.scss

@@ -0,0 +1,199 @@
+.okr-share-card {
+  position: relative;
+  width: 340px;
+  height: 434px;
+  border-radius: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  &-user__name {
+    margin-top: 4px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #141c28;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+    > span {
+      max-width: 170px;
+      margin-right: 5px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+    }
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    height: 70px;
+    bottom: 0;
+    left: 0px;
+    right: 0px;
+    border-bottom-left-radius: 24px;
+    border-bottom-right-radius: 24px;
+  }
+  &-user__dept {
+    font-size: 12px;
+    font-weight: 400;
+    color: #3f4755;
+    line-height: 18px;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+  }
+  .card-okr__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 50px;
+  }
+  .card-okr__name {
+    position: relative;
+    width: 250px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #141c28;
+    line-height: 24px;
+    margin-top: 24px;
+    margin-bottom: 28px;
+    text-align: center;
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+    &::before {
+      top: -16px;
+      left: -16px;
+    }
+    &::after {
+      bottom: -16px;
+      right: -16px;
+    }
+  }
+  .card-kr__wrapper {
+    width: 100%;
+    max-height: 240px;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .card-kr__item {
+    font-size: 14px;
+    font-weight: 400;
+    color: #3f4755;
+    line-height: 22px;
+    margin-bottom: 6px;
+    position: relative;
+    width: 250px;
+    text-align: left;
+    &::before {
+      content: "";
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      top: 8px;
+      left: -14px;
+    }
+  }
+}
+.okr-share-card__selector {
+  position: relative;
+  .tu-icon-close {
+    position: absolute;
+    top: -8.25px;
+    right: -20px;
+    font-size: 16.5px;
+    color: #fff;
+  }
+  .share-card-button__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .share-card-button {
+    box-sizing: border-box;
+    width: 120px;
+    height: 36px;
+    border-radius: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 6px 0;
+    font-size: 14px;
+    color: #ffffff;
+    transition: all 0.2s ease;
+    &.download {
+      border: 1px solid #ffffff;
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+    &.share {
+      background: rgba($color: #5c8eff, $alpha: 0);
+      position: relative;
+      &::after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        background: linear-gradient(180deg, #88bcff 0%, #2879ff 100%);
+        border-radius: 18px;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+      &:hover {
+        background: rgba($color: #5c8eff, $alpha: 1);
+      }
+    }
+  }
+}
+.okr-share-mblog {
+  &__container {
+    width: 480px;
+    height: 420px;
+    background-color: #fff;
+    border-radius: 6px;
+  }
+  &__header {
+    height: 58px;
+    padding: 0 32px;
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    font-weight: bold;
+    color: #141c28;
+    line-height: 26px;
+    border-bottom: 1px solid #e9ecf0;
+    justify-content: space-between;
+    .tu-icon-close {
+      cursor: pointer;
+    }
+  }
+  &__body {
+    padding: 16px 32px 20px;
+  }
+  &__attachment {
+    width: 118px;
+    height: 160px;
+    overflow: hidden;
+    > img {
+      width: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+import React, { useRef, useState,useEffect } from 'react';
+import { Modal } from 'tita-ui';
+import PublishMblog from './publishMblog';
+import Queue from 'rc-queue-anim';
+import './index.scss';
+
+interface Props {
+  closeModal: Function;
+  getModalRef: Function;
+  uid: string;
+  shareComponent: any;
+  shareImage?:string 
+}
+
+const ShareContent = function({ closeModal, getModalRef, uid,shareComponent,shareImage }: Props) {
+  const [showPublish, setShowPublish] = useState(false);
+  useEffect(() => {
+    if(shareImage){
+      setTimeout(() => {
+        setShowPublish(true)
+      }, 200);
+    }
+  }, [shareImage])
+  return (
+    <Queue type='bottom'>
+      {!shareImage && (
+        shareComponent
+      )}
+      {showPublish && shareImage && (
+        <PublishMblog
+          base64={shareImage}
+          getModalRef={getModalRef}
+          closeModal={closeModal}
+          key='publish'
+          uid={uid}
+        />
+      )}
+    </Queue>
+  );
+};
+export interface ShareData {
+  okrName: string;
+  okrId: number;
+  krs: string[];
+  user: {
+    name: string;
+    userId: number;
+    departmentName: string;
+    departmentId: number;
+    avatar: {
+      color: string;
+      src?: string;
+    };
+  };
+}
+interface ShareProps {
+  uid: any;
+  visible:boolean;
+  onClose: () => void
+  shareComponent: (share:(img:string) => void) => any
+}
+const OkrShare: React.FC<ShareProps> = ({ uid,visible,onClose,shareComponent }) => {
+  const [shareImage,setShareImage] = useState<string>()
+  const modalRef = useRef<any>();
+
+  return (
+    <>
+      <Modal
+        visible={visible}
+        className="document-mouse-event-ignore"
+        destroyOnClose
+        customContent
+        // maskClosable
+        onCancel={() => onClose()}
+        ref={modalRef}
+      >
+        {visible ? (
+          <ShareContent
+            closeModal={() => onClose()}
+            getModalRef={() => modalRef.current.getRef()}
+            uid={uid}
+            shareImage={shareImage}
+            shareComponent={shareComponent(setShareImage)}
+          />
+        ) : null}
+      </Modal>
+    </>
+  );
+};
+
+export default OkrShare;

package/src/components/common-share/publishMblog.tsx

@@ -0,0 +1,79 @@
+import React, { ReactElement, useEffect, useState } from "react";
+import MBlog from "../mblog";
+import MBlogContext from "../mblog/context";
+import { findDOMNode } from "react-dom";
+import { addShare, uploadBase64 } from "./request-apis";
+import Toast from "../toast";
+import { getBSGlobal } from "../../utils/bs-global";
+
+const loginUserId = getBSGlobal("loginUserInfo").Id;
+
+interface Props {
+  base64: string;
+  getModalRef: Function;
+  closeModal: Function;
+  uid: any;
+}
+
+function PublishMblog({
+  base64,
+  getModalRef,
+  closeModal,
+  uid,
+}: Props): ReactElement {
+  const [file, setFile] = useState({ url: "", pending: true });
+  const [status, setStatus] = useState(0);
+  useEffect(() => {
+    uploadBase64(base64.split(",")[1]).then((res) => {
+      setFile({
+        url: res.Data.obj,
+        pending: false,
+      });
+    });
+  }, []);
+  return (
+    <div className="okr-share-mblog__container">
+      <div className="okr-share-mblog__header">
+        发布动态
+        <i className="tu-icon-close" onClick={() => closeModal()} />
+      </div>
+      <div className="okr-share-mblog__body">
+        <MBlogContext.Provider
+          value={{ popContainer: findDOMNode(getModalRef()) }}
+        >
+          <MBlog
+            autoResizing={false}
+            defaultContent="秀一秀我的 OKR"
+            submitStatus={status}
+            commentsTypeKey={"share-okr" + loginUserId + uid}
+            autoFocus
+            onMblogSubmit={async (type, data) => {
+              if (file.pending) {
+                return Toast.Error("图片正在上传...");
+              }
+              setStatus(2);
+              await addShare({
+                ...data,
+                FileUrls: file.url,
+                Visibility: 1,
+                isSendSMS: false,
+              });
+              Toast.Success("分享成功");
+              setStatus(1);
+              closeModal();
+            }}
+            isShowAttachment={false}
+            isShowSendSms={false}
+            isShowBtnCancel={false}
+            isShowRange={false}
+          />
+        </MBlogContext.Provider>
+        <div className="okr-share-mblog__attachment">
+          <img src={base64} alt="" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PublishMblog;

package/src/components/common-share/request-apis.js

@@ -0,0 +1,37 @@
+import axios from 'axios';
+
+const tenantId = BSGlobal && BSGlobal.tenantInfo.Id || 0;
+const userId = BSGlobal && BSGlobal.loginUserInfo.Id || 0;
+
+const requestDomain = () => {
+  if (!window.location.hostname.match(/dev/)) return '';
+  return 'http://www.tita.gift'
+};
+
+export const getImageBase64ByUrl = toUserId => {
+  return axios.post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/share/getBase64Str`, { toUserId })
+    .then(getBase64Str => {
+      return getBase64Str.data;
+    })
+}
+
+export const getBase64DownloadUrl = base64 => {
+  return axios.post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/share/imageDownLoadDfs`, { 'SharePicLink': base64 })
+    .then(dfs => {
+      return dfs.data;
+    })
+}
+
+export const uploadBase64 = base64 => {
+  return axios.post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/share/imagedfs`, { 'SharePicLink': base64 })
+    .then(dfs => {
+      return dfs.data;
+    })
+}
+
+export const addShare = data => {
+  return axios.post(`${requestDomain()}/api/v2/${tenantId}/${userId}/user/feed/AddShare`, data)
+    .then(dfs => {
+      return dfs.data;
+    })
+}

package/src/components/common-share/types.ts

@@ -0,0 +1,4 @@
+export interface CurrentPositon {
+  x: number,
+  y: number
+}

package/src/components/follower-visitor/index.scss

@@ -2,13 +2,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  top: -17px;
+  width: 634px;
   height: 36px;
-  background: linear-gradient(270deg, #f0f4fa 0%, #d4e4ff 53%, #f0f4fa 100%);
+  margin: 0 auto;
   font-size: 14px;
-  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica,
-    sans-serif, PingFang SC, Microsoft YaHei;
+  background: #FFF4D6;
+  box-shadow: 0px 4px 16px 0px rgba(127, 145, 180, 0.2);
+  border-radius: 18px;
   font-weight: 400;
-  color: #2879ff;
+  color: #704600;
+  // color: #2879ff;
   line-height: 22px;
   position: relative;
   transition: all 0.3s linear;