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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.22.0-alpha.0",
+    "version": "2.22.0-beta.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -18,11 +18,11 @@
     ],
     "dependencies": {
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.22.0-alpha.0",
-        "@douyinfe/semi-foundation": "2.22.0-alpha.0",
-        "@douyinfe/semi-icons": "2.22.0-alpha.0",
+        "@douyinfe/semi-animation-react": "2.22.0-beta.1",
+        "@douyinfe/semi-foundation": "2.22.0-beta.1",
+        "@douyinfe/semi-icons": "2.22.0-beta.1",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.22.0-alpha.0",
+        "@douyinfe/semi-theme-default": "2.22.0-beta.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "bb316f98269de321274b842e2b6b9b463bca1c53",
+    "gitHead": "9a2f03bc364267912d063baf07625a6de40f50e8",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.22.0-alpha.0",
+        "@douyinfe/semi-scss-compile": "2.22.0-beta.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",
@@ -97,7 +97,6 @@
         "jsdom": "^15.2.1",
         "merge2": "^1.4.1",
         "null-loader": "^3.0.0",
-        "prop-types": "15.7.2",
         "react-dnd": "^9.5.1",
         "react-infinite-scroller": "^1.2.4",
         "react-storybook-addon-props-combinations": "^1.1.0",

package/lib/cjs/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/cjs/motions/Rotate.js

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _semiAnimationReact = require("@douyinfe/semi-animation-react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
-
-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] = (0, _react.useState)(true);
-  (0, _react.useEffect)(() => {
-    // eslint-disable-next-line @typescript-eslint/no-implied-eval
-    setImmediate(false);
-  }, [isOpen]);
-  return /*#__PURE__*/_react.default.createElement(_semiAnimationReact.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 => _react.Children.map(children, child => /*#__PURE__*/(0, _react.isValidElement)(child) ? /*#__PURE__*/(0, _react.cloneElement)(child, Object.assign(Object.assign({}, child.props), {
-    style: Object.assign(Object.assign({}, child.props.style), formatStyle(transitionStyle))
-  })) : child));
-}
-
-OpenIconTransition.propTypes = {
-  isOpen: _propTypes.default.bool.isRequired,
-  children: _propTypes.default.any.isRequired,
-  enterDeg: _propTypes.default.number,
-  fromDeg: _propTypes.default.number,
-  duration: _propTypes.default.number
-};
-var _default = OpenIconTransition;
-exports.default = _default;

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

@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Motion } from '@douyinfe/semi-foundation/lib/cjs/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/cjs/navigation/SubNavTransition.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _semiAnimationReact = require("@douyinfe/semi-animation-react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-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 }; }
-
-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] = (0, _react.useState)(false); // useEffect(() => {
-  //     setImmediate(isCollapsed);
-  // }, [isCollapsed]);
-
-  return /*#__PURE__*/_react.default.createElement(_semiAnimationReact.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.default.any,
-  isCollapsed: _propTypes.default.bool
-};
-var _default = SubNavTransition;
-exports.default = _default;

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { NoticePosition } from '@douyinfe/semi-foundation/lib/cjs/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/cjs/notification/NoticeTransition.js

@@ -1,85 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = NoticeTransition;
-
-var _semiAnimationReact = require("@douyinfe/semi-animation-react");
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// @ts-ignore  Currently there is no types for semi-animation-react
-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.default.createElement(_semiAnimationReact.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/cjs/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/cjs/sideSheet/SideSheetTransition.js

@@ -1,115 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _semiAnimationReact = require("@douyinfe/semi-animation-react");
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// @ts-ignore  Currently there is no types definition for semi-animation-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
-  };
-};
-
-class SideSheetTransition extends _react.default.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.default.createElement(_semiAnimationReact.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);
-  }
-
-}
-
-exports.default = SideSheetTransition;

package/lib/cjs/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/cjs/tabs/TabPaneTransition.js

@@ -1,114 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _toInteger2 = _interopRequireDefault(require("lodash/toInteger"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _semiAnimationReact = require("@douyinfe/semi-animation-react");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable react/destructuring-assignment */
-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.default.createElement(_semiAnimationReact.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 = (0, _toInteger2.default)(translateY) === 0 ? {
-        opacity
-      } : {
-        transform: "translateY(".concat((0, _toInteger2.default)(translateY), "px)"),
-        opacity
-      };
-      return props.children(finalState);
-    } : props.children);
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_semiAnimationReact.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 = (0, _toInteger2.default)(translateX) === 0 ? {
-      opacity
-    } : {
-      transform: "translateX(".concat((0, _toInteger2.default)(translateX), "px)"),
-      opacity
-    };
-    return props.children(finalState);
-  } : props.children);
-};
-
-var _default = TabPaneTransition;
-exports.default = _default;

package/lib/cjs/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/cjs/toast/ToastTransition.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ToastTransition;
-
-var _semiAnimationReact = require("@douyinfe/semi-animation-react");
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// @ts-ignore  Currently there is no types for semi-animation-react
-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.default.createElement(_semiAnimationReact.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/cjs/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;