feat[empty]: add empty component

eizyc · Mar 30, 2024 · d57fd23 · d57fd23
1 parent 8e75edc
commit d57fd23
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 0 deletions.
diff --git a/src/components/Empty/_style.scss b/src/components/Empty/_style.scss
@@ -0,0 +1,18 @@
+@import '../../styles/variables';
+
+.#{$prefix}-empty {
+  text-align: center;
+  color: $neutral-400;
+  font-size: $font-size-sm;
+  &-image {
+    img {
+      height: inherit;
+      width: inherit;
+      object-fit: inherit;
+    }
+    svg {
+      height: inherit;
+      width: inherit;
+    }
+  }
+}
diff --git a/src/components/Empty/empty.stories.tsx b/src/components/Empty/empty.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Empty from './empty'
+
+type Story = StoryObj<typeof Empty>
+
+
+export const Playground: Story = {
+  args: {
+  }
+}
+
+/**
+ * The Example
+ */
+export const Example = {
+  render:() => (
+    <>
+      <Empty></Empty>
+    </>
+  )
+}
+
+/**
+ * The Example
+ */
+export const ExampleWithImage = {
+  args: {
+    image: '/storybook-test-empty.png',
+    imageStyle: {
+      height: '180px'
+    },
+    description: 'NO DATA'
+  }
+}
+
+
+/**
+ * ### How to import
+ * ~~~js
+ * import { Empty } from 'eizy-ui-react'
+ * ~~~
+ */
+const meta:Meta<typeof Empty> = {
+  title: 'Basic/Empty',
+  component: Empty,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: 'This is Empty',
+  }
+};
+
+export default meta
diff --git a/src/components/Empty/empty.test.tsx b/src/components/Empty/empty.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import { EmptyProps } from './empty'
+import Empty from './empty'
+import { STYLE_PREFIX } from "../../utils/const";
+
+const defaultProps:EmptyProps = {
+
+}
+
+describe('test empty component', () => {
+    it('should render the corrent default empty', ()=> {
+        render(<Empty {...defaultProps}>empty</Empty>)
+        const el = screen.getByText('empty')
+        expect(el).toBeInTheDocument()
+        expect(el).toHaveClass(`${STYLE_PREFIX}-empty`)
+    })
+})
diff --git a/src/components/Empty/empty.tsx b/src/components/Empty/empty.tsx
@@ -0,0 +1,49 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+import classnames from 'classnames'
+import { STYLE_PREFIX } from "../../utils/const";
+import EmptyIcon from './emptyIcon';
+
+const prefixCls = `${STYLE_PREFIX}-empty`
+
+export interface EmptyProps {
+    image?: string;
+    description?: string;
+    imageStyle?: CSSProperties;
+    className?: string;
+}
+
+export const Empty: FC<PropsWithChildren<EmptyProps>> = (props) => {
+    const { className, image, description, children, imageStyle, ...restProps } = props
+
+    const classes = classnames(prefixCls, className, {
+    })
+
+
+    const renderContent = ()=> {
+      if (children) {
+        return children
+      } else {
+        return (
+          <>
+            <div className={`${prefixCls}-image`} style={imageStyle}>
+              {image?<img src={image} alt='empty'/>:<EmptyIcon/>}
+            </div>
+            {description&&<p>{description}</p>}
+          </>
+        )
+      }
+    }
+
+    return <div className={classes}>
+      {renderContent()}
+    </div>
+}
+
+Empty.defaultProps = {
+  description: 'Data Not Found',
+  imageStyle: {
+    height: '120px'
+  }
+}
+
+export default Empty;
diff --git a/src/components/Empty/emptyIcon.tsx b/src/components/Empty/emptyIcon.tsx
@@ -0,0 +1,35 @@
+import { FC } from "react";
+
+export const EmptyIcon: FC = () => {
+  return <svg viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M199.559 222.903c70.8 0 128.194-13.806 128.194-30.837s-57.394-30.837-128.194-30.837c-70.799 0-128.193 13.806-128.193 30.837s57.394 30.837 128.193 30.837Z" fill="url(#a)"/>
+    <path opacity=".182" d="M97.485 92.96c11.064.773 20.143 7.242 23.56 15.778l2.034.142c10.867.76 19.061 10.186 18.301 21.053l-.137 1.955c-.76 10.867-10.186 19.061-21.053 18.301l-51.174-3.578c-10.867-.76-19.06-10.186-18.3-21.053l.136-1.955c.76-10.867 10.186-19.061 21.053-18.301l.053.003c4.572-7.977 14.462-13.12 25.527-12.346Z" fill="url(#b)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M302.996 160.348h1.057c.438 0 .793.355.793.793v10.749a.793.793 0 0 1-.793.793h-1.057a.793.793 0 0 1-.793-.793v-10.749c0-.438.355-.793.793-.793Z" fill="#F0F0F3" fillOpacity=".9"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M301.638 145.811c-2.221 4.455-9.867 18.121.847 19.651 10.714 1.53 10.236-7.566 8.357-10.821-1.88-3.255-4.001-5.078-4.001-8.83 0-3.753-2.983-4.456-5.203 0Z" fill="url(#c)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M94.216 191.081h1.358c.57 0 1.031.462 1.031 1.031v13.901a1.03 1.03 0 0 1-1.03 1.031h-1.36a1.03 1.03 0 0 1-1.03-1.031v-13.901c0-.569.461-1.031 1.03-1.031Z" fill="#F0F0F3" fillOpacity=".9"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M92.454 172.268c-2.874 5.767-12.77 23.452 1.096 25.432 13.865 1.98 13.246-9.791 10.814-14.004-2.431-4.212-5.176-6.571-5.176-11.428 0-4.856-3.86-5.766-6.734 0Z" fill="url(#d)"/>
+    <path opacity=".302" d="M311.084 93.165c5.504.384 9.983 3.72 11.471 8.057 4.594 1.031 7.872 5.29 7.534 10.131-.374 5.339-5.005 9.365-10.345 8.992l-22.851-1.598c-5.34-.373-9.366-5.005-8.992-10.344.373-5.34 5.004-9.366 10.344-8.992l.414.029c2.109-4.028 6.97-6.657 12.425-6.275Z" fill="url(#e)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M188.222 83.696v81.301l80.583 10.881v-72.786l-80.583-19.396Z" fill="#DDDDE7"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="m128.11 103.092 60.112-19.396v71.245l-60.112 21.898v-73.747Z" fill="#ECECF4"/>
+    <path d="M128.11 103.092v73.747l81.711 24.616v-77.651l-81.711-20.712Z" fill="url(#f)"/>
+    <path d="M209.821 123.804v77.651l58.984-25.577v-72.786l-58.984 20.712Z" fill="url(#g)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="m128.11 103.092-19.74 29.237 78.036 22.613 23.415-31.138-81.711-20.712Z" fill="url(#h)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="m209.821 123.804 19.562 33.807 61.252-26.843-21.83-27.676-58.984 20.712Z" fill="url(#i)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M263.84 133.134c-4.154 4.541-6.642 7.347-7.466 8.417-.329.465 1.031 1.777 4.078 3.936 4.216-.273 6.001-.053 5.353.66-.426.441-2.047 1.743-2.609 1.001-.375-.494-1.898-.81-4.57-.948-5.22-.179-6.901-2.227-5.041-6.145 1.859-3.917 3.929-7.225 6.207-9.923l3.825 2.582.223.42Z" fill="url(#j)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M264.617 118.909c-.66 3.324-.35 5.279.93 5.865 1.675.704.058 2.348-.281 2.527-.225.119-.026.46.6 1.022 1.059.565 1.838.79 2.335.675.498-.115 1.105-.68 1.821-1.697-1.334-.968-1.799-1.745-1.393-2.33.405-.585 1.021-1.196 1.847-1.831.802-.62.771-1.092-.093-1.415.209-.587.287-1.256.232-2.007l-2.811-.809-2.862-.631-.325.631Z" fill="url(#k)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M266.412 119.664c2.74-.788 3.468.423 3.468.935 0 .342-.086.908-.259 1.698a9.12 9.12 0 0 0 .712-.345c.84-.48 1.397-1.331 1.595-1.994.37-1.239-.718-3.867-3.54-3.475-.984-.188-1.14-1.651-2.85-.751-1.709.9-2.286.208-2.286 1.13 0 .923.071 3.766 3.16 2.802Z" fill="#353564"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M260.22 194.583c-1.803 1.115-3.062 1.672-3.778 1.672-1.074 0-1.655.962-.656 1.481.999.52 4.198-.229 5.017-.229s2.928.297 2.12-2.053c-.539-1.567-1.033-2.234-1.484-2.001l-1.219.33v.8ZM272.595 194.471c-1.247 1.731-2.195 2.702-2.844 2.913-.974.318-1.166 1.522-.079 1.785 1.086.262 3.726-1.487 4.469-1.729.743-.242 2.758-.547 1.208-2.832-1.034-1.524-1.714-2.094-2.042-1.71l-.99.715.278.858Z" fill="#3E3E6E"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M270.897 153.423c-1.173 7.819-2.828 13.93-4.964 18.334-1.168 5.485-1.916 22.088-3.467 22.716-1.552.629-2.657.252-2.601-.551.056-.804-2.067-23.061-1.825-26.522.161-2.308.184-6.886.07-13.734l12.787-.243Z" fill="url(#l)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M276.352 152.532c.167 7.507-.263 15.566-1.29 24.176-.96 10.732 1.112 16.677-.352 17.49-1.464.814-2.607.575-2.649-.229-.042-.805-4.501-22.528-4.682-25.993-.121-2.31-.654-6.857-1.599-13.64l10.572-1.804Z" fill="url(#m)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M265.346 126.99c1.749 1.898 3.356 1.898 4.822 0 .255-.172 5.638-.44 9.453 5.762.038.236-1.032 1.514-3.211 3.836h-.667c1.481 7.63 1.703 13.709.667 18.236-.136.471-6.254.736-18.355.794-.032-10.209.644-16.245 2.026-18.108-.169-.343-1.424-1.463-3.765-3.362.737-1.586 1.846-3.112 3.326-4.576 1.48-1.464 3.381-2.324 5.704-2.582Z" fill="#5B5BEA"/>
+    <path d="M240.167 120.884a1.715 1.715 0 1 0-2.426 2.427l27.255 27.255a1.715 1.715 0 1 0 2.426-2.427l-27.255-27.255Z" fill="#EFAB23"/>
+    <path d="M253.962 135.173c5.269-5.269 5.269-13.812 0-19.081s-13.811-5.269-19.081 0c-5.269 5.269-5.269 13.812 0 19.081 5.27 5.269 13.812 5.269 19.081 0Z" fill="url(#n)"/>
+    <path d="M252.372 133.583c4.391-4.391 4.391-11.51 0-15.901s-11.51-4.391-15.9 0c-4.391 4.391-4.391 11.51 0 15.901 4.39 4.391 11.509 4.391 15.9 0Z" fill="url(#o)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M274.951 136.112c-.137.86 2.257 4.618 3.158 5.978.293.099-7.525 3.266-8.188 3.705-1.807 1.199-1.829 3.055-.352 3.478 1.476.423 1.766-2.332 2.051-2.398 4.976-1.152 5.411-1.027 8.715-1.83 2.852-.617.698-5.578-1.219-10.918-1.917-5.34-4.029 1.125-4.165 1.985Z" fill="url(#p)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M273.691 127.52c.911.435 1.545.761 1.903.976.935.562 1.574 1.115 1.986 1.449 1.277 1.034 1.919 2.094 2.289 2.889.309.55-2.969 5.534-6.178 4.969-.439-.018-1.137-1.046-2.095-3.085l2.095-7.198Z" fill="#5B5BEA"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M260.016 146.144c1.098-.357 1.844-1.374 1.665-1.925-.179-.55-1.21-.866-1.862-.001-.187.248-.096 1.467-1.948.631-.499-.225-.631.037-.52.377.105.324-.058.844 1.154.961.458.044 1.059.103 1.511-.043Z" fill="#FFCEBF"/>
+    <path d="M258.812 145.273c.468-.34.709-.805.539-1.039-.17-.233-.687-.148-1.154.192-.468.339-.709.804-.539 1.038.17.234.687.148 1.154-.191Z" fill="#FFCEBF"/><defs><linearGradient id="a" x1="199.559" y1="230.268" x2="199.559" y2="166.495" gradientUnits="userSpaceOnUse"><stop stopColor="#FCFCFE" stopOpacity="0"/><stop offset="1" stopColor="#FAFAFA"/></linearGradient><linearGradient id="b" x1="98.475" y1="93.029" x2="94.603" y2="148.4" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="c" x1="304.405" y1="142.727" x2="304.405" y2="165.634" gradientUnits="userSpaceOnUse"><stop stopColor="#EBEBEE"/><stop offset="1" stopColor="#FCFCFD"/></linearGradient><linearGradient id="d" x1="96.035" y1="168.278" x2="96.035" y2="197.923" gradientUnits="userSpaceOnUse"><stop stopColor="#EBEBEE"/><stop offset="1" stopColor="#FCFCFD"/></linearGradient><linearGradient id="e" x1="310.168" y1="93.1" x2="308.319" y2="119.546" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="f" x1="147.781" y1="152.274" x2="199" y2="167.682" gradientUnits="userSpaceOnUse"><stop stopColor="#F6F6F9"/><stop offset="1" stopColor="#E4E4EB"/></linearGradient><linearGradient id="g" x1="239.313" y1="189.83" x2="239.313" y2="128.36" gradientUnits="userSpaceOnUse"><stop stopColor="#EEEEF3"/><stop offset="1" stopColor="#DDDDE5"/></linearGradient><linearGradient id="h" x1="140.183" y1="124.014" x2="160.644" y2="147.103" gradientUnits="userSpaceOnUse"><stop stopColor="#F4F4F9"/><stop offset="1" stopColor="#E3E3EA"/></linearGradient><linearGradient id="i" x1="264.789" y1="121.773" x2="245.776" y2="150.435" gradientUnits="userSpaceOnUse"><stop stopColor="#ECECF1"/><stop offset="1" stopColor="#EBEDF3"/></linearGradient><linearGradient id="j" x1="258.599" y1="148.291" x2="261.804" y2="132.702" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient><linearGradient id="k" x1="265.697" y1="120.013" x2="270.954" y2="125.923" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient><linearGradient id="l" x1="262.072" y1="192.861" x2="261.325" y2="154.661" gradientUnits="userSpaceOnUse"><stop stopColor="#7878C3"/><stop offset="1" stopColor="#5C5CBB"/></linearGradient><linearGradient id="m" x1="273.309" y1="192.69" x2="268.461" y2="154.773" gradientUnits="userSpaceOnUse"><stop stopColor="#7878C3"/><stop offset="1" stopColor="#5C5CBB"/></linearGradient><linearGradient id="n" x1="256.584" y1="127.758" x2="232.329" y2="125.588" gradientUnits="userSpaceOnUse"><stop stopColor="#FAC251"/><stop offset="1" stopColor="#FFDE9B"/></linearGradient><linearGradient id="o" x1="236.472" y1="117.682" x2="252.372" y2="133.583" gradientUnits="userSpaceOnUse"><stop stopColor="#FCFCFF"/><stop offset="1" stopColor="#FAFAFC"/></linearGradient><linearGradient id="p" x1="274.653" y1="148.457" x2="278.906" y2="136.991" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient></defs></svg>
+}
+
+
+export default EmptyIcon;
diff --git a/src/components/Empty/index.tsx b/src/components/Empty/index.tsx
@@ -0,0 +1,2 @@
+import Empty from './empty'
+export default Empty
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -20,6 +20,8 @@
 
 @import "../components/Upload/style";
 
+@import "../components/Empty/style";
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import Empty from './empty'
		export default Empty
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,6 +20,8 @@

		@import "../components/Upload/style";

		@import "../components/Empty/style";