action-sheet.js 3.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  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 { chunk } from '../common/utils';
  8. import { SuperComponent, wxComponent } from '../common/src/index';
  9. import config from '../common/config';
  10. import { ActionSheetTheme, show } from './show';
  11. import props from './props';
  12. const { prefix } = config;
  13. const name = `${prefix}-action-sheet`;
  14. let ActionSheet = class ActionSheet extends SuperComponent {
  15. constructor() {
  16. super(...arguments);
  17. this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
  18. this.properties = Object.assign({}, props);
  19. this.data = {
  20. prefix,
  21. classPrefix: name,
  22. gridThemeItems: [],
  23. currentSwiperIndex: 0,
  24. };
  25. this.controlledProps = [
  26. {
  27. key: 'visible',
  28. event: 'visible-change',
  29. },
  30. ];
  31. this.methods = {
  32. onSwiperChange(e) {
  33. const { detail: { current }, } = e;
  34. this.setData({
  35. currentSwiperIndex: current,
  36. });
  37. },
  38. splitGridThemeActions() {
  39. if (this.data.theme !== ActionSheetTheme.Grid)
  40. return;
  41. this.setData({
  42. gridThemeItems: chunk(this.data.items, this.data.count),
  43. });
  44. },
  45. show(options) {
  46. this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true }));
  47. this.splitGridThemeActions();
  48. this.autoClose = true;
  49. this._trigger('visible-change', { visible: true });
  50. },
  51. memoInitialData() {
  52. this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
  53. },
  54. close() {
  55. this.triggerEvent('close', { trigger: 'command' });
  56. this._trigger('visible-change', { visible: false });
  57. },
  58. onPopupVisibleChange({ detail }) {
  59. if (!detail.visible) {
  60. this.triggerEvent('close', { trigger: 'overlay' });
  61. this._trigger('visible-change', { visible: false });
  62. }
  63. if (this.autoClose) {
  64. this.setData({ visible: false });
  65. this.autoClose = false;
  66. }
  67. },
  68. onSelect(event) {
  69. const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data;
  70. const { index } = event.currentTarget.dataset;
  71. const isSwiperMode = theme === ActionSheetTheme.Grid;
  72. const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
  73. const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
  74. if (item) {
  75. this.triggerEvent('selected', { selected: item, index: realIndex });
  76. this.triggerEvent('close', { trigger: 'select' });
  77. this._trigger('visible-change', { visible: false });
  78. }
  79. },
  80. onCancel() {
  81. this.triggerEvent('cancel');
  82. },
  83. };
  84. }
  85. ready() {
  86. this.memoInitialData();
  87. this.splitGridThemeActions();
  88. }
  89. };
  90. ActionSheet.show = show;
  91. ActionSheet = __decorate([
  92. wxComponent()
  93. ], ActionSheet);
  94. export default ActionSheet;