@visactor/react-vtable 1.12.1-alpha.1 → 1.13.1-alpha.0

package/cjs/components/popover/popover.d.ts

@@ -1,5 +1,5 @@
 import type { IGroup } from '@visactor/vtable/es/vrender';
-import type { ReactElement, ReactNode } from 'react';
+import type { CSSProperties, 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 {
@@ -8,6 +8,8 @@ export interface PopoverProps {
     popupVisible?: boolean;
     position?: Anchor;
     content?: ReactNode;
+    panelStyle?: CSSProperties;
+    arrowStyle?: CSSProperties;
 }
 export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<IGroup>>;
 export {};

package/cjs/components/popover/popover.js

@@ -32,7 +32,7 @@ Object.defineProperty(exports, "__esModule", {
 const vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("react")), table_components_1 = require("../../table-components"), defaultProps = {
     defaultPopupVisible: !1,
     position: "top"
-}, poptipPanalStyle = {
+}, defaultPoptipPanelStyle = {
     backgroundColor: "rgb(255, 255, 255)",
     boxShadow: "0 4px 10px rgba(0, 0, 0, .1)",
     fontSize: "14px",
@@ -43,7 +43,7 @@ const vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("re
     border: "1px solid rgb(229, 230, 235)",
     padding: "12px 16px"
 }, Tooltip = props => {
-    const arrowStyle = Object.assign({
+    const arrowStyle = Object.assign(Object.assign({
         content: "",
         height: "8px",
         width: "8px",
@@ -54,16 +54,16 @@ const vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("re
         transformOrigin: "50% 50% 0",
         backgroundColor: "rgb(255, 255, 255)",
         border: "1px solid rgb(229, 230, 235)"
-    }, getArrowStyle(props.position));
+    }, getArrowStyle(props.position)), props.arrowStyle);
     return props.visible ? react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("div", {
-        style: poptipPanalStyle
+        style: (0, vutils_1.merge)({}, defaultPoptipPanelStyle, props.panelStyle)
     }, props.content), react_1.default.createElement("div", {
         style: arrowStyle
     })) : react_1.default.createElement(react_1.default.Fragment, null);
 };
 
 function PopoverComponent(baseProps, ref) {
-    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {content: content, position: position, popupVisible: popupVisible, defaultPopupVisible: defaultPopupVisible, children: children} = props;
+    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {content: content, position: position, popupVisible: popupVisible, defaultPopupVisible: defaultPopupVisible, panelStyle: panelStyle, arrowStyle: arrowStyle, children: children} = props;
     let popoverRef = react_1.default.useRef(null);
     popoverRef = ref || popoverRef;
     const [popupOpen, setPopupOpen] = (0, react_1.useState)(!1);
@@ -81,7 +81,9 @@ function PopoverComponent(baseProps, ref) {
             element: react_1.default.createElement(Tooltip, {
                 visible: popupOpen,
                 content: content,
-                position: position
+                position: position,
+                panelStyle: panelStyle,
+                arrowStyle: arrowStyle
             }),
             container: null,
             visible: !0,

package/cjs/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/popover/popover.tsx"],"names":[],"mappings":"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","file":"popover.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IGroup,\n  IGroupGraphicAttribute,\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 type { BoundsAnchorType } from '@visactor/vutils';\nimport { isValid, merge } from '@visactor/vutils';\nimport type { CSSProperties, ReactElement, ReactNode } from 'react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { Group } from '../../table-components';\n\ntype Anchor = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';\nexport interface PopoverProps {\n  children?: ReactElement;\n  defaultPopupVisible?: boolean;\n  // disabled?: boolean;\n  // popupHoverStay?: boolean;\n  popupVisible?: boolean;\n  // color?: string;\n  position?: Anchor;\n  content?: ReactNode;\n  // onVisibleChange?: (visible: boolean) => void;\n}\n\nconst defaultProps: PopoverProps = {\n  defaultPopupVisible: false,\n  // popupHoverStay: true,\n  // popupVisible: false,\n  position: 'top'\n};\n\nconst poptipPanalStyle: CSSProperties = {\n  backgroundColor: 'rgb(255, 255, 255)',\n  boxShadow: '0 4px 10px rgba(0, 0, 0, .1)',\n  fontSize: '14px',\n  borderRadius: '4px',\n  lineHeight: '1.5715',\n  boxSizing: 'border-box',\n  color: 'rgb(78, 89, 105)',\n  border: '1px solid rgb(229, 230, 235)',\n  padding: '12px 16px'\n};\n\nconst Tooltip = (props: { visible: boolean; content: ReactNode; position: Anchor }) => {\n  const arrowStyle: CSSProperties = {\n    content: '',\n    height: '8px',\n    width: '8px',\n    position: 'absolute',\n    display: 'block',\n    boxSizing: 'border-box',\n    transform: 'rotate(45deg)',\n    transformOrigin: '50% 50% 0',\n    backgroundColor: 'rgb(255, 255, 255)',\n    border: '1px solid rgb(229, 230, 235)',\n    ...getArrowStyle(props.position)\n  };\n\n  return props.visible ? (\n    <>\n      <div style={poptipPanalStyle}>{props.content}</div>\n      <div style={arrowStyle}></div>\n    </>\n  ) : (\n    <></>\n  );\n};\n\nfunction PopoverComponent(baseProps: PopoverProps, ref: React.Ref<IGroup>) {\n  const props: PopoverProps = merge({}, defaultProps, baseProps);\n  const { content, position, popupVisible, defaultPopupVisible, children } = props;\n  let popoverRef = React.useRef<IGroup>(null);\n  popoverRef = ref ? (ref as React.RefObject<IGroup>) : popoverRef;\n\n  const [popupOpen, setPopupOpen] = useState(false);\n\n  useEffect(() => {\n    if (popupVisible) {\n      setPopupOpen(true);\n    } else {\n      setPopupOpen(false);\n    }\n    popoverRef.current.stage.renderNextFrame();\n  }, [popupVisible]);\n\n  useEffect(() => {\n    setPopupOpen(popupVisible ?? defaultPopupVisible ?? false);\n  }, []);\n\n  const { transform, anchorType } = getTransform(position);\n  const poptipContainerStyle: CSSProperties = {\n    // display: popupOpen ? 'block' : 'none',\n    transform: transform\n  };\n\n  const groupAttribute: IGroupGraphicAttribute = {\n    react: {\n      // width: 100,\n      // height: 100,\n      style: poptipContainerStyle,\n      element: <Tooltip visible={popupOpen} content={content} position={position} />,\n      container: null,\n      visible: true,\n      pointerEvents: false,\n      anchorType: anchorType\n    } as IGroupGraphicAttribute['react']\n  };\n\n  const groupMouseEnter = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(true);\n    event.currentTarget.stage.renderNextFrame();\n  }, []);\n\n  const groupMouseLeave = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(false);\n    event.currentTarget.stage.renderNextFrame();\n  }, []);\n\n  return (\n    <Group ref={popoverRef} attribute={groupAttribute} onMouseEnter={groupMouseEnter} onMouseLeave={groupMouseLeave}>\n      {children}\n    </Group>\n  );\n}\n\nfunction getTransform(position: Anchor): { transform: string; anchorType: BoundsAnchorType } {\n  switch (position) {\n    case 'top':\n      return {\n        anchorType: 'top',\n        transform: 'translate(-50%, calc(-100% - 10px))'\n      };\n    case 'tl':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(0, calc(-100% - 10px))'\n      };\n    case 'tr':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(-100%, calc(-100% - 10px))'\n      };\n    case 'bottom':\n      return {\n        anchorType: 'bottom',\n        transform: 'translate(-50%, 10px)'\n      };\n    case 'bl':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(0, 10px)'\n      };\n    case 'br':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(-100%, 10px)'\n      };\n    case 'left':\n      return {\n        anchorType: 'left',\n        transform: 'translate(calc(-100% - 10px), -50%)'\n      };\n    case 'lt':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(calc(-100% - 10px), 0)'\n      };\n    case 'lb':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(calc(-100% - 10px), -100%)'\n      };\n    case 'right':\n      return {\n        anchorType: 'right',\n        transform: 'translate(10px, -50%)'\n      };\n    case 'rt':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(10px, 0)'\n      };\n    case 'rb':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(10px, -100%)'\n      };\n  }\n}\n\nfunction getArrowStyle(position: Anchor): CSSProperties {\n  switch (position) {\n    case 'top':\n      return {\n        top: 'calc(100% - 5px)',\n        left: 'calc(50% - 5px)',\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tl':\n      return {\n        top: 'calc(100% - 4px)',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tr':\n      return {\n        top: 'calc(100% - 4px)',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'bottom':\n      return {\n        top: '-4px',\n        left: 'calc(50% - 4px)',\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'bl':\n      return {\n        top: '-4px',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'br':\n      return {\n        top: '-4px',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'left':\n      return {\n        top: 'calc(50% - 4px)',\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'right':\n      return {\n        top: 'calc(50% - 4px)',\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n  }\n}\n\nexport const Popover = React.forwardRef<IGroup, PopoverProps>(PopoverComponent);\n\nPopover.displayName = 'Popover';\n"]}
+{"version":3,"sources":["components/popover/popover.tsx"],"names":[],"mappings":"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","file":"popover.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IGroup,\n  IGroupGraphicAttribute,\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 type { BoundsAnchorType } from '@visactor/vutils';\nimport { isValid, merge } from '@visactor/vutils';\nimport type { CSSProperties, ReactElement, ReactNode } from 'react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { Group } from '../../table-components';\n\ntype Anchor = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';\nexport interface PopoverProps {\n  children?: ReactElement;\n  defaultPopupVisible?: boolean;\n  // disabled?: boolean;\n  // popupHoverStay?: boolean;\n  popupVisible?: boolean;\n  // color?: string;\n  position?: Anchor;\n  content?: ReactNode;\n  // onVisibleChange?: (visible: boolean) => void;\n\n  panelStyle?: CSSProperties;\n  arrowStyle?: CSSProperties;\n}\n\nconst defaultProps: PopoverProps = {\n  defaultPopupVisible: false,\n  // popupHoverStay: true,\n  // popupVisible: false,\n  position: 'top'\n};\n\nconst defaultPoptipPanelStyle: CSSProperties = {\n  backgroundColor: 'rgb(255, 255, 255)',\n  boxShadow: '0 4px 10px rgba(0, 0, 0, .1)',\n  fontSize: '14px',\n  borderRadius: '4px',\n  lineHeight: '1.5715',\n  boxSizing: 'border-box',\n  color: 'rgb(78, 89, 105)',\n  border: '1px solid rgb(229, 230, 235)',\n  padding: '12px 16px'\n};\n\nconst Tooltip = (props: {\n  visible: boolean;\n  content: ReactNode;\n  position: Anchor;\n  panelStyle?: CSSProperties;\n  arrowStyle?: CSSProperties;\n}) => {\n  const arrowStyle: CSSProperties = {\n    content: '',\n    height: '8px',\n    width: '8px',\n    position: 'absolute',\n    display: 'block',\n    boxSizing: 'border-box',\n    transform: 'rotate(45deg)',\n    transformOrigin: '50% 50% 0',\n    backgroundColor: 'rgb(255, 255, 255)',\n    border: '1px solid rgb(229, 230, 235)',\n    ...getArrowStyle(props.position),\n\n    ...props.arrowStyle\n  };\n\n  return props.visible ? (\n    <>\n      <div style={merge({}, defaultPoptipPanelStyle, props.panelStyle)}>{props.content}</div>\n      <div style={arrowStyle}></div>\n    </>\n  ) : (\n    <></>\n  );\n};\n\nfunction PopoverComponent(baseProps: PopoverProps, ref: React.Ref<IGroup>) {\n  const props: PopoverProps = merge({}, defaultProps, baseProps);\n  const { content, position, popupVisible, defaultPopupVisible, panelStyle, arrowStyle, children } = props;\n  let popoverRef = React.useRef<IGroup>(null);\n  popoverRef = ref ? (ref as React.RefObject<IGroup>) : popoverRef;\n\n  const [popupOpen, setPopupOpen] = useState(false);\n\n  useEffect(() => {\n    if (popupVisible) {\n      setPopupOpen(true);\n    } else {\n      setPopupOpen(false);\n    }\n    popoverRef.current.stage.renderNextFrame();\n  }, [popupVisible]);\n\n  useEffect(() => {\n    setPopupOpen(popupVisible ?? defaultPopupVisible ?? false);\n  }, []);\n\n  const { transform, anchorType } = getTransform(position);\n  const poptipContainerStyle: CSSProperties = {\n    // display: popupOpen ? 'block' : 'none',\n    transform: transform\n  };\n\n  const groupAttribute: IGroupGraphicAttribute = {\n    react: {\n      // width: 100,\n      // height: 100,\n      style: poptipContainerStyle,\n      element: (\n        <Tooltip\n          visible={popupOpen}\n          content={content}\n          position={position}\n          panelStyle={panelStyle}\n          arrowStyle={arrowStyle}\n        />\n      ),\n      container: null,\n      visible: true,\n      pointerEvents: false,\n      anchorType: anchorType\n    } as IGroupGraphicAttribute['react']\n  };\n\n  const groupMouseEnter = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(true);\n    event.currentTarget.stage.renderNextFrame();\n  }, []);\n\n  const groupMouseLeave = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(false);\n    event.currentTarget.stage.renderNextFrame();\n  }, []);\n\n  return (\n    <Group ref={popoverRef} attribute={groupAttribute} onMouseEnter={groupMouseEnter} onMouseLeave={groupMouseLeave}>\n      {children}\n    </Group>\n  );\n}\n\nfunction getTransform(position: Anchor): { transform: string; anchorType: BoundsAnchorType } {\n  switch (position) {\n    case 'top':\n      return {\n        anchorType: 'top',\n        transform: 'translate(-50%, calc(-100% - 10px))'\n      };\n    case 'tl':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(0, calc(-100% - 10px))'\n      };\n    case 'tr':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(-100%, calc(-100% - 10px))'\n      };\n    case 'bottom':\n      return {\n        anchorType: 'bottom',\n        transform: 'translate(-50%, 10px)'\n      };\n    case 'bl':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(0, 10px)'\n      };\n    case 'br':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(-100%, 10px)'\n      };\n    case 'left':\n      return {\n        anchorType: 'left',\n        transform: 'translate(calc(-100% - 10px), -50%)'\n      };\n    case 'lt':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(calc(-100% - 10px), 0)'\n      };\n    case 'lb':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(calc(-100% - 10px), -100%)'\n      };\n    case 'right':\n      return {\n        anchorType: 'right',\n        transform: 'translate(10px, -50%)'\n      };\n    case 'rt':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(10px, 0)'\n      };\n    case 'rb':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(10px, -100%)'\n      };\n  }\n}\n\nfunction getArrowStyle(position: Anchor): CSSProperties {\n  switch (position) {\n    case 'top':\n      return {\n        top: 'calc(100% - 5px)',\n        left: 'calc(50% - 5px)',\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tl':\n      return {\n        top: 'calc(100% - 4px)',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tr':\n      return {\n        top: 'calc(100% - 4px)',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'bottom':\n      return {\n        top: '-4px',\n        left: 'calc(50% - 4px)',\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'bl':\n      return {\n        top: '-4px',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'br':\n      return {\n        top: '-4px',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'left':\n      return {\n        top: 'calc(50% - 4px)',\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'right':\n      return {\n        top: 'calc(50% - 4px)',\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n  }\n}\n\nexport const Popover = React.forwardRef<IGroup, PopoverProps>(PopoverComponent);\n\nPopover.displayName = 'Popover';\n"]}

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 export * from './tables';
 export * from './table-components';
 export * from './components';
-export declare const version = "1.12.1-alpha.1";
+export declare const version = "1.13.1-alpha.0";

package/cjs/index.js

@@ -18,5 +18,5 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.version = void 0, __exportStar(require("./tables"), exports), __exportStar(require("./table-components"), exports), 
-__exportStar(require("./components"), exports), exports.version = "1.12.1-alpha.1";
+__exportStar(require("./components"), exports), exports.version = "1.13.1-alpha.0";
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,qDAAmC;AACnC,+CAA6B;AAEhB,QAAA,OAAO,GAAG,gBAAgB,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './table-components';\nexport * from './components';\n\nexport const version = \"1.12.1-alpha.1\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,qDAAmC;AACnC,+CAA6B;AAEhB,QAAA,OAAO,GAAG,gBAAgB,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './table-components';\nexport * from './components';\n\nexport const version = \"1.13.1-alpha.0\";\n"]}