@cfxjs/sirius-next-common 0.1.26 → 0.1.28

package/dist/chunk-T5OKHLM7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tooltip/index.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  ComponentProps,\n  useRef,\n  MouseEventHandler,\n} from 'react';\nimport _Tooltip from './tt';\nimport clsx from 'clsx';\nimport { useClickAway } from '@cfx-kit/react-utils/dist/hooks';\nimport { cn } from 'src/utils';\n\nexport interface TooltipProps\n  extends Omit<\n    ComponentProps<typeof _Tooltip>,\n    'trigger' | 'containerClassName'\n  > {\n  title?: React.ReactNode;\n  children?: React.ReactNode;\n  triggerProps?: HTMLAttributes<HTMLElement>;\n  className?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n  title,\n  children = null,\n  positioning = {},\n  className,\n  ...rest\n}) => {\n  const { placement = 'top' } = positioning;\n  const onCloseRef = useRef<MouseEventHandler<HTMLElement>>();\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const triggerContentRef = useRef<HTMLElement | null>(null);\n  useClickAway([triggerRef, triggerContentRef], e => {\n    onCloseRef.current?.(\n      e as unknown as React.MouseEvent<HTMLElement, MouseEvent>,\n    );\n  });\n  return (\n    <_Tooltip\n      trigger={({ triggerProps }) => {\n        // save onClick to hide tooltip while click outside\n        onCloseRef.current = triggerProps.onClick;\n        // override onClick with onPointerMove to prevent hide tooltip when click trigger and show tooltip in mobile\n        triggerProps.onClick = e => {\n          triggerProps.onPointerMove?.(e as React.PointerEvent<HTMLElement>);\n        };\n        return (\n          <span\n            ref={triggerRef}\n            {...(title ? triggerProps : {})}\n            className={cn(className, triggerProps.className)}\n          >\n            {children}\n          </span>\n        );\n      }}\n      containerClassName={clsx(\n        'sirius-next-tooltip',\n        'lh-normal max-w-250px z-1000 w-max min-w-unset!',\n        'all-[a]:text-[var(--theme-color-blue0)] all-[a:hover]:text-[var(--theme-color-blue2)]',\n        '[&.ui-tooltip>[data-part=arrow]]:[--arrow-size:6px] [&.ui-tooltip>[data-part=arrow]]:[--arrow-background:#333]',\n      )}\n      openDelay={0}\n      closeOnPointerDown={false}\n      {...rest}\n      positioning={{\n        ...positioning,\n        placement,\n      }}\n    >\n      {({ contentProps }) => {\n        const _onPointerLeave = contentProps.onPointerLeave;\n        contentProps.onPointerLeave = e => {\n          if (e.pointerType === 'touch') return;\n          _onPointerLeave?.(e);\n        };\n        return (\n          <div\n            className=\"px-8px py-6px text-12px text-#fff text-left shadow break-words ws-normal bg-#333 min-w-30px min-h-32px decoration-none rounded-2px\"\n            ref={_ref =>\n              _ref\n                ? (triggerContentRef.current = _ref.parentElement)\n                : (triggerContentRef.current = null)\n            }\n            {...contentProps}\n          >\n            {title}\n          </div>\n        );\n      }}\n    </_Tooltip>\n  );\n};\n"],"mappings":";;;;;;;;AAAA;AAAA,EAGE;AAAA,OAEK;AAEP,OAAO,UAAU;AACjB,SAAS,oBAAoB;AAwCnB;AA1BH,IAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA,WAAW;AAAA,EACX,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,YAAY,MAAM,IAAI;AAC9B,QAAM,aAAa,OAAuC;AAC1D,QAAM,aAAa,OAAwB,IAAI;AAC/C,QAAM,oBAAoB,OAA2B,IAAI;AACzD,eAAa,CAAC,YAAY,iBAAiB,GAAG,OAAK;AACjD,eAAW;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,CAAC,EAAE,aAAa,MAAM;AAE7B,mBAAW,UAAU,aAAa;AAElC,qBAAa,UAAU,OAAK;AAC1B,uBAAa,gBAAgB,CAAoC;AAAA,QACnE;AACA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACJ,GAAI,QAAQ,eAAe,CAAC;AAAA,YAC7B,WAAW,GAAG,WAAW,aAAa,SAAS;AAAA,YAE9C;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA,MACA,oBAAoB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,MACX,oBAAoB;AAAA,MACnB,GAAG;AAAA,MACJ,aAAa;AAAA,QACX,GAAG;AAAA,QACH;AAAA,MACF;AAAA,MAEC,WAAC,EAAE,aAAa,MAAM;AACrB,cAAM,kBAAkB,aAAa;AACrC,qBAAa,iBAAiB,OAAK;AACjC,cAAI,EAAE,gBAAgB;AAAS;AAC/B,4BAAkB,CAAC;AAAA,QACrB;AACA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK,UACH,OACK,kBAAkB,UAAU,KAAK,gBACjC,kBAAkB,UAAU;AAAA,YAElC,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-T6TINFBB.js

@@ -0,0 +1,49 @@
+import {
+  Tooltip
+} from "./chunk-IHFBGGHI.js";
+import {
+  getTranslations
+} from "./chunk-DQGLZCIG.js";
+
+// src/components/AddressContainer/label.tsx
+import { Translation } from "react-i18next";
+import { Bookmark, Hash } from "@zeit-ui/react-icons";
+import ICON_ENS from "./logo-cns-7CXISC6I.svg";
+import { jsx } from "react/jsx-runtime";
+var getLabelInfo = (label, type) => {
+  const translations = getTranslations();
+  if (label) {
+    let trans = "";
+    let icon = null;
+    if (type === "tag") {
+      trans = translations.profile.tip.label;
+      icon = /* @__PURE__ */ jsx(Bookmark, { color: "var(--theme-color-gray2)", size: 16 });
+    } else if (type === "ens") {
+      trans = translations.ens.label;
+      icon = /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: ICON_ENS,
+          className: "w-[16px] h-[16px] mb-[3px] mr-[2px]",
+          alt: ""
+        }
+      );
+    } else if (type === "nametag") {
+      trans = translations.nametag.label;
+      icon = /* @__PURE__ */ jsx(Hash, { color: "var(--theme-color-gray2)", size: 16 });
+    }
+    return {
+      label,
+      icon: /* @__PURE__ */ jsx("span", { className: "mr-[2px]", children: /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(Translation, { children: (t) => t(trans) }), children: icon }) })
+    };
+  }
+  return {
+    label: "",
+    icon: null
+  };
+};
+
+export {
+  getLabelInfo
+};
+//# sourceMappingURL=chunk-T6TINFBB.js.map

package/dist/chunk-T6TINFBB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AddressContainer/label.tsx"],"sourcesContent":["import { Translation } from 'react-i18next';\nimport { Bookmark, Hash } from '@zeit-ui/react-icons';\nimport { Tooltip } from '../Tooltip';\nimport { getTranslations } from '../../store';\nimport ICON_ENS from '../../images/logo-cns.svg';\n\nexport const getLabelInfo = (label: string, type: string) => {\n  const translations = getTranslations();\n  if (label) {\n    let trans: string = '';\n    let icon: React.ReactNode = null;\n\n    if (type === 'tag') {\n      trans = translations.profile.tip.label;\n      icon = <Bookmark color=\"var(--theme-color-gray2)\" size={16} />;\n    } else if (type === 'ens') {\n      trans = (translations as any).ens.label;\n      icon = (\n        <img\n          src={ICON_ENS}\n          className=\"w-[16px] h-[16px] mb-[3px] mr-[2px]\"\n          alt=\"\"\n        />\n      );\n      // nametag from official operational staff\n    } else if (type === 'nametag') {\n      trans = translations.nametag.label;\n      icon = <Hash color=\"var(--theme-color-gray2)\" size={16} />;\n    }\n\n    return {\n      label,\n      icon: (\n        <span className=\"mr-[2px]\">\n          <Tooltip title={<Translation>{t => t(trans)}</Translation>}>\n            {icon}\n          </Tooltip>\n        </span>\n      ),\n    };\n  }\n\n  return {\n    label: '',\n    icon: null,\n  };\n};\n"],"mappings":";;;;;;;;AAAA,SAAS,mBAAmB;AAC5B,SAAS,UAAU,YAAY;AAG/B,OAAO,cAAc;AAUR;AARN,IAAM,eAAe,CAAC,OAAe,SAAiB;AAC3D,QAAM,eAAe,gBAAgB;AACrC,MAAI,OAAO;AACT,QAAI,QAAgB;AACpB,QAAI,OAAwB;AAE5B,QAAI,SAAS,OAAO;AAClB,cAAQ,aAAa,QAAQ,IAAI;AACjC,aAAO,oBAAC,YAAS,OAAM,4BAA2B,MAAM,IAAI;AAAA,IAC9D,WAAW,SAAS,OAAO;AACzB,cAAS,aAAqB,IAAI;AAClC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV,KAAI;AAAA;AAAA,MACN;AAAA,IAGJ,WAAW,SAAS,WAAW;AAC7B,cAAQ,aAAa,QAAQ;AAC7B,aAAO,oBAAC,QAAK,OAAM,4BAA2B,MAAM,IAAI;AAAA,IAC1D;AAEA,WAAO;AAAA,MACL;AAAA,MACA,MACE,oBAAC,UAAK,WAAU,YACd,8BAAC,WAAQ,OAAO,oBAAC,eAAa,iBAAK,EAAE,KAAK,GAAE,GACzC,gBACH,GACF;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;","names":[]}

package/dist/chunk-TK4FIUGX.js

@@ -0,0 +1,105 @@
+import {
+  useBreakpoint
+} from "./chunk-TOKKKTFG.js";
+import {
+  Tooltip
+} from "./chunk-XXEJA3Q7.js";
+import {
+  selectText
+} from "./chunk-4WJBUQY7.js";
+
+// src/components/Text/index.tsx
+import React from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var getTypeColor = (type) => {
+  const colors = {
+    default: "inherit",
+    primary: "#7cd77b",
+    secondary: "#666",
+    success: "#7cd77b",
+    warning: "#ffc438",
+    error: "#e15c56"
+  };
+  return colors[type] || colors.default;
+};
+var Text = React.memo(
+  ({
+    className,
+    children,
+    maxWidth: _maxWidth,
+    mobileMaxWidth = _maxWidth,
+    maxCount: _maxCount,
+    mobileMaxCount = _maxCount,
+    hoverValue,
+    hoverValueMaxCount: outerHoverValueMaxCount,
+    tag = "p",
+    type = "default",
+    hideTooltip = false,
+    ...props
+  }) => {
+    const Component = tag;
+    const bp = useBreakpoint();
+    let child = children;
+    const maxCount = bp === "s" ? mobileMaxCount : _maxCount;
+    const maxWidth = bp === "s" ? mobileMaxWidth : _maxWidth;
+    if (maxWidth === void 0 && maxCount && typeof children === "string" && children.length > maxCount) {
+      child = String.prototype.substr.call(children, 0, maxCount) + "...";
+    }
+    let textContent = hoverValue || children;
+    if (bp === "s" && typeof textContent === "string") {
+      const hoverValueMaxCount = outerHoverValueMaxCount || 34;
+      let textContentCopy = textContent;
+      let newTextContent = [];
+      let count = 0;
+      while (textContentCopy.length > hoverValueMaxCount) {
+        newTextContent.push(
+          /* @__PURE__ */ jsx("span", { children: textContentCopy.substr(0, hoverValueMaxCount) }, count)
+        );
+        newTextContent.push(/* @__PURE__ */ jsx("br", {}, `br${count}`));
+        textContentCopy = textContentCopy.substr(hoverValueMaxCount);
+        if (count > 3) {
+          textContentCopy = textContentCopy.substr(0, hoverValueMaxCount - 3) + "...";
+        }
+      }
+      newTextContent.push(/* @__PURE__ */ jsx("span", { children: textContentCopy }, ++count));
+      textContent = newTextContent;
+    }
+    const tooltipText = !hideTooltip && React.createElement(
+      "div",
+      {
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          selectText(e.currentTarget);
+        }
+      },
+      textContent
+    );
+    const p = { title: tooltipText };
+    return React.createElement(Tooltip, p, [
+      /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        Component,
+        {
+          className: clsx(
+            "sirius-text truncate vertical-bottom",
+            "all-[a]:truncate all-[a]:vertical-bottom all-[a]:cursor-pointer all-[a:hover]:text-#0626ae",
+            className
+          ),
+          style: {
+            maxWidth,
+            display: maxWidth === void 0 ? "inherit" : "inline-block",
+            color: getTypeColor(type)
+          },
+          ...props,
+          children: child
+        }
+      ) }, "text")
+    ]);
+  }
+);
+
+export {
+  Text
+};
+//# sourceMappingURL=chunk-TK4FIUGX.js.map

package/dist/chunk-TK4FIUGX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Text/index.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { Tooltip } from '../Tooltip';\nimport { selectText } from '../../utils';\nimport { useBreakpoint } from '../../utils/media';\n\ntype NormalTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'primary';\n\ntype TextProps = {\n  children?: React.ReactNode;\n  maxWidth?: string;\n  mobileMaxWidth?: string;\n  maxCount?: number;\n  mobileMaxCount?: number;\n  hoverValue?: React.ReactNode;\n  hoverValueMaxCount?: number;\n  tag?: 'p' | 'span';\n  type?: NormalTypes;\n  hideTooltip?: boolean;\n};\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof TextProps>;\n\nconst getTypeColor = (type: NormalTypes) => {\n  const colors: { [key in NormalTypes]: string } = {\n    default: 'inherit',\n    primary: '#7cd77b',\n    secondary: '#666',\n    success: '#7cd77b',\n    warning: '#ffc438',\n    error: '#e15c56',\n  };\n\n  return colors[type] || colors.default;\n};\n\n// note:\n// 1. maxWidth priority is higher than maxCount\n// 2. maxCount only apply to string\n// 3. if hoverValue is provided, use hoverValue as Tooltip text, otherwise use children\n//    if text of prop tooltip is provided, use as Tooltip text\nexport const Text = React.memo(\n  ({\n    className,\n    children,\n    maxWidth: _maxWidth,\n    mobileMaxWidth = _maxWidth,\n    maxCount: _maxCount,\n    mobileMaxCount = _maxCount,\n    hoverValue,\n    hoverValueMaxCount: outerHoverValueMaxCount,\n    tag = 'p',\n    type = 'default',\n    hideTooltip = false,\n    ...props\n  }: NativeAttrs & TextProps) => {\n    const Component = tag;\n    const bp = useBreakpoint();\n    let child: React.ReactNode = children;\n    const maxCount = bp === 's' ? mobileMaxCount : _maxCount;\n    const maxWidth = bp === 's' ? mobileMaxWidth : _maxWidth;\n    if (\n      maxWidth === undefined &&\n      maxCount &&\n      typeof children === 'string' &&\n      children.length > maxCount\n    ) {\n      child = String.prototype.substr.call(children, 0, maxCount) + '...';\n    }\n\n    let textContent = hoverValue || children;\n    // 控制移动端字符串类型 tooltip 的长度\n    // 这里有个问题，就是截断的位置可能是一个完整的单词，暂时没有办法处理，如果为了避免这种情况，需要由外面传入前对内容进行处理，比如设置固定宽度小于 24rem\n    // @todo 后续可以试下读取文本长度，动态设置容器宽度值的方式，可以避免截断位置的问题\n    if (bp === 's' && typeof textContent === 'string') {\n      const hoverValueMaxCount = outerHoverValueMaxCount || 34; // default text count is 36\n      let textContentCopy: string = textContent;\n      let newTextContent: Array<React.ReactNode> = [];\n      let count = 0;\n      while (textContentCopy.length > hoverValueMaxCount) {\n        newTextContent.push(\n          <span key={count}>\n            {textContentCopy.substr(0, hoverValueMaxCount)}\n          </span>,\n        );\n        newTextContent.push(<br key={`br${count}`} />);\n        textContentCopy = textContentCopy.substr(hoverValueMaxCount);\n        // 防止文本过长的情况\n        if (count > 3) {\n          textContentCopy =\n            textContentCopy.substr(0, hoverValueMaxCount - 3) + '...';\n        }\n      }\n      newTextContent.push(<span key={++count}>{textContentCopy}</span>);\n      textContent = newTextContent;\n    }\n    const tooltipText =\n      !hideTooltip &&\n      React.createElement(\n        'div',\n        {\n          onClick: e => {\n            e.preventDefault();\n            e.stopPropagation();\n            selectText(e.currentTarget);\n          },\n        },\n        textContent,\n      );\n\n    const p = { title: tooltipText };\n    return React.createElement(Tooltip, p, [\n      <span key=\"text\">\n        <Component\n          className={clsx(\n            'sirius-text truncate vertical-bottom',\n            'all-[a]:truncate all-[a]:vertical-bottom all-[a]:cursor-pointer all-[a:hover]:text-#0626ae',\n            className,\n          )}\n          style={{\n            maxWidth,\n            display: maxWidth === undefined ? 'inherit' : 'inline-block',\n            color: getTypeColor(type),\n          }}\n          {...props}\n        >\n          {child}\n        </Component>\n      </span>,\n    ]);\n  },\n);\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AAqFP;AA1DV,IAAM,eAAe,CAAC,SAAsB;AAC1C,QAAM,SAA2C;AAAA,IAC/C,SAAS;AAAA,IACT,SAAS;AAAA,IACT,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAEA,SAAO,OAAO,IAAI,KAAK,OAAO;AAChC;AAOO,IAAM,OAAO,MAAM;AAAA,EACxB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB;AAAA,IACA,oBAAoB;AAAA,IACpB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,cAAc;AAAA,IACd,GAAG;AAAA,EACL,MAA+B;AAC7B,UAAM,YAAY;AAClB,UAAM,KAAK,cAAc;AACzB,QAAI,QAAyB;AAC7B,UAAM,WAAW,OAAO,MAAM,iBAAiB;AAC/C,UAAM,WAAW,OAAO,MAAM,iBAAiB;AAC/C,QACE,aAAa,UACb,YACA,OAAO,aAAa,YACpB,SAAS,SAAS,UAClB;AACA,cAAQ,OAAO,UAAU,OAAO,KAAK,UAAU,GAAG,QAAQ,IAAI;AAAA,IAChE;AAEA,QAAI,cAAc,cAAc;AAIhC,QAAI,OAAO,OAAO,OAAO,gBAAgB,UAAU;AACjD,YAAM,qBAAqB,2BAA2B;AACtD,UAAI,kBAA0B;AAC9B,UAAI,iBAAyC,CAAC;AAC9C,UAAI,QAAQ;AACZ,aAAO,gBAAgB,SAAS,oBAAoB;AAClD,uBAAe;AAAA,UACb,oBAAC,UACE,0BAAgB,OAAO,GAAG,kBAAkB,KADpC,KAEX;AAAA,QACF;AACA,uBAAe,KAAK,oBAAC,UAAQ,KAAK,OAAS,CAAE;AAC7C,0BAAkB,gBAAgB,OAAO,kBAAkB;AAE3D,YAAI,QAAQ,GAAG;AACb,4BACE,gBAAgB,OAAO,GAAG,qBAAqB,CAAC,IAAI;AAAA,QACxD;AAAA,MACF;AACA,qBAAe,KAAK,oBAAC,UAAoB,6BAAV,EAAE,KAAwB,CAAO;AAChE,oBAAc;AAAA,IAChB;AACA,UAAM,cACJ,CAAC,eACD,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,QACE,SAAS,OAAK;AACZ,YAAE,eAAe;AACjB,YAAE,gBAAgB;AAClB,qBAAW,EAAE,aAAa;AAAA,QAC5B;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAEF,UAAM,IAAI,EAAE,OAAO,YAAY;AAC/B,WAAO,MAAM,cAAc,SAAS,GAAG;AAAA,MACrC,oBAAC,UACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL;AAAA,YACA,SAAS,aAAa,SAAY,YAAY;AAAA,YAC9C,OAAO,aAAa,IAAI;AAAA,UAC1B;AAAA,UACC,GAAG;AAAA,UAEH;AAAA;AAAA,MACH,KAfQ,MAgBV;AAAA,IACF,CAAC;AAAA,EACH;AACF;","names":[]}