@king-design/react 3.5.2 → 3.6.0

package/components/tour/tour.js

@@ -0,0 +1,70 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, createRef } from 'intact-react';
+import template from "./tour.vdt";
+import { useConfigContext } from '../config';
+import { createContext } from '../context';
+import { usePosition } from './usePosition';
+import { useSteps } from './useSteps';
+import { useArrow } from './useArrow';
+import { useHighlight } from './useHighlight';
+import { useNavigation } from './useNavigation';
+import { useFixBody } from './useFixBody';
+import { useMaskClosable } from './useMaskClosable';
+import { themes } from './styles';
+export var TourContext = createContext();
+var typeDefs = {
+  value: Number,
+  theme: themes,
+  data: Array,
+  beforeChange: Function,
+  maskClosable: Boolean,
+  closable: Boolean,
+  doneText: String,
+  showArrow: Boolean,
+  visible: Boolean
+};
+var defaults = function defaults() {
+  return {
+    value: 0,
+    theme: 'light',
+    data: [],
+    maskClosable: true,
+    closable: true,
+    doneText: '完成',
+    showArrow: true,
+    visible: true
+  };
+};
+var events = {
+  finish: true,
+  prev: true,
+  next: true,
+  positioned: true
+};
+export var Tour = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Tour, _Component);
+  function Tour() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    _this.tourRef = createRef();
+    _this.steps = useSteps();
+    _this.arrow = useArrow();
+    _this.highlight = useHighlight(_this.steps.getTargetElement);
+    _this.position = usePosition(_this.tourRef, _this.steps.getTargetElement);
+    _this.navigation = useNavigation(_this.steps.getTotalSteps);
+    _this.fixBody = useFixBody();
+    _this.useMaskClosable = useMaskClosable();
+    return _this;
+  }
+  return Tour;
+}(Component);
+Tour.template = template;
+Tour.typeDefs = typeDefs;
+Tour.defaults = defaults;
+Tour.events = events;

package/components/tour/tour.vdt.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, map as _$ma } from 'intact-react';
+import { makeStyles } from './styles';
+import { TourStep } from './step';
+import { TourContext } from './tour';
+import { getRestProps, stopPropagation } from '../utils';
+import { mapChildren, isComponentVNode } from '../utils';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _$cn2, _$cn3;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    className = _this$get.className,
+    data = _this$get.data,
+    children = _this$get.children,
+    value = _this$get.value,
+    hoverable = _this$get.hoverable,
+    showArrow = _this$get.showArrow,
+    theme = _this$get.theme,
+    visible = _this$get.visible,
+    maskClosable = _this$get.maskClosable,
+    doneText = _this$get.doneText,
+    closable = _this$get.closable;
+  var k = this.config.k;
+  var currentValue = value !== undefined ? value : 0;
+  var _this$arrow = this.arrow,
+    arrowType = _this$arrow.arrowType,
+    arrowRef = _this$arrow.arrowRef;
+  var highlightRef = this.highlight.highlightRef;
+  var _this$navigation = this.navigation,
+    prev = _this$navigation.prev,
+    next = _this$navigation.next,
+    finish = _this$navigation.finish;
+  var getTotalSteps = this.steps.getTotalSteps;
+  var contextValue = {
+    value: value || 0,
+    total: getTotalSteps(),
+    doneText: doneText,
+    closable: closable,
+    onPrev: prev,
+    onNext: next,
+    onFinish: finish
+  };
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tour"] = true, _classNameObj[k + "-" + theme] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+  return visible ? _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), _$cc(TourContext.Provider, {
+    'value': contextValue,
+    'children': [null, currentValue !== undefined ? _$ce(2, 'div', null, 1, _$cn((_$cn2 = {}, _$cn2[k + "-tour-target-highlight"] = true, _$cn2[k + "-hoverable"] = hoverable, _$cn2)), null, null, highlightRef) : undefined, null, _$ce(2, 'div', [!children ? _$ma(data, function ($value, $key) {
+      return $key === currentValue ? _$cc(TourStep, _extends({
+        'key': $key
+      }, $value), $key) : undefined;
+    }, $this) : mapChildren(children, function (vNode, index) {
+      if (isComponentVNode(vNode, TourStep)) {
+        if (index === currentValue) {
+          return vNode;
+        }
+      }
+      return null;
+    }), null, showArrow && arrowType.value ? _$ce(2, 'i', null, 1, _$cn((_$cn3 = {}, _$cn3[k + "-tour-arrow"] = true, _$cn3[k + "-" + arrowType.value] = arrowType.value, _$cn3)), null, null, arrowRef) : undefined], 0, _$cn(k + "-tour-step-wrapper"), {
+      'ev-click': stopPropagation
+    }, null, this.tourRef)]
+  })) : undefined;
+}
+;

package/components/tour/useArrow.d.ts

@@ -0,0 +1,4 @@
+export declare function useArrow(): {
+    arrowType: import("../../hooks/useState").State<string | null>;
+    arrowRef: import('intact-react').RefObject<HTMLElement>;
+};

package/components/tour/useArrow.js

@@ -0,0 +1,40 @@
+import { useInstance, createRef, nextTick } from 'intact-react';
+import { useState } from '../../hooks/useState';
+import { clamp } from '../utils';
+export function useArrow() {
+  var instance = useInstance();
+  var arrowType = useState(null);
+  var arrowRef = createRef();
+  // 监听positioned事件
+  instance.on('positioned', function (feedback) {
+    updateArrow(feedback);
+  });
+  // update arrow position and type
+  function updateArrow(feedback) {
+    if (!instance.get('showArrow')) return;
+    arrowType.set(feedback[feedback.important]);
+    nextTick(function () {
+      if (instance.$unmounted) return;
+      var arrow = arrowRef.value;
+      var target = feedback.target,
+        element = feedback.element;
+      if (feedback.important === 'vertical') {
+        // vertical important, adjust horizontal position
+        var arrowWidth = arrow.offsetWidth;
+        var left = target.left - element.left + (target.width - arrowWidth) / 2;
+        left = clamp(left, 1, element.width - 1 - arrowWidth);
+        arrow.setAttribute('style', "left: " + left + "px");
+      } else {
+        // horizontal important, adjust vertical position
+        var arrowHeight = arrow.offsetHeight;
+        var top = target.top - element.top + target.height / 2 - arrowHeight / 2;
+        top = clamp(top, 1, element.height - 1 - arrowHeight);
+        arrow.setAttribute('style', "top: " + top + "px");
+      }
+    });
+  }
+  return {
+    arrowType: arrowType,
+    arrowRef: arrowRef
+  };
+}

package/components/tour/useFixBody.d.ts

@@ -0,0 +1,4 @@
+export declare function useFixBody(): {
+    onOpen: () => void;
+    onClosed: () => void;
+};

package/components/tour/useFixBody.js

@@ -0,0 +1,17 @@
+import { useInstance } from 'intact-react';
+import { useFixBody as useFixBodyHook } from '../../hooks/useFixBody';
+export function useFixBody() {
+  var instance = useInstance();
+  var fixBodyHook = useFixBodyHook();
+  instance.watch('visible', function (visible) {
+    if (visible) {
+      fixBodyHook.onOpen();
+    } else {
+      fixBodyHook.onClose();
+    }
+  });
+  return {
+    onOpen: fixBodyHook.onOpen,
+    onClosed: fixBodyHook.onClose
+  };
+}

package/components/tour/useHighlight.d.ts

@@ -0,0 +1,4 @@
+export declare function useHighlight(getTargetElement: (index?: number) => HTMLElement | null): {
+    highlightRef: import('intact-react').RefObject<HTMLElement>;
+    updateHighlight: () => void;
+};

package/components/tour/useHighlight.js

@@ -0,0 +1,31 @@
+import { useInstance, createRef, nextTick } from 'intact-react';
+export function useHighlight(getTargetElement) {
+  var instance = useInstance();
+  var highlightRef = createRef();
+  instance.on('$updated', updateHighlight);
+  instance.watch('visible', function (visible) {
+    if (visible) {
+      nextTick(function () {
+        updateHighlight();
+      });
+    }
+  });
+  // update highlight element position and size
+  function updateHighlight() {
+    var highlightElem = highlightRef.value;
+    var targetElem = getTargetElement();
+    if (highlightElem && targetElem) {
+      var rect = targetElem.getBoundingClientRect();
+      var padding = 8;
+      highlightElem.style.width = rect.width + padding * 2 + "px";
+      highlightElem.style.height = rect.height + padding * 2 + "px";
+      highlightElem.style.position = 'fixed';
+      highlightElem.style.left = rect.left - padding + "px";
+      highlightElem.style.top = rect.top - padding + "px";
+    }
+  }
+  return {
+    highlightRef: highlightRef,
+    updateHighlight: updateHighlight
+  };
+}

package/components/tour/useMaskClosable.d.ts

@@ -0,0 +1 @@
+export declare function useMaskClosable(): void;

package/components/tour/useMaskClosable.js

@@ -0,0 +1,25 @@
+import { useInstance } from 'intact-react';
+import { useDocumentClick } from "../../hooks/useDocumentClick";
+export function useMaskClosable() {
+  var tour = useInstance();
+  var _useDocumentClick = useDocumentClick(tour.tourRef, function (e) {
+      var maskClosable = tour.get('maskClosable');
+      if (maskClosable) {
+        // 检查点击的是否是当前目标元素或其子元素
+        var targetElement = tour.steps.getTargetElement();
+        if (targetElement && (e.target === targetElement || targetElement.contains(e.target))) {
+          return; // 点击的是目标元素，不关闭
+        }
+        tour.navigation.finish();
+      }
+    }, true),
+    addDocumentClick = _useDocumentClick[0],
+    removeDocumentClick = _useDocumentClick[1];
+  tour.watch('visible', function (visible) {
+    if (visible) {
+      addDocumentClick();
+    } else {
+      removeDocumentClick();
+    }
+  });
+}

package/components/tour/useNavigation.d.ts

@@ -0,0 +1,5 @@
+export declare function useNavigation(getTotalSteps: () => number): {
+    prev: () => Promise<void>;
+    next: () => Promise<void>;
+    finish: () => void;
+};

package/components/tour/useNavigation.js

@@ -0,0 +1,103 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import { useInstance } from 'intact-react';
+export function useNavigation(getTotalSteps) {
+  var instance = useInstance();
+  function prev() {
+    return _prev.apply(this, arguments);
+  }
+  function _prev() {
+    _prev = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _instance$get, value, beforeChange, canChange;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _instance$get = instance.get(), value = _instance$get.value, beforeChange = _instance$get.beforeChange;
+            if (!(value === undefined || value <= 0)) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            if (!beforeChange) {
+              _context.next = 9;
+              break;
+            }
+            _context.next = 6;
+            return beforeChange(value - 1);
+          case 6:
+            canChange = _context.sent;
+            if (!(canChange === false)) {
+              _context.next = 9;
+              break;
+            }
+            return _context.abrupt("return");
+          case 9:
+            instance.set('value', value - 1);
+            instance.trigger('prev', value - 1);
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return _prev.apply(this, arguments);
+  }
+  function next() {
+    return _next.apply(this, arguments);
+  }
+  function _next() {
+    _next = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _instance$get2, value, beforeChange, steps, canChange;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _instance$get2 = instance.get(), value = _instance$get2.value, beforeChange = _instance$get2.beforeChange;
+            if (!(value === undefined)) {
+              _context2.next = 3;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 3:
+            steps = getTotalSteps();
+            if (!(value >= steps - 1)) {
+              _context2.next = 7;
+              break;
+            }
+            finish();
+            return _context2.abrupt("return");
+          case 7:
+            if (!beforeChange) {
+              _context2.next = 13;
+              break;
+            }
+            _context2.next = 10;
+            return beforeChange(value + 1);
+          case 10:
+            canChange = _context2.sent;
+            if (!(canChange === false)) {
+              _context2.next = 13;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 13:
+            instance.set('value', value + 1);
+            instance.trigger('next', value + 1);
+          case 15:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return _next.apply(this, arguments);
+  }
+  function finish() {
+    instance.trigger('finish');
+    instance.set('visible', false);
+  }
+  return {
+    prev: prev,
+    next: next,
+    finish: finish
+  };
+}

package/components/tour/usePosition.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'intact-react';
+import { Options as PositionOptions } from '../position';
+export declare function usePosition(stepRef: RefObject<HTMLDivElement>, getTargetElement: (index?: number) => HTMLElement | null): {
+    getPositionOptions: (index?: number) => PositionOptions;
+    updatePosition: () => void;
+};

package/components/tour/usePosition.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance, onMounted, nextTick } from 'intact-react';
+import { position } from '../position';
+var CENTER_POSITION_OPTIONS = {
+  my: 'center center',
+  at: 'center center',
+  collision: 'none'
+};
+export function usePosition(stepRef, getTargetElement) {
+  var instance = useInstance();
+  instance.watch('value', function (value) {
+    if (value !== undefined && value >= 0) {
+      nextTick(function () {
+        return updatePosition();
+      });
+    }
+  });
+  instance.watch('visible', function (visible) {
+    if (visible) {
+      updatePosition();
+    }
+  }, {
+    presented: true
+  });
+  onMounted(function () {
+    updatePosition();
+  });
+  // get position options
+  function getPositionOptions(index) {
+    var currentIndex = index !== undefined ? index : instance.get('value') || 0;
+    var positionConfig;
+    var _instance$get = instance.get(),
+      data = _instance$get.data;
+    if (data && data[currentIndex]) {
+      positionConfig = data[currentIndex].position;
+    }
+    if (!positionConfig && instance.steps.steps[currentIndex]) {
+      var _instance$steps$steps;
+      positionConfig = (_instance$steps$steps = instance.steps.steps[currentIndex].props) == null ? void 0 : _instance$steps$steps.position;
+    }
+    if (!positionConfig) {
+      positionConfig = 'bottom';
+    }
+    if (typeof positionConfig === 'string') {
+      switch (positionConfig) {
+        case 'left':
+          return {
+            my: 'right-20 center',
+            at: 'left center',
+            collision: 'flipfit'
+          };
+        case 'bottom':
+          return {
+            my: 'center top+20',
+            at: 'center bottom',
+            collision: 'flipfit'
+          };
+        case 'right':
+          return {
+            my: 'left+20 center',
+            at: 'right center',
+            collision: 'flipfit'
+          };
+        case 'top':
+        default:
+          return {
+            my: 'center bottom-20',
+            at: 'center top',
+            collision: 'flipfit'
+          };
+      }
+    }
+    return positionConfig;
+  }
+  // update position
+  function updatePosition() {
+    var stepElement = stepRef.value;
+    if (!stepElement) return;
+    var targetElement = getTargetElement();
+    var positionOptions = targetElement ? getPositionOptions() : CENTER_POSITION_OPTIONS;
+    var ofElement = targetElement || window;
+    position(stepElement, _extends({}, positionOptions, {
+      of: ofElement,
+      using: function using(feedback, pos) {
+        instance.trigger('positioned', feedback);
+      }
+    }));
+  }
+  return {
+    getPositionOptions: getPositionOptions,
+    updatePosition: updatePosition
+  };
+}

package/components/tour/useSteps.d.ts

@@ -0,0 +1,6 @@
+export declare function useSteps(): {
+    steps: any[];
+    collectSteps: (children: any) => void;
+    getTotalSteps: () => number;
+    getTargetElement: (index?: number) => HTMLElement | null;
+};

package/components/tour/useSteps.js

@@ -0,0 +1,68 @@
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import { useInstance } from 'intact-react';
+import { TourStep } from './step';
+import { isComponentVNode } from '../utils';
+export function useSteps() {
+  var instance = useInstance();
+  var steps = [];
+  var targetElements = new _Map();
+  instance.on('$receive:children', collectSteps);
+  instance.watch('data', function () {
+    targetElements.clear();
+  });
+  /**
+   * 收集子组件步骤
+   */
+  function collectSteps(children) {
+    steps.length = 0;
+    if (!children) return;
+    var childrenArray = Array.isArray(children) ? children : [children];
+    childrenArray.forEach(function (child) {
+      if (child && isComponentVNode(child, TourStep)) {
+        steps.push(child);
+      }
+    });
+  }
+  function getTotalSteps() {
+    var _instance$get = instance.get(),
+      data = _instance$get.data,
+      children = _instance$get.children;
+    if (children) {
+      return steps.length;
+    }
+    return (data || []).length;
+  }
+  // get current step target element
+  function getTargetElement(index) {
+    var currentIndex = index !== undefined ? index : instance.get('value') || 0;
+    if (targetElements.has(currentIndex)) {
+      return targetElements.get(currentIndex) || null;
+    }
+    var target;
+    // get target from data
+    var data = instance.get('data');
+    if (data && data[currentIndex]) {
+      target = data[currentIndex].target;
+    }
+    // get target from children
+    if (!target && steps[currentIndex]) {
+      var _steps$currentIndex$p;
+      target = (_steps$currentIndex$p = steps[currentIndex].props) == null ? void 0 : _steps$currentIndex$p.target;
+    }
+    if (!target) return null;
+    var element = null;
+    if (typeof target === 'string') {
+      element = document.querySelector(target);
+    } else {
+      element = target;
+    }
+    targetElements.set(currentIndex, element);
+    return element;
+  }
+  return {
+    steps: steps,
+    collectSteps: collectSteps,
+    getTotalSteps: getTotalSteps,
+    getTargetElement: getTargetElement
+  };
+}

package/hooks/useFixBody.d.ts

@@ -0,0 +1,11 @@
+type Hooks = {
+    onStart?: (scrollBarWidth: number | undefined) => void;
+    onEnd?: () => void;
+};
+export declare function useFixBody(): {
+    onOpen: () => void;
+    onClose: () => void;
+    readonly isFixed: boolean;
+};
+export declare function setHooks(h: Hooks | null): void;
+export {};

package/hooks/useFixBody.js

@@ -0,0 +1,72 @@
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import { useInstance, onBeforeUnmount } from 'intact-react';
+import { scrollbarWidth } from '../components/position';
+var instances = new _Set();
+var originalStyle = null;
+var hooks = null;
+export function useFixBody() {
+  var instance = useInstance();
+  var fixedBody = false;
+  onBeforeUnmount(function () {
+    if (fixedBody) {
+      onClosed(instance);
+    }
+  });
+  function onOpen() {
+    if (!fixedBody) {
+      fixedBody = true;
+      onOpened(instance);
+    }
+  }
+  function onClose() {
+    if (fixedBody) {
+      fixedBody = false;
+      onClosed(instance);
+    }
+  }
+  return {
+    onOpen: onOpen,
+    onClose: onClose,
+    get isFixed() {
+      return fixedBody;
+    }
+  };
+}
+export function setHooks(h) {
+  hooks = h;
+}
+function onOpened(instance) {
+  var body = document.body;
+  if (instances.size === 0) {
+    var bodyStyle = body.style;
+    originalStyle = body.getAttribute('style');
+    bodyStyle.overflow = 'hidden';
+    var scrollBarWidth = shouldFixBody();
+    if (scrollBarWidth) {
+      bodyStyle.paddingRight = scrollBarWidth + "px";
+    }
+    if (hooks && hooks.onStart) {
+      hooks.onStart(scrollBarWidth);
+    }
+  }
+  instances.add(instance);
+}
+function onClosed(instance) {
+  var body = document.body;
+  instances.delete(instance);
+  if (instances.size === 0) {
+    if (originalStyle) {
+      body.setAttribute('style', originalStyle);
+    } else {
+      body.removeAttribute('style');
+    }
+    if (hooks && hooks.onEnd) {
+      hooks.onEnd();
+    }
+  }
+}
+function shouldFixBody() {
+  if (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) {
+    return scrollbarWidth();
+  }
+}

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.5.2
+ * @king-design v3.6.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -58,6 +58,7 @@ export * from './components/timeline';
 export * from './components/timepicker';
 export * from './components/tip';
 export * from './components/tooltip';
+export * from './components/tour';
 export * from './components/transfer';
 export * from './components/tree';
 export * from './components/treeSelect';
@@ -65,7 +66,7 @@ export * from './components/upload';
 export * from './components/view';
 export * from './components/virtualList';
 export * from './components/wave';
-export declare const version = "3.5.2";
+export declare const version = "3.6.0";
 
 
 export {normalize} from 'intact-react';