@ohu-mobile/core/lib/List/List.stories.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithIcon = exports.UseRadioList = exports.UseCheckList = exports.Thumb = exports.Text = exports.Subheader = exports.MinorText = exports.LoadingSlot = exports.Loading = exports.Finished = exports.Avatar = void 0;
var _FolderOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/FolderOutlined"));
var _ArrowRightSOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowRightSOutlined"));
var _ArrowRightOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowRightOutlined"));
var _vue = _interopRequireDefault(require("vue"));
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _Icon = _interopRequireDefault(require("../Icon"));
require("../Icon/style");
var _Skeleton = _interopRequireDefault(require("../Skeleton"));
require("../Skeleton/style");
var _Grid = _interopRequireDefault(require("../Grid"));
require("../Grid/style");
var _CheckList = _interopRequireDefault(require("../CheckList"));
require("../CheckList/style");
var _RadioList = _interopRequireDefault(require("../RadioList"));
require("../RadioList/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Components/DataDisplay/List',
  parameters: {
    component: _index.default,
    options: {
      showPanel: true
    }
  }
};
var Avatar = exports.Avatar = function Avatar() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(_index.default, [h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "张斌 | 副主任医师",
          "paddingDivider": false,
          "minorText": "擅长：肺结核、肺癌、胸腔积液、慢性咳嗽"
        },
        "on": {
          "click": function click(e) {
            console.log(e);
          }
        }
      }, [h("img", {
        "slot": "avatar",
        "style": "object-fit: contain;",
        "attrs": {
          "src": "https://raw.githubusercontent.com/jeffwcx/ohu-mobile/master/docs/storybook/src/assets/logo.svg"
        }
      }), h(_Icon.default, {
        "slot": "action",
        "attrs": {
          "type": _ArrowRightOutlined2.default
        }
      })])]);
    }
  });
};
var Text = exports.Text = function Text() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(_index.default, [h(_index.default.Item, {
        "attrs": {
          "button": true
        }
      }, [h("div", {
        "style": "min-height: 32px;",
        "slot": "text"
      }, ["\u3010\u907F\u5B55\u3011\u77ED\u6548\u907F\u5B55\u836F\u2014\u2014\u5C0F\u836F\u7247\uFF0C\u5927\u7528\u5904"]), h("template", {
        "slot": "minorText"
      }, [h("div", {
        "style": "height: 24px; line-height: 24px; display: flex; flex-flow: row nowrap; align-items: center;"
      }, [h("img", {
        "style": "object-fit: contain; width: 24px; height: 24px; margin-right: 8px;",
        "attrs": {
          "src": "https://raw.githubusercontent.com/jeffwcx/ohu-mobile/master/docs/storybook/src/assets/logo.svg"
        }
      }), h("span", ["\u4E25\u6625\u6653 \u526F\u4E3B\u4EFB\u533B\u5E08 | \u5987\u79D1"])])])])]);
    }
  });
};
var MinorText = exports.MinorText = function MinorText() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(_index.default, [h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "张斌 | 副主任医师"
        },
        "on": {
          "click": function click(e) {
            console.log(e);
          }
        }
      }, [h("template", {
        "slot": "minorText"
      }, [h("div", ["\u5728\u7EBF\u6302\u53F7\u91CF\uFF1A1256"]), h("div", ["\u64C5\u957F\uFF1A\u80BA\u7ED3\u6838\u3001\u80BA\u764C\u3001\u80F8\u8154\u79EF\u6DB2\u3001\u6162\u6027\u54B3\u55FD"])]), h("img", {
        "slot": "avatar",
        "style": "object-fit: contain;",
        "attrs": {
          "src": "https://raw.githubusercontent.com/jeffwcx/ohu-mobile/master/docs/storybook/src/assets/logo.svg"
        }
      }), h(_Icon.default, {
        "slot": "action",
        "attrs": {
          "type": "arrow-right"
        }
      })])]);
    }
  });
};
var Finished = exports.Finished = function Finished() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(_index.default, {
        "attrs": {
          "finished": true
        }
      }, [h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "解放院区",
          "minorText": "浙江杭州市解放路88号"
        }
      }, [h("img", {
        "slot": "thumb",
        "style": "object-fit: contain; width: 120px;",
        "attrs": {
          "src": "http://via.placeholder.com/240x144/EEEEEE"
        }
      }), h(_Icon.default, {
        "slot": "action",
        "attrs": {
          "type": _ArrowRightSOutlined2.default
        }
      })])]);
    }
  });
};
var Loading = exports.Loading = function Loading() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(_index.default, {
        "attrs": {
          "loading": true
        }
      }, [h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "解放院区",
          "minorText": "浙江杭州市解放路88号"
        }
      }, [h("img", {
        "slot": "thumb",
        "style": "object-fit: contain; width: 120px;",
        "attrs": {
          "src": "http://via.placeholder.com/240x144/EEEEEE"
        }
      }), h(_Icon.default, {
        "slot": "action",
        "attrs": {
          "type": "arrow-right-s"
        }
      })])]);
    }
  });
};
var LoadingSlot = exports.LoadingSlot = function LoadingSlot() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(_index.default, {
        "attrs": {
          "loading": true
        }
      }, [h(_Skeleton.default, {
        "attrs": {
          "title": true,
          "rows": 2
        },
        "slot": "loading"
      }, [h(_Skeleton.default, {
        "style": "width: 120px; height: 72px;",
        "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%"
        }
      })])]), h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "解放院区",
          "minorText": "浙江杭州市解放路88号"
        }
      }, [h("img", {
        "slot": "thumb",
        "style": "object-fit: contain; width: 120px;",
        "attrs": {
          "src": "http://via.placeholder.com/240x144/EEEEEE"
        }
      }), h(_Icon.default, {
        "slot": "action",
        "attrs": {
          "type": "arrow-right-s"
        }
      })]), h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "解放院区",
          "minorText": "浙江杭州市解放路88号"
        }
      }, [h("img", {
        "slot": "thumb",
        "style": "object-fit: contain; width: 120px;",
        "attrs": {
          "src": "http://via.placeholder.com/240x144/EEEEEE"
        }
      }), h(_Icon.default, {
        "slot": "action",
        "attrs": {
          "type": "arrow-right-s"
        }
      })])]);
    }
  });
};
var Thumb = exports.Thumb = function Thumb() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(_index.default, [h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "解放院区",
          "minorText": "浙江杭州市解放路88号"
        }
      }, [h("img", {
        "slot": "thumb",
        "style": "object-fit: contain; width: 90px;",
        "attrs": {
          "src": "http://via.placeholder.com/240x144/EEEEEE"
        }
      }), h(_Icon.default, {
        "slot": "action",
        "attrs": {
          "type": "arrow-right-s"
        }
      })]), h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "解放院区",
          "minorText": "浙江杭州市解放路88号"
        }
      }, [h("img", {
        "slot": "thumb",
        "style": "object-fit: contain; width: 90px;",
        "attrs": {
          "src": "http://via.placeholder.com/240x144/EEEEEE"
        }
      }), h(_Icon.default, {
        "slot": "action",
        "attrs": {
          "type": "arrow-right-s"
        }
      })])]);
    }
  });
};
var WithIcon = exports.WithIcon = function WithIcon() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(_index.default, [h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "芬兰 | 副主任医师"
        }
      }, [h(_Icon.default, {
        "slot": "icon",
        "attrs": {
          "type": _FolderOutlined2.default,
          "color": "#999"
        }
      }), h(_Icon.default, {
        "attrs": {
          "type": _ArrowRightSOutlined2.default
        },
        "slot": "action"
      })]), h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "芬兰 | 副主任医师"
        }
      }, [h(_Icon.default, {
        "slot": "icon",
        "attrs": {
          "type": _FolderOutlined2.default,
          "color": "#999"
        }
      }), h(_Icon.default, {
        "attrs": {
          "type": _ArrowRightSOutlined2.default
        },
        "slot": "action"
      })]), h(_index.default.Item, {
        "attrs": {
          "button": true,
          "text": "芬兰 | 副主任医师"
        }
      }, [h(_Icon.default, {
        "slot": "icon",
        "attrs": {
          "type": _FolderOutlined2.default,
          "color": "#999"
        }
      }), h(_Icon.default, {
        "attrs": {
          "type": _ArrowRightSOutlined2.default
        },
        "slot": "action"
      })])]);
    }
  });
};
var Subheader = exports.Subheader = function Subheader() {
  return _vue.default.extend({
    data: function data() {
      return {
        list: new Array(1).fill(new Array(8).fill({
          text: '张斌 | 副主任医师',
          minorText: '擅长：肺结核、肺癌、胸腔积液、慢性咳嗽'
        })),
        top: 0,
        count: 0,
        load: false,
        finished: false,
        infinite: true
      };
    },
    render: function render() {
      var _this = this;
      var h = arguments[0];
      return h(_index.default, {
        "style": "height: 80vh; overflow: scroll;",
        "attrs": {
          "infinite": this.infinite,
          "finished": this.finished,
          "loading": this.load,
          "scrollContainer": function scrollContainer(self) {
            return self.$el;
          }
        },
        "on": {
          "infinite": function infinite() {
            if (_this.load || _this.finished) {
              return;
            }
            _this.load = true;
            console.log('开始请求');
            setTimeout(function () {
              _this.list.push(new Array(8).fill({
                text: '张斌 | 副主任医师',
                minorText: '擅长：肺结核、肺癌、胸腔积液、慢性咳嗽'
              }));
              if (_this.list.length === 8) {
                _this.finished = true;
              }
              _this.load = false;
            }, 1500);
          }
        }
      }, [this.list.map(function (items, index) {
        return h("ul", {
          "style": "position: relative; padding: 0;"
        }, [h(_index.default.Subheader, {
          "attrs": {
            "sticky": true
          }
        }, [index * 7 + 1, "-", (index + 1) * 8]), items.map(function (item) {
          return h(_index.default.Item, {
            "attrs": {
              "button": true,
              "text": item.text,
              "paddingDivider": false,
              "minorText": item.minorText
            }
          }, [h("img", {
            "slot": "avatar",
            "style": "object-fit: contain;",
            "attrs": {
              "src": "https://raw.githubusercontent.com/jeffwcx/ohu-mobile/master/docs/storybook/src/assets/logo.svg"
            }
          }), h(_Icon.default, {
            "slot": "action",
            "attrs": {
              "type": "arrow-right"
            }
          })]);
        })]);
      })]);
    }
  });
};
var UseCheckList = exports.UseCheckList = function UseCheckList() {
  return _vue.default.extend({
    data: function data() {
      return {
        value: [],
        options: [{
          label: '消化内科',
          value: '1',
          attach: {
            name: '小何',
            sex: '女'
          }
        }, {
          label: '呼吸内科',
          value: '2',
          attach: {
            name: '小何',
            sex: '男'
          }
        }, {
          label: '神经内科',
          value: '3',
          disabled: true
        }]
      };
    },
    render: function render() {
      var _this2 = this;
      var h = arguments[0];
      return h("div", [h(_CheckList.default, {
        "attrs": {
          "options": this.options
        },
        "scopedSlots": {
          renderIcon: function renderIcon() {
            return h(_Icon.default, {
              "slot": "icon",
              "attrs": {
                "type": "folder",
                "color": "#999"
              }
            });
          },
          // renderThumb: () => {
          //   return (
          //     <img style="object-fit: contain;" src="http://via.placeholder.com/240x144/EEEEEE" />
          //   );
          // },
          // renderText: ({ option }) => {
          //   return option.label;
          // },
          // renderMinorText: ({ option }) => {
          //   return [
          //     <Tag>{option?.attach?.name}</Tag>,
          //     <Tag>{option?.attach?.sex}</Tag>
          //   ];
          // },
          renderItem: function renderItem(_ref) {
            var option = _ref.option,
              checked = _ref.checked;
            return h("div", {
              "style": {
                color: checked ? 'rgb(45, 126, 255)' : ''
              }
            }, [option.label]);
          }
        },
        "model": {
          value: _this2.value,
          callback: function callback($$v) {
            _this2.value = $$v;
          }
        }
      }), h("p", [h("h4", ["result:"]), JSON.stringify(this.value)])]);
    }
  });
};
var UseRadioList = exports.UseRadioList = function UseRadioList() {
  return _vue.default.extend({
    data: function data() {
      return {
        value: '医生2',
        options: [{
          label: '消化内科',
          value: '1'
        }, {
          label: '呼吸内科',
          value: '2',
          children: [{
            label: '医生1',
            value: '医生1'
          }, {
            label: '医生2',
            value: '医生2'
          }, {
            label: '医生3',
            value: '医生3'
          }]
        }, {
          label: '神经内科',
          value: '3',
          children: [{
            label: '医生31',
            value: '医生31'
          }, {
            label: '医生32',
            value: '医生32'
          }, {
            label: '医生33',
            value: '医生33'
          }]
        }]
      };
    },
    render: function render() {
      var _this3 = this;
      var h = arguments[0];
      return h("div", [h(_RadioList.default, {
        "attrs": {
          "options": this.options,
          "unCheckedIcon": null
        },
        "model": {
          value: _this3.value,
          callback: function callback($$v) {
            _this3.value = $$v;
          }
        }
      }), h("p", [h("h4", ["Result:"]), JSON.stringify(this.value)])]);
    }
  });
};