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

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.PlaceholderSlot = exports.Lazy = exports.Fit = exports.ErrorScopedSlot = exports.ErrorAndReload = exports.Basic = void 0;
var _vueTsxSupport = require("vue-tsx-support");
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _Result = _interopRequireDefault(require("../Result"));
require("../Result/style");
var _Button = _interopRequireDefault(require("../Button"));
require("../Button/style");
var _Loading = _interopRequireDefault(require("../Loading"));
require("../Loading/style");
var _Grid = _interopRequireDefault(require("../Grid"));
require("../Grid/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Components/Basic/Image',
  parameters: {
    component: _index.default,
    options: {
      showPanel: true
    }
  }
};
var Basic = exports.Basic = function Basic() {
  return (0, _vueTsxSupport.component)({
    render: function render() {
      var h = arguments[0];
      return h(_index.default, {
        "attrs": {
          "src": "http://via.placeholder.com/375X275/FF2244/FFFFFF"
        }
      });
    }
  });
};
var ErrorAndReload = exports.ErrorAndReload = function ErrorAndReload() {
  return (0, _vueTsxSupport.component)({
    data: function data() {
      return {
        src: 'http://via.placeholder.c'
      };
    },
    render: function render() {
      var _this = this;
      var h = arguments[0];
      return h(_index.default, {
        "attrs": {
          "width": "100px",
          "reload": true,
          "errorTip": true,
          "round": true,
          "height": "100px",
          "src": this.src
        },
        "style": "border-radius: 100px;",
        "on": {
          "reload": function reload() {
            _this.src = 'http://via.placeholder.com/375X275/FF2244/FFFFFF';
          }
        }
      });
    }
  });
};
var ErrorScopedSlot = exports.ErrorScopedSlot = function ErrorScopedSlot() {
  return (0, _vueTsxSupport.component)({
    data: function data() {
      return {
        src: 'http://via.placeholder.c'
      };
    },
    render: function render() {
      var _this2 = this;
      var h = arguments[0];
      return h(_index.default, {
        "attrs": {
          "width": "300px",
          "height": "150px",
          "src": this.src
        },
        "scopedSlots": {
          error: function error(_ref) {
            var reload = _ref.reload;
            return h(_Result.default, {
              "attrs": {
                "status": "network-broken"
              }
            }, [h("template", {
              "slot": "extra"
            }, [h(_Button.default, {
              "attrs": {
                "inline": true,
                "round": true,
                "type": "primary"
              },
              "on": {
                "click": function click() {
                  _this2.src = 'http://via.placeholder.com/375X275/FF2244/FFFFFF';
                  reload();
                }
              }
            }, ["\u91CD\u65B0\u52A0\u8F7D"])])]);
          }
        }
      });
    }
  });
};
var PlaceholderSlot = exports.PlaceholderSlot = function PlaceholderSlot() {
  return (0, _vueTsxSupport.component)({
    data: function data() {
      return {
        src: 'http://via.placeholder.com/300X150/FF2244/FFFFFF'
      };
    },
    render: function render() {
      var h = arguments[0];
      return h(_index.default, {
        "attrs": {
          "width": "300px",
          "height": "150px",
          "src": this.src
        }
      }, [h("div", {
        "style": "width: 300px; height: 150px; background: #EEE; display: flex; justify-content: center; align-items: center;",
        "slot": "placeholder"
      }, [h(_Loading.default)])]);
    }
  });
};
var Lazy = exports.Lazy = function Lazy() {
  return (0, _vueTsxSupport.component)({
    render: function render() {
      var h = arguments[0];
      return h("div", {
        "style": "overflow: hidden;"
      }, [h(_Grid.default, {
        "attrs": {
          "row": true,
          "wrap": true,
          "gap": 2
        }
      }, [new Array(99).fill('').map(function (_, index) {
        var str = index.toString().padEnd(2, '2');
        var color = new Array(3).fill(str).join('');
        return h(_Grid.default.Item, {
          "attrs": {
            "span": 6
          }
        }, [h(_index.default, {
          "attrs": {
            "height": "120px",
            "width": "100%",
            "lazy": true,
            "src": "http://via.placeholder.com/240X144/".concat(color)
          }
        })]);
      })])]);
    }
  });
};
var Fit = exports.Fit = function Fit() {
  return (0, _vueTsxSupport.component)({
    render: function render() {
      var h = arguments[0];
      return h("div", [h(_index.default, {
        "attrs": {
          "width": "240px",
          "height": "240px",
          "fit": "contain",
          "src": "http://via.placeholder.com/240X144/F5F5F5/000000?text=contain"
        }
      }), h(_index.default, {
        "attrs": {
          "width": "240px",
          "height": "240px",
          "fit": "cover",
          "src": "http://via.placeholder.com/240X144/E2E2E2/333333?text=cover"
        }
      }), h(_index.default, {
        "attrs": {
          "width": "240px",
          "height": "240px",
          "fit": "fill",
          "src": "http://via.placeholder.com/240X144/909090/FFFFFF?text=fill"
        }
      }), h(_index.default, {
        "attrs": {
          "width": "240px",
          "height": "240px",
          "fit": "scale-down",
          "src": "http://via.placeholder.com/240X144/8E8E8E/FFFFFF?text=scale-down"
        }
      })]);
    }
  });
};