@visactor/react-vtable 1.6.0-alpha.5 → 1.6.0

package/cjs/vtable.d.ts

@@ -1,2 +1 @@
-import * as VTable from '@visactor/vtable';
-export { VTable };
+

package/cjs/vtable.js

@@ -1,35 +1,2 @@
 "use strict";
-
-var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
-    void 0 === k2 && (k2 = k);
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
-        enumerable: !0,
-        get: function() {
-            return m[k];
-        }
-    }), Object.defineProperty(o, k2, desc);
-} : function(o, m, k, k2) {
-    void 0 === k2 && (k2 = k), o[k2] = m[k];
-}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
-    Object.defineProperty(o, "default", {
-        enumerable: !0,
-        value: v
-    });
-} : function(o, v) {
-    o.default = v;
-}), __importStar = this && this.__importStar || function(mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
-    return __setModuleDefault(result, mod), result;
-};
-
-Object.defineProperty(exports, "__esModule", {
-    value: !0
-}), exports.VTable = void 0;
-
-const VTable = __importStar(require("@visactor/vtable"));
-
-exports.VTable = VTable;
 //# sourceMappingURL=vtable.js.map

package/cjs/vtable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["vtable.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yDAA2C;AAElC,wBAAM","file":"vtable.js","sourcesContent":["import * as VTable from '@visactor/vtable';\n\nexport { VTable };\n"]}
+{"version":3,"sources":["vtable.ts"],"names":[],"mappings":"","file":"vtable.js","sourcesContent":["// import * as VTable from '@visactor/vtable';\n\n// export { VTable };\n"]}

package/es/components/avatar/avatar.d.ts

@@ -0,0 +1,15 @@
+import type { IGroup } from '@visactor/vtable/es/vrender';
+import { type BackgroundAttributes, type Cursor, type ITextGraphicAttribute } from '@visactor/vtable/es/vrender';
+import React from 'react';
+export interface AvatarProps {
+    children?: string | React.ReactNode;
+    textStyle?: Partial<ITextGraphicAttribute>;
+    panelStyle?: BackgroundAttributes;
+    size?: number;
+    shape?: 'circle' | 'square';
+    visible?: boolean;
+    cursor?: Cursor;
+    autoFixFontSize?: boolean;
+    onClick?: (e: Event) => void;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<IGroup>>;

package/es/components/avatar/avatar.js

@@ -0,0 +1,82 @@
+import { measureTextSize } from "@visactor/vtable/es/vrender";
+
+import { isString, merge } from "@visactor/vutils";
+
+import React from "react";
+
+import { Group, Text } from "../../table-components";
+
+const defaultProps = {
+    textStyle: {
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        fill: "#FFF"
+    },
+    panelStyle: {
+        visible: !0,
+        fill: "rgb(201, 205, 212)",
+        lineWidth: 1,
+        cornerRadius: 2
+    },
+    size: 40,
+    shape: "circle",
+    autoFixFontSize: !0
+};
+
+function AvatarComponent(baseProps, ref) {
+    const props = merge({}, defaultProps, baseProps), {size: size, children: children, onClick: onClick} = props;
+    let avatarRef = React.useRef(null);
+    avatarRef = ref || avatarRef;
+    const handleClick = React.useCallback((event => {
+        onClick && onClick(event);
+    }), [ onClick ]), groupAttribute = getGroupAttribute(props);
+    if (isString(children)) {
+        const textAttribute = getTextAttribute(props);
+        return React.createElement(Group, {
+            ref: avatarRef,
+            attribute: groupAttribute,
+            onClick: handleClick
+        }, React.createElement(Text, {
+            attribute: textAttribute
+        }));
+    }
+    return "image" === children.type && (children.props.attribute.width = size, children.props.attribute.height = size), 
+    React.createElement(Group, {
+        ref: avatarRef,
+        attribute: groupAttribute,
+        onClick: handleClick
+    }, children);
+}
+
+function getTextAttribute(props) {
+    const {textStyle: textStyle, size: size, children: children, autoFixFontSize: autoFixFontSize} = props, attribute = Object.assign({
+        text: children
+    }, textStyle);
+    return autoFixFontSize && getAutoFixFontSize(size, attribute), attribute;
+}
+
+function getGroupAttribute(props) {
+    var _a;
+    const {panelStyle: panelStyle, size: size, shape: shape} = props;
+    return Object.assign(Object.assign({}, panelStyle), {
+        width: size,
+        height: size,
+        clip: !0,
+        cornerRadius: "circle" === shape ? size / 2 : null !== (_a = panelStyle.cornerRadius) && void 0 !== _a ? _a : 2,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        visibleAll: !0,
+        path: void 0
+    });
+}
+
+export const Avatar = React.forwardRef(AvatarComponent);
+
+function getAutoFixFontSize(size, attribute) {
+    const scale = size / (measureTextSize(attribute.text, attribute).width + 8), fontSize = Math.max(Math.floor(attribute.fontSize * scale), 6);
+    attribute.fontSize = fontSize;
+}
+
+//# sourceMappingURL=avatar.js.map
+Avatar.displayName = "Avatar";

package/es/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/avatar/avatar.tsx"],"names":[],"mappings":"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","file":"avatar.js","sourcesContent":["import type { IGroup, IGroupAttribute } from '@visactor/vtable/es/vrender';\nimport {\n  measureTextSize,\n  type BackgroundAttributes,\n  type Cursor,\n  type IRectGraphicAttribute,\n  type ITextGraphicAttribute,\n  type Padding,\n  type Tag,\n  type TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { isString, merge } from '@visactor/vutils';\nimport type { ReactElement } from 'react';\nimport React, { useEffect } from 'react';\nimport { Group, Image, Text } from '../../table-components';\n\nexport interface AvatarProps {\n  children?: string | React.ReactNode;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  panelStyle?: BackgroundAttributes;\n  size?: number;\n  shape?: 'circle' | 'square';\n  visible?: boolean;\n  cursor?: Cursor;\n  autoFixFontSize?: boolean;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: AvatarProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: '#FFF'\n  },\n  panelStyle: {\n    visible: true,\n    fill: 'rgb(201, 205, 212)',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  size: 40,\n  shape: 'circle',\n  autoFixFontSize: true\n  // cursor: 'pointer',\n};\n\nfunction AvatarComponent(baseProps: AvatarProps, ref: React.Ref<IGroup>) {\n  const props: AvatarProps = merge({}, defaultProps, baseProps);\n  const { size, children, onClick } = props;\n  let avatarRef = React.useRef<IGroup>(null);\n  avatarRef = ref ? (ref as React.RefObject<IGroup>) : avatarRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      onClick && onClick(event);\n    },\n    [onClick]\n  );\n\n  const groupAttribute = getGroupAttribute(props);\n  if (isString(children)) {\n    const textAttribute = getTextAttribute(props);\n    return (\n      <Group ref={avatarRef} attribute={groupAttribute} onClick={handleClick}>\n        <Text attribute={textAttribute}></Text>\n      </Group>\n    );\n  }\n  if ((children as ReactElement).type === 'image') {\n    (children as ReactElement).props.attribute.width = size;\n    (children as ReactElement).props.attribute.height = size;\n  }\n  return (\n    <Group ref={avatarRef} attribute={groupAttribute} onClick={handleClick}>\n      {children}\n    </Group>\n  );\n}\n\nfunction getTextAttribute(props: AvatarProps) {\n  const { textStyle, size, children, autoFixFontSize } = props;\n\n  const attribute: ITextGraphicAttribute = {\n    text: children as string,\n    ...textStyle\n  };\n\n  if (autoFixFontSize) {\n    getAutoFixFontSize(size, attribute);\n  }\n\n  return attribute;\n}\nfunction getGroupAttribute(props: AvatarProps) {\n  const { panelStyle, size, shape } = props;\n  const attribute: IGroupAttribute = {\n    ...panelStyle,\n    width: size,\n    height: size,\n    clip: true,\n    cornerRadius: shape === 'circle' ? size / 2 : panelStyle.cornerRadius ?? 2,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    visibleAll: true,\n    path: undefined\n  };\n  return attribute;\n}\n\nexport const Avatar = React.forwardRef<IGroup, AvatarProps>(AvatarComponent);\n\nAvatar.displayName = 'Avatar';\n\n// auto adjust font size\nfunction getAutoFixFontSize(size: number, attribute: ITextGraphicAttribute) {\n  const textWidth = measureTextSize(attribute.text, attribute).width;\n  const scale = size / (textWidth + 8);\n  const fontSize = Math.max(Math.floor(attribute.fontSize * scale), 6);\n  attribute.fontSize = fontSize;\n}\n"]}

package/es/components/button/button.d.ts

@@ -0,0 +1,27 @@
+import type { BackgroundAttributes, Cursor, IRectGraphicAttribute, ITextGraphicAttribute, Padding, Tag } from '@visactor/vtable/es/vrender';
+import React from 'react';
+interface ButtonStateStyle {
+    textStyle?: {
+        hover?: Partial<ITextGraphicAttribute>;
+        disabled?: Partial<ITextGraphicAttribute>;
+    };
+    panelStyle?: {
+        hover?: Partial<IRectGraphicAttribute>;
+        disabled?: Partial<IRectGraphicAttribute>;
+    };
+}
+export interface ButtonProps {
+    children?: string;
+    textStyle?: Partial<ITextGraphicAttribute>;
+    padding?: Padding;
+    panelStyle?: BackgroundAttributes;
+    minWidth?: number;
+    maxWidth?: number;
+    visible?: boolean;
+    state?: ButtonStateStyle;
+    disabled?: boolean;
+    cursor?: Cursor;
+    onClick?: (e: Event) => void;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<Tag>>;
+export {};

package/es/components/button/button.js

@@ -0,0 +1,84 @@
+import { Tag as VTag } from "../vrender-components/tag";
+
+import { merge } from "@visactor/vutils";
+
+import React, { useEffect } from "react";
+
+const defaultProps = {
+    textStyle: {
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        fill: "#FFF"
+    },
+    panelStyle: {
+        visible: !0,
+        fill: "rgb(22, 93, 255)",
+        lineWidth: 1,
+        cornerRadius: 2
+    },
+    padding: 10,
+    state: {
+        panelStyle: {
+            hover: {
+                fill: "rgb(64, 128, 255)"
+            },
+            disabled: {
+                fill: "rgb(148, 191, 255)"
+            }
+        }
+    }
+};
+
+function ButtonComponent(baseProps, ref) {
+    const props = merge({}, defaultProps, baseProps), {disabled: disabled, onClick: onClick} = props;
+    let buttonRef = React.useRef(null);
+    buttonRef = ref || buttonRef;
+    const handleClick = React.useCallback((event => {
+        disabled ? "function" == typeof (null == event ? void 0 : event.preventDefault) && event.preventDefault() : onClick && onClick(event);
+    }), [ disabled, onClick ]), attribute = getTagAttribute(props);
+    return useEffect((() => {
+        buttonRef.current.addEventListener("mouseenter", (() => {
+            disabled || (buttonRef.current.addState("hover", !0, !1), buttonRef.current.stage.renderNextFrame());
+        })), buttonRef.current.addEventListener("mouseleave", (() => {
+            disabled || (buttonRef.current.removeState("hover", !1), buttonRef.current.stage.renderNextFrame());
+        }));
+    })), useEffect((() => {
+        disabled ? (buttonRef.current.removeState("disabled", !1), buttonRef.current.addState("disabled", !0, !1)) : buttonRef.current.removeState("disabled", !1), 
+        buttonRef.current.stage.renderNextFrame();
+    })), React.createElement(VTag, {
+        ref: buttonRef,
+        attribute: attribute,
+        onClick: handleClick
+    });
+}
+
+function getTagAttribute(props) {
+    var _a, _b, _c, _d;
+    const {textStyle: textStyle, padding: padding, panelStyle: panelStyle, minWidth: minWidth, maxWidth: maxWidth, visible: visible, cursor: cursor, disabled: disabled, state: state, children: children} = props;
+    return {
+        text: children,
+        textStyle: textStyle,
+        padding: padding,
+        panel: panelStyle,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        visible: visible,
+        cursor: (null != cursor ? cursor : disabled) ? "not-allowed" : "pointer",
+        childrenPickable: !1,
+        state: {
+            text: {
+                hover: null === (_a = null == state ? void 0 : state.textStyle) || void 0 === _a ? void 0 : _a.hover,
+                disabled: null === (_b = null == state ? void 0 : state.textStyle) || void 0 === _b ? void 0 : _b.disabled
+            },
+            panel: {
+                hover: null === (_c = null == state ? void 0 : state.panelStyle) || void 0 === _c ? void 0 : _c.hover,
+                disabled: null === (_d = null == state ? void 0 : state.panelStyle) || void 0 === _d ? void 0 : _d.disabled
+            }
+        }
+    };
+}
+
+export const Button = React.forwardRef(ButtonComponent);
+
+Button.displayName = "Button";
+//# sourceMappingURL=button.js.map

package/es/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/button/button.tsx"],"names":[],"mappings":"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","file":"button.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { merge } from '@visactor/vutils';\nimport React, { useEffect } from 'react';\n\ninterface ButtonStateStyle {\n  textStyle?: {\n    hover?: Partial<ITextGraphicAttribute>;\n    disabled?: Partial<ITextGraphicAttribute>;\n  };\n  panelStyle?: {\n    hover?: Partial<IRectGraphicAttribute>;\n    disabled?: Partial<IRectGraphicAttribute>;\n  };\n}\n\nexport interface ButtonProps {\n  children?: string;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  padding?: Padding;\n  panelStyle?: BackgroundAttributes;\n  minWidth?: number;\n  maxWidth?: number;\n  visible?: boolean;\n  state?: ButtonStateStyle;\n  disabled?: boolean;\n  cursor?: Cursor;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: ButtonProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: '#FFF'\n  },\n  panelStyle: {\n    visible: true,\n    fill: 'rgb(22, 93, 255)',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  padding: 10,\n  // cursor: 'pointer',\n  state: {\n    panelStyle: {\n      hover: {\n        fill: 'rgb(64, 128, 255)'\n      },\n      disabled: {\n        fill: 'rgb(148, 191, 255)'\n      }\n    }\n  }\n};\n\nfunction ButtonComponent(baseProps: ButtonProps, ref: React.Ref<Tag>) {\n  const props: ButtonProps = merge({}, defaultProps, baseProps);\n  const { disabled, onClick } = props;\n  let buttonRef = React.useRef<Tag>(null);\n  buttonRef = ref ? (ref as React.RefObject<Tag>) : buttonRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      if (disabled) {\n        typeof event?.preventDefault === 'function' && event.preventDefault();\n        return;\n      }\n      onClick && onClick(event);\n    },\n    [disabled, onClick]\n  );\n\n  const attribute: TagAttributes = getTagAttribute(props);\n\n  useEffect(() => {\n    buttonRef.current.addEventListener('mouseenter', () => {\n      // console.log('mouseenter', buttonRef.current, e.clone());\n      if (!disabled) {\n        buttonRef.current.addState('hover', true, false);\n        // buttonRef.current._bgRect.addState('hover', true, false);\n        // buttonRef.current._textShape.addState('hover', true, false);\n        buttonRef.current.stage.renderNextFrame();\n      }\n    });\n    buttonRef.current.addEventListener('mouseleave', () => {\n      // console.log('mouseleave', buttonRef.current, e.clone());\n      if (!disabled) {\n        buttonRef.current.removeState('hover', false);\n        // buttonRef.current._bgRect.removeState('hover', false);\n        // buttonRef.current._textShape.removeState('hover', false);\n        buttonRef.current.stage.renderNextFrame();\n      }\n    });\n  });\n\n  useEffect(() => {\n    if (disabled) {\n      buttonRef.current.removeState('disabled', false);\n      // buttonRef.current._bgRect.removeState('disabled', false);\n      // buttonRef.current._textShape.removeState('disabled', false);\n\n      buttonRef.current.addState('disabled', true, false);\n      // buttonRef.current._bgRect.addState('disabled', true, false);\n      // buttonRef.current._textShape.addState('disabled', true, false);\n      // console.log('add disable');\n    } else {\n      buttonRef.current.removeState('disabled', false);\n      // buttonRef.current._bgRect.removeState('disabled', false);\n      // buttonRef.current._textShape.removeState('disabled', false);\n      // console.log('remove disable');\n    }\n    buttonRef.current.stage.renderNextFrame();\n  });\n\n  return <VTag ref={buttonRef} attribute={attribute} onClick={handleClick}></VTag>;\n}\n\nfunction getTagAttribute(props: ButtonProps) {\n  const { textStyle, padding, panelStyle, minWidth, maxWidth, visible, cursor, disabled, state, children } = props;\n  const attr: TagAttributes = {\n    text: children,\n    textStyle,\n    padding,\n    panel: panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor: cursor ?? disabled ? 'not-allowed' : 'pointer',\n    childrenPickable: false,\n    state: {\n      text: {\n        hover: state?.textStyle?.hover,\n        disabled: state?.textStyle?.disabled\n      },\n      panel: {\n        hover: state?.panelStyle?.hover,\n        disabled: state?.panelStyle?.disabled\n      }\n    }\n  };\n\n  return attr;\n}\n\nexport const Button = React.forwardRef<Tag, ButtonProps>(ButtonComponent);\n\nButton.displayName = 'Button';\n"]}

package/es/components/checkbox/checkbox.d.ts

@@ -0,0 +1,17 @@
+import type { Cursor, CheckBox as VRenderCheckbox, CheckboxAttributes } from '@visactor/vtable/es/vrender';
+import React from 'react';
+export interface CheckboxProps {
+    children?: string;
+    textStyle?: CheckboxAttributes['text'];
+    boxStyle?: CheckboxAttributes['box'];
+    iconStyle?: CheckboxAttributes['icon'];
+    checked?: boolean;
+    indeterminate?: boolean;
+    interactive?: boolean;
+    disabled?: boolean;
+    disableCursor?: Cursor;
+    spaceBetweenTextAndIcon?: number;
+    visible?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<VRenderCheckbox>>;

package/es/components/checkbox/checkbox.js

@@ -0,0 +1,48 @@
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+    }
+    return t;
+};
+
+import { Checkbox as VCheckbox } from "../vrender-components/checkbox";
+
+import { merge } from "@visactor/vutils";
+
+import React, { useCallback, useEffect } from "react";
+
+const defaultProps = {};
+
+function CheckboxComponent(baseProps, ref) {
+    const props = merge({}, defaultProps, baseProps), {textStyle: textStyle, boxStyle: boxStyle, iconStyle: iconStyle, children: children} = props, rest = __rest(props, [ "textStyle", "boxStyle", "iconStyle", "children" ]);
+    let checkboxRef = React.useRef(null);
+    checkboxRef = ref || checkboxRef;
+    const handleChange = useCallback((event => {
+        props.onChange && props.onChange(event.target.attribute.checked);
+    }), []);
+    return useEffect((() => {
+        var _a;
+        return null === (_a = checkboxRef.current) || void 0 === _a || _a.addEventListener("checkbox_state_change", handleChange), 
+        () => {
+            var _a;
+            null === (_a = checkboxRef.current) || void 0 === _a || _a.removeEventListener("checkbox_state_change", handleChange);
+        };
+    }), []), React.createElement(VCheckbox, {
+        ref: checkboxRef,
+        attribute: Object.assign({
+            text: Object.assign(Object.assign({}, textStyle), {
+                text: children
+            }),
+            box: boxStyle,
+            icon: iconStyle
+        }, rest)
+    });
+}
+
+export const Checkbox = React.forwardRef(CheckboxComponent);
+
+Checkbox.displayName = "Checkbox";
+//# sourceMappingURL=checkbox.js.map

package/es/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/checkbox/checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;AASA,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBtD,MAAM,YAAY,GAAkB,EAAE,CAAC;AAEvC,SAAS,iBAAiB,CAAC,SAAwB,EAAE,GAA+B;IAClF,MAAM,KAAK,GAAkB,KAAK,CAAC,EAAE,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IAChE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA7D,kDAAqD,CAAQ,CAAC;IACpE,IAAI,WAAW,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;IACtD,WAAW,GAAG,GAAG,CAAC,CAAC,CAAE,GAAwC,CAAC,CAAC,CAAC,WAAW,CAAC;IAE5E,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAkC,EAAE,EAAE;QACtE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,WAAW,CAAC,OAAO,0CAAE,gBAAgB,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC;QAC7E,OAAO,GAAG,EAAE;;YACV,MAAA,WAAW,CAAC,OAAO,0CAAE,mBAAmB,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC;QAClF,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,WAAW,EAChB,SAAS,kBACP,IAAI,kCACC,SAAS,KACZ,IAAI,EAAE,QAAQ,KAEhB,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,SAAS,IACZ,IAAI,IAEE,CACd,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAiC,iBAAiB,CAAC,CAAC;AAE5F,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","file":"checkbox.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  CheckBox as VRenderCheckbox,\n  CheckboxAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Checkbox as VCheckbox } from '../vrender-components/checkbox';\nimport { merge } from '@visactor/vutils';\nimport React, { useCallback, useEffect } from 'react';\n\nexport interface CheckboxProps {\n  children?: string;\n  textStyle?: CheckboxAttributes['text'];\n  boxStyle?: CheckboxAttributes['box'];\n  iconStyle?: CheckboxAttributes['icon'];\n  checked?: boolean;\n  indeterminate?: boolean;\n  interactive?: boolean;\n  disabled?: boolean;\n  disableCursor?: Cursor;\n  spaceBetweenTextAndIcon?: number;\n  visible?: boolean;\n  onChange?: (checked: boolean) => void;\n}\n\nconst defaultProps: CheckboxProps = {};\n\nfunction CheckboxComponent(baseProps: CheckboxProps, ref: React.Ref<VRenderCheckbox>) {\n  const props: CheckboxProps = merge({}, defaultProps, baseProps);\n  const { textStyle, boxStyle, iconStyle, children, ...rest } = props;\n  let checkboxRef = React.useRef<VRenderCheckbox>(null);\n  checkboxRef = ref ? (ref as React.RefObject<VRenderCheckbox>) : checkboxRef;\n\n  const handleChange = useCallback((event: { target: VRenderCheckbox }) => {\n    props.onChange && props.onChange(event.target.attribute.checked);\n  }, []);\n\n  useEffect(() => {\n    checkboxRef.current?.addEventListener('checkbox_state_change', handleChange);\n    return () => {\n      checkboxRef.current?.removeEventListener('checkbox_state_change', handleChange);\n    };\n  }, []);\n\n  return (\n    <VCheckbox\n      ref={checkboxRef}\n      attribute={{\n        text: {\n          ...textStyle,\n          text: children\n        },\n        box: boxStyle,\n        icon: iconStyle,\n        ...rest\n      }}\n    ></VCheckbox>\n  );\n}\n\nexport const Checkbox = React.forwardRef<VRenderCheckbox, CheckboxProps>(CheckboxComponent);\n\nCheckbox.displayName = 'Checkbox';\n"]}

package/es/components/index.d.ts

@@ -1,19 +1,7 @@
-import type React from 'react';
-export { ListColumn } from './list/list-column';
-export { PivotColumnDimension, PivotRowDimension } from './pivot/pivot-dimension';
-export { PivotIndicator } from './pivot/pivot-indicator';
-export { PivotColumnHeaderTitle, PivotRowHeaderTitle } from './pivot/pivot-header-title';
-export { PivotCorner } from './pivot/pivot-corner';
-export { Menu } from './component/menu';
-export { Tooltip } from './component/tooltip';
-export { EmptyTip } from './component/emptyTip';
-export { CustomComponent } from './custom-component';
-export { CustomLayout, type CustomLayoutFunctionArg } from './custom/custom-layout';
-export * from './custom/graphic';
-export * from './custom/component';
-type Props = {
-    updateId?: number;
-};
-export interface IMarkElement extends React.ReactElement<Props, React.JSXElementConstructor<Props>> {
-    id: string | number;
-}
+export * from './button/button';
+export * from './link/link';
+export * from './avatar/avatar';
+export * from './popover/popover';
+export * from './tag/tag';
+export * from './radio/radio';
+export * from './checkbox/checkbox';

package/es/components/index.js

@@ -1,24 +1,14 @@
-export { ListColumn } from "./list/list-column";
+export * from "./button/button";
 
-export { PivotColumnDimension, PivotRowDimension } from "./pivot/pivot-dimension";
+export * from "./link/link";
 
-export { PivotIndicator } from "./pivot/pivot-indicator";
+export * from "./avatar/avatar";
 
-export { PivotColumnHeaderTitle, PivotRowHeaderTitle } from "./pivot/pivot-header-title";
+export * from "./popover/popover";
 
-export { PivotCorner } from "./pivot/pivot-corner";
+export * from "./tag/tag";
 
-export { Menu } from "./component/menu";
+export * from "./radio/radio";
 
-export { Tooltip } from "./component/tooltip";
-
-export { EmptyTip } from "./component/emptyTip";
-
-export { CustomComponent } from "./custom-component";
-
-export { CustomLayout } from "./custom/custom-layout";
-
-export * from "./custom/graphic";
-
-export * from "./custom/component";
+export * from "./checkbox/checkbox";
 //# sourceMappingURL=index.js.map

package/es/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAgC,MAAM,wBAAwB,CAAC;AACpF,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC","file":"index.js","sourcesContent":["import type React from 'react';\nexport { ListColumn } from './list/list-column';\nexport { PivotColumnDimension, PivotRowDimension } from './pivot/pivot-dimension';\nexport { PivotIndicator } from './pivot/pivot-indicator';\nexport { PivotColumnHeaderTitle, PivotRowHeaderTitle } from './pivot/pivot-header-title';\nexport { PivotCorner } from './pivot/pivot-corner';\nexport { Menu } from './component/menu';\nexport { Tooltip } from './component/tooltip';\nexport { EmptyTip } from './component/emptyTip';\n\nexport { CustomComponent } from './custom-component';\nexport { CustomLayout, type CustomLayoutFunctionArg } from './custom/custom-layout';\nexport * from './custom/graphic';\nexport * from './custom/component';\n\ntype Props = { updateId?: number };\n\nexport interface IMarkElement extends React.ReactElement<Props, React.JSXElementConstructor<Props>> {\n  id: string | number;\n}\n"]}
+{"version":3,"sources":["components/index.ts"],"names":[],"mappings":"AAGA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","file":"index.js","sourcesContent":["// export * from './vrender-components/tag';\n// export * from './vrender-components/checkbox';\n// export * from './vrender-components/radio';\nexport * from './button/button';\nexport * from './link/link';\nexport * from './avatar/avatar';\nexport * from './popover/popover';\nexport * from './tag/tag';\nexport * from './radio/radio';\nexport * from './checkbox/checkbox';\n"]}

package/es/components/link/link.d.ts

@@ -0,0 +1,30 @@
+import type { BackgroundAttributes, Cursor, IRectGraphicAttribute, ITextGraphicAttribute, Padding, Tag } from '@visactor/vtable/es/vrender';
+import React from 'react';
+interface LinkStateStyle {
+    textStyle?: {
+        hover?: Partial<ITextGraphicAttribute>;
+        disabled?: Partial<ITextGraphicAttribute>;
+    };
+    panelStyle?: {
+        hover?: Partial<IRectGraphicAttribute>;
+        disabled?: Partial<IRectGraphicAttribute>;
+    };
+}
+export interface LinkProps {
+    children?: string;
+    textStyle?: Partial<ITextGraphicAttribute>;
+    padding?: Padding;
+    space?: number;
+    panelStyle?: BackgroundAttributes;
+    minWidth?: number;
+    maxWidth?: number;
+    visible?: boolean;
+    state?: LinkStateStyle;
+    disabled?: boolean;
+    icon?: boolean;
+    cursor?: Cursor;
+    href?: string;
+    onClick?: (e: Event) => void;
+}
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<Tag>>;
+export {};

package/es/components/link/link.js

@@ -0,0 +1,95 @@
+import { Tag as VTag } from "../vrender-components/tag";
+
+import { merge } from "@visactor/vutils";
+
+import React, { useEffect } from "react";
+
+const defaultProps = {
+    textStyle: {
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        fill: "rgb(64, 128, 255)"
+    },
+    panelStyle: {
+        visible: !0,
+        opacity: 0,
+        fill: "rgba(242, 243, 245, 0.5)",
+        lineWidth: 1,
+        cornerRadius: 2
+    },
+    padding: 4,
+    space: 6,
+    state: {
+        textStyle: {
+            disabled: {
+                fill: "rgb(148, 191, 255)"
+            }
+        },
+        panelStyle: {
+            hover: {
+                opacity: 1
+            }
+        }
+    }
+};
+
+function LinkComponent(baseProps, ref) {
+    const props = merge({}, defaultProps, baseProps), {disabled: disabled, href: href, onClick: onClick} = props;
+    let linkRef = React.useRef(null);
+    linkRef = ref || linkRef;
+    const handleClick = React.useCallback((event => {
+        disabled ? "function" == typeof (null == event ? void 0 : event.preventDefault) && event.preventDefault() : (onClick && onClick(event), 
+        href && window.open(href));
+    }), [ disabled, href, onClick ]), attribute = getTagAttribute(props);
+    return useEffect((() => {
+        linkRef.current.addEventListener("mouseenter", (() => {
+            disabled || (linkRef.current.addState("hover", !0, !1), linkRef.current.stage.renderNextFrame());
+        })), linkRef.current.addEventListener("mouseleave", (() => {
+            disabled || (linkRef.current.removeState("hover", !1), linkRef.current.stage.renderNextFrame());
+        }));
+    }), []), useEffect((() => {
+        disabled ? (linkRef.current.removeState("disabled", !1), linkRef.current.addState("disabled", !0, !1)) : linkRef.current.removeState("disabled", !1), 
+        linkRef.current.stage.renderNextFrame();
+    })), React.createElement(VTag, {
+        ref: linkRef,
+        attribute: attribute,
+        onClick: handleClick
+    });
+}
+
+function getTagAttribute(props) {
+    var _a, _b, _c, _d;
+    const {textStyle: textStyle, padding: padding, space: space, panelStyle: panelStyle, minWidth: minWidth, maxWidth: maxWidth, visible: visible, cursor: cursor, disabled: disabled, icon: icon, state: state, children: children} = props;
+    return {
+        text: children,
+        textStyle: textStyle,
+        padding: padding,
+        panel: panelStyle,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        visible: visible,
+        cursor: (null != cursor ? cursor : disabled) ? "not-allowed" : "pointer",
+        childrenPickable: !1,
+        state: {
+            text: {
+                hover: null === (_a = null == state ? void 0 : state.textStyle) || void 0 === _a ? void 0 : _a.hover,
+                disabled: null === (_b = null == state ? void 0 : state.textStyle) || void 0 === _b ? void 0 : _b.disabled
+            },
+            panel: {
+                hover: null === (_c = null == state ? void 0 : state.panelStyle) || void 0 === _c ? void 0 : _c.hover,
+                disabled: null === (_d = null == state ? void 0 : state.panelStyle) || void 0 === _d ? void 0 : _d.disabled
+            }
+        },
+        space: space,
+        shape: {
+            visible: !!icon,
+            fill: !1,
+            stroke: textStyle.fill,
+            symbolType: "M -0.2927 -15.4348 L -15.142 -0.5855 C -18.6567 2.9292 -18.6567 8.6277 -15.142 12.1424 V 12.1424 C -11.6273 15.6571 -5.9288 15.6571 -2.4141 12.1424 L 15.2636 -5.5353 C 17.6067 -7.8784 17.6067 -11.6774 15.2636 -14.0206 V -14.0206 C 12.9205 -16.3637 9.1215 -16.3637 6.7783 -14.0206 L -10.8993 3.6571 C -12.0709 4.8287 -12.0709 6.7282 -10.8993 7.8997 V 7.8997 C -9.7278 9.0713 -7.8283 9.0713 -6.6567 7.8997 L 8.1925 -6.9495"
+        }
+    };
+}
+
+export const Link = React.forwardRef(LinkComponent);
+
+Link.displayName = "Link";

package/es/components/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/link/link.tsx"],"names":[],"mappings":"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","file":"link.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { merge } from '@visactor/vutils';\nimport React, { useEffect } from 'react';\n\ninterface LinkStateStyle {\n  textStyle?: {\n    hover?: Partial<ITextGraphicAttribute>;\n    disabled?: Partial<ITextGraphicAttribute>;\n  };\n  panelStyle?: {\n    hover?: Partial<IRectGraphicAttribute>;\n    disabled?: Partial<IRectGraphicAttribute>;\n  };\n}\n\nexport interface LinkProps {\n  children?: string;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  padding?: Padding;\n  space?: number;\n  panelStyle?: BackgroundAttributes;\n  minWidth?: number;\n  maxWidth?: number;\n  visible?: boolean;\n  state?: LinkStateStyle;\n  disabled?: boolean;\n  icon?: boolean;\n  cursor?: Cursor;\n  href?: string;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: LinkProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: 'rgb(64, 128, 255)'\n  },\n  panelStyle: {\n    visible: true,\n    opacity: 0,\n    fill: 'rgba(242, 243, 245, 0.5)',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  padding: 4,\n  space: 6,\n  // cursor: 'pointer',\n  state: {\n    textStyle: {\n      disabled: {\n        fill: 'rgb(148, 191, 255)'\n      }\n    },\n    panelStyle: {\n      hover: {\n        // visible: true\n        opacity: 1\n      }\n    }\n  }\n};\n\nfunction LinkComponent(baseProps: LinkProps, ref: React.Ref<Tag>) {\n  const props: LinkProps = merge({}, defaultProps, baseProps);\n  const { disabled, href, onClick } = props;\n  let linkRef = React.useRef<Tag>(null);\n  linkRef = ref ? (ref as React.RefObject<Tag>) : linkRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      if (disabled) {\n        typeof event?.preventDefault === 'function' && event.preventDefault();\n        return;\n      }\n      onClick && onClick(event);\n      if (href) {\n        // eslint-disable-next-line no-undef\n        window.open(href);\n      }\n    },\n    [disabled, href, onClick]\n  );\n\n  const attribute: TagAttributes = getTagAttribute(props);\n\n  useEffect(() => {\n    linkRef.current.addEventListener('mouseenter', () => {\n      // console.log('mouseenter', linkRef.current, e.clone());\n      if (!disabled) {\n        linkRef.current.addState('hover', true, false);\n        // linkRef.current._bgRect.addState('hover', true, false);\n        // linkRef.current._textShape.addState('hover', true, false);\n        linkRef.current.stage.renderNextFrame();\n      }\n    });\n    linkRef.current.addEventListener('mouseleave', () => {\n      // console.log('mouseleave', linkRef.current, e.clone());\n      if (!disabled) {\n        linkRef.current.removeState('hover', false);\n        // linkRef.current._bgRect.removeState('hover', false);\n        // linkRef.current._textShape.removeState('hover', false);\n        linkRef.current.stage.renderNextFrame();\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    if (disabled) {\n      linkRef.current.removeState('disabled', false);\n      // linkRef.current._bgRect.removeState('disabled', false);\n      // linkRef.current._textShape.removeState('disabled', false);\n\n      linkRef.current.addState('disabled', true, false);\n      // linkRef.current._bgRect.addState('disabled', true, false);\n      // linkRef.current._textShape.addState('disabled', true, false);\n      // console.log('add disable');\n    } else {\n      linkRef.current.removeState('disabled', false);\n      // linkRef.current._bgRect.removeState('disabled', false);\n      // linkRef.current._textShape.removeState('disabled', false);\n      // console.log('remove disable');\n    }\n    linkRef.current.stage.renderNextFrame();\n  });\n\n  return <VTag ref={linkRef} attribute={attribute} onClick={handleClick}></VTag>;\n}\n\nfunction getTagAttribute(props: LinkProps) {\n  const {\n    textStyle,\n    padding,\n    space,\n    panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor,\n    disabled,\n    icon,\n    state,\n    children\n  } = props;\n  const attr: TagAttributes = {\n    text: children,\n    textStyle,\n    padding,\n    panel: panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor: cursor ?? disabled ? 'not-allowed' : 'pointer',\n    childrenPickable: false,\n    state: {\n      text: {\n        hover: state?.textStyle?.hover,\n        disabled: state?.textStyle?.disabled\n      },\n      panel: {\n        hover: state?.panelStyle?.hover,\n        disabled: state?.panelStyle?.disabled\n      }\n    },\n    space,\n    shape: {\n      visible: !!icon,\n      fill: false,\n      stroke: textStyle.fill,\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M -0.2927 -15.4348 L -15.142 -0.5855 C -18.6567 2.9292 -18.6567 8.6277 -15.142 12.1424 V 12.1424 C -11.6273 15.6571 -5.9288 15.6571 -2.4141 12.1424 L 15.2636 -5.5353 C 17.6067 -7.8784 17.6067 -11.6774 15.2636 -14.0206 V -14.0206 C 12.9205 -16.3637 9.1215 -16.3637 6.7783 -14.0206 L -10.8993 3.6571 C -12.0709 4.8287 -12.0709 6.7282 -10.8993 7.8997 V 7.8997 C -9.7278 9.0713 -7.8283 9.0713 -6.6567 7.8997 L 8.1925 -6.9495'\n    }\n  };\n\n  return attr;\n}\n\nexport const Link = React.forwardRef<Tag, LinkProps>(LinkComponent);\n\nLink.displayName = 'Link';\n"]}

package/es/components/popover/popover.d.ts

@@ -0,0 +1,13 @@
+import type { IGroup } from '@visactor/vtable/es/vrender';
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+type Anchor = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+export interface PopoverProps {
+    children?: ReactElement;
+    defaultPopupVisible?: boolean;
+    popupVisible?: boolean;
+    position?: Anchor;
+    content?: ReactNode;
+}
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<IGroup>>;
+export {};