@gpa-gemstone/react-forms 1.1.78 → 1.1.79

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 (4) hide show
  1. package/lib/SearchableSelect.d.ts +6 -2
  2. package/lib/SearchableSelect.js +23 -17
  3. package/lib/StylableSelect.js +1 -1
  4. package/package.json +2 -2
package/lib/SearchableSelect.d.ts CHANGED
@@ -16,7 +16,7 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
16
16
  * @param search - Search string
17
17
  * @returns {[promise: Promise<IOption[]>, callback?: () => void]}
18
18
  */
19
- Search: (search: string) => [promise: Promise<IOption[]>, callback?: () => void];
19
+ Search: (search: string) => [Promise<IOption[]>, () => void];
20
20
  /**
21
21
  * CSS styles to apply to the form group
22
22
  * @type {React.CSSProperties}
@@ -27,9 +27,13 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
27
27
  * CSS style to apply to the button holding the selected value
28
28
  * @type {React.CSSProperties}
29
29
  * @optional
30
- *
31
30
  */
32
31
  BtnStyle?: React.CSSProperties;
32
+ /**
33
+ * Custom label to display instead of the default record[field] value. Useful when having a field like an ID.
34
+ * @type {string}
35
+ * @optional
36
+ */
33
37
  SearchLabel?: string;
34
38
  }
35
39
  export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;
package/lib/SearchableSelect.js CHANGED
@@ -38,46 +38,52 @@ var React = require("react");
38
38
  var StylableSelect_1 = require("./StylableSelect");
39
39
  var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
40
40
  function SearchableSelect(props) {
41
- var _a, _b, _c;
42
- var _d = React.useState((_c = (_b = ((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field])) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ''), search = _d[0], setSearch = _d[1];
43
- var _e = React.useState([]), results = _e[0], setResults = _e[1];
44
- var _f = React.useState(false), loading = _f[0], setLoading = _f[1];
41
+ var _a;
42
+ var _b = React.useState(((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field]).toString()), search = _b[0], setSearch = _b[1];
43
+ var _c = React.useState([]), results = _c[0], setResults = _c[1];
44
+ var _d = React.useState(false), loading = _d[0], setLoading = _d[1];
45
45
  React.useEffect(function () {
46
46
  setLoading(true);
47
- var _a = props.Search(search), h = _a[0], c = _a[1];
48
- h.then(function (d) {
47
+ var _a = props.Search(search), handle = _a[0], callback = _a[1];
48
+ handle.then(function (d) {
49
49
  setResults(d.map(function (o) { return ({ Value: o.Value, Element: React.createElement("p", null, o.Label) }); }));
50
50
  setLoading(false);
51
51
  });
52
- return c;
52
+ return callback;
53
53
  }, [search]);
54
54
  React.useEffect(function () {
55
55
  if (props.SearchLabel == null)
56
56
  return;
57
57
  setSearch(props.SearchLabel);
58
58
  }, [props.SearchLabel]);
59
+ var handleOnBlur = React.useCallback(function () {
60
+ var _a;
61
+ var _b;
62
+ if ((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false)
63
+ props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = search, _a)));
64
+ else
65
+ setSearch(props.Record[props.Field].toString());
66
+ }, [props.AllowCustom, props.Record, props.Field, search]);
59
67
  var options = React.useMemo(function () {
60
- var _a, _b, _c, _d;
68
+ var _a, _b, _c;
61
69
  var ops = [];
62
70
  ops.push({
63
- Value: props.Record[props.Field], Element: React.createElement("div", { className: 'input-group' },
64
- React.createElement("input", { type: "text", className: "form-control", value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: (((_a = props.AllowCustom) !== null && _a !== void 0 ? _a : false) ? function () {
65
- var _a;
66
- return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = search, _a)));
67
- } : function () { var _a; return setSearch((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field].toString()); }) }),
71
+ Value: props.Record[props.Field],
72
+ Element: React.createElement("div", { className: 'input-group' },
73
+ React.createElement("input", { type: "text", className: "form-control", value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: handleOnBlur }),
68
74
  loading ?
69
75
  React.createElement("div", { className: "input-group-append" },
70
76
  React.createElement("span", { className: "input-group-text" },
71
77
  React.createElement(gpa_symbols_1.ReactIcons.SpiningIcon, null)))
72
78
  : null)
73
79
  });
74
- if (!((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false))
75
- ops.push({ Value: 'search-' + props.Record[props.Field], Element: React.createElement("p", null, (_c = props.SearchLabel) !== null && _c !== void 0 ? _c : props.Record[props.Field]) });
76
- if ((_d = props.AllowCustom) !== null && _d !== void 0 ? _d : false)
80
+ if (!((_a = props.AllowCustom) !== null && _a !== void 0 ? _a : false))
81
+ ops.push({ Value: 'search-' + props.Record[props.Field], Element: React.createElement("p", null, (_b = props.SearchLabel) !== null && _b !== void 0 ? _b : props.Record[props.Field]) });
82
+ if ((_c = props.AllowCustom) !== null && _c !== void 0 ? _c : false)
77
83
  ops.push({ Value: search, Element: React.createElement("p", null, search) });
78
84
  ops.push.apply(ops, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
79
85
  return ops;
80
- }, [search, props.Record[props.Field], props.Disabled, loading, props.SearchLabel, results]);
86
+ }, [search, props.Record[props.Field], results, props.Disabled, loading, props.SearchLabel, props.AllowCustom]);
81
87
  var update = React.useCallback(function (record) {
82
88
  var _a;
83
89
  var _b, _c;
package/lib/StylableSelect.js CHANGED
@@ -145,6 +145,6 @@ function StylableSelect(props) {
145
145
  } },
146
146
  React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },
147
147
  React.createElement("tbody", null, props.Options.map(function (f, i) { return (f.Value === props.Record[props.Field] ? null :
148
- React.createElement("tr", { key: i, onClick: function (evt) { return handleOptionClick(evt, f); } },
148
+ React.createElement("tr", { key: i, onMouseDown: function (evt) { return handleOptionClick(evt, f); } },
149
149
  React.createElement("td", null, f.Element))); })))))));
150
150
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-forms",
3
- "version": "1.1.78",
3
+ "version": "1.1.79",
4
4
  "description": "React Form modules for gpa webapps",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -45,7 +45,7 @@
45
45
  "typescript": "5.5.3"
46
46
  },
47
47
  "dependencies": {
48
- "@gpa-gemstone/application-typings": "0.0.79",
48
+ "@gpa-gemstone/application-typings": "0.0.80",
49
49
  "@gpa-gemstone/gpa-symbols": "0.0.46",
50
50
  "@gpa-gemstone/helper-functions": "0.0.37",
51
51
  "@types/react": "^17.0.14",