dcp-design-react 1.7.42

package/lib/form/style/index.less

@@ -0,0 +1,352 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-12-02 20:00:11
+ */
+@import '../../style/common';
+
+@prefix-form: ~'@{qm-prefix}-form';
+
+.@{prefix-form} {
+  position: relative;
+  .ant-form-item {
+    margin-bottom: @--margin-md + 2px;
+    .ant-form-item-label {
+      & > label[title=''] {
+        width: 100%;
+        display: inline-flex;
+        justify-content: right;
+        .ant-select {
+          flex: auto;
+          width: 0;
+          text-align: left;
+        }
+      }
+      &-wrap {
+        line-height: 1.075;
+      }
+      &-left > label[title=''] {
+        justify-content: left;
+      }
+    }
+    // placeholder
+    input::placeholder {
+      text-align: left;
+    }
+    // ant-form-inline
+    &-with-help {
+      margin-bottom: @--margin-md + 2px;
+    }
+    // valigator
+    .ant-form-item-explain {
+      .text-overflow-cut();
+      display: flex;
+      gap: @--margin-md;
+      min-height: auto;
+      height: @--font-size-sm;
+      font-size: @--font-size-sm;
+      line-height: 1;
+    }
+    // search
+    .ant-input-search {
+      width: calc(100% + 1px);
+      & > .ant-input-group > .ant-input-group-addon {
+        line-height: 1;
+      }
+    }
+    // textarea
+    .ant-input-textarea-show-count {
+      position: relative;
+      &::after {
+        position: absolute;
+        right: 3px;
+        bottom: 0;
+        margin: 0;
+      }
+    }
+    // input extra
+    .extra-tooltip {
+      color: @--text-color-secondary-dark;
+      vertical-align: -0.4em;
+      transform: scale(1.2);
+    }
+    .extra-text {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+    .extra-overflow-cut {
+      .text-overflow-cut();
+    }
+    // select
+    .ant-select {
+      width: 100%;
+    }
+    // input number
+    .ant-input-number.right {
+      input {
+        text-align: right;
+      }
+      &.controls {
+        input {
+          padding-right: 30px;
+        }
+      }
+    }
+    // range input
+    .site-input-left {
+      border-right-width: 0;
+      z-index: 1;
+    }
+    .site-input-left:hover,
+    .site-input-left:focus {
+      border-right-width: 1px;
+    }
+    .site-input-right {
+      border-left-width: 0;
+      &.ant-input-search .ant-input-affix-wrapper {
+        border-left-width: 0;
+      }
+    }
+    .site-input-right:hover,
+    .site-input-right:focus {
+      border-left-width: 1px;
+      &.ant-input-search .ant-input-affix-wrapper {
+        border-left-width: 1px;
+      }
+    }
+    // search-helper-multiple
+    .search-helper-multiple {
+      .ant-input-group > .ant-select:first-child {
+        z-index: 1;
+        .ant-select-selector {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+    // select-multiple
+    .ant-select-multiple:not(.ant-select-disabled) {
+      .ant-select-selection-overflow-item-rest {
+        cursor: pointer;
+        * {
+          pointer-events: none;
+        }
+      }
+    }
+  }
+  // ------ size ------
+  // 40  32  24
+  &--lg {
+  }
+  &--sm {
+    .ant-form-item {
+      margin-bottom: @--margin-md;
+      .ant-form-item-label {
+        &-wrap {
+          line-height: 1;
+        }
+      }
+      // valigator
+      .ant-form-item-control {
+        // 待优化
+        & > div:nth-last-of-type(1)[style*='nowrap'] {
+          transform: scale(0.8334);
+          transform-origin: 0 50%;
+        }
+      }
+    }
+  }
+  &__only-show {
+    // ...
+  }
+  &__compact {
+    .ant-form-item {
+      margin-bottom: 4px;
+      .ant-form-item-control {
+        & > div:nth-last-of-type(1)[style*='nowrap'] {
+          display: none !important;
+        }
+      }
+    }
+  }
+}
+
+.ant-picker-footer-extra {
+  .ant-tag {
+    cursor: pointer;
+  }
+}
+
+// immediate
+.@{prefix-form}-immediate {
+  padding: 5px 15px;
+  overflow-y: auto !important;
+  .table {
+    width: 100%;
+    th,
+    td {
+      height: 32px;
+      text-align: left;
+      border-bottom: 1px solid @--border-color-secondary;
+    }
+    tbody {
+      tr td {
+        cursor: pointer;
+      }
+      tr:hover,
+      tr.active {
+        background-color: @--primary-1;
+      }
+    }
+  }
+  // 40  32  24
+  &--lg {
+    .table {
+      th,
+      td {
+        height: 40px;
+      }
+    }
+  }
+  &--sm {
+    padding: 5px 10px !important;
+    .table {
+      th,
+      td {
+        height: 24px;
+      }
+    }
+  }
+}
+
+// city-select
+.@{prefix-form}-city-select {
+  padding: 15px 15px 10px;
+  max-width: 420px;
+  .container {
+    .city-drop {
+      &-toper {
+        margin-bottom: 10px;
+        display: flex;
+        &__type {
+          display: inline-block;
+        }
+        &__search {
+          margin-left: 10px;
+        }
+      }
+      &-letter {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 4px;
+        .tag {
+          list-style: none;
+          line-height: 1.75;
+          font-size: @--font-size-sm;
+          padding: 0 8px;
+          margin: 0 4px 4px 0;
+          border: 1px solid @--border-color-secondary;
+          border-radius: @--border-radius-base;
+          cursor: pointer;
+          &.actived {
+            color: @--white;
+            background-color: @--primary-color;
+            border-color: @--primary-color;
+          }
+        }
+      }
+      &-list {
+        margin-right: -2px;
+        max-height: 350px;
+        overflow-y: auto;
+        dl {
+          margin: 0;
+          dt {
+            float: left;
+            font-weight: 700;
+          }
+          dd {
+            white-space: normal;
+            margin-inline-start: 50px;
+            margin-bottom: 8px;
+            li {
+              display: inline-block;
+              margin-right: 8px;
+              cursor: pointer;
+              &:hover {
+                color: @--primary-color;
+              }
+              &.actived {
+                color: @--primary-color;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  // 40  32  24
+  &--lg {
+  }
+  &--sm {
+    padding: 10px 10px 5px !important;
+  }
+}
+
+// region-select
+.@{prefix-form}-region-select {
+  padding: 10px 15px;
+  .container {
+    margin-top: -10px;
+    .region-box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 440px;
+      &__item {
+        margin: 0 5px;
+        width: 100px;
+        cursor: pointer;
+        .text-overflow-cut();
+        &:hover {
+          color: @--primary-color;
+        }
+        &.actived {
+          color: @--primary-color;
+        }
+      }
+    }
+  }
+  // 40  32  24
+  &--lg {
+  }
+  &--sm {
+    padding: 15px 10px 5px !important;
+  }
+}
+
+// fields-filter
+.@{prefix-form}-fields-filter {
+  .fields-list {
+    padding: 4px @--padding-md;
+    ul {
+      margin: 0;
+      li.item {
+        line-height: 1.75;
+        .text-overflow-cut();
+        .handle {
+          padding: 2px;
+          color: @--text-color-secondary;
+          cursor: s-resize;
+          transform: scale(0.9);
+        }
+      }
+    }
+  }
+  &--lg {
+  }
+  &--sm {
+    font-size: @--font-size-sm;
+  }
+}

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 PanelProps = {
+    action: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onFinish?: () => void;
+};
+declare const Panel: React.FC<PanelProps>;
+export default Panel;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { PlacementType } from '../../tour/src/placements';
+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;
+    placement?: PlacementType;
+    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/hoc/outsideClick.d.ts

@@ -0,0 +1 @@
+export declare const OutsideClick: (WrappedComponent: any) => any;

package/lib/hooks/useDebounce.d.ts

@@ -0,0 +1,3 @@
+type noop = (...args: any[]) => any;
+export default function useDebounce<T extends noop>(fn: T, delay?: number): (...args: any[]) => void;
+export {};

package/lib/hooks/useEvent.d.ts

@@ -0,0 +1,2 @@
+import type { AnyFunction } from '../_utils/types';
+export default function useEvent<T extends AnyFunction<any>>(callback: T): T;

package/lib/hooks/useForceUpdate.d.ts

@@ -0,0 +1 @@
+export default function useForceUpdate(): () => void;

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;