@titaui/pc 1.9.45 → 1.9.49

package/src/components-v1/popConfirm/index.tsx

@@ -1,8 +1,11 @@
-import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import React, {
+  useEffect, useRef, useState, forwardRef, useImperativeHandle,
+} from "react";
+import { Button } from "tita-ui";
 import Pop from "../pop";
-import { Button } from 'tita-ui';
-import { ButtonGroup, Wrapper } from './style';
-import { getLocale } from '../../utils/getLocale';
+import { ButtonGroup, Wrapper } from "./style";
+import { getLocale } from "../../utils/getLocale";
+
 type TriggerType = "hover" | "click";
 type Aligns =
   | "top"
@@ -35,15 +38,15 @@ export interface IPopConfirmProps {
 }
 
 function fillRef<T>(ref: React.Ref<T>, node: T) {
-  if (typeof ref === 'function') {
+  if (typeof ref === "function") {
     ref(node);
-  } else if (typeof ref === 'object' && ref && 'current' in ref) {
+  } else if (typeof ref === "object" && ref && "current" in ref) {
     (ref as any).current = node;
   }
 }
 function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
   return (node: T) => {
-    refs.forEach(ref => {
+    refs.forEach((ref) => {
       fillRef(ref, node);
     });
   };
@@ -67,9 +70,9 @@ const PopConfirm = forwardRef(({
 }: IPopConfirmProps, ref) => {
   const child = React.Children.only(children) as React.ReactElement;
   const [position, setPosition] = useState({
-    top: '-4px',
-    left: '50%'
-  })
+    top: "-4px",
+    left: "50%",
+  });
   const popRef = useRef<any>() as React.MutableRefObject<any>;
   const triggerRef = useRef();
 
@@ -81,7 +84,7 @@ const PopConfirm = forwardRef(({
     setTimeout(() => {
       popRef.current.hide();
     }, duration);
-  }
+  };
 
   const mouseLeave = () => {
     if (autoHide) {
@@ -89,14 +92,14 @@ const PopConfirm = forwardRef(({
         timer && timer();
       }, duration);
     }
-  }
+  };
 
   let tirggerElement = child;
   if (trigger == "click") {
     tirggerElement = React.cloneElement(child, {
       ref: composeRef(triggerRef, (child as any).ref),
-      onClick: e => {
-        e.stopPropagation()
+      onClick: (e) => {
+        e.stopPropagation();
         popRef.current.show(triggerRef.current);
       },
     });
@@ -112,72 +115,83 @@ const PopConfirm = forwardRef(({
 
   useEffect(() => {
     if (showArrow) {
-      setPosition(setPlacement(align))
+      setPosition(setPlacement(align));
     }
-  }, [])
+  }, []);
 
   const setPlacement = (align: Aligns) => {
     let pos = {
       top: `-${(arrowSize as number) / 2}px`,
-      left: '50%'
-    }
+      left: "50%",
+    };
     switch (align) {
-      case 'top':
+      case "top":
         pos = {
           top: `calc(100% - ${(arrowSize as number) / 2}px)`,
-          left: '50%'
+          left: "50%",
         };
         break;
-      case 'top left':
+      case "top left":
         pos = {
           top: `calc(100% - ${(arrowSize as number) / 2}px)`,
-          left: '15%'
+          left: "15%",
         };
         break;
-      case 'top right':
+      case "top right":
         pos = {
           top: `calc(100% - ${(arrowSize as number) / 2}px)`,
-          left: '80%'
+          left: "80%",
         };
         break;
-      case 'bottom':
+      case "bottom":
         pos = {
           top: `-${(arrowSize as number) / 2}px`,
-          left: '50%'
+          left: "50%",
         };
         break;
-      case 'bottom left':
+      case "bottom left":
         pos = {
           top: `-${(arrowSize as number) / 2}px`,
-          left: '15%'
+          left: "15%",
         };
         break;
-      case 'bottom right':
+      case "bottom right":
         pos = {
           top: `-${(arrowSize as number) / 2}px`,
-          left: '80%'
+          left: "80%",
         };
         break;
     }
     return pos;
-  }
+  };
 
   const defaultContent = (
     <div>
       <p style={{
-        color: '#1F2329'
-      }}>{title}</p>
+        color: "#1F2329",
+      }}
+      >
+        {title}
+      </p>
       <ButtonGroup>
         <Button onClick={() => {
           onCancel && onCancel();
           popRef.current.hide();
-        }}>{getLocale('Mod_Cancel')}</Button>
-        <Button type="primary" onClick={() => {
-          onConfirm && onConfirm();
-        }}>{getLocale('OKR_MyO_Butt_Determine')}</Button>
+        }}
+        >
+          {getLocale("Mod_Cancel")}
+        </Button>
+        <Button
+          type="primary"
+          onClick={() => {
+            onConfirm && onConfirm();
+          }}
+        >
+          {getLocale("OKR_MyO_Butt_Determine")}
+        </Button>
       </ButtonGroup>
     </div>
-  )
+  );
   return (
     <>
       <Pop
@@ -195,7 +209,7 @@ const PopConfirm = forwardRef(({
           style={style}
           onMouseEnter={() => {
             // @ts-ignore
-            timer = function () { console.log('mouse enter') };
+            timer = function () { console.log("mouse enter"); };
           }}
           onMouseLeave={() => {
             if (autoHide) {
@@ -204,7 +218,7 @@ const PopConfirm = forwardRef(({
                 setTimeout(() => {
                   popRef.current.hide();
                 }, duration);
-              }
+              };
               // @ts-ignore
               popRef.current.hide();
             }
@@ -216,7 +230,7 @@ const PopConfirm = forwardRef(({
       {tirggerElement}
     </>
   );
-})
+});
 PopConfirm.defaultProps = {
   align: "bottom",
   arrowSize: 8,
@@ -224,4 +238,4 @@ PopConfirm.defaultProps = {
   showArrow: true,
   trigger: "click",
 };
-export default PopConfirm;
+export default PopConfirm;

package/src/components-v1/popConfirm/style.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const Wrapper = styled.div`
     padding: 16px 20px;
@@ -9,16 +9,16 @@ export const Wrapper = styled.div`
 
     ::after {
         content: '';
-        width: ${(p: any) => p.arrowSize + 'px'};
-        height: ${(p: any) => p.arrowSize + 'px'};
+        width: ${(p: any) => `${p.arrowSize}px`};
+        height: ${(p: any) => `${p.arrowSize}px`};
         border-radius: 2px;
         background: #ffffff;
         display: block;
-        visibility: ${(p: any) => p.showArrow ? 'visible' : 'hidden'};
+        visibility: ${(p: any) => (p.showArrow ? "visible" : "hidden")};
         position: absolute;
         top: ${(p: any) => p.position.top};
         left: ${(p: any) => p.position.left};
-        transform: ${(p: any) => p.position.left == '50%' ? 'translateX(-50%) rotate(45deg)' : 'rotate(45deg)'};
+        transform: ${(p: any) => (p.position.left == "50%" ? "translateX(-50%) rotate(45deg)" : "rotate(45deg)")};
         border-left: 1px solid #f0f2f5;
         border-top: 1px solid #f0f2f5;
     }
@@ -35,4 +35,4 @@ export const ButtonGroup = styled.div`
         margin-left: 10px;
         white-space: nowrap;
     }
-`;
+`;

package/src/components-v1/portals/Portals.tsx

@@ -1,41 +1,42 @@
-import { PureComponent } from 'react'
-import ReactDOM from 'react-dom'
+import { PureComponent } from "react";
+import ReactDOM from "react-dom";
 
 interface Props {
   domNode?: string // 挂载组件节点
   className?: string // 挂载点class
 }
 
-const appRoot = document.body
+const appRoot = document.body;
 
 export default class Portals extends PureComponent<Props> {
   el: HTMLDivElement;
+
   constructor(props: Props) {
     super(props);
-    this.el = document.createElement('div')
+    this.el = document.createElement("div");
   }
 
   componentWillMount() {
-    const { domNode, className } = this.props
-    this.el.setAttribute('class',`document-mouse-event-ignore ${className||''}`)
+    const { domNode, className } = this.props;
+    this.el.setAttribute("class", `document-mouse-event-ignore ${className || ""}`);
     setTimeout(() => {
       // @ts-ignore
-      domNode ? document.getElementById(domNode) && document.getElementById(domNode).appendChild(this.el) : appRoot.appendChild(this.el)
-    }, 5)
+      domNode ? document.getElementById(domNode) && document.getElementById(domNode).appendChild(this.el) : appRoot.appendChild(this.el);
+    }, 5);
   }
 
   componentWillUnmount() {
-    const { domNode } = this.props
+    const { domNode } = this.props;
     setTimeout(() => {
       // @ts-ignore
-      domNode ? document.getElementById(domNode) && document.getElementById(domNode).removeChild(this.el) : appRoot.removeChild(this.el)
-    }, 5)
+      domNode ? document.getElementById(domNode) && document.getElementById(domNode).removeChild(this.el) : appRoot.removeChild(this.el);
+    }, 5);
   }
 
   render() {
     return ReactDOM.createPortal(
       this.props.children,
       this.el,
-    )
+    );
   }
 }

package/src/components-v1/progress/CircleProgress.js

@@ -1,50 +1,58 @@
-import React, { Component } from 'react'
-import './index.scss'
+import React, { Component } from "react";
+import "./index.scss";
+
 export default class CircleProgress extends Component {
   static defaultProps = {
-    size: '100',
-    color:'#419BFF',
+    size: "100",
+    color: "#419BFF",
     percent: 10,
-    width: '8',
-    backgroundColor: '#EBEDEE',
+    width: "8",
+    backgroundColor: "#EBEDEE",
     linear: false,
-    linearId: 'linearGradient',
-    linearStartColor: '#4e90ff',
-    linearEndColor: '#2879ff',
+    linearId: "linearGradient",
+    linearStartColor: "#4e90ff",
+    linearEndColor: "#2879ff",
     showTextContent: true,
-    textcolor:'#565E66'
-  }
+    textcolor: "#565E66",
+  };
+
   getTextContent = () => {
-    const {formatText,percent} = this.props;
-    if(formatText) {
-      return formatText(percent)
+    const { formatText, percent } = this.props;
+    if (formatText) {
+      return formatText(percent);
     }
-    return percent + getLocale('OKR_MyO_Pop_Upd_Percentage')
-  }
+    return percent + getLocale("OKR_MyO_Pop_Upd_Percentage");
+  };
+
   render() {
-    const {size,color,progress,width,percent,backgroundColor, textcolor, linear, linearId, linearStartColor, linearEndColor, showTextContent} = this.props;
-    let p = percent > 100 ? 100 : percent;
+    const {
+      size, color, progress, width, percent, backgroundColor, textcolor, linear, linearId, linearStartColor, linearEndColor, showTextContent,
+    } = this.props;
+    const p = percent > 100 ? 100 : percent;
     const c = Math.round((size - width * 2) * Math.PI);
-    const remainC = Math.round(c * (100-p)/100);
+    const remainC = Math.round(c * (100 - p) / 100);
     return (
-      <div className="t-c-progress-circle" style={{
-        width: size + 'px',
-        height: size + 'px'
-      }}>
+      <div
+        className="t-c-progress-circle"
+        style={{
+          width: `${size}px`,
+          height: `${size}px`,
+        }}
+      >
         <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-          <circle cx={size/2} cy={size/2} r={size/2-width} fill="none" stroke={backgroundColor} strokeWidth={width}></circle>
-          <circle cx={size/2} cy={size/2} r={size/2-width} fill="none" stroke={linear ? `url(#${linearId})` : color} strokeWidth={width} strokeDasharray={c} strokeDashoffset={remainC} strokeLinecap="round" transform={`rotate(-90, ${size/2} ${size/2})`} style={{transition:"stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s"}}></circle>
+          <circle cx={size / 2} cy={size / 2} r={size / 2 - width} fill="none" stroke={backgroundColor} strokeWidth={width} />
+          <circle cx={size / 2} cy={size / 2} r={size / 2 - width} fill="none" stroke={linear ? `url(#${linearId})` : color} strokeWidth={width} strokeDasharray={c} strokeDashoffset={remainC} strokeLinecap="round" transform={`rotate(-90, ${size / 2} ${size / 2})`} style={{ transition: "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s" }} />
           <defs>
             <linearGradient x1="96.9769965%" y1="80.9878035%" x2="0%" y2="41.7547666%" id={linearId}>
-              <stop stopColor={linearStartColor} offset="0%"></stop>
-              <stop stopColor={linearEndColor} offset="100%"></stop>
+              <stop stopColor={linearStartColor} offset="0%" />
+              <stop stopColor={linearEndColor} offset="100%" />
             </linearGradient>
           </defs>
         </svg>
         {
-          showTextContent && <div className="text-content" style={{color:textcolor}}>{this.getTextContent()}</div>
+          showTextContent && <div className="text-content" style={{ color: textcolor }}>{this.getTextContent()}</div>
         }
       </div>
-    )
+    );
   }
 }

package/src/components-v1/progress/LineProgress.js

@@ -1,33 +1,42 @@
 /*
- * @Author: lianghaosen 
- * @Date: 2018-12-12 12:10:04 
+ * @Author: lianghaosen
+ * @Date: 2018-12-12 12:10:04
  * @Last Modified by: zhangyanru
  * @Last Modified time: 2018-12-12 15:24:30
  */
-import React, { Component } from 'react'
+import React, { Component } from "react";
 
 export default class LineProgress extends Component {
   static defaultProps = {
-    color:' #419BFF',
-    backgroundColor: '#E3F4FF',
+    color: " #419BFF",
+    backgroundColor: "#E3F4FF",
     percent: 0,
-    size: 8
-  }
+    size: 8,
+  };
+
   render() {
-    const {color,backgroundColor,size,percent} = this.props;
-    let p = percent > 100? 100 : percent;
+    const {
+      color, backgroundColor, size, percent,
+    } = this.props;
+    const p = percent > 100 ? 100 : percent;
     return (
-      <div className="t-c-progress-line" style={{
-        backgroundColor,
-        height:size + 'px',
-        borderRadius: size/2+'px'
-        }}>
-        <div className="line-inner" style={{
-          background:color,
-          width: p + '%',
-          borderRadius: `0 ${size / 2}px ${size / 2}px 0`
-          }}></div>
+      <div
+        className="t-c-progress-line"
+        style={{
+          backgroundColor,
+          height: `${size}px`,
+          borderRadius: `${size / 2}px`,
+        }}
+      >
+        <div
+          className="line-inner"
+          style={{
+            background: color,
+            width: `${p}%`,
+            borderRadius: `0 ${size / 2}px ${size / 2}px 0`,
+          }}
+        />
       </div>
-    )
+    );
   }
 }

package/src/components-v1/progress/index.js

@@ -1,23 +1,23 @@
 /*
- * @Author: lianghaosen 
- * @Date: 2018-12-12 14:08:11 
+ * @Author: lianghaosen
+ * @Date: 2018-12-12 14:08:11
  * @Last Modified by: zhangyanru
  * @Last Modified time: 2019-07-17 10:09:11
  */
-import React, { Component } from 'react'
-import CircleProgress from './CircleProgress'
-import LineProgress from './LineProgress'
+import React, { Component } from "react";
+import CircleProgress from "./CircleProgress";
+import LineProgress from "./LineProgress";
 
 export default class Progress extends Component {
   static defaultProps = {
-    type:'line'
-  }
+    type: "line",
+  };
+
   render() {
-    const {type,...rest} = this.props;
-    if(type == 'circle') {
-      return <CircleProgress {...rest}></CircleProgress>
-    }else {
-      return <LineProgress {...rest}></LineProgress>
+    const { type, ...rest } = this.props;
+    if (type == "circle") {
+      return <CircleProgress {...rest} />;
     }
+    return <LineProgress {...rest} />;
   }
 }

package/src/components-v1/radio/index.tsx

@@ -1,3 +1,4 @@
-import Radio from './radio';
-import RadioGroup from './radioGroup';
+import Radio from "./radio";
+import RadioGroup from "./radioGroup";
+
 export { Radio, RadioGroup };

package/src/components-v1/radio/radio.tsx

@@ -1,6 +1,7 @@
-import React, { Component, RefObject } from 'react';
-import './style/index.scss';
-import styled from 'styled-components';
+import React, { Component, RefObject } from "react";
+import "./style/index.scss";
+import styled from "styled-components";
+
 interface RadioProps {
   value?: string | number | string[] | undefined;
   name?: string;
@@ -24,6 +25,7 @@ const RadioWrapper = styled.label`
 `;
 export default class Radio extends Component<RadioProps, RadioState> {
   radioRef: RefObject<HTMLInputElement>;
+
   constructor(props: RadioProps) {
     super(props);
     this.state = {
@@ -31,6 +33,7 @@ export default class Radio extends Component<RadioProps, RadioState> {
     };
     this.radioRef = React.createRef();
   }
+
   componentWillReceiveProps(props: RadioProps) {
     const checked = this.getChecked(props);
     if (this.state.checked !== checked) {
@@ -38,11 +41,13 @@ export default class Radio extends Component<RadioProps, RadioState> {
       this.setState({ checked });
     }
   }
+
   getChecked(props: RadioProps) {
     return Boolean(props.checked); // 根据传递的props，输出true/false
   }
+
   onChange = (e: any) => {
-    const checked = e.target.checked; // 定义被点击项的checked为true
+    const { checked } = e.target; // 定义被点击项的checked为true
     if (checked) {
       if (this.props.onChange) {
         this.props.onChange(this.props.value); // 向外暴露一个onChange事件并携带value值
@@ -50,19 +55,22 @@ export default class Radio extends Component<RadioProps, RadioState> {
     }
     this.setState({ checked }); // 更新被点击项的state为true
   };
+
   render() {
-    const { children, checked, name, value } = this.props;
+    const {
+      children, checked, name, value,
+    } = this.props;
     return (
       <RadioWrapper
         onMouseUp={() => {
           this.props.onChange && this.props.onChange(this.props.value);
         }}
       >
-        <span className='tita-radio'>
-          <input type='radio' name={name} value={value} className='tita-radio-input' checked={checked} onChange={this.onChange} />
-          <span className='tita-radio-inner'></span>
+        <span className="tita-radio">
+          <input type="radio" name={name} value={value} className="tita-radio-input" checked={checked} onChange={this.onChange} />
+          <span className="tita-radio-inner" />
         </span>
-        <span className='label' style={{ fontSize: 12 }}>
+        <span className="label" style={{ fontSize: 12 }}>
           {children}
         </span>
       </RadioWrapper>

package/src/components-v1/radio/radioGroup.tsx

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
+import React, { Component } from "react";
+import styled from "styled-components";
+
 const GroupWrapper = styled.div`
   .labelText {
     font-size: 12px;
@@ -31,20 +32,22 @@ export default class RadioGroup extends Component<RadioGroupProps, RadioGroupSta
       defaultValue: this.props.defaultValue,
     };
   }
+
   // renderChildren = (children: any) => {
   // 	return children;
   // };
   render() {
-    const { children, className, name, labelText, style } = this.props;
+    const {
+      children, className, name, labelText, style,
+    } = this.props;
     return (
-      <GroupWrapper className={className || ''} style={{ style }}>
+      <GroupWrapper className={className || ""} style={{ style }}>
         {
-          !!labelText && <span className='labelText'>{labelText}</span>
+          !!labelText && <span className="labelText">{labelText}</span>
         }
-        {React.Children.map(children, (child: any, index) => {
+        {React.Children.map(children, (child: any, index) =>
           // props 被覆盖了
-          return React.cloneElement(child, { name });
-        })}
+          React.cloneElement(child, { name }))}
       </GroupWrapper>
     );
   }

package/src/components-v1/search/cache.ts

@@ -1,36 +1,38 @@
 import uuid from "uuid";
 import { changeQueryString, getQueryString } from "../../utils/tools";
-const cacheStoreName = 'okrMap_cache_store';
+
+const cacheStoreName = "okrMap_cache_store";
 const getCacheStore = () => {
-  const str = localStorage.getItem(cacheStoreName) || '{}';
+  const str = localStorage.getItem(cacheStoreName) || "{}";
   return JSON.parse(str);
-}
+};
 
 export default class CacheUtil {
-  static getCache(){
-    let id = getQueryString().cacheId
-    if(!id) return null;
+  static getCache() {
+    const id = getQueryString().cacheId;
+    if (!id) return null;
     const store = getCacheStore();
     const cache = store[id];
-    if(!cache) return null;
+    if (!cache) return null;
     return cache;
   }
-  static setCache(cache:any){
-    let id = getQueryString().cacheId
-    if(!id){
+
+  static setCache(cache:any) {
+    let id = getQueryString().cacheId;
+    if (!id) {
       id = uuid();
-      changeQueryString('cacheId',id)
+      changeQueryString("cacheId", id);
     }
     const store = getCacheStore();
-    store[id]=cache;
-    localStorage.setItem(cacheStoreName,JSON.stringify(store));
+    store[id] = cache;
+    localStorage.setItem(cacheStoreName, JSON.stringify(store));
   }
-  static updateCache(c){
-    let id = getQueryString().cacheId;
+
+  static updateCache(c) {
+    const id = getQueryString().cacheId;
     let cache = {};
-    if(id) cache = this.getCache();
-    cache = {...cache,...c};
-    this.setCache(cache)
+    if (id) cache = this.getCache();
+    cache = { ...cache, ...c };
+    this.setCache(cache);
   }
 }
-