skeleton.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import props from './props';
  10. import { isNumber } from '../common/utils';
  11. const { prefix } = config;
  12. const name = `${prefix}-skeleton`;
  13. const ThemeMap = {
  14. avatar: [{ type: 'circle', height: '64px', width: '64px' }],
  15. image: [{ type: 'rect', height: '64px', width: '64px' }],
  16. text: [
  17. 1,
  18. [
  19. { width: '24%', height: '16px', marginRight: '16px' },
  20. { width: '76%', height: '16px' },
  21. ],
  22. ],
  23. paragraph: [1, 1, 1, { width: '55%' }],
  24. };
  25. let Skeleton = class Skeleton extends SuperComponent {
  26. constructor() {
  27. super(...arguments);
  28. this.externalClasses = [`${prefix}-class`, `${prefix}-class-col`, `${prefix}-class-row`];
  29. this.properties = props;
  30. this.observers = {
  31. rowCol() {
  32. this.init();
  33. },
  34. };
  35. this.lifetimes = {
  36. attached() {
  37. this.init();
  38. },
  39. };
  40. this.methods = {
  41. init() {
  42. const { theme, rowCol } = this.properties;
  43. const rowCols = [];
  44. if (rowCol.length) {
  45. rowCols.push(...rowCol);
  46. }
  47. else {
  48. rowCols.push(...ThemeMap[theme || 'text']);
  49. }
  50. const parsedRowcols = rowCols.map((item) => {
  51. if (isNumber(item)) {
  52. return [
  53. {
  54. class: this.getColItemClass({ type: 'text' }),
  55. style: {},
  56. },
  57. ];
  58. }
  59. if (Array.isArray(item)) {
  60. return item.map((col) => {
  61. return Object.assign(Object.assign({}, col), { class: this.getColItemClass(col), style: this.getColItemStyle(col) });
  62. });
  63. }
  64. const nItem = item;
  65. return [
  66. Object.assign(Object.assign({}, nItem), { class: this.getColItemClass(nItem), style: this.getColItemStyle(nItem) }),
  67. ];
  68. });
  69. this.setData({
  70. parsedRowcols,
  71. });
  72. },
  73. getColItemClass(obj) {
  74. return [`${name}__col`, `${name}--type-${obj.type || 'text'}`, `${name}--animation-${this.properties.animation}`];
  75. },
  76. getColItemStyle(obj) {
  77. const styleName = [
  78. 'width',
  79. 'height',
  80. 'marginRight',
  81. 'marginLeft',
  82. 'margin',
  83. 'size',
  84. 'background',
  85. 'backgroundColor',
  86. 'borderRadius',
  87. ];
  88. const style = {};
  89. styleName.forEach((name) => {
  90. if (name in obj) {
  91. const px = isNumber(obj[name]) ? `${obj[name]}px` : obj[name];
  92. if (name === 'size') {
  93. [style.width, style.height] = [px, px];
  94. }
  95. else {
  96. style[name] = px;
  97. }
  98. }
  99. });
  100. return style;
  101. },
  102. };
  103. this.data = {
  104. prefix,
  105. classPrefix: name,
  106. parsedRowcols: [],
  107. };
  108. }
  109. };
  110. Skeleton = __decorate([
  111. wxComponent()
  112. ], Skeleton);
  113. export default Skeleton;