jsuites 6.4.2 → 6.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +119 -119
- package/dist/jsuites.css +3424 -3424
- package/dist/jsuites.d.ts +10 -10
- package/dist/jsuites.js +22475 -22450
- package/dist/jsuites.webcomponents.js +501 -501
- package/dist/types/animation.d.ts +23 -23
- package/dist/types/calendar.d.ts +87 -87
- package/dist/types/color.d.ts +50 -50
- package/dist/types/contextmenu.d.ts +43 -43
- package/dist/types/dropdown.d.ts +177 -177
- package/dist/types/editor.d.ts +96 -96
- package/dist/types/floating.d.ts +23 -23
- package/dist/types/form.d.ts +57 -57
- package/dist/types/index.d.ts +59 -59
- package/dist/types/mask.d.ts +50 -50
- package/dist/types/modal.d.ts +35 -35
- package/dist/types/notification.d.ts +27 -27
- package/dist/types/picker.d.ts +45 -45
- package/dist/types/rating.d.ts +19 -19
- package/dist/types/search.d.ts +23 -23
- package/dist/types/slider.d.ts +31 -31
- package/dist/types/tabs.d.ts +79 -79
- package/dist/types/tags.d.ts +105 -105
- package/dist/types/toolbar.d.ts +70 -70
- package/dist/types/upload.d.ts +45 -45
- package/dist/types/validations.d.ts +39 -39
- package/package.json +4 -4
- package/react/calendar/index.d.ts +105 -105
- package/react/calendar/index.js +28 -28
- package/react/color/index.d.ts +84 -84
- package/react/color/index.js +28 -28
- package/react/contextmenu/index.d.ts +61 -61
- package/react/contextmenu/index.js +24 -24
- package/react/dropdown/index.d.ts +184 -184
- package/react/dropdown/index.js +25 -25
- package/react/editor/index.d.ts +114 -114
- package/react/editor/index.js +31 -31
- package/react/index.js +26 -26
- package/react/modal/index.d.ts +53 -53
- package/react/modal/index.js +30 -30
- package/react/picker/index.d.ts +64 -64
- package/react/picker/index.js +28 -28
- package/react/rating/index.d.ts +37 -37
- package/react/rating/index.js +28 -28
- package/react/slider/index.d.ts +49 -49
- package/react/slider/index.js +30 -30
- package/react/tabs/index.d.ts +97 -97
- package/react/tabs/index.js +29 -29
- package/react/tags/index.d.ts +121 -121
- package/react/tags/index.js +24 -24
- package/react/toolbar/index.d.ts +88 -88
- package/react/toolbar/index.js +24 -24
- package/vue/calendar/index.d.ts +105 -105
- package/vue/calendar/index.js +36 -36
- package/vue/color/index.d.ts +84 -84
- package/vue/color/index.js +36 -36
- package/vue/contextmenu/index.d.ts +61 -61
- package/vue/contextmenu/index.js +21 -21
- package/vue/dropdown/index.d.ts +184 -184
- package/vue/dropdown/index.js +25 -25
- package/vue/editor/index.d.ts +114 -114
- package/vue/editor/index.js +40 -40
- package/vue/index.js +40 -40
- package/vue/modal/index.d.ts +53 -53
- package/vue/modal/index.js +41 -41
- package/vue/picker/index.d.ts +64 -64
- package/vue/picker/index.js +36 -36
- package/vue/rating/index.d.ts +37 -37
- package/vue/rating/index.js +36 -36
- package/vue/slider/index.d.ts +49 -49
- package/vue/slider/index.js +33 -33
- package/vue/tabs/index.d.ts +97 -97
- package/vue/tabs/index.js +28 -28
- package/vue/tags/index.d.ts +121 -121
- package/vue/tags/index.js +21 -21
- package/vue/toolbar/index.d.ts +88 -88
- package/vue/toolbar/index.js +21 -21
package/react/tags/index.d.ts
CHANGED
|
@@ -1,121 +1,121 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Official Type definitions for LemonadeJS plugins
|
|
3
|
-
* https://lemonadejs.net
|
|
4
|
-
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
|
|
8
|
-
|
|
9
|
-
declare namespace Component {
|
|
10
|
-
interface Options {
|
|
11
|
-
/** Initial value of the compontent */
|
|
12
|
-
value?: string;
|
|
13
|
-
/** Max number of tags inside the element */
|
|
14
|
-
limit?: number;
|
|
15
|
-
/** The URL for suggestions */
|
|
16
|
-
search?: string;
|
|
17
|
-
/** The default instruction text on the element */
|
|
18
|
-
placeholder?: string;
|
|
19
|
-
/** Method to validate the tags */
|
|
20
|
-
validation?: (el: HTMLElement, text: string, value: string) => boolean;
|
|
21
|
-
/** Method to be execute before any changes on the element */
|
|
22
|
-
onbeforepaste?: (el: HTMLElement, instance: Tags, data: string[]) => string[];
|
|
23
|
-
/** Method to be execute after any changes on the element */
|
|
24
|
-
onbeforechange?: (el: HTMLElement, instance: Tags, currentValue: string, value: string) => string | string[] | boolean;
|
|
25
|
-
/** Method to be execute when the user reach the limit number entries */
|
|
26
|
-
onlimit?: (instance: Tags, limit: number) => void;
|
|
27
|
-
/** Method to be execute when on changed */
|
|
28
|
-
onchange?: (el: HTMLElement, instance: Tags, value: string) => void;
|
|
29
|
-
/** Method to be execute when on focus */
|
|
30
|
-
onfocus?: (el: HTMLElement, instance: Tags, value: string) => void;
|
|
31
|
-
/** Method to be execute when on blur */
|
|
32
|
-
onblur?: (el: HTMLElement, instance: Tags, value: string) => void;
|
|
33
|
-
/** Method to be execute when the element is loaded */
|
|
34
|
-
onload?: (el: HTMLElement, instance: Tags) => void;
|
|
35
|
-
/** Colors */
|
|
36
|
-
colors?: null;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
interface Instance {
|
|
40
|
-
/**
|
|
41
|
-
* Change the component settings
|
|
42
|
-
* @param {object} - New options
|
|
43
|
-
* @param {boolean} - Reset to the defaults when option not specified
|
|
44
|
-
*/
|
|
45
|
-
setOptions: (options: Options, reset?: boolean) => void;
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* Add a new tag to the element
|
|
49
|
-
* @param {string|string[]} value - The value of the new element
|
|
50
|
-
* @param {boolean} - focus on this new element
|
|
51
|
-
*/
|
|
52
|
-
add: (value?: string | string[], focus?: boolean) => void;
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Set the limit of entries for the component
|
|
56
|
-
* @param {number} - New limit
|
|
57
|
-
*/
|
|
58
|
-
setLimit: (limit) => void;
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Remove a item node
|
|
62
|
-
*/
|
|
63
|
-
remove: (node: HTMLElement) => void;
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* Get all tags in the element
|
|
67
|
-
* @return {Array} data - All tags as an array
|
|
68
|
-
*/
|
|
69
|
-
getData: () => string[];
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* Get the value of one tag. Null for all tags
|
|
73
|
-
* @param {number} index - Tag index number. Null for all tags.
|
|
74
|
-
* @return {string} value - All tags separated by comma
|
|
75
|
-
*/
|
|
76
|
-
getValue: (index?: number) => string;
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* Set the value of the element based on a string separated by (,|;|\r\n) or array
|
|
80
|
-
* @param {string|string[]} value - A string or array object with values
|
|
81
|
-
*/
|
|
82
|
-
setValue: (value: string | string[]) => void;
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* Reset the value from the component
|
|
86
|
-
*/
|
|
87
|
-
reset: () => void;
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* Verify if all tags in the element are valid
|
|
91
|
-
* @return {boolean}
|
|
92
|
-
*/
|
|
93
|
-
isValid: () => boolean;
|
|
94
|
-
|
|
95
|
-
/**
|
|
96
|
-
* Add one element from the suggestions to the component
|
|
97
|
-
* @param {string} text - Label
|
|
98
|
-
* @param {string} value - Value
|
|
99
|
-
*/
|
|
100
|
-
selectIndex: (text: string, value?: string) => void;
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
* Search for suggestions
|
|
104
|
-
* @param {object} node - Target node for any suggestions
|
|
105
|
-
*/
|
|
106
|
-
search: (node: HTMLElement) => void;
|
|
107
|
-
|
|
108
|
-
/**
|
|
109
|
-
* Destroy the component
|
|
110
|
-
*/
|
|
111
|
-
destroy: () => void;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
interface Tags {
|
|
116
|
-
(): any
|
|
117
|
-
[key: string]: any
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
declare function Tags<Tags>(props: Component.Options): any;
|
|
121
|
-
export default Tags;
|
|
1
|
+
/**
|
|
2
|
+
* Official Type definitions for LemonadeJS plugins
|
|
3
|
+
* https://lemonadejs.net
|
|
4
|
+
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
|
|
8
|
+
|
|
9
|
+
declare namespace Component {
|
|
10
|
+
interface Options {
|
|
11
|
+
/** Initial value of the compontent */
|
|
12
|
+
value?: string;
|
|
13
|
+
/** Max number of tags inside the element */
|
|
14
|
+
limit?: number;
|
|
15
|
+
/** The URL for suggestions */
|
|
16
|
+
search?: string;
|
|
17
|
+
/** The default instruction text on the element */
|
|
18
|
+
placeholder?: string;
|
|
19
|
+
/** Method to validate the tags */
|
|
20
|
+
validation?: (el: HTMLElement, text: string, value: string) => boolean;
|
|
21
|
+
/** Method to be execute before any changes on the element */
|
|
22
|
+
onbeforepaste?: (el: HTMLElement, instance: Tags, data: string[]) => string[];
|
|
23
|
+
/** Method to be execute after any changes on the element */
|
|
24
|
+
onbeforechange?: (el: HTMLElement, instance: Tags, currentValue: string, value: string) => string | string[] | boolean;
|
|
25
|
+
/** Method to be execute when the user reach the limit number entries */
|
|
26
|
+
onlimit?: (instance: Tags, limit: number) => void;
|
|
27
|
+
/** Method to be execute when on changed */
|
|
28
|
+
onchange?: (el: HTMLElement, instance: Tags, value: string) => void;
|
|
29
|
+
/** Method to be execute when on focus */
|
|
30
|
+
onfocus?: (el: HTMLElement, instance: Tags, value: string) => void;
|
|
31
|
+
/** Method to be execute when on blur */
|
|
32
|
+
onblur?: (el: HTMLElement, instance: Tags, value: string) => void;
|
|
33
|
+
/** Method to be execute when the element is loaded */
|
|
34
|
+
onload?: (el: HTMLElement, instance: Tags) => void;
|
|
35
|
+
/** Colors */
|
|
36
|
+
colors?: null;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
interface Instance {
|
|
40
|
+
/**
|
|
41
|
+
* Change the component settings
|
|
42
|
+
* @param {object} - New options
|
|
43
|
+
* @param {boolean} - Reset to the defaults when option not specified
|
|
44
|
+
*/
|
|
45
|
+
setOptions: (options: Options, reset?: boolean) => void;
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Add a new tag to the element
|
|
49
|
+
* @param {string|string[]} value - The value of the new element
|
|
50
|
+
* @param {boolean} - focus on this new element
|
|
51
|
+
*/
|
|
52
|
+
add: (value?: string | string[], focus?: boolean) => void;
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Set the limit of entries for the component
|
|
56
|
+
* @param {number} - New limit
|
|
57
|
+
*/
|
|
58
|
+
setLimit: (limit) => void;
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Remove a item node
|
|
62
|
+
*/
|
|
63
|
+
remove: (node: HTMLElement) => void;
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Get all tags in the element
|
|
67
|
+
* @return {Array} data - All tags as an array
|
|
68
|
+
*/
|
|
69
|
+
getData: () => string[];
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* Get the value of one tag. Null for all tags
|
|
73
|
+
* @param {number} index - Tag index number. Null for all tags.
|
|
74
|
+
* @return {string} value - All tags separated by comma
|
|
75
|
+
*/
|
|
76
|
+
getValue: (index?: number) => string;
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Set the value of the element based on a string separated by (,|;|\r\n) or array
|
|
80
|
+
* @param {string|string[]} value - A string or array object with values
|
|
81
|
+
*/
|
|
82
|
+
setValue: (value: string | string[]) => void;
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Reset the value from the component
|
|
86
|
+
*/
|
|
87
|
+
reset: () => void;
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Verify if all tags in the element are valid
|
|
91
|
+
* @return {boolean}
|
|
92
|
+
*/
|
|
93
|
+
isValid: () => boolean;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Add one element from the suggestions to the component
|
|
97
|
+
* @param {string} text - Label
|
|
98
|
+
* @param {string} value - Value
|
|
99
|
+
*/
|
|
100
|
+
selectIndex: (text: string, value?: string) => void;
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Search for suggestions
|
|
104
|
+
* @param {object} node - Target node for any suggestions
|
|
105
|
+
*/
|
|
106
|
+
search: (node: HTMLElement) => void;
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Destroy the component
|
|
110
|
+
*/
|
|
111
|
+
destroy: () => void;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
interface Tags {
|
|
116
|
+
(): any
|
|
117
|
+
[key: string]: any
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
declare function Tags<Tags>(props: Component.Options): any;
|
|
121
|
+
export default Tags;
|
package/react/tags/index.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
// @ts-nocheck
|
|
2
|
-
import React, { useRef, useEffect } from "react";
|
|
3
|
-
import jSuites from '../../dist/jsuites';
|
|
4
|
-
|
|
5
|
-
// @ts-ignore
|
|
6
|
-
export default React.forwardRef((props, mainReference) => {
|
|
7
|
-
// Dom element
|
|
8
|
-
const Ref = useRef(null);
|
|
9
|
-
|
|
10
|
-
// Get the properties for the spreadsheet
|
|
11
|
-
let options = { ...props };
|
|
12
|
-
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
// @ts-ignore
|
|
15
|
-
if (!Ref.current.innerHTML) {
|
|
16
|
-
mainReference.current = jSuites.tags(Ref.current, options);
|
|
17
|
-
}
|
|
18
|
-
}, []);
|
|
19
|
-
|
|
20
|
-
let prop = {
|
|
21
|
-
ref: Ref,
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
return React.createElement("div", prop);
|
|
1
|
+
// @ts-nocheck
|
|
2
|
+
import React, { useRef, useEffect } from "react";
|
|
3
|
+
import jSuites from '../../dist/jsuites';
|
|
4
|
+
|
|
5
|
+
// @ts-ignore
|
|
6
|
+
export default React.forwardRef((props, mainReference) => {
|
|
7
|
+
// Dom element
|
|
8
|
+
const Ref = useRef(null);
|
|
9
|
+
|
|
10
|
+
// Get the properties for the spreadsheet
|
|
11
|
+
let options = { ...props };
|
|
12
|
+
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
// @ts-ignore
|
|
15
|
+
if (!Ref.current.innerHTML) {
|
|
16
|
+
mainReference.current = jSuites.tags(Ref.current, options);
|
|
17
|
+
}
|
|
18
|
+
}, []);
|
|
19
|
+
|
|
20
|
+
let prop = {
|
|
21
|
+
ref: Ref,
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
return React.createElement("div", prop);
|
|
25
25
|
})
|
package/react/toolbar/index.d.ts
CHANGED
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Official Type definitions for LemonadeJS plugins
|
|
3
|
-
* https://lemonadejs.net
|
|
4
|
-
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
|
|
8
|
-
|
|
9
|
-
interface Item {
|
|
10
|
-
/** Toolbar item type */
|
|
11
|
-
type?: 'icon' | 'divisor' | 'label' | 'select';
|
|
12
|
-
/** Content of the toolbar element */
|
|
13
|
-
content?: string;
|
|
14
|
-
/** Tooltip for the toolbar element */
|
|
15
|
-
tooltip?: string;
|
|
16
|
-
/** Toolbar element width */
|
|
17
|
-
width?: number;
|
|
18
|
-
/** The initial selected option for the type: select */
|
|
19
|
-
value?: string;
|
|
20
|
-
/** Render method parser for the elements in the dropdown when type: select */
|
|
21
|
-
render?: Function;
|
|
22
|
-
/** When a item is clicked */
|
|
23
|
-
onclick?: (el: HTMLElement, iconObject: object, toolbarItem: HTMLElement) => void;
|
|
24
|
-
/** For the type select when a new item is selected */
|
|
25
|
-
onchange?: (el: HTMLElement, pickerObject: object, reservedValue: any, itemValue: string, itemKey: string, mouseEvent: object) => void;
|
|
26
|
-
/** To update the state of the toolbar */
|
|
27
|
-
updateState?: (toolbarObject: object, toolbarItem: HTMLElement, option: any, extendOption: any) => void;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
declare namespace Component {
|
|
31
|
-
interface Options {
|
|
32
|
-
/** Instance for the application you integrate your toolbar */
|
|
33
|
-
app?: any;
|
|
34
|
-
/** Container of the toolbar */
|
|
35
|
-
container?: boolean;
|
|
36
|
-
/** Show badge. Default: false */
|
|
37
|
-
badge?: boolean;
|
|
38
|
-
/** Show titles */
|
|
39
|
-
title?: boolean;
|
|
40
|
-
/** Responsive toolbar. Default: false */
|
|
41
|
-
responsive?: boolean;
|
|
42
|
-
/** Max toolbar width */
|
|
43
|
-
maxWidth?: number | null;
|
|
44
|
-
/** Show toolbar in the bottom of the component */
|
|
45
|
-
bottom?: boolean;
|
|
46
|
-
/** Items */
|
|
47
|
-
items: Item[];
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
interface Instance {
|
|
51
|
-
/** Close the floating extended options */
|
|
52
|
-
close: () => void;
|
|
53
|
-
/** Create the toolbar */
|
|
54
|
-
create: (items: Item[]) => void;
|
|
55
|
-
/** Destroy the toolbar */
|
|
56
|
-
destroy: () => void;
|
|
57
|
-
/** Return the HTMLElement container */
|
|
58
|
-
get: () => void;
|
|
59
|
-
/** Hide the toolbar */
|
|
60
|
-
hide: () => void;
|
|
61
|
-
/** Open the floating extended options */
|
|
62
|
-
open: () => void;
|
|
63
|
-
/** Toolbar settings */
|
|
64
|
-
options: Component.Options;
|
|
65
|
-
/** Refresh the toolbar items */
|
|
66
|
-
refresh: () => void;
|
|
67
|
-
/** Select the toolbar item */
|
|
68
|
-
selectItem: (element: HTMLElement) => void;
|
|
69
|
-
/** Set the badge for a toolbar item */
|
|
70
|
-
setBadge: (index: number, value: number) => void;
|
|
71
|
-
/** Define readonly status */
|
|
72
|
-
setReadonly: (state: boolean) => void;
|
|
73
|
-
/** Show the toolbar */
|
|
74
|
-
show: () => void;
|
|
75
|
-
/** Internal controller */
|
|
76
|
-
type: 'toolbar';
|
|
77
|
-
/** Update the state of a toolbar item. Arguments to be sent to the items */
|
|
78
|
-
update: (option?: any, extendedOption?: any) => void;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
interface Toolbar {
|
|
83
|
-
(): any
|
|
84
|
-
[key: string]: any
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
declare function Toolbar<Toolbar>(props: Component.Options): any;
|
|
88
|
-
export default Toolbar;
|
|
1
|
+
/**
|
|
2
|
+
* Official Type definitions for LemonadeJS plugins
|
|
3
|
+
* https://lemonadejs.net
|
|
4
|
+
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
|
|
8
|
+
|
|
9
|
+
interface Item {
|
|
10
|
+
/** Toolbar item type */
|
|
11
|
+
type?: 'icon' | 'divisor' | 'label' | 'select';
|
|
12
|
+
/** Content of the toolbar element */
|
|
13
|
+
content?: string;
|
|
14
|
+
/** Tooltip for the toolbar element */
|
|
15
|
+
tooltip?: string;
|
|
16
|
+
/** Toolbar element width */
|
|
17
|
+
width?: number;
|
|
18
|
+
/** The initial selected option for the type: select */
|
|
19
|
+
value?: string;
|
|
20
|
+
/** Render method parser for the elements in the dropdown when type: select */
|
|
21
|
+
render?: Function;
|
|
22
|
+
/** When a item is clicked */
|
|
23
|
+
onclick?: (el: HTMLElement, iconObject: object, toolbarItem: HTMLElement) => void;
|
|
24
|
+
/** For the type select when a new item is selected */
|
|
25
|
+
onchange?: (el: HTMLElement, pickerObject: object, reservedValue: any, itemValue: string, itemKey: string, mouseEvent: object) => void;
|
|
26
|
+
/** To update the state of the toolbar */
|
|
27
|
+
updateState?: (toolbarObject: object, toolbarItem: HTMLElement, option: any, extendOption: any) => void;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
declare namespace Component {
|
|
31
|
+
interface Options {
|
|
32
|
+
/** Instance for the application you integrate your toolbar */
|
|
33
|
+
app?: any;
|
|
34
|
+
/** Container of the toolbar */
|
|
35
|
+
container?: boolean;
|
|
36
|
+
/** Show badge. Default: false */
|
|
37
|
+
badge?: boolean;
|
|
38
|
+
/** Show titles */
|
|
39
|
+
title?: boolean;
|
|
40
|
+
/** Responsive toolbar. Default: false */
|
|
41
|
+
responsive?: boolean;
|
|
42
|
+
/** Max toolbar width */
|
|
43
|
+
maxWidth?: number | null;
|
|
44
|
+
/** Show toolbar in the bottom of the component */
|
|
45
|
+
bottom?: boolean;
|
|
46
|
+
/** Items */
|
|
47
|
+
items: Item[];
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
interface Instance {
|
|
51
|
+
/** Close the floating extended options */
|
|
52
|
+
close: () => void;
|
|
53
|
+
/** Create the toolbar */
|
|
54
|
+
create: (items: Item[]) => void;
|
|
55
|
+
/** Destroy the toolbar */
|
|
56
|
+
destroy: () => void;
|
|
57
|
+
/** Return the HTMLElement container */
|
|
58
|
+
get: () => void;
|
|
59
|
+
/** Hide the toolbar */
|
|
60
|
+
hide: () => void;
|
|
61
|
+
/** Open the floating extended options */
|
|
62
|
+
open: () => void;
|
|
63
|
+
/** Toolbar settings */
|
|
64
|
+
options: Component.Options;
|
|
65
|
+
/** Refresh the toolbar items */
|
|
66
|
+
refresh: () => void;
|
|
67
|
+
/** Select the toolbar item */
|
|
68
|
+
selectItem: (element: HTMLElement) => void;
|
|
69
|
+
/** Set the badge for a toolbar item */
|
|
70
|
+
setBadge: (index: number, value: number) => void;
|
|
71
|
+
/** Define readonly status */
|
|
72
|
+
setReadonly: (state: boolean) => void;
|
|
73
|
+
/** Show the toolbar */
|
|
74
|
+
show: () => void;
|
|
75
|
+
/** Internal controller */
|
|
76
|
+
type: 'toolbar';
|
|
77
|
+
/** Update the state of a toolbar item. Arguments to be sent to the items */
|
|
78
|
+
update: (option?: any, extendedOption?: any) => void;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
interface Toolbar {
|
|
83
|
+
(): any
|
|
84
|
+
[key: string]: any
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
declare function Toolbar<Toolbar>(props: Component.Options): any;
|
|
88
|
+
export default Toolbar;
|
package/react/toolbar/index.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
// @ts-nocheck
|
|
2
|
-
import React, { useRef, useEffect } from "react";
|
|
3
|
-
import jSuites from '../../dist/jsuites';
|
|
4
|
-
|
|
5
|
-
// @ts-ignore
|
|
6
|
-
export default React.forwardRef((props, mainReference) => {
|
|
7
|
-
// Dom element
|
|
8
|
-
const Ref = useRef(null);
|
|
9
|
-
|
|
10
|
-
// Get the properties for the spreadsheet
|
|
11
|
-
let options = { ...props };
|
|
12
|
-
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
// @ts-ignore
|
|
15
|
-
if (!Ref.current.innerHTML) {
|
|
16
|
-
mainReference.current = jSuites.toolbar(Ref.current, options);
|
|
17
|
-
}
|
|
18
|
-
}, []);
|
|
19
|
-
|
|
20
|
-
let prop = {
|
|
21
|
-
ref: Ref,
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
return React.createElement("div", prop);
|
|
1
|
+
// @ts-nocheck
|
|
2
|
+
import React, { useRef, useEffect } from "react";
|
|
3
|
+
import jSuites from '../../dist/jsuites';
|
|
4
|
+
|
|
5
|
+
// @ts-ignore
|
|
6
|
+
export default React.forwardRef((props, mainReference) => {
|
|
7
|
+
// Dom element
|
|
8
|
+
const Ref = useRef(null);
|
|
9
|
+
|
|
10
|
+
// Get the properties for the spreadsheet
|
|
11
|
+
let options = { ...props };
|
|
12
|
+
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
// @ts-ignore
|
|
15
|
+
if (!Ref.current.innerHTML) {
|
|
16
|
+
mainReference.current = jSuites.toolbar(Ref.current, options);
|
|
17
|
+
}
|
|
18
|
+
}, []);
|
|
19
|
+
|
|
20
|
+
let prop = {
|
|
21
|
+
ref: Ref,
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
return React.createElement("div", prop);
|
|
25
25
|
})
|