@jiaozhiye/qm-design-react 1.7.24 → 1.7.26

package/lib/tour/index.d.ts

@@ -0,0 +1,4 @@
+import Tour from './src/Tour';
+export type { TourProps } from './src/Tour';
+export type { TourStepProps } from './src/TourStep';
+export default Tour;

package/lib/tour/src/Mask.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { PosInfo } from './hooks/useTarget';
+export type MaskProps = {
+    prefixCls?: string;
+    pos: PosInfo;
+    rootClassName?: string;
+    showMask?: boolean;
+    style?: React.CSSProperties;
+    fill?: string;
+    open?: boolean;
+    animated?: boolean | {
+        placeholder: boolean;
+    };
+    zIndex?: number;
+};
+declare const Mask: React.FC<MaskProps>;
+export default Mask;

package/lib/tour/src/Pause.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type PauseProps = {
+    prefixCls?: string;
+    zIndex: number;
+    open?: boolean;
+    onPause?: () => void;
+    onPlay?: () => void;
+};
+declare const Pause: React.FC<PauseProps>;
+export default Pause;

package/lib/tour/src/Tour.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { Gap } from './hooks/useTarget';
+import type { PlacementType } from './placements';
+import type { TourStepInfo, TourStepProps } from './TourStep';
+import type { TriggerProps } from '@rc-component/trigger';
+export interface TourProps extends Pick<TriggerProps, 'onPopupAlign' | 'builtinPlacements'> {
+    steps?: TourStepInfo[];
+    open?: boolean;
+    type?: 'default' | 'primary';
+    defaultCurrent?: number;
+    current?: number;
+    onChange?: (current: number) => void;
+    onClose?: (current: number) => void;
+    onFinish?: () => void;
+    mask?: boolean | {
+        style?: React.CSSProperties;
+        color?: string;
+    };
+    arrow?: boolean | {
+        pointAtCenter: boolean;
+    };
+    control?: boolean;
+    rootClassName?: string;
+    placement?: PlacementType;
+    renderPanel?: (props: TourStepProps, current: number) => React.ReactNode;
+    gap?: Gap;
+    animated?: boolean | {
+        placeholder: boolean;
+    };
+    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
+    zIndex?: number;
+}
+type TourRef = {
+    OPEN: () => void;
+    CLOSE: () => void;
+    SET_ZINDEX: (value: number) => void;
+};
+declare const QmTour: React.ForwardRefExoticComponent<TourProps & React.RefAttributes<TourRef>>;
+export default QmTour;

package/lib/tour/src/TourStep/DefaultPanel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TourStepProps } from './index';
+declare const DefaultPanel: React.FC<TourStepProps>;
+export default DefaultPanel;

package/lib/tour/src/TourStep/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { PlacementType } from '../placements';
+export interface TourStepInfo {
+    arrow?: boolean | {
+        pointAtCenter: boolean;
+    };
+    target?: HTMLElement | (() => HTMLElement) | null | (() => null);
+    cover?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    placement?: PlacementType;
+    mask?: boolean | {
+        style?: React.CSSProperties;
+        color?: string;
+    };
+    className?: string;
+    style?: React.CSSProperties;
+    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
+    indicatorsRender?: (current: number, total: number) => React.ReactNode;
+    zIndex?: number;
+    action?: (node: HTMLElement, current: number) => void;
+}
+export interface TourStepProps extends TourStepInfo {
+    prefixCls?: string;
+    total?: number;
+    current?: number;
+    onClose?: () => void;
+    onFinish?: () => void;
+    renderPanel?: (step: TourStepProps, current: number) => React.ReactNode;
+    onPrev?: () => void;
+    onNext?: () => void;
+}
+declare const TourStep: (props: TourStepProps) => React.JSX.Element;
+export default TourStep;

package/lib/tour/src/hooks/useTarget.d.ts

@@ -0,0 +1,13 @@
+import type { TourStepInfo } from '../TourStep';
+export interface Gap {
+    offset?: number;
+    radius?: number;
+}
+export interface PosInfo {
+    left: number;
+    top: number;
+    height: number;
+    width: number;
+    radius: number;
+}
+export default function useTarget(target: TourStepInfo['target'], open: boolean, gap?: Gap, scrollIntoViewOptions?: boolean | ScrollIntoViewOptions): [PosInfo, HTMLElement];

package/lib/tour/src/placements.d.ts

@@ -0,0 +1,29 @@
+import type { BuildInPlacements } from '@rc-component/trigger';
+export interface AdjustOverflow {
+    adjustX?: 0 | 1;
+    adjustY?: 0 | 1;
+}
+export interface PlacementsConfig {
+    arrowWidth: number;
+    arrowPointAtCenter?: boolean;
+    autoAdjustOverflow?: boolean | AdjustOverflow;
+    offset: number;
+    borderRadius: number;
+    visibleFirst?: boolean;
+}
+export declare const MAX_VERTICAL_CONTENT_RADIUS = 8;
+export declare function getArrowOffset(options: {
+    contentRadius: number;
+    limitVerticalRadius?: boolean;
+}): {
+    dropdownArrowOffset: number;
+    dropdownArrowOffsetVertical: number;
+};
+export declare function getOverflowOptions(placement: string, arrowOffset: ReturnType<typeof getArrowOffset>, arrowWidth: number, autoAdjustOverflow?: boolean | AdjustOverflow): {
+    adjustX?: number | boolean | undefined;
+    adjustY?: number | boolean | undefined;
+    shiftX?: number | boolean | undefined;
+    shiftY?: number | boolean | undefined;
+};
+export type PlacementType = keyof BuildInPlacements;
+export default function getPlacements(config: PlacementsConfig): BuildInPlacements;

package/lib/tour/src/util.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { PlacementType } from './placements';
+export declare const isInViewPort: (element: HTMLElement) => boolean;
+export declare const getPlacement: (targetElement?: HTMLElement | null, placement?: PlacementType, stepPlacement?: PlacementType) => string;
+export declare const isValidNode: (node: React.ReactNode) => boolean;

package/lib/tour/style/index.less

@@ -0,0 +1,157 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2022-01-11 18:01:20
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2023-07-26 17:22:16
+ */
+@import '../../style/common';
+
+@prefix-tour: ~'@{qm-prefix}-tour';
+
+.@{prefix-tour} {
+  .reset-container();
+  position: absolute;
+  display: block;
+  visibility: visible;
+  min-width: 500px;
+  &-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;
+    }
+  }
+  & &-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;
+  }
+  & &-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);
+    }
+  }
+  & &-cover {
+    text-align: center;
+    padding: 45px 15px 0px;
+  }
+  & &-header {
+    padding: 15px 15px 8px;
+  }
+  & &-title {
+    font-weight: 600;
+  }
+  & &-description {
+    overflow-wrap: break-word;
+    padding: 0px 15px;
+  }
+  & &-footer {
+    text-align: end;
+    display: flex;
+    padding: 8px 15px 15px;
+  }
+  & &-indicators {
+    display: inline-block;
+  }
+  & &-indicators &-indicator {
+    width: 6px;
+    height: 6px;
+    display: inline-block;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.15);
+    &-active {
+      background: @--primary-color;
+    }
+  }
+  & &-indicators &-indicator:not(:last-child) {
+    margin-inline-end: 6px;
+  }
+  & &-buttons {
+    margin-inline-start: auto;
+  }
+  &-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;
+    }
+  }
+  // =======================================
+  &-mask &-placeholder-animated {
+    transition: all 0.2s ease;
+  }
+  &-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);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaozhiye/qm-design-react",
-  "version": "1.7.24",
+  "version": "1.7.26",
   "description": "A Component Library for React",
   "keywords": [
     "React",
@@ -49,6 +49,7 @@
     "react": ">=16.14.0"
   },
   "dependencies": {
+    "@rc-component/trigger": "^1.14.0",
     "add-dom-event-listener": "^1.1.0",
     "antd": "4.24.12",
     "axios": "^0.27.2",