@titaui/pc 1.9.48 → 1.9.49

package/src/components-v1/buttonv2/ButtonOutlined.tsx

@@ -1,7 +1,5 @@
-import React, { Component, ReactNode } from 'react';
-import { ButtonOutlinedWrapper } from './/style/style';
-
-
+import React, { Component, ReactNode } from "react";
+import { ButtonOutlinedWrapper } from "./style/style";
 
 interface Props {
   children: string | ReactNode;
@@ -10,15 +8,13 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-
-export class ButtonOutlined extends Component<Props,{}> {
+export class ButtonOutlined extends Component<Props, {}> {
   constructor(props:Props) {
     super(props);
   }
 
-  
   render() {
-    const {children,onClick} = this.props
+    const { children, onClick } = this.props;
     return (
       <ButtonOutlinedWrapper onClick={onClick}>
         {children}

package/src/components-v1/buttonv2/ButtonRounded.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode, Component } from 'react';
-import { ButtonRoundedStyled } from './style/style';
-import classNames from 'classnames';
+import React, { ReactNode, Component } from "react";
+import classNames from "classnames";
+import { ButtonRoundedStyled } from "./style/style";
 
 export interface RoundedBtnProps {
-  type?: 'primary' | 'secondary';
+  type?: "primary" | "secondary";
   floating?: boolean;
   disabled?: boolean;
   style?: React.CSSProperties;
@@ -27,16 +27,20 @@ export class ButtonRounded extends Component<RoundedBtnProps> {
     super(props);
     this.state = {};
   }
+
   handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
     const { onClick } = this.props;
     if (onClick) {
       (onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)(e);
     }
   };
+
   render() {
-    const { children, type, floating, disabled, style, gradient, className } = this.props;
+    const {
+      children, type, floating, disabled, style, gradient, className,
+    } = this.props;
     return (
-      <ButtonRoundedStyled className={classNames('tita-button-custom', className)} type={type} floating={floating} style={style} disabled={disabled} gradient={gradient} onMouseUp={this.handleClick}>
+      <ButtonRoundedStyled className={classNames("tita-button-custom", className)} type={type} floating={floating} style={style} disabled={disabled} gradient={gradient} onMouseUp={this.handleClick}>
         {children}
       </ButtonRoundedStyled>
     );

package/src/components-v1/buttonv2/DefaultButton.tsx

@@ -1,8 +1,9 @@
-import React, { Component } from 'react';
-import { TitaButton } from './style/style';
+import React, { Component } from "react";
+import { TitaButton } from "./style/style";
+
 interface ButtonSate {}
 export interface ButtonProps {
-  type?: 'primary' | 'secondary';
+  type?: "primary" | "secondary";
   floating?: boolean;
   disabled?: boolean;
   style?: React.CSSProperties;
@@ -14,16 +15,20 @@ export class Button extends Component<ButtonProps, ButtonSate> {
     super(props);
     this.state = {};
   }
+
   handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
     const { onClick } = this.props;
     if (onClick) {
       (onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)(e);
     }
   };
+
   render() {
-    const { children, type, floating, disabled, style } = this.props;
+    const {
+      children, type, floating, disabled, style,
+    } = this.props;
     return (
-      <TitaButton className='tita-button-custom' type={type} floating={floating} style={style} disabled={disabled} onMouseUp={this.handleClick}>
+      <TitaButton className="tita-button-custom" type={type} floating={floating} style={style} disabled={disabled} onMouseUp={this.handleClick}>
         {children}
       </TitaButton>
     );

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

@@ -1,5 +1,8 @@
-import { Button } from './DefaultButton';
-import { ButtonLinked } from './ButtonLinked';
-import { ButtonOutlined } from './ButtonOutlined';
-import { ButtonRounded } from './ButtonRounded';
-export { Button, ButtonLinked, ButtonOutlined, ButtonRounded };
+import { Button } from "./DefaultButton";
+import { ButtonLinked } from "./ButtonLinked";
+import { ButtonOutlined } from "./ButtonOutlined";
+import { ButtonRounded } from "./ButtonRounded";
+
+export {
+  Button, ButtonLinked, ButtonOutlined, ButtonRounded,
+};

package/src/components-v1/buttonv2/style/style.tsx

@@ -1,8 +1,9 @@
-import styled, { css } from 'styled-components';
-import { ButtonProps } from '../DefaultButton';
-import { RoundedBtnProps } from '../ButtonRounded';
-const primaryColor = '#2879FF';
-const secondaryColor = '#F0F2F5';
+import styled, { css } from "styled-components";
+import { ButtonProps } from "../DefaultButton";
+import { RoundedBtnProps } from "../ButtonRounded";
+
+const primaryColor = "#2879FF";
+const secondaryColor = "#F0F2F5";
 const CommonStyle = css`
   /* margin: 0 5px 0 0; */
   font-size: 13px;
@@ -26,11 +27,11 @@ export const TitaButton = styled.a.attrs((props: ButtonProps) => {
   // console.log(props);
 })`
   ${CommonStyle};
-  color: ${(props: ButtonProps) => (props.type === 'primary' ? '#fff' : '#BFC3C7')};
-  background-color: ${(props: ButtonProps) => (props.type === 'primary' ? primaryColor : secondaryColor)};
+  color: ${(props: ButtonProps) => (props.type === "primary" ? "#fff" : "#BFC3C7")};
+  background-color: ${(props: ButtonProps) => (props.type === "primary" ? primaryColor : secondaryColor)};
   &:hover {
-    color: ${(props: ButtonProps) => (props.type === 'primary' ? '#fff' : '#33383D')};
-    box-shadow: ${(props: ButtonProps) => (props.type === 'primary' ? ' 0 5px 8px 0 #C2E0FF' : '0 5px 8px 0 #E0E0E0')};
+    color: ${(props: ButtonProps) => (props.type === "primary" ? "#fff" : "#33383D")};
+    box-shadow: ${(props: ButtonProps) => (props.type === "primary" ? " 0 5px 8px 0 #C2E0FF" : "0 5px 8px 0 #E0E0E0")};
   }
   &:active {
     /* 点击按钮之后有一个效果 简单改 scale 有点肉 */
@@ -38,8 +39,8 @@ export const TitaButton = styled.a.attrs((props: ButtonProps) => {
   }
   &[disabled] {
     box-shadow: none;
-    color: ${(props: ButtonProps) => props.disabled && '#BFC3C7'};
-    background: ${(props: ButtonProps) => props.disabled && '#F0F2F5'};
+    color: ${(props: ButtonProps) => props.disabled && "#BFC3C7"};
+    background: ${(props: ButtonProps) => props.disabled && "#F0F2F5"};
   }
 `;
 
@@ -65,11 +66,11 @@ export const ButtonRoundedStyled = styled.a.attrs((props: RoundedBtnProps) => {
   color: #fff;
   border-radius: 50px;
   background-image: ${(p: RoundedBtnProps) => `linear-gradient(${p.gradient && p.gradient.deg}deg,${p.gradient && p.gradient.startColor},${p.gradient && p.gradient.endColor})`};
-  ${(p: RoundedBtnProps) => p.floating && 'box-shadow: 0 4px 10px 0 rgba(226, 156, 2, 0.3)'}
+  ${(p: RoundedBtnProps) => p.floating && "box-shadow: 0 4px 10px 0 rgba(226, 156, 2, 0.3)"}
 `;
 
 export const ButtonOutlinedWrapper = styled.div`
 background-color: #fff;
 border-radius: 25%;
 border: 1px solid #2879ff;
-`
+`;

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

@@ -1,9 +1,12 @@
-import React, { Component, RefObject, ReactNode, Fragment } from 'react';
-import Pop from '../pop';
-import suspend from '../pop/Pop';
-import styled from 'styled-components';
-import { Button } from '../buttonv2';
-import { getLocale } from '../../utils/getLocale';
+import React, {
+  Component, RefObject, ReactNode, Fragment,
+} from "react";
+import styled from "styled-components";
+import Pop from "../pop";
+import suspend from "../pop/Pop";
+import { Button } from "../buttonv2";
+import { getLocale } from "../../utils/getLocale";
+
 const ConfirmWrapper = styled.div`
   /* TODO padding 可动态调整 */
   width: 300px;
@@ -39,10 +42,12 @@ export default class Confirm extends Component<ConfirmProp, {}> {
     this.trigger = React.createRef();
     this.pop = React.createRef();
   }
+
   handleShowPop = () => {
     // @ts-ignore
     this.pop.current.show(this.trigger.current);
   };
+
   handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
     const { onCancel } = this.props;
     if (onCancel) {
@@ -53,52 +58,55 @@ export default class Confirm extends Component<ConfirmProp, {}> {
 
   handleOk = (e: React.MouseEvent<HTMLButtonElement>) => {
     const { onOk } = this.props;
-    //this.xxxx.getData()
+    // this.xxxx.getData()
     if (onOk) {
       onOk(e);
     }
   };
+
   renderFooter = () => {
     // 默认没有按钮, 支持设置按钮, 暂时不支持 数组类型按钮组
     const { footerContent } = this.props;
     return (
-      <Fragment>
-        {footerContent ? (
-          footerContent
-        ) : (
-            <FooterWrapper>
-              <div className='fr' style={{ float: 'right' }}>
-                <Button type='secondary' floating onClick={this.handleCancel} style={{ marginRight: 5 }}>
-                  {getLocale('Mod_Cancel')}
-              </Button>
-                <Button type='primary' floating onClick={this.handleOk}>
-                  {getLocale('OKR_MyO_Butt_Determine')}
-              </Button>
-              </div>
-            </FooterWrapper>
-          )}
-      </Fragment>
+      <>
+        {footerContent || (
+        <FooterWrapper>
+          <div className="fr" style={{ float: "right" }}>
+            <Button type="secondary" floating onClick={this.handleCancel} style={{ marginRight: 5 }}>
+              {getLocale("Mod_Cancel")}
+            </Button>
+            <Button type="primary" floating onClick={this.handleOk}>
+              {getLocale("OKR_MyO_Butt_Determine")}
+            </Button>
+          </div>
+        </FooterWrapper>
+        )}
+      </>
     );
   };
+
   hide = () => {
     // @ts-ignore
     this.pop.current.hide();
   };
+
   render() {
-    const { children, className, innerContent, blurToHide } = this.props;
+    const {
+      children, className, innerContent, blurToHide,
+    } = this.props;
     return (
-      <div className={className} onClick={e => e.stopPropagation()}>
+      <div className={className} onClick={(e) => e.stopPropagation()}>
         {/* 显示在里面的东西 */}
-        <div ref={this.trigger} onMouseDown={this.handleShowPop} style={{ cursor: 'pointer' }}>
+        <div ref={this.trigger} onMouseDown={this.handleShowPop} style={{ cursor: "pointer" }}>
           {innerContent}
         </div>
-        <Pop ref={this.pop} container={document.body} align='bottom left' cover blurToHide={blurToHide || false}>
+        <Pop ref={this.pop} container={document.body} align="bottom left" cover blurToHide={blurToHide || false}>
           <ConfirmWrapper>
-            <div className='confirm-content'>{children}</div>
+            <div className="confirm-content">{children}</div>
             {this.renderFooter()}
           </ConfirmWrapper>
         </Pop>
       </div>
     );
   }
-}
+}

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

@@ -1,21 +1,21 @@
 /*
- * @Author: lianghaosen 
- * @Date: 2018-12-03 15:49:28 
+ * @Author: lianghaosen
+ * @Date: 2018-12-03 15:49:28
  * @Last Modified by: lianghaosen
  * @Last Modified time: 2018-12-04 11:16:16
  */
 
-export function addClass(node,className){
-  node.className += ` ${className}`
+export function addClass(node, className) {
+  node.className += ` ${className}`;
 }
 export function removeClass(node, className) {
   const arr = className.split(/\s+/);
-  let nArr = node.className.split(/\s+/);
-  arr.forEach(a => {
-    let index = nArr.indexOf(a);
-    if(index !== -1){
-      nArr.splice(index,1)
+  const nArr = node.className.split(/\s+/);
+  arr.forEach((a) => {
+    const index = nArr.indexOf(a);
+    if (index !== -1) {
+      nArr.splice(index, 1);
     }
   });
-  node.className = nArr.join(' ')
-}
+  node.className = nArr.join(" ");
+}

package/src/components-v1/dropDownSelector/StatelessDropdown.tsx

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
-import { DropDownWrapper, DropDownContainer } from './styles';
-import classNames from 'classnames';
-import './styles/index.scss';
+import React, { Component } from "react";
+import classNames from "classnames";
+import { DropDownWrapper, DropDownContainer } from "./styles";
+import "./styles/index.scss";
 
 interface DropDownSelectorProps {
-  value?: string | number; //default value
+  value?: string | number; // default value
   className?: any;
   overlayClassName?: any;
   labelText?: string;
@@ -13,21 +13,21 @@ interface DropDownSelectorProps {
 export default class StatelessDropdown extends Component<DropDownSelectorProps, {}> {
   renderLabel = () => {
     if (this.props.labelText) {
-      return <span className='drop-down-label'>{this.props.labelText}</span>;
-    } else {
-      return '';
+      return <span className="drop-down-label">{this.props.labelText}</span>;
     }
+    return "";
   };
+
   render() {
     const { style, className, overlayClassName } = this.props;
     return (
       <DropDownWrapper>
         {this.renderLabel()}
-        <DropDownContainer className={classNames('tt-drop-down-wrapper', overlayClassName)} style={style}>
-          <span className={className} style={{ lineHeight: '17px', flexGrow: 1 }}>
+        <DropDownContainer className={classNames("tt-drop-down-wrapper", overlayClassName)} style={style}>
+          <span className={className} style={{ lineHeight: "17px", flexGrow: 1 }}>
             {this.props.children}
           </span>
-          <span className='tu-icon-arrow-down'></span>
+          <span className="tu-icon-arrow-down" />
         </DropDownContainer>
       </DropDownWrapper>
     );

package/src/components-v1/dropDownSelector/dropDownSelector.tsx

@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
-import classNames from 'classnames';
-import { DropDownWrapper, DropDownContainer } from './styles/index';
-import './styles/index.scss';
+import React, { Component } from "react";
+import classNames from "classnames";
+import { DropDownWrapper, DropDownContainer } from "./styles/index";
+import "./styles/index.scss";
 
 export interface Option {
   option: any; // 表面的数据
   value: any; // 背后的值
 }
 interface DropDownSelectorProps {
-  value?: string | number; //default value
+  value?: string | number; // default value
   option?: string | number;
   className?: any;
   overlayClassName?: any;
@@ -18,7 +18,7 @@ interface DropDownSelectorProps {
   onUpdateValue: (...arg: any[]) => any;
   onClick?: (...arg: any[]) => any;
   style?: React.CSSProperties;
-  direction?: 'up' | 'down';
+  direction?: "up" | "down";
 }
 interface DropDownSelectorState {
   showDropDown: boolean;
@@ -31,17 +31,21 @@ export default class DropDownSelector extends Component<DropDownSelectorProps, D
       showDropDown: false,
     };
   }
+
   static defalutProps = {
-    direction: 'down'
-  }
+    direction: "down",
+  };
+
   ulRef: HTMLUListElement | null;
+
   liRefs: (HTMLLIElement | null)[] = [];
+
   scrollToSelected = () => {
     const { options, value } = this.props;
 
-    const index = options.findIndex(o => o.value == value);
+    const index = options.findIndex((o) => o.value == value);
     if (index == 0 || index == -1) return;
-    let liRef = this.liRefs[index];
+    const liRef = this.liRefs[index];
     // FIXME 首次加载的时候 liRef 的 offsetHeight = 0
     // 但是选中在打开就又好了
     if (!this.ulRef || !liRef) return;
@@ -53,6 +57,7 @@ export default class DropDownSelector extends Component<DropDownSelectorProps, D
       this.ulRef.scrollTop = h;
     }
   };
+
   handleShowDropDown = () => {
     if (!this.state.showDropDown) {
       this.scrollToSelected();
@@ -60,35 +65,39 @@ export default class DropDownSelector extends Component<DropDownSelectorProps, D
     this.setState({ showDropDown: !this.state.showDropDown });
     this.props.onClick && this.props.onClick();
   };
+
   renderLabel = () => {
     if (this.props.labelText && this.props.labelText.length > 0) {
-      return <span className='drop-down-label'>{this.props.labelText}</span>;
-    } else {
-      return this.props.hasEmptyLabel && <span className='empty-holder'></span>;
+      return <span className="drop-down-label">{this.props.labelText}</span>;
     }
+    return this.props.hasEmptyLabel && <span className="empty-holder" />;
   };
+
   handleBlur = () => {
     // IE11 直接就 onBlur 了 跟 Chrome不一样
     setTimeout(() => {
       this.setState({ showDropDown: false });
     }, 200);
   };
+
   render() {
-    const { options, option, style, className, overlayClassName, direction } = this.props;
+    const {
+      options, option, style, className, overlayClassName, direction,
+    } = this.props;
     const { showDropDown } = this.state;
     return (
       <DropDownWrapper>
         {this.renderLabel()}
-        <DropDownContainer className={classNames('tt-drop-down-wrapper', overlayClassName)} style={style} onClick={this.handleShowDropDown} tabIndex={0} onBlur={this.handleBlur}>
-          <span className={className} style={{ lineHeight: '17px' }}>
+        <DropDownContainer className={classNames("tt-drop-down-wrapper", overlayClassName)} style={style} onClick={this.handleShowDropDown} tabIndex={0} onBlur={this.handleBlur}>
+          <span className={className} style={{ lineHeight: "17px" }}>
             {option}
           </span>
-          <span className={classNames('tu-icon-arrow-down', showDropDown && 'dropdown-active')}></span>
-          <div className={classNames('options-wrapper', showDropDown ? 'show-dropdown' : 'hide-dropdown')} style={direction == 'up' ? { top: 'auto', bottom: '116%' } : {}}>
+          <span className={classNames("tu-icon-arrow-down", showDropDown && "dropdown-active")} />
+          <div className={classNames("options-wrapper", showDropDown ? "show-dropdown" : "hide-dropdown")} style={direction == "up" ? { top: "auto", bottom: "116%" } : {}}>
             {/* 貌似可以用 input  */}
-            <ul ref={r => (this.ulRef = r)}>
+            <ul ref={(r) => (this.ulRef = r)}>
               {options.map(({ option, value }, index) => (
-                <li className='option' style={value === this.props.value ? { backgroundColor: '#f5f8fa' } : {}} key={index} ref={r => (this.liRefs[index] = r)} onClick={() => this.props.onUpdateValue({ value, option })}>
+                <li className="option" style={value === this.props.value ? { backgroundColor: "#f5f8fa" } : {}} key={index} ref={(r) => (this.liRefs[index] = r)} onClick={() => this.props.onUpdateValue({ value, option })}>
                   {option}
                 </li>
               ))}

package/src/components-v1/dropDownSelector/styles/index.tsx

@@ -1,4 +1,5 @@
-import styled from 'styled-components';
+import styled from "styled-components";
+
 export const DropDownContainer = styled.span`
   flex: 1;
   /* margin: 0 0 15px; */

package/src/components-v1/input/Input.tsx

@@ -1,7 +1,9 @@
-import React, { Component, ReactNode } from 'react';
-import classNames from 'classnames';
-import { InputInner, InputContent, Inputs, SuffixIcon } from './style';
-import { KeyCode } from './Enums';
+import React, { Component, ReactNode } from "react";
+import classNames from "classnames";
+import {
+  InputInner, InputContent, Inputs, SuffixIcon,
+} from "./style";
+import { KeyCode } from "./Enums";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLElement> {
   onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
@@ -16,7 +18,7 @@ interface InputState {
   value: any;
   focused: boolean;
 }
-export type SizeType = 'small' | 'middle' | 'large' | undefined;
+export type SizeType = "small" | "middle" | "large" | undefined;
 /**
  *
  * @param prefixCls
@@ -27,10 +29,10 @@ export type SizeType = 'small' | 'middle' | 'large' | undefined;
  */
 export function getInputClassName(prefixCls: string, size?: SizeType, disabled?: boolean, direction?: any) {
   return classNames(prefixCls, {
-    [`${prefixCls}-sm`]: size === 'small',
-    [`${prefixCls}-lg`]: size === 'large',
+    [`${prefixCls}-sm`]: size === "small",
+    [`${prefixCls}-lg`]: size === "large",
     [`${prefixCls}-disabled`]: disabled,
-    [`${prefixCls}-rtl`]: direction === 'rtl',
+    [`${prefixCls}-rtl`]: direction === "rtl",
   });
 }
 
@@ -42,29 +44,34 @@ export default class Input extends Component<InputProps, InputState> {
     const value = typeof props.value === undefined ? props.defaultValue : props.value;
     this.state = { value, focused: false };
   }
-  onFocus: React.FocusEventHandler<HTMLInputElement> = e => {
+
+  onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
     const { onFocus } = this.props;
     this.setState({ focused: true });
     if (onFocus) {
       onFocus(e);
     }
   };
-  onBlur: React.FocusEventHandler<HTMLInputElement> = e => {
+
+  onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
     const { onBlur } = this.props;
     this.setState({ focused: false });
     if (onBlur) {
       onBlur(e);
     }
   };
+
   setValue(value: string, callback?: () => void) {
     if (this.props.value === undefined) {
       this.setState({ value }, callback);
     }
   }
+
   handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setValue(e.target.value);
     this.props.onChange && this.props.onChange(e);
   };
+
   handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const { onPressEnter, onKeyDown } = this.props;
     if (e.keyCode === KeyCode.ENTER && onPressEnter) {
@@ -74,26 +81,28 @@ export default class Input extends Component<InputProps, InputState> {
       onKeyDown(e);
     }
   };
-  renderPrefix = () => {
+
+  renderPrefix = () =>
     // 用TuIcon组件
-    return this.props.prefixIcon;
-  };
-  renderSuffix = () => {
-    return this.props.suffixIcon && <SuffixIcon>{this.props.suffixIcon}</SuffixIcon>;
-  };
+    this.props.prefixIcon;
+
+  renderSuffix = () => this.props.suffixIcon && <SuffixIcon>{this.props.suffixIcon}</SuffixIcon>;
+
   render() {
     const { focused } = this.state;
-    const { className, style, placeholder, isDirty, id, ...restProps } = this.props;
+    const {
+      className, style, placeholder, isDirty, id, ...restProps
+    } = this.props;
     return (
       <InputContent className={className} style={style}>
         {this.renderPrefix()}
-        <InputInner className={classNames('tita-input-inner', focused && !isDirty && 'tita-input-inner-focused', isDirty && 'tita-input-haserror')} isDirty={isDirty}>
+        <InputInner className={classNames("tita-input-inner", focused && !isDirty && "tita-input-inner-focused", isDirty && "tita-input-haserror")} isDirty={isDirty}>
           {!this.props.value && (
-            <label htmlFor={id} className='placeholder'>
+            <label htmlFor={id} className="placeholder">
               {placeholder}
             </label>
           )}
-          <Inputs type='text'  autoComplete={'off'} id={id} {...restProps} value={this.props.value} onChange={this.handleChange} onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.handleKeyDown} />
+          <Inputs type="text" autoComplete="off" id={id} {...restProps} value={this.props.value} onChange={this.handleChange} onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.handleKeyDown} />
         </InputInner>
         {this.renderSuffix()}
       </InputContent>