react-ui-basics 0.0.172 → 0.0.173
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/FilteredList.js +234 -139
- package/ImageGallery.js +4 -2
- package/TextField.js +2 -4
- package/bundle.css +631 -631
- package/package.json +1 -1
- package/FilteredList.d.ts +0 -61
package/FilteredList.js
CHANGED
|
@@ -1,156 +1,251 @@
|
|
|
1
1
|
import ReactConstants from "./ReactConstants";
|
|
2
2
|
import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
|
|
3
|
-
|
|
4
|
-
import { jsx as jsxRuntime_2 } from 'react/jsx-runtime';
|
|
3
|
+
import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
|
|
5
4
|
import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
|
|
6
5
|
import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
|
|
7
6
|
import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
|
|
8
7
|
import './FilteredList.css';
|
|
9
8
|
import React from 'react';
|
|
9
|
+
import ReactCreateElement from './ReactCreateElement.js';
|
|
10
10
|
import Scrollable from './Scrollable.js';
|
|
11
|
-
import {
|
|
11
|
+
import { orNoop, classNames, ref, isFunction, stopPropagation, isObject } from './Tools.js';
|
|
12
12
|
import { PureComponent } from './ReactConstants.js';
|
|
13
13
|
|
|
14
|
-
var getLabel = function (labels, id) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
_this.setState({ selected: id });
|
|
32
|
-
__props(_this).onSelect(id);
|
|
33
|
-
};
|
|
34
|
-
_this.selected = function () {
|
|
35
|
-
var value = __state(_this).selected;
|
|
36
|
-
var selectSingle = __props(_this).selectSingle;
|
|
37
|
-
if (value === -1 || _this.hidden[value + '']) {
|
|
38
|
-
var filtered = _this.list.filter(function (id) { return !_this.hidden[id]; });
|
|
39
|
-
if ((selectSingle === UNDEFINED || selectSingle) && __length(filtered) === 1)
|
|
40
|
-
return filtered[0];
|
|
41
|
-
return null;
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
return value;
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
_this.next = function () {
|
|
48
|
-
var list = _this.list;
|
|
49
|
-
var selected = __state(_this).selected;
|
|
50
|
-
var position = list.findIndex(function (id) { return selected === id; });
|
|
51
|
-
if (_this.hidden[list[position]])
|
|
52
|
-
position = -1;
|
|
53
|
-
while (++position < __length(list)) {
|
|
54
|
-
if (!_this.hidden[list[position]])
|
|
55
|
-
break;
|
|
56
|
-
}
|
|
57
|
-
if (position < __length(list)) {
|
|
58
|
-
var id = list[position];
|
|
59
|
-
_this.setState({ selected: id });
|
|
60
|
-
_this.updateScroll(id);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
_this.prev = function () {
|
|
64
|
-
var list = _this.list;
|
|
65
|
-
var selected = __state(_this).selected;
|
|
66
|
-
var position = list.findIndex(function (id) { return selected === id; });
|
|
67
|
-
if (_this.hidden[list[position]])
|
|
68
|
-
position = __length(list);
|
|
69
|
-
while (--position >= 0) {
|
|
70
|
-
if (!_this.hidden[list[position]])
|
|
71
|
-
break;
|
|
72
|
-
}
|
|
73
|
-
if (position >= 0) {
|
|
74
|
-
var id = list[position];
|
|
75
|
-
_this.setState({ selected: id });
|
|
76
|
-
_this.updateScroll(id);
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
_this.updateScroll = function (id) {
|
|
80
|
-
var child = _this.elements[id];
|
|
81
|
-
var container = _this.el;
|
|
82
|
-
var scrollTop = container.getScroll();
|
|
83
|
-
var height = container.getHeight();
|
|
84
|
-
var isVisible = scrollTop <= child.offsetTop && scrollTop + height >= child.offsetTop + __clientHeight(child);
|
|
85
|
-
if (!isVisible) {
|
|
86
|
-
var scrollToBottom = child.offsetTop + __clientHeight(child) - height;
|
|
87
|
-
var scrollToTop = child.offsetTop;
|
|
88
|
-
if (Math.abs(scrollTop - scrollToTop) < Math.abs(scrollTop - scrollToBottom)) {
|
|
89
|
-
container.setScroll(scrollToTop);
|
|
90
|
-
}
|
|
91
|
-
else {
|
|
92
|
-
container.setScroll(scrollToBottom);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
_this.reset = function () {
|
|
97
|
-
_this.setState({ selected: -1 });
|
|
98
|
-
_this.el.scrollTop = 0;
|
|
99
|
-
};
|
|
100
|
-
_this.scrollTo = function (id) { return _this.el.setScroll(_this.elements[id] && _this.elements[id].offsetTop); };
|
|
101
|
-
_this.state = { selected: -1 };
|
|
102
|
-
return _this;
|
|
103
|
-
}
|
|
104
|
-
FilteredList.prototype[ReactConstants[0]] = function () {
|
|
105
|
-
orNoop(__props(this).nextProvider)(this.next);
|
|
106
|
-
orNoop(__props(this).prevProvider)(this.prev);
|
|
107
|
-
orNoop(__props(this).selectedProvider)(this.selected);
|
|
108
|
-
orNoop(__props(this).resetProvider)(this.reset);
|
|
109
|
-
this.updateList(__props(this));
|
|
14
|
+
var getLabel = function getLabel(labels, id) {
|
|
15
|
+
return isFunction(labels) ? labels(id) : labels[id];
|
|
16
|
+
};
|
|
17
|
+
var FilteredList = function (_PureComponent) {
|
|
18
|
+
_inherits(FilteredList, _PureComponent);
|
|
19
|
+
var _super = _createSuper(FilteredList);
|
|
20
|
+
function FilteredList(_props) {
|
|
21
|
+
var _this;
|
|
22
|
+
_classCallCheck(this, FilteredList);
|
|
23
|
+
_this = _super.call(this, _props);
|
|
24
|
+
_this.updateList = function (props) {
|
|
25
|
+
var data = __data(props);
|
|
26
|
+
var selected = __state(_this).selected;
|
|
27
|
+
_this.list = data || [];
|
|
28
|
+
if (!_this.list.includes(selected)) _this.setState({
|
|
29
|
+
selected: -1
|
|
30
|
+
});
|
|
110
31
|
};
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
32
|
+
_this.onSelect = function (id) {
|
|
33
|
+
_this.setState({
|
|
34
|
+
selected: id
|
|
35
|
+
});
|
|
36
|
+
__props(_this).onSelect(id);
|
|
115
37
|
};
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
38
|
+
_this.selected = function () {
|
|
39
|
+
var value = __state(_this).selected;
|
|
40
|
+
var selectSingle = __props(_this).selectSingle;
|
|
41
|
+
if (value === -1 || _this.hidden[value]) {
|
|
42
|
+
var filtered = _this.list.filter(function (id) {
|
|
43
|
+
return !_this.hidden[id];
|
|
44
|
+
});
|
|
45
|
+
if (selectSingle && __length(filtered) === 1) return filtered[0];
|
|
46
|
+
return null;
|
|
47
|
+
} else {
|
|
48
|
+
return value;
|
|
49
|
+
}
|
|
126
50
|
};
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
var
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
var
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
51
|
+
_this.next = function () {
|
|
52
|
+
var list = _this.list;
|
|
53
|
+
var selected = __state(_this).selected;
|
|
54
|
+
var position = list.findIndex(function (id) {
|
|
55
|
+
return selected === id;
|
|
56
|
+
});
|
|
57
|
+
if (_this.hidden[list[position]]) position = -1;
|
|
58
|
+
while (++position < __length(list)) {
|
|
59
|
+
if (!_this.hidden[list[position]]) break;
|
|
60
|
+
}
|
|
61
|
+
if (position < __length(list)) {
|
|
62
|
+
var id = list[position];
|
|
63
|
+
_this.setState({
|
|
64
|
+
selected: id
|
|
65
|
+
});
|
|
66
|
+
_this.updateScroll(id);
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
_this.prev = function () {
|
|
70
|
+
var list = _this.list;
|
|
71
|
+
var selected = __state(_this).selected;
|
|
72
|
+
var position = list.findIndex(function (id) {
|
|
73
|
+
return selected === id;
|
|
74
|
+
});
|
|
75
|
+
if (_this.hidden[list[position]]) position = __length(list);
|
|
76
|
+
while (--position >= 0) {
|
|
77
|
+
if (!_this.hidden[list[position]]) break;
|
|
78
|
+
}
|
|
79
|
+
if (position >= 0) {
|
|
80
|
+
var id = list[position];
|
|
81
|
+
_this.setState({
|
|
82
|
+
selected: id
|
|
83
|
+
});
|
|
84
|
+
_this.updateScroll(id);
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
_this.updateScroll = function (id) {
|
|
88
|
+
var child = _this.elements[id];
|
|
89
|
+
var container = _this.el;
|
|
90
|
+
var scrollTop = container.getScroll();
|
|
91
|
+
var height = container.getHeight();
|
|
92
|
+
var isVisible = scrollTop <= child.offsetTop && scrollTop + height >= child.offsetTop + __clientHeight(child);
|
|
93
|
+
if (!isVisible) {
|
|
94
|
+
var scrollToBottom = child.offsetTop + __clientHeight(child) - height;
|
|
95
|
+
var scrollToTop = child.offsetTop;
|
|
96
|
+
if (Math.abs(scrollTop - scrollToTop) < Math.abs(scrollTop - scrollToBottom)) {
|
|
97
|
+
container.setScroll(scrollToTop);
|
|
98
|
+
} else {
|
|
99
|
+
container.setScroll(scrollToBottom);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
_this.reset = function () {
|
|
104
|
+
_this.setState({
|
|
105
|
+
selected: -1
|
|
106
|
+
});
|
|
107
|
+
_this.el.scrollTop = 0;
|
|
147
108
|
};
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
this.forceUpdate();
|
|
109
|
+
_this.scrollTo = function (id) {
|
|
110
|
+
return _this.el.setScroll(_this.elements[id] && _this.elements[id].offsetTop);
|
|
151
111
|
};
|
|
152
|
-
|
|
153
|
-
|
|
112
|
+
_this.state = {
|
|
113
|
+
selected: -1
|
|
114
|
+
};
|
|
115
|
+
_this.hidden = {};
|
|
116
|
+
_this.elements = {};
|
|
117
|
+
return _this;
|
|
118
|
+
}
|
|
119
|
+
_createClass(FilteredList, [{
|
|
120
|
+
key: [ReactConstants[0]],
|
|
121
|
+
value: function componentDidMount() {
|
|
122
|
+
orNoop(__props(this).nextProvider)(this.next);
|
|
123
|
+
orNoop(__props(this).prevProvider)(this.prev);
|
|
124
|
+
orNoop(__props(this).selectedProvider)(this.selected);
|
|
125
|
+
orNoop(__props(this).resetProvider)(this.reset);
|
|
126
|
+
this.updateList(__props(this));
|
|
127
|
+
}
|
|
128
|
+
}, {
|
|
129
|
+
key: [ReactConstants[2]],
|
|
130
|
+
value: function componentDidUpdate(prevProps, prevState, snapshot) {
|
|
131
|
+
if (__props(this).data === __data(prevProps)) return;
|
|
132
|
+
this.updateList(__props(this));
|
|
133
|
+
}
|
|
134
|
+
}, {
|
|
135
|
+
key: [ReactConstants[3]],
|
|
136
|
+
value: function render() {
|
|
137
|
+
var _this2 = this;
|
|
138
|
+
var _this$props = __props(this),
|
|
139
|
+
data = __data(_this$props),
|
|
140
|
+
labels = _this$props.labels,
|
|
141
|
+
filter = _this$props.filter,
|
|
142
|
+
className = _this$props[ReactConstants[5]],
|
|
143
|
+
selected = _this$props.selected,
|
|
144
|
+
inline = _this$props.inline,
|
|
145
|
+
childComponent = _this$props.childComponent,
|
|
146
|
+
childProps = _this$props.childProps,
|
|
147
|
+
style = __style(_this$props),
|
|
148
|
+
scroll = _this$props.scroll;
|
|
149
|
+
return ReactCreateElement(Scrollable, {
|
|
150
|
+
[ReactConstants[5]]: classNames('FilteredList', className, inline ? 'inline' : 'popup'),
|
|
151
|
+
ref: ref('el', this),
|
|
152
|
+
style: style,
|
|
153
|
+
scrollBarMode: scroll
|
|
154
|
+
}, (data || []).filter(function (id) {
|
|
155
|
+
return id !== false && id != null;
|
|
156
|
+
}).map(function (id) {
|
|
157
|
+
return ReactCreateElement(ItemWrapper, {
|
|
158
|
+
id: id,
|
|
159
|
+
key: id,
|
|
160
|
+
label: getLabel(labels, id),
|
|
161
|
+
childComponent: childComponent,
|
|
162
|
+
childProps: childProps,
|
|
163
|
+
element: function element(el) {
|
|
164
|
+
return _this2.elements[id] = el;
|
|
165
|
+
},
|
|
166
|
+
[ReactConstants[6]]: function onClick(e) {
|
|
167
|
+
stopPropagation(e);
|
|
168
|
+
_this2.onSelect(id);
|
|
169
|
+
},
|
|
170
|
+
onMouseEnter: function onMouseEnter(e) {
|
|
171
|
+
return _this2.setState({
|
|
172
|
+
selected: id
|
|
173
|
+
});
|
|
174
|
+
},
|
|
175
|
+
onMouseLeave: function onMouseLeave(e) {
|
|
176
|
+
return id === __state(_this2).selected && _this2.setState({
|
|
177
|
+
selected: -1
|
|
178
|
+
});
|
|
179
|
+
},
|
|
180
|
+
[ReactConstants[5]]: classNames('child', __state(_this2).selected === id && 'active', selected === id || isObject(selected) && selected[id] && 'selected'),
|
|
181
|
+
classProvider: function classProvider(it) {
|
|
182
|
+
return (_this2.hidden[id] = !filter(it)) && 'hidden';
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
}));
|
|
186
|
+
}
|
|
187
|
+
}]);
|
|
188
|
+
return FilteredList;
|
|
189
|
+
}(PureComponent);
|
|
190
|
+
FilteredList.defaultProps = {
|
|
191
|
+
data: [],
|
|
192
|
+
labels: {},
|
|
193
|
+
selected: {},
|
|
194
|
+
inline: false,
|
|
195
|
+
selectSingle: true,
|
|
196
|
+
filter: function filter() {
|
|
197
|
+
return true;
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
var FilteredList$1 = FilteredList;
|
|
201
|
+
var ItemWrapper = function (_React$Component) {
|
|
202
|
+
_inherits(ItemWrapper, _React$Component);
|
|
203
|
+
var _super2 = _createSuper(ItemWrapper);
|
|
204
|
+
function ItemWrapper() {
|
|
205
|
+
_classCallCheck(this, ItemWrapper);
|
|
206
|
+
return _super2.apply(this, arguments);
|
|
207
|
+
}
|
|
208
|
+
_createClass(ItemWrapper, [{
|
|
209
|
+
key: [ReactConstants[3]],
|
|
210
|
+
value: function render() {
|
|
211
|
+
var _this3 = this;
|
|
212
|
+
var _this$props2 = __props(this),
|
|
213
|
+
id = _this$props2.id,
|
|
214
|
+
label = _this$props2.label,
|
|
215
|
+
onClick = _this$props2[ReactConstants[6]],
|
|
216
|
+
onMouseDown = _this$props2.onMouseDown,
|
|
217
|
+
onMouseEnter = _this$props2.onMouseEnter,
|
|
218
|
+
onMouseLeave = _this$props2.onMouseLeave,
|
|
219
|
+
classProvider = _this$props2.classProvider,
|
|
220
|
+
className = _this$props2[ReactConstants[5]],
|
|
221
|
+
childComponent = _this$props2.childComponent,
|
|
222
|
+
childProps = _this$props2.childProps;
|
|
223
|
+
var child = React.createElement(childComponent, _objectSpread2(_objectSpread2({}, childProps), {}, {
|
|
224
|
+
id: id,
|
|
225
|
+
label: label,
|
|
226
|
+
dataConsumer: function dataConsumer(data) {
|
|
227
|
+
return _this3.data = data;
|
|
228
|
+
}
|
|
229
|
+
}));
|
|
230
|
+
var cssClass = orNoop(classProvider)(__data(this));
|
|
231
|
+
return ReactCreateElement("div", {
|
|
232
|
+
[ReactConstants[5]]: classNames('ItemWrapper', cssClass, className),
|
|
233
|
+
onMouseEnter: onMouseEnter,
|
|
234
|
+
onMouseLeave: onMouseLeave,
|
|
235
|
+
onMouseDown: onMouseDown,
|
|
236
|
+
[ReactConstants[6]]: onClick,
|
|
237
|
+
ref: ref('el', this)
|
|
238
|
+
}, child);
|
|
239
|
+
}
|
|
240
|
+
}, {
|
|
241
|
+
key: [ReactConstants[0]],
|
|
242
|
+
value: function componentDidMount() {
|
|
243
|
+
orNoop(__props(this).element)(this.el);
|
|
244
|
+
this.forceUpdate();
|
|
245
|
+
}
|
|
246
|
+
}]);
|
|
247
|
+
return ItemWrapper;
|
|
248
|
+
}(React.Component);
|
|
154
249
|
|
|
155
|
-
export { FilteredList as default, getLabel };
|
|
250
|
+
export { FilteredList$1 as default, getLabel };
|
|
156
251
|
//# sourceMappingURL=FilteredList.js.map
|
package/ImageGallery.js
CHANGED
|
@@ -789,8 +789,10 @@ var ImageGalleryContainer = function (_React$Component2) {
|
|
|
789
789
|
};
|
|
790
790
|
var dispatch = function dispatch(action) {
|
|
791
791
|
return setTimeout(function () {
|
|
792
|
-
|
|
793
|
-
|
|
792
|
+
that.setState(function (state) {
|
|
793
|
+
state = IMAGE_GALLERY_REDUCER(state, action);
|
|
794
|
+
return state;
|
|
795
|
+
});
|
|
794
796
|
}, 0);
|
|
795
797
|
};
|
|
796
798
|
var props = propsGetter(that);
|
package/TextField.js
CHANGED
|
@@ -113,10 +113,8 @@ var TextField = function (_PureComponent) {
|
|
|
113
113
|
var hasValue = !!__value(i);
|
|
114
114
|
isWithValue(hasValue);
|
|
115
115
|
!hasValue && setTimeout(function () {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
matches && isWithValue(matches);
|
|
119
|
-
} catch (ignored) {}
|
|
116
|
+
var matches = i.matches(':-internal-autofill-selected');
|
|
117
|
+
matches && isWithValue(matches);
|
|
120
118
|
}, 100);
|
|
121
119
|
focused && i.focus();
|
|
122
120
|
orNoop(input)(i);
|