fix: add image component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zens",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "description": "MarkFlowy's ui component library.",
   "keywords": [],
   "homepage": "https://github.com/drl990114/zens#readme",

src/Image/ErrorTip.tsx

@@ -0,0 +1,73 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+
+import styled from 'styled-components';
+
+const ErrorTipContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: ${props => props.theme.errorTipColor};
+
+  .zens-error-icon-box {
+    width: 50px;
+    height: 50px;
+  }
+
+  .zens-error-icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  .zens-error-text {
+    font-size: 12px;
+    line-height: 1.6667;
+    text-align: center;
+    padding: 8px 16px;
+  }
+`;
+
+export interface ErrorTipProps {
+  errortip: string;
+  height?: number;
+  width?: number;
+}
+export const ErrorTip = (props: ErrorTipProps) => {
+  const { errortip, width = 100, height = 60 } = props;
+
+  return (
+    <ErrorTipContainer style={{ width: `${width}px`, height: `${height}px` }}>
+      <div className="zens-error-icon-box">
+        <svg
+          fill="none"
+          stroke="currentColor"
+          stroke-width="4"
+          viewBox="0 0 48 48"
+          aria-hidden="true"
+          focusable="false"
+          className="zens-error-icon"
+        >
+          <path d="M41 26V9a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v30a2 2 0 0 0 2 2h17"></path>
+          <path d="m24 33 9-8.5V27s-2 1-3.5 2.5C27.841 31.159 27 33 27 33h-3Zm0 0-3.5-4.5L17 33h7Z"></path>
+          <path
+            fill="currentColor"
+            stroke="none"
+            d="M20.5 28.5 17 33h7l-3.5-4.5ZM33 24.5 24 33h3s.841-1.841 2.5-3.5C31 28 33 27 33 27v-2.5Z"
+          ></path>
+          <path
+            fill="currentColor"
+            fill-rule="evenodd"
+            stroke="none"
+            d="M46 38a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-4.95-4.782 1.74 1.74-3.045 3.046 3.046 3.046-1.74 1.74-3.047-3.045-3.046 3.046-1.74-1.74 3.046-3.047-3.046-3.046 1.74-1.74 3.046 3.046 3.046-3.046Z"
+            clip-rule="evenodd"
+          ></path>
+          <path d="M17 15h-2v2h2v-2Z"></path>
+        </svg>
+      </div>
+
+      <span className="zens-error-text">{errortip}</span>
+    </ErrorTipContainer>
+  );
+};
+export default ErrorTip;

src/Image/Img.tsx

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import React, { forwardRef } from 'react';
+
+import imagePromiseFactory from './imagePromiseFactory';
+import useImage, { useImageProps } from './use-image';
+
+export type ImgProps = Omit<
+  React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
+  'src'
+> &
+  Omit<useImageProps, 'srcList'> & {
+    src: useImageProps['srcList']; // same types, different name
+    loader?: JSX.Element | null;
+    unloader?: JSX.Element | null;
+    decode?: boolean;
+    crossorigin?: string;
+    container?: (children: React.ReactNode) => JSX.Element;
+    loaderContainer?: (children: React.ReactNode) => JSX.Element;
+    unloaderContainer?: (children: React.ReactNode) => JSX.Element;
+  };
+
+const passthroughContainer = (x) => x;
+
+function Img(
+  {
+    decode = true,
+    src: srcList = [],
+    loader = null,
+    unloader = null,
+    container = passthroughContainer,
+    loaderContainer = passthroughContainer,
+    unloaderContainer = passthroughContainer,
+    imgPromise,
+    crossorigin,
+    useSuspense = false,
+    ...imgProps // anything else will be passed to the <img> element
+  }: ImgProps,
+  ref,
+): JSX.Element | null {
+  imgPromise = imgPromise || imagePromiseFactory({ decode, crossOrigin: crossorigin });
+  const { src, isLoading } = useImage({
+    srcList,
+    imgPromise,
+    useSuspense,
+  });
+
+  // console.log({src, isLoading, resolvedSrc, useSuspense})
+
+  // show img if loaded
+  if (src) return container(<img src={src} {...imgProps} ref={ref} />);
+
+  // show loader if we have one and were still trying to load image
+  if (!useSuspense && isLoading) return loaderContainer(loader);
+
+  // show unloader if we have one and we have no more work to do
+  if (!useSuspense && unloader) return unloaderContainer(unloader);
+
+  return null;
+}
+
+export default forwardRef<HTMLImageElement, ImgProps>(Img);

src/Image/demo/basic.tsx

@@ -0,0 +1,15 @@
+import { Image } from 'zens';
+
+export default () => {
+  const handlePressEnter = () => {
+    alert('You pressed enter!');
+  };
+
+  return (
+    <Image
+      width={300}
+      height={200}
+      src="https://app.requestly.io/delay/5000/https://nextui-docs-v2.vercel.app/images/hero-card-complete.jpe"
+    />
+  );
+};

src/Image/imagePromiseFactory.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+export default ({ decode = true, crossOrigin = '' }) =>
+  (src): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      const i = new Image();
+      if (crossOrigin) i.crossOrigin = crossOrigin;
+      i.onload = () => {
+        decode && i.decode ? i.decode().then(resolve).catch(reject) : resolve();
+      };
+      i.onerror = reject;
+      i.src = src;
+    });
+  };

src/Image/index.md

@@ -0,0 +1,17 @@
+---
+title: Image 图片
+nav:
+  title: 组件
+  order: 2
+group:
+  title: 反馈
+  order: 1
+---
+
+# Image 图片
+
+图片
+
+### 基本用法
+
+<code src="./demo/basic.tsx"></code>