@arcblock/nft-display 2.5.61 → 2.5.63

package/lib/index.d.ts

@@ -3,6 +3,7 @@ import { NFTColor } from './color';
 export * from './color';
 export type NFTLayout = (data: string, width: any, height: any) => string;
 export type NFTVariant = LiteralUnion<'did-space' | 'app-space' | 'app-passport' | 'app-purchase', string>;
+export type NFTTagVariant = LiteralUnion<'info' | 'success' | 'error' | 'warning', string>;
 export type NFTChain = LiteralUnion<'arcblock' | 'ethereum' | '', string>;
 export type NFTSubject = {
     name: string;
@@ -24,7 +25,8 @@ export type NFTProps = {
     extra: NFTExtra;
     verifiable?: boolean;
     chain?: NFTChain;
-    revoked?: boolean;
+    tag?: string;
+    tagVariant?: NFTTagVariant;
 };
 export declare const formatDid: (did: string, length?: number) => string;
 export declare const getLayoutSvg: (variant: NFTVariant, id: string, color: NFTColor) => NFTLayout;
@@ -35,5 +37,5 @@ export declare const getDidSvg: (did: string, id: string, fontSize?: number) =>
 export declare const getVerifiableBadge: (id: string) => string;
 export declare const getChainBadge: (chain: NFTChain, only: boolean, id: string) => string;
 export declare const getBadgesSvg: (verifiable: boolean, chain: NFTChain, id: string) => string;
-export declare const getRevokedSvg: (revoked: boolean, id: string) => string;
+export declare const getTagSvg: (tag: string, variant: NFTTagVariant, id: string) => string;
 export declare const getSvg: (props: NFTProps) => string;

package/lib/index.js

@@ -26,7 +26,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSvg = exports.getRevokedSvg = exports.getBadgesSvg = exports.getChainBadge = exports.getVerifiableBadge = exports.getDidSvg = exports.getExtraSvg = exports.getIssuerSvg = exports.getHeaderSvg = exports.getLayoutSvg = exports.formatDid = void 0;
+exports.getSvg = exports.getTagSvg = exports.getBadgesSvg = exports.getChainBadge = exports.getVerifiableBadge = exports.getDidSvg = exports.getExtraSvg = exports.getIssuerSvg = exports.getHeaderSvg = exports.getLayoutSvg = exports.formatDid = void 0;
 const nanoid_1 = require("nanoid");
 const DidMotif = __importStar(require("@arcblock/did-motif"));
 const color_1 = require("./color");
@@ -779,21 +779,27 @@ const getBadgesSvg = (verifiable, chain, id) => {
     return [verifiableBadge, chainBadge].filter(Boolean).join('');
 };
 exports.getBadgesSvg = getBadgesSvg;
-const getRevokedSvg = (revoked, id) => {
-    if (revoked) {
-        const filterId = getId(id, 'revoked-distort');
-        return `<g id="${getId(id, 'revoked')}" transform="translate(112,-36) rotate(45)">
-      <rect x="60" y="0" width="90" height="30" stroke="rgba(255,0,0,0.8)" stroke-width="2" />
+const getTagSvg = (tag, variant, id) => {
+    const colors = {
+        success: '#34BE74',
+        error: '#F16E6E',
+        info: '#0775F8',
+        warning: '#DE9E37',
+    };
+    if (tag) {
+        const filterId = getId(id, 'tag-distort');
+        return `<g id="${getId(id, 'tag')}" transform="translate(112,-36) rotate(45)">
+      <rect x="60" y="0" width="95" height="30" stroke="${colors[variant]}" stroke-width="2" />
       <text
-    x="64"
+    x="104"
     y="12"
-    font-size="15"
+    font-size="14"
     font-weight="bold"
     font-family="Helvetica, Arial, sans-serif"
-    fill="rgba(255,0,0,0.8)"
-    text-anchor="start"
+    fill="${colors[variant]}"
+    text-anchor="middle"
     alignment-baseline="middle"
-    dominant-baseline="middle" filter="url(#${filterId})">REVOKED</text>
+    dominant-baseline="middle" filter="url(#${filterId})">${tag.toUpperCase()}</text>
     <defs>
       <filter id="${filterId}">
         <feTurbulence baseFrequency="0.01 0.01" numOctaves="1" result="noise"  />
@@ -804,7 +810,7 @@ const getRevokedSvg = (revoked, id) => {
     }
     return '';
 };
-exports.getRevokedSvg = getRevokedSvg;
+exports.getTagSvg = getTagSvg;
 const getSvg = (props) => {
     const id = props.id || (0, nanoid_1.nanoid)(8);
     const width = props.width || DEFAULT_WIDTH;
@@ -816,7 +822,7 @@ const getSvg = (props) => {
     const extra = (0, exports.getExtraSvg)(props.extra, id);
     const badges = (0, exports.getBadgesSvg)(props.verifiable, props.chain, id);
     const identity = (0, exports.getDidSvg)(props.did, id);
-    const revoked = (0, exports.getRevokedSvg)(props.revoked || false, id);
-    return layout([header, issuer, extra, badges, identity, revoked].filter(Boolean).join(''), width, height);
+    const tag = (0, exports.getTagSvg)(props.tag, props.tagVariant, id);
+    return layout([header, issuer, extra, badges, identity, tag].filter(Boolean).join(''), width, height);
 };
 exports.getSvg = getSvg;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/nft-display",
-  "version": "2.5.61",
+  "version": "2.5.63",
   "description": "arcblock's nft display generic component",
   "keywords": [
     "nft"
@@ -42,5 +42,5 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4"
   },
-  "gitHead": "382f83849428e3dff23540983b06a65f658ef1b2"
+  "gitHead": "27127c876d9691b6c3a8622a44170787dc931429"
 }