@king-design/intact 3.5.2 → 3.6.0

package/es/site/data/components/tour/demos/events/index.js

@@ -0,0 +1,58 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { __decorate } from "tslib";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+import { bind } from 'kpc';
+import { Message } from 'kpc';
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+  default_1.defaults = function defaults() {
+    return {
+      currentStep: 0,
+      showTour: false,
+      tourData: [{
+        target: '#event-btn1',
+        title: '第一步',
+        content: '点击"下一步"按钮，将触发next事件'
+      }, {
+        target: '#event-btn2',
+        title: '第二步',
+        content: '点击"上一步"按钮，将触发prev事件'
+      }, {
+        target: '#event-btn3',
+        title: '第三步',
+        content: '点击"完成"按钮或关闭图标，将触发finish事件'
+      }]
+    };
+  };
+  var _proto = default_1.prototype;
+  _proto.startTour = function startTour() {
+    this.set({
+      showTour: true,
+      currentStep: 0
+    });
+  };
+  _proto.handlePrev = function handlePrev(index) {
+    Message.success("\u4E0A\u4E00\u6B65\u4E8B\u4EF6\u89E6\u53D1: \u5F53\u524D\u6B65\u9AA4 " + (index + 1));
+  };
+  _proto.handleNext = function handleNext(index) {
+    Message.success("\u4E0B\u4E00\u6B65\u4E8B\u4EF6\u89E6\u53D1: \u5F53\u524D\u6B65\u9AA4 " + (index + 1));
+  };
+  _proto.handleFinish = function handleFinish() {
+    Message.success('引导结束事件触发');
+    this.set({
+      showTour: false
+    });
+  };
+  return default_1;
+}(Component);
+default_1.template = template;
+export { default_1 as default };
+__decorate([bind], default_1.prototype, "startTour", null);
+__decorate([bind], default_1.prototype, "handlePrev", null);
+__decorate([bind], default_1.prototype, "handleNext", null);
+__decorate([bind], default_1.prototype, "handleFinish", null);

package/es/site/data/components/tour/demos/events/react.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './index.styl';
+export default class Demo extends React.Component {
+    state: {
+        currentStep: number;
+        showTour: boolean;
+        tourData: {
+            target: string;
+            title: string;
+            content: string;
+        }[];
+    };
+    startTour(): void;
+    handlePrev(index: number): void;
+    handleNext(index: number): void;
+    handleFinish(): void;
+    render(): React.JSX.Element;
+}

package/es/site/data/components/tour/demos/events/react.js

@@ -0,0 +1,101 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import React from 'react';
+import { Tour, Button, Message } from '@king-design/react';
+import './index.styl';
+import { bind } from '@king-design/react';
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+  function Demo() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      currentStep: 0,
+      showTour: false,
+      tourData: [{
+        target: '#event-btn1',
+        title: '第一步',
+        content: '点击"下一步"按钮，将触发next事件'
+      }, {
+        target: '#event-btn2',
+        title: '第二步',
+        content: '点击"上一步"按钮，将触发prev事件'
+      }, {
+        target: '#event-btn3',
+        title: '第三步',
+        content: '点击"完成"按钮或关闭图标，将触发finish事件'
+      }]
+    };
+    return _this;
+  }
+  var _proto = Demo.prototype;
+  _proto.startTour = function startTour() {
+    this.setState({
+      showTour: true,
+      currentStep: 0
+    });
+  };
+  _proto.handlePrev = function handlePrev(index) {
+    Message.success("\u4E0A\u4E00\u6B65\u4E8B\u4EF6\u89E6\u53D1: \u5F53\u524D\u6B65\u9AA4 " + (index + 1));
+  };
+  _proto.handleNext = function handleNext(index) {
+    Message.success("\u4E0B\u4E00\u6B65\u4E8B\u4EF6\u89E6\u53D1: \u5F53\u524D\u6B65\u9AA4 " + (index + 1));
+  };
+  _proto.handleFinish = function handleFinish() {
+    Message.success('引导结束事件触发');
+    this.setState({
+      showTour: false
+    });
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "example-container"
+    }, /*#__PURE__*/React.createElement(Button, {
+      id: "event-btn1"
+    }, "\u7B2C\u4E00\u6B65"), /*#__PURE__*/React.createElement(Button, {
+      id: "event-btn2",
+      style: {
+        "marginLeft": "20px"
+      }
+    }, "\u7B2C\u4E8C\u6B65"), /*#__PURE__*/React.createElement(Button, {
+      id: "event-btn3",
+      style: {
+        "marginLeft": "20px"
+      }
+    }, "\u7B2C\u4E09\u6B65")), /*#__PURE__*/React.createElement(Tour, {
+      value: this.state.currentStep,
+      onChangeValue: function onChangeValue(currentStep) {
+        return _this2.setState({
+          currentStep: currentStep
+        });
+      },
+      visible: this.state.showTour,
+      data: this.state.tourData,
+      onPrev: this.handlePrev,
+      onNext: this.handleNext,
+      onFinish: this.handleFinish
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "20px"
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: this.startTour
+    }, "\u5F00\u59CB\u5F15\u5BFC"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        "marginLeft": "10px"
+      }
+    }, "\u5F53\u524D\u6B65\u9AA4: ", this.state.currentStep >= 0 ? this.state.currentStep + 1 : '未启动')));
+  };
+  return Demo;
+}(React.Component);
+export { Demo as default };
+__decorate([bind], Demo.prototype, "startTour", null);
+__decorate([bind], Demo.prototype, "handlePrev", null);
+__decorate([bind], Demo.prototype, "handleNext", null);
+__decorate([bind], Demo.prototype, "handleFinish", null);

package/es/site/data/components/tour/demos/maskClosable/index.d.ts

@@ -0,0 +1,18 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+    static defaults(): {
+        currentStep: number;
+        showTour: boolean;
+        maskClosable: boolean;
+        tourData: {
+            target: string;
+            title: string;
+            content: string;
+            position: string;
+        }[];
+    };
+    startTour(): void;
+    finishTour(): void;
+}

package/es/site/data/components/tour/demos/maskClosable/index.js

@@ -0,0 +1,47 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { __decorate } from "tslib";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+import { bind } from 'kpc';
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+  default_1.defaults = function defaults() {
+    return {
+      currentStep: 0,
+      showTour: false,
+      maskClosable: true,
+      tourData: [{
+        target: '#maskDemo1',
+        title: '遮罩层交互',
+        content: '当maskClosable为true时，点击遮罩层可关闭引导',
+        position: 'bottom'
+      }, {
+        target: '#maskDemo2',
+        title: '禁用遮罩层关闭',
+        content: '当maskClosable为false时，点击遮罩层无反应，必须使用按钮进行操作',
+        position: 'right'
+      }]
+    };
+  };
+  var _proto = default_1.prototype;
+  _proto.startTour = function startTour() {
+    this.set({
+      showTour: true,
+      currentStep: 0
+    });
+  };
+  _proto.finishTour = function finishTour() {
+    this.set({
+      showTour: false
+    });
+  };
+  return default_1;
+}(Component);
+default_1.template = template;
+export { default_1 as default };
+__decorate([bind], default_1.prototype, "startTour", null);
+__decorate([bind], default_1.prototype, "finishTour", null);

package/es/site/data/components/tour/demos/maskClosable/react.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export default class Demo extends React.Component {
+    state: {
+        currentStep: number;
+        showTour: boolean;
+        maskClosable: boolean;
+        tourData: {
+            target: string;
+            title: string;
+            content: string;
+            position: string;
+        }[];
+    };
+    startTour(): void;
+    finishTour(): void;
+    render(): React.JSX.Element;
+}

package/es/site/data/components/tour/demos/maskClosable/react.js

@@ -0,0 +1,95 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import React from 'react';
+import { Tour, Button, Switch } from '@king-design/react';
+import { bind } from '@king-design/react';
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+  function Demo() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      currentStep: 0,
+      showTour: false,
+      maskClosable: true,
+      tourData: [{
+        target: '#maskDemo1',
+        title: '遮罩层交互',
+        content: '当maskClosable为true时，点击遮罩层可关闭引导',
+        position: 'bottom'
+      }, {
+        target: '#maskDemo2',
+        title: '禁用遮罩层关闭',
+        content: '当maskClosable为false时，点击遮罩层无反应，必须使用按钮进行操作',
+        position: 'right'
+      }]
+    };
+    return _this;
+  }
+  var _proto = Demo.prototype;
+  _proto.startTour = function startTour() {
+    this.setState({
+      showTour: true,
+      currentStep: 0
+    });
+  };
+  _proto.finishTour = function finishTour() {
+    this.setState({
+      showTour: false
+    });
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "example-container"
+    }, /*#__PURE__*/React.createElement(Button, {
+      id: "maskDemo1"
+    }, "\u76EE\u6807\u5143\u7D201"), /*#__PURE__*/React.createElement(Button, {
+      id: "maskDemo2",
+      style: {
+        "marginLeft": "20px"
+      }
+    }, "\u76EE\u6807\u5143\u7D202")), /*#__PURE__*/React.createElement(Tour, {
+      value: this.state.currentStep,
+      onChangeValue: function onChangeValue(currentStep) {
+        return _this2.setState({
+          currentStep: currentStep
+        });
+      },
+      visible: this.state.showTour,
+      data: this.state.tourData,
+      maskClosable: this.state.maskClosable,
+      onFinish: this.finishTour
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "20px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginBottom": "10px"
+      }
+    }, /*#__PURE__*/React.createElement(Switch, {
+      value: this.state.maskClosable,
+      onChangeValue: function onChangeValue(maskClosable) {
+        return _this2.setState({
+          maskClosable: maskClosable
+        });
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        "marginLeft": "10px"
+      }
+    }, "\u70B9\u51FB\u906E\u7F69\u5173\u95ED\u5F15\u5BFC: ", this.state.maskClosable ? '启用' : '禁用')), /*#__PURE__*/React.createElement(Button, {
+      onClick: this.startTour
+    }, "\u542F\u52A8\u5F15\u5BFC")));
+  };
+  return Demo;
+}(React.Component);
+export { Demo as default };
+__decorate([bind], Demo.prototype, "startTour", null);
+__decorate([bind], Demo.prototype, "finishTour", null);

package/es/site/data/components/tour/demos/notarget/index.d.ts

@@ -0,0 +1,11 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+    static defaults(): {
+        currentStep: number;
+        showTour: boolean;
+    };
+    settour(): void;
+    close(): void;
+}

package/es/site/data/components/tour/demos/notarget/index.js

@@ -0,0 +1,35 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { __decorate } from "tslib";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+import { bind } from 'kpc';
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+  default_1.defaults = function defaults() {
+    return {
+      currentStep: 0,
+      showTour: false
+    };
+  };
+  var _proto = default_1.prototype;
+  _proto.settour = function settour() {
+    this.set({
+      showTour: true,
+      currentStep: 0
+    });
+  };
+  _proto.close = function close() {
+    this.set({
+      showTour: false
+    });
+  };
+  return default_1;
+}(Component);
+default_1.template = template;
+export { default_1 as default };
+__decorate([bind], default_1.prototype, "settour", null);
+__decorate([bind], default_1.prototype, "close", null);

package/es/site/data/components/tour/demos/notarget/react.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export default class Demo extends React.Component {
+    state: {
+        currentStep: number;
+        showTour: boolean;
+    };
+    settour(): void;
+    close(): void;
+    render(): React.JSX.Element;
+}

package/es/site/data/components/tour/demos/notarget/react.js

@@ -0,0 +1,61 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import React from 'react';
+import { Tour, TourStep, Button } from '@king-design/react';
+import { bind } from '@king-design/react';
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+  function Demo() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      currentStep: 0,
+      showTour: false
+    };
+    return _this;
+  }
+  var _proto = Demo.prototype;
+  _proto.settour = function settour() {
+    this.setState({
+      showTour: true,
+      currentStep: 0
+    });
+  };
+  _proto.close = function close() {
+    this.setState({
+      showTour: false
+    });
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tour, {
+      value: this.state.currentStep,
+      onChangeValue: function onChangeValue(currentStep) {
+        return _this2.setState({
+          currentStep: currentStep
+        });
+      },
+      visible: this.state.showTour,
+      onFinish: this.close
+    }, /*#__PURE__*/React.createElement(TourStep, {
+      title: "\u65E0\u76EE\u6807\u5143\u7D20-\u7B2C\u4E00\u6B65"
+    }, /*#__PURE__*/React.createElement("span", null, "\u5F53\u6CA1\u6709\u6307\u5B9Atarget\u5C5E\u6027\u6216\u8005\u76EE\u6807\u5143\u7D20\u4E0D\u5B58\u5728\u65F6\uFF0CTour\u4F1A\u5C45\u4E2D\u663E\u793A\u5728\u5C4F\u5E55\u4E2D\u592E\u3002")), /*#__PURE__*/React.createElement(TourStep, {
+      title: "\u65E0\u76EE\u6807\u5143\u7D20-\u7B2C\u4E8C\u6B65"
+    }, /*#__PURE__*/React.createElement("span", null, "\u5F53\u6CA1\u6709\u6307\u5B9Atarget\u5C5E\u6027\u6216\u8005\u76EE\u6807\u5143\u7D20\u4E0D\u5B58\u5728\u65F6\uFF0C\u6240\u6709\u6B65\u9AA4\u90FD\u4F1A\u5C45\u4E2D\u663E\u793A\u5728\u5C4F\u5E55\u4E2D\u592E\u3002"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "20px"
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: this.settour
+    }, "\u542F\u52A8\u65E0\u76EE\u6807\u5F15\u5BFC")));
+  };
+  return Demo;
+}(React.Component);
+export { Demo as default };
+__decorate([bind], Demo.prototype, "settour", null);
+__decorate([bind], Demo.prototype, "close", null);

package/es/site/data/components/tour/index.d.ts

@@ -0,0 +1,57 @@
+import { Component } from 'intact';
+import Article from '~/../src/components/article';
+export default class extends Article {
+    static sidebar: {
+        组件: {
+            title: string;
+            category: string;
+            order: number;
+            sidebar: string;
+            path: string;
+        }[];
+        undefined: ({
+            title: string;
+            order: number;
+            sidebar: string;
+            disabled: boolean;
+            path: string;
+        } | {
+            title: string;
+            order: number;
+            sidebar: string;
+            path: string;
+            disabled?: undefined;
+        })[];
+    };
+    static data: {
+        setting: {
+            title: string;
+            category: string;
+            order: number;
+            sidebar: string;
+        };
+        contents: string;
+        index: string;
+        catalogs: {
+            text: string;
+            level: number;
+            id: string;
+        }[];
+    };
+    static defaults: () => {
+        demos: Component<any, {}, {}, {}>[];
+        setting: {
+            title: string;
+            category: string;
+            order: number;
+            sidebar: string;
+        };
+        contents: string;
+        index: string;
+        catalogs: {
+            text: string;
+            level: number;
+            id: string;
+        }[];
+    };
+}

package/es/site/data/components/tour/index.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js/instance/keys";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import Article from '~/../src/components/article';
+import data from './index.json';
+import sidebar from '~/doc.json';
+var r = require.context('./', true, /demos.*(index|demo).ts/);
+var keys = _keysInstanceProperty(r).call(r);
+var demos = [];
+for (var i = 0; i < keys.length; i++) {
+  var file = keys[i];
+  if (!_startsWithInstanceProperty(file).call(file, '.')) continue;
+  // if we found demo.js then ignore index.js
+  if (/demo.ts$/.test(file)) i++;
+  demos.push(r(file));
+}
+var default_1 = /*#__PURE__*/function (_Article) {
+  _inheritsLoose(default_1, _Article);
+  function default_1() {
+    return _Article.apply(this, arguments) || this;
+  }
+  return default_1;
+}(Article);
+default_1.sidebar = sidebar;
+default_1.data = data;
+default_1.defaults = function () {
+  return _extends({}, Article.defaults, data, {
+    demos: demos
+  });
+};
+export { default_1 as default };

package/hooks/useFixBody.ts

@@ -0,0 +1,87 @@
+import {useInstance, onBeforeUnmount} from 'intact';
+import {scrollbarWidth} from '../components/position';
+
+type Hooks = {
+    onStart?: (scrollBarWidth: number | undefined) => void
+    onEnd?: () => void
+}
+
+const instances = new Set<any>();
+let originalStyle: string | null = null;
+let hooks: Hooks | null = null; 
+
+export function useFixBody() {
+    const instance = useInstance()!;
+    let fixedBody = false;
+    
+    onBeforeUnmount(() => {
+        if (fixedBody) {
+            onClosed(instance);
+        }
+    });
+
+    function onOpen() {
+        if (!fixedBody) {
+            fixedBody = true;
+            onOpened(instance);
+        }
+    }
+
+    function onClose() {
+        if (fixedBody) {
+            fixedBody = false;
+            onClosed(instance);
+        }
+    }
+
+    return {
+        onOpen,
+        onClose,
+        get isFixed() {
+            return fixedBody;
+        }
+    };
+}
+
+export function setHooks(h: Hooks | null) {
+    hooks = h;
+}
+
+function onOpened(instance: any) {
+    const body = document.body;
+    if (instances.size === 0) {
+        const bodyStyle = body.style;
+        originalStyle = body.getAttribute('style');
+        bodyStyle.overflow = 'hidden';
+
+        const scrollBarWidth = shouldFixBody();
+        if (scrollBarWidth) {
+            bodyStyle.paddingRight = `${scrollBarWidth}px`;
+        }
+        if (hooks && hooks.onStart) {
+            hooks.onStart(scrollBarWidth);
+        }
+    }
+    instances.add(instance);
+}
+
+function onClosed(instance: any) {
+    const 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.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.5.2
+ * @king-design v3.6.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,6 +62,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';
@@ -70,6 +71,6 @@ export * from './components/view';
 export * from './components/virtualList';
 export * from './components/wave';
 
-export const version = '3.5.2';
+export const version = '3.6.0';
 
 /* generate end */