Merge pull request #489 from kne-union/meetacoo-1

Meetacoo 1

Author: Meetacoo

.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 package-lock.json
 .idea
+.codebuddy

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-core",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "files": [
     "build"
   ],

src/components/EnumStateTag/README.md

@@ -285,6 +285,49 @@ render(<BaseExample />);
 
 ```
 
+- 基本示例
+- 枚举状态标签
+- _StateTag(@components/StateTag),antd(antd),global(@components/Global)
+
+```jsx
+const { StateTagEnum } = _StateTag;
+const { PureGlobal } = global;
+const { Space } = antd;
+
+const BaseExample = ()=>{
+  return (
+    <PureGlobal
+      preset={{
+        locale: "zh-CN",
+        enums: {
+          testEnums: async ({ locale }) => {
+            console.log(locale);
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve([
+                  { value: "1", description: "第一项", type: 'success' },
+                  { value: "2", description: "第二项", type: 'danger' },
+                  { value: "3", description: "第三项", type: 'info'},
+                ]);
+              }, 1000);
+            });
+          },
+        },
+      }}
+    >
+      <Space>
+        <StateTagEnum moduleName="testEnums" name="1" />
+        <StateTagEnum moduleName="testEnums" name="2" />
+        <StateTagEnum moduleName="testEnums" name="3" />
+      </Space>
+    </PureGlobal>
+  )
+};
+
+render(<BaseExample />);
+
+```
+
 
 ### API
 

src/components/EnumStateTag/doc/api.md

@@ -0,0 +1,57 @@
+import React, {useMemo} from "react";
+import classnames from "classnames";
+
+import style from "./style.module.scss";
+import {Space, Tag} from "antd";
+
+const tagTypeEnum = {
+  default: "#666666",
+  skill: {
+    color: "#666666", borderColor: "#EEEEEE",
+  },
+  result: "#666666",
+  filterResult: "#5CB8B2",
+  success: "#027A48",
+  progress: "#F09700",
+  danger: "#D14343",
+  info: "#155ACF",
+  other: "#6740C3",
+};
+
+const StateTag = ({
+                    showBorder = false,
+                    text = "",
+                    type = "default",
+                    showBackground = true,
+                    className,
+                    filterName,
+                    ...props
+                  }) => {
+  const tagColor = useMemo(() => ({
+    color: tagTypeEnum?.[type]?.color || tagTypeEnum[type],
+    borderColor: tagTypeEnum?.[type]?.borderColor || tagTypeEnum[type],
+  }), [type]);
+
+  return (<Space
+    data-testid={"components-core-state-tag"}
+    className={classnames(style["state-tag-wrapper"], type === "filterResult" ? style["state-tag-filter-result-wrapper"] : "")}
+    align="center"
+    size={4}
+  >
+    {filterName ? (<span className={style["state-tag-filter-name"]}>{filterName}:</span>) : null}
+    <Tag
+      color={tagColor.color}
+      {...props}
+      style={{
+        background: showBackground ? tagColor.color + "0F" : "none",
+        color: tagColor.color,
+        border: showBorder ? `1px solid ${tagColor.borderColor}` : "none",
+      }}
+      className={classnames(style["state-tag"], className, type === "result" ? style["state-result-tag"] : "", type === "skill" ? style["state-skill-tag"] : "", style[`state-tag-${type}`], showBackground ? style["show-bg"] : "", showBorder ? style["show-border"] : "", props?.onClick ? style["event-tag"] : "")}
+    >
+      <span className={style["tag-text"]}>{text}</span>
+    </Tag>
+  </Space>);
+};
+
+export default StateTag;