@jiaozhiye/qm-design-react 1.7.26 → 1.7.28

package/lib/form/src/form.d.ts

@@ -117,7 +117,7 @@ declare class QmForm extends Component<IProps, IState> {
     setExpandHandle(collapse: boolean): void;
     createInputFocus(): void;
     getFormItemLabel(label: string | IFormItem): string;
-    getBlockDerivedItems(): Pick<IFormItem, "fieldName" | "label">[][];
+    getBlockDerivedItems(): Pick<IFormItem, "label" | "fieldName">[][];
     getFormItemDisplay({ type, fieldName }: {
         type: any;
         fieldName: any;

package/lib/guide-tracker/index.d.ts

@@ -0,0 +1,3 @@
+import GuideTracker from './src/guideTracker';
+export type { GuideTrackerProps } from './src/guideTracker';
+export default GuideTracker;

package/lib/guide-tracker/src/Panel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type IProps = {
+    action: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onFinish?: () => void;
+};
+declare const Panel: React.FC<IProps>;
+export default Panel;

package/lib/guide-tracker/src/guideTracker.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+type StepProps = {
+    id: string;
+    nodePath: string;
+    title: string;
+};
+type IOptions = Omit<StepProps, 'title'> & {
+    actionStatus: 'add' | 'edit';
+    DO_CLOSE: () => void;
+};
+type IProps = {
+    open?: boolean;
+    current?: number;
+    defaultCurrent?: number;
+    steps?: StepProps[];
+    overlayClassName?: string;
+    overlayStyle?: React.CSSProperties;
+    control?: boolean;
+    destroyOnHide?: boolean;
+    onChange?: (items: StepProps[], current: number) => void;
+    onClose?: (current: number) => void;
+    onFinish?: () => void;
+    contentRender?: (options: IOptions, current: number) => React.ReactNode;
+};
+type GuideTrackerRef = {
+    OPEN: () => void;
+    CLOSE: () => void;
+    GET_CURRENT_STEP: () => {
+        current: number;
+        nodePath?: string;
+    };
+};
+export type GuideTrackerProps = IProps;
+declare const QmGuideTracker: React.ForwardRefExoticComponent<IProps & React.RefAttributes<GuideTrackerRef>>;
+export default QmGuideTracker;

package/lib/guide-tracker/src/lib/Highlighter.d.ts

@@ -0,0 +1,2 @@
+export declare function hideOverlay(): void;
+export declare function showOverlay(elements: Array<HTMLElement> | null, componentName: string | null, hideAfterTimeout: boolean): void;

package/lib/guide-tracker/src/lib/Overlay.d.ts

@@ -0,0 +1,36 @@
+import type { Rect } from './utils';
+type Box = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+declare class OverlayRect {
+    node: HTMLElement;
+    border: HTMLElement;
+    padding: HTMLElement;
+    content: HTMLElement;
+    constructor(doc: Document, container: HTMLElement);
+    remove(): void;
+    update(box: Rect, dims: any): void;
+}
+declare class OverlayTip {
+    tip: HTMLElement;
+    nameSpan: HTMLElement;
+    dimSpan: HTMLElement;
+    constructor(doc: Document, container: HTMLElement);
+    remove(): void;
+    updateText(name: string, width: number, height: number): void;
+    updatePosition(dims: Box, bounds: Box): void;
+}
+export default class Overlay {
+    window: any;
+    tipBoundsWindow: any;
+    container: HTMLElement;
+    tip: OverlayTip;
+    rects: Array<OverlayRect>;
+    constructor();
+    remove(): void;
+    inspect(nodes: Array<HTMLElement>, name?: string | null): void;
+}
+export {};

package/lib/guide-tracker/src/lib/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="lodash" />
+type HighlighterProps = {
+    excludeSelectors?: string[];
+    onSelect?: (node: HTMLElement, XPath: string) => void;
+};
+export default class Highlighter {
+    _isRunning: boolean;
+    _selectIgnore: boolean;
+    _lastHoveredNode: HTMLElement | null;
+    excludeSelectors: string[];
+    onSelect: HighlighterProps['onSelect'];
+    constructor(options: HighlighterProps);
+    startHandle(): void;
+    stopHandle(): void;
+    iframesListeningTo: Set<HTMLIFrameElement>;
+    startInspectingNative(): void;
+    stopInspectingNative(): void;
+    registerListenersOnWindow(window: any): void;
+    removeListenersOnWindow(window: any): void;
+    onClick: (event: MouseEvent) => void;
+    onMouseEvent: (event: MouseEvent) => void;
+    onPointerDown: (event: MouseEvent) => void;
+    onPointerMove: (event: MouseEvent) => void;
+    onPointerUp: (event: MouseEvent) => void;
+    selectFiberForNode: import("lodash").DebouncedFunc<(node: HTMLElement) => void>;
+    getEventTarget(event: MouseEvent): HTMLElement;
+}
+export declare function getNodeByXPath(xpathString: string): HTMLElement | null;
+export {};

package/lib/guide-tracker/src/lib/utils.d.ts

@@ -0,0 +1,27 @@
+export interface Rect {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+}
+export declare function getOwnerWindow(node: HTMLElement): (Window & typeof globalThis) | null;
+export declare function getOwnerIframe(node: HTMLElement): HTMLElement | null;
+export declare function getBoundingClientRectWithBorderOffset(node: HTMLElement): Rect;
+export declare function mergeRectOffsets(rects: Array<Rect>): Rect;
+export declare function getNestedBoundingClientRect(node: HTMLElement, boundaryWindow: typeof window): Rect;
+export declare function getElementDimensions(domElement: Element): {
+    borderBottom: number;
+    borderLeft: number;
+    borderRight: number;
+    borderTop: number;
+    marginBottom: number;
+    marginLeft: number;
+    marginRight: number;
+    marginTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+};

package/lib/guide-tracker/style/index.less

@@ -0,0 +1,189 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2022-01-11 18:01:20
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2023-07-29 23:42:13
+ */
+@import '../../style/common';
+
+@prefix-guide-tracker: ~'@{qm-prefix}-guide-tracker';
+
+.@{prefix-guide-tracker} {
+  .reset-container();
+  position: absolute;
+  display: block;
+  visibility: visible;
+  min-width: 450px;
+  &-hidden {
+    display: none;
+  }
+  & &-arrow {
+    display: block;
+    width: 15px;
+    height: 15px;
+    z-index: 1;
+    overflow: hidden;
+    pointer-events: none;
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0px;
+      inset-inline-start: 0px;
+      width: 15px;
+      height: 8px;
+      clip-path: path('M 0 8 A 4 4 0 0 0 2.82843 6.82843 L 6.58579 3.07107 A 2 2 0 0 1 9.41421 3.07107 L 13.1716 6.82843 A 4 4 0 0 0 16 8 Z');
+      background-color: #fff;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      width: 8.97056px;
+      height: 8.97056px;
+      bottom: 0px;
+      transform: translateY(50%) rotate(-135deg);
+      box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 5px;
+      z-index: 0;
+      inset-inline: 0px;
+      margin: auto;
+      border-radius: 0px 0px 2px;
+      background: 0px 0px;
+    }
+  }
+  & &-close {
+    position: absolute;
+    top: 10px;
+    inset-inline-end: 10px;
+    color: @--text-color-secondary;
+    width: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    border-radius: 4px;
+    transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
+    &:hover {
+      color: rgba(0, 0, 0, 0.88);
+      background-color: rgba(0, 0, 0, 0.06);
+    }
+  }
+  & &-content {
+    position: relative;
+  }
+  & &-inner {
+    box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) 0px 1px 6px -1px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px;
+    background-color: #fff;
+    background-clip: padding-box;
+    text-decoration: none;
+    border-radius: 8px;
+    padding: 10px 15px 15px;
+  }
+  &-primary &-inner {
+    color: #fff;
+    background-color: rgba(@--primary-color, 0.85);
+    .panel-label {
+      margin-bottom: 5px;
+      .title {
+        font-weight: 600;
+      }
+      .step {
+        margin-left: 20px;
+      }
+    }
+    .menu-icon {
+      right: 35px;
+    }
+  }
+  &-primary &-arrow {
+    &::before {
+      background-color: rgba(@--primary-color, 0.85);
+    }
+  }
+  &-primary &-close {
+    color: #fff;
+    &:hover {
+      color: #fff;
+    }
+  }
+  &-control {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    background: linear-gradient(to right bottom, @--primary-4, @--primary-7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+    cursor: pointer;
+    .anticon {
+      color: #fff;
+      font-size: 20px;
+    }
+  }
+  // =======================================
+  &-placement-bottom &-arrow {
+    left: 50%;
+    transform: translateX(-50%) translateY(-100%);
+  }
+  &-placement-top &-arrow {
+    left: 50%;
+    transform: translateX(-50%) translateY(100%) rotate(180deg);
+  }
+  &-placement-right &-arrow {
+    top: 50%;
+    transform: translateY(-50%) translateX(-100%) rotate(-90deg);
+  }
+  &-placement-left &-arrow {
+    top: 50%;
+    transform: translateY(-50%) translateX(100%) rotate(90deg);
+  }
+}
+
+.@{prefix-guide-tracker}__popper {
+  .step-list {
+    ul {
+      margin: 0;
+      li.item {
+        line-height: 2;
+        display: flex;
+        align-items: center;
+        padding: 0 @--padding-md;
+        &.actived {
+          background-color: @--primary-2;
+        }
+        .handle {
+          padding: 2px;
+          color: @--text-color-secondary;
+          cursor: s-resize;
+          transform: scale(0.9);
+        }
+        .box {
+          flex: 1 0;
+          display: inline-flex;
+          align-items: center;
+          .title {
+            flex: 1 0;
+            width: 0;
+            .text-overflow-cut();
+          }
+          .close-icon {
+            padding: 2px;
+            font-size: 12px;
+            color: @--text-color-secondary;
+            border-radius: 4px;
+            cursor: pointer;
+            display: none;
+          }
+          &:hover .close-icon {
+            display: block;
+            background-color: rgba(0, 0, 0, 0.06);
+          }
+        }
+      }
+    }
+  }
+}

package/lib/hooks/useLayoutUpdateEffect.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useLayoutUpdateEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;

package/lib/hooks/useMergedState.d.ts

@@ -0,0 +1,8 @@
+type Updater<T> = (updater: T | ((origin: T) => T)) => void;
+export default function useMergedState<T, R = T>(defaultStateValue: T | (() => T), option?: {
+    defaultValue?: T | (() => T);
+    value?: T;
+    onChange?: (value: T, prevValue: T) => void;
+    postState?: (value: T) => T;
+}): [R, Updater<T>];
+export {};

package/lib/hooks/useSafeState.d.ts

@@ -0,0 +1,4 @@
+type Updater<T> = T | ((prevValue: T) => T);
+export type SetState<T> = (nextValue: Updater<T>, ignoreDestroy?: boolean) => void;
+export default function useSafeState<T>(defaultValue?: T | (() => T)): [T, SetState<T>];
+export {};

package/lib/index.d.ts

@@ -54,10 +54,12 @@ export type { RangeTableHelperProps as QmRangeTableHelperProps } from './range-t
 export { default as QmRangeTableHelper } from './range-table-helper';
 export type { TourProps as QmTourProps, TourStepProps as QmTourStepProps } from './tour';
 export { default as QmTour } from './tour';
-export type { PrintProps as QmPrintProps } from './print';
-export { default as QmPrint } from './print';
 export type { TransitionProps as QmTransitionProps } from './transition';
 export { default as QmTransition } from './transition';
+export type { PrintProps as QmPrintProps } from './print';
+export { default as QmPrint } from './print';
+export type { GuideTrackerProps as QmGuideTrackerProps } from './guide-tracker';
+export { default as QmGuideTracker } from './guide-tracker';
 export { default as pinyin } from './pinyin';
 export { default as version } from './version';
 export * from './antd';