@douyinfe/semi-ui 2.22.0-beta.0 → 2.22.0-beta.2

package/lib/cjs/tree/collapse.js

@@ -1,155 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _semiAnimationReact = require("@douyinfe/semi-animation-react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/collapsible/constants");
-
-var _getMotionObjFromProps = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getMotionObjFromProps"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable arrow-body-style */
-const ease = 'cubicBezier(.25,.1,.25,1)';
-
-const Collapse = props => {
-  const {
-    motion,
-    children,
-    duration,
-    onMotionEnd,
-    motionType
-  } = props;
-  const ref = (0, _react.useRef)(null);
-  const [maxHeight, setMaxHeight] = (0, _react.useState)(0); // cache last state
-
-  const [open, setOpen] = (0, _react.useState)(true);
-  const [left, setLeft] = (0, _react.useState)(false);
-  const [immediateAttr, setImmediateAttr] = (0, _react.useState)(false);
-  (0, _react.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 = (0, _react.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.default.createElement("div", {
-      style: style,
-      className: "".concat(_constants.cssClasses.PREFIX, "-wrapper"),
-      ref: ref
-    }, /*#__PURE__*/_react.default.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 = (0, _getMotionObjFromProps.default)({
-      didEnter,
-      didLeave,
-      motion
-    });
-    return motion ? /*#__PURE__*/_react.default.createElement(_semiAnimationReact.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.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
-  children: _propTypes.default.node,
-  duration: _propTypes.default.number,
-  onMotionEnd: _propTypes.default.func
-};
-Collapse.defaultProps = {
-  duration: 250,
-  motion: true,
-  onMotionEnd: _noop2.default
-};
-var _default = Collapse;
-exports.default = _default;

package/lib/es/motions/Rotate.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-export interface TransitionStyle {
-    rotate?: number;
-}
-export interface OpenIconTransitionProps {
-    isOpen?: boolean;
-    children?: React.ReactNode;
-    enterDeg?: number;
-    fromDeg?: number;
-    duration?: number;
-}
-declare function OpenIconTransition(props?: OpenIconTransitionProps): React.ReactElement;
-declare namespace OpenIconTransition {
-    var propTypes: {
-        isOpen: PropTypes.Validator<boolean>;
-        children: PropTypes.Validator<any>;
-        enterDeg: PropTypes.Requireable<number>;
-        fromDeg: PropTypes.Requireable<number>;
-        duration: PropTypes.Requireable<number>;
-    };
-}
-export default OpenIconTransition;

package/lib/es/motions/Rotate.js

@@ -1,60 +0,0 @@
-import React, { useEffect, useState, Children, cloneElement, isValidElement } from 'react';
-import { Transition } from '@douyinfe/semi-animation-react';
-import PropTypes from 'prop-types';
-
-const formatStyle = function formatStyle(_ref) {
-  let {
-    rotate = 0
-  } = _ref;
-  return {
-    transform: "rotate(".concat(rotate, "deg)")
-  };
-};
-
-function OpenIconTransition() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    children,
-    isOpen,
-    enterDeg = 180,
-    fromDeg = 0,
-    duration = 150
-  } = props;
-  const [immediate, setImmediate] = useState(true);
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-implied-eval
-    setImmediate(false);
-  }, [isOpen]);
-  return /*#__PURE__*/React.createElement(Transition, {
-    immediate: immediate,
-    state: isOpen ? 'enter' : 'leave',
-    from: {
-      rotate: fromDeg
-    },
-    enter: {
-      rotate: {
-        val: enterDeg,
-        duration,
-        easing: 'cubic-bezier(.62, .05, .36, .95)'
-      }
-    },
-    leave: {
-      rotate: {
-        val: fromDeg,
-        duration,
-        easing: 'cubic-bezier(.62, .05, .36, .95)'
-      }
-    }
-  }, transitionStyle => Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, Object.assign(Object.assign({}, child.props), {
-    style: Object.assign(Object.assign({}, child.props.style), formatStyle(transitionStyle))
-  })) : child));
-}
-
-OpenIconTransition.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  children: PropTypes.any.isRequired,
-  enterDeg: PropTypes.number,
-  fromDeg: PropTypes.number,
-  duration: PropTypes.number
-};
-export default OpenIconTransition;

package/lib/es/navigation/SubNavTransition.d.ts

@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Motion } from '@douyinfe/semi-foundation/lib/es/utils/type';
-export interface SubNavTransitionProps {
-    children?: React.ReactNode | ((transitionProps?: any) => React.ReactNode);
-    isCollapsed?: boolean;
-    maxHeight?: number;
-    motion?: Motion;
-}
-declare function SubNavTransition(props?: SubNavTransitionProps): JSX.Element;
-declare namespace SubNavTransition {
-    var propTypes: {
-        children: PropTypes.Requireable<any>;
-        isCollapsed: PropTypes.Requireable<boolean>;
-    };
-}
-export default SubNavTransition;

package/lib/es/navigation/SubNavTransition.js

@@ -1,66 +0,0 @@
-import { Transition } from '@douyinfe/semi-animation-react';
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-const ease = 'cubicBezier(.25,.1,.25,1)';
-
-const formatStyle = function formatStyle(_ref) {
-  let {
-    maxHeight,
-    opacity
-  } = _ref;
-  return {
-    maxHeight,
-    opacity
-  };
-};
-
-function SubNavTransition() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    children,
-    isCollapsed,
-    maxHeight = 999
-  } = props; // eslint-disable-next-line no-unused-vars
-
-  const [immediate, setImmediate] = useState(false); // useEffect(() => {
-  //     setImmediate(isCollapsed);
-  // }, [isCollapsed]);
-
-  return /*#__PURE__*/React.createElement(Transition, {
-    from: {
-      maxHeight: 0,
-      opacity: 0
-    },
-    enter: {
-      maxHeight: {
-        val: maxHeight,
-        easing: 'easeInQuad',
-        duration: 250
-      },
-      opacity: {
-        val: 1,
-        duration: 200,
-        easing: 'cubic-bezier(0.5, -0.1, 1, 0.4)'
-      }
-    },
-    leave: {
-      maxHeight: {
-        val: 0,
-        easing: ease,
-        duration: 250
-      },
-      opacity: {
-        val: 0,
-        duration: isCollapsed ? 1 : 200,
-        easing: 'cubic-bezier(0.5, -0.1, 1, 0.4)'
-      }
-    },
-    immediate: immediate
-  }, typeof children === 'function' ? transitionStyle => children(formatStyle(transitionStyle)) : children);
-}
-
-SubNavTransition.propTypes = {
-  children: PropTypes.any,
-  isCollapsed: PropTypes.bool
-};
-export default SubNavTransition;

package/lib/es/notification/NoticeTransition.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { NoticePosition } from '@douyinfe/semi-foundation/lib/es/notification/notificationFoundation';
-import { Motion } from '../_base/base';
-export declare type ArgsType<T> = T extends (...args: infer A) => any ? A : never;
-export interface NoticeTransitionProps {
-    position?: NoticePosition;
-    motion?: Motion<NoticeTransitionProps>;
-    children?: React.ReactNode | ((TransitionProps?: any) => React.ReactNode);
-}
-export default function NoticeTransition(props?: NoticeTransitionProps): JSX.Element;

package/lib/es/notification/NoticeTransition.js

@@ -1,74 +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 NoticeTransition() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let {
-    motion = {}
-  } = props;
-  const {
-    position = 'topRight'
-  } = props;
-
-  const formatStyle = function formatStyle(_ref) {
-    let {
-      translate,
-      opacity
-    } = _ref;
-    let transform = "translateX(".concat(translate, "%)");
-
-    if (position && typeof position === 'string') {
-      if (/left/i.test(position)) {
-        transform = "translateX(".concat(-translate, "%)");
-      } else if (/right/i.test(position)) {
-        transform = "translateX(".concat(translate, "%)");
-      } else if (/top/i.test(position)) {
-        transform = "translateY(".concat(-translate, "%)");
-      } else {
-        transform = "translateY(".concat(translate, "%)");
-      }
-    }
-
-    return {
-      transform,
-      opacity
-    };
-  };
-
-  if (typeof motion === 'function') {
-    motion = motion(props);
-  } else if (!motion || typeof motion !== 'object') {
-    motion = {};
-  }
-
-  return /*#__PURE__*/React.createElement(Transition // onFrame={style => console.log(formatStyle(style))}
-  , Object.assign({
-    // onFrame={style => console.log(formatStyle(style))}
-    from: {
-      translate: 100,
-      opacity: 0
-    },
-    enter: {
-      translate: {
-        val: 0,
-        tension: 560,
-        friction: 32
-      },
-      opacity: {
-        val: 1,
-        duration: 200
-      }
-    },
-    leave: {
-      translate: {
-        val: 100,
-        easing: 'easeOutCubic',
-        duration: 300
-      },
-      opacity: {
-        val: 0,
-        duration: 200
-      }
-    }
-  }, motion), typeof props.children === 'function' ? transitionStyle => props.children(formatStyle(transitionStyle)) : props.children);
-}

package/lib/es/sideSheet/SideSheetTransition.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Motion } from '../_base/base';
-export interface SideSheetTransitionProps {
-    children?: React.ReactNode | ((TransitionProps: any) => React.ReactNode);
-    motion?: Motion<SideSheetTransitionProps>;
-    controlled?: boolean;
-    visible?: boolean;
-    placement?: 'left' | 'top' | 'right' | 'bottom';
-}
-export default class SideSheetTransition extends React.PureComponent<SideSheetTransitionProps> {
-    render(): JSX.Element;
-}

package/lib/es/sideSheet/SideSheetTransition.js

@@ -1,102 +0,0 @@
-// @ts-ignore  Currently there is no types definition for semi-animation-react;
-import { Transition } from '@douyinfe/semi-animation-react';
-import React from 'react'; // eslint-disable-next-line max-len
-
-const formatStyles = function formatStyles() {
-  let styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const {
-    placement
-  } = props;
-  const {
-    translate
-  } = styles;
-  const {
-    opacity
-  } = styles;
-  let transform = '';
-
-  switch (placement) {
-    case 'left':
-      transform = "translateX(-".concat(translate, "%)");
-      break;
-
-    case 'top':
-      transform = "translateY(-".concat(translate, "%)");
-      break;
-
-    case 'right':
-      transform = "translateX(".concat(translate, "%)");
-      break;
-
-    case 'bottom':
-      transform = "translateY(".concat(translate, "%)");
-      break;
-
-    default:
-      break;
-  }
-
-  return {
-    transform,
-    opacity
-  };
-};
-
-export default class SideSheetTransition extends React.PureComponent {
-  render() {
-    let {
-      motion = {}
-    } = this.props;
-    const {
-      children,
-      controlled = false,
-      visible
-    } = this.props;
-
-    if (typeof motion === 'function') {
-      motion = motion(this.props);
-    } else if (!motion || typeof motion !== 'object') {
-      motion = {};
-    }
-
-    let extra = {};
-
-    if (controlled) {
-      extra = {
-        state: visible ? 'enter' : 'leave'
-      };
-    }
-
-    return /*#__PURE__*/React.createElement(Transition, Object.assign({
-      config: {
-        tension: 170,
-        friction: 14,
-        easing: 'linear',
-        duration: 200
-      },
-      from: {
-        translate: 100,
-        opacity: {
-          val: 0,
-          duration: 180
-        }
-      },
-      enter: {
-        translate: 0,
-        opacity: {
-          val: 1,
-          duration: 180
-        }
-      },
-      leave: {
-        translate: 100,
-        opacity: {
-          val: 0,
-          duration: 180
-        }
-      }
-    }, extra, motion), typeof children === 'function' ? styles => children(formatStyles(styles, this.props)) : children);
-  }
-
-}

package/lib/es/tabs/TabPaneTransition.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { TabPaneTransitionProps } from './interface';
-declare const TabPaneTransition: FC<TabPaneTransitionProps>;
-export default TabPaneTransition;

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);
-}