@titaui/pc 1.9.45 → 1.9.49

package/src/components-v1/userSelector/components/SearchBar.tsx

@@ -1,7 +1,10 @@
-import React, { PureComponent } from 'react'
-import {InputWrapper,Input,SearchIcon, CleanBtn} from '../style'
-import { findDOMNode } from 'react-dom';
-import { getLocale } from '../../../utils/getLocale';
+import React, { PureComponent } from "react";
+import { findDOMNode } from "react-dom";
+import {
+  InputWrapper, Input, SearchIcon, CleanBtn,
+} from "../style";
+import { getLocale } from "../../../utils/getLocale";
+
 interface Props {
   onSearch:Function
 }
@@ -9,61 +12,63 @@ interface State {
   focus: boolean,
   searchTxt: string
 }
-export default class SearchBar extends PureComponent<Props,State> {
-  constructor(props:Props){
+export default class SearchBar extends PureComponent<Props, State> {
+  constructor(props:Props) {
     super(props);
     this.state = {
       focus: false,
-      searchTxt: ''
-    }
+      searchTxt: "",
+    };
   }
+
   timer:any;
+
   input: any;
-  componentDidMount(){
-      this.focus()
-    
-    
+
+  componentDidMount() {
+    this.focus();
   }
+
   toggleFocus = (focus:boolean) => {
     this.setState({
-      focus
-    },() => focus && this.focus())
-  }
+      focus,
+    }, () => focus && this.focus());
+  };
+
   focus = () => {
     setTimeout(() => {
-      //@ts-ignore
-    findDOMNode(this.input).focus()
-    }, 0)
-    
-      
-    
-    
-  }
+      // @ts-ignore
+      findDOMNode(this.input).focus();
+    }, 0);
+  };
+
   clear = (doSearch?:boolean) => {
     this.setState({
-      searchTxt: ''
-    },this.focus)
-    doSearch && this.props.onSearch('')
-  }
+      searchTxt: "",
+    }, this.focus);
+    doSearch && this.props.onSearch("");
+  };
+
   handleTxtChange = (e:React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value;
     this.setState({
-      searchTxt: text
-    })
+      searchTxt: text,
+    });
     clearTimeout(this.timer);
     this.timer = setTimeout(() => {
-      this.props.onSearch(text)
+      this.props.onSearch(text);
     }, 500);
-  }
+  };
+
   render() {
-    const {focus,searchTxt} = this.state;
-    const hasTxt = !!searchTxt && searchTxt.length > 0
+    const { focus, searchTxt } = this.state;
+    const hasTxt = !!searchTxt && searchTxt.length > 0;
     return (
       <InputWrapper focus={focus}>
-          <SearchIcon className="tu-icon-search" active={focus}/>
-          <Input onFocus={()=>this.toggleFocus(true)} value={searchTxt} onChange={this.handleTxtChange} placeholder={getLocale('Mod_Search')} onBlur={()=>this.toggleFocus(false)} ref={(r:any) => this.input = r}/>
-          {hasTxt && <CleanBtn className="tu-icon-cross" onMouseDown={(e: any) => {this.clear(true);e.stopPropagation();e.nativeEvent.stopImmediatePropagation()}}/>}
+        <SearchIcon className="tu-icon-search" active={focus} />
+        <Input onFocus={() => this.toggleFocus(true)} value={searchTxt} onChange={this.handleTxtChange} placeholder={getLocale("Mod_Search")} onBlur={() => this.toggleFocus(false)} ref={(r:any) => this.input = r} />
+        {hasTxt && <CleanBtn className="tu-icon-cross" onMouseDown={(e: any) => { this.clear(true); e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); }} />}
       </InputWrapper>
-    )
+    );
   }
 }

package/src/components-v1/userSelector/components/SingleMode.tsx

@@ -1,11 +1,13 @@
-import React, { PureComponent } from 'react'
-import { User, WXUser } from '../types'
-import UserItem from './UserItem'
-import { SingleModeWrapper, SingleList, EmptyWrapper, ListEmptyText} from '../style'
-import { getApiUrl, taker, getApiUrl3 } from '../../../utils/request-v1'
-import PerfectScrollbar from 'react-perfect-scrollbar'
-import 'react-perfect-scrollbar/dist/css/styles.css';
-import { isPlatform } from '../../../utils/open-data'
+import React, { PureComponent } from "react";
+import PerfectScrollbar from "react-perfect-scrollbar";
+import { User, WXUser } from "../types";
+import UserItem from "./UserItem";
+import {
+  SingleModeWrapper, SingleList, EmptyWrapper, ListEmptyText,
+} from "../style";
+import { getApiUrl, taker, getApiUrl3 } from "../../../utils/request-v1";
+import "react-perfect-scrollbar/dist/css/styles.css";
+import { isPlatform } from "../../../utils/open-data";
 
 interface Props {
   searchTxt?: string
@@ -19,78 +21,82 @@ interface State {
   pending: boolean
   activeIndex: number
 }
-export default class SingleMode extends PureComponent<Props,State> {
-  constructor(p:Props){
+export default class SingleMode extends PureComponent<Props, State> {
+  constructor(p:Props) {
     super(p);
     this.state = {
-      users:[],
+      users: [],
       pending: true,
-      activeIndex: 0
-    }
+      activeIndex: 0,
+    };
   }
-  componentDidMount(){
-    if(this.props.searchTxt){
-      this.getSearchUsers()
-    }else {
-      this.getFrequentContacts()
+
+  componentDidMount() {
+    if (this.props.searchTxt) {
+      this.getSearchUsers();
+    } else {
+      this.getFrequentContacts();
     }
-    if(this.props.useKeyBoard !== false){
-      document.addEventListener('keydown',this.handleKeyDown)
+    if (this.props.useKeyBoard !== false) {
+      document.addEventListener("keydown", this.handleKeyDown);
     }
-    
   }
-  componentWillUnmount(){
-    document.removeEventListener('keydown',this.handleKeyDown)
+
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleKeyDown);
   }
+
   handleKeyDown = (e:KeyboardEvent) => {
-    const {users,activeIndex} = this.state;
-    if(e.keyCode==13){
-      e.preventDefault()
-      if(users[activeIndex]) {
+    const { users, activeIndex } = this.state;
+    if (e.keyCode == 13) {
+      e.preventDefault();
+      if (users[activeIndex]) {
         this.props.onSelect(users[activeIndex]);
-        document.removeEventListener('keydown',this.handleKeyDown)
+        document.removeEventListener("keydown", this.handleKeyDown);
       }
-    }else if(e.keyCode == 38){
-        let index = activeIndex > 0 ? activeIndex - 1 : (users.length || 1) - 1
-        this.setState({
-          activeIndex: index
-        })
-    }else if(e.keyCode == 40){
-      let index = activeIndex == users.length - 1 || users.length == 0 ? 0 : activeIndex + 1
+    } else if (e.keyCode == 38) {
+      const index = activeIndex > 0 ? activeIndex - 1 : (users.length || 1) - 1;
       this.setState({
-        activeIndex: index
-      })
+        activeIndex: index,
+      });
+    } else if (e.keyCode == 40) {
+      const index = activeIndex == users.length - 1 || users.length == 0 ? 0 : activeIndex + 1;
+      this.setState({
+        activeIndex: index,
+      });
     }
+  };
 
-  }
-  componentDidUpdate(prevProps:Props){
-    if(prevProps.searchTxt!=this.props.searchTxt){
-      if(this.props.searchTxt){
-        this.getSearchUsers()
-      }else {
-        this.getFrequentContacts()
+  componentDidUpdate(prevProps:Props) {
+    if (prevProps.searchTxt != this.props.searchTxt) {
+      if (this.props.searchTxt) {
+        this.getSearchUsers();
+      } else {
+        this.getFrequentContacts();
       }
     }
   }
+
   getFrequentContacts = () => {
-    const url = getApiUrl(`Contact?v=${new Date().getTime()}`)
-    taker(url).then(res => {
-      if(res.Code == 1){
-        let users:any[] = [];
-        for(let key in res.Data){
+    const url = getApiUrl(`Contact?v=${new Date().getTime()}`);
+    taker(url).then((res) => {
+      if (res.Code == 1) {
+        const users:any[] = [];
+        for (const key in res.Data) {
           users.push(res.Data[key]);
         }
-        this.setState({users,pending:false,activeIndex:-1})
+        this.setState({ users, pending: false, activeIndex: -1 });
         this.props.onSearch && this.props.onSearch(users);
       }
-    })
-  }
+    });
+  };
+
   getSearchUsers = () => {
-    const url = isPlatform('wx')? getApiUrl3(`staff/workwx/serarch?filter=${this.props.searchTxt}`) : getApiUrl3(`staff/search?onlyMatchName=${this.props.onlySearchByName===true}&filter=${this.props.searchTxt}&pageNum=1&pageSize=999`)
-    taker(url).then(res => {
-      if(res.Code == 1){
+    const url = isPlatform("wx") ? getApiUrl3(`staff/workwx/serarch?filter=${this.props.searchTxt}`) : getApiUrl3(`staff/search?onlyMatchName=${this.props.onlySearchByName === true}&filter=${this.props.searchTxt}&pageNum=1&pageSize=999`);
+    taker(url).then((res) => {
+      if (res.Code == 1) {
         let users:User[] = [];
-        users = ((res.Data||[]) as WXUser[]).map(u => ({
+        users = ((res.Data || []) as WXUser[]).map((u) => ({
           Id: u.userId,
           Name: u.name,
           Email: u.email,
@@ -104,33 +110,40 @@ export default class SingleMode extends PureComponent<Props,State> {
             Big: u.avatar.big,
             Large: u.avatar.large,
             HasAvatar: u.avatar.hasAvatar,
-            Color: u.avatar.color
-          }
-        }))
-        this.setState({users,activeIndex:0})
+            Color: u.avatar.color,
+          },
+        }));
+        this.setState({ users, activeIndex: 0 });
         this.props.onSearch && this.props.onSearch(users);
       }
-    })
-  }
+    });
+  };
+
   render() {
-    const {users,pending,activeIndex} = this.state;
+    const { users, pending, activeIndex } = this.state;
     return (
       <SingleModeWrapper>
         <PerfectScrollbar>
-        {
-          !users.length && !pending ? 
-          <EmptyWrapper>
-            <img src={require('../assets/emptyImg.png')} width="100px"/>
-            <ListEmptyText>{getLocale('Mod_ThereNothing')}...</ListEmptyText>
-          </EmptyWrapper>:
-          <SingleList>
-            {
-              users.map((u,index) => <div key={u.Id} onMouseOver={()=>{this.setState({activeIndex:index})}}><UserItem user={u} keyword={this.props.searchTxt} active={index == activeIndex} onClick={() => this.props.onSelect(u)}/></div>)
+          {
+          !users.length && !pending
+            ? (
+              <EmptyWrapper>
+                <img src={require("../assets/emptyImg.png")} width="100px" />
+                <ListEmptyText>
+                  {getLocale("Mod_ThereNothing")}
+                  ...
+                </ListEmptyText>
+              </EmptyWrapper>
+            ) : (
+              <SingleList>
+                {
+              users.map((u, index) => <div key={u.Id} onMouseOver={() => { this.setState({ activeIndex: index }); }}><UserItem user={u} keyword={this.props.searchTxt} active={index == activeIndex} onClick={() => this.props.onSelect(u)} /></div>)
             }
-          </SingleList>
-        }
+              </SingleList>
+            )
+}
         </PerfectScrollbar>
       </SingleModeWrapper>
-    )
+    );
   }
 }

package/src/components-v1/userSelector/components/UserItem.tsx

@@ -1,8 +1,10 @@
-import React, { PureComponent } from 'react'
-import Avatar from '../../avatar'
-import { User } from '../types'
-import { ItemWrapper, ItemTextContent, ItemName, ItemText } from '../style'
-import { isPlatform, OpenUserName, OpenDepartmentName } from '../../../utils/open-data'
+import React, { PureComponent } from "react";
+import Avatar from "../../avatar";
+import { User } from "../types";
+import {
+  ItemWrapper, ItemTextContent, ItemName, ItemText,
+} from "../style";
+import { isPlatform, OpenUserName, OpenDepartmentName } from "../../../utils/open-data";
 
 interface Props {
   active?: boolean
@@ -17,35 +19,36 @@ interface State {
 export default class UserItem extends PureComponent<Props, State> {
   handleClick = () => {
     const { onClick, user } = this.props;
-    onClick && onClick(user)
-  }
+    onClick && onClick(user);
+  };
+
   colorKeywords = (str: string) => {
     const { keyword } = this.props;
     if (!keyword) return str;
-    const strs = str.split(keyword)
+    const strs = str.split(keyword);
     return (
       <span>
         {
-          strs.map((txt, index) => {
-            return index == strs.length - 1 ? txt : [txt, <span style={{ backgroundColor: 'rgba(228,166,0,0.2)' }}>{keyword}</span>]
-          })
+          strs.map((txt, index) => (index == strs.length - 1 ? txt : [txt, <span style={{ backgroundColor: "rgba(228,166,0,0.2)" }}>{keyword}</span>]))
         }
       </span>
-    )
-  }
+    );
+  };
+
   render() {
     const { user, onDeleteUser, active } = this.props;
     return (
-      <ItemWrapper onMouseDown={this.handleClick} style={active ? { backgroundColor: '#f5f8fa' } : {}}>
-        {
-          <Avatar name={user.Name} src={user.UserAvatar.Medium} userId={user.Id} color={user.UserAvatar.Color} size={Avatar.size(6)} />
-        }
+      <ItemWrapper onMouseDown={this.handleClick} style={active ? { backgroundColor: "#f5f8fa" } : {}}>
+        <Avatar name={user.Name} src={user.UserAvatar.Medium} userId={user.Id} color={user.UserAvatar.Color} size={Avatar.size(6)} />
         <ItemTextContent>
-          <ItemText style={{ color: '#aaa' }}><ItemName>{isPlatform('wx') ? <OpenUserName name={user.Name} id={user.Id} /> : this.colorKeywords(user.Name)}</ItemName><OpenDepartmentName name={user.Department} id={user.DepartmentId} /></ItemText>
-          <ItemText>{isPlatform('wx') ? user.Email : this.colorKeywords(user.Email)}</ItemText>
+          <ItemText style={{ color: "#aaa" }}>
+            <ItemName>{isPlatform("wx") ? <OpenUserName name={user.Name} id={user.Id} /> : this.colorKeywords(user.Name)}</ItemName>
+            <OpenDepartmentName name={user.Department} id={user.DepartmentId} />
+          </ItemText>
+          <ItemText>{isPlatform("wx") ? user.Email : this.colorKeywords(user.Email)}</ItemText>
         </ItemTextContent>
-        {onDeleteUser && <i className="tu-icon-cross" onMouseDown={(e: any) => { onDeleteUser(user); e.stopPropagation(); e.nativeEvent.stopImmediatePropagation() }} />}
+        {onDeleteUser && <i className="tu-icon-cross" onMouseDown={(e: any) => { onDeleteUser(user); e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); }} />}
       </ItemWrapper>
-    )
+    );
   }
 }

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

@@ -1,10 +1,13 @@
-import React, { PureComponent } from 'react';
-import { Wrapper, Footer, AdvancedModLink, Btn } from './style';
-import SearchBar from './components/SearchBar';
-import SingleMode from './components/SingleMode';
-import MutiMode from './components/MultiMode';
-import { User, Dept } from './types';
-import { getLocale } from '../../utils/getLocale';
+import React, { PureComponent } from "react";
+import {
+  Wrapper, Footer, AdvancedModLink, Btn,
+} from "./style";
+import SearchBar from "./components/SearchBar";
+import SingleMode from "./components/SingleMode";
+import MutiMode from "./components/MultiMode";
+import { User, Dept } from "./types";
+import { getLocale } from "../../utils/getLocale";
+
 export interface Props {
   multi?: boolean;
   onSubmit: (users: User[], depts: Dept[]) => void;
@@ -14,10 +17,10 @@ export interface Props {
   rootSelectable?: boolean;
   selectedUser?: User[];
   selectedDept?: Dept[];
-  mode?:'single' | 'multi';
+  mode?:"single" | "multi";
 }
 interface State {
-  mode: 'single' | 'multi';
+  mode: "single" | "multi";
   selectedUser: User[];
   searchTxt?: string;
   selectedDept: Dept[];
@@ -26,61 +29,73 @@ export default class UserSelector extends PureComponent<Props, State> {
   constructor(p: Props) {
     super(p);
     this.state = {
-      mode: this.props.mode || 'single',
+      mode: this.props.mode || "single",
       selectedUser: this.props.selectedUser || [],
       selectedDept: this.props.selectedDept || [],
     };
   }
+
   static defaultProps = {
     multi: true,
     deptSelectable: true,
     // 根部门 默认可选
     rootSelectable: true,
   };
+
   search: any;
+
   timer: any;
+
   canSubmit: boolean = true;
+
   handleSearch = (txt: string) => {
     this.setState({
       searchTxt: txt,
     });
   };
+
   componentDidUpdate(prevProps: Props, prevState: State) {
     const { onOpenMultiMode } = this.props;
     if (prevState.mode != this.state.mode) {
       onOpenMultiMode && onOpenMultiMode();
     }
   }
+
   openMutiMode = (e: React.MouseEvent<HTMLElement>) => {
     e.nativeEvent.stopImmediatePropagation();
     e.stopPropagation();
     this.setState({
-      mode: 'multi',
+      mode: "multi",
       // searchTxt:''
     });
     this.search.clear();
     this.search.focus();
   };
+
   handleSelectUser = (u: User[]) => {
     this.setState({
       selectedUser: [...this.state.selectedUser, ...u],
     });
   };
+
   handleSelectDept = (d: Dept) => {
     this.setState({
       selectedDept: [...this.state.selectedDept, d],
     });
   };
+
   handleDeleteUser = (u: User) => {
     this.setState({
-      selectedUser: [...this.state.selectedUser].filter(user => user.Id != u.Id),
+      selectedUser: [...this.state.selectedUser].filter((user) => user.Id != u.Id),
     });
   };
+
   handleDeleteDept = (d: Dept) => {
     this.setState({
-      selectedDept: [...this.state.selectedDept].filter(dept => dept.Id != d.Id),
+      selectedDept: [...this.state.selectedDept].filter((dept) => dept.Id != d.Id),
     });
   };
+
   handleClear = () => {
     const { selectedDept, selectedUser } = this.state;
     if (!(selectedDept.length > 0) && !(selectedUser.length > 0)) return;
@@ -89,7 +104,9 @@ export default class UserSelector extends PureComponent<Props, State> {
       selectedUser: [],
     });
   };
+
   handleSearchConfirm = () => {};
+
   handleSubmit = (u: User[], d: Dept[]) => {
     const { onSubmit } = this.props;
     if (!this.canSubmit) return;
@@ -99,16 +116,22 @@ export default class UserSelector extends PureComponent<Props, State> {
     }, 300);
     onSubmit && onSubmit(u, d);
   };
+
   componentWillUnmount() {
     clearTimeout(this.timer);
   }
+
   render() {
-    const { mode, selectedUser, searchTxt, selectedDept } = this.state;
-    const isSingleMode = mode == 'single';
-    const { onSubmit, onCancel, multi, deptSelectable, rootSelectable } = this.props;
+    const {
+      mode, selectedUser, searchTxt, selectedDept,
+    } = this.state;
+    const isSingleMode = mode == "single";
+    const {
+      onSubmit, onCancel, multi, deptSelectable, rootSelectable,
+    } = this.props;
     return (
       <Wrapper isSingleMode={isSingleMode}>
-        <SearchBar onSearch={this.handleSearch} ref={r => (this.search = r)} />
+        <SearchBar onSearch={this.handleSearch} ref={(r) => (this.search = r)} />
         {isSingleMode ? (
           <SingleMode searchTxt={searchTxt} onSelect={(user: User) => onSubmit([user], [])} />
         ) : (
@@ -125,19 +148,19 @@ export default class UserSelector extends PureComponent<Props, State> {
             rootSelectable={rootSelectable}
           />
         )}
-        <Footer style={{ height: isSingleMode ? '24px' : '46px', marginTop: isSingleMode ? '10px' : '15px', marginBottom: isSingleMode ? '10px' : 0 }}>
+        <Footer style={{ height: isSingleMode ? "24px" : "46px", marginTop: isSingleMode ? "10px" : "15px", marginBottom: isSingleMode ? "10px" : 0 }}>
           {!multi ? null : isSingleMode ? (
             <AdvancedModLink onMouseDown={this.openMutiMode}>
-              {getLocale('OKR_MyO_Pop_Advancedmode')}
-              <i className='tu-icon-angle-right' />
+              {getLocale("OKR_MyO_Pop_Advancedmode")}
+              <i className="tu-icon-angle-right" />
             </AdvancedModLink>
           ) : (
             [
-              <Btn style={{ marginRight: '10px' }} onMouseDown={() => onCancel()}>
-                {getLocale('Mod_Cancel')}
+              <Btn style={{ marginRight: "10px" }} onMouseDown={() => onCancel()}>
+                {getLocale("Mod_Cancel")}
               </Btn>,
-              <Btn style={{ color: '#FFF', backgroundColor: '#2879ff' }} onMouseDown={() => onSubmit(selectedUser, selectedDept)}>
-                {getLocale('OKR_MyO_Butt_Determine')}
+              <Btn style={{ color: "#FFF", backgroundColor: "#2879ff" }} onMouseDown={() => onSubmit(selectedUser, selectedDept)}>
+                {getLocale("OKR_MyO_Butt_Determine")}
               </Btn>,
             ]
           )}

package/src/components-v1/userSelector/style.ts

@@ -1,4 +1,5 @@
-import styled from 'styled-components';
+import styled from "styled-components";
+
 export const Wrapper = styled.div`
     overflow: hidden;
     background-color: #fff;
@@ -6,12 +7,12 @@ export const Wrapper = styled.div`
     border-radius: 5px;
     height: 415px;
     padding: 0 15px;
-    width: ${(p: any) => (p.isSingleMode ? '310px' : '538px')};
+    width: ${(p: any) => (p.isSingleMode ? "310px" : "538px")};
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     /* transition: width .2s ease,margin .2s ease; */
-    /* margin-left: ${(p: any) => (p.isSingleMode ? '0px' : '-228px')}; */
+    /* margin-left: ${(p: any) => (p.isSingleMode ? "0px" : "-228px")}; */
 `;
 export const InputWrapper = styled.div`
   position: relative;
@@ -25,8 +26,8 @@ export const InputWrapper = styled.div`
   border-radius: 5px;
   transition: all .3s ease-in;
   overflow: hidden;
-  border-color: ${(p: any) => (p.focus ? '#2879ff!important' : '#E9ECF0')};
-  ${(p: any) => (p.focus ? 'box-shadow:0 0 6px 0px rgba(40, 121, 255, 0.3)' : '')};
+  border-color: ${(p: any) => (p.focus ? "#2879ff!important" : "#E9ECF0")};
+  ${(p: any) => (p.focus ? "box-shadow:0 0 6px 0px rgba(40, 121, 255, 0.3)" : "")};
   &:hover {
     border-color: #2879ff;
   }
@@ -40,7 +41,7 @@ export const Input = styled.input`
   line-height: 30px;
 `;
 export const SearchIcon = styled.i`
-  color: ${(p: any) => (p.active ? '#2879ff !important' : '#8f9ca6')};
+  color: ${(p: any) => (p.active ? "#2879ff !important" : "#8f9ca6")};
   margin-right: 5px;
   font-size: 11px;
   background: #fff;
@@ -261,10 +262,10 @@ export const SelectedList = styled.div`
   overflow: hidden;
 `;
 export const ClearBtn = styled.a`
-  cursor: ${(p: any) => (p.active ? 'pointer' : 'not-allowed')};
-  color: ${(p: any) => (p.active ? '#2879ff' : '#acb7bf')};
+  cursor: ${(p: any) => (p.active ? "pointer" : "not-allowed")};
+  color: ${(p: any) => (p.active ? "#2879ff" : "#acb7bf")};
   &:hover {
-    color: ${(p: any) => (p.active ? '#1b6cf1' : '#acb7bf')};
+    color: ${(p: any) => (p.active ? "#1b6cf1" : "#acb7bf")};
   }
 `;
 export const EmptyText = styled.p`

package/src/components-v1/userSelector/types.ts

@@ -50,4 +50,4 @@ interface Avatar {
   large?: any;
   hasAvatar: boolean;
   color: string;
-}
+}