zmp-ui/cjs/components/router/AnimationRoutes.stories.js

Zalo Mini App framework

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _ = require("../..");
var _AnimationRoutes = _interopRequireDefault(require("./AnimationRoutes"));
var _ZMPRouter = _interopRequireDefault(require("./ZMPRouter"));
var _page = _interopRequireDefault(require("../page"));
var _button = _interopRequireDefault(require("../button"));
var meta = {
  title: "Layout/AnimationRoutes",
  component: _AnimationRoutes["default"],
  tags: ["autodocs"]
};
var _default = exports["default"] = meta;
var decorators = function decorators(Story) {
  return /*#__PURE__*/_react["default"].createElement(_ZMPRouter["default"], {
    memoryRouter: true
  }, /*#__PURE__*/_react["default"].createElement(Story, null));
};
function Page1() {
  var navigate = (0, _.useNavigate)();
  return /*#__PURE__*/_react["default"].createElement(_page["default"], null, /*#__PURE__*/_react["default"].createElement(_.Cluster, {
    space: "16px"
  }, /*#__PURE__*/_react["default"].createElement(_.Text.Title, null, "Ch\xE0o m\u1EEBng b\u1EA1n \u0111\u1EBFn v\u1EDBi Zalo Mini App"), /*#__PURE__*/_react["default"].createElement(_.Text, null, "Zalo Mini App l\xE0 nh\u1EEFng \u201C\u1EE9ng d\u1EE5ng nh\u1ECF\u201D ch\u1EA1y tr\u1EF1c ti\u1EBFp tr\xEAn n\u1EC1n t\u1EA3ng Zalo, t\u1EADn d\u1EE5ng ngu\u1ED3n t\xE0i nguy\xEAn c\xF3 s\u1EB5n v\u1EDBi ti\u1EC1m n\u0103ng kh\xF4ng gi\u1EDBi h\u1EA1n t\u1EEB Zalo."), /*#__PURE__*/_react["default"].createElement(_button["default"], {
    suffixIcon: /*#__PURE__*/_react["default"].createElement(_.Icon, {
      icon: "zi-arrow-right"
    }),
    onClick: function onClick() {
      return navigate("/page2");
    }
  }, "Ti\u1EBFp t\u1EE5c")));
}
Page1.displayName = "Page1";
function Page2() {
  var navigate = (0, _.useNavigate)();
  return /*#__PURE__*/_react["default"].createElement(_page["default"], null, /*#__PURE__*/_react["default"].createElement(_.Cluster, {
    space: "16px"
  }, /*#__PURE__*/_react["default"].createElement(_.Text.Title, null, "Ch\xE0o m\u1EEBng b\u1EA1n \u0111\u1EBFn v\u1EDBi Zalo Mini App"), /*#__PURE__*/_react["default"].createElement(_.Text, null, "Zalo Mini App l\xE0 nh\u1EEFng \u201C\u1EE9ng d\u1EE5ng nh\u1ECF\u201D ch\u1EA1y tr\u1EF1c ti\u1EBFp tr\xEAn n\u1EC1n t\u1EA3ng Zalo, t\u1EADn d\u1EE5ng ngu\u1ED3n t\xE0i nguy\xEAn c\xF3 s\u1EB5n v\u1EDBi ti\u1EC1m n\u0103ng kh\xF4ng gi\u1EDBi h\u1EA1n t\u1EEB Zalo."), /*#__PURE__*/_react["default"].createElement(_button["default"], {
    prefixIcon: /*#__PURE__*/_react["default"].createElement(_.Icon, {
      icon: "zi-arrow-left"
    }),
    onClick: function onClick() {
      return navigate(-1);
    }
  }, "Tr\u1EDD l\u1EA1i")));
}
Page2.displayName = "Page2";
var Default = exports.Default = {
  name: "Mặc định",
  decorators: decorators,
  args: {
    children: [/*#__PURE__*/_react["default"].createElement(_.Route, {
      path: "/",
      element: /*#__PURE__*/_react["default"].createElement(Page1, null)
    }), /*#__PURE__*/_react["default"].createElement(_.Route, {
      path: "/page2",
      element: /*#__PURE__*/_react["default"].createElement(Page2, null)
    })]
  }
};