@titaui/pc 1.9.48 → 1.9.49

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

@@ -1,6 +1,8 @@
-import React, { PureComponent } from 'react'
-import { inputWordTrans } from '../../utils/i18n-front-translate'
-import { TextareaWrapper, Textarea, TextareaPlaceholder, TextareaWarning } from './style'
+import React, { PureComponent } from "react";
+import { inputWordTrans } from "../../utils/i18n-front-translate";
+import {
+  TextareaWrapper, Textarea, TextareaPlaceholder, TextareaWarning,
+} from "./style";
 
 interface Props {
   className?: string
@@ -15,111 +17,115 @@ interface Props {
 }
 
 interface State {
-  'isFocus': boolean
-  'isHasPlaceholder': boolean
+  "isFocus": boolean
+  "isHasPlaceholder": boolean
 }
 
 export default class TextareaView extends PureComponent<Props, State> {
   constructor(props: Props) {
-    super(props)
+    super(props);
     this.state = {
-      'isFocus': false,
-      'isHasPlaceholder': false
-    }
+      isFocus: false,
+      isHasPlaceholder: false,
+    };
   }
 
   static defaultProps = {
-    'initialHeight': 23,
-    'maxHeight': 56,
-    'autoResizing': false,
-    'maxLength': 2000,
-  }
+    initialHeight: 23,
+    maxHeight: 56,
+    autoResizing: false,
+    maxLength: 2000,
+  };
 
   componentDidMount() {
-    const { initialHeight, maxHeight } = this.props
-    let textarea = this.refs.textarea
+    const { initialHeight, maxHeight } = this.props;
+    const { textarea } = this.refs;
     // @ts-ignore
-    textarea.style.height = textarea.value && textarea.scrollHeight > initialHeight ? `${maxHeight ? maxHeight : textarea.scrollHeight}px` : `${initialHeight}px`
-    this.isHasPlaceholder()
+    textarea.style.height = textarea.value && textarea.scrollHeight > initialHeight ? `${maxHeight || textarea.scrollHeight}px` : `${initialHeight}px`;
+    this.isHasPlaceholder();
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
-    this.isHasPlaceholder()
+    this.isHasPlaceholder();
   }
 
   isHasPlaceholder = () => {
-    const { placeholder, value } = this.props
-    this.setState({ isHasPlaceholder: (placeholder as string).length > 0 && value.length <= 0 })
-  }
+    const { placeholder, value } = this.props;
+    this.setState({ isHasPlaceholder: (placeholder as string).length > 0 && value.length <= 0 });
+  };
 
   // 点击提示文字
   _handlerPlaceholderClick = () => {
     // @ts-ignore
-    this.refs.textarea.focus()
-    this.setState({ isFocus: true })
-  }
+    this.refs.textarea.focus();
+    this.setState({ isFocus: true });
+  };
 
   // 输入框获取焦点
   _handlerFocus = (event: any) => {
-    const { autoResizing, initialHeight, maxHeight } = this.props
-    let textarea = this.refs.textarea
+    const { autoResizing, initialHeight, maxHeight } = this.props;
+    const { textarea } = this.refs;
     // @ts-ignore
-    textarea.style.height = autoResizing && maxHeight && maxHeight > initialHeight ? `${maxHeight}px` : `${initialHeight}px`
-    this.setState({ isFocus: true })
-    this.toEnd(event)
-  }
+    textarea.style.height = autoResizing && maxHeight && maxHeight > initialHeight ? `${maxHeight}px` : `${initialHeight}px`;
+    this.setState({ isFocus: true });
+    this.toEnd(event);
+  };
 
   // 输入框失去焦点
   _handlerBlur = (event: any) => {
-    this.setState({ isFocus: false })
-  }
+    this.setState({ isFocus: false });
+  };
 
   // 输入内容
   _handlerChange = (event: any) => {
-    this.props.onChange(event.target.value)
-  }
+    this.props.onChange(event.target.value);
+  };
 
   // 兼容IE、火狐、chrome浏览器的onfocus时将光标定位在最后
   toEnd = (event: any) => {
-    let obj = event.srcElement ? event.srcElement : event.target
+    const obj = event.srcElement ? event.srcElement : event.target;
     if (obj.createTextRange) { // IE浏览器
-      let range = obj.createTextRange()
-      range.moveStart("character", event.target.value.length)
-      range.collapse(true)
+      const range = obj.createTextRange();
+      range.moveStart("character", event.target.value.length);
+      range.collapse(true);
     } else { // 非IE浏览器
-      obj.setSelectionRange(event.target.value.length, event.target.value.length)
-      obj.focus()
+      obj.setSelectionRange(event.target.value.length, event.target.value.length);
+      obj.focus();
     }
-  }
+  };
 
   render() {
-    const { className, style, value, initialHeight, maxHeight, placeholder, maxLength } = this.props
-    const { isFocus, isHasPlaceholder } = this.state
-    let valueLen = value.length
+    const {
+      className, style, value, initialHeight, maxHeight, placeholder, maxLength,
+    } = this.props;
+    const { isFocus, isHasPlaceholder } = this.state;
+    const valueLen = value.length;
     return (
       <TextareaWrapper className={className} style={style}>
         {isHasPlaceholder && (
-          <TextareaPlaceholder dangerouslySetInnerHTML={{ '__html': placeholder }}
+          <TextareaPlaceholder
+            dangerouslySetInnerHTML={{ __html: placeholder }}
             onClick={this._handlerPlaceholderClick}
-            style={{ 'opacity': isFocus ? '0.3' : '1' }}>
-          </TextareaPlaceholder>
+            style={{ opacity: isFocus ? "0.3" : "1" }}
+          />
         )}
-        <Textarea ref="textarea"
-          className={`${isFocus ? 'actived' : ''}`}
+        <Textarea
+          ref="textarea"
+          className={`${isFocus ? "actived" : ""}`}
           height={initialHeight}
           maxHeight={maxHeight}
           value={value}
-          style={{ borderColor: valueLen > (maxLength as number) ? '#CC2929' : '#E4EBF0' }}
+          style={{ borderColor: valueLen > (maxLength as number) ? "#CC2929" : "#E4EBF0" }}
           onFocus={this._handlerFocus}
           onBlur={this._handlerBlur}
-          onChange={this._handlerChange}>
-        </Textarea>
+          onChange={this._handlerChange}
+        />
         {valueLen > (maxLength as number) && (
           <TextareaWarning>
             <p>{inputWordTrans(valueLen, maxLength)}</p>
           </TextareaWarning>
         )}
       </TextareaWrapper>
-    )
+    );
   }
 }

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

@@ -1,8 +1,8 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 export const TextareaWrapper = styled.div`
   position: relative;
-`
+`;
 export const Textarea = styled.textarea`
   width: calc(100% - 18px);
   max-height: ${(p: any) => `${p.maxHeight}px`};
@@ -23,17 +23,17 @@ export const Textarea = styled.textarea`
   &:hover {
     border-color: #1b6cf1 !important;
   }
-`
+`;
 export const TextareaPlaceholder = styled.div`
   font-size: 12px;
   color: #C2CBD1;
   position: absolute;
   top: 11px;
   left: 8px;
-`
+`;
 export const TextareaWarning = styled.div`
   margin-bottom: 7px;
   line-height: 1;
   font-size: 12px;
   color: #CC2929;
-`
+`;

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

@@ -1,5 +1,6 @@
-import React, { PureComponent } from 'react'
-import classnames from 'classnames'
+import React, { PureComponent } from "react";
+import classnames from "classnames";
+
 interface Props {
   visible: boolean
   animate: boolean
@@ -21,19 +22,19 @@ interface State {
 }
 export default class Transition extends PureComponent<Props, State> {
   constructor(props: Props) {
-    super(props)
-  
+    super(props);
+
     this.state = {
       visible: false,
-      classes: ''
-    }
+      classes: "",
+    };
   }
 
   // 过渡时间不传入默认为0
   static defaultProps = {
     animate: true,
     visible: false,
-    transitionName: '',
+    transitionName: "",
     appearTimeout: 0,
     appearActiveTimeout: 0,
     appearEndTimeout: 0,
@@ -43,126 +44,132 @@ export default class Transition extends PureComponent<Props, State> {
     leaveTimeout: 0,
     leaveEndTimeout: 0,
     leaveActiveTimeout: 0,
-  }
+  };
 
   componentWillMount() {
-    const {transitionName, animate, visible} = this.props
+    const { transitionName, animate, visible } = this.props;
     if (!animate) {
-      this.setState({visible})
-      return
+      this.setState({ visible });
+      return;
     }
-    this._handlerAppearAnimate(this.props, transitionName)
+    this._handlerAppearAnimate(this.props, transitionName);
   }
 
   componentWillReceiveProps(props: Props) {
-    const { transitionName, animate, visible } = props
+    const { transitionName, animate, visible } = props;
     if (!animate) {
-      this.setState({ visible })
-      return
+      this.setState({ visible });
+      return;
     }
     if (visible) {
-      this._handlerEnterAnimate(props, transitionName)
+      this._handlerEnterAnimate(props, transitionName);
     } else {
-      this._handlerLeaveAnimate(props, transitionName)
+      this._handlerLeaveAnimate(props, transitionName);
     }
   }
 
   // 首次渲染的入场动画
   _handlerAppearAnimate = (props: Props, transitionName: string) => {
-    const { visible, appearTimeout, appearActiveTimeout, appearEndTimeout } = props
-    const {initClasses, activeClasses, endClasses} = this.getClasses('appear', transitionName)
-    this.setState({visible, classes: initClasses})
+    const {
+      visible, appearTimeout, appearActiveTimeout, appearEndTimeout,
+    } = props;
+    const { initClasses, activeClasses, endClasses } = this.getClasses("appear", transitionName);
+    this.setState({ visible, classes: initClasses });
     setTimeout(() => {
-      this.setState({ classes: activeClasses })
-    }, appearTimeout)
+      this.setState({ classes: activeClasses });
+    }, appearTimeout);
     setTimeout(() => {
-      this.setState({ classes: endClasses })
-    }, (appearActiveTimeout as number) + (appearTimeout as number))
+      this.setState({ classes: endClasses });
+    }, (appearActiveTimeout as number) + (appearTimeout as number));
     setTimeout(() => {
-      this.setState({ classes: '' })
-    }, (appearEndTimeout as number) + (appearActiveTimeout as number) + (appearTimeout as number))
-  }
-  
+      this.setState({ classes: "" });
+    }, (appearEndTimeout as number) + (appearActiveTimeout as number) + (appearTimeout as number));
+  };
+
   // 进入动画
   _handlerEnterAnimate = (props: Props, transitionName: string) => {
-    const { visible, enterTimeout, enterActiveTimeout, enterEndTimeout } = props
-    const { initClasses, activeClasses, endClasses } = this.getClasses('enter', transitionName)
+    const {
+      visible, enterTimeout, enterActiveTimeout, enterEndTimeout,
+    } = props;
+    const { initClasses, activeClasses, endClasses } = this.getClasses("enter", transitionName);
 
-    this.setState({ visible, classes: initClasses })
+    this.setState({ visible, classes: initClasses });
     const enterTimer = setTimeout(() => {
-      this.setState({ classes: activeClasses })
-      clearTimeout(enterTimer)
-    }, enterTimeout)
+      this.setState({ classes: activeClasses });
+      clearTimeout(enterTimer);
+    }, enterTimeout);
 
     const enterActiveTimer = setTimeout(() => {
-      this.setState({ classes: endClasses })
-      clearTimeout(enterActiveTimer)
-    }, (enterActiveTimeout as number) + (enterTimeout as number))
+      this.setState({ classes: endClasses });
+      clearTimeout(enterActiveTimer);
+    }, (enterActiveTimeout as number) + (enterTimeout as number));
 
     const enterEndTimer = setTimeout(() => {
-      this.setState({ classes: '' })
-      clearTimeout(enterEndTimer)
-    }, (enterEndTimeout as number) + (enterActiveTimeout as number) + (enterTimeout as number))
-  }
+      this.setState({ classes: "" });
+      clearTimeout(enterEndTimer);
+    }, (enterEndTimeout as number) + (enterActiveTimeout as number) + (enterTimeout as number));
+  };
 
   // 离开动画
   _handlerLeaveAnimate = (props: Props, transitionName: string) => {
-    const { visible, leaveTimeout, leaveActiveTimeout, leaveEndTimeout } = props
-    const { initClasses, activeClasses, endClasses } = this.getClasses('leave', transitionName)
+    const {
+      visible, leaveTimeout, leaveActiveTimeout, leaveEndTimeout,
+    } = props;
+    const { initClasses, activeClasses, endClasses } = this.getClasses("leave", transitionName);
 
-    this.setState({ classes: initClasses })
+    this.setState({ classes: initClasses });
     const leaveTimer = setTimeout(() => {
-      this.setState({ classes: activeClasses })
-      clearTimeout(leaveTimer)
-    }, leaveTimeout)
+      this.setState({ classes: activeClasses });
+      clearTimeout(leaveTimer);
+    }, leaveTimeout);
 
     const leaveActiveTimer = setTimeout(() => {
-      this.setState({ classes: endClasses })
-      clearTimeout(leaveActiveTimer)
-    }, (leaveActiveTimeout as number) + (leaveTimeout as number))
+      this.setState({ classes: endClasses });
+      clearTimeout(leaveActiveTimer);
+    }, (leaveActiveTimeout as number) + (leaveTimeout as number));
 
     const leaveEndTimer = setTimeout(() => {
-      this.setState({ visible, classes: '' })
-      clearTimeout(leaveEndTimer)
-    }, (leaveEndTimeout as number) + (leaveActiveTimeout as number) + (leaveTimeout as number))
-  }
+      this.setState({ visible, classes: "" });
+      clearTimeout(leaveEndTimer);
+    }, (leaveEndTimeout as number) + (leaveActiveTimeout as number) + (leaveTimeout as number));
+  };
 
   // 类名统一配置
   getClasses(type: string, transitionName: string) {
     const initClasses = classnames({
-      [`${transitionName}-appear`]: type === 'appear',
-      [`${transitionName}-enter`]: type === 'enter',
-      [`${transitionName}-leave`]: type === 'leave',
-    })
+      [`${transitionName}-appear`]: type === "appear",
+      [`${transitionName}-enter`]: type === "enter",
+      [`${transitionName}-leave`]: type === "leave",
+    });
     const activeClasses = classnames({
-      [`${transitionName}-appear-active`]: type === 'appear',
-      [`${transitionName}-enter-active`]: type === 'enter',
-      [`${transitionName}-leave-active`]: type === 'leave',
-    })
+      [`${transitionName}-appear-active`]: type === "appear",
+      [`${transitionName}-enter-active`]: type === "enter",
+      [`${transitionName}-leave-active`]: type === "leave",
+    });
     const endClasses = classnames({
-      [`${transitionName}-appear-end`]: type === 'appear',
-      [`${transitionName}-enter-end`]: type === 'enter',
-      [`${transitionName}-leave-end`]: type === 'leave',
-    })
-    return { initClasses, activeClasses, endClasses }
+      [`${transitionName}-appear-end`]: type === "appear",
+      [`${transitionName}-enter-end`]: type === "enter",
+      [`${transitionName}-leave-end`]: type === "leave",
+    });
+    return { initClasses, activeClasses, endClasses };
   }
 
   cloneChildren() {
-    const { classes } = this.state
-    const children = this.props.children
+    const { classes } = this.state;
+    const { children } = this.props;
     // @ts-ignore
-    const className = children.props.className
+    const { className } = children.props;
 
     // 通过React.cloneElement给子元素添加额外的props，
     return React.cloneElement(
       // @ts-ignore
       children,
-      { className: `${className} ${classes}` }
-    )
+      { className: `${className} ${classes}` },
+    );
   }
 
   render() {
-    const {visible} = this.state
-    return visible && this.cloneChildren()
+    const { visible } = this.state;
+    return visible && this.cloneChildren();
   }
 }

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

@@ -1,7 +1,8 @@
-import React, { PureComponent } from 'react';
-import Pop from '../pop';
-import UserSelector from './index';
-import { User, Dept } from './types';
+import React, { PureComponent } from "react";
+import Pop from "../pop";
+import UserSelector from "./index";
+import { User, Dept } from "./types";
+
 interface Props {
   className?: string;
   align?: string;
@@ -15,65 +16,71 @@ interface Props {
   style?:React.CSSProperties
   selectedUser?: User[];
   selectedDept?: Dept[];
-  mode?:'single' | 'multi';
+  mode?:"single" | "multi";
   popExtraClassName?:string
 }
 
 export default class UserSelectorPop extends PureComponent<Props> {
   handleShowPop = (e) => {
-    if(this.props.stopPropagation && !!e){
+    if (this.props.stopPropagation && !!e) {
       e.stopPropagation();
       e.nativeEvent.stopImmediatePropagation();
     }
-    //@ts-ignore
+    // @ts-ignore
     this.refs.pop.show(this.refs.trigger);
   };
+
   handleHide = () => {
-    //@ts-ignore
+    // @ts-ignore
     this.refs.pop.hide();
   };
-  /**手动显示 */
+
+  /** 手动显示 */
   show = (el: any) => {
-    //@ts-ignore
+    // @ts-ignore
     this.refs.pop.show(el);
   };
+
   render() {
-    const { children,popExtraClassName, className, container, align, onSubmit, multi, deptSelectable, onCancel, rootSelectable,style,stopPropagation,selectedUser,selectedDept,mode } = this.props;
+    const {
+      children, popExtraClassName, className, container, align, onSubmit, multi, deptSelectable, onCancel, rootSelectable, style, stopPropagation, selectedUser, selectedDept, mode,
+    } = this.props;
     return (
-      <div style={{ display: 'inline-block',...(style||{}) }} className={className}>
-        <div ref='trigger' onMouseDown={this.handleShowPop}>
+      <div style={{ display: "inline-block", ...(style || {}) }} className={className}>
+        <div ref="trigger" onMouseDown={this.handleShowPop}>
           {children}
         </div>
-        <Pop ref='pop' align={align} container={container} className={'tita-common-pop-no-shadow tita-user-pop '+popExtraClassName||''} cover>
-          <div onClick={e=>{
-            if(!stopPropagation)return;
+        <Pop ref="pop" align={align} container={container} className={`tita-common-pop-no-shadow tita-user-pop ${popExtraClassName}` || ""} cover>
+          <div onClick={(e) => {
+            if (!stopPropagation) return;
             e.stopPropagation();
             e.nativeEvent.stopImmediatePropagation();
-          }}>
-          <UserSelector
-            multi={multi}
-            onSubmit={(users, depts) => {
-              onSubmit(users, depts);
-              this.handleHide();
-            }}
-            mode={mode}
-            deptSelectable={deptSelectable}
-            selectedDept={selectedDept}
-            selectedUser={selectedUser}
-            onCancel={() => {
-              this.handleHide();
-              onCancel && onCancel();
-            }}
-            onOpenMultiMode={() => (this.refs.pop as any).resetPosition()}
-            rootSelectable={rootSelectable}
-          />
+          }}
+          >
+            <UserSelector
+              multi={multi}
+              onSubmit={(users, depts) => {
+                onSubmit(users, depts);
+                this.handleHide();
+              }}
+              mode={mode}
+              deptSelectable={deptSelectable}
+              selectedDept={selectedDept}
+              selectedUser={selectedUser}
+              onCancel={() => {
+                this.handleHide();
+                onCancel && onCancel();
+              }}
+              onOpenMultiMode={() => (this.refs.pop as any).resetPosition()}
+              rootSelectable={rootSelectable}
+            />
           </div>
         </Pop>
       </div>
     );
   }
 }
-export const Test = () => {
+export function Test() {
   return (
     <UserSelectorPop
       onSubmit={(users, depts) => {
@@ -84,4 +91,4 @@ export const Test = () => {
       <button>打开选人控件</button>
     </UserSelectorPop>
   );
-};
+}