@ohu-mobile/core/lib-rem/Lazyload/stories/Lazyload.stories.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ChangeImage = exports.Basic = void 0;
var _vue = _interopRequireDefault(require("vue"));
var _index = _interopRequireDefault(require("../index"));
require("../style");
var _List = _interopRequireDefault(require("../../List"));
require("../../List/style");
var _Skeleton = _interopRequireDefault(require("../../Skeleton"));
require("../../Skeleton/style");
var _Grid = _interopRequireDefault(require("../../Grid"));
require("../../Grid/style");
var _Result = _interopRequireDefault(require("../../Result"));
require("../../Result/style");
var _Button = _interopRequireDefault(require("../../Button"));
require("../../Button/style");
var _Image = _interopRequireDefault(require("../../Image"));
require("../../Image/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var _default = exports.default = {
  title: 'Components/Utils/Lazyload',
  parameters: {
    component: _index.default,
    options: {
      showPanel: true
    }
  }
};
var GreatList = _vue.default.extend({
  data: function data() {
    return {
      list: [{
        text: '解放院区',
        minorText: '浙江杭州市解放路88号',
        img: 'http://photocdn.sohu.com/20161221/vrsa_hor9271114.jpg'
      }, {
        text: '滨江院区',
        minorText: '浙江杭州市滨江区江虹路1511号',
        img: 'http://photocdn.sohu.com/20161221/vrsa_hor9271114.jpg'
      }, {
        text: '国际医学中心',
        minorText: '浙江杭州市滨江区江虹路1511号',
        img: 'http://photocdn.sohu.com/20161221/vrsa_hor9271114.jpg'
      }]
    };
  },
  render: function render() {
    var h = arguments[0];
    return h(_List.default, [this.list.map(function (item) {
      return h(_List.default.Item, {
        "attrs": {
          "button": true,
          "text": item.text,
          "minorText": item.minorText
        }
      }, [h("img", {
        "slot": "thumb",
        "style": "object-fit: contain; width: 120px;",
        "attrs": {
          "src": item.img
        }
      })]);
    })]);
  }
});
var GreatListSkeleton = _vue.default.extend({
  render: function render() {
    var h = arguments[0];
    return h("div", [new Array(3).fill('').map(function () {
      return h(_Skeleton.default, {
        "attrs": {
          "title": true,
          "rows": 2
        },
        "style": "box-sizing: border-box; height: 120px; width: 100%; padding: 15px"
      }, [h(_Skeleton.default, {
        "style": "width: 120px; height: 90px;",
        "slot": "left"
      }), h(_Grid.default, {
        "slot": "content",
        "style": "height: 72px;",
        "attrs": {
          "column": true,
          "x": "left",
          "y": "center"
        }
      }, [h(_Skeleton.default, {
        "attrs": {
          "row": true,
          "rowWidth": "30%"
        }
      }), h(_Skeleton.default, {
        "attrs": {
          "row": true,
          "rowWidth": "70%"
        }
      })])]);
    })]);
  }
});
var Basic = exports.Basic = function Basic() {
  return _vue.default.extend({
    data: function data() {
      return {
        src: 'http://sdfsdfsd'
      };
    },
    render: function render() {
      var _this = this;
      var h = arguments[0];
      return h("div", [h(_index.default, [h(GreatList), h(GreatListSkeleton, {
        "slot": "placeholder"
      })]), h(_index.default, [h(GreatList), h(GreatListSkeleton, {
        "slot": "placeholder"
      })]), h(_index.default, [h(GreatList), h(GreatListSkeleton, {
        "slot": "placeholder"
      })]), h(_index.default, {
        "attrs": {
          "asyncComponent": function asyncComponent() {
            return Promise.resolve().then(function () {
              return _interopRequireWildcard(require('./GreatCard'));
            });
          }
        },
        "scopedSlots": {
          error: function error(_ref) {
            var reload = _ref.reload,
              _error = _ref.error;
            return h("div", {
              "style": "padding: 20px;"
            }, [h(_Result.default, {
              "attrs": {
                "title": _error === null || _error === void 0 ? void 0 : _error.message
              }
            }, [h("template", {
              "slot": "extra"
            }, [h(_Button.default, {
              "attrs": {
                "type": "primary",
                "round": true,
                "inline": true
              },
              "on": {
                "click": function click() {
                  return reload();
                }
              }
            }, ["\u70B9\u51FB\u91CD\u8BD5"])])])]);
          }
        }
      }, [h("div", {
        "slot": "placeholder"
      }, [h(_Skeleton.default, {
        "style": "height: 37px;"
      }, [h(_Skeleton.default, {
        "attrs": {
          "shape": "rect"
        }
      })]), h(GreatListSkeleton, {
        "style": "padding: 12px;"
      })])]), h(_index.default, {
        "attrs": {
          "src": this.src
        },
        "scopedSlots": {
          error: function error(_ref2) {
            var reload = _ref2.reload;
            return h("div", {
              "style": "height: 144px; width: 240px; background: #EEE; text-align: center; color: #333; font-size: 14px;",
              "on": {
                "click": function click() {
                  _this.src = 'http://via.placeholder.com/240x144/666666';
                  reload();
                }
              }
            }, ["\u52A0\u8F7D\u51FA\u9519"]);
          }
        }
      }, [h(_Skeleton.default, {
        "slot": "placeholder",
        "attrs": {
          "title": true,
          "rows": 2
        },
        "style": "box-sizing: border-box; height: 144px; width: 240px; padding: 15px"
      }, [h(_Skeleton.default, {
        "attrs": {
          "shape": "rect"
        }
      })])])]);
    }
  });
};
var ChangeImage = exports.ChangeImage = function ChangeImage() {
  return _vue.default.extend({
    data: function data() {
      return {
        src: 'http://via.placeholder.com/240x144/222222'
      };
    },
    render: function render() {
      var _this2 = this;
      var h = arguments[0];
      return h("div", [h(_Button.default, {
        "style": "margin-bottom: 150vh;",
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this2.src = 'http://via.placeholder.com/240x144/666666';
          }
        }
      }, ["change"]), h(_Image.default, {
        "attrs": {
          "src": this.src,
          "lazy": true
        }
      })]);
    }
  });
};