@douyinfe/semi-ui 2.22.0-alpha.0 → 2.22.0-beta.1

package/lib/es/tabs/TabPaneTransition.js

@@ -1,103 +0,0 @@
-import _toInteger from "lodash/toInteger";
-
-/* eslint-disable react/destructuring-assignment */
-import React from 'react';
-import { Transition } from '@douyinfe/semi-animation-react';
-
-const TabPaneTransition = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const direction = props.direction ? 1 : -1;
-  const {
-    mode
-  } = props;
-  let {
-    motion
-  } = props;
-  const ratio = 60;
-
-  if (typeof motion === 'function') {
-    motion = motion(props);
-  } else if (!motion || typeof motion !== 'object') {
-    motion = {};
-  }
-
-  if (mode === 'vertical') {
-    return /*#__PURE__*/React.createElement(Transition, Object.assign({}, props, {
-      config: {
-        tension: 612,
-        friction: 32
-      },
-      from: {
-        translateY: direction * ratio,
-        opacity: 0
-      },
-      enter: {
-        translateY: 0,
-        opacity: {
-          val: 1,
-          duration: 200
-        }
-      },
-      leave: {
-        translateY: -1 * direction * ratio,
-        opacity: {
-          val: 0,
-          duration: 200
-        }
-      }
-    }, motion), typeof props.children === 'function' ? _ref => {
-      let {
-        translateY,
-        opacity
-      } = _ref;
-      // delete translateX in 0 in case of zIndex problems.
-      const finalState = _toInteger(translateY) === 0 ? {
-        opacity
-      } : {
-        transform: "translateY(".concat(_toInteger(translateY), "px)"),
-        opacity
-      };
-      return props.children(finalState);
-    } : props.children);
-  }
-
-  return /*#__PURE__*/React.createElement(Transition, Object.assign({}, props, {
-    config: {
-      tension: 612,
-      friction: 32
-    },
-    from: {
-      translateX: direction * ratio,
-      opacity: 0
-    },
-    enter: {
-      translateX: 0,
-      opacity: {
-        val: 1,
-        duration: 200
-      }
-    },
-    leave: {
-      translateX: -1 * direction * ratio,
-      opacity: {
-        val: 0,
-        duration: 200
-      }
-    }
-  }, motion), typeof props.children === 'function' ? _ref2 => {
-    let {
-      translateX,
-      opacity
-    } = _ref2;
-    // delete translateX in 0 in case of zIndex problems.
-    const finalState = _toInteger(translateX) === 0 ? {
-      opacity
-    } : {
-      transform: "translateX(".concat(_toInteger(translateX), "px)"),
-      opacity
-    };
-    return props.children(finalState);
-  } : props.children);
-};
-
-export default TabPaneTransition;

package/lib/es/toast/ToastTransition.d.ts

@@ -1,7 +0,0 @@
-import { Motion } from '../_base/base';
-import React from 'react';
-export interface ToastTransitionProps {
-    motion?: Motion<ToastTransitionProps>;
-    children?: React.ReactNode | ((TransitionProps: any) => any);
-}
-export default function ToastTransition(props?: ToastTransitionProps): JSX.Element;

package/lib/es/toast/ToastTransition.js

@@ -1,55 +0,0 @@
-// @ts-ignore  Currently there is no types for semi-animation-react
-import { Transition } from '@douyinfe/semi-animation-react';
-import React from 'react';
-export default function ToastTransition() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let {
-    motion = {}
-  } = props;
-
-  if (typeof motion === 'function') {
-    motion = motion(props);
-  } else if (!motion || typeof motion !== 'object') {
-    motion = {};
-  }
-
-  return /*#__PURE__*/React.createElement(Transition // onFrame={style => console.log(style)}
-  , Object.assign({
-    // onFrame={style => console.log(style)}
-    from: {
-      translateY: -100,
-      opacity: 0
-    },
-    enter: {
-      translateY: {
-        val: 0,
-        tension: 560,
-        friction: 32
-      },
-      opacity: {
-        val: 1,
-        duration: 300
-      }
-    },
-    leave: {
-      translateY: {
-        val: -100,
-        easing: 'easeOutCubic',
-        duration: 300
-      },
-      opacity: {
-        val: 0,
-        duration: 200
-      }
-    }
-  }, motion), typeof props.children === 'function' ? _ref => {
-    let {
-      translateY,
-      opacity
-    } = _ref;
-    return props.children({
-      transform: "translateY(".concat(translateY, "%)"),
-      opacity
-    });
-  } : props.children);
-}

package/lib/es/tooltip/TooltipStyledTransition.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Motion } from '../_base/base';
-export interface TooltipTransitionProps {
-    [key: string]: any;
-    children?: (arg: any) => React.ReactNode;
-    motion?: Motion<TooltipTransitionProps>;
-}
-declare const TooltipTransition: React.FC<TooltipTransitionProps>;
-export default TooltipTransition;

package/lib/es/tooltip/TooltipStyledTransition.js

@@ -1,38 +0,0 @@
-/* eslint-disable max-len */
-
-/* eslint-disable @typescript-eslint/no-shadow */
-import { StyledTransition } from '@douyinfe/semi-animation-react';
-import React from 'react';
-import { cssClasses } from '@douyinfe/semi-foundation/lib/es/tooltip/constants';
-import getMotionObjFromProps from '@douyinfe/semi-foundation/lib/es/utils/getMotionObjFromProps';
-const enterCls = "".concat(cssClasses.PREFIX, "-bounceIn");
-const leaveCls = "".concat(cssClasses.PREFIX, "-zoomOut");
-
-const TooltipTransition = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    children
-  } = props;
-  const motion = getMotionObjFromProps(props); //  add fillMode forwards to fix issue 715, tooltip close will flashing under react 18
-
-  return /*#__PURE__*/React.createElement(StyledTransition, Object.assign({}, props, {
-    enter: enterCls,
-    leave: leaveCls,
-    duration: '100ms'
-  }, motion, {
-    fillMode: 'forwards'
-  }), typeof children === 'function' ? _ref => {
-    let {
-      animateCls,
-      animateEvents,
-      animateStyle
-    } = _ref;
-    return children({
-      animateCls,
-      animateEvents,
-      animateStyle
-    });
-  } : children);
-};
-
-export default TooltipTransition;

package/lib/es/tree/collapse.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-export interface CollapseProps {
-    [x: string]: any;
-    motion?: boolean;
-    children?: React.ReactNode[];
-    duration?: number;
-    onMotionEnd?: () => void;
-    motionType?: string;
-}
-export interface TransitionStyle {
-    [x: string]: any;
-    maxHeight?: number;
-}
-declare const Collapse: {
-    (props: CollapseProps): JSX.Element;
-    propType: {
-        motion: PropTypes.Requireable<boolean | object>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        duration: PropTypes.Requireable<number>;
-        onMotionEnd: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    defaultProps: {
-        duration: number;
-        motion: boolean;
-        onMotionEnd: (...args: any[]) => void;
-    };
-};
-export default Collapse;

package/lib/es/tree/collapse.js

@@ -1,136 +0,0 @@
-import _noop from "lodash/noop";
-
-/* eslint-disable arrow-body-style */
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { Transition } from '@douyinfe/semi-animation-react';
-import PropTypes from 'prop-types';
-import { cssClasses } from '@douyinfe/semi-foundation/lib/es/collapsible/constants';
-import getMotionObjFromProps from '@douyinfe/semi-foundation/lib/es/utils/getMotionObjFromProps';
-const ease = 'cubicBezier(.25,.1,.25,1)';
-
-const Collapse = props => {
-  const {
-    motion,
-    children,
-    duration,
-    onMotionEnd,
-    motionType
-  } = props;
-  const ref = useRef(null);
-  const [maxHeight, setMaxHeight] = useState(0); // cache last state
-
-  const [open, setOpen] = useState(true);
-  const [left, setLeft] = useState(false);
-  const [immediateAttr, setImmediateAttr] = useState(false);
-  useEffect(() => {
-    if (motionType === 'enter') {
-      !open && setOpen(true);
-      left && setLeft(false);
-    } else if (motionType === 'leave') {
-      !open && setOpen(true);
-      !immediateAttr && setImmediateAttr(true);
-      left && setLeft(false);
-    }
-  }, [motionType]);
-  const setHeight = useCallback(node => {
-    const currHeight = node && node.scrollHeight;
-
-    if (currHeight && maxHeight !== currHeight) {
-      setMaxHeight(currHeight);
-    }
-  }, [left]);
-
-  const resetHeight = () => {
-    ref.current.style.maxHeight = 'none';
-  };
-
-  const formatStyle = style => {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    const {
-      maxHeight
-    } = style;
-    return {
-      maxHeight
-    };
-  };
-
-  const renderChildren = transitionStyle => {
-    const transition = transitionStyle && typeof transitionStyle === 'object' ? formatStyle(transitionStyle) : {};
-    const style = Object.assign({
-      overflow: 'hidden',
-      maxHeight: open ? 'none' : 0
-    }, transition);
-    return /*#__PURE__*/React.createElement("div", {
-      style: style,
-      className: "".concat(cssClasses.PREFIX, "-wrapper"),
-      ref: ref
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: setHeight
-    }, children));
-  };
-
-  const didLeave = () => {
-    setLeft(true);
-    setMaxHeight(0);
-    motionType === 'leave' && onMotionEnd();
-  };
-
-  const onImmediateEnter = () => {
-    open && setOpen(false);
-    setImmediateAttr(false);
-  };
-
-  const didEnter = () => {
-    resetHeight();
-    immediateAttr && onImmediateEnter();
-    motionType === 'enter' && onMotionEnd();
-  };
-
-  const renderContent = () => {
-    if (left) {
-      return null;
-    }
-
-    const mergeMotion = getMotionObjFromProps({
-      didEnter,
-      didLeave,
-      motion
-    });
-    return motion ? /*#__PURE__*/React.createElement(Transition, Object.assign({
-      state: open ? 'enter' : 'leave',
-      immediate: immediateAttr,
-      from: {
-        maxHeight: 0
-      },
-      enter: {
-        maxHeight: {
-          val: maxHeight,
-          easing: ease,
-          duration
-        }
-      },
-      leave: {
-        maxHeight: {
-          val: 0,
-          easing: ease,
-          duration
-        }
-      }
-    }, mergeMotion), transitionStyle => renderChildren(transitionStyle)) : renderChildren(null);
-  };
-
-  return renderContent();
-};
-
-Collapse.propType = {
-  motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
-  children: PropTypes.node,
-  duration: PropTypes.number,
-  onMotionEnd: PropTypes.func
-};
-Collapse.defaultProps = {
-  duration: 250,
-  motion: true,
-  onMotionEnd: _noop
-};
-export default Collapse;