@titaui/pc 1.9.49 → 1.9.50

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,29 +98,25 @@ 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) {
@@ -129,33 +125,30 @@ 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,34 +1,33 @@
 /*
- * @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 = () => ({
-    height: this.props.height,
-    lineHeight: this.props.height,
-  });
-
+    triggerMethod: 'onClick'
+  }
+  getStyle = () => {
+    return {
+      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,32 +22,30 @@ 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;
-    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;
+    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;
     // @ts-ignore
     if (this.refs.titaCommonCelectorWrapper) {
       this.refs.titaCommonCelectorWrapper.scrollTop = scrollTop;
@@ -55,20 +53,20 @@ export default class index extends Component {
   };
 
   getShowEventHandler = () => {
-    const handler = {};
+    let 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: {
@@ -77,19 +75,17 @@ export default class index extends Component {
     }
     return handler;
   };
-
   getHideEventHandler = () => {
-    const handler = {};
+    let 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;
@@ -97,41 +93,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();
-    const { onSelect } = this.props;
+    var { onSelect } = this.props;
     onSelect && onSelect(value);
   };
-
   getSelected = () => {
     const { valueField } = this.props;
     if (!valueField) return this.getValue();
-    return this.props.data.filter((item) => item[valueField] == this.getValue())[0];
+    return this.props.data.filter(item => {
+      return item[valueField] == this.getValue();
+    })[0];
+  };
+  getValue = () => {
+    return this.controled ? this.props.value : this.state.value;
   };
-
-  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);
@@ -139,65 +135,59 @@ export default class index extends Component {
       focus: true,
     });
   };
-
   hideOptions = () => {
     this.refs.options.hide();
   };
-
   handleBlur = () => {
     this.setState({
       focus: false,
     });
   };
-
-  getToggle = (type) => {
-    let eventName = "onClick";
-    const toggle = {};
-    if (this.props.toggle == "hover") {
-      eventName = "onMouseOver";
+  getToggle = type => {
+    let eventName = 'onClick';
+    let 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;
-    const style = this.props.maxHeight
+    const { className, disabled, type, containerStyle, container, title } = this.props;
+    let 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`} />
+          <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>
-        <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,8 +1,5 @@
-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
@@ -16,53 +13,51 @@ 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) => (
-                <Item active={op.name == currentTab} onMouseDown={() => this.handleClickTab(op.name)}>
-                  {op.title}
-                </Item>
-              ))
+              options.map(op => {
+                return (
+                  <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,25 +1,24 @@
-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;
@@ -27,17 +26,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;
   }
-`;
+`