@titaui/pc 1.7.45 → 1.7.49

package/src/components/word-cloud/index.js

@@ -1,56 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import WordCloud from 'wordcloud';
-import classNames from 'classnames';
-import { getWords } from './request-apis';
-
-import './index.scss';
-
-export default props => {
-  const { async = true, 'list': dataList } = props;
-
-  const canvas = useRef();
-  const [isShow, setIsShow] = useState(false);
-  const [list, setList] = useState([]);
-
-  useEffect(() => {
-    if (!list.length) return;
-    setIsShow(true);
-    WordCloud(canvas.current, eval({
-      "list": list,
-      "gridSize": 6,                // 密集程度 数字越小越密集
-      "weightFactor": 1,            // 字体大小=原始大小*weightFactor
-      "maxFontSize": 60,            // 最大字号
-      "minFontSize": 14,            // 最小字号
-      "fontWeight": 'normal',       // 字体粗细
-      "fontFamily": 'PingFang SC',  // 字体
-      "color": 'random-light',      // 字体颜色 'random-dark' 或者 'random-light'
-      "backgroundColor": 'white',   // 背景颜色
-      "rotateRatio": 0,             // 字体倾斜(旋转)概率，1代表总是倾斜(旋转)
-      'drawOutOfBound': false,
-    }));
-  }, [list]);
-
-  useEffect(() => {
-    if (async) {
-      getWords().then(words => {
-        if (words.Data && words.Data.length) {
-          const list = words.Data.map(it => [it.text, it.value / 1000000]);
-          setList(list);
-        }
-      })
-    } else {
-      setList(dataList);
-    }
-  }, []);
-
-  return <React.Fragment>
-    <div
-      id="titaui-d3-cloud"
-      style={{ 'display': isShow ? 'unset' : 'none' }}
-      className={classNames('titaui-wordcloud')}
-    >
-      <div className={classNames('titaui-wordcloud__title')}>企业关注热点</div>
-      <canvas ref={canvas} id="worldcloud-titaui-home-canvas" width="235" height="223"></canvas>
-    </div>
-  </React.Fragment>
-}

package/src/components/word-cloud/index.scss

@@ -1,23 +0,0 @@
-
-.titaui-wordcloud__dialog {
-}
-
-.titaui-wordcloud {
-  cursor: pointer;
-  border-radius: 6px;
-  margin: 10px 0 20px 0;
-
-  &__title {
-    font-size: 16px;
-    font-weight: 400;
-    color: #0a131a;
-    padding-left: 10px;
-    margin-bottom: 10px;
-    line-height: 46px;
-    font-family: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STHeitiSC, sans-serif;
-  }
-
-  #worldcloud-titaui-home-canvas {
-    border-radius: 50%;
-  }
-}

package/src/components/word-cloud/request-apis.js

@@ -1,16 +0,0 @@
-import axios from 'axios';
-
-const tenantId = BSGlobal && BSGlobal.tenantInfo.Id || 0;
-const userId = BSGlobal && BSGlobal.loginUserInfo.Id || 0;
-
-const requestDomain = () => {
-  if (!window.location.hostname.match(/dev/)) return '';
-  return 'http://www.tita.gift'
-};
-
-export const getWords = () => {
-  return axios.get(`${requestDomain()}/api/v1/${tenantId}/${userId}/wordCloud/get?num=250`)
-    .then(words => {
-      return words.data;
-    })
-}

package/src/components-v1/animate/AnimateChild.js

@@ -1,28 +0,0 @@
-/*
- * @Author: lianghaosen 
- * @Date: 2018-12-04 17:26:45 
- * @Last Modified by: lianghaosen
- * @Last Modified time: 2018-12-04 18:00:19
- */
-import React, { Component } from 'react'
-
-import {findDOMNode} from 'react-dom'
-import doAnimate from '../utils/animate/animate'
-
-export default class AnimateChild extends Component {
-  componentWillEnter = done => {
-    this.transition('enter',done)
-  }
-  componentWillLeave = done => {
-    this.transition('leave',done)
-  }
-  transition = (animationType,done) => {
-    let name = typeof this.props.transitionName == 'object' ? this.props.transitionName[animationType] : `${this.props.transitionName}-${animationType}`
-    doAnimate(findDOMNode(this),name,done)
-  }
-  render() {
-    return (
-      this.props.children
-    )
-  }
-}

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

@@ -1,79 +0,0 @@
-/*
- * @Author: lianghaosen 
- * @Date: 2018-12-03 16:35:53 
- * @Last Modified by: lianghaosen
- * @Last Modified time: 2018-12-05 11:06:17
- */
-import React, { Component } from 'react'
-import AnimateChild from './AnimateChild'
-export default class animate extends Component {
-  constructor(props){
-    super(props);
-    this.childRef = React.createRef();
-    this.state = {
-      children: props.children
-    }
-    
-  }
-  componentWillReceiveProps(nextProp){
-    const prevProps = this.props;
-    const isWillShow = !! nextProp.children;
-    const isAlreadyShow = !! prevProps.children;
-    if(isWillShow){
-      this.setState({
-        children: nextProp.children
-      })
-    }
-    if(isWillShow === isAlreadyShow) {
-      return;
-    }
-    this.animationType = isWillShow ? 'Enter' : 'Leave'
-  }
-  componentDidUpdate(){
-    if(this.animationType){
-      this.refs.child[`componentWill${this.animationType}`]({
-        start: this[`will${this.animationType}`],
-        end:this[`${this.animationType.toLowerCase()}IsDone`]
-      })
-      this.animationType = null;
-    }
-  }
-  willEnter = () => {
-    const {onEnter} = this.props;
-    if(typeof onEnter !== 'object') {
-      return;
-    }
-    onEnter.start && onEnter.start();
-  }
-  willLeave = () => {
-    const {onLeave} = this.props;
-    if(typeof onLeave !== 'object') {
-      return;
-    }
-    onLeave.start && onLeave.start();
-  }
-  enterIsDone = () => {
-    const {onEnter} = this.props;
-    let end = onEnter;
-    if(typeof onEnter == 'object') {
-      end = onEnter.end;
-    }
-    end && end();
-  }
-  leaveIsDone = () => {
-    const {onLeave} = this.props;
-    let end = onLeave;
-    if(typeof onLeave == 'object') {
-      end = onLeave.end;
-    }
-    this.setState({
-      children: this.props.children
-    })
-    end && end();
-  }
-  render() {
-    return (
-      <AnimateChild transitionName={this.props.transitionName} ref="child">{this.state.children}</AnimateChild>
-    )
-  }
-}

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

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

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

@@ -1,158 +0,0 @@
-import React, { PureComponent } from 'react';
-import { Wrapper, TextAvatar } from './styles';
-import { getBSGlobal, getUserInfo } from '../../utils/bs-global';
-import { isPlatform, OpenUserName } from '../../utils/open-data';
-interface Props {
-  src?: string;
-  name: string;
-  color: string;
-  size: Size;
-  userId?: number;
-  linkToProfile?: boolean;
-}
-interface Size {
-  width: number;
-  textNum: number;
-  fontSize: number;
-}
-interface State {}
-export default class Avatar extends PureComponent<Props, State> {
-  static defaultProps = {
-    size: 'small',
-  };
-  static size = (type: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11): Size => {
-    switch (type) {
-      case 1:
-        return {
-          width: 150,
-          textNum: 5,
-          fontSize: 24,
-        };
-      case 2:
-        return {
-          width: 130,
-          textNum: 5,
-          fontSize: 22,
-        };
-
-      case 3:
-        return {
-          width: 100,
-          textNum: 4,
-          fontSize: 20,
-        };
-      case 4:
-        return {
-          width: 80,
-          textNum: 4,
-          fontSize: 16,
-        };
-      case 5:
-        return {
-          width: 50,
-          textNum: 3,
-          fontSize: 12,
-        };
-      case 6:
-        return {
-          width: 30,
-          textNum: 1,
-          fontSize: 12,
-        };
-      case 7:
-        return {
-          width: 26,
-          textNum: 1,
-          fontSize: 12,
-        };
-      case 8: // 魔改一下
-        return {
-          width: 28,
-          textNum: 1,
-          fontSize: 12,
-        };
-      case 9:
-        return {
-          width: 36,
-          textNum: 1,
-          fontSize: 12,
-        };
-      case 10:
-        return {
-          width: 33,
-          textNum: 1,
-          fontSize: 12,
-        };
-      case 11:
-        return {
-          width: 56,
-          textNum: 1,
-          fontSize: 12,
-        };
-      default:
-        return {
-          width: 30,
-          textNum: 1,
-          fontSize: 12,
-        };
-    }
-  };
-  renderImgAvatar = () => {
-    const { src } = this.props;
-    return <img style={{ width: '100%', height: '100%' }} src={src} />;
-  };
-  renderTextAvatar = () => {
-    const { size, color, name, userId } = this.props;
-    if (isPlatform('wx'))
-      return (
-        <TextAvatar height={size.width} background={color}>
-          <span
-            style={{
-              display: 'inline-block',
-              width: size.fontSize + 'px',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
-              fontSize: size.fontSize + 'px',
-              lineHeight: size.width + 'px',
-            }}
-          >
-            <OpenUserName name={name} id={userId} />
-          </span>
-        </TextAvatar>
-      );
-    let cuttedName = '';
-    let cuttedNameLen = 0;
-    for (let i = 0, lent = name.length; i < lent; i++) {
-      let len = 1;
-      name[i].match(/[0-9a-z]/) && (len = 0.6);
-      if (cuttedNameLen + len > size.textNum) break;
-      cuttedNameLen += len;
-      cuttedName += name[i];
-    }
-
-    return (
-      <TextAvatar height={size.width} background={color}>
-        {cuttedName}
-      </TextAvatar>
-    );
-  };
-  render() {
-    const { size, src, userId, linkToProfile } = this.props;
-    const hasAvatar = src && !src.match(/default\w*.jpg$/);
-    const avatarContent = hasAvatar ? this.renderImgAvatar() : this.renderTextAvatar();
-    if (linkToProfile) {
-      const iframeBoxUrl = `${getBSGlobal('apiPath')}/u/${getUserInfo().Id}/Home#`;
-      return (
-        <a
-          target='_blank'
-          href={`${iframeBoxUrl}${encodeURIComponent(
-            'widget/italent?iTalentFrameType=iframe&iTalentNavId=&iTalentFrame=' + encodeURIComponent(getBSGlobal('titaHost') + '/' + getUserInfo().Id + '/UpaasPortalPlus#/medalwall?targetTabIndex=0&toUserId=' + userId),
-          )}`}
-        >
-          <Wrapper size={size.width}>{avatarContent}</Wrapper>
-        </a>
-      );
-    }
-    return <Wrapper size={size.width}>{avatarContent}</Wrapper>;
-  }
-}

package/src/components-v1/avatar/styles.ts

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-export const Wrapper = styled.div<any>`
-  display: inline-block;
-  width: ${(p: any) => p.size}px;
-  height: ${(p: any) => p.size}px;
-  border-radius: 50%;
-  overflow: hidden;
-  position: relative; /* MARK: mask 相对点 */
-`;
-export const TextAvatar = styled.div<any>`
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  line-height: ${(props: any) => props.height}px;
-  background-color: ${(props: any) => props.background};
-  color: #fff;
-  font-size: 12px;
-`;

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

@@ -1,25 +0,0 @@
-import React, { ReactNode } from 'react';
-import styled from 'styled-components';
-import classNames from 'classnames';
-import './style/theme.scss';
-const LinkedButtonWrapper = styled.a`
-  font-size: 14px;
-  user-select: select none;
-  font-family: 'Microsoft YaHei', 'PingFang SC';
-  &:hover {
-  }
-`;
-interface P {
-  children: string | ReactNode;
-  onClick?: (...args: any[]) => any;
-  className?: string;
-  style?: React.CSSProperties;
-}
-export function ButtonLinked({ children, onClick, className, style }: P) {
-  // 类似于链接，只不过有一个hover效果
-  return (
-    <LinkedButtonWrapper className={classNames(className, 'tita-linked-button')} style={style} onClick={onClick}>
-      {children}
-    </LinkedButtonWrapper>
-  );
-}

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

@@ -1,28 +0,0 @@
-import React, { Component, ReactNode } from 'react';
-import { ButtonOutlinedWrapper } from './/style/style';
-
-
-
-interface Props {
-  children: string | ReactNode;
-  onClick?: (...args: any[]) => any;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-
-export class ButtonOutlined extends Component<Props,{}> {
-  constructor(props:Props) {
-    super(props);
-  }
-
-  
-  render() {
-    const {children,onClick} = this.props
-    return (
-      <ButtonOutlinedWrapper onClick={onClick}>
-        {children}
-      </ButtonOutlinedWrapper>
-    );
-  }
-}

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

@@ -1,44 +0,0 @@
-import React, { ReactNode, Component } from 'react';
-import { ButtonRoundedStyled } from './style/style';
-import classNames from 'classnames';
-
-export interface RoundedBtnProps {
-  type?: 'primary' | 'secondary';
-  floating?: boolean;
-  disabled?: boolean;
-  style?: React.CSSProperties;
-  onClick?: React.MouseEventHandler<HTMLElement>;
-  children: ReactNode;
-  gradient?: { deg: number; startColor: string; endColor: string };
-  className?: any;
-}
-// const buttonStyle = {
-//   padding: '6px 16px',
-//   fontSize: '16px',
-//   backgroundImage: 'linear-gradient(90deg, #FFD513 2%, #FFB10B 100%)',
-//   boxShadow: '0 4px 10px 0 rgba(226,156,2,0.30)',
-//   borderRadius: '20px',
-//   color: '#FFFFFF',
-//   display: 'none',
-// };
-
-export class ButtonRounded extends Component<RoundedBtnProps> {
-  constructor(props: 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;
-    return (
-      <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,31 +0,0 @@
-import React, { Component } from 'react';
-import { TitaButton } from './style/style';
-interface ButtonSate {}
-export interface ButtonProps {
-  type?: 'primary' | 'secondary';
-  floating?: boolean;
-  disabled?: boolean;
-  style?: React.CSSProperties;
-  onClick?: React.MouseEventHandler<HTMLElement>;
-}
-// TODO: 这个组件抽出来只做位最基础的功能用，外面可以套上不同的壳子
-export class Button extends Component<ButtonProps, ButtonSate> {
-  constructor(props: ButtonProps) {
-    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;
-    return (
-      <TitaButton className='tita-button-custom' type={type} floating={floating} style={style} disabled={disabled} onMouseUp={this.handleClick}>
-        {children}
-      </TitaButton>
-    );
-  }
-}

package/src/components-v1/buttonv2/NOTE.md

@@ -1,7 +0,0 @@
-## 设想
-
-TODO： 目前颜色规范还没有定出来，不过可以参考 materialize 的[颜色定义](https://materializecss.com/color.html)
-
-​	首先是按钮全部都需要继承自一个基本按钮组件，基础按钮组件将多样的 props 分发给下面的各种组件，条件渲染。这样子的话，入口永远就是 Button 一个，但是实现方式却不一样.
-​	每次写一种类型都需要重新写 interface 好麻烦啊， 能不能用 HOC 重新包装一下，这样就通过 Props 参数定义， 反正到头来都是 Button ，只不过就是样式不一样罢了，行为都是一样的。
-

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

@@ -1,5 +0,0 @@
-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,75 +0,0 @@
-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;
-  font-family: 'Microsoft YaHei', sans-serif, 'PingFang SC';
-  padding: 4px 15px;
-  line-height: 24px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  display: inline-block;
-  user-select: none;
-  text-align: center;
-  letter-spacing: 0.5;
-  &:focus {
-    outline: none;
-  }
-  transition: all 300ms ease-in-out;
-`;
-
-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)};
-  &: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')};
-  }
-  &:active {
-    /* 点击按钮之后有一个效果 简单改 scale 有点肉 */
-    transform: scale(0.98);
-  }
-  &[disabled] {
-    box-shadow: none;
-    color: ${(props: ButtonProps) => props.disabled && '#BFC3C7'};
-    background: ${(props: ButtonProps) => props.disabled && '#F0F2F5'};
-  }
-`;
-
-const commonBtn = css`
-  padding: 5px 15px;
-  font-size: 14px;
-  line-height: normal;
-  transition: all 300ms ease-in-out;
-  user-select: none;
-`;
-export const ButtonRoundedStyled = styled.a.attrs((props: RoundedBtnProps) => {
-  // console.log('ButtonRoundedStyled', props);
-})`
-  &:hover {
-    color: #fff;
-  }
-  ${commonBtn}
-  &:active {
-    transform: scale(0.98);
-  }
-  white-space: nowrap;
-  font-family: 'Microsoft YaHei', sans-serif, 'PingFang SC';
-  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)'}
-`;
-
-export const ButtonOutlinedWrapper = styled.div`
-background-color: #fff;
-border-radius: 25%;
-border: 1px solid #2879ff;
-`

package/src/components-v1/buttonv2/style/theme.scss

@@ -1,8 +0,0 @@
-// 颜色库
-// 参考 https://materializecss.com/color.html
-// 后期如果 tita 有自己的颜色规范库，就在这里把颜色规范全都列出来
-// 如果是 字体的颜色  tita-color-text
-// 如果是背景颜色 tita-color-bg
-.tita-color-text-gold {
-  color: #feb927;
-}