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

package/lib/cjs/sideSheet/SideSheetContent.js

@@ -0,0 +1,195 @@
+"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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,120 @@
+"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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,303 @@
+"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
+};