@titaui/pc 1.9.48 → 1.9.49

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

@@ -1,8 +1,8 @@
-import React, { PureComponent } from 'react';
-import styled from 'styled-components';
-import uuid from 'uuid';
-import CacheUtil from './cache';
-import { getLocale } from '../../utils/getLocale';
+import React, { PureComponent } from "react";
+import styled from "styled-components";
+import uuid from "uuid";
+import CacheUtil from "./cache";
+import { getLocale } from "../../utils/getLocale";
 
 interface Props {
   placeHolder: string;
@@ -48,8 +48,8 @@ const InputWrapper = styled.div`
     position: absolute;
     bottom: 0;
     height: 1px;
-    left: ${(p: any) => (p.active ? '0%' : '50%')};
-    right: ${(p: any) => (p.active ? '0%' : '50%')};
+    left: ${(p: any) => (p.active ? "0%" : "50%")};
+    right: ${(p: any) => (p.active ? "0%" : "50%")};
     background-color: #1b85d6;
     transition: all 0.3s ease;
   }
@@ -74,13 +74,13 @@ const IconWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  transform: ${(p: any) => (p.active ? 'translateX(0)' : 'translateX(19px)')};
+  transform: ${(p: any) => (p.active ? "translateX(0)" : "translateX(19px)")};
   transition: transform 0.3s ease;
 `;
 const SearchIcon = styled.i`
   font-size: 14px;
   cursor: pointer;
-  color: ${(p: any) => (p.active ? '#1b85d6' : '#D8D8D8')};
+  color: ${(p: any) => (p.active ? "#1b85d6" : "#D8D8D8")};
 `;
 const ClearIcon = styled.i`
   font-size: 14px;
@@ -89,7 +89,7 @@ const ClearIcon = styled.i`
   transition: all 0.5s ease;
   cursor: pointer;
   opacity: ${(p: any) => (p.active ? 1 : 0)};
-  transform: ${(p: any) => (p.active ? 'scale(1)' : 'scale(0)')};
+  transform: ${(p: any) => (p.active ? "scale(1)" : "scale(0)")};
 `;
 export default class Search extends PureComponent<Props, State> {
   constructor(p: Props) {
@@ -98,25 +98,29 @@ export default class Search extends PureComponent<Props, State> {
     this.state = {
       id: uuid(),
       active: false,
-      keywords: cache && cache.keywords||''
+      keywords: cache && cache.keywords || "",
     };
   }
+
   handleEnterPress = (e: any) => {
     if (e.nativeEvent.keyCode == 13) {
       this.handleSearch();
     }
   };
+
   handleChange = (e: any) => {
     this.setState({
       keywords: e.target.value,
     });
   };
+
   handleFocus = () => {
     if (this.state.active) return;
     this.setState({
       active: true,
     });
   };
+
   handleBlur = () => {
     const { keywords } = this.state;
     if (!keywords || !keywords.length) {
@@ -125,30 +129,33 @@ export default class Search extends PureComponent<Props, State> {
       });
     }
   };
+
   handleSearch = () => {
     const { keywords } = this.state;
     this.props.onSearch(keywords);
   };
+
   handleClear = () => {
     this.setState({
-      keywords: '',
+      keywords: "",
       active: false,
     });
-    this.props.onSearch('');
+    this.props.onSearch("");
   };
+
   render() {
-    const { placeHolder = getLocale('OKR_MyO_Pop_Pleaenterwords'), id: HTMLid } = this.props;
+    const { placeHolder = getLocale("OKR_MyO_Pop_Pleaenterwords"), id: HTMLid } = this.props;
     const { id, keywords, active } = this.state;
     return (
       <SearchWrapper id={HTMLid}>
-        <InputWrapper className='input-wrapper' active={active}>
-          <PlaceHolder htmlFor={id} style={{ display: keywords && keywords.length ? 'none' : 'block' }}>
+        <InputWrapper className="input-wrapper" active={active}>
+          <PlaceHolder htmlFor={id} style={{ display: keywords && keywords.length ? "none" : "block" }}>
             {placeHolder}
           </PlaceHolder>
           <input id={id} value={keywords} onChange={this.handleChange} onKeyPress={this.handleEnterPress} onFocus={this.handleFocus} onBlur={this.handleBlur} />
           <IconWrapper active={active}>
-            <SearchIcon className='tu-icon-search' active={active} onClick={this.handleSearch} />
-            <ClearIcon className='tu-icon-close' active={active} onClick={this.handleClear} />
+            <SearchIcon className="tu-icon-search" active={active} onClick={this.handleSearch} />
+            <ClearIcon className="tu-icon-close" active={active} onClick={this.handleClear} />
           </IconWrapper>
         </InputWrapper>
       </SearchWrapper>

package/src/components-v1/select/Option.js

@@ -1,33 +1,34 @@
 /*
- * @Author: lianghaosen 
- * @Date: 2018-12-04 23:03:10 
+ * @Author: lianghaosen
+ * @Date: 2018-12-04 23:03:10
  * @Last Modified by: zhangyanru
  * @Last Modified time: 2019-08-28 17:53:47
  */
-import React, { Component } from 'react'
+import React, { Component } from "react";
 
 export default class Option extends Component {
   handleSelect = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
-    const {onSelect} = this.props;
+    const { onSelect } = this.props;
     onSelect && onSelect(this.props.value);
-  }
-  //为了适应推屏中的MouseDown事件
+  };
+
+  // 为了适应推屏中的MouseDown事件
   static defaultProps = {
-    triggerMethod: 'onClick'
-  }
-  getStyle = () => {
-    return {
-      height: this.props.height,
-      lineHeight: this.props.height
-    }
-  }
+    triggerMethod: "onClick",
+  };
+
+  getStyle = () => ({
+    height: this.props.height,
+    lineHeight: this.props.height,
+  });
+
   render() {
-    const {triggerMethod, className} = this.props;
-    const select = {[triggerMethod]:this.handleSelect};
+    const { triggerMethod, className } = this.props;
+    const select = { [triggerMethod]: this.handleSelect };
     return (
-      <li className={`tita-common-selector-option ${className}`} {...select} style={{...this.getStyle()}}>{this.props.children}</li>
-    )
+      <li className={`tita-common-selector-option ${className}`} {...select} style={{ ...this.getStyle() }}>{this.props.children}</li>
+    );
   }
 }

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

@@ -4,10 +4,10 @@
  * @Last Modified by: mikey.zhaopeng
  * @Last Modified time: 2021-01-07 19:42:17
  */
-import React, { Component } from 'react';
-import Pop from '../pop';
-import Options from './Option';
-import './index.scss';
+import React, { Component } from "react";
+import Pop from "../pop";
+import Options from "./Option";
+import "./index.scss";
 
 export default class index extends Component {
   constructor(p) {
@@ -22,30 +22,32 @@ export default class index extends Component {
     }
 
     this.state = {
-      value: this.props.defaultValue === undefined ? '' : this.props.defaultValue,
+      value: this.props.defaultValue === undefined ? "" : this.props.defaultValue,
       focus: false,
     };
   }
+
   static defaultProps = {
     style: {
-      width: '100px !important', // NOTE IE11 下 width auto 不展示
-      height: '26px',
+      width: "100px !important", // NOTE IE11 下 width auto 不展示
+      height: "26px",
     },
-    toggle: 'click',
+    toggle: "click",
     data: [],
     disabled: false,
-    placeHolder: '',
+    placeHolder: "",
     wrapperHeight: 300,
-    adjustHeight: 54
+    adjustHeight: 54,
   };
+
   componentDidUpdate(newProps) {
     this.setWrapperScrollTop(newProps);
   }
 
-  setWrapperScrollTop = newProps => {
+  setWrapperScrollTop = (newProps) => {
     const value = newProps.value || -1;
-    let activeTimeIndex = newProps.data.findIndex(item => (item.value || item) == value);
-    let scrollTop = activeTimeIndex * 32 >= this.props.wrapperHeight ? activeTimeIndex * 32 - this.props.wrapperHeight + this.props.adjustHeight : 0;
+    const activeTimeIndex = newProps.data.findIndex((item) => (item.value || item) == value);
+    const scrollTop = activeTimeIndex * 32 >= this.props.wrapperHeight ? activeTimeIndex * 32 - this.props.wrapperHeight + this.props.adjustHeight : 0;
     // @ts-ignore
     if (this.refs.titaCommonCelectorWrapper) {
       this.refs.titaCommonCelectorWrapper.scrollTop = scrollTop;
@@ -53,20 +55,20 @@ export default class index extends Component {
   };
 
   getShowEventHandler = () => {
-    let handler = {};
+    const handler = {};
     switch (this.props.toggle) {
-      case 'click': {
+      case "click": {
         handler.onClick = this.showOptions;
         break;
       }
-      case 'hover': {
+      case "hover": {
         handler.onMouseOver = this.showOptions;
         break;
       }
-      case 'mousedonwn': {
+      case "mousedonwn": {
         handler.onMouseDown = this.showOptions;
       }
-      case 'mouseup': {
+      case "mouseup": {
         handler.onMouseUp = this.showOptions;
       }
       default: {
@@ -75,17 +77,19 @@ export default class index extends Component {
     }
     return handler;
   };
+
   getHideEventHandler = () => {
-    let handler = {};
+    const handler = {};
     switch (this.props.toggle) {
-      case 'mouseup':
-      case 'hover': {
+      case "mouseup":
+      case "hover": {
         handler.onMouseLeave = this.hideOptions;
         break;
       }
     }
     return handler;
   };
+
   getChildren = () => {
     const { height, width } = this.props.style;
     const { valueField, textField, value } = this.props;
@@ -93,41 +97,41 @@ export default class index extends Component {
     return this.props.data.map((item, index) => {
       const text = textField ? item[textField] : item;
       const value = valueField ? item[valueField] : item;
-      const trigger = { click: 'onClick', mousedonwn: 'onMouseDown', mouseup: 'onMouseUp' };
+      const trigger = { click: "onClick", mousedonwn: "onMouseDown", mouseup: "onMouseUp" };
       return (
-        <Options className={this.props.value == value ? 'active' : ''} style={{ width, height }} key={value} value={value} select={item} onSelect={this.handleSelect} triggerMethod={trigger[this.props.toggle]}>
+        <Options className={this.props.value == value ? "active" : ""} style={{ width, height }} key={value} value={value} select={item} onSelect={this.handleSelect} triggerMethod={trigger[this.props.toggle]}>
           {text}
         </Options>
       );
     });
   };
 
-  handleSelect = value => {
+  handleSelect = (value) => {
     if (!this.controled) {
       this.setState({
         value,
       });
     }
     this.hideOptions();
-    var { onSelect } = this.props;
+    const { onSelect } = this.props;
     onSelect && onSelect(value);
   };
+
   getSelected = () => {
     const { valueField } = this.props;
     if (!valueField) return this.getValue();
-    return this.props.data.filter(item => {
-      return item[valueField] == this.getValue();
-    })[0];
-  };
-  getValue = () => {
-    return this.controled ? this.props.value : this.state.value;
+    return this.props.data.filter((item) => item[valueField] == this.getValue())[0];
   };
+
+  getValue = () => (this.controled ? this.props.value : this.state.value);
+
   getText = () => {
     const { textField, placeHolder } = this.props;
     const selected = this.getSelected();
     if (!selected) return placeHolder;
     return textField ? selected[textField] : selected;
   };
+
   showOptions = () => {
     if (this.props.disabled) return;
     this.refs.options.show(this.refs.selector);
@@ -135,59 +139,65 @@ export default class index extends Component {
       focus: true,
     });
   };
+
   hideOptions = () => {
     this.refs.options.hide();
   };
+
   handleBlur = () => {
     this.setState({
       focus: false,
     });
   };
-  getToggle = type => {
-    let eventName = 'onClick';
-    let toggle = {};
-    if (this.props.toggle == 'hover') {
-      eventName = 'onMouseOver';
+
+  getToggle = (type) => {
+    let eventName = "onClick";
+    const toggle = {};
+    if (this.props.toggle == "hover") {
+      eventName = "onMouseOver";
       toggle.onMouseLeave = this.hideOptions;
     }
-    if (this.props.toggle == 'mousedonwn') {
-      (eventName = 'onMouseDown'), (toggle.onMouseDown = this.hideOptions);
+    if (this.props.toggle == "mousedonwn") {
+      (eventName = "onMouseDown"), (toggle.onMouseDown = this.hideOptions);
     }
-    if (this.props.toggle == 'mouseup') {
-      (eventName = 'onMouseUp'), (toggle.onMouseUp = this.hideOptions);
+    if (this.props.toggle == "mouseup") {
+      (eventName = "onMouseUp"), (toggle.onMouseUp = this.hideOptions);
     }
     toggle[eventName] = this.showOptions;
     return toggle;
   };
+
   render() {
-    const { className, disabled, type, containerStyle, container, title } = this.props;
-    let style = this.props.maxHeight
+    const {
+      className, disabled, type, containerStyle, container, title,
+    } = this.props;
+    const style = this.props.maxHeight
       ? {
-          overflow: 'auto',
-          maxHeight: this.props.maxHeight,
-        }
+        overflow: "auto",
+        maxHeight: this.props.maxHeight,
+      }
       : {};
     return (
-      <div className={type == 'old' ? 'tita-common-select-wrapper-o' : 'tita-common-select-wrapper'} style={containerStyle} {...this.getHideEventHandler()}>
+      <div className={type == "old" ? "tita-common-select-wrapper-o" : "tita-common-select-wrapper"} style={containerStyle} {...this.getHideEventHandler()}>
         <div
-          ref='selector'
-          style={{ ...(this.props.style || {}), ...{ backgroundColor: disabled ? '#f5f5f5' : this.props.dis ? '#4C5D68' : '#ffffff', cursor: disabled ? 'not-allowed' : 'pointer' } }}
-          className={`tita-common-select ${this.state.focus ? '' : 'tita-common-select-active'}`}
+          ref="selector"
+          style={{ ...(this.props.style || {}), ...{ backgroundColor: disabled ? "#f5f5f5" : this.props.dis ? "#4C5D68" : "#ffffff", cursor: disabled ? "not-allowed" : "pointer" } }}
+          className={`tita-common-select ${this.state.focus ? "" : "tita-common-select-active"}`}
           {...this.getShowEventHandler()}
         >
-          <div className='tita-select-text'>{title || this.getText()}</div>
-          <span className={`${type == 'old' ? 'tu-icon-sort-up' : 'tu-icon-arrow-up'} common-select-arrow`}></span>
+          <div className="tita-select-text">{title || this.getText()}</div>
+          <span className={`${type == "old" ? "tu-icon-sort-up" : "tu-icon-arrow-up"} common-select-arrow`} />
         </div>
-        <Pop ref='options' blurToHide={this.props.toggle !== 'hover'} transitionName='none-transition' onBeforeHide={this.handleBlur} container={container}>
+        <Pop ref="options" blurToHide={this.props.toggle !== "hover"} transitionName="none-transition" onBeforeHide={this.handleBlur} container={container}>
           <ul
             className={className}
-            ref='titaCommonCelectorWrapper'
+            ref="titaCommonCelectorWrapper"
             style={{ ...{ minWidth: this.props.style.width }, ...style }}
-            onClick={e => {
+            onClick={(e) => {
               e.stopPropagation();
               e.nativeEvent.stopImmediatePropagation();
             }}
-            onMouseDown={e => {
+            onMouseDown={(e) => {
               e.stopPropagation();
               e.nativeEvent.stopImmediatePropagation();
             }}

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

@@ -1,5 +1,8 @@
-import React, { PureComponent } from 'react'
-import { TabWrapper, TabContainer, ChildWrapper, ItemsWrapper, Item } from './style'
+import React, { PureComponent } from "react";
+import {
+  TabWrapper, TabContainer, ChildWrapper, ItemsWrapper, Item,
+} from "./style";
+
 interface TabOption {
   name: string
   component: any
@@ -13,51 +16,53 @@ interface Props {
 interface State {
   currentTab: string
 }
-export default class Tab extends PureComponent<Props,State> {
-  constructor(p:Props){
+export default class Tab extends PureComponent<Props, State> {
+  constructor(p:Props) {
     super(p);
     this.state = {
-      currentTab: this.props.options[0].name
-    }
+      currentTab: this.props.options[0].name,
+    };
   }
+
   handleClickTab = (name:string) => {
-    if(name == (this.props.currentTab || this.state.currentTab)) return;
-    const {onChange,currentTab} = this.props;
+    if (name == (this.props.currentTab || this.state.currentTab)) return;
+    const { onChange, currentTab } = this.props;
     onChange && onChange(name);
-    if(currentTab===undefined){
+    if (currentTab === undefined) {
       this.setState({
-        currentTab: name
-      })
+        currentTab: name,
+      });
     }
-  }
-  changeTab = this.handleClickTab
+  };
+
+  changeTab = this.handleClickTab;
+
   render() {
-    const {options} = this.props;
+    const { options } = this.props;
     const currentTab = this.props.currentTab || this.state.currentTab;
     return (
       <TabWrapper>
         <TabContainer>
           <ItemsWrapper>
             {
-              options.map(op => {
-                return (
-                  <Item active={op.name == currentTab} onMouseDown={()=>this.handleClickTab(op.name)}>
-                    {op.title}
-                  </Item>
-                )
-              })
+              options.map((op) => (
+                <Item active={op.name == currentTab} onMouseDown={() => this.handleClickTab(op.name)}>
+                  {op.title}
+                </Item>
+              ))
             }
           </ItemsWrapper>
         </TabContainer>
         {
-          <ChildWrapper >
+          <ChildWrapper>
             {
-              //@ts-ignore
-            options.find(op => op.name == currentTab).component }
+              // @ts-ignore
+            options.find((op) => op.name == currentTab).component
+}
           </ChildWrapper>
         }
-       
+
       </TabWrapper>
-    )
+    );
   }
 }

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

@@ -1,24 +1,25 @@
-import styled from 'styled-components'
+import styled from "styled-components";
+
 export const TabWrapper = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-`
+`;
 export const TabContainer = styled.div`
   height: 30px;
   margin: 5px 0 10px 0;
   border-bottom: 1px solid #E4EBF0;
-`
+`;
 export const ChildWrapper = styled.div`
   flex: 1;
   height: 0;
   overflow: hidden;
-`
+`;
 export const ItemsWrapper = styled.div`
   display: inline-block;
   position: relative;
   bottom: -1px;
-`
+`;
 export const Item = styled.div`
   height: 30px;
   line-height: 30px;
@@ -26,17 +27,17 @@ export const Item = styled.div`
   display: inline-block;
   font-size: 12px;
   cursor: pointer;
-  color: ${(p:any) => p.active? '#2879ff !important' : '#667580'};
+  color: ${(p:any) => (p.active ? "#2879ff !important" : "#667580")};
   max-width: 140px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   box-sizing: border-box;
-  ${(p:any) => p.active ? 'background: #FFF;':''}
-  border-top: 1px solid ${(p:any) => p.active ? '#E4EBF0' : 'transparent'};
-  border-right: 1px solid ${(p:any) => p.active ? '#E4EBF0' : 'transparent'};
-  border-left: 1px solid ${(p:any) => p.active ? '#E4EBF0' : 'transparent'};
+  ${(p:any) => (p.active ? "background: #FFF;" : "")}
+  border-top: 1px solid ${(p:any) => (p.active ? "#E4EBF0" : "transparent")};
+  border-right: 1px solid ${(p:any) => (p.active ? "#E4EBF0" : "transparent")};
+  border-left: 1px solid ${(p:any) => (p.active ? "#E4EBF0" : "transparent")};
   &:hover {
     color: #36434D;
   }
-`
+`;