@douyinfe/semi-ui 2.1.0-next.0 → 2.1.0

package/lib/cjs/sideSheet/SideSheetContent.js

@@ -1,195 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
-
-var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/sideSheet/constants");
-
-var _iconButton = _interopRequireDefault(require("../iconButton"));
-
-var _lodashEs = require("lodash-es");
-
-var _semiIcons = require("@douyinfe/semi-icons");
-
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
-
-  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
-    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-let uuid = 0;
-const prefixCls = _constants.cssClasses.PREFIX;
-
-class SideSheetContent extends _react.default.PureComponent {
-  constructor() {
-    super(...arguments);
-
-    this.onMaskClick = e => {
-      if (e.target === e.currentTarget) {
-        this.close(e);
-      }
-    };
-
-    this.close = e => {
-      const {
-        onClose
-      } = this.props;
-      onClose && onClose(e);
-    };
-  }
-
-  componentDidMount() {
-    this.sideSheetId = "sidesheet-".concat(uuid++);
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeoutId);
-  }
-
-  getMaskElement() {
-    const {
-      mask,
-      maskStyle,
-      maskClosable
-    } = this.props;
-
-    if (mask) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: "mask",
-        className: "".concat(prefixCls, "-mask"),
-        style: maskStyle,
-        onClick: maskClosable ? this.onMaskClick : null
-      });
-    }
-
-    return null;
-  }
-
-  renderHeader() {
-    const {
-      title,
-      closable,
-      headerStyle
-    } = this.props;
-    let header, closer;
-
-    if (title) {
-      header = /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-title")
-      }, this.props.title);
-    }
-
-    if (closable) {
-      closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-        className: "".concat(prefixCls, "-close"),
-        key: "close-btn",
-        onClick: this.close,
-        type: "tertiary",
-        icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
-        theme: "borderless",
-        size: "small"
-      });
-    }
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-header"),
-      style: (0, _assign.default)({}, headerStyle)
-    }, header, closer);
-  }
-
-  getDialogElement() {
-    var _context;
-
-    const props = __rest(this.props, []);
-
-    const style = {};
-
-    if (props.width) {
-      style.width = props.width; // When the mask is false, the width is set on the wrapper. At this time, sidesheet-inner does not need to set the width again, otherwise, the percentage will be accumulated repeatedly when the width is a percentage
-
-      if (!props.mask) {
-        style.width = '100%';
-      }
-    }
-
-    if (props.height) {
-      style.height = props.height;
-    }
-
-    const header = this.renderHeader();
-
-    const dialogElement = /*#__PURE__*/_react.default.createElement("div", {
-      key: "dialog-element",
-      role: "sidesheet",
-      tabIndex: -1,
-      className: (0, _concat.default)(_context = "".concat(prefixCls, "-inner ")).call(_context, prefixCls, "-inner-wrap"),
-      // onMouseDown={this.onDialogMouseDown}
-      style: (0, _assign.default)((0, _assign.default)({}, props.style), style)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content")
-    }, header, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-body"),
-      style: props.bodyStyle
-    }, props.children), props.footer ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-footer")
-    }, props.footer) : null));
-
-    return dialogElement;
-  }
-
-  render() {
-    const {
-      mask,
-      className,
-      width
-    } = this.props;
-    const wrapperCls = (0, _classnames.default)(className, {
-      ["".concat(prefixCls, "-fixed")]: !mask
-    });
-    const wrapperStyle = {};
-
-    if (!mask && width) {
-      wrapperStyle.width = width;
-    }
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: wrapperCls,
-      style: wrapperStyle
-    }, this.getMaskElement(), this.getDialogElement());
-  }
-
-}
-
-exports.default = SideSheetContent;
-SideSheetContent.propTypes = {
-  onClose: _propTypes.default.func
-};
-SideSheetContent.defaultProps = {
-  onClose: _lodashEs.noop
-};

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.ReactChildren | React.JSXElementConstructor<any>;
-    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,120 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _semiAnimationReact = require("@douyinfe/semi-animation-react");
-
-var _react = _interopRequireDefault(require("react"));
-
-// @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, (0, _assign.default)({
-      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/sideSheet/index.d.ts

@@ -1,59 +0,0 @@
-import React, { CSSProperties } from 'react';
-import BaseComponent from '../_base/baseComponent';
-import PropTypes from 'prop-types';
-import { SideSheetAdapter, SideSheetProps, SideSheetState } from '@douyinfe/semi-foundation/lib/cjs/sideSheet/sideSheetFoundation';
-import '@douyinfe/semi-foundation/lib/cjs/sideSheet/sideSheet.css';
-export { SideSheetContentProps } from './SideSheetContent';
-export { SideSheetTransitionProps } from './SideSheetTransition';
-export interface SideSheetReactProps extends SideSheetProps {
-    bodyStyle?: CSSProperties;
-    headerStyle?: CSSProperties;
-    maskStyle?: CSSProperties;
-    style?: CSSProperties;
-    title?: React.ReactNode;
-    footer?: React.ReactNode;
-    children?: React.ReactNode;
-    onCancel?: (e: React.MouseEvent) => void;
-}
-export { SideSheetState };
-export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSheetState> {
-    static contextType: React.Context<import("../configProvider/context").ContextValue>;
-    static propTypes: {
-        bodyStyle: PropTypes.Requireable<object>;
-        headerStyle: PropTypes.Requireable<object>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        closable: PropTypes.Requireable<boolean>;
-        disableScroll: PropTypes.Requireable<boolean>;
-        getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
-        height: PropTypes.Requireable<string | number>;
-        mask: PropTypes.Requireable<boolean>;
-        maskClosable: PropTypes.Requireable<boolean>;
-        maskStyle: PropTypes.Requireable<object>;
-        motion: PropTypes.Requireable<boolean | object>;
-        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
-        placement: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        visible: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<string | number>;
-        zIndex: PropTypes.Requireable<number>;
-        afterVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
-        closeOnEsc: PropTypes.Requireable<boolean>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        keepDOM: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: SideSheetReactProps;
-    private _active;
-    constructor(props: SideSheetReactProps);
-    get adapter(): SideSheetAdapter;
-    static getDerivedStateFromProps(props: SideSheetReactProps, prevState: SideSheetState): Partial<SideSheetState>;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: SideSheetReactProps, prevState: SideSheetState, snapshot: any): void;
-    componentWillUnmount(): void;
-    handleCancel: (e: MouseEvent) => void;
-    handleKeyDown: (e: MouseEvent) => void;
-    renderContent(): JSX.Element;
-    render(): JSX.Element;
-}

package/lib/cjs/sideSheet/index.js

@@ -1,303 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
-
-var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _portal = _interopRequireDefault(require("../_portal"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _context2 = _interopRequireDefault(require("../configProvider/context"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/sideSheet/constants");
-
-var _SideSheetTransition = _interopRequireDefault(require("./SideSheetTransition"));
-
-var _SideSheetContent = _interopRequireDefault(require("./SideSheetContent"));
-
-var _lodashEs = require("lodash-es");
-
-var _sideSheetFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/sideSheet/sideSheetFoundation"));
-
-require("@douyinfe/semi-foundation/lib/cjs/sideSheet/sideSheet.css");
-
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
-
-  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
-    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-/* eslint-disable no-nested-ternary */
-
-
-const prefixCls = _constants.cssClasses.PREFIX;
-const defaultWidthList = _constants.strings.WIDTH;
-const defaultHeight = _constants.strings.HEIGHT;
-
-class SideSheet extends _baseComponent.default {
-  constructor(props) {
-    super(props);
-
-    this.handleCancel = e => {
-      this.foundation.handleCancel(e);
-    };
-
-    this.handleKeyDown = e => {
-      this.foundation.handleKeyDown(e);
-    };
-
-    this.state = {
-      hidden: !this.props.visible
-    };
-    this.foundation = new _sideSheetFoundation.default(this.adapter);
-    this._active = false;
-  }
-
-  get adapter() {
-    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
-      disabledBodyScroll: () => {
-        const {
-          getPopupContainer
-        } = this.props;
-
-        if (!getPopupContainer && document) {
-          document.body.style.overflow = 'hidden';
-        }
-      },
-      enabledBodyScroll: () => {
-        const {
-          getPopupContainer
-        } = this.props;
-
-        if (!getPopupContainer && document) {
-          document.body.style.overflow = '';
-        }
-      },
-      notifyCancel: e => {
-        this.props.onCancel && this.props.onCancel(e);
-      },
-      notifyVisibleChange: visible => {
-        this.props.afterVisibleChange(visible);
-      },
-      setOnKeyDownListener: () => {
-        if (window) {
-          window.addEventListener('keydown', this.handleKeyDown);
-        }
-      },
-      removeKeyDownListener: () => {
-        if (window) {
-          window.removeEventListener('keydown', this.handleKeyDown);
-        }
-      },
-      toggleHidden: hidden => {
-        if (hidden !== this.state.hidden) {
-          this.setState({
-            hidden
-          });
-        }
-      }
-    });
-  }
-
-  static getDerivedStateFromProps(props, prevState) {
-    const newState = {};
-
-    if (props.visible && prevState.hidden) {
-      newState.hidden = false;
-    }
-
-    if (!props.visible && !props.motion && !prevState.hidden) {
-      newState.hidden = true;
-    }
-
-    return newState;
-  }
-
-  componentDidMount() {
-    if (this.props.visible) {
-      this.foundation.beforeShow();
-      this._active = this._active || this.props.visible;
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // hide => show
-    if (!prevProps.visible && this.props.visible) {
-      this.foundation.beforeShow();
-    } // show => hide
-
-
-    if (prevProps.visible && !this.props.visible) {
-      this.foundation.afterHide();
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.props.visible) {
-      this.foundation.destroy();
-    }
-  }
-
-  renderContent() {
-    var _context;
-
-    const _a = this.props,
-          {
-      placement,
-      className,
-      children,
-      width,
-      height,
-      motion,
-      visible,
-      style,
-      maskStyle,
-      size,
-      zIndex,
-      getPopupContainer,
-      keepDOM
-    } = _a,
-          props = __rest(_a, ["placement", "className", "children", "width", "height", "motion", "visible", "style", "maskStyle", "size", "zIndex", "getPopupContainer", "keepDOM"]);
-
-    const {
-      direction
-    } = this.context;
-    const isVertical = placement === 'left' || placement === 'right';
-    const isHorizontal = placement === 'top' || placement === 'bottom';
-    const sheetWidth = isVertical ? width ? width : defaultWidthList[size] : '100%';
-    const sheetHeight = isHorizontal ? height ? height : defaultHeight : '100%';
-    const classList = (0, _classnames.default)(prefixCls, className, {
-      [(0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, placement)]: placement,
-      ["".concat(prefixCls, "-popup")]: getPopupContainer,
-      ["".concat(prefixCls, "-horizontal")]: isHorizontal,
-      ["".concat(prefixCls, "-rtl")]: direction === 'rtl',
-      ["".concat(prefixCls, "-hidden")]: keepDOM && this.state.hidden
-    });
-    const contentProps = (0, _assign.default)((0, _assign.default)({}, props), {
-      visible,
-      motion: false,
-      className: classList,
-      width: sheetWidth,
-      height: sheetHeight,
-      onClose: this.handleCancel
-    });
-    const mergedMotion = this.foundation.getMergedMotion();
-    this._active = this._active || visible;
-    const shouldRender = (visible || keepDOM) && this._active;
-
-    if (mergedMotion) {
-      return /*#__PURE__*/_react.default.createElement(_SideSheetTransition.default, {
-        placement: placement,
-        motion: mergedMotion,
-        controlled: keepDOM,
-        visible: visible
-      }, shouldRender ? transitionStyles => /*#__PURE__*/_react.default.createElement(_SideSheetContent.default, (0, _assign.default)({}, contentProps, {
-        style: (0, _assign.default)((0, _assign.default)({}, transitionStyles), style),
-        maskStyle: (0, _assign.default)({
-          opacity: transitionStyles.opacity
-        }, maskStyle)
-      }), children) : null);
-    }
-
-    if (shouldRender) {
-      return /*#__PURE__*/_react.default.createElement(_SideSheetContent.default, (0, _assign.default)({}, contentProps, {
-        style: style,
-        maskStyle: maskStyle
-      }), children);
-    }
-
-    return null;
-  }
-
-  render() {
-    const {
-      zIndex,
-      getPopupContainer
-    } = this.props;
-    let wrapperStyle = {
-      zIndex
-    };
-
-    if (getPopupContainer) {
-      wrapperStyle = {
-        zIndex,
-        position: 'static'
-      };
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_portal.default, {
-      getPopupContainer: getPopupContainer,
-      style: wrapperStyle
-    }, this.renderContent());
-  }
-
-}
-
-exports.default = SideSheet;
-SideSheet.contextType = _context2.default;
-SideSheet.propTypes = {
-  bodyStyle: _propTypes.default.object,
-  headerStyle: _propTypes.default.object,
-  children: _propTypes.default.node,
-  className: _propTypes.default.string,
-  closable: _propTypes.default.bool,
-  disableScroll: _propTypes.default.bool,
-  getPopupContainer: _propTypes.default.func,
-  height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  mask: _propTypes.default.bool,
-  maskClosable: _propTypes.default.bool,
-  maskStyle: _propTypes.default.object,
-  motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object, _propTypes.default.func]),
-  onCancel: _propTypes.default.func,
-  placement: _propTypes.default.oneOf(_constants.strings.PLACEMENT),
-  size: _propTypes.default.oneOf(_constants.strings.SIZE),
-  style: _propTypes.default.object,
-  title: _propTypes.default.node,
-  visible: _propTypes.default.bool,
-  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  zIndex: _propTypes.default.number,
-  afterVisibleChange: _propTypes.default.func,
-  closeOnEsc: _propTypes.default.bool,
-  footer: _propTypes.default.node,
-  keepDOM: _propTypes.default.bool
-};
-SideSheet.defaultProps = {
-  visible: false,
-  motion: true,
-  mask: true,
-  placement: 'right',
-  closable: true,
-  footer: null,
-  zIndex: 1000,
-  maskClosable: true,
-  size: 'small',
-  disableScroll: true,
-  closeOnEsc: false,
-  afterVisibleChange: _lodashEs.noop,
-  keepDOM: false
-};