superdesk-ui-framework 3.0.1-beta.11 → 3.0.1-beta.13
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/app/styles/_modals.scss +3 -3
- package/app/styles/_table-list.scss +100 -11
- package/app/styles/grids/_grid-layout.scss +3 -0
- package/app-typescript/components/Dropdown.tsx +78 -37
- package/app-typescript/components/DurationInput.tsx +7 -1
- package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +7 -1
- package/app-typescript/components/Lists/TableList.tsx +138 -25
- package/app-typescript/components/SearchBar.tsx +11 -3
- package/app-typescript/components/TimePicker.tsx +2 -13
- package/dist/examples.bundle.js +361 -123
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
- package/dist/react/Dropdowns.tsx +227 -47
- package/dist/react/TableList.tsx +15 -119
- package/dist/superdesk-ui.bundle.css +84 -16
- package/dist/superdesk-ui.bundle.js +153 -56
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
- package/examples/pages/react/Dropdowns.tsx +227 -47
- package/examples/pages/react/TableList.tsx +15 -119
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +2 -1
- package/react/components/Dropdown.js +39 -20
- package/react/components/DurationInput.js +9 -1
- package/react/components/Layouts/CoreLayout.d.ts +1 -0
- package/react/components/Layouts/CoreLayout.js +1 -1
- package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
- package/react/components/Layouts/CoreLayoutMain.js +8 -1
- package/react/components/Lists/TableList.d.ts +22 -6
- package/react/components/Lists/TableList.js +78 -19
- package/react/components/SearchBar.d.ts +1 -1
- package/react/components/SearchBar.js +15 -7
- package/react/components/TimePicker.d.ts +1 -5
- package/react/components/TimePicker.js +3 -7
- package/.vscode/settings.json +0 -5
- package/app-typescript/dist/components/Alert.d.ts +0 -16
- package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
- package/app-typescript/dist/components/Avatar.d.ts +0 -33
- package/app-typescript/dist/components/Badge.d.ts +0 -13
- package/app-typescript/dist/components/Button.d.ts +0 -23
- package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
- package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
- package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
- package/app-typescript/dist/components/Checkbox.d.ts +0 -19
- package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
- package/app-typescript/dist/components/DatePicker.d.ts +0 -37
- package/app-typescript/dist/components/Divider.d.ts +0 -9
- package/app-typescript/dist/components/DonutChart.d.ts +0 -12
- package/app-typescript/dist/components/Dropdown.d.ts +0 -28
- package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
- package/app-typescript/dist/components/EmptyState.d.ts +0 -11
- package/app-typescript/dist/components/FormLabel.d.ts +0 -9
- package/app-typescript/dist/components/Genie.d.ts +0 -13
- package/app-typescript/dist/components/GridItem.d.ts +0 -69
- package/app-typescript/dist/components/GridList.d.ts +0 -14
- package/app-typescript/dist/components/HeadingText.d.ts +0 -10
- package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
- package/app-typescript/dist/components/Icon.d.ts +0 -12
- package/app-typescript/dist/components/IconButton.d.ts +0 -12
- package/app-typescript/dist/components/IconLabel.d.ts +0 -11
- package/app-typescript/dist/components/Input.d.ts +0 -24
- package/app-typescript/dist/components/Label.d.ts +0 -15
- package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
- package/app-typescript/dist/components/Loader.d.ts +0 -8
- package/app-typescript/dist/components/NavButton.d.ts +0 -15
- package/app-typescript/dist/components/Popover.d.ts +0 -13
- package/app-typescript/dist/components/PropsList.d.ts +0 -15
- package/app-typescript/dist/components/Radio.d.ts +0 -19
- package/app-typescript/dist/components/RadioButton.d.ts +0 -20
- package/app-typescript/dist/components/Select.d.ts +0 -29
- package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
- package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
- package/app-typescript/dist/components/StrechBar.d.ts +0 -4
- package/app-typescript/dist/components/SubNav.d.ts +0 -10
- package/app-typescript/dist/components/Switch.d.ts +0 -12
- package/app-typescript/dist/components/TabCustom.d.ts +0 -25
- package/app-typescript/dist/components/TabList.d.ts +0 -22
- package/app-typescript/dist/components/Tag.d.ts +0 -9
- package/app-typescript/dist/components/TagInput.d.ts +0 -7
- package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
- package/app-typescript/dist/components/TimePicker.d.ts +0 -11
- package/app-typescript/dist/components/Tooltip.d.ts +0 -11
- package/app-typescript/dist/components/_Positioner.d.ts +0 -27
- package/app-typescript/dist/index.d.ts +0 -56
- package/yarn-error.log +0 -111
@@ -46,7 +46,7 @@ var CoreLayout = /** @class */ (function (_super) {
|
|
46
46
|
return (React.createElement(_1.CoreLayoutContainer, null,
|
47
47
|
this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
|
48
48
|
this.props.topMenu && (React.createElement(_1.CoreLayoutTopMenu, { buttonAnimation: this.props.buttonAnimation, heading: this.props.heading, onClick: this.props.onClick, active: this.props.active, ariaControls: this.props.ariaControls }, this.props.topMenu)),
|
49
|
-
React.createElement(_1.CoreLayoutMain,
|
49
|
+
React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
|
50
50
|
this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
|
51
51
|
this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
|
52
52
|
};
|
@@ -33,16 +33,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
33
33
|
__setModuleDefault(result, mod);
|
34
34
|
return result;
|
35
35
|
};
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
38
|
+
};
|
36
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
37
40
|
exports.CoreLayoutMain = void 0;
|
38
41
|
var React = __importStar(require("react"));
|
42
|
+
var classnames_1 = __importDefault(require("classnames"));
|
39
43
|
var CoreLayoutMain = /** @class */ (function (_super) {
|
40
44
|
__extends(CoreLayoutMain, _super);
|
41
45
|
function CoreLayoutMain() {
|
42
46
|
return _super !== null && _super.apply(this, arguments) || this;
|
43
47
|
}
|
44
48
|
CoreLayoutMain.prototype.render = function () {
|
45
|
-
|
49
|
+
var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
|
50
|
+
'sd-content-wrapper--editor-full': this.props.editorFullWidth,
|
51
|
+
});
|
52
|
+
return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
|
46
53
|
};
|
47
54
|
return CoreLayoutMain;
|
48
55
|
}(React.PureComponent));
|
@@ -2,13 +2,15 @@ import * as React from 'react';
|
|
2
2
|
import { DropResult } from "react-beautiful-dnd";
|
3
3
|
import { IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
|
4
4
|
export interface IProps {
|
5
|
-
children?: React.ReactNode;
|
6
5
|
array: Array<IPropsArrayItem>;
|
7
6
|
addItem?: boolean;
|
8
7
|
dragAndDrop?: boolean;
|
9
8
|
itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
10
9
|
className?: string;
|
10
|
+
readOnly?: boolean;
|
11
|
+
showDragHandle?: 'always' | 'onHover' | 'none';
|
11
12
|
onDrag?(start: number, end: number): void;
|
13
|
+
onAddItem?(index: number, item?: IPropsArrayItem): void;
|
12
14
|
}
|
13
15
|
export interface IPropsArrayItem {
|
14
16
|
start?: React.ReactNode;
|
@@ -16,15 +18,19 @@ export interface IPropsArrayItem {
|
|
16
18
|
end?: React.ReactNode;
|
17
19
|
action?: React.ReactNode;
|
18
20
|
onClick?(): void;
|
21
|
+
onDoubleClick?(): void;
|
22
|
+
hexColor?: string;
|
19
23
|
}
|
20
|
-
|
24
|
+
interface IState {
|
21
25
|
items: Array<IPropsArrayItem>;
|
22
|
-
}
|
23
|
-
|
26
|
+
}
|
27
|
+
declare class TableList extends React.PureComponent<IProps, IState> {
|
28
|
+
constructor(props: IProps);
|
24
29
|
componentDidMount(): void;
|
25
|
-
componentDidUpdate(prevProps:
|
30
|
+
componentDidUpdate(prevProps: IProps): void;
|
26
31
|
onDragEnd(result: DropResult): void | null;
|
27
|
-
|
32
|
+
dropDown(): JSX.Element;
|
33
|
+
render(): JSX.Element | null;
|
28
34
|
}
|
29
35
|
export interface IPropsItem {
|
30
36
|
start?: React.ReactNode;
|
@@ -35,8 +41,18 @@ export interface IPropsItem {
|
|
35
41
|
itemsDropdown?: any;
|
36
42
|
dragAndDrop?: boolean;
|
37
43
|
onClick?(): void;
|
44
|
+
onDoubleClick?(): void;
|
45
|
+
onSelect?(): void;
|
46
|
+
onAddItem?(e: number): void;
|
47
|
+
hexColor?: string;
|
48
|
+
showDragHandle?: 'always' | 'onHover' | 'none';
|
38
49
|
}
|
39
50
|
declare class TableListItem extends React.PureComponent<IPropsItem> {
|
51
|
+
private timer;
|
52
|
+
private delay;
|
53
|
+
private prevent;
|
54
|
+
onSingleClick: () => void;
|
55
|
+
onDoubleClick: () => void;
|
40
56
|
render(): JSX.Element;
|
41
57
|
}
|
42
58
|
export { TableList, TableListItem };
|
@@ -69,16 +69,21 @@ var TableList = /** @class */ (function (_super) {
|
|
69
69
|
items: [],
|
70
70
|
};
|
71
71
|
_this.onDragEnd = _this.onDragEnd.bind(_this);
|
72
|
+
_this.dropDown = _this.dropDown.bind(_this);
|
72
73
|
return _this;
|
73
74
|
}
|
74
75
|
TableList.prototype.componentDidMount = function () {
|
75
|
-
|
76
|
+
if (this.props.array) {
|
77
|
+
this.setState({ items: this.props.array });
|
78
|
+
}
|
76
79
|
};
|
77
80
|
TableList.prototype.componentDidUpdate = function (prevProps) {
|
78
|
-
if (
|
79
|
-
this.
|
80
|
-
|
81
|
-
|
81
|
+
if (this.props.array) {
|
82
|
+
if (prevProps.array !== this.props.array) {
|
83
|
+
this.setState({
|
84
|
+
items: this.props.array,
|
85
|
+
});
|
86
|
+
}
|
82
87
|
}
|
83
88
|
};
|
84
89
|
TableList.prototype.onDragEnd = function (result) {
|
@@ -92,24 +97,47 @@ var TableList = /** @class */ (function (_super) {
|
|
92
97
|
return this.props.onDrag ?
|
93
98
|
this.props.onDrag(result.source.index, result.destination.index) : null;
|
94
99
|
};
|
100
|
+
TableList.prototype.dropDown = function () {
|
101
|
+
return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
102
|
+
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
|
103
|
+
};
|
95
104
|
TableList.prototype.render = function () {
|
96
105
|
var _a;
|
97
106
|
var _this = this;
|
98
|
-
var classes = (0, classnames_1.default)((_a = {
|
99
|
-
'table-list': !this.props.addItem
|
107
|
+
var classes = (0, classnames_1.default)('', (_a = {
|
108
|
+
'table-list': !this.props.addItem,
|
109
|
+
'table-list--read-only': this.props.readOnly
|
100
110
|
},
|
101
111
|
_a["".concat(this.props.className)] = this.props.className,
|
102
112
|
_a));
|
103
|
-
return (this.
|
104
|
-
this.props.dragAndDrop
|
105
|
-
React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
|
113
|
+
return (this.state.items.length > 0
|
114
|
+
? this.props.dragAndDrop
|
115
|
+
? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
|
106
116
|
React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
|
107
117
|
_this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
|
108
|
-
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined,
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
118
|
+
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
|
119
|
+
? item.onDoubleClick
|
120
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
121
|
+
&& _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
|
122
|
+
provided.placeholder,
|
123
|
+
(_this.props.addItem && !_this.props.readOnly) &&
|
124
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
125
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
126
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
|
127
|
+
: React.createElement("ul", { className: classes },
|
128
|
+
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
|
129
|
+
? item.onDoubleClick
|
130
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
131
|
+
&& _this.props.onAddItem(index, item); } })); }),
|
132
|
+
(this.props.addItem && !this.props.readOnly) &&
|
133
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
134
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
135
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
|
136
|
+
: (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
|
137
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
138
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
139
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
|
140
|
+
: null);
|
113
141
|
};
|
114
142
|
return TableList;
|
115
143
|
}(React.PureComponent));
|
@@ -117,12 +145,42 @@ exports.TableList = TableList;
|
|
117
145
|
var TableListItem = /** @class */ (function (_super) {
|
118
146
|
__extends(TableListItem, _super);
|
119
147
|
function TableListItem() {
|
120
|
-
|
148
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
149
|
+
_this.delay = 200;
|
150
|
+
_this.prevent = false;
|
151
|
+
_this.onSingleClick = function () {
|
152
|
+
_this.timer = setTimeout(function () {
|
153
|
+
if (!_this.prevent) {
|
154
|
+
if (_this.props.onClick) {
|
155
|
+
_this.props.onClick();
|
156
|
+
}
|
157
|
+
}
|
158
|
+
}, _this.delay);
|
159
|
+
};
|
160
|
+
_this.onDoubleClick = function () {
|
161
|
+
clearTimeout(_this.timer);
|
162
|
+
_this.prevent = true;
|
163
|
+
if (_this.props.onDoubleClick) {
|
164
|
+
_this.props.onDoubleClick();
|
165
|
+
}
|
166
|
+
setTimeout(function () {
|
167
|
+
_this.prevent = false;
|
168
|
+
}, _this.delay);
|
169
|
+
};
|
170
|
+
return _this;
|
121
171
|
}
|
122
172
|
TableListItem.prototype.render = function () {
|
173
|
+
var _this = this;
|
174
|
+
var classes = (0, classnames_1.default)('table-list__item', {
|
175
|
+
'table-list__item--clickable': this.props.onClick,
|
176
|
+
'table-list__item--draggable': this.props.dragAndDrop,
|
177
|
+
'table-list__item--drag-handles-always': !this.props.showDragHandle,
|
178
|
+
'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
|
179
|
+
});
|
123
180
|
return (this.props.addItem ?
|
124
181
|
React.createElement("li", { className: 'table-list__item-container' },
|
125
|
-
React.createElement("div", { onClick:
|
182
|
+
React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
|
183
|
+
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
126
184
|
React.createElement("div", { className: 'table-list__item-content' },
|
127
185
|
React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
|
128
186
|
React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
|
@@ -131,9 +189,10 @@ var TableListItem = /** @class */ (function (_super) {
|
|
131
189
|
React.createElement("div", { className: 'table-list__add-bar-container' },
|
132
190
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
133
191
|
React.createElement("div", { className: 'table-list__add-bar' },
|
134
|
-
React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
|
192
|
+
React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
135
193
|
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
|
136
|
-
: React.createElement("li", { className: "
|
194
|
+
: React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
|
195
|
+
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
137
196
|
React.createElement("div", { className: 'table-list__item-content' },
|
138
197
|
React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
|
139
198
|
React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
|
@@ -91,14 +91,22 @@ var SearchBar = /** @class */ (function (_super) {
|
|
91
91
|
}
|
92
92
|
}, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
|
93
93
|
this.state.inputValue &&
|
94
|
-
React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
|
94
|
+
React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
|
95
|
+
_this.setState({ inputValue: '' });
|
96
|
+
setTimeout(function () {
|
97
|
+
if (_this.props.onSubmit) {
|
98
|
+
_this.props.onSubmit(_this.state.inputValue);
|
99
|
+
}
|
100
|
+
});
|
101
|
+
} },
|
95
102
|
React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
|
96
|
-
|
97
|
-
|
98
|
-
_this.props.onSubmit
|
99
|
-
|
100
|
-
|
101
|
-
|
103
|
+
this.state.inputValue &&
|
104
|
+
React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
|
105
|
+
if (_this.props.onSubmit) {
|
106
|
+
_this.props.onSubmit(_this.state.inputValue);
|
107
|
+
}
|
108
|
+
} },
|
109
|
+
React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
|
102
110
|
};
|
103
111
|
return SearchBar;
|
104
112
|
}(React.PureComponent));
|
@@ -14,12 +14,8 @@ interface IProps {
|
|
14
14
|
info?: string;
|
15
15
|
error?: string;
|
16
16
|
}
|
17
|
-
|
18
|
-
invalid: boolean;
|
19
|
-
}
|
20
|
-
export declare class TimePicker extends React.PureComponent<IProps, IState> {
|
17
|
+
export declare class TimePicker extends React.PureComponent<IProps> {
|
21
18
|
private htmlId;
|
22
|
-
constructor(props: IProps);
|
23
19
|
render(): JSX.Element;
|
24
20
|
}
|
25
21
|
export {};
|
@@ -39,22 +39,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
40
40
|
exports.TimePicker = void 0;
|
41
41
|
var React = __importStar(require("react"));
|
42
|
-
// import classNames from 'classnames';
|
43
42
|
var react_id_generator_1 = __importDefault(require("react-id-generator"));
|
44
43
|
var Form_1 = require("./Form");
|
45
44
|
var TimePicker = /** @class */ (function (_super) {
|
46
45
|
__extends(TimePicker, _super);
|
47
|
-
function TimePicker(
|
48
|
-
var _this = _super.
|
46
|
+
function TimePicker() {
|
47
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
49
48
|
_this.htmlId = (0, react_id_generator_1.default)();
|
50
|
-
_this.state = {
|
51
|
-
invalid: _this.props.invalid ? _this.props.invalid : false,
|
52
|
-
};
|
53
49
|
return _this;
|
54
50
|
}
|
55
51
|
TimePicker.prototype.render = function () {
|
56
52
|
var _this = this;
|
57
|
-
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.
|
53
|
+
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
58
54
|
React.createElement("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", step: this.props.allowSeconds ? 1 : undefined, className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
|
59
55
|
_this.props.onChange(event.target.value);
|
60
56
|
} })));
|
package/.vscode/settings.json
DELETED
@@ -1,16 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
interface IProps {
|
3
|
-
type?: 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
|
4
|
-
style?: 'filled' | 'hollow';
|
5
|
-
size?: 'normal' | 'small';
|
6
|
-
restoreIcon?: 'info' | 'help';
|
7
|
-
}
|
8
|
-
interface IState {
|
9
|
-
open: boolean;
|
10
|
-
}
|
11
|
-
export declare class Alert extends React.PureComponent<IProps, IState> {
|
12
|
-
constructor(props: IProps);
|
13
|
-
onToggle(): void;
|
14
|
-
render(): JSX.Element;
|
15
|
-
}
|
16
|
-
export {};
|
@@ -1,48 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
interface IProps {
|
3
|
-
items: Array<any>;
|
4
|
-
keyValue?: string;
|
5
|
-
minLength?: number;
|
6
|
-
value?: string | object;
|
7
|
-
label?: string;
|
8
|
-
placeholder?: string;
|
9
|
-
info?: string;
|
10
|
-
error?: string;
|
11
|
-
required?: boolean;
|
12
|
-
disabled?: boolean;
|
13
|
-
invalid?: boolean;
|
14
|
-
inlineLabel?: boolean;
|
15
|
-
isSearchField?: boolean;
|
16
|
-
listItemTemplate?(value: any): any;
|
17
|
-
search?(searhString: string, callback: (result: Array<any>) => void): {
|
18
|
-
cancel: () => void;
|
19
|
-
};
|
20
|
-
onChange(newValue: string): void;
|
21
|
-
onSelect?(suggestion: string): void;
|
22
|
-
}
|
23
|
-
interface IState {
|
24
|
-
selectedItem: any;
|
25
|
-
filteredItems: any;
|
26
|
-
invalid: boolean;
|
27
|
-
focused: boolean;
|
28
|
-
}
|
29
|
-
export declare class Autocomplete extends React.Component<IProps, IState> {
|
30
|
-
latestCall?: {
|
31
|
-
cancel: () => void;
|
32
|
-
};
|
33
|
-
constructor(props: IProps);
|
34
|
-
htmlId: string;
|
35
|
-
search(term: string): void;
|
36
|
-
searchItem(event: any): void;
|
37
|
-
handleChange(event: {
|
38
|
-
originalEvent: Event;
|
39
|
-
value: any;
|
40
|
-
}): void;
|
41
|
-
handleSelect(event: {
|
42
|
-
originalEvent: Event;
|
43
|
-
value: any;
|
44
|
-
}): void;
|
45
|
-
handleInputClear(): void;
|
46
|
-
render(): JSX.Element;
|
47
|
-
}
|
48
|
-
export {};
|
@@ -1,33 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
interface IBase {
|
3
|
-
tooltipText?: string;
|
4
|
-
}
|
5
|
-
interface IImageAvatar extends IBase {
|
6
|
-
imageUrl?: string;
|
7
|
-
}
|
8
|
-
interface ITextAvatar extends IBase {
|
9
|
-
text: string;
|
10
|
-
}
|
11
|
-
export declare class AvatarContentText extends React.PureComponent<ITextAvatar> {
|
12
|
-
render(): JSX.Element;
|
13
|
-
}
|
14
|
-
export declare class AvatarContentImage extends React.PureComponent<IImageAvatar> {
|
15
|
-
render(): JSX.Element;
|
16
|
-
}
|
17
|
-
interface IPropsAvatarWrapper {
|
18
|
-
size?: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
|
19
|
-
statusIndicator?: {
|
20
|
-
status: 'online' | 'offline';
|
21
|
-
tooltipText?: string;
|
22
|
-
};
|
23
|
-
administratorIndicator?: {
|
24
|
-
enabled: boolean;
|
25
|
-
tooltipText?: string;
|
26
|
-
};
|
27
|
-
children: React.ReactNode;
|
28
|
-
'data-test-id'?: string;
|
29
|
-
}
|
30
|
-
export declare class AvatarWrapper extends React.PureComponent<IPropsAvatarWrapper> {
|
31
|
-
render(): JSX.Element;
|
32
|
-
}
|
33
|
-
export {};
|
@@ -1,13 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
interface IProps {
|
3
|
-
text?: string;
|
4
|
-
type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
|
5
|
-
color?: string;
|
6
|
-
shape?: 'round' | 'square';
|
7
|
-
children?: React.ReactNode;
|
8
|
-
'data-test-id'?: string;
|
9
|
-
}
|
10
|
-
export declare class Badge extends React.PureComponent<IProps> {
|
11
|
-
render(): JSX.Element;
|
12
|
-
}
|
13
|
-
export {};
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
interface IButtonBase {
|
3
|
-
id?: string;
|
4
|
-
theme?: 'light' | 'dark';
|
5
|
-
type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
|
6
|
-
size?: 'small' | 'normal' | 'large';
|
7
|
-
children?: never;
|
8
|
-
icon?: string;
|
9
|
-
disabled?: boolean;
|
10
|
-
iconOnly?: boolean;
|
11
|
-
onClick(): void;
|
12
|
-
'data-test-id'?: string;
|
13
|
-
}
|
14
|
-
interface IPropsButton extends IButtonBase {
|
15
|
-
text: string;
|
16
|
-
expand?: boolean;
|
17
|
-
style?: 'filled' | 'hollow' | 'text-only';
|
18
|
-
shape?: 'square' | 'round';
|
19
|
-
}
|
20
|
-
export declare class Button extends React.PureComponent<IPropsButton> {
|
21
|
-
render(): JSX.Element;
|
22
|
-
}
|
23
|
-
export {};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
interface IProps {
|
3
|
-
orientation?: 'horizontal' | 'vertical';
|
4
|
-
spaces?: 'comfort' | 'compact';
|
5
|
-
align?: 'left' | 'right' | 'center' | 'inline';
|
6
|
-
padded?: boolean;
|
7
|
-
children: React.ReactNode;
|
8
|
-
}
|
9
|
-
export declare class ButtonGroup extends React.PureComponent<IProps> {
|
10
|
-
render(): JSX.Element;
|
11
|
-
}
|
12
|
-
export {};
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
interface IProps {
|
3
|
-
orientation?: 'horizontal' | 'vertical';
|
4
|
-
grid?: boolean;
|
5
|
-
align?: 'left' | 'right' | 'center' | 'inline';
|
6
|
-
padded?: boolean;
|
7
|
-
}
|
8
|
-
export declare class CheckButtonGroup extends React.PureComponent<IProps> {
|
9
|
-
render(): JSX.Element;
|
10
|
-
}
|
11
|
-
export {};
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
interface IProps {
|
3
|
-
label: {
|
4
|
-
text: string;
|
5
|
-
side?: 'left' | 'right';
|
6
|
-
hidden?: boolean;
|
7
|
-
};
|
8
|
-
checked?: boolean;
|
9
|
-
disabled?: boolean;
|
10
|
-
required?: boolean;
|
11
|
-
onChange(nextValue: boolean): void;
|
12
|
-
}
|
13
|
-
export declare class Checkbox extends React.Component<IProps> {
|
14
|
-
htmlId: string;
|
15
|
-
constructor(props: IProps);
|
16
|
-
handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
|
17
|
-
render(): JSX.Element;
|
18
|
-
}
|
19
|
-
export {};
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
interface IProps {
|
3
|
-
label: {
|
4
|
-
text: string;
|
5
|
-
icon?: string;
|
6
|
-
hidden?: boolean;
|
7
|
-
};
|
8
|
-
checked?: boolean;
|
9
|
-
disabled?: boolean;
|
10
|
-
required?: boolean;
|
11
|
-
onChange(nextValue: boolean): void;
|
12
|
-
}
|
13
|
-
export declare class CheckboxButton extends React.Component<IProps> {
|
14
|
-
htmlId: string;
|
15
|
-
constructor(props: IProps);
|
16
|
-
handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
|
17
|
-
render(): JSX.Element;
|
18
|
-
}
|
19
|
-
export {};
|
@@ -1,37 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
|
3
|
-
export declare type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
|
4
|
-
interface IDatePickerBase {
|
5
|
-
disabled?: boolean;
|
6
|
-
dateFormat: string;
|
7
|
-
shortcuts?: Array<{
|
8
|
-
days: number;
|
9
|
-
label: string;
|
10
|
-
}>;
|
11
|
-
locale?: DatePickerLocaleSettings;
|
12
|
-
}
|
13
|
-
interface IDatePicker extends IDatePickerBase {
|
14
|
-
value: Date | null;
|
15
|
-
onChange(valueNext: Date | null): void;
|
16
|
-
}
|
17
|
-
interface IState {
|
18
|
-
value: CalendarProps['value'];
|
19
|
-
valid: boolean;
|
20
|
-
}
|
21
|
-
export declare class DatePicker extends React.PureComponent<IDatePicker, IState> {
|
22
|
-
private instance;
|
23
|
-
hidePopupOnScroll: () => void;
|
24
|
-
constructor(props: IDatePicker);
|
25
|
-
componentDidMount(): void;
|
26
|
-
componentWillUnmount(): void;
|
27
|
-
componentDidUpdate(prevProps: IDatePicker): void;
|
28
|
-
render(): JSX.Element;
|
29
|
-
}
|
30
|
-
interface IDatePickerISO extends IDatePickerBase {
|
31
|
-
value: string;
|
32
|
-
onChange(value: string): void;
|
33
|
-
}
|
34
|
-
export declare class DatePickerISO extends React.PureComponent<IDatePickerISO> {
|
35
|
-
render(): JSX.Element;
|
36
|
-
}
|
37
|
-
export {};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { ChartData, ChartOptions } from 'chart.js';
|
3
|
-
interface IProps {
|
4
|
-
data: ChartData;
|
5
|
-
options: ChartOptions;
|
6
|
-
width: string;
|
7
|
-
height: string;
|
8
|
-
}
|
9
|
-
export declare class DonutChart extends React.Component<IProps, {}> {
|
10
|
-
render(): JSX.Element;
|
11
|
-
}
|
12
|
-
export {};
|