@gpa-gemstone/react-forms 1.1.68 → 1.1.70

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/lib/MutliCheckBoxSelect.js +64 -26
  2. package/lib/SearchableSelect.d.ts +8 -0
  3. package/lib/SearchableSelect.js +37 -30
  4. package/lib/StylableSelect.d.ts +7 -0
  5. package/lib/StylableSelect.js +63 -22
  6. package/package.json +2 -1
package/lib/MutliCheckBoxSelect.js CHANGED
@@ -25,23 +25,58 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
26
26
  var React = require("react");
27
27
  var HelperMessage_1 = require("./HelperMessage");
28
+ var react_portal_1 = require("react-portal");
29
+ var _ = require("lodash");
28
30
  var MultiSelect = function (props) {
29
31
  var _a;
30
32
  // State hooks for managing the visibility of the dropdown and help message.
33
+ var multiSelect = React.useRef(null);
34
+ var selectTable = React.useRef(null);
35
+ var tableContainer = React.useRef(null);
31
36
  var _b = React.useState(false), show = _b[0], setShow = _b[1];
32
37
  var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
33
38
  var _d = React.useState(false), showItems = _d[0], setShowItems = _d[1];
34
39
  var _e = React.useState(""), guid = _e[0], setGuid = _e[1];
35
- var multiSelect = React.useRef(null);
36
40
  var showLabel = React.useMemo(function () { return props.Label !== ""; }, [props.Label]);
37
41
  var showHelpIcon = React.useMemo(function () { return props.Help !== undefined; }, [props.Help]);
38
42
  var selectedOptions = React.useMemo(function () { return props.Options.filter(function (opt) { return opt.Selected; }); }, [props.Options]);
43
+ var _f = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _f[0], setPosition = _f[1];
44
+ React.useEffect(function () {
45
+ var updatePosition = _.debounce(function () {
46
+ if (multiSelect.current != null) {
47
+ var rect = multiSelect.current.getBoundingClientRect();
48
+ setPosition({ Top: rect.bottom, Left: rect.left, Width: rect.width, Height: rect.height });
49
+ }
50
+ }, 200);
51
+ var handleScroll = function (event) {
52
+ if (tableContainer.current == null)
53
+ return;
54
+ if (event.type === 'scroll' && !tableContainer.current.contains(event.target))
55
+ setShow(false);
56
+ updatePosition();
57
+ };
58
+ if (show) {
59
+ updatePosition();
60
+ window.addEventListener('scroll', handleScroll, true);
61
+ window.addEventListener('resize', updatePosition);
62
+ return function () {
63
+ window.removeEventListener('scroll', handleScroll, true);
64
+ window.removeEventListener('resize', updatePosition);
65
+ updatePosition.cancel();
66
+ };
67
+ }
68
+ }, [show]);
39
69
  // Effect to generate a unique ID for the component.
40
70
  React.useEffect(function () {
41
71
  setGuid((0, helper_functions_1.CreateGuid)());
42
72
  }, []);
43
73
  // Handle showing and hiding of the dropdown.
44
74
  function HandleShow(evt) {
75
+ if (selectTable.current != null && selectTable.current.contains(evt.target))
76
+ return;
77
+ //ignore the click if it was inside the table or table container
78
+ if ((selectTable.current != null && selectTable.current.contains(evt.target)) || (tableContainer.current != null && tableContainer.current.contains(evt.target)))
79
+ return;
45
80
  if (multiSelect.current === null)
46
81
  setShow(!show);
47
82
  else if (!multiSelect.current.contains(evt.target))
@@ -81,30 +116,33 @@ var MultiSelect = function (props) {
81
116
  : 'All ',
82
117
  ' ',
83
118
  "Selected"),
84
- React.createElement("div", { style: {
85
- maxHeight: window.innerHeight * 0.75,
86
- overflowY: 'auto',
87
- padding: '10 5',
88
- display: show ? 'block' : 'none',
89
- position: 'absolute',
90
- backgroundColor: '#fff',
91
- color: 'black',
92
- boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
93
- zIndex: 401,
94
- minWidth: '100%',
95
- } },
96
- React.createElement("table", { className: "table", style: { margin: 0 } },
97
- React.createElement("tbody", null,
98
- React.createElement("tr", { onClick: function (evt) {
99
- evt.preventDefault();
100
- props.OnChange(evt, props.Options.filter(function (x) { return x.Selected === (props.Options.filter(function (o) { return o.Selected; }).length === props.Options.length); }));
101
- } },
102
- React.createElement("td", null,
103
- React.createElement("input", { type: "checkbox", checked: props.Options.filter(function (x) { return x.Selected; }).length === props.Options.length, onChange: function () { return null; } })),
104
- React.createElement("td", null, "All")),
105
- props.Options.map(function (f, i) { return (React.createElement("tr", { key: i, onClick: function (evt) { return props.OnChange(evt, [f]); } },
106
- React.createElement("td", null,
107
- React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: function () { return null; } })),
108
- React.createElement("td", null, f.Text))); })))))));
119
+ React.createElement(react_portal_1.Portal, null,
120
+ React.createElement("div", { ref: tableContainer, style: {
121
+ maxHeight: window.innerHeight - position.Top,
122
+ overflowY: 'auto',
123
+ padding: '10 5',
124
+ display: show ? 'block' : 'none',
125
+ position: 'absolute',
126
+ backgroundColor: '#fff',
127
+ color: 'black',
128
+ boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
129
+ zIndex: 9999,
130
+ top: "".concat(position.Top, "px"),
131
+ left: "".concat(position.Left, "px"),
132
+ width: "".concat(position.Width, "px")
133
+ } },
134
+ React.createElement("table", { className: "table", style: { margin: 0 }, ref: selectTable },
135
+ React.createElement("tbody", null,
136
+ React.createElement("tr", { onClick: function (evt) {
137
+ evt.preventDefault();
138
+ props.OnChange(evt, props.Options.filter(function (x) { return x.Selected === (props.Options.filter(function (o) { return o.Selected; }).length === props.Options.length); }));
139
+ } },
140
+ React.createElement("td", null,
141
+ React.createElement("input", { type: "checkbox", checked: props.Options.filter(function (x) { return x.Selected; }).length === props.Options.length, onChange: function () { return null; } })),
142
+ React.createElement("td", null, "All")),
143
+ props.Options.map(function (f, i) { return (React.createElement("tr", { key: i, onClick: function (evt) { return props.OnChange(evt, [f]); } },
144
+ React.createElement("td", null,
145
+ React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: function () { return null; } })),
146
+ React.createElement("td", null, f.Text))); }))))))));
109
147
  };
110
148
  exports.default = MultiSelect;
package/lib/SearchableSelect.d.ts CHANGED
@@ -55,6 +55,14 @@ interface IProps<T> {
55
55
  * @optional
56
56
  */
57
57
  Style?: React.CSSProperties;
58
+ /**
59
+ * CSS style to apply to the button holding the selected value
60
+ * @type {React.CSSProperties}
61
+ * @optional
62
+ *
63
+ */
64
+ BtnStyle?: React.CSSProperties;
65
+ SearchLabel?: string;
58
66
  }
59
67
  export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;
60
68
  export {};
package/lib/SearchableSelect.js CHANGED
@@ -21,10 +21,6 @@
21
21
  // Generated original version of source code.
22
22
  //
23
23
  // ******************************************************************************************************
24
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
25
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
26
- return cooked;
27
- };
28
24
  var __assign = (this && this.__assign) || function () {
29
25
  __assign = Object.assign || function(t) {
30
26
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -40,45 +36,56 @@ Object.defineProperty(exports, "__esModule", { value: true });
40
36
  exports.default = SearchableSelect;
41
37
  var React = require("react");
42
38
  var StylableSelect_1 = require("./StylableSelect");
43
- var styled_components_1 = require("styled-components");
39
+ var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
44
40
  function SearchableSelect(props) {
45
- var _a = React.useState(props.Record[props.Field].toString()), search = _a[0], setSearch = _a[1];
46
- var _b = React.useState([]), results = _b[0], setResults = _b[1];
47
- var _c = React.useState(false), loading = _c[0], setLoading = _c[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];
48
45
  React.useEffect(function () {
49
46
  setLoading(true);
50
47
  var _a = props.Search(search), h = _a[0], c = _a[1];
51
48
  h.then(function (d) { setResults(d.map(function (o) { return ({ Value: o.Value, Element: React.createElement("p", null, o.Label) }); })); setLoading(false); });
52
49
  return c;
53
50
  }, [search]);
51
+ React.useEffect(function () {
52
+ if (props.SearchLabel == null)
53
+ return;
54
+ setSearch(props.SearchLabel);
55
+ }, [props.SearchLabel]);
54
56
  var options = React.useMemo(function () {
55
- var _a, _b, _c;
56
- var r = [];
57
- if ((_a = props.AllowCustom) !== null && _a !== void 0 ? _a : false)
58
- r.push({ Value: search, Element: React.createElement("p", null, search) });
59
- r.push({
57
+ var _a, _b, _c, _d;
58
+ var ops = [];
59
+ ops.push({
60
60
  Value: props.Record[props.Field], Element: React.createElement("div", { className: 'input-group' },
61
- React.createElement("input", { type: "text", className: "form-control", value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: (((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false) ? function () {
61
+ 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 () {
62
62
  var _a;
63
63
  return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = search, _a)));
64
- } : function () { return setSearch(props.Record[props.Field].toString()); }) }),
65
- React.createElement("div", { className: "input-group-append" },
66
- React.createElement("span", { className: "input-group-text" },
67
- React.createElement(Icon, null))))
64
+ } : function () { var _a; return setSearch((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field].toString()); }) }),
65
+ loading ?
66
+ React.createElement("div", { className: "input-group-append" },
67
+ React.createElement("span", { className: "input-group-text" },
68
+ React.createElement(gpa_symbols_1.ReactIcons.SpiningIcon, null)))
69
+ : null)
68
70
  });
69
- r.push.apply(r, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
70
- if (!((_c = props.AllowCustom) !== null && _c !== void 0 ? _c : false))
71
- r.push({ Value: 'search-' + props.Record[props.Field], Element: React.createElement("p", null, props.Record[props.Field]) });
72
- return r;
73
- }, [search, props.Record[props.Field], results, props.Disabled, loading]);
71
+ if (!((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false))
72
+ 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]) });
73
+ if ((_d = props.AllowCustom) !== null && _d !== void 0 ? _d : false)
74
+ ops.push({ Value: search, Element: React.createElement("p", null, search) });
75
+ ops.push.apply(ops, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
76
+ return ops;
77
+ }, [search, props.Record[props.Field], results, props.Disabled, loading, props.SearchLabel]);
74
78
  var update = React.useCallback(function (record) {
75
- if (record[props.Field].toString().startsWith('search-'))
79
+ var _a;
80
+ var _b, _c;
81
+ if (record[props.Field].toString().startsWith('search-')) {
82
+ var value = record[props.Field].toString().replace('search-', '');
83
+ props.Setter(__assign(__assign({}, record), (_a = {}, _a[props.Field] = value, _a)));
84
+ setSearch((_b = props.SearchLabel) !== null && _b !== void 0 ? _b : value);
76
85
  return;
86
+ }
77
87
  props.Setter(record);
78
- setSearch(record[props.Field].toString());
79
- }, [props.Setter, props.Field]);
80
- return React.createElement(StylableSelect_1.default, { Record: props.Record, Field: props.Field, Setter: update, Label: props.Label, Disabled: props.Disabled, Help: props.Help, Style: props.Style, Options: options });
88
+ setSearch((_c = props.SearchLabel) !== null && _c !== void 0 ? _c : record[props.Field].toString());
89
+ }, [props.Setter, props.Field, props.SearchLabel]);
90
+ return React.createElement(StylableSelect_1.default, { Record: props.Record, Field: props.Field, Setter: update, Label: props.Label, Disabled: props.Disabled, Help: props.Help, Style: props.Style, Options: options, BtnStyle: props.BtnStyle });
81
91
  }
82
- var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n"], ["\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n"])));
83
- var Icon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1s linear infinite;\n\tborder: 5px solid #f3f3f3;\n\tborder-Top: 5px solid #555;\n\tborder-Radius: 50%;\n\twidth: 25px;\n\theight: 25px\n"], ["\n\tanimation: ", " 1s linear infinite;\n\tborder: 5px solid #f3f3f3;\n\tborder-Top: 5px solid #555;\n\tborder-Radius: 50%;\n\twidth: 25px;\n\theight: 25px\n"])), spin);
84
- var templateObject_1, templateObject_2;
package/lib/StylableSelect.d.ts CHANGED
@@ -48,6 +48,13 @@ interface IProps<T> {
48
48
  * @optional
49
49
  */
50
50
  Style?: React.CSSProperties;
51
+ /**
52
+ * CSS style to apply to the button holding the selected value
53
+ * @type {React.CSSProperties}
54
+ * @optional
55
+ *
56
+ */
57
+ BtnStyle?: React.CSSProperties;
51
58
  }
52
59
  export default function StylableSelect<T>(props: IProps<T>): JSX.Element;
53
60
  export {};
package/lib/StylableSelect.js CHANGED
@@ -38,17 +38,51 @@ var React = require("react");
38
38
  var HelperMessage_1 = require("./HelperMessage");
39
39
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
40
40
  var lodash_1 = require("lodash");
41
+ var react_portal_1 = require("react-portal");
42
+ var _ = require("lodash");
41
43
  function StylableSelect(props) {
44
+ var _a;
42
45
  // State hooks and ref for managing component state and interactions.
43
- var _a = React.useState(false), show = _a[0], setShow = _a[1];
44
- var _b = React.useState(props.Options[0].Element), selected = _b[0], setSelected = _b[1];
45
- var _c = React.useState(""), guid = _c[0], setGuid = _c[1];
46
- var _d = React.useState(false), showHelp = _d[0], setShowHelp = _d[1];
47
46
  var stylableSelect = React.useRef(null);
47
+ var selectTable = React.useRef(null);
48
+ var tableContainer = React.useRef(null);
49
+ var _b = React.useState(false), show = _b[0], setShow = _b[1];
50
+ var _c = React.useState(props.Options[0].Element), selected = _c[0], setSelected = _c[1];
51
+ var _d = React.useState(""), guid = _d[0], setGuid = _d[1];
52
+ var _e = React.useState(false), showHelp = _e[0], setShowHelp = _e[1];
53
+ var _f = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _f[0], setPosition = _f[1];
54
+ React.useEffect(function () {
55
+ var updatePosition = _.debounce(function () {
56
+ if (stylableSelect.current != null) {
57
+ var rect = stylableSelect.current.getBoundingClientRect();
58
+ setPosition({ Top: rect.bottom, Left: rect.left, Width: rect.width, Height: rect.height });
59
+ }
60
+ }, 200);
61
+ var handleScroll = function (event) {
62
+ if (tableContainer.current == null)
63
+ return;
64
+ if (event.type === 'scroll' && !tableContainer.current.contains(event.target))
65
+ setShow(false);
66
+ updatePosition();
67
+ };
68
+ if (show) {
69
+ updatePosition();
70
+ window.addEventListener('scroll', handleScroll, true);
71
+ window.addEventListener('resize', updatePosition);
72
+ return function () {
73
+ window.removeEventListener('scroll', handleScroll, true);
74
+ window.removeEventListener('resize', updatePosition);
75
+ updatePosition.cancel();
76
+ };
77
+ }
78
+ }, [show]);
48
79
  // Handle showing and hiding of the dropdown.
49
80
  function HandleShow(evt) {
50
81
  // Ignore if disabled or not a mousedown event
51
- if ((props.Disabled === undefined ? false : props.Disabled) || evt.type !== 'mousedown')
82
+ if ((props.Disabled === undefined ? false : props.Disabled) || evt.type !== 'mousedown' || stylableSelect.current == null)
83
+ return;
84
+ //ignore the click if it was inside the table or table container
85
+ if ((selectTable.current != null && selectTable.current.contains(evt.target)) || (tableContainer.current != null && tableContainer.current.contains(evt.target)))
52
86
  return;
53
87
  if (!stylableSelect.current.contains(evt.target))
54
88
  setShow(false);
@@ -78,7 +112,11 @@ function StylableSelect(props) {
78
112
  var element = props.Options.find(function (e) { return (0, lodash_1.isEqual)(e.Value, props.Record[props.Field]); });
79
113
  setSelected(element !== undefined ? element.Element : React.createElement("div", null));
80
114
  }, [props.Record, props.Options]);
81
- return (React.createElement("div", { ref: stylableSelect, style: { position: 'absolute', display: 'inline-block', width: 'inherit' } },
115
+ var handleOptionClick = function (evt, option) {
116
+ SetRecord(option);
117
+ setShow(false);
118
+ };
119
+ return (React.createElement("div", { ref: stylableSelect, style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
82
120
  (props.Label !== "") ?
83
121
  React.createElement("label", null,
84
122
  props.Label === undefined ? props.Field : props.Label,
@@ -86,21 +124,24 @@ function StylableSelect(props) {
86
124
  props.Help !== undefined ?
87
125
  React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
88
126
  : null,
89
- React.createElement("button", { type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, "data-help": guid, className: "btn form-control dropdown-toggle", onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
127
+ React.createElement("button", { type: "button", style: __assign({ border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), "data-help": guid, className: "btn form-control dropdown-toggle", onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
90
128
  React.createElement("div", { style: props.Style }, selected)),
91
- React.createElement("div", { style: {
92
- maxHeight: window.innerHeight * 0.75,
93
- overflowY: 'auto',
94
- padding: '10 5',
95
- display: show ? 'block' : 'none',
96
- position: 'absolute',
97
- backgroundColor: '#fff',
98
- boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
99
- zIndex: 401,
100
- minWidth: '100%',
101
- } },
102
- React.createElement("table", { className: "table", style: { margin: 0 } },
103
- React.createElement("tbody", null, props.Options.map(function (f, i) { return (f.Value == props.Record[props.Field] ? null :
104
- React.createElement("tr", { key: i, onClick: function (evt) { evt.preventDefault(); SetRecord(f); setShow(false); } },
105
- React.createElement("td", null, f.Element))); }))))));
129
+ React.createElement(react_portal_1.Portal, null,
130
+ React.createElement("div", { ref: tableContainer, style: {
131
+ maxHeight: window.innerHeight - position.Top,
132
+ overflowY: 'auto',
133
+ padding: '10 5',
134
+ display: show ? 'block' : 'none',
135
+ position: 'absolute',
136
+ backgroundColor: '#fff',
137
+ boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
138
+ zIndex: 9999,
139
+ top: "".concat(position.Top, "px"),
140
+ left: "".concat(position.Left, "px"),
141
+ width: "".concat(position.Width, "px"),
142
+ } },
143
+ React.createElement("table", { className: "table", style: { margin: 0 }, ref: selectTable },
144
+ React.createElement("tbody", null, props.Options.map(function (f, i) { return (f.Value === props.Record[props.Field] ? null :
145
+ React.createElement("tr", { key: i, onClick: function (evt) { return handleOptionClick(evt, f); } },
146
+ React.createElement("td", null, f.Element))); })))))));
106
147
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-forms",
3
- "version": "1.1.68",
3
+ "version": "1.1.70",
4
4
  "description": "React Form modules for gpa webapps",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -46,6 +46,7 @@
46
46
  },
47
47
  "dependencies": {
48
48
  "@gpa-gemstone/application-typings": "0.0.75",
49
+ "@gpa-gemstone/gpa-symbols": "0.0.40",
49
50
  "@gpa-gemstone/helper-functions": "0.0.33",
50
51
  "@types/react": "^17.0.14",
51
52
  "@types/styled-components": "^5.1.11",