wini-web-components 1.0.8 → 1.1.0

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.
Files changed (6) hide show
  1. package/dist/component/calendar/calendar.js +3 -3
  2. package/dist/component/pagination/pagination.js +1 -1
  3. package/dist/component/select1/select1.d.ts +2 -0
  4. package/dist/component/select1/select1.js +34 -4
  5. package/dist/index.js +1 -1
  6. package/package.json +1 -1
package/dist/component/calendar/calendar.js CHANGED
@@ -111,7 +111,7 @@ var Calendar = /** @class */ (function (_super) {
111
111
  if (!(0, exports.inRangeTime)(timeValue, exports.startDate, exports.endDate)) {
112
112
  additionProps = { 'in-range': 'false' };
113
113
  }
114
- else if (!(0, exports.inRangeTime)(timeValue, (_a = _this.props.min) !== null && _a !== void 0 ? _a : exports.startDate, (_b = _this.props.min) !== null && _b !== void 0 ? _b : exports.endDate)) {
114
+ else if (!(0, exports.inRangeTime)(timeValue, (_a = _this.props.min) !== null && _a !== void 0 ? _a : exports.startDate, (_b = _this.props.max) !== null && _b !== void 0 ? _b : exports.endDate)) {
115
115
  style = __assign(__assign({}, style), { color: 'var(--disabled-font-color)', pointerEvents: 'none' });
116
116
  }
117
117
  else if (_this.state.value.valueOf() === timeValue.valueOf()) {
@@ -183,7 +183,7 @@ var Calendar = /** @class */ (function (_super) {
183
183
  if (!(0, exports.inRangeTime)(timeValue, exports.startDate, exports.endDate)) {
184
184
  additionProps = { 'in-range': 'false' };
185
185
  }
186
- else if (!(0, exports.inRangeTime)(new Date(_this.state.selectYear, _this.state.selectMonth), (_a = _this.props.min) !== null && _a !== void 0 ? _a : exports.startDate, (_b = _this.props.min) !== null && _b !== void 0 ? _b : exports.endDate)) {
186
+ else if (!(0, exports.inRangeTime)(new Date(_this.state.selectYear, _this.state.selectMonth), (_a = _this.props.min) !== null && _a !== void 0 ? _a : exports.startDate, (_b = _this.props.max) !== null && _b !== void 0 ? _b : exports.endDate)) {
187
187
  if (_this.state.selectYear === ((_c = _this.state.selectDate) === null || _c === void 0 ? void 0 : _c.getFullYear()) && _this.state.selectDate.getMonth() === i) {
188
188
  style = {
189
189
  color: 'var(--disabled-font-color)',
@@ -218,7 +218,7 @@ var Calendar = /** @class */ (function (_super) {
218
218
  if (yearNumber === exports.today.getFullYear()) {
219
219
  style = { borderColor: 'var(--infor-color)' };
220
220
  }
221
- else if (yearNumber < (((_a = _this.props.min) !== null && _a !== void 0 ? _a : exports.startDate).getFullYear()) || yearNumber > (((_b = _this.props.min) !== null && _b !== void 0 ? _b : exports.endDate).getFullYear())) {
221
+ else if (yearNumber < (((_a = _this.props.min) !== null && _a !== void 0 ? _a : exports.startDate).getFullYear()) || yearNumber > (((_b = _this.props.max) !== null && _b !== void 0 ? _b : exports.endDate).getFullYear())) {
222
222
  additionProps = { 'in-range': 'false' };
223
223
  }
224
224
  if (yearNumber === _this.state.value.getFullYear()) {
package/dist/component/pagination/pagination.js CHANGED
@@ -28,7 +28,7 @@ function Pagination(_a) {
28
28
  hiddenPageSize ? null : react_1.default.createElement("div", { className: "row items-per-page-container" },
29
29
  react_1.default.createElement(index_1.Text, { className: "regular2" }, "Items/page"),
30
30
  react_1.default.createElement("div", { className: "row" },
31
- react_1.default.createElement(index_1.Select1, { style: { width: '8.6rem' }, placeholder: itemPerPage.toString(), options: [10, 20, 50, 100, 200].map(function (item, _) { return { id: item, name: item }; }), onChange: function (ev) {
31
+ react_1.default.createElement(index_1.Select1, { readOnly: true, style: { width: '8.6rem' }, placeholder: itemPerPage.toString(), options: [10, 20, 50, 100, 200].map(function (item, _) { return { id: item, name: item }; }), onChange: function (ev) {
32
32
  onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
33
33
  } }))),
34
34
  react_1.default.createElement(react_paginate_1.default, { breakLabel: "...", nextLabel: "Next", onPageChange: function (ev) {
package/dist/component/select1/select1.d.ts CHANGED
@@ -26,6 +26,7 @@ interface Select1State {
26
26
  offset: DOMRect;
27
27
  isOpen: boolean;
28
28
  onSelect: any;
29
+ selected?: string | number;
29
30
  search?: Array<OptionsItem>;
30
31
  style?: Object;
31
32
  }
@@ -36,6 +37,7 @@ export declare class Select1 extends React.Component<Select1Props, Select1State>
36
37
  private search;
37
38
  private onSelect;
38
39
  private renderOptions;
40
+ private onKeyDown;
39
41
  componentDidUpdate(prevProps: Select1Props, prevState: Select1State): void;
40
42
  render(): React.JSX.Element;
41
43
  }
package/dist/component/select1/select1.js CHANGED
@@ -104,6 +104,36 @@ var Select1 = /** @class */ (function (_super) {
104
104
  _this = _super.call(this, props) || this;
105
105
  _this.containerRef = (0, react_1.createRef)();
106
106
  _this.inputRef = (0, react_1.createRef)();
107
+ _this.onKeyDown = function (ev) {
108
+ var _a, _b, _c, _d, _e, _f, _g;
109
+ console.log(ev.key);
110
+ ev.preventDefault();
111
+ if ((((_a = _this.state.options) === null || _a === void 0 ? void 0 : _a.length) || ((_b = _this.state.search) === null || _b === void 0 ? void 0 : _b.length)) && _this.state.isOpen) {
112
+ switch (ev.key.toLowerCase()) {
113
+ case "enter":
114
+ var _selectItem = ((_c = _this.state.search) !== null && _c !== void 0 ? _c : _this.state.options).find(function (e) { return e.id === _this.state.selected; });
115
+ if (_selectItem)
116
+ _this.onSelect(_selectItem);
117
+ break;
118
+ case "arrowup":
119
+ if (_this.state.selected) {
120
+ var _index = ((_d = _this.state.search) !== null && _d !== void 0 ? _d : _this.state.options).findIndex(function (e) { return e.id === _this.state.selected; });
121
+ _index = ((_index === 0) ? _this.props.options.length : _index) - 1;
122
+ _this.setState(__assign(__assign({}, _this.state), { selected: (_e = _this.props.options[_index]) === null || _e === void 0 ? void 0 : _e.id }));
123
+ }
124
+ break;
125
+ case "arrowdown":
126
+ if (_this.state.selected) {
127
+ var _index = ((_f = _this.state.search) !== null && _f !== void 0 ? _f : _this.state.options).findIndex(function (e) { return e.id === _this.state.selected; });
128
+ _index = ((_index + 1 === _this.props.options.length) ? -1 : _index) + 1;
129
+ _this.setState(__assign(__assign({}, _this.state), { selected: (_g = _this.props.options[_index]) === null || _g === void 0 ? void 0 : _g.id }));
130
+ }
131
+ break;
132
+ default:
133
+ break;
134
+ }
135
+ }
136
+ };
107
137
  _this.state = {
108
138
  value: props.value,
109
139
  options: props.options,
@@ -156,7 +186,7 @@ var Select1 = /** @class */ (function (_super) {
156
186
  };
157
187
  Select1.prototype.onSelect = function (item) {
158
188
  var _a;
159
- this.setState(__assign(__assign({}, this.state), { isOpen: false, value: item.id, onSelect: undefined }));
189
+ this.setState(__assign(__assign({}, this.state), { isOpen: false, value: item.id, onSelect: undefined, selected: undefined }));
160
190
  (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
161
191
  if (this.props.onChange)
162
192
  this.props.onChange(item);
@@ -169,7 +199,7 @@ var Select1 = /** @class */ (function (_super) {
169
199
  children = ((_a = this.state.search) !== null && _a !== void 0 ? _a : this.state.options).filter(function (e) { return e.parentId === item.id; });
170
200
  //
171
201
  return react_1.default.createElement("div", { key: item.id, className: 'col', style: { width: '100%' } },
172
- react_1.default.createElement("div", { className: 'select-tile row', style: { paddingLeft: item.parentId ? '4.4rem' : undefined }, onClick: children.length ? function () {
202
+ react_1.default.createElement("div", { className: 'select-tile row', style: { paddingLeft: item.parentId ? '4.4rem' : undefined, backgroundColor: this.state.selected === item.id ? "var(--selected-background)" : undefined }, onClick: children.length ? function () {
173
203
  if (_this.state.search) {
174
204
  _this.setState(__assign(__assign({}, _this.state), { search: _this.state.search.map(function (e) {
175
205
  if (e.id === item.id)
@@ -242,8 +272,8 @@ var Select1 = /** @class */ (function (_super) {
242
272
  (_c = _this.inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
243
273
  }
244
274
  } },
245
- react_1.default.createElement("div", { className: 'row', style: { flexWrap: 'wrap', flex: 1, width: '100%', gap: '0.6rem 0.4rem' } }, (!_value || typeof _value.name === "string") ? react_1.default.createElement("input", { ref: this.inputRef, readOnly: this.props.readOnly, onChange: this.search, placeholder: this.props.placeholder, onBlur: function (ev) {
246
- if (_this.state.onSelect)
275
+ react_1.default.createElement("div", { className: 'row', style: { flexWrap: 'wrap', flex: 1, width: '100%', gap: '0.6rem 0.4rem' } }, (!_value || typeof _value.name === "string" || typeof _value.name === "number") ? react_1.default.createElement("input", { ref: this.inputRef, readOnly: this.props.readOnly, onChange: this.search, placeholder: this.props.placeholder, onKeyDown: this.onKeyDown, onBlur: function (ev) {
276
+ if (_this.state.onSelect && !_this.props.readOnly)
247
277
  ev.target.focus();
248
278
  else
249
279
  _this.setState(__assign(__assign({}, _this.state), { isOpen: false, onSelect: null }));