1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | import util from './util.js';
|
19 |
|
20 |
|
21 | const checkOptions = options => {
|
22 | const err = (prop, type = 'Function') => util.throw(`"options.${prop}" must be an instance of ${type}`);
|
23 | const hasOwnProperty = prop => Object.hasOwnProperty.call(options, prop);
|
24 | const instanceOf = (prop, type = Function) => options[prop] instanceof type;
|
25 |
|
26 | const b = 'buttons', cb = 'callback', c = 'compile', d = 'destroy';
|
27 | (!hasOwnProperty(b) || !instanceOf(b, Array)) && err(b, 'Array');
|
28 | (hasOwnProperty(cb) && !instanceOf(cb)) && err(cb);
|
29 | (hasOwnProperty(c) && !instanceOf(c)) && err(c);
|
30 | (hasOwnProperty(d) && !instanceOf(d)) && err(d);
|
31 | };
|
32 |
|
33 |
|
34 | export default (options = {}) => new Promise(resolve => {
|
35 | util.checkMissingImport('ActionSheet');
|
36 | checkOptions(options);
|
37 |
|
38 |
|
39 | let actionSheet = util.createElement(`
|
40 | <ons-action-sheet
|
41 | ${options.title ? `title="${options.title}"` : ''}
|
42 | ${options.cancelable ? 'cancelable' : ''}
|
43 | ${options.modifier ? `modifier="${options.modifier}"` : ''}
|
44 | ${options.maskColor ? `mask-color="${options.maskColor}"` : ''}
|
45 | ${options.id ? `id="${options.id}"` : ''}
|
46 | ${options.class ? `class="${options.class}"` : ''}
|
47 | >
|
48 | <div class="action-sheet"></div>
|
49 | </ons-action-sheet>
|
50 | `);
|
51 |
|
52 |
|
53 | const finish = (event, index = -1) => {
|
54 | if (actionSheet) {
|
55 | options.destroy && options.destroy(actionSheet);
|
56 |
|
57 | actionSheet.removeEventListener('dialogcancel', finish, false);
|
58 | actionSheet.remove();
|
59 | actionSheet = null;
|
60 |
|
61 | options.callback && options.callback(index);
|
62 | resolve(index);
|
63 | }
|
64 | };
|
65 |
|
66 |
|
67 | actionSheet.addEventListener('dialogcancel', finish, false);
|
68 |
|
69 |
|
70 | const buttons = document.createDocumentFragment();
|
71 | options.buttons.forEach((item, index) => {
|
72 | const buttonOptions = (typeof item === 'string') ? { label: item } : { ...item };
|
73 | if (options.destructive === index) {
|
74 | buttonOptions.modifier = (buttonOptions.modifier || '') + ' destructive';
|
75 | }
|
76 |
|
77 | const button = util.createElement(`
|
78 | <ons-action-sheet-button
|
79 | ${buttonOptions.icon ? `icon="${buttonOptions.icon}"` : ''}
|
80 | ${buttonOptions.modifier ? `modifier="${buttonOptions.modifier}"` : ''}
|
81 | >
|
82 | ${buttonOptions.label}
|
83 | </ons-action-sheet-button>
|
84 | `);
|
85 |
|
86 | button.onclick = event => actionSheet.hide().then(() => finish(event, index));
|
87 | buttons.appendChild(button);
|
88 | });
|
89 |
|
90 |
|
91 | util.findChild(actionSheet, '.action-sheet').appendChild(buttons);
|
92 | document.body.appendChild(actionSheet);
|
93 | options.compile && options.compile(el.dialog);
|
94 |
|
95 |
|
96 | setImmediate(() => actionSheet.show({
|
97 | animation: options.animation,
|
98 | animationOptions: options.animationOptions
|
99 | }));
|
100 | });
|