npm - @titaui/pc - Versions diffs - 1.7.49 → 1.7.53 - Mend

@titaui/pc 1.7.49 → 1.7.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1623) hide show

package/src/components/file-list/components/single-file/index.tsx ADDED Viewed

@@ -0,0 +1,115 @@
+import React, { FC, useState } from "react";
+import classNames from "classnames";
+import { ISingleFileProps } from "../../interface";
+import { getFileTypeMapIcon } from "../../util";
+import Tooltip from "../../../tooltip";
+import "./index.scss";
+const prefix = "titaui-new-file-list-single-file";
+const SingleFile: FC<ISingleFileProps> = ({
+  data,
+  index,
+  onPreview,
+  showDownload,
+}) => {
+  const [isMouseEnter, setIsMouseEnter] = useState(false);
+  const { isImg, fileImg, backGroundColor, canPreview } = getFileTypeMapIcon(
+    data.fileType
+  );
+  const handleMouseEnter = () => {
+    setIsMouseEnter(true);
+  };
+  const handleMouseLeave = () => {
+    setIsMouseEnter(false);
+  };
+  const handlePreviewImg = () => {
+    onPreview && onPreview(index);
+  };
+  return (
+    <div className={prefix}>
+      {isMouseEnter && (
+        <div className={prefix + "__operate"} onMouseLeave={handleMouseLeave}>
+          {!isImg && canPreview && data.previewUrl && (
+            <a
+              className={classNames(prefix + "__operate-item", {
+                [prefix + "__operate-item--only"]: !showDownload,
+              })}
+              href={data.previewUrl}
+              target="_blank"
+            >
+              <i
+                className={classNames(
+                  "tu-icon-yulan",
+                  prefix + "__operate-item-icon"
+                )}
+              />
+              预览
+            </a>
+          )}
+          {isImg && data.previewUrl && (
+            <a
+              className={classNames(prefix + "__operate-item", {
+                [prefix + "__operate-item--only"]: !showDownload,
+              })}
+              onClick={handlePreviewImg}
+            >
+              <i
+                className={classNames(
+                  "tu-icon-yulan",
+                  prefix + "__operate-item-icon"
+                )}
+              />
+              预览
+            </a>
+          )}
+          {showDownload && (
+            <a
+              className={classNames(prefix + "__operate-item", {
+                [prefix + "__not-preview"]: !canPreview || !data.previewUrl,
+              })}
+              href={data.downloadUrl}
+            >
+              <i
+                className={classNames(
+                  "tu-icon-APP-xiazai",
+                  prefix + "__operate-item-icon"
+                )}
+              />
+              下载
+            </a>
+          )}
+        </div>
+      )}
+      <div
+        className={classNames(prefix + "__file-preview")}
+        onMouseEnter={handleMouseEnter}
+        style={{ backgroundColor: backGroundColor }}
+      >
+        {isImg && (
+          <img
+            className={prefix + "__file-preview-img"}
+            src={data.previewUrl || data.bigImageUrl}
+          />
+        )}
+        {!isImg && (
+          <div className={prefix + "__file-preview-other"}>
+            <img
+              className={prefix + "__file-preview-other-img"}
+              src={fileImg}
+            />
+          </div>
+        )}
+      </div>
+      <div className={prefix + "__file-name"}>
+        <Tooltip.Text text={data.fileName} maxWidth={180} />
+      </div>
+    </div>
+  );
+};
+export default SingleFile;

package/src/components/file-list/img/new-file-list-doc.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/components/file-list/img/new-file-list-other.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/components/file-list/img/new-file-list-pdf.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="29.782%" x2="83.621%" y2="29.782%" id="a"><stop stop-color="#FD4F54" offset="0%"/><stop stop-color="#CD1116" offset="100%"/></linearGradient><linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="b"><stop stop-color="#EC3C3C" offset="0%"/><stop stop-color="#FF8383" offset="100%"/></linearGradient><linearGradient x1="47.638%" y1="10.393%" x2="52.642%" y2="90.65%" id="d"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#F6AFAF" offset="45.302%"/><stop stop-color="#FFF" offset="100%"/></linearGradient><filter x="-15.6%" y="-15.6%" width="131.2%" height="131.2%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".5" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".25" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.878431373 0 0 0 0 0.125490196 0 0 0 0 0.125490196 0 0 0 1 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><path d="M0 .452h28v27.097H0z"/><path d="M8.089 8.129h15.555c.86 0 1.556.668 1.556 1.492v14.177c0 .824-.696 1.492-1.556 1.492H8.09c-.86 0-1.556-.668-1.556-1.492V9.621c0-.824.697-1.492 1.556-1.492z" fill="url(#a)" fill-rule="nonzero"/><path d="M20.291 2.71c.84 0 1.521.674 1.521 1.505v19.57c0 .831.681 1.505 1.521 1.505H4.321c-.84 0-1.521-.674-1.521-1.505V4.215c0-.831.681-1.505 1.521-1.505h15.97z" fill="url(#b)" fill-rule="nonzero"/><g filter="url(#c)" transform="translate(4 6.032)" fill-rule="nonzero"><path d="m11.249.837.176.048.189.062c.729.268 1.145.751 1.297 1.338.31 1.258-.573 2.82-2.161 4.553l-.334.355.101.388c.175.649.362 1.257.564 1.823l.155.417.131.33.215.099c1.977.926 3.282 1.856 3.643 2.845l.045.141.032.143c.103.492-.05.963-.441 1.359-.329.282-.684.43-1.06.43-1.233 0-2.347-1.514-3.368-3.854l-.082-.188-.421-.174a24.406 24.406 0 0 0-1.997-.705l-.49-.143L7.043 10l-.206.136c-1.307.845-2.517 1.418-3.54 1.549l-.217.02-.21.008c-.924 0-1.603-.48-1.851-1.311-.172-.587-.078-1.098.184-1.43.4-.557 1.189-.824 2.353-.824.815 0 1.813.13 2.908.379l.322.076.345-.251c.414-.31.815-.636 1.195-.97l.374-.338.28-.267-.04-.192c-.412-2.088-.448-3.81.134-4.852l.092-.151.096-.135c.465-.59 1.17-.801 1.986-.609zm.968 11.202.039.07c.628 1.126 1.235 1.783 1.545 1.783.033 0 .077-.018.145-.075.085-.085.094-.119.08-.18-.073-.369-.656-.928-1.695-1.534l-.114-.064zm-8.66-2.594c-.813 0-1.194.138-1.303.27l-.024.046c-.024.053-.027.134.016.289.065.26.22.386.625.386.511 0 1.225-.234 2.084-.68l.27-.146-.089-.016a10.444 10.444 0 0 0-1.345-.145l-.234-.004zM9.333 8.21l-.263.229-.337.283-.374.305.172.052c.36.112.723.235 1.078.364l.12.045-.067-.195a21.92 21.92 0 0 1-.205-.656l-.124-.427zm1.348-6.148a.506.506 0 0 0-.418.193c-.348.437-.439 1.523-.247 2.97l.061.414.085-.095c1.02-1.189 1.577-2.254 1.512-2.853l-.016-.095c-.031-.158-.143-.297-.471-.415l-.134-.043a.994.994 0 0 0-.372-.076z" fill="#FFF"/><path d="m10.416 7.193.101.388c.175.649.362 1.257.564 1.823l.155.417.131.33c.817 2.33 1.982 3.858 3.494 4.587-.329.282-.684.43-1.06.43-1.233 0-2.347-1.514-3.368-3.854l-.082-.188a25.48 25.48 0 0 1-.766-2.113 27.948 27.948 0 0 1-.605-2.237l-.038-.192c-.413-2.088-.449-3.81.133-4.852l.092-.151.096-.135c.465-.59 1.17-.801 1.986-.609l.176.048.189.062c.729.268 1.684 1.674-.427 1.23-1.408-.297-1.665 1.375-.77 5.016z" fill="url(#d)"/></g></g></svg>

package/src/components/file-list/img/new-file-list-ppt.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/components/file-list/img/new-file-list-radio.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/components/file-list/img/new-file-list-video.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/components/file-list/img/new-file-list-xls.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/components/file-list/index.scss ADDED Viewed

@@ -0,0 +1,5 @@
+.titaui-new-file-list {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+}

package/src/components/file-list/index.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import React, { FC, useRef } from "react";
+import { IFileListProps } from "./interface";
+import SingleFileCmp from "./components/single-file";
+import ImgViewer from "../img-viewer";
+import { isImg } from "./util";
+import "./index.scss";
+const prefix = "titaui-new-file-list";
+const FileList: FC<IFileListProps> = ({ data, showDownload = true }) => {
+  const imgViewerRef = useRef();
+  const handleImgPreview = (index) => {
+    // @ts-ignore
+    imgViewerRef.current && imgViewerRef.current.show(index);
+  };
+  return (
+    <div className={prefix}>
+      {data.map((file, index) => (
+        <SingleFileCmp key={file.documentSource+index} data={file} index={index} showDownload={showDownload} onPreview={handleImgPreview} />
+      ))}
+      <ImgViewer showDownload={showDownload} data={data.filter(file => isImg(file.fileType))} ref={imgViewerRef}/>
+    </div>
+  );
+};
+export default FileList;
+export const SingleFile = SingleFileCmp;

package/src/components/file-list/interface.ts ADDED Viewed

@@ -0,0 +1,28 @@
+export interface IFileType {
+  documentId: number;
+  bigImageUrl: string;
+  fileName: string;
+  fileType: string;
+  previewUrl: string;
+  deleteable: boolean;
+  smallImageUrl: string;
+  createDate: any;
+  documentSource: number;
+  downloadUrl: string;
+  imageUrl: null
+  relatedFileId: number;
+  size: number;
+  thumbnailGenerated: boolean;
+}
+export interface ISingleFileProps {
+  data: IFileType;
+  index?: number;
+  onPreview?: Function;
+  showDownload: boolean;
+}
+export interface IFileListProps {
+  data: IFileType[];
+  showDownload?: boolean;
+}

package/src/components/file-list/util.ts ADDED Viewed

@@ -0,0 +1,56 @@
+import DocSvg from './img/new-file-list-doc.svg';
+import OtherSvg from './img/new-file-list-other.svg';
+import PdfSvg from './img/new-file-list-pdf.svg';
+import PptSvg from './img/new-file-list-ppt.svg';
+import RadioSvg from './img/new-file-list-radio.svg';
+import VideoSvg from './img/new-file-list-video.svg';
+import XlsSvg from './img/new-file-list-xls.svg';
+export const getFileTypeMapIcon = (fileType: string) => {
+  let isImg = false;
+  let backGroundColor = '';
+  let fileImg;
+  let canPreview = false;
+  if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
+    isImg = true;
+    canPreview = true;
+  } else if (/^(mp3|ogg|ape|flac)$/.test(fileType.toLowerCase())) {
+    fileImg = RadioSvg;
+    backGroundColor = '#FFE6FC';
+  } else if (/^(avi|wmv|mov|mp4|rmvb)$/.test(fileType.toLowerCase())) {
+    fileImg = VideoSvg;
+    backGroundColor = '#F5E6FF';
+  } else if (/^(pptx|ppt)$/.test(fileType.toLowerCase())) {
+    fileImg = PptSvg;
+    backGroundColor = '#FFF5E6';
+    canPreview = true;
+  } else if (/^(doc|docx)$/.test(fileType.toLowerCase())) {
+    fileImg = DocSvg;
+    backGroundColor = '#E6F0FF';
+    canPreview = true;
+  } else if (/^(xls|xlsx)$/.test(fileType.toLowerCase())) {
+    fileImg = XlsSvg;
+    backGroundColor = '#E6FFF5';
+    canPreview = true;
+  } else if (/^(pdf)$/.test(fileType.toLowerCase())) {
+    fileImg = PdfSvg;
+    backGroundColor = '#FFE7E6';
+    canPreview = true;
+  } else {
+    fileImg = OtherSvg;
+    backGroundColor = '#E6FCFF';
+  }
+  return {
+    isImg,
+    fileImg,
+    backGroundColor,
+    canPreview,
+  };
+}
+export const isImg = (fileType: string) => {
+  if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
+    return true;
+  }
+  return false;
+}

package/src/components/firework/firework.ts ADDED Viewed

@@ -0,0 +1,118 @@
+const PI = Math.PI
+// const defaultEmoji = [
+//   '👍',
+//   '😊',
+//   '🎉'
+// ]
+const createElements = (root, elementCount, elementSize, zIndex, {emoji=[],images=[]}) => (
+  Array
+    .from({ length: elementCount })
+    .map((_, index) => {
+      const i = index % (emoji.length+images.length);
+      let element;
+      if(i < emoji.length){
+        element = document.createElement('span')
+        element.innerHTML = emoji[i]
+        element.style.fontSize = `${elementSize}px`
+        element.style.position = 'absolute'
+        element.style.zIndex = zIndex
+        root.appendChild(element)
+    }else {
+        element = document.createElement('img');
+        element.style.width = `${elementSize}px`;
+        element.style.height = `${elementSize}px`;
+        element.src = images[i];
+        element.style.position = 'absolute';
+        root.appendChild(element)
+    }
+    element.style.pointerEvents = 'none'
+    return element
+    })
+)
+const radiansFrom = degrees => degrees * (PI / 180)
+const generatePhysics = (angle, spread, startVelocity, random ,x,y) => {
+  const radAngle = radiansFrom(angle)
+  const radSpread = radiansFrom(spread)
+  return {
+    x,
+    y,
+    wobble: random() * 10,
+    velocity: (startVelocity * 0.5) + (random() * startVelocity),
+    angle2D: -radAngle + ((0.5 * radSpread) - (random() * radSpread)),
+    angle3D: -(PI / 4) + (random() * (PI / 2)),
+    tiltAngle: random() * PI,
+    velocityx:(startVelocity * 0.5) + (random() * startVelocity)
+  }
+}
+const updateMojis = (fetti, progress, decayY,decayX) => {
+  fetti.physics.x += Math.cos(fetti.physics.angle2D) * fetti.physics.velocityx
+  fetti.physics.y += Math.sin(fetti.physics.angle2D) * fetti.physics.velocity
+  fetti.physics.wobble += 0
+  fetti.physics.velocity *= decayY
+  fetti.physics.velocityx *=decayX
+  fetti.physics.y += 15*progress
+  fetti.physics.tiltAngle += 0.1
+  const { x, y, tiltAngle } = fetti.physics
+  const wobbleX = x + 0
+  const wobbleY = y + 0
+  const transform = `translate3d(${wobbleX}px, ${wobbleY}px, 0) rotate(${tiltAngle}rad)`
+  fetti.element.style.transform = transform
+  fetti.element.style.opacity = progress > 0.5 ? (1 - progress)*2 : 1
+}
+const animate = (root, mojis, decayY,decayX, lifetime) => {
+  return new Promise<void>((res => {
+    const totalTicks = lifetime
+  let tick = 0
+  const update = () => {
+    mojis.forEach((fetti) => updateMojis(fetti, tick / totalTicks, decayY,decayX))
+    tick += 1
+    if (tick < totalTicks) {
+      window.requestAnimationFrame(update)
+    } else {
+      res()
+    }
+  }
+  window.requestAnimationFrame(update)
+  }))
+}
+const shoot = (root,x,y, {
+  angle = 90,
+  decayY = 0.9,
+  decayX = 0.98,
+  spread = 90,
+  startVelocity = 35,
+  elementCount = 20,
+  elementSize = 25,
+  lifetime = 150,
+  zIndex = 0,
+  emoji = [],
+  random = Math.random,
+  //@ts-ignore
+  images
+} = {}) => {
+  const elements = createElements(root, elementCount, elementSize, zIndex,{
+    images,
+    emoji
+  })
+  const mojis = elements.map((element) => ({
+    element,
+    physics: generatePhysics(angle, spread, startVelocity, random,x,y)
+  }))
+  return animate(root, mojis, decayY,decayX, lifetime)
+}
+export default shoot

package/src/components/firework/index.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import shoot from './firework'
+interface FireworkOptions {
+  getContainer?: ()=>HTMLElement
+  x: number
+  y: number
+  counts?: number
+  images: string[],
+  zIndex?:number,
+  emoji?:string[]
+}
+export default async function(options:FireworkOptions){
+  const defaluts = {
+    getContainer: ()=>document.body,
+    counts: 10,
+    zIndex:2000
+  }
+  const op = {...options,...defaluts};
+  const root = document.createElement('div');
+  const container = op.getContainer();
+  root.style.position = 'absolute';
+  root.style.zIndex = op.zIndex+''
+  container.append(root);
+  const rect = root.getBoundingClientRect();
+  await shoot(root,op.x-rect.x,op.y-rect.y,{images:op.images,emoji:op.emoji});
+  container.removeChild(root)
+}

package/src/components/follower-visitor/img/follower-visitor-follower.png ADDED Viewed

Binary file

package/src/components/follower-visitor/img/follower-visitor-visitor.png ADDED Viewed

Binary file

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

@@ -0,0 +1,40 @@
+.titaui-follower-visitor {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: -17px;
+  width: 634px;
+  height: 36px;
+  margin: 0 auto;
+  font-size: 14px;
+  background: #FFF4D6;
+  box-shadow: 0px 4px 16px 0px rgba(127, 145, 180, 0.2);
+  border-radius: 18px;
+  font-weight: 400;
+  color: #704600;
+  // color: #2879ff;
+  line-height: 22px;
+  position: relative;
+  transition: all 0.3s linear;
+  &__follower-icon,
+  &__visitor-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
+  }
+  &__close {
+    cursor: pointer;
+    position: absolute;
+    right: 22px;
+    font-size: 16px;
+  }
+  &__info-wrapper {
+    margin-right: 16px;
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}

package/src/components/follower-visitor/index.tsx ADDED Viewed

@@ -0,0 +1,117 @@
+import React, { FC, useEffect, useState } from "react";
+import { getOkrCyclePageBubbleVisitor } from "./request-api";
+import { OpenUserName } from "../../utils/open-data";
+import ConditionRender from "../condition-render";
+import FollowerImage from "./img/follower-visitor-follower.png";
+import VisitorImage from "./img/follower-visitor-visitor.png";
+import "./index.scss";
+import classNames from "classnames";
+const prefix = "titaui-follower-visitor";
+const FollowerVisitor: FC = () => {
+  // @ts-ignore
+  const [followerInofs, setFollowerInfos] = useState([]);
+  const [visitorInofs, setVisitorInfos] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const getMessages = () => {
+    getOkrCyclePageBubbleVisitor().then((res) => {
+      if (res.Code === 1) {
+        setVisitorInfos(res.Data.visitUser);
+      }
+    });
+  };
+  useEffect(() => {
+    setInterval(() => {
+      // @ts-ignore backbone 框架请求完接口，如果有数据会改变 hasUserMessage
+      if (window.hasUserMessage) {
+        // @ts-ignore
+        let { indicators = [] } = window.hasUserMessage;
+        // 循环获取 OKR 提醒通知
+        (indicators || []).forEach((it) => {
+          let { type, value } = it;
+          if (type == "mOkrCycle" && value > 0) {
+            getMessages();
+          }
+        });
+        // @ts-ignore
+        window.hasUserMessage = false;
+      }
+    }, 5000);
+  }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      getMessages();
+    }, 1000);
+  }, []);
+  useEffect(() => {
+    if (followerInofs.length > 0 || visitorInofs.length > 0) {
+      setVisible(true);
+    }
+  }, [followerInofs, visitorInofs]);
+  const handleCloseMessage = () => {
+    setVisible(false);
+  };
+  const getPrefixStrDesc = (person) => {
+    if (person.length > 2) {
+      return "等同事";
+    }
+    return "";
+  };
+  const renderPerson = (person) => {
+    return (
+      <span>
+        {person.map((info, index) => {
+          if (index >= 2) return;
+          return (
+            <span>
+              {index === 1 ? "、" : ""}
+              <OpenUserName name={info.user.name} id={info.user.userId} />
+            </span>
+          );
+        })}
+      </span>
+    );
+  };
+  return (
+    <div
+      className={prefix}
+      style={{ height: visible ? "36px" : "0", opacity: visible ? 1 : 0 }}
+    >
+      <div className={prefix + "__info-wrapper"}>
+        <ConditionRender condition={followerInofs && followerInofs.length > 0}>
+          <img
+            className={classNames(`${prefix}__follower-icon`)}
+            src={FollowerImage}
+          />
+          {renderPerson(followerInofs)}
+          {getPrefixStrDesc(followerInofs)}关注了你
+        </ConditionRender>
+      </div>
+      <div className={prefix + "__info-wrapper"}>
+        <ConditionRender condition={visitorInofs && visitorInofs.length > 0}>
+          <img
+            className={classNames(`${prefix}__visitor-icon`)}
+            src={VisitorImage}
+          />
+          {renderPerson(visitorInofs)}
+          {getPrefixStrDesc(visitorInofs)}访问了你
+        </ConditionRender>
+      </div>
+      <span
+        className={classNames("tu-icon-canceled", `${prefix}__close`)}
+        onClick={handleCloseMessage}
+      ></span>
+    </div>
+  );
+};
+export default FollowerVisitor;

package/src/components/follower-visitor/request-api.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { rget } from "../../utils/request";
+export const getOkrCyclePageBubbleVisitor = () => {
+  return rget('v1')('okr/okrCyclePageBubbleVisitor');
+}

package/src/components/form/form-fields/department/department-input.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import React from 'react';
+import classNames from 'classnames';
+import { OpenDepartmentName } from "../../../../utils/open-data";
+import Tooltip from '../../../tooltip';
+import './index.scss';
+interface Department {
+  departmentId: number;
+  departmentName: string;
+}
+interface Props {
+  department?: Department;
+  placeholder?: string;
+  onClick?: Function;
+  onClear: Function;
+}
+const preCls = 'form-field-department';
+export default (props: Props) => {
+  const { department, placeholder = '请选择', onClick, onClear } = props;
+  const renderDepartName = () => {
+    if (!department) return <span />;
+    return <OpenDepartmentName
+      id={department.departmentId}
+      name={department.departmentName}
+    />
+  }
+  const onHandleClear = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClear();
+  }
+  return <div className={classNames(`${preCls}__input`)} onClick={() => onClick && onClick()}>
+    {!department ?
+      <span className={classNames(`${preCls}__input--placeholder`)}>{placeholder}</span> :
+      // @ts-ignore
+      <Tooltip.Text text={renderDepartName()} isPercent />
+    }
+    {department && <span className={classNames(`tu-icon-cross ${preCls}__input--clear`)} onClick={e => onHandleClear(e)}></span>}
+    <span className={classNames(`${preCls}__input--down tu-icon-sort-down`)}></span>
+  </div>
+}