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

package/lib/cjs/image/preview.js

@@ -0,0 +1,249 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _previewContext = require("./previewContext");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _previewInner = _interopRequireDefault(require("./previewInner"));
+
+var _previewFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/image/previewFoundation"));
+
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/image/constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class Preview extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.handleVisibleChange = newVisible => {
+      this.foundation.handleVisibleChange(newVisible);
+    };
+
+    this.handleCurrentIndexChange = index => {
+      this.foundation.handleCurrentIndexChange(index);
+    };
+
+    this.loopImageIndex = () => {
+      const {
+        children
+      } = this.props;
+      let index = 0;
+      const srcListInChildren = [];
+      const titles = [];
+
+      const loop = children => {
+        return _react.default.Children.map(children, child => {
+          var _a;
+
+          if (child && child.props && child.type) {
+            if (child.type.isSemiImage) {
+              const {
+                src,
+                preview,
+                alt
+              } = child.props;
+
+              if (preview) {
+                const previewSrc = (0, _isObject2.default)(preview) ? (_a = preview.src) !== null && _a !== void 0 ? _a : src : src;
+                srcListInChildren.push(previewSrc);
+                titles.push(preview === null || preview === void 0 ? void 0 : preview.previewTitle);
+                return /*#__PURE__*/_react.default.cloneElement(child, {
+                  imageID: index++
+                });
+              }
+
+              return child;
+            }
+          }
+
+          if (child && child.props && child.props.children) {
+            return /*#__PURE__*/_react.default.cloneElement(child, {
+              children: loop(child.props.children)
+            });
+          }
+
+          return child;
+        });
+      };
+
+      return {
+        srcListInChildren,
+        newChildren: loop(children),
+        titles
+      };
+    };
+
+    this.state = {
+      currentIndex: props.currentIndex || props.defaultCurrentIndex || 0,
+      visible: props.visible || props.currentDefaultVisible || false
+    };
+    this.foundation = new _previewFoundation.default(this.adapter);
+    this.previewGroupId = (0, _uuid.getUuidShort)({
+      prefix: "semi-image-preview-group",
+      length: 4
+    });
+    this.previewRef = /*#__PURE__*/_react.default.createRef();
+  }
+
+  get adapter() {
+    return Object.assign({}, super.adapter);
+  }
+
+  componentDidMount() {
+    const {
+      lazyLoadMargin
+    } = this.props;
+    const allElement = document.querySelectorAll(".".concat(prefixCls, "-img")); // use IntersectionObserver to lazy load image
+
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(item => {
+        var _a;
+
+        const src = (_a = item.target.dataset) === null || _a === void 0 ? void 0 : _a.src;
+
+        if (item.isIntersecting && src) {
+          item.target.src = src;
+          observer.unobserve(item.target);
+        }
+      });
+    }, {
+      root: document.querySelector("#".concat(this.previewGroupId)),
+      rootMargin: lazyLoadMargin
+    });
+    allElement.forEach(item => observer.observe(item));
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const willUpdateStates = {};
+
+    if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
+      willUpdateStates.currentIndex = props.currentIndex;
+    }
+
+    if ("visible" in props && props.visible !== state.visible) {
+      willUpdateStates.visible = props.visible;
+    }
+
+    return willUpdateStates;
+  }
+
+  render() {
+    const _a = this.props,
+          {
+      src,
+      style,
+      lazyLoad
+    } = _a,
+          restProps = __rest(_a, ["src", "style", "lazyLoad"]);
+
+    const {
+      currentIndex,
+      visible
+    } = this.state;
+    const {
+      srcListInChildren,
+      newChildren,
+      titles
+    } = this.loopImageIndex();
+    const srcArr = Array.isArray(src) ? src : typeof src === "string" ? [src] : [];
+    const finalSrcList = [...srcArr, ...srcListInChildren];
+    return /*#__PURE__*/_react.default.createElement(_previewContext.PreviewContext.Provider, {
+      value: {
+        isGroup: finalSrcList.length > 1,
+        previewSrc: finalSrcList,
+        titles: titles,
+        currentIndex,
+        visible,
+        lazyLoad,
+        setCurrentIndex: this.handleCurrentIndexChange,
+        handleVisibleChange: this.handleVisibleChange
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      id: this.previewGroupId,
+      style: style,
+      className: "".concat(prefixCls, "-preview-group")
+    }, newChildren), /*#__PURE__*/_react.default.createElement(_previewInner.default, Object.assign({}, restProps, {
+      ref: this.previewRef,
+      src: finalSrcList,
+      currentIndex: currentIndex,
+      visible: visible,
+      onVisibleChange: this.handleVisibleChange
+    })));
+  }
+
+}
+
+exports.default = Preview;
+Preview.propTypes = {
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  visible: _propTypes.default.bool,
+  src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  currentIndex: _propTypes.default.number,
+  defaultIndex: _propTypes.default.number,
+  defaultVisible: _propTypes.default.bool,
+  maskClosable: _propTypes.default.bool,
+  closable: _propTypes.default.bool,
+  zoomStep: _propTypes.default.number,
+  infinite: _propTypes.default.bool,
+  showTooltip: _propTypes.default.bool,
+  closeOnEsc: _propTypes.default.bool,
+  prevTip: _propTypes.default.string,
+  nextTip: _propTypes.default.string,
+  zoomInTip: _propTypes.default.string,
+  zoomOutTip: _propTypes.default.string,
+  downloadTip: _propTypes.default.string,
+  adaptiveTip: _propTypes.default.string,
+  originTip: _propTypes.default.string,
+  lazyLoad: _propTypes.default.bool,
+  lazyLoadMargin: _propTypes.default.string,
+  preLoad: _propTypes.default.bool,
+  preLoadGap: _propTypes.default.number,
+  disableDownload: _propTypes.default.bool,
+  zIndex: _propTypes.default.number,
+  renderHeader: _propTypes.default.func,
+  renderPreviewMenu: _propTypes.default.func,
+  getPopupContainer: _propTypes.default.func,
+  onVisibleChange: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  onClose: _propTypes.default.func,
+  onZoomIn: _propTypes.default.func,
+  onZoomOut: _propTypes.default.func,
+  onPrev: _propTypes.default.func,
+  onNext: _propTypes.default.func,
+  onDownload: _propTypes.default.func,
+  onRatioChange: _propTypes.default.func,
+  onRotateChange: _propTypes.default.func
+};
+Preview.defaultProps = {
+  src: [],
+  lazyLoad: true,
+  lazyLoadMargin: "0px 100px 100px 0px"
+};

package/lib/cjs/image/previewContext.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+export interface PreviewContextProps {
+    isGroup: boolean;
+    lazyLoad: boolean;
+    previewSrc: string[];
+    titles: ReactNode[];
+    currentIndex: number;
+    visible: boolean;
+    setCurrentIndex: (current: number) => void;
+    handleVisibleChange: (visible: boolean, preVisible?: boolean) => void;
+}
+export declare const PreviewContext: import("react").Context<PreviewContextProps>;

package/lib/cjs/image/previewContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewContext = void 0;
+
+var _react = require("react");
+
+const PreviewContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.PreviewContext = PreviewContext;

package/lib/cjs/image/previewFooter.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="lodash" />
+import React, { ReactNode } from "react";
+import BaseComponent from "../_base/baseComponent";
+import { FooterProps } from "./interface";
+import PropTypes from "prop-types";
+import PreviewFooterFoundation, { PreviewFooterAdapter } from '@douyinfe/semi-foundation/lib/cjs/image/previewFooterFoundation';
+export default class Footer extends BaseComponent<FooterProps> {
+    static propTypes: {
+        curPage: PropTypes.Requireable<number>;
+        totalNum: PropTypes.Requireable<number>;
+        disabledPrev: PropTypes.Requireable<boolean>;
+        disabledNext: PropTypes.Requireable<boolean>;
+        disableDownload: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        zoom: PropTypes.Requireable<number>;
+        ratio: PropTypes.Requireable<string>;
+        prevTip: PropTypes.Requireable<string>;
+        nextTip: PropTypes.Requireable<string>;
+        zoomInTip: PropTypes.Requireable<string>;
+        zoomOutTip: PropTypes.Requireable<string>;
+        rotateTip: PropTypes.Requireable<string>;
+        downloadTip: PropTypes.Requireable<string>;
+        adaptiveTip: PropTypes.Requireable<string>;
+        originTip: PropTypes.Requireable<string>;
+        showTooltip: PropTypes.Requireable<boolean>;
+        onZoomIn: PropTypes.Requireable<(...args: any[]) => any>;
+        onZoomOut: PropTypes.Requireable<(...args: any[]) => any>;
+        onPrev: PropTypes.Requireable<(...args: any[]) => any>;
+        onNext: PropTypes.Requireable<(...args: any[]) => any>;
+        onAdjustRatio: PropTypes.Requireable<(...args: any[]) => any>;
+        onRotateLeft: PropTypes.Requireable<(...args: any[]) => any>;
+        onDownload: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        min: number;
+        max: number;
+        step: number;
+        showTooltip: boolean;
+        disableDownload: boolean;
+    };
+    get adapter(): PreviewFooterAdapter<FooterProps>;
+    foundation: PreviewFooterFoundation;
+    constructor(props: FooterProps);
+    changeSliderValue: (type: string) => void;
+    handleMinusClick: () => void;
+    handlePlusClick: () => void;
+    handleRotateLeft: () => void;
+    handleRotateRight: () => void;
+    handleSlideChange: import("lodash").DebouncedFunc<(value: any) => void>;
+    handleRatioClick: () => void;
+    customRenderViewMenu: () => ReactNode;
+    getFinalIconElement: (element: ReactNode, content: ReactNode) => string | number | boolean | React.ReactFragment | JSX.Element;
+    getLocalTextByKey: (key: string) => JSX.Element;
+    getIconChevronLeft: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getIconChevronRight: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getIconMinus: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getIconPlus: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getIconRatio: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getIconRotate: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getIconDownload: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    render(): JSX.Element;
+}

package/lib/cjs/image/previewFooter.js

@@ -0,0 +1,337 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+
+var _divider = _interopRequireDefault(require("../divider"));
+
+var _slider = _interopRequireDefault(require("../slider"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/image/constants");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _previewFooterFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/image/previewFooterFoundation"));
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const prefixCls = _constants.cssClasses.PREFIX;
+const footerPrefixCls = "".concat(_constants.cssClasses.PREFIX, "-preview-footer");
+let mouseActiveTime = 0;
+
+class Footer extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.changeSliderValue = type => {
+      this.foundation.changeSliderValue(type);
+    };
+
+    this.handleMinusClick = () => {
+      this.changeSliderValue("minus");
+    };
+
+    this.handlePlusClick = () => {
+      this.changeSliderValue("plus");
+    };
+
+    this.handleRotateLeft = () => {
+      this.foundation.handleRotate("left");
+    };
+
+    this.handleRotateRight = () => {
+      this.foundation.handleRotate("right");
+    };
+
+    this.handleSlideChange = (0, _throttle2.default)(value => {
+      this.foundation.handleValueChange(value);
+    }, 50);
+
+    this.handleRatioClick = () => {
+      this.foundation.handleRatioClick();
+    };
+
+    this.customRenderViewMenu = () => {
+      const {
+        min,
+        max,
+        step,
+        curPage,
+        totalNum,
+        ratio,
+        zoom,
+        disabledPrev,
+        disabledNext,
+        disableDownload,
+        onNext,
+        onPrev,
+        onDownload,
+        renderPreviewMenu
+      } = this.props;
+      const props = {
+        min,
+        max,
+        step,
+        curPage,
+        totalNum,
+        ratio,
+        zoom,
+        disabledPrev,
+        disabledNext,
+        disableDownload,
+        onNext,
+        onPrev,
+        onDownload,
+        onRotateLeft: this.handleRotateLeft,
+        onRotateRight: this.handleRotateRight,
+        disabledZoomIn: zoom === max,
+        disabledZoomOut: zoom === min,
+        onRatioClick: this.handleRatioClick,
+        onZoomIn: this.handlePlusClick,
+        onZoomOut: this.handleMinusClick
+      };
+      return renderPreviewMenu(props);
+    }; // According to showTooltip in props, decide whether to use Tooltip to pack a layer
+    // 根据 props 中的 showTooltip 决定是否使用 Tooltip 包一层
+
+
+    this.getFinalIconElement = (element, content) => {
+      const {
+        showTooltip
+      } = this.props;
+      return showTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: content
+      }, element) : element;
+    };
+
+    this.getLocalTextByKey = key => /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+      componentName: "Image"
+    }, locale => locale[key]);
+
+    this.getIconChevronLeft = () => {
+      const {
+        disabledPrev,
+        onPrev,
+        prevTip
+      } = this.props;
+
+      const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
+        size: "large",
+        className: disabledPrev ? "".concat(footerPrefixCls, "-disabled") : "",
+        onClick: !disabledPrev ? onPrev : undefined
+      });
+
+      const content = prevTip !== null && prevTip !== void 0 ? prevTip : this.getLocalTextByKey("prevTip");
+      return this.getFinalIconElement(icon, content);
+    };
+
+    this.getIconChevronRight = () => {
+      const {
+        disabledNext,
+        onNext,
+        nextTip
+      } = this.props;
+
+      const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
+        size: "large",
+        className: disabledNext ? "".concat(footerPrefixCls, "-disabled") : "",
+        onClick: !disabledNext ? onNext : undefined
+      });
+
+      const content = nextTip !== null && nextTip !== void 0 ? nextTip : this.getLocalTextByKey("nextTip");
+      return this.getFinalIconElement(icon, content);
+    };
+
+    this.getIconMinus = () => {
+      const {
+        zoomOutTip,
+        zoom,
+        min
+      } = this.props;
+      const disabledZoomOut = zoom === min;
+
+      const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconMinus, {
+        size: "large",
+        onClick: !disabledZoomOut ? this.handleMinusClick : undefined,
+        className: disabledZoomOut ? "".concat(footerPrefixCls, "-disabled") : ""
+      });
+
+      const content = zoomOutTip !== null && zoomOutTip !== void 0 ? zoomOutTip : this.getLocalTextByKey("zoomOutTip");
+      return this.getFinalIconElement(icon, content);
+    };
+
+    this.getIconPlus = () => {
+      const {
+        zoomInTip,
+        zoom,
+        max
+      } = this.props;
+      const disabledZoomIn = zoom === max;
+
+      const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconPlus, {
+        size: "large",
+        onClick: !disabledZoomIn ? this.handlePlusClick : undefined,
+        className: disabledZoomIn ? "".concat(footerPrefixCls, "-disabled") : ""
+      });
+
+      const content = zoomInTip !== null && zoomInTip !== void 0 ? zoomInTip : this.getLocalTextByKey("zoomInTip");
+      return this.getFinalIconElement(icon, content);
+    };
+
+    this.getIconRatio = () => {
+      const {
+        ratio,
+        originTip,
+        adaptiveTip
+      } = this.props;
+      const props = {
+        size: "large",
+        className: (0, _classnames.default)("".concat(footerPrefixCls, "-gap")),
+        onClick: this.handleRatioClick
+      };
+      const icon = ratio === "adaptation" ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconRealSizeStroked, Object.assign({}, props)) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconWindowAdaptionStroked, Object.assign({}, props));
+      let content;
+
+      if (ratio === "adaptation") {
+        content = originTip !== null && originTip !== void 0 ? originTip : this.getLocalTextByKey("originTip");
+      } else {
+        content = adaptiveTip !== null && adaptiveTip !== void 0 ? adaptiveTip : this.getLocalTextByKey("adaptiveTip");
+      }
+
+      return this.getFinalIconElement(icon, content);
+    };
+
+    this.getIconRotate = () => {
+      const {
+        rotateTip
+      } = this.props;
+
+      const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconRotate, {
+        size: "large",
+        onClick: this.handleRotateLeft
+      });
+
+      const content = rotateTip !== null && rotateTip !== void 0 ? rotateTip : this.getLocalTextByKey("rotateTip");
+      return this.getFinalIconElement(icon, content);
+    };
+
+    this.getIconDownload = () => {
+      const {
+        downloadTip,
+        onDownload,
+        disableDownload
+      } = this.props;
+
+      const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconDownload, {
+        size: "large",
+        onClick: !disableDownload ? onDownload : undefined,
+        className: (0, _classnames.default)("".concat(footerPrefixCls, "-gap"), {
+          ["".concat(footerPrefixCls, "-disabled")]: disableDownload
+        })
+      });
+
+      const content = downloadTip !== null && downloadTip !== void 0 ? downloadTip : this.getLocalTextByKey("downloadTip");
+      return this.getFinalIconElement(icon, content);
+    };
+
+    this.foundation = new _previewFooterFoundation.default(this.adapter);
+  }
+
+  get adapter() {
+    return Object.assign(Object.assign({}, super.adapter), {
+      setStartMouseOffset: time => {
+        mouseActiveTime = time;
+      }
+    });
+  }
+
+  render() {
+    const {
+      min,
+      max,
+      step,
+      curPage,
+      totalNum,
+      zoom,
+      showTooltip,
+      className,
+      renderPreviewMenu
+    } = this.props;
+
+    if (renderPreviewMenu) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(footerPrefixCls, "-wrapper")
+      }, this.customRenderViewMenu());
+    }
+
+    return /*#__PURE__*/_react.default.createElement("section", {
+      className: (0, _classnames.default)(footerPrefixCls, "".concat(footerPrefixCls, "-wrapper"), className)
+    }, this.getIconChevronLeft(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(footerPrefixCls, "-page")
+    }, /*#__PURE__*/_react.default.createElement("span", null, curPage), /*#__PURE__*/_react.default.createElement("span", null, "/"), /*#__PURE__*/_react.default.createElement("span", null, totalNum)), this.getIconChevronRight(), /*#__PURE__*/_react.default.createElement(_divider.default, {
+      layout: "vertical"
+    }), this.getIconMinus(), /*#__PURE__*/_react.default.createElement(_slider.default, {
+      value: zoom,
+      min: min,
+      max: max,
+      step: step,
+      tipFormatter: v => "".concat(v, "%"),
+      tooltipVisible: showTooltip ? undefined : false,
+      onChange: this.handleSlideChange
+    }), this.getIconPlus(), this.getIconRatio(), /*#__PURE__*/_react.default.createElement(_divider.default, {
+      layout: "vertical"
+    }), this.getIconRotate(), this.getIconDownload());
+  }
+
+}
+
+exports.default = Footer;
+Footer.propTypes = {
+  curPage: _propTypes.default.number,
+  totalNum: _propTypes.default.number,
+  disabledPrev: _propTypes.default.bool,
+  disabledNext: _propTypes.default.bool,
+  disableDownload: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  zoom: _propTypes.default.number,
+  ratio: _propTypes.default.string,
+  prevTip: _propTypes.default.string,
+  nextTip: _propTypes.default.string,
+  zoomInTip: _propTypes.default.string,
+  zoomOutTip: _propTypes.default.string,
+  rotateTip: _propTypes.default.string,
+  downloadTip: _propTypes.default.string,
+  adaptiveTip: _propTypes.default.string,
+  originTip: _propTypes.default.string,
+  showTooltip: _propTypes.default.bool,
+  onZoomIn: _propTypes.default.func,
+  onZoomOut: _propTypes.default.func,
+  onPrev: _propTypes.default.func,
+  onNext: _propTypes.default.func,
+  onAdjustRatio: _propTypes.default.func,
+  onRotateLeft: _propTypes.default.func,
+  onDownload: _propTypes.default.func
+};
+Footer.defaultProps = {
+  min: 10,
+  max: 500,
+  step: 10,
+  showTooltip: false,
+  disableDownload: false
+};

package/lib/cjs/image/previewHeader.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { HeaderProps } from "./interface";
+declare const Header: React.FC<HeaderProps>;
+export default Header;