@titaui/pc 1.7.35 → 1.7.39

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

@@ -1,136 +0,0 @@
-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'
-
-interface Props {
-  searchTxt?: string
-  onSelect: (user:User) => void
-  useKeyBoard?: boolean
-  onSearch?: (users:User[]) => void
-  onlySearchByName?: boolean
-}
-interface State {
-  users: User[]
-  pending: boolean
-  activeIndex: number
-}
-export default class SingleMode extends PureComponent<Props,State> {
-  constructor(p:Props){
-    super(p);
-    this.state = {
-      users:[],
-      pending: true,
-      activeIndex: 0
-    }
-  }
-  componentDidMount(){
-    if(this.props.searchTxt){
-      this.getSearchUsers()
-    }else {
-      this.getFrequentContacts()
-    }
-    if(this.props.useKeyBoard !== false){
-      document.addEventListener('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]) {
-        this.props.onSelect(users[activeIndex]);
-        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
-      this.setState({
-        activeIndex: index
-      })
-    }
-
-  }
-  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){
-          users.push(res.Data[key]);
-        }
-        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){
-        let users:User[] = [];
-        users = ((res.Data||[]) as WXUser[]).map(u => ({
-          Id: u.userId,
-          Name: u.name,
-          Email: u.email,
-          DepartmentId: u.departmentId,
-          Department: u.departmentName,
-          UserAvatar: {
-            Original: u.avatar.original,
-            Small: u.avatar.small,
-            Medium: u.avatar.medium,
-            Normal: u.avatar.normal,
-            Big: u.avatar.big,
-            Large: u.avatar.large,
-            HasAvatar: u.avatar.hasAvatar,
-            Color: u.avatar.color
-          }
-        }))
-        this.setState({users,activeIndex:0})
-        this.props.onSearch && this.props.onSearch(users);
-      }
-    })
-  }
-  render() {
-    const {users,pending,activeIndex} = this.state;
-    return (
-      <SingleModeWrapper>
-        <PerfectScrollbar>
-        {
-          !users.length && !pending ? 
-          <EmptyWrapper>
-            <img src={require('../assets/emptyImg.png')} width="100px"/>
-            <ListEmptyText>这里什么都没有...</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>
-        }
-        </PerfectScrollbar>
-      </SingleModeWrapper>
-    )
-  }
-}

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

@@ -1,51 +0,0 @@
-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
-  user: User
-  onClick?: Function
-  onDeleteUser?: Function
-  keyword?: string
-}
-interface State {
-
-}
-export default class UserItem extends PureComponent<Props, State> {
-  handleClick = () => {
-    const { onClick, user } = this.props;
-    onClick && onClick(user)
-  }
-  colorKeywords = (str: string) => {
-    const { keyword } = this.props;
-    if (!keyword) return str;
-    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>]
-          })
-        }
-      </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)} />
-        }
-        <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>
-        </ItemTextContent>
-        {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,147 +0,0 @@
-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';
-export interface Props {
-  multi?: boolean;
-  onSubmit: (users: User[], depts: Dept[]) => void;
-  onCancel: Function;
-  onOpenMultiMode?: Function;
-  deptSelectable?: boolean;
-  rootSelectable?: boolean;
-  selectedUser?: User[];
-  selectedDept?: Dept[];
-  mode?:'single' | 'multi';
-}
-interface State {
-  mode: 'single' | 'multi';
-  selectedUser: User[];
-  searchTxt?: string;
-  selectedDept: Dept[];
-}
-export default class UserSelector extends PureComponent<Props, State> {
-  constructor(p: Props) {
-    super(p);
-    this.state = {
-      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',
-      // 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),
-    });
-  };
-  handleDeleteDept = (d: Dept) => {
-    this.setState({
-      selectedDept: [...this.state.selectedDept].filter(dept => dept.Id != d.Id),
-    });
-  };
-  handleClear = () => {
-    const { selectedDept, selectedUser } = this.state;
-    if (!(selectedDept.length > 0) && !(selectedUser.length > 0)) return;
-    this.setState({
-      selectedDept: [],
-      selectedUser: [],
-    });
-  };
-  handleSearchConfirm = () => {};
-  handleSubmit = (u: User[], d: Dept[]) => {
-    const { onSubmit } = this.props;
-    if (!this.canSubmit) return;
-    this.canSubmit = false;
-    this.timer = setTimeout(() => {
-      this.canSubmit = true;
-    }, 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;
-    return (
-      <Wrapper isSingleMode={isSingleMode}>
-        <SearchBar onSearch={this.handleSearch} ref={r => (this.search = r)} />
-        {isSingleMode ? (
-          <SingleMode searchTxt={searchTxt} onSelect={(user: User) => onSubmit([user], [])} />
-        ) : (
-          <MutiMode
-            selectedUser={selectedUser}
-            onDeleteDept={this.handleDeleteDept}
-            onDeleteUser={this.handleDeleteUser}
-            onSelectDept={this.handleSelectDept}
-            onSelectUser={this.handleSelectUser}
-            selectedDept={selectedDept}
-            searchTxt={searchTxt}
-            onClear={this.handleClear}
-            deptSelectable={deptSelectable}
-            rootSelectable={rootSelectable}
-          />
-        )}
-        <Footer style={{ height: isSingleMode ? '24px' : '46px', marginTop: isSingleMode ? '10px' : '15px', marginBottom: isSingleMode ? '10px' : 0 }}>
-          {!multi ? null : isSingleMode ? (
-            <AdvancedModLink onMouseDown={this.openMutiMode}>
-              高级模式
-              <i className='tu-icon-angle-right' />
-            </AdvancedModLink>
-          ) : (
-            [
-              <Btn style={{ marginRight: '10px' }} onMouseDown={() => onCancel()}>
-                取消
-              </Btn>,
-              <Btn style={{ color: '#FFF', backgroundColor: '#2879ff' }} onMouseDown={() => onSubmit(selectedUser, selectedDept)}>
-                确定
-              </Btn>,
-            ]
-          )}
-        </Footer>
-      </Wrapper>
-    );
-  }
-}

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

@@ -1,306 +0,0 @@
-import styled from 'styled-components';
-export const Wrapper = styled.div`
-    overflow: hidden;
-    background-color: #fff;
-    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.15);
-    border-radius: 5px;
-    height: 415px;
-    padding: 0 15px;
-    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')}; */
-`;
-export const InputWrapper = styled.div`
-  position: relative;
-  box-sizing: border-box;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  margin: 10px 0;
-  padding: 15px 0;
-  border: 1px solid #E9ECF0;
-  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)' : '')};
-  &:hover {
-    border-color: #2879ff;
-  }
-`;
-export const Input = styled.input`
-  flex: 1;
-  border: none;
-  outline: none;
-  font-size: 14px;
-  height: 30px;
-  line-height: 30px;
-`;
-export const SearchIcon = styled.i`
-  color: ${(p: any) => (p.active ? '#2879ff !important' : '#8f9ca6')};
-  margin-right: 5px;
-  font-size: 11px;
-  background: #fff;
-  margin-left: 11px;
-`;
-export const CleanBtn = styled.a`
-  color: #acb7bf;
-  font-size: 14px;
-  margin-right: 5px;
-  &:hover {
-    color: #F05E5E;
-  }
-`;
-export const ItemWrapper = styled.div`
-  height: 46px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  &:hover {
-    background-color: #f5f8fa;
-    > i {
-      display: inline-block;
-    }
-  }
-  > i {
-    display: none;
-    color: #acb7bf;
-    &:hover {
-      color: #F05E5E;
-    }
-  }
-`;
-export const ItemTextContent = styled.div`
-  height: 100%;
-  width: calc(100% - 64px);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-left: 5px;
-`;
-export const ItemName = styled.span`
-  color: #36434d;
-  font-size: 12px;
-  margin-right: 12px;
-`;
-export const ItemText = styled.div`
-  color: #acb7bf;
-  font-size: 12px;
-  line-height: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-export const SingleModeWrapper = styled.div`
-  /* height: 365px; */
-  height: 0;
-  flex: 1;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  padding: 5px 0;
-  overflow: hidden;
-`;
-export const SingleList = styled.div`
-  flex: 1;
-`;
-export const LinkWrapper = styled.div`
-  display: flex;
-  margin: 10px 0;
-  justify-content: flex-end;
-`;
-export const AdvancedModLink = styled.a`
-  color: #2879ff;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-
-  :hover {
-    color: #1b6cf1;
-  }
-`;
-export const Footer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-`;
-export const MutiModeWrapper = styled.div`
-  display: flex;
-  flex: 1;
-  height: 0;
-  overflow: hidden;
-`;
-export const MutiModeLeft = styled.div`
-  /* flex: 1; */
-  width: 50%;
-  border-right: 1px solid #E9ECF0;
-  box-sizing: border-box;
-  padding-right: 10px;
-  /* width: 0; */
-`;
-export const MutiModeRight = styled.div`
-  /* flex: 1; */
-  width: 50%;
-  box-sizing: border-box;
-  padding-left: 10px;
-  /* width: 0; */
-  display: flex;
-  flex-direction: column;
-`;
-export const ListWrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-`;
-export const ListHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 5px 0 5px 10px;
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: 12px;
-  line-height: 20px;
-  color: #36434d;
-  i {
-    display: none;
-    cursor: pointer;
-    margin-right: 15px;
-    color: #acb7bf;
-    font-size: 14px;
-    &:hover {
-      color: #2879ff;
-    }
-  }
-  &:hover {
-    background-color: #f5f8fa;
-    i {
-      display: block;
-    }
-  }
-`;
-export const SelectedHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 0;
-  margin-bottom: 10px;
-  color: #36434d;
-  font-size: 12px;
-  line-height: 20px;
-  padding: 5px 0;
-`;
-export const List = styled.div`
-  flex: 1;
-  height: 0;
-  overflow: hidden;
-`;
-export const TreeHeader = styled.div`
-  padding-left: 10px;
-  display: flex;
-  height: 30px;
-  align-items: center;
-  cursor: pointer;
-  color: #36434d;
-  justify-content: space-between;
-  &:hover {
-    background-color: #f5f8fa;
-    .tu-icon-add2,
-    .tu-icon-cross {
-      display: inline-block;
-    }
-  }
-  div {
-    display: flex;
-    align-items: center;
-  }
-  .tu-icon-cross {
-    display: none;
-    cursor: pointer;
-    margin-right: 15px;
-    color: #acb7bf;
-    font-size: 14px;
-    &:hover {
-      color: #F05E5E;
-    }
-  }
-  .tu-icon-add2 {
-    display: none;
-    cursor: pointer;
-    margin-right: 15px;
-    color: #acb7bf;
-    font-size: 14px;
-    &:hover {
-      color: #2879ff;
-    }
-  }
-  span {
-    font-size: 12px;
-    display: inline-block;
-    margin-left: 10px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  i {
-    transition: transform 0.3s ease;
-  }
-`;
-export const TreeList = styled.div`
-  padding-left: 10px;
-`;
-export const DepartmentListWrapper = styled.div`
-  height: 100%;
-`;
-export const SelectedList = styled.div`
-  flex: 1;
-  height: 0;
-  overflow: hidden;
-`;
-export const ClearBtn = styled.a`
-  cursor: ${(p: any) => (p.active ? 'pointer' : 'not-allowed')};
-  color: ${(p: any) => (p.active ? '#2879ff' : '#acb7bf')};
-  &:hover {
-    color: ${(p: any) => (p.active ? '#1b6cf1' : '#acb7bf')};
-  }
-`;
-export const EmptyText = styled.p`
-  font-size: 20px;
-  color: #e4ebf0;
-  line-height: 36px;
-  margin-top: 95px;
-  text-align: center;
-`;
-export const Btn = styled.a`
-  display: inline-block;
-  color: #36434d;
-  background-color: #f5f8fa;
-  border-radius: 2px;
-  font-size: 12px;
-  line-height: 20px;
-  padding: 3px 10px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
-  &:hover {
-    color: #36434d;
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
-    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
-  }
-`;
-export const EmptyWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-`;
-export const ListEmptyText = styled.p`
-  color: #bbbfee;
-  font-size: 14px;
-  line-height: 1.2;
-  text-align: center;
-`;

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

@@ -1,53 +0,0 @@
-export interface User {
-  Id: number;
-  Name: string;
-  Email: string;
-  DepartmentId: number;
-  Department: string;
-  UserAvatar: UserAvatar;
-}
-
-interface UserAvatar {
-  Original?: any;
-  Small?: any;
-  Medium?: any;
-  Normal?: any;
-  Big?: any;
-  Large?: any;
-  HasAvatar: boolean;
-  Color: string;
-}
-export interface Deparentment {
-  Id: number;
-  PId: number;
-  DepartmentName: string;
-  FullDepartmentName?: any;
-  TotalUserCount: number;
-  DepartmentLeaderName?: any;
-}
-export interface Dept extends Deparentment {
-  children?: Dept[]
-}
-export interface WXUser {
-  userId: number;
-  userType: number;
-  name: string;
-  email: string;
-  managerId: number;
-  jobState: number;
-  departmentId: number;
-  departmentName: string;
-  postition?: any;
-  avatar: Avatar;
-}
-
-interface Avatar {
-  original?: any;
-  small?: any;
-  medium?: any;
-  big?: any;
-  normal?: any;
-  large?: any;
-  hasAvatar: boolean;
-  color: string;
-}