zmp-react/esm/zalo-ui-kits/sheet.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React, { useRef, useImperativeHandle, forwardRef } from 'react';
import Sheet from '../components/sheet';
import Icon from './icon';
import Link from '../components/link';
/* dts-imports
import { Sheet } from 'zmp-core/types';
*/

/* dts-props
  id?: string | number;
  className?: string;
  style?: React.CSSProperties;
  opened? : boolean
  animate? : boolean
  top? : boolean
  bottom? : boolean
  position? : string
  backdrop? : boolean
  backdropEl? : string | object
  closeByBackdropClick? : boolean
  closeByOutsideClick? : boolean
  closeOnEscape? : boolean
  push? : boolean
  swipeToClose? : boolean
  swipeToStep? : boolean
  swipeHandler? : string | object
  containerEl? : string | object
  closeButton? : boolean
  title? : string
  subTitle? : string
  COLOR_PROPS
  onSheetStepProgress? : (instance?: Sheet.Sheet, progress?: any) => void
  onSheetStepOpen? : (instance?: Sheet.Sheet) => void
  onSheetStepClose? : (instance?: Sheet.Sheet) => void
  onSheetOpen? : (instance?: Sheet.Sheet) => void
  onSheetOpened? : (instance?: Sheet.Sheet) => void
  onSheetClose? : (instance?: Sheet.Sheet) => void
  onSheetClosed? : (instance?: Sheet.Sheet) => void
  ref?: React.MutableRefObject<{el: HTMLElement | null; zmpSheet: () => Sheet.Sheet;}>;
  CHILDREN_PROP
*/

var ZMPSheet = /*#__PURE__*/forwardRef(function (props, ref) {
  var sheetRef = useRef(null);

  var title = props.title,
      subtitle = props.subtitle,
      closeButton = props.closeButton,
      children = props.children,
      others = _objectWithoutPropertiesLoose(props, ["title", "subtitle", "closeButton", "children"]);

  useImperativeHandle(ref, function () {
    return sheetRef.current;
  });
  var headerEl = null;

  if (title || closeButton) {
    headerEl = /*#__PURE__*/React.createElement("div", {
      slot: "fixed",
      className: "zmp-sheet-default-toolbar"
    }, closeButton && /*#__PURE__*/React.createElement(Link, {
      sheetClose: true,
      className: "zmp-sheet-default-close-button no-ripple"
    }, /*#__PURE__*/React.createElement(Icon, {
      zmp: "zi-close"
    })), title && /*#__PURE__*/React.createElement("div", {
      className: "zmp-sheet-default-title-container"
    }, /*#__PURE__*/React.createElement("div", {
      className: "zmp-sheet-default-title"
    }, title), subtitle && /*#__PURE__*/React.createElement("div", {
      className: "zmp-sheet-default-subtitle"
    }, subtitle)));
  }

  return /*#__PURE__*/React.createElement(Sheet, _extends({
    ref: sheetRef
  }, others), headerEl, children);
});
ZMPSheet.displayName = 'zmp-sheet';
export default ZMPSheet;