@etsoo/materialui 1.1.50 → 1.1.52

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 (3) hide show
  1. package/lib/TagList.js +9 -4
  2. package/package.json +1 -1
  3. package/src/TagList.tsx +12 -1
package/lib/TagList.js CHANGED
@@ -12,26 +12,31 @@ export function TagList(props) {
12
12
  // Destruct
13
13
  const { renderOption = (props, option, { selected }) => (React.createElement("li", { ...props },
14
14
  React.createElement(Checkbox, { icon: React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: React.createElement(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }),
15
- option)), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, label, inputProps, ...rest } = props;
15
+ option)), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, ...rest } = props;
16
16
  const [open, setOpen] = React.useState(false);
17
17
  const [options, setOptions] = React.useState([]);
18
- const loading = open && options.length === 0;
18
+ const [loading, setLoading] = React.useState(false);
19
19
  const loadDataLocal = async (keyword) => {
20
20
  var _a;
21
+ setLoading(true);
21
22
  const result = (_a = (await loadData(keyword, maxItems))) !== null && _a !== void 0 ? _a : [];
22
23
  if (result.length >= maxItems) {
23
24
  result.push(moreLabel);
24
25
  }
25
26
  setOptions(result);
27
+ setLoading(false);
26
28
  };
27
- return (React.createElement(Autocomplete, { multiple: true, freeSolo: true, open: open, onOpen: () => {
29
+ return (React.createElement(Autocomplete, { multiple: true, freeSolo: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
28
30
  setOpen(true);
29
31
  if (options.length === 0) {
30
32
  loadDataLocal();
31
33
  }
32
34
  }, onClose: () => {
33
35
  setOpen(false);
34
- }, options: options, loading: loading, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
36
+ }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
37
+ // Stop bubble
38
+ event.preventDefault();
39
+ event.stopPropagation();
35
40
  await loadDataLocal(event.target.value);
36
41
  }, ...inputProps, ...params })), getOptionDisabled: (item) => {
37
42
  return item === moreLabel;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.1.50",
3
+ "version": "1.1.52",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/TagList.tsx CHANGED
@@ -66,6 +66,8 @@ export function TagList(props: TagListProps) {
66
66
  openText = openDefault,
67
67
  loadData,
68
68
  maxItems = 16,
69
+ disableCloseOnSelect = true,
70
+ openOnFocus = true,
69
71
  label,
70
72
  inputProps,
71
73
  ...rest
@@ -73,20 +75,23 @@ export function TagList(props: TagListProps) {
73
75
 
74
76
  const [open, setOpen] = React.useState(false);
75
77
  const [options, setOptions] = React.useState<readonly string[]>([]);
76
- const loading = open && options.length === 0;
78
+ const [loading, setLoading] = React.useState(false);
77
79
 
78
80
  const loadDataLocal = async (keyword?: string) => {
81
+ setLoading(true);
79
82
  const result = (await loadData(keyword, maxItems)) ?? [];
80
83
  if (result.length >= maxItems) {
81
84
  result.push(moreLabel);
82
85
  }
83
86
  setOptions(result);
87
+ setLoading(false);
84
88
  };
85
89
 
86
90
  return (
87
91
  <Autocomplete<string, true, false, true>
88
92
  multiple
89
93
  freeSolo
94
+ filterOptions={(options, _state) => options}
90
95
  open={open}
91
96
  onOpen={() => {
92
97
  setOpen(true);
@@ -99,6 +104,8 @@ export function TagList(props: TagListProps) {
99
104
  }}
100
105
  options={options}
101
106
  loading={loading}
107
+ disableCloseOnSelect={disableCloseOnSelect}
108
+ openOnFocus={openOnFocus}
102
109
  renderOption={renderOption}
103
110
  renderTags={renderTags}
104
111
  renderInput={(params) => (
@@ -106,6 +113,10 @@ export function TagList(props: TagListProps) {
106
113
  label={label}
107
114
  changeDelay={480}
108
115
  onChange={async (event) => {
116
+ // Stop bubble
117
+ event.preventDefault();
118
+ event.stopPropagation();
119
+
109
120
  await loadDataLocal(event.target.value);
110
121
  }}
111
122
  {...inputProps}