@progress/kendo-react-buttons 6.1.1 → 7.0.0-develop.2
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/{dist/es/Button.d.ts → Button.d.ts} +5 -1
- package/{dist/npm/ButtonGroup.d.ts → ButtonGroup.d.ts} +5 -1
- package/{dist/es/ButtonGroupInterface.d.ts → ButtonGroupInterface.d.ts} +4 -1
- package/{dist/npm/ButtonInterface.d.ts → ButtonInterface.d.ts} +4 -0
- package/{dist/npm/Chip → Chip}/Chip.d.ts +4 -0
- package/{dist/npm/Chip → Chip}/ChipList.d.ts +4 -12
- package/Chip/chip-list-contexts.d.ts +17 -0
- package/{dist/npm/Chip → Chip}/data-reducer.d.ts +5 -1
- package/{dist/es/Chip → Chip}/focus-reducer.d.ts +5 -2
- package/{dist/npm/Chip → Chip}/selection-reducer.d.ts +5 -1
- package/{dist/npm/FloatingActionButton → FloatingActionButton}/FloatingActionButton.d.ts +4 -0
- package/{dist/es/FloatingActionButton → FloatingActionButton}/FloatingActionButtonItem.d.ts +4 -0
- package/FloatingActionButton/interfaces/FloatingActionButtonHandle.d.ts +17 -0
- package/{dist/es/FloatingActionButton → FloatingActionButton}/interfaces/FloatingActionButtonPopupSettings.d.ts +4 -0
- package/{dist/npm/FloatingActionButton → FloatingActionButton}/interfaces/FloatingActionButtonProps.d.ts +5 -2
- package/{dist/es/FloatingActionButton → FloatingActionButton}/models/align-offset.d.ts +4 -0
- package/{dist/npm/FloatingActionButton → FloatingActionButton}/models/align.d.ts +4 -0
- package/{dist/es/FloatingActionButton → FloatingActionButton}/models/events.d.ts +5 -1
- package/FloatingActionButton/models/position-mode.d.ts +13 -0
- package/FloatingActionButton/models/rounded.d.ts +16 -0
- package/FloatingActionButton/models/size.d.ts +15 -0
- package/{dist/npm/FloatingActionButton → FloatingActionButton}/models/theme-color.d.ts +5 -1
- package/{dist/npm/FloatingActionButton → FloatingActionButton}/utils.d.ts +4 -0
- package/LICENSE.md +1 -1
- package/{dist/es/ListButton → ListButton}/ButtonItem.d.ts +4 -0
- package/{dist/es/ListButton → ListButton}/DropDownButton.d.ts +5 -1
- package/{dist/npm/ListButton → ListButton}/DropDownButtonItem.d.ts +4 -0
- package/{dist/npm/ListButton → ListButton}/SplitButton.d.ts +5 -1
- package/{dist/es/ListButton → ListButton}/SplitButtonItem.d.ts +4 -0
- package/{dist/npm/ListButton → ListButton}/models/ButtonItem.d.ts +4 -0
- package/{dist/npm/ListButton → ListButton}/models/ListButtonProps.d.ts +4 -1
- package/{dist/npm/ListButton → ListButton}/models/PopupSettings.d.ts +4 -0
- package/{dist/npm/ListButton → ListButton}/models/events.d.ts +4 -0
- package/ListButton/utils/navigation.d.ts +9 -0
- package/ListButton/utils/popup.d.ts +13 -0
- package/dist/cdn/js/kendo-react-buttons.js +5 -1
- package/index.d.ts +36 -0
- package/index.js +5 -0
- package/index.mjs +1877 -0
- package/{dist/npm/models → models}/index.d.ts +4 -1
- package/package-metadata.d.ts +9 -0
- package/package.json +28 -42
- package/{dist/es/toolbar → toolbar}/Toolbar.d.ts +5 -1
- package/{dist/es/toolbar → toolbar}/tools/ToolbarItem.d.ts +5 -1
- package/toolbar/tools/ToolbarSeparator.d.ts +20 -0
- package/{dist/es/toolbar → toolbar}/tools/ToolbarSpacer.d.ts +4 -0
- package/{dist/npm/util.d.ts → util.d.ts} +4 -0
- package/about.md +0 -3
- package/dist/es/Button.js +0 -171
- package/dist/es/ButtonGroup.d.ts +0 -32
- package/dist/es/ButtonGroup.js +0 -101
- package/dist/es/ButtonGroupInterface.js +0 -2
- package/dist/es/ButtonInterface.d.ts +0 -35
- package/dist/es/ButtonInterface.js +0 -3
- package/dist/es/Chip/Chip.d.ts +0 -234
- package/dist/es/Chip/Chip.js +0 -173
- package/dist/es/Chip/ChipList.d.ts +0 -123
- package/dist/es/Chip/ChipList.js +0 -177
- package/dist/es/Chip/data-reducer.d.ts +0 -22
- package/dist/es/Chip/data-reducer.js +0 -26
- package/dist/es/Chip/focus-reducer.js +0 -32
- package/dist/es/Chip/selection-reducer.d.ts +0 -30
- package/dist/es/Chip/selection-reducer.js +0 -75
- package/dist/es/FloatingActionButton/FloatingActionButton.d.ts +0 -17
- package/dist/es/FloatingActionButton/FloatingActionButton.js +0 -281
- package/dist/es/FloatingActionButton/FloatingActionButtonItem.js +0 -82
- package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonHandle.d.ts +0 -13
- package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonHandle.js +0 -1
- package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonPopupSettings.js +0 -1
- package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts +0 -216
- package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonProps.js +0 -1
- package/dist/es/FloatingActionButton/models/align-offset.js +0 -1
- package/dist/es/FloatingActionButton/models/align.d.ts +0 -27
- package/dist/es/FloatingActionButton/models/align.js +0 -1
- package/dist/es/FloatingActionButton/models/events.js +0 -1
- package/dist/es/FloatingActionButton/models/position-mode.d.ts +0 -9
- package/dist/es/FloatingActionButton/models/position-mode.js +0 -1
- package/dist/es/FloatingActionButton/models/rounded.d.ts +0 -12
- package/dist/es/FloatingActionButton/models/rounded.js +0 -1
- package/dist/es/FloatingActionButton/models/size.d.ts +0 -11
- package/dist/es/FloatingActionButton/models/size.js +0 -1
- package/dist/es/FloatingActionButton/models/theme-color.d.ts +0 -18
- package/dist/es/FloatingActionButton/models/theme-color.js +0 -1
- package/dist/es/FloatingActionButton/utils.d.ts +0 -27
- package/dist/es/FloatingActionButton/utils.js +0 -93
- package/dist/es/ListButton/ButtonItem.js +0 -24
- package/dist/es/ListButton/DropDownButton.js +0 -325
- package/dist/es/ListButton/DropDownButtonItem.d.ts +0 -30
- package/dist/es/ListButton/DropDownButtonItem.js +0 -43
- package/dist/es/ListButton/SplitButton.d.ts +0 -120
- package/dist/es/ListButton/SplitButton.js +0 -334
- package/dist/es/ListButton/SplitButtonItem.js +0 -42
- package/dist/es/ListButton/models/ButtonItem.d.ts +0 -34
- package/dist/es/ListButton/models/ButtonItem.js +0 -3
- package/dist/es/ListButton/models/ListButtonProps.d.ts +0 -336
- package/dist/es/ListButton/models/ListButtonProps.js +0 -2
- package/dist/es/ListButton/models/PopupSettings.d.ts +0 -24
- package/dist/es/ListButton/models/PopupSettings.js +0 -1
- package/dist/es/ListButton/models/events.d.ts +0 -47
- package/dist/es/ListButton/models/events.js +0 -1
- package/dist/es/ListButton/utils/navigation.d.ts +0 -5
- package/dist/es/ListButton/utils/navigation.js +0 -29
- package/dist/es/ListButton/utils/popup.d.ts +0 -9
- package/dist/es/ListButton/utils/popup.js +0 -20
- package/dist/es/main.d.ts +0 -32
- package/dist/es/main.js +0 -17
- package/dist/es/models/index.d.ts +0 -89
- package/dist/es/models/index.js +0 -1
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/es/toolbar/Toolbar.js +0 -214
- package/dist/es/toolbar/tools/ToolbarItem.js +0 -56
- package/dist/es/toolbar/tools/ToolbarSeparator.d.ts +0 -16
- package/dist/es/toolbar/tools/ToolbarSeparator.js +0 -31
- package/dist/es/toolbar/tools/ToolbarSpacer.js +0 -20
- package/dist/es/util.d.ts +0 -27
- package/dist/es/util.js +0 -37
- package/dist/npm/Button.d.ts +0 -138
- package/dist/npm/Button.js +0 -174
- package/dist/npm/ButtonGroup.js +0 -104
- package/dist/npm/ButtonGroupInterface.d.ts +0 -33
- package/dist/npm/ButtonGroupInterface.js +0 -3
- package/dist/npm/ButtonInterface.js +0 -4
- package/dist/npm/Chip/Chip.js +0 -176
- package/dist/npm/Chip/ChipList.js +0 -180
- package/dist/npm/Chip/data-reducer.js +0 -30
- package/dist/npm/Chip/focus-reducer.d.ts +0 -25
- package/dist/npm/Chip/focus-reducer.js +0 -36
- package/dist/npm/Chip/selection-reducer.js +0 -79
- package/dist/npm/FloatingActionButton/FloatingActionButton.js +0 -284
- package/dist/npm/FloatingActionButton/FloatingActionButtonItem.d.ts +0 -105
- package/dist/npm/FloatingActionButton/FloatingActionButtonItem.js +0 -85
- package/dist/npm/FloatingActionButton/interfaces/FloatingActionButtonHandle.d.ts +0 -13
- package/dist/npm/FloatingActionButton/interfaces/FloatingActionButtonHandle.js +0 -2
- package/dist/npm/FloatingActionButton/interfaces/FloatingActionButtonPopupSettings.d.ts +0 -24
- package/dist/npm/FloatingActionButton/interfaces/FloatingActionButtonPopupSettings.js +0 -2
- package/dist/npm/FloatingActionButton/interfaces/FloatingActionButtonProps.js +0 -2
- package/dist/npm/FloatingActionButton/models/align-offset.d.ts +0 -20
- package/dist/npm/FloatingActionButton/models/align-offset.js +0 -2
- package/dist/npm/FloatingActionButton/models/align.js +0 -2
- package/dist/npm/FloatingActionButton/models/events.d.ts +0 -21
- package/dist/npm/FloatingActionButton/models/events.js +0 -2
- package/dist/npm/FloatingActionButton/models/position-mode.d.ts +0 -9
- package/dist/npm/FloatingActionButton/models/position-mode.js +0 -2
- package/dist/npm/FloatingActionButton/models/rounded.d.ts +0 -12
- package/dist/npm/FloatingActionButton/models/rounded.js +0 -2
- package/dist/npm/FloatingActionButton/models/size.d.ts +0 -11
- package/dist/npm/FloatingActionButton/models/size.js +0 -2
- package/dist/npm/FloatingActionButton/models/theme-color.js +0 -2
- package/dist/npm/FloatingActionButton/utils.js +0 -101
- package/dist/npm/ListButton/ButtonItem.d.ts +0 -30
- package/dist/npm/ListButton/ButtonItem.js +0 -28
- package/dist/npm/ListButton/DropDownButton.d.ts +0 -118
- package/dist/npm/ListButton/DropDownButton.js +0 -328
- package/dist/npm/ListButton/DropDownButtonItem.js +0 -46
- package/dist/npm/ListButton/SplitButton.js +0 -337
- package/dist/npm/ListButton/SplitButtonItem.d.ts +0 -25
- package/dist/npm/ListButton/SplitButtonItem.js +0 -45
- package/dist/npm/ListButton/models/ButtonItem.js +0 -4
- package/dist/npm/ListButton/models/ListButtonProps.js +0 -3
- package/dist/npm/ListButton/models/PopupSettings.js +0 -2
- package/dist/npm/ListButton/models/events.js +0 -2
- package/dist/npm/ListButton/utils/navigation.d.ts +0 -5
- package/dist/npm/ListButton/utils/navigation.js +0 -32
- package/dist/npm/ListButton/utils/popup.d.ts +0 -9
- package/dist/npm/ListButton/utils/popup.js +0 -25
- package/dist/npm/main.d.ts +0 -32
- package/dist/npm/main.js +0 -48
- package/dist/npm/models/index.js +0 -2
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/npm/toolbar/Toolbar.d.ts +0 -171
- package/dist/npm/toolbar/Toolbar.js +0 -217
- package/dist/npm/toolbar/tools/ToolbarItem.d.ts +0 -38
- package/dist/npm/toolbar/tools/ToolbarItem.js +0 -59
- package/dist/npm/toolbar/tools/ToolbarSeparator.d.ts +0 -16
- package/dist/npm/toolbar/tools/ToolbarSeparator.js +0 -34
- package/dist/npm/toolbar/tools/ToolbarSpacer.d.ts +0 -23
- package/dist/npm/toolbar/tools/ToolbarSpacer.js +0 -23
- package/dist/npm/util.js +0 -40
- package/dist/systemjs/kendo-react-buttons.js +0 -1
- package/e2e-next/button.basic.tests.ts +0 -24
- package/e2e-next/buttongroup.basic.tests.ts +0 -24
- package/e2e-next/chip.basic.tests.ts +0 -24
- package/e2e-next/chiplist.basic.tests.ts +0 -24
- package/e2e-next/dropdownbutton.basic.tests.ts +0 -24
- package/e2e-next/floatingactionbutton.basic.tests.ts +0 -24
- package/e2e-next/splitbutton.basic.tests.ts +0 -24
- package/e2e-next/toolbar.basic.tests.ts +0 -24
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { SVGIcon } from '@progress/kendo-react-common';
|
|
3
|
-
/**
|
|
4
|
-
* The FloatingActionButtonItemHandle ref.
|
|
5
|
-
*/
|
|
6
|
-
export interface FloatingActionButtonItemHandle {
|
|
7
|
-
/**
|
|
8
|
-
* The FloatingActionButtonItemHandle element.
|
|
9
|
-
*/
|
|
10
|
-
element: HTMLLIElement | null;
|
|
11
|
-
/**
|
|
12
|
-
* Focus the FloatingActionButtonItem.
|
|
13
|
-
*/
|
|
14
|
-
focus: () => void;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* Represents the props of the [KendoReact FloatingActionButtonItem component]({% slug overview_floatingactionbutton %}).
|
|
18
|
-
*/
|
|
19
|
-
export interface FloatingActionButtonItemProps {
|
|
20
|
-
/**
|
|
21
|
-
* Sets additional CSS styles to the FloatingActionButtonItem.
|
|
22
|
-
*/
|
|
23
|
-
style?: React.CSSProperties;
|
|
24
|
-
/**
|
|
25
|
-
* Specifies a list of CSS classes that will be added to the FloatingActionButtonItem.
|
|
26
|
-
*/
|
|
27
|
-
className?: string;
|
|
28
|
-
/**
|
|
29
|
-
* Represents the children that are passed to the FloatingActionButtonItem.
|
|
30
|
-
*/
|
|
31
|
-
children?: any;
|
|
32
|
-
/**
|
|
33
|
-
* Specifies if the Floating Action Button Item is disabled [see example]({% slug disabled_floatingactionbuttonitem %}).
|
|
34
|
-
* Defaults to `false`.
|
|
35
|
-
*/
|
|
36
|
-
disabled?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Sets the index of the Floating Action Button Item that is used to identify it.
|
|
39
|
-
*/
|
|
40
|
-
index?: number;
|
|
41
|
-
/**
|
|
42
|
-
* Defines the icon rendered in the FloatingActionButtonItem
|
|
43
|
-
* [see example]({% slug databinding_floatingactionbutton %}).
|
|
44
|
-
*/
|
|
45
|
-
icon?: string;
|
|
46
|
-
/**
|
|
47
|
-
* Defines the SVG icon rendered in the FloatingActionButtonItem.
|
|
48
|
-
*/
|
|
49
|
-
svgIcon?: SVGIcon;
|
|
50
|
-
/**
|
|
51
|
-
* Specifies the text of the FloatingActionButtonItem
|
|
52
|
-
* [see example]({% slug databinding_floatingactionbutton %}).
|
|
53
|
-
*/
|
|
54
|
-
text?: string;
|
|
55
|
-
/**
|
|
56
|
-
* Sets the `tabIndex` property of the FloatingActionButtonItem..
|
|
57
|
-
* Defaults to `0`.
|
|
58
|
-
*/
|
|
59
|
-
tabIndex?: number;
|
|
60
|
-
/**
|
|
61
|
-
* Sets a custom property. Contained in the FloatingActionButtonItem props that are
|
|
62
|
-
* returned from the `onItemClick` FloatingActionButton event
|
|
63
|
-
* [see example]({% slug customization_floatingactionbutton %}#toc-items-rendering).
|
|
64
|
-
*/
|
|
65
|
-
[customProp: string]: any;
|
|
66
|
-
/**
|
|
67
|
-
* @hidden
|
|
68
|
-
*/
|
|
69
|
-
id?: string;
|
|
70
|
-
/**
|
|
71
|
-
* @hidden
|
|
72
|
-
*/
|
|
73
|
-
dataItem?: any;
|
|
74
|
-
/**
|
|
75
|
-
* @hidden
|
|
76
|
-
*/
|
|
77
|
-
item?: any;
|
|
78
|
-
/**
|
|
79
|
-
* @hidden
|
|
80
|
-
*/
|
|
81
|
-
focused?: boolean;
|
|
82
|
-
/**
|
|
83
|
-
* @hidden
|
|
84
|
-
*/
|
|
85
|
-
onDown?: (event: any) => void;
|
|
86
|
-
/**
|
|
87
|
-
* @hidden
|
|
88
|
-
*/
|
|
89
|
-
onClick?: (event: any, index: number) => void;
|
|
90
|
-
}
|
|
91
|
-
/**
|
|
92
|
-
* Represents the [KendoReact FloatingActionButtonItem component]({% slug overview_floatingactionbutton %}).
|
|
93
|
-
*
|
|
94
|
-
* @example
|
|
95
|
-
* ```jsx
|
|
96
|
-
*
|
|
97
|
-
* const App = () => {
|
|
98
|
-
* return (
|
|
99
|
-
* <FloatingActionButton items={[{icon: 'pencil', text: 'Edit'}, {icon: 'close', text: 'Remove'}] icon: 'plus'} />
|
|
100
|
-
* );
|
|
101
|
-
* };
|
|
102
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
103
|
-
* ```
|
|
104
|
-
*/
|
|
105
|
-
export declare const FloatingActionButtonItem: React.ForwardRefExoticComponent<Omit<FloatingActionButtonItemProps, "ref"> & React.RefAttributes<FloatingActionButtonItemHandle | null>>;
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.FloatingActionButtonItem = void 0;
|
|
26
|
-
var React = require("react");
|
|
27
|
-
var PropTypes = require("prop-types");
|
|
28
|
-
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
29
|
-
/**
|
|
30
|
-
* Represents the [KendoReact FloatingActionButtonItem component]({% slug overview_floatingactionbutton %}).
|
|
31
|
-
*
|
|
32
|
-
* @example
|
|
33
|
-
* ```jsx
|
|
34
|
-
*
|
|
35
|
-
* const App = () => {
|
|
36
|
-
* return (
|
|
37
|
-
* <FloatingActionButton items={[{icon: 'pencil', text: 'Edit'}, {icon: 'close', text: 'Remove'}] icon: 'plus'} />
|
|
38
|
-
* );
|
|
39
|
-
* };
|
|
40
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
41
|
-
* ```
|
|
42
|
-
*/
|
|
43
|
-
exports.FloatingActionButtonItem = React.forwardRef(function (props, ref) {
|
|
44
|
-
var className = props.className, disabled = props.disabled, text = props.text, icon = props.icon, style = props.style, id = props.id, focused = props.focused, tabIndex = props.tabIndex, index = props.index, dataItem = props.dataItem, item = props.item, svgIcon = props.svgIcon, onDown = props.onDown, onClick = props.onClick, others = __rest(props, ["className", "disabled", "text", "icon", "style", "id", "focused", "tabIndex", "index", "dataItem", "item", "svgIcon", "onDown", "onClick"]);
|
|
45
|
-
var elementRef = React.useRef(null);
|
|
46
|
-
var focusElement = React.useCallback(function () {
|
|
47
|
-
if (elementRef.current) {
|
|
48
|
-
elementRef.current.focus();
|
|
49
|
-
}
|
|
50
|
-
}, []);
|
|
51
|
-
var getImperativeHandle = React.useCallback(function () { return ({
|
|
52
|
-
element: elementRef.current,
|
|
53
|
-
focus: focusElement
|
|
54
|
-
}); }, [focusElement]);
|
|
55
|
-
React.useImperativeHandle(ref, getImperativeHandle);
|
|
56
|
-
var handleClick = React.useCallback(function (event) {
|
|
57
|
-
if (onClick && index !== undefined && !disabled) {
|
|
58
|
-
onClick(event, index);
|
|
59
|
-
}
|
|
60
|
-
}, [onClick, index]);
|
|
61
|
-
var itemClassNames = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-fab-item', {
|
|
62
|
-
'k-focus': focused,
|
|
63
|
-
'k-disabled': disabled
|
|
64
|
-
}, className); }, [className, disabled, focused]);
|
|
65
|
-
var ItemComp = item;
|
|
66
|
-
return (React.createElement("li", __assign({ ref: elementRef, id: id, className: itemClassNames, style: style, role: 'menuitem', tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), "aria-disabled": disabled, "aria-label": "".concat(text || '', " floatingactionbutton item"), onClick: handleClick, onMouseDown: onDown, onPointerDown: onDown }, others), ItemComp ?
|
|
67
|
-
React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
|
|
68
|
-
(React.createElement(React.Fragment, null,
|
|
69
|
-
text && React.createElement("span", { className: "k-fab-item-text" }, text),
|
|
70
|
-
(icon || svgIcon) ? React.createElement(kendo_react_common_1.IconWrap, { className: "k-fab-item-icon", name: icon, icon: svgIcon }) : null))));
|
|
71
|
-
});
|
|
72
|
-
exports.FloatingActionButtonItem.propTypes = {
|
|
73
|
-
className: PropTypes.string,
|
|
74
|
-
style: PropTypes.object,
|
|
75
|
-
children: PropTypes.any,
|
|
76
|
-
disabled: PropTypes.bool,
|
|
77
|
-
focused: PropTypes.bool,
|
|
78
|
-
index: PropTypes.number,
|
|
79
|
-
icon: PropTypes.string,
|
|
80
|
-
svgIcon: kendo_react_common_1.svgIconPropType,
|
|
81
|
-
text: PropTypes.string,
|
|
82
|
-
tabIndex: PropTypes.number,
|
|
83
|
-
customProp: PropTypes.any
|
|
84
|
-
};
|
|
85
|
-
exports.FloatingActionButtonItem.displayName = 'KendoFloatingActionButtonItem';
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { Align, PopupAnimation } from '@progress/kendo-react-popup';
|
|
2
|
-
/**
|
|
3
|
-
* Represents the settings that can be passed to the Popup inside the FloatingActionButtonPopupSettings.
|
|
4
|
-
*/
|
|
5
|
-
export interface FloatingActionButtonPopupSettings {
|
|
6
|
-
/**
|
|
7
|
-
* Controls the popup animation. By default, the open and close animations are enabled
|
|
8
|
-
* [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
|
|
9
|
-
*/
|
|
10
|
-
animate?: boolean | PopupAnimation;
|
|
11
|
-
/**
|
|
12
|
-
* Specifies a list of CSS classes that are used for styling the popup
|
|
13
|
-
* [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
|
|
14
|
-
*/
|
|
15
|
-
popupClass?: string;
|
|
16
|
-
/**
|
|
17
|
-
* @hidden
|
|
18
|
-
*/
|
|
19
|
-
anchorAlign?: Align;
|
|
20
|
-
/**
|
|
21
|
-
* @hidden
|
|
22
|
-
*/
|
|
23
|
-
popupAlign?: Align;
|
|
24
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Specifies the horizontal and vertical offset applied to the Floating Action Button.
|
|
3
|
-
*
|
|
4
|
-
* Normally, the floating button is positioned next to the boundaries of its container with a default offset of `16px`.
|
|
5
|
-
*
|
|
6
|
-
* Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
|
|
7
|
-
* not in a corner, can be moved along the container's boundary or towards the center of the container.
|
|
8
|
-
*
|
|
9
|
-
* A negative offset can be used to force a button to overflow the boundaries of its container.
|
|
10
|
-
*/
|
|
11
|
-
export interface FloatingActionButtonAlignOffset {
|
|
12
|
-
/**
|
|
13
|
-
* Sets the horizontal offset of the Floating Action Button.
|
|
14
|
-
*/
|
|
15
|
-
x?: number | string;
|
|
16
|
-
/**
|
|
17
|
-
* Sets the vertical offset of the Floating Action Button.
|
|
18
|
-
*/
|
|
19
|
-
y?: number | string;
|
|
20
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { BaseEvent } from '@progress/kendo-react-common';
|
|
2
|
-
import { FloatingActionButtonItemProps } from '../../main';
|
|
3
|
-
import { FloatingActionButtonHandle } from '../interfaces/FloatingActionButtonHandle';
|
|
4
|
-
/**
|
|
5
|
-
* Represents the return type of the FloatingActionButton events.
|
|
6
|
-
*/
|
|
7
|
-
export interface FloatingActionButtonEvent extends BaseEvent<FloatingActionButtonHandle> {
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* Represents the return type of the FloatingActionButtonItemEvent.
|
|
11
|
-
*/
|
|
12
|
-
export interface FloatingActionButtonItemEvent extends BaseEvent<FloatingActionButtonHandle> {
|
|
13
|
-
/**
|
|
14
|
-
* The clicked item props.
|
|
15
|
-
*/
|
|
16
|
-
itemProps?: FloatingActionButtonItemProps;
|
|
17
|
-
/**
|
|
18
|
-
* The zero-based index of the clicked item.
|
|
19
|
-
*/
|
|
20
|
-
itemIndex: number;
|
|
21
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Specifies the position mode of the Floating Action Button. It is based on the
|
|
3
|
-
* [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
|
|
4
|
-
*
|
|
5
|
-
* * The possible values are:
|
|
6
|
-
* * 'absolute' (Default)
|
|
7
|
-
* * 'fixed'
|
|
8
|
-
*/
|
|
9
|
-
export declare type FloatingActionButtonPositionMode = 'absolute' | 'fixed';
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Specifies the rounding of the Floating Action Button.
|
|
3
|
-
*
|
|
4
|
-
* The possible values are:
|
|
5
|
-
* * `small`
|
|
6
|
-
* * `medium`
|
|
7
|
-
* * `large`
|
|
8
|
-
* * `full`
|
|
9
|
-
* * `null`—Does not set a rounded `className`.
|
|
10
|
-
*
|
|
11
|
-
*/
|
|
12
|
-
export declare type FloatingActionButtonRounded = null | 'small' | 'medium' | 'large' | 'full';
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Specifies the size of the Floating Action Button.
|
|
3
|
-
*
|
|
4
|
-
* The possible values are:
|
|
5
|
-
* * `small`—Applies half of the default padding, e.g. `8px`.
|
|
6
|
-
* * `medium` (Default)—Applies the default padding, e.g. `16px`.
|
|
7
|
-
* * `large`—Applies one and one half of the default padding, e.g. `24px`.
|
|
8
|
-
* * `null`—Does not set a size `className`.
|
|
9
|
-
*
|
|
10
|
-
*/
|
|
11
|
-
export declare type FloatingActionButtonSize = null | 'small' | 'medium' | 'large';
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.position = exports.getTextDirectionClass = exports.getPopupAlign = exports.getAnchorAlign = exports.toStringValues = exports.DEFAULT_OFFSET = void 0;
|
|
4
|
-
/**
|
|
5
|
-
* @hidden
|
|
6
|
-
*/
|
|
7
|
-
exports.DEFAULT_OFFSET = '16px';
|
|
8
|
-
/**
|
|
9
|
-
* @hidden
|
|
10
|
-
*/
|
|
11
|
-
var toStringValues = function (val) {
|
|
12
|
-
if (typeof val === 'number') {
|
|
13
|
-
return val + 'px';
|
|
14
|
-
}
|
|
15
|
-
return val;
|
|
16
|
-
};
|
|
17
|
-
exports.toStringValues = toStringValues;
|
|
18
|
-
/**
|
|
19
|
-
* @hidden
|
|
20
|
-
*/
|
|
21
|
-
var getAnchorAlign = function (fabAlign, rtl) {
|
|
22
|
-
var align = { horizontal: (rtl ? 'right' : 'left'), vertical: 'bottom' };
|
|
23
|
-
if (fabAlign.horizontal === 'end') {
|
|
24
|
-
align.horizontal = rtl ? 'left' : 'right';
|
|
25
|
-
}
|
|
26
|
-
return align;
|
|
27
|
-
};
|
|
28
|
-
exports.getAnchorAlign = getAnchorAlign;
|
|
29
|
-
/**
|
|
30
|
-
* @hidden
|
|
31
|
-
*/
|
|
32
|
-
var getPopupAlign = function (fabAlign, rtl) {
|
|
33
|
-
var align = { horizontal: (rtl ? 'right' : 'left'), vertical: 'top' };
|
|
34
|
-
if (fabAlign.horizontal === 'end') {
|
|
35
|
-
align.horizontal = rtl ? 'left' : 'right';
|
|
36
|
-
}
|
|
37
|
-
return align;
|
|
38
|
-
};
|
|
39
|
-
exports.getPopupAlign = getPopupAlign;
|
|
40
|
-
/**
|
|
41
|
-
* @hidden
|
|
42
|
-
*/
|
|
43
|
-
var getTextDirectionClass = function (rtl, hAlign) {
|
|
44
|
-
var al = hAlign === 'end' ? 'end' : 'start';
|
|
45
|
-
var directions = {
|
|
46
|
-
rtl: { end: 'k-text-left', start: 'k-text-right' },
|
|
47
|
-
ltr: { start: 'k-text-left', end: 'k-text-right' }
|
|
48
|
-
};
|
|
49
|
-
return directions[rtl][al];
|
|
50
|
-
};
|
|
51
|
-
exports.getTextDirectionClass = getTextDirectionClass;
|
|
52
|
-
/**
|
|
53
|
-
* @hidden
|
|
54
|
-
*/
|
|
55
|
-
var position = function (ref, align, alignOffset, isRtl) {
|
|
56
|
-
var horizontal = align.horizontal;
|
|
57
|
-
var vertical = align.vertical;
|
|
58
|
-
if (ref.current) {
|
|
59
|
-
var xFab = alignOffset && alignOffset.x !== undefined ?
|
|
60
|
-
(0, exports.toStringValues)(alignOffset.x) :
|
|
61
|
-
exports.DEFAULT_OFFSET;
|
|
62
|
-
var xCenterFab = alignOffset && alignOffset.x !== undefined ?
|
|
63
|
-
"calc(50% + ".concat((0, exports.toStringValues)(alignOffset.x), ")") :
|
|
64
|
-
'50%';
|
|
65
|
-
var yFab = alignOffset && alignOffset.y !== undefined ?
|
|
66
|
-
(0, exports.toStringValues)(alignOffset.y) :
|
|
67
|
-
exports.DEFAULT_OFFSET;
|
|
68
|
-
var yCenterFab = alignOffset && alignOffset.y !== undefined ?
|
|
69
|
-
"calc(50% + ".concat((0, exports.toStringValues)(alignOffset.y), ")") :
|
|
70
|
-
'50%';
|
|
71
|
-
ref.current.style.setProperty(horizontalPosition(align, isRtl), horizontal === 'center' ? xCenterFab : xFab);
|
|
72
|
-
ref.current.style.setProperty(verticalPosition(align), vertical === 'middle' ? yCenterFab : yFab);
|
|
73
|
-
if (isRtl) {
|
|
74
|
-
if ((vertical === 'top' || vertical === 'bottom') && horizontal === 'start') {
|
|
75
|
-
ref.current.style.setProperty('left', 'unset');
|
|
76
|
-
}
|
|
77
|
-
if (vertical === 'middle' && horizontal === 'end') {
|
|
78
|
-
ref.current.style.setProperty('right', 'unset');
|
|
79
|
-
}
|
|
80
|
-
if (vertical === 'middle' && horizontal === 'start') {
|
|
81
|
-
ref.current.style.setProperty('left', 'unset');
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
exports.position = position;
|
|
87
|
-
var horizontalPosition = function (align, isRtl) {
|
|
88
|
-
var horizontal = align.horizontal;
|
|
89
|
-
return {
|
|
90
|
-
end: isRtl ? 'left' : 'right',
|
|
91
|
-
center: 'left',
|
|
92
|
-
start: isRtl ? 'right' : 'left'
|
|
93
|
-
}[horizontal || 'end'];
|
|
94
|
-
};
|
|
95
|
-
var verticalPosition = function (align) {
|
|
96
|
-
return {
|
|
97
|
-
top: 'top',
|
|
98
|
-
middle: 'top',
|
|
99
|
-
bottom: 'bottom'
|
|
100
|
-
}[align.vertical || 'bottom'];
|
|
101
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* The props of the ButtonItem component.
|
|
4
|
-
* The ButtonItem component renders each list item in the dropdown buttons list.
|
|
5
|
-
*/
|
|
6
|
-
export interface ButtonItemProps {
|
|
7
|
-
focused?: boolean;
|
|
8
|
-
index?: number;
|
|
9
|
-
onClick: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, index?: number) => void;
|
|
10
|
-
onDown?: (event: React.PointerEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
|
|
11
|
-
item?: null | React.ComponentType<{
|
|
12
|
-
item: any;
|
|
13
|
-
itemIndex: number;
|
|
14
|
-
}>;
|
|
15
|
-
render?: ((li: React.ReactElement<HTMLLIElement>, props: ButtonItemProps) => React.ReactNode) | React.ComponentType<{
|
|
16
|
-
item: any;
|
|
17
|
-
itemIndex: number;
|
|
18
|
-
}>;
|
|
19
|
-
dataItem: any;
|
|
20
|
-
id?: string;
|
|
21
|
-
textField?: string;
|
|
22
|
-
className?: string;
|
|
23
|
-
}
|
|
24
|
-
/**
|
|
25
|
-
* @hidden
|
|
26
|
-
*/
|
|
27
|
-
export declare const ButtonItem: {
|
|
28
|
-
(props: ButtonItemProps): any;
|
|
29
|
-
displayName: string;
|
|
30
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ButtonItem = void 0;
|
|
4
|
-
var React = require("react");
|
|
5
|
-
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
6
|
-
/**
|
|
7
|
-
* @hidden
|
|
8
|
-
*/
|
|
9
|
-
var ButtonItem = function (props) {
|
|
10
|
-
var handleClick = React.useCallback(function (event) {
|
|
11
|
-
props.onClick(event, props.index);
|
|
12
|
-
}, [props]);
|
|
13
|
-
var As = props.dataItem.render || props.item || (props.item === undefined ? props.render : null);
|
|
14
|
-
var text = props.dataItem.text !== undefined ? props.dataItem.text : (props.textField ? props.dataItem[props.textField] : props.dataItem);
|
|
15
|
-
var item = (React.createElement("li", { id: props.id, className: (0, kendo_react_common_1.classNames)('k-item', props.className, { 'k-focus': props.focused }), tabIndex: -1, onClick: handleClick, onMouseDown: props.onDown, onPointerDown: props.onDown, role: "menuitem", "aria-disabled": props.dataItem.disabled || undefined }, (React.createElement("span", { tabIndex: -1, className: (0, kendo_react_common_1.classNames)('k-link k-menu-link', {
|
|
16
|
-
'k-selected': props.dataItem.selected,
|
|
17
|
-
'k-disabled': props.dataItem.disabled
|
|
18
|
-
}), key: "icon" }, As
|
|
19
|
-
? (React.createElement(As, { item: props.dataItem, itemIndex: props.index }))
|
|
20
|
-
: (React.createElement(React.Fragment, null,
|
|
21
|
-
(props.dataItem.icon || props.dataItem.iconClass) && (React.createElement(kendo_react_common_1.IconWrap, { className: props.dataItem.iconClass, name: props.dataItem.icon, icon: props.dataItem.svgIcon })),
|
|
22
|
-
(props.dataItem.imageUrl) && (React.createElement("img", { role: "presentation", alt: "", src: props.dataItem.imageUrl, className: 'k-icon' })),
|
|
23
|
-
(text) && (React.createElement("span", { className: "k-menu-link-text" }, text))))))));
|
|
24
|
-
return ((props.item !== undefined && /* to be removed in 5.0.0 */
|
|
25
|
-
props.render !== undefined) ? props.render.call(undefined, item, props) : item);
|
|
26
|
-
};
|
|
27
|
-
exports.ButtonItem = ButtonItem;
|
|
28
|
-
exports.ButtonItem.displayName = 'KendoReactButtonItem';
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import * as PropTypes from 'prop-types';
|
|
3
|
-
import { DropDownButtonProps } from './models/ListButtonProps';
|
|
4
|
-
/**
|
|
5
|
-
* @hidden
|
|
6
|
-
*/
|
|
7
|
-
export interface DropDownButtonState {
|
|
8
|
-
focusedIndex?: number;
|
|
9
|
-
focused?: boolean;
|
|
10
|
-
opened: boolean;
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* Represents the [KendoReact DropDownButton component]({% slug overview_dropdownbutton %}).
|
|
14
|
-
*
|
|
15
|
-
* @example
|
|
16
|
-
* ```jsx
|
|
17
|
-
* class App extends React.Component {
|
|
18
|
-
* render() {
|
|
19
|
-
* return (
|
|
20
|
-
* <DropDownButton text="Act">
|
|
21
|
-
* <DropDownButtonItem text="Item1" />
|
|
22
|
-
* <DropDownButtonItem text="Item2" />
|
|
23
|
-
* <DropDownButtonItem text="Item3" />
|
|
24
|
-
* </DropDownButton>
|
|
25
|
-
* );
|
|
26
|
-
* }
|
|
27
|
-
* }
|
|
28
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
export declare class DropDownButton extends React.Component<DropDownButtonProps, DropDownButtonState> {
|
|
32
|
-
/**
|
|
33
|
-
* @hidden
|
|
34
|
-
*/
|
|
35
|
-
static propTypes: {
|
|
36
|
-
accessKey: PropTypes.Requireable<string>;
|
|
37
|
-
ariaLabel: PropTypes.Requireable<string>;
|
|
38
|
-
title: PropTypes.Requireable<string>;
|
|
39
|
-
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
40
|
-
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
41
|
-
onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
42
|
-
onOpen: PropTypes.Requireable<(...args: any[]) => any>;
|
|
43
|
-
onClose: PropTypes.Requireable<(...args: any[]) => any>;
|
|
44
|
-
items: PropTypes.Requireable<any[]>;
|
|
45
|
-
textField: PropTypes.Requireable<string>;
|
|
46
|
-
tabIndex: PropTypes.Requireable<number>;
|
|
47
|
-
disabled: PropTypes.Requireable<boolean>;
|
|
48
|
-
icon: PropTypes.Requireable<string>;
|
|
49
|
-
svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
|
|
50
|
-
name: PropTypes.Validator<string>;
|
|
51
|
-
content: PropTypes.Validator<string>;
|
|
52
|
-
viewBox: PropTypes.Validator<string>;
|
|
53
|
-
}>>;
|
|
54
|
-
iconClass: PropTypes.Requireable<string>;
|
|
55
|
-
imageUrl: PropTypes.Requireable<string>;
|
|
56
|
-
popupSettings: PropTypes.Requireable<object>;
|
|
57
|
-
itemRender: PropTypes.Requireable<(...args: any[]) => any>;
|
|
58
|
-
item: PropTypes.Requireable<(...args: any[]) => any>;
|
|
59
|
-
className: PropTypes.Requireable<string>;
|
|
60
|
-
buttonClass: PropTypes.Requireable<string>;
|
|
61
|
-
dir: PropTypes.Requireable<string>;
|
|
62
|
-
};
|
|
63
|
-
/**
|
|
64
|
-
* @hidden
|
|
65
|
-
*/
|
|
66
|
-
static defaultProps: {
|
|
67
|
-
size: string;
|
|
68
|
-
rounded: string;
|
|
69
|
-
fillMode: string;
|
|
70
|
-
themeColor: string;
|
|
71
|
-
};
|
|
72
|
-
/**
|
|
73
|
-
* @hidden
|
|
74
|
-
*/
|
|
75
|
-
readonly state: {
|
|
76
|
-
opened: boolean;
|
|
77
|
-
focused: boolean;
|
|
78
|
-
focusedIndex: number;
|
|
79
|
-
};
|
|
80
|
-
private wrapper;
|
|
81
|
-
private mainButton;
|
|
82
|
-
private list;
|
|
83
|
-
private skipFocus;
|
|
84
|
-
private guid;
|
|
85
|
-
private buttonsData;
|
|
86
|
-
private openedDuringOnChange?;
|
|
87
|
-
constructor(props: DropDownButtonProps);
|
|
88
|
-
private get opened();
|
|
89
|
-
/**
|
|
90
|
-
* @hidden
|
|
91
|
-
*/
|
|
92
|
-
render(): JSX.Element;
|
|
93
|
-
/**
|
|
94
|
-
* @hidden
|
|
95
|
-
*/
|
|
96
|
-
componentDidMount(): void;
|
|
97
|
-
/**
|
|
98
|
-
* The DOM element of main button.
|
|
99
|
-
*/
|
|
100
|
-
get element(): HTMLButtonElement | null;
|
|
101
|
-
private onKeyDown;
|
|
102
|
-
private switchFocus;
|
|
103
|
-
private handleFocus;
|
|
104
|
-
private handleBlur;
|
|
105
|
-
private setOpen;
|
|
106
|
-
private onItemClick;
|
|
107
|
-
private onItemDown;
|
|
108
|
-
private mouseDown;
|
|
109
|
-
private dispatchClickEvent;
|
|
110
|
-
private renderPopup;
|
|
111
|
-
private onPopupClose;
|
|
112
|
-
private listRef;
|
|
113
|
-
private renderChildItems;
|
|
114
|
-
private onClickMainButton;
|
|
115
|
-
private dispatchPopupEvent;
|
|
116
|
-
private isItemDisabled;
|
|
117
|
-
private isRtl;
|
|
118
|
-
}
|