@king-design/intact 3.5.2 → 3.6.0-beta.0

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

@@ -0,0 +1,129 @@
+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, Input } from '@king-design/react';
+import { bind, Message } 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,
+      inputValue: '',
+      errorMsg: '',
+      tourData: [{
+        target: '#step1',
+        title: '第一步',
+        content: '这是第一步的引导说明',
+        position: 'bottom'
+      }, {
+        target: '#step2',
+        title: '第二步',
+        content: '这是第二步的引导说明',
+        position: 'right'
+      }, {
+        target: '.step3-input',
+        title: '第三步',
+        content: '请在输入框中输入"next"以继续',
+        position: 'bottom'
+      }, {
+        target: '#step4',
+        title: '最后一步',
+        content: '恭喜您完成了所有步骤',
+        position: 'top'
+      }]
+    };
+    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.handleBeforeChange = function handleBeforeChange(current) {
+    var inputValue = this.state.inputValue;
+    if (current === 3) {
+      if (inputValue !== 'next') {
+        Message.error('请在输入框中输入"next"才能进入下一步');
+        return false;
+      }
+    }
+    return true;
+  };
+  _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: "step1"
+    }, "\u6B65\u9AA41"), /*#__PURE__*/React.createElement(Button, {
+      id: "step2",
+      style: {
+        "marginLeft": "20px"
+      }
+    }, "\u6B65\u9AA42"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "20px"
+      }
+    }, /*#__PURE__*/React.createElement(Input, {
+      className: "step3-input",
+      placeholder: "\u901A\u8FC7\u9A8C\u8BC1\u624D\u80FD\u8FDB\u5165\u4E0B\u4E00\u6B65",
+      value: this.state.inputValue,
+      onChangeValue: function onChangeValue(inputValue) {
+        return _this2.setState({
+          inputValue: inputValue
+        });
+      }
+    })), /*#__PURE__*/React.createElement(Button, {
+      id: "step4",
+      style: {
+        "marginTop": "20px"
+      }
+    }, "\u6B65\u9AA44")), /*#__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,
+      beforeChange: this.handleBeforeChange,
+      onFinish: this.finishTour
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "20px"
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: this.startTour
+    }, "\u542F\u52A8\u5F15\u5BFC"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        "marginLeft": "10px"
+      }
+    }, "\u5F53\u524D\u6B65\u9AA4: ", this.state.currentStep >= 0 ? this.state.currentStep + 1 : '未启动'), this.state.errorMsg ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "10px",
+        "color": "#f56c6c"
+      }
+    }, this.state.errorMsg) : undefined));
+  };
+  return Demo;
+}(React.Component);
+export { Demo as default };
+__decorate([bind], Demo.prototype, "startTour", null);
+__decorate([bind], Demo.prototype, "finishTour", null);
+__decorate([bind], Demo.prototype, "handleBeforeChange", null);

package/es/site/data/components/tour/demos/closable/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;
+        closable: boolean;
+        tourData: {
+            target: string;
+            title: string;
+            content: string;
+            position: string;
+        }[];
+    };
+    startTour(): void;
+    finishTour(): void;
+}

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

@@ -0,0 +1,42 @@
+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,
+      closable: false,
+      tourData: [{
+        target: '#closabelDemo',
+        title: '禁用关闭图标',
+        content: '当closable为true时，header区域关闭图标隐藏',
+        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/closable/react.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export default class Demo extends React.Component {
+    state: {
+        currentStep: number;
+        showTour: boolean;
+        closable: 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/closable/react.js

@@ -0,0 +1,85 @@
+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,
+      closable: false,
+      tourData: [{
+        target: '#closabelDemo',
+        title: '禁用关闭图标',
+        content: '当closable为true时，header区域关闭图标隐藏',
+        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: "closabelDemo"
+    }, "\u76EE\u6807\u5143\u7D201")), /*#__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,
+      closable: this.state.closable,
+      onFinish: this.finishTour
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "20px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginBottom": "10px"
+      }
+    }, /*#__PURE__*/React.createElement(Switch, {
+      value: this.state.closable,
+      onChangeValue: function onChangeValue(closable) {
+        return _this2.setState({
+          closable: closable
+        });
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        "marginLeft": "10px"
+      }
+    }, "\u5173\u95ED\u56FE\u6807: ", this.state.closable ? '启用' : '禁用')), /*#__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/custom/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/custom/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/custom/react.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.styl';
+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/custom/react.js

@@ -0,0 +1,108 @@
+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, Icon } 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
+    };
+    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("div", {
+      className: "example-container"
+    }, /*#__PURE__*/React.createElement(Button, {
+      id: "btn5"
+    }, "\u793A\u4F8B\u5143\u7D20")), /*#__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, {
+      slotHeader: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        style: {
+          "display": "flex",
+          "alignItems": "center"
+        }
+      }, /*#__PURE__*/React.createElement(Icon, {
+        className: "ion-android-star",
+        style: {
+          "marginRight": "5px",
+          "color": "#f0ad4e"
+        }
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "custom-title"
+      }, "\u81EA\u5B9A\u4E49\u6807\u9898"), /*#__PURE__*/React.createElement("span", {
+        style: {
+          "marginLeft": "8px",
+          "color": "#999",
+          "fontSize": "12px"
+        }
+      }, "\u5E26\u56FE\u6807\u548C\u6837\u5F0F"))),
+      slotFooter: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "step-indicator"
+      }, this.state.currentStep + 1, " / 1"), /*#__PURE__*/React.createElement("div", {
+        className: "custom-footer"
+      }, /*#__PURE__*/React.createElement(Button, {
+        size: "small",
+        type: "danger",
+        style: {
+          "marginRight": "8px"
+        },
+        onClick: this.close
+      }, "\u8DF3\u8FC7"), /*#__PURE__*/React.createElement(Button, {
+        size: "small",
+        type: "primary",
+        onClick: this.close
+      }, "\u6211\u77E5\u9053\u4E86"))),
+      target: "#btn5",
+      position: "bottom"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "custom-content"
+    }, /*#__PURE__*/React.createElement("p", null, "\u8FD9\u662F\u4E00\u4E2A\u81EA\u5B9A\u4E49\u7684\u590D\u6742\u5185\u5BB9\uFF0C\u53EF\u4EE5\u5305\u542B\u56FE\u7247\u3001\u94FE\u63A5\u7B49\u4EFB\u4F55\u5143\u7D20\u3002"), /*#__PURE__*/React.createElement("a", {
+      href: "javascript:;",
+      style: {
+        "color": "#2d8cf0"
+      }
+    }, "\u4E86\u89E3\u66F4\u591A")))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "20px"
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: this.settour
+    }, "\u542F\u52A8\u81EA\u5B9A\u4E49\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/demos/customButtons/index.d.ts

@@ -0,0 +1,33 @@
+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;
+        tourData: ({
+            target: string;
+            title: string;
+            content: string;
+            position: string;
+            nextText: string;
+            prevText?: undefined;
+        } | {
+            target: string;
+            title: string;
+            content: string;
+            position: string;
+            nextText: string;
+            prevText: string;
+        } | {
+            target: string;
+            title: string;
+            content: string;
+            position: string;
+            prevText: string;
+            nextText?: undefined;
+        })[];
+    };
+    startTour(): void;
+    close(): void;
+}

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

@@ -0,0 +1,55 @@
+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,
+      tourData: [{
+        target: '#welcome-btn',
+        title: '欢迎使用！',
+        content: '欢迎来到我们的应用，让我们开始引导之旅吧！',
+        position: 'bottom',
+        nextText: '开始探索'
+      }, {
+        target: '#feature-btn',
+        title: '功能介绍',
+        content: '这里是主要功能区域，您可以在这里进行各种操作。',
+        position: 'bottom',
+        nextText: '前进',
+        prevText: '回到开始'
+      }, {
+        target: '#finish-btn',
+        title: '设置完成',
+        content: '恭喜！您已经完成了所有设置，现在可以开始使用了。',
+        position: 'top',
+        prevText: '返回上一步'
+      }]
+    };
+  };
+  var _proto = default_1.prototype;
+  _proto.startTour = function startTour() {
+    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, "startTour", null);
+__decorate([bind], default_1.prototype, "close", null);

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

@@ -0,0 +1,33 @@
+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;
+            position: string;
+            nextText: string;
+            prevText?: undefined;
+        } | {
+            target: string;
+            title: string;
+            content: string;
+            position: string;
+            nextText: string;
+            prevText: string;
+        } | {
+            target: string;
+            title: string;
+            content: string;
+            position: string;
+            prevText: string;
+            nextText?: undefined;
+        })[];
+    };
+    startTour(): void;
+    close(): void;
+    render(): React.JSX.Element;
+}

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

@@ -0,0 +1,99 @@
+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 } 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: '#welcome-btn',
+        title: '欢迎使用！',
+        content: '欢迎来到我们的应用，让我们开始引导之旅吧！',
+        position: 'bottom',
+        nextText: '开始探索'
+      }, {
+        target: '#feature-btn',
+        title: '功能介绍',
+        content: '这里是主要功能区域，您可以在这里进行各种操作。',
+        position: 'bottom',
+        nextText: '前进',
+        prevText: '回到开始'
+      }, {
+        target: '#finish-btn',
+        title: '设置完成',
+        content: '恭喜！您已经完成了所有设置，现在可以开始使用了。',
+        position: 'top',
+        prevText: '返回上一步'
+      }]
+    };
+    return _this;
+  }
+  var _proto = Demo.prototype;
+  _proto.startTour = function startTour() {
+    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("div", {
+      className: "example-container"
+    }, /*#__PURE__*/React.createElement(Button, {
+      id: "welcome-btn"
+    }, "\u6B22\u8FCE\u9875\u9762"), /*#__PURE__*/React.createElement(Button, {
+      id: "feature-btn",
+      style: {
+        "marginLeft": "20px"
+      }
+    }, "\u529F\u80FD\u4ECB\u7ECD"), /*#__PURE__*/React.createElement(Button, {
+      id: "finish-btn",
+      style: {
+        "marginLeft": "20px"
+      }
+    }, "\u5B8C\u6210\u8BBE\u7F6E")), /*#__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,
+      doneText: "\u5B8C\u6210",
+      onFinish: this.close
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "20px"
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      onClick: this.startTour
+    }, "\u5F00\u59CB\u81EA\u5B9A\u4E49\u6309\u94AE\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, "close", null);