@titaui/pc 1.7.45 → 1.7.49

package/src/components-v1/placement/placement.js

@@ -1,53 +0,0 @@
-/*
- * @Author: lianghaosen
- * @Date: 2018-12-04 11:45:12
- * @Last Modified by: lianghaosen
- * @Last Modified time: 2021-06-04 16:56:01
- */
-import React, { Component } from 'react';
-import ReactDom from 'react-dom';
-import PlacementInner from './placementInner';
-export default class Placement extends Component {
-  constructor(props) {
-    super(props);
-    this.container = props.container ||  document.body;
-    this.wrapper = document.createElement('div');
-    this.wrapper.style.cssText += ';position:absolute;top:0;left:0;z-index:2000';
-    this.wrapper.setAttribute('data-uId', this.props.uid);
-    this.container.appendChild(this.wrapper);
-  }
-  static defaultProps = {
-    align: 'bottom',
-    autoAdjust: 'x y',
-  };
-  componentDidMount() {}
-  getEl = () => {
-    return this.wrapper;
-  };
-  resetPosition = () => {
-    this.el.caculPosition();
-  };
-  render() {
-    let children = (
-      <PlacementInner
-        autoAdjust={this.props.autoAdjust}
-        className={this.props.className}
-        style={this.props.style}
-        ref={rl => {
-          this.el = rl;
-        }}
-        container={this.container}
-        align={this.props.align}
-        getBindNode={this.props.getBindNode}
-        dragCls={this.props.dragCls}
-        cover={this.props.cover}
-      >
-        {this.props.children}
-      </PlacementInner>
-    );
-    return ReactDom.createPortal(children, this.wrapper);
-  }
-  componentWillUnmount() {
-    this.wrapper.parentNode && this.wrapper.parentNode.removeChild(this.wrapper);
-  }
-}

package/src/components-v1/placement/placementInner.js

@@ -1,73 +0,0 @@
-/*
- * @Author: lianghaosen
- * @Date: 2018-12-04 14:11:38
- * @Last Modified by: lianghaosen
- * @Last Modified time: 2021-06-04 16:56:16
- */
-import React, { Component } from 'react';
-import { findDOMNode } from 'react-dom';
-
-import setPlacement from '../utils/placement/placement';
-
-export default class placementInner extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      position: {},
-    };
-  }
-  dragging = false;
-  startDragPos = {};
-  startPos = {};
-  el;
-  componentDidMount() {
-    this.caculPosition();
-  }
-  caculPosition = () => {
-    let el = findDOMNode(this);
-    const res = setPlacement(el, this.props.container, this.props.align, this.props.getBindNode(), this.props.autoAdjust, this.props.cover);
-    if (res.adjust.x || res.adjust.y) {
-      this.props.onAdjust && this.props.onAdjust(res.adjust);
-    }
-    el.style.top = res.placement.top + 'px';
-    el.style.left = res.placement.left + 'px';
-  };
-  handleDragStart = (e) => {
-    const {dragCls} = this.props;
-    if(!dragCls || e.target.className.indexOf(dragCls)==-1) return false;
-    let el = findDOMNode(this);
-    this.dragging = true;
-    this.startDragPos={
-      top: e.screenY,
-      left: e.screenX
-    }
-    this.startPos = {
-      top: el.style.top.replace('px','') - 0,
-      left: el.style.left.replace('px','') - 0
-    }
-  }
-  handleDragging = (e) => {
-    const {dragCls} = this.props;
-    if(!dragCls|| !this.dragging) return;
-    let el = findDOMNode(this);
-    let top = el.style.top.replace('px','') - 0;
-    let left = el.style.left.replace('px','') - 0;
-    el.style.top = this.startPos.top + (e.screenY - this.startDragPos.top) + 'px';
-    el.style.left = this.startPos.left + (e.screenX - this.startDragPos.left) + 'px'
-  }
-  render() {
-    const { style } = this.props;
-    return (
-      <div
-       ref='wrapper' 
-       className={this.props.className + " document-mouse-event-ignore"} 
-       style={{ ...{ zIndex: 9999, position: 'absolute' }, ...style }} 
-       onMouseDown={this.handleDragStart} 
-       onMouseMove={this.handleDragging} 
-       onMouseLeave={()=>this.dragging = false} 
-       onMouseUp={()=>this.dragging=false}>
-        {this.props.children}
-      </div>
-    );
-  }
-}

package/src/components-v1/pop/Pop.js

@@ -1,127 +0,0 @@
-import React, { Component } from 'react';
-
-import ReactDom, { findDOMNode } from 'react-dom';
-
-import { v1 } from 'uuid';
-
-import Animate from '../animate';
-import Placement from '../placement';
-
-import PopInner from './PopInner';
-import './index.scss';
-
-export default class suspend extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false,
-    };
-    this.innerRef = React.createRef();
-    this.popId = `t-pop-${v1()}`;
-  }
-
-  static defaultProps = {
-    align: 'bottom',
-    autoAdjust: 'x y',
-    blurToHide: true,
-  };
-  resetPosition = () => {
-    this.refs.inner.resetPosition();
-  };
-  render() {
-    const { onBeforeShow, onAfterShow } = this.props;
-    let children = this.state.visible && (
-      <Placement
-        ref='inner'
-        autoAdjust={this.props.autoAdjust}
-        container={this.props.container}
-        style={this.props.style}
-        className={this.props.className || 'tita-common-pop'}
-        align={this.props.align}
-        uid={this.popId}
-        cover={this.props.cover}
-        dragCls={this.props.dragCls}
-        getBindNode={this.getBindNode}
-      >
-        {this.props.children}
-      </Placement>
-    );
-    return [
-      <Animate key={`body-${this.popId}`} onEnter={{ start: onBeforeShow, end: onAfterShow }} transitionName={this.props.transitionName || 'tita-common-pop'} onLeave={{ start: this.props.onBeforeHide }}>
-        {children}
-      </Animate>,
-      // <div style={{ display: 'block' }} key={`noop-${this.popId}`}></div>, //  这空div是干啥的？？？
-    ];
-  }
-
-  componentDidMount = () => {
-    findDOMNode(this) && findDOMNode(this).parentNode.setAttribute('data-tita-pop', this.popId);
-  };
-  getBindNode = () => {
-    return this.state.bindNode;
-  };
-
-  componentDidUpdate() {
-    if (this.props.blurToHide) {
-      this.state.visible ? this.bindBlurHandle() : this.clearBlurHandle();
-    }
-  }
-
-  bindBlurHandle = () => {
-    //给document绑定事件，实现点击弹框以外区域隐藏弹框
-    if (this.blurHandler) return;
-    this.blurHandler = window.document.addEventListener('mousedown', this.handleBlur);
-  };
-  handleBlur = e => {
-    const { shouldHide, hideing } = this.props;
-    const el = this.refs.inner.getEl();
-    if (shouldHide && !shouldHide(e, el)) {
-      return;
-    }
-    if (!shouldHide) {
-      if (el.contains(e.target)) return;
-      let popArr = document.querySelectorAll(`[data-uid=${this.popId}] [data-tita-pop]`);
-      for (let pcEl of popArr) {
-        let popEl = document.querySelector(`[data-uid=${pcEl.getAttribute('data-tita-pop')}]`);
-        if (popEl && popEl.contains(e.target)) return;
-      }
-    }
-    let titaPopWrappers = document.getElementsByClassName('titaui-popup');
-    for(let titaPopEl of titaPopWrappers) {
-      if(titaPopEl && titaPopEl.contains(e.target)) return;
-    }
-    let noShadowPops = document.querySelectorAll('.tita-common-pop-no-shadow');
-    for(let titaPopEl of noShadowPops) {
-      if(titaPopEl && titaPopEl.contains(e.target)) return;
-    }
-    hideing && hideing(e, false)
-    this.setState({
-      visible: false,
-    });
-  };
-  show = bindNode => {
-    //提供给父组件调用，用于显示弹框
-    this.setState({
-      visible: true,
-      bindNode,
-    });
-  };
-  hide = () => {
-    //提供给父组件调用，用于显示隐藏弹框
-    this.setState({
-      visible: false,
-    });
-  };
-  clearBlurHandle = () => {
-    //清除事件
-    window.document.removeEventListener('mousedown', this.handleBlur);
-    this.blurHandler = null;
-  };
-
-  componentWillUnmount() {
-    this.clearBlurHandle();
-    this.blurHandler = null;
-  }
-
-  isVisible = () => this.state.visible;
-}

package/src/components-v1/pop/PopInner.js

@@ -1,93 +0,0 @@
-import React, { Component } from 'react'
-
-export default class PopInner extends Component {
-  constructor(props){
-    super(props)
-    this.state = {
-      visibility: 'hidden',
-      position:{}
-    }
-  }
-  componentDidMount(){
-    this.setState({
-      visibility: 'visible',
-      position: this.caculPosition()
-    })
-  }
-  caculPosition = () => {
-    if(!this.props.bindNode){
-      throw new error('需要传入bindNode')
-    }
-    let position = {};
-    //container距视窗左上角的位置
-    let containerOffset = this.props.container.getBoundingClientRect()
-    //node距离视窗左上角的位置
-    let nodeOffset = this.props.bindNode.getBoundingClientRect();
-    //bindNode距container左上角的位置
-    let nodeScrollOffset = {
-      top: this.props.container.scrollTop + nodeOffset.top - containerOffset.top,
-      left: this.props.container.scrollLeft + nodeOffset.left - containerOffset.left,
-      bottom: this.props.container.scrollTop + nodeOffset.top - containerOffset.top + nodeOffset.height,
-      right: this.props.container.scrollLeft + nodeOffset.left - containerOffset.left + nodeOffset.width
-    };
-    //pop的宽高
-    let popSize = this.refs.wrapper.getBoundingClientRect();
-    let positionType = this.props.position.split(/\s+/)
-    //确定pop的位置需要pop的宽高 bindNode相对视窗左上角的位置 bindNode相对container左上角的位置 
-    //其中bindNode相对container左上角的位置 = bindNode相对视窗左上角的位置 - container相对视窗左上角的位置 + container的滚动距离
-    //是否需要自动调整pop的位置
-    let autoX = this.props.autoAdjust == 'x' || this.props.autoAdjust == 'x y';
-    let autoY = this.props.autoAdjust == 'y' || this.props.autoAdjust == 'x y';
-    //确定显示在bindNode的上方还是下方
-    if(positionType[0] === 'top'){
-      //优先出现在bindNode顶部 顶部空间不够则出现在底部
-      if(!autoY || nodeOffset.top - (containerOffset.top < 0 ? 0 : containerOffset.top) >= popSize.height){
-        position.top = nodeScrollOffset.top - popSize.height + 'px'
-      }else {
-        position.top = nodeScrollOffset.bottom + 'px'
-      }
-    }else {
-      //优先出现在bindNode底部 底部空间不够则出现在顶部
-      if(!autoY || containerOffset.bottom >= nodeOffset.bottom + popSize.height){
-        position.top = nodeScrollOffset.bottom + 'px'
-      }else {
-        position.top = nodeScrollOffset.top - popSize.height + 'px'
-      }
-    }
-    //确定横向的位置
-    if(positionType[1] == 'right') {
-      //container中bindNode右侧的空间大于pop的宽度则将左边框对其bindNode的左边框
-      if(!autoX || containerOffset.right - nodeOffset.right >= popSize.width){
-        position.left = nodeScrollOffset.left + 'px'
-      }else {
-        //否则贴在右侧
-        position.left = containerOffset.right - containerOffset.left - popSize.width + 'px'
-      }
-    }else if(positionType[1] == 'left') {
-      if(!autoX || nodeOffset.right - (containerOffset.left < 0 ? 0 : containerOffset.left) >= popSize.width){
-        position.left = nodeScrollOffset.right - popSize.width + 'px'
-      }else {
-        position.left = this.props.container.scrollLeft + 'px'
-      }
-    }else {
-      //优先剧中
-      if(!autoX || containerOffset.right - nodeOffset.right >= (popSize.width - nodeOffset.width)/2){
-        position.left = nodeScrollOffset.left - (popSize.width - nodeOffset.width)/2 + 'px'
-      }else {
-        position.left = containerOffset.right - containerOffset.left - popSize.width + 'px'
-      }
-      if(autoX && nodeOffset.right - (containerOffset.left < 0 ? 0 : containerOffset.left) < (popSize.width + nodeOffset.width)/2){
-        position.left = this.props.container.scrollLeft + 'px'
-      }
-    }
-    
-    return position;
-  }
-  render() {
-    return (
-      <div ref="wrapper" style={{zIndex:9999,visibility: this.state.visibility,position:'absolute',...this.state.position}}>
-        {this.props.children}
-      </div>
-    )
-  }
-}

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

@@ -1,2 +0,0 @@
-import Pop from './Pop'
-export default Pop;

package/src/components-v1/pop/index.scss

@@ -1,26 +0,0 @@
-.tita-common-pop {
-  padding: 0 !important;
-  z-index: 999999 !important;
-  // border: 1px solid #dedede;
-  border-radius: 4px;
-  box-shadow: 0px 4px 12px 0px rgba(127,145,180,0.2);
-  font-size: 12px;
-  background-color: #fff;
-  &-enter {
-    opacity: 0;
-    &-active {
-      opacity: 1;
-      transition: opacity 0.5s ease;
-    }
-  }
-  &-leave {
-    opacity: 1;
-    &-active {
-      opacity: 0;
-      transition: opacity 0.5s ease;
-    }
-  }
-}
-.tita-common-pop-no-shadow {
-  box-shadow: none;
-}

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

@@ -1,226 +0,0 @@
-import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
-import Pop from "../pop";
-import { Button } from 'tita-ui';
-import { ButtonGroup, Wrapper } from './style';
-type TriggerType = "hover" | "click";
-type Aligns =
-  | "top"
-  | "top left"
-  | "top right"
-  | "right"
-  | "right top"
-  | "right bottom"
-  | "bottom"
-  | "bottom left"
-  | "bottom right"
-  | "left"
-  | "left top"
-  | "left bottom";
-export interface IPopConfirmProps {
-  align?: Aligns;
-  arrowSize?: number;
-  autoHide?: boolean;
-  className?: string;
-  children: any;
-  container?: HTMLElement;
-  content?: any;
-  duration?: number;
-  onCancel?: Function;
-  onConfirm?: Function;
-  showArrow?: boolean;
-  style?: React.CSSProperties;
-  title?: string;
-  trigger?: TriggerType;
-}
-
-function fillRef<T>(ref: React.Ref<T>, node: T) {
-  if (typeof ref === 'function') {
-    ref(node);
-  } else if (typeof ref === 'object' && ref && 'current' in ref) {
-    (ref as any).current = node;
-  }
-}
-function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
-  return (node: T) => {
-    refs.forEach(ref => {
-      fillRef(ref, node);
-    });
-  };
-}
-
-const PopConfirm = forwardRef(({
-  align = "bottom",
-  arrowSize,
-  autoHide,
-  children,
-  className,
-  container,
-  content,
-  duration,
-  onCancel,
-  onConfirm,
-  showArrow,
-  style,
-  title,
-  trigger,
-}: IPopConfirmProps, ref) => {
-  const child = React.Children.only(children) as React.ReactElement;
-  const [position, setPosition] = useState({
-    top: '-4px',
-    left: '50%'
-  })
-  const popRef = useRef<any>() as React.MutableRefObject<any>;
-  const triggerRef = useRef();
-
-  useImperativeHandle(ref, () => ({
-    getRef: () => popRef.current,
-  }));
-
-  let timer = () => {
-    setTimeout(() => {
-      popRef.current.hide();
-    }, duration);
-  }
-
-  const mouseLeave = () => {
-    if (autoHide) {
-      setTimeout(() => {
-        timer && timer();
-      }, duration);
-    }
-  }
-
-  let tirggerElement = child;
-  if (trigger == "click") {
-    tirggerElement = React.cloneElement(child, {
-      ref: composeRef(triggerRef, (child as any).ref),
-      onClick: e => {
-        e.stopPropagation()
-        popRef.current.show(triggerRef.current);
-      },
-    });
-  } else if (trigger == "hover") {
-    tirggerElement = React.cloneElement(child, {
-      ref: composeRef(triggerRef, (child as any).ref),
-      onMouseEnter: () => {
-        popRef.current.show(triggerRef.current);
-      },
-      onMouseLeave: mouseLeave,
-    });
-  }
-
-  useEffect(() => {
-    if (showArrow) {
-      setPosition(setPlacement(align))
-    }
-  }, [])
-
-  const setPlacement = (align: Aligns) => {
-    let pos = {
-      top: `-${(arrowSize as number) / 2}px`,
-      left: '50%'
-    }
-    switch (align) {
-      case 'top':
-        pos = {
-          top: `calc(100% - ${(arrowSize as number) / 2}px)`,
-          left: '50%'
-        };
-        break;
-      case 'top left':
-        pos = {
-          top: `calc(100% - ${(arrowSize as number) / 2}px)`,
-          left: '15%'
-        };
-        break;
-      case 'top right':
-        pos = {
-          top: `calc(100% - ${(arrowSize as number) / 2}px)`,
-          left: '80%'
-        };
-        break;
-      case 'bottom':
-        pos = {
-          top: `-${(arrowSize as number) / 2}px`,
-          left: '50%'
-        };
-        break;
-      case 'bottom left':
-        pos = {
-          top: `-${(arrowSize as number) / 2}px`,
-          left: '15%'
-        };
-        break;
-      case 'bottom right':
-        pos = {
-          top: `-${(arrowSize as number) / 2}px`,
-          left: '80%'
-        };
-        break;
-    }
-    return pos;
-  }
-
-  const defaultContent = (
-    <div>
-      <p style={{
-        color: '#1F2329'
-      }}>{title}</p>
-      <ButtonGroup>
-        <Button onClick={() => {
-          onCancel && onCancel();
-          popRef.current.hide();
-        }}>取消</Button>
-        <Button type="primary" onClick={() => {
-          onConfirm && onConfirm();
-        }}>确定</Button>
-      </ButtonGroup>
-    </div>
-  )
-  return (
-    <>
-      <Pop
-        align={align}
-        className="tita-common-pop-no-shadow"
-        container={container}
-        cover
-        ref={popRef}
-      >
-        <Wrapper
-          arrowSize={arrowSize}
-          className={className}
-          position={position}
-          showArrow={showArrow}
-          style={style}
-          onMouseEnter={() => {
-            // @ts-ignore
-            timer = function () { console.log('mouse enter') };
-          }}
-          onMouseLeave={() => {
-            if (autoHide) {
-              // @ts-ignore
-              timer = function () {
-                setTimeout(() => {
-                  popRef.current.hide();
-                }, duration);
-              }
-              // @ts-ignore
-              popRef.current.hide();
-            }
-          }}
-        >
-          {content || defaultContent}
-        </Wrapper>
-      </Pop>
-      {tirggerElement}
-    </>
-  );
-})
-PopConfirm.defaultProps = {
-  align: "bottom",
-  arrowSize: 8,
-  autoHide: false,
-  showArrow: true,
-  trigger: "click",
-};
-export default PopConfirm;

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

@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
-    padding: 16px 20px;
-    border-radius: 4px;
-    box-shadow: 0px 0px 28px 0px rgba(31,35,41,0.11); 
-    background: #ffffff;
-    position: relative;
-
-    ::after {
-        content: '';
-        width: ${(p: any) => p.arrowSize + 'px'};
-        height: ${(p: any) => p.arrowSize + 'px'};
-        border-radius: 2px;
-        background: #ffffff;
-        display: block;
-        visibility: ${(p: any) => p.showArrow ? 'visible' : 'hidden'};
-        position: absolute;
-        top: ${(p: any) => p.position.top};
-        left: ${(p: any) => p.position.left};
-        transform: ${(p: any) => p.position.left == '50%' ? 'translateX(-50%) rotate(45deg)' : 'rotate(45deg)'};
-        border-left: 1px solid #f0f2f5;
-        border-top: 1px solid #f0f2f5;
-    }
-`;
-export const ButtonGroup = styled.div`
-    margin-top: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    button {
-        min-width: 58px !important;
-        height: 30px !important;
-        margin-left: 10px;
-        white-space: nowrap;
-    }
-`;

package/src/components-v1/portals/Portals.tsx

@@ -1,41 +0,0 @@
-import { PureComponent } from 'react'
-import ReactDOM from 'react-dom'
-
-interface Props {
-  domNode?: string // 挂载组件节点
-  className?: string // 挂载点class
-}
-
-const appRoot = document.body
-
-export default class Portals extends PureComponent<Props> {
-  el: HTMLDivElement;
-  constructor(props: Props) {
-    super(props);
-    this.el = document.createElement('div')
-  }
-
-  componentWillMount() {
-    const { domNode, className } = this.props
-    this.el.setAttribute('class',`document-mouse-event-ignore ${className||''}`)
-    setTimeout(() => {
-      // @ts-ignore
-      domNode ? document.getElementById(domNode) && document.getElementById(domNode).appendChild(this.el) : appRoot.appendChild(this.el)
-    }, 5)
-  }
-
-  componentWillUnmount() {
-    const { domNode } = this.props
-    setTimeout(() => {
-      // @ts-ignore
-      domNode ? document.getElementById(domNode) && document.getElementById(domNode).removeChild(this.el) : appRoot.removeChild(this.el)
-    }, 5)
-  }
-
-  render() {
-    return ReactDOM.createPortal(
-      this.props.children,
-      this.el,
-    )
-  }
-}