armtek-uikit-react 1.0.99 → 1.0.101

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 (2) hide show
  1. package/package.json +1 -1
  2. package/ui/Form/Select/Select.js +87 -48
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"armtek-uikit-react","version":"1.0.99","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
1
+ {"name":"armtek-uikit-react","version":"1.0.101","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
package/ui/Form/Select/Select.js CHANGED
@@ -1,9 +1,10 @@
1
1
  "use client";
2
2
 
3
3
  import TextField from "../TextField/TextField";
4
- import { forwardRef, useState } from 'react';
4
+ import { forwardRef, useRef, useState } from 'react';
5
5
  import clsx from 'clsx';
6
6
  import ListItem from "../../List/ListItem";
7
+ import useClickOutside from "../../../lib/hooks/useClickOutside";
7
8
  import css from "./Select.module.scss";
8
9
  import ButtonIcon from "../../ButtonIcon";
9
10
  import Adornment from "../../Adornment";
@@ -45,11 +46,14 @@ function Select(props) {
45
46
  let [selected, setSelected] = useState(defaultValue || (multiple ? [] : ''));
46
47
  let [focused, setFocused] = useState(false);
47
48
  let [q, setQ] = useState('');
48
- const [anchorEl, setAnchorEl] = useState(null);
49
+ // const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null)
50
+ const anchorEl = useRef(null);
51
+ const inlineOptRef = useClickOutside(handleClose);
49
52
  const handleOpen = e => {
50
53
  if (!inputProps.disabled) {
51
54
  setActive(true);
52
- if (e.target instanceof HTMLDivElement) setAnchorEl(e.currentTarget);
55
+ // if( e.target instanceof HTMLDivElement )
56
+ // setAnchorEl(e.currentTarget)
53
57
  }
54
58
  };
55
59
  const handleSelect = (e, option) => {
@@ -115,53 +119,73 @@ function Select(props) {
115
119
  if (!!search) options = options.filter(item => item.text.toLowerCase().includes(q.toLowerCase()));
116
120
  let valueArr = realValue ? Array.isArray(realValue) ? realValue : [realValue] : [];
117
121
  let selectedOptions = options.filter(item => valueArr.includes(getOptionValue(item)));
118
- const handleClose = () => {
122
+ function handleClose() {
119
123
  if (onClose) onClose();else setActive(false);
120
- };
121
- return /*#__PURE__*/_jsxs(_Fragment, {
122
- children: [/*#__PURE__*/_jsxs("div", {
123
- className: css.select,
124
- children: [/*#__PURE__*/_jsx("div", {
125
- className: css.select__input_wrapper,
126
- onClick: handleOpen,
127
- children: /*#__PURE__*/_jsx(TextField, {
128
- ...inputProps,
129
- onChange: handleSearch,
130
- focused: focused,
131
- onFocus: handleFocus,
132
- onBlur: handleBlur,
133
- value: !search ? selectedText : q,
134
- className: clsx(css.select__input, className),
135
- endAdornment: selectEndAdornment,
136
- style: {
137
- pointerEvents: 'none'
138
- },
139
- editable: !!search
124
+ }
125
+ console.log(realActive);
126
+ console.log(anchorEl);
127
+ return /*#__PURE__*/_jsx(_Fragment, {
128
+ children: /*#__PURE__*/_jsxs("div", {
129
+ className: className,
130
+ children: [/*#__PURE__*/_jsxs("div", {
131
+ className: css.select,
132
+ children: [/*#__PURE__*/_jsx("div", {
133
+ className: css.select__input_wrapper,
134
+ onClick: handleOpen,
135
+ ref: anchorEl,
136
+ children: /*#__PURE__*/_jsx(TextField, {
137
+ ...inputProps,
138
+ onChange: handleSearch,
139
+ focused: focused,
140
+ onFocus: handleFocus,
141
+ onBlur: handleBlur,
142
+ value: !search ? selectedText : q,
143
+ className: clsx(css.select__input),
144
+ endAdornment: selectEndAdornment,
145
+ style: {
146
+ pointerEvents: 'none'
147
+ },
148
+ editable: !!search
149
+ })
150
+ }), multiple && !realActive && /*#__PURE__*/_jsx(SelectSummaryChips, {
151
+ options: selectedOptions,
152
+ disabled: inputProps.disabled,
153
+ onDelete: handleSelect
154
+ })]
155
+ }), realActive && (!inline && anchorEl.current ? /*#__PURE__*/_jsx(Popover, {
156
+ matchWidth: true,
157
+ anchorEl: anchorEl.current,
158
+ open: realActive,
159
+ onClose: handleClose,
160
+ placement: 'bottom-start',
161
+ children: /*#__PURE__*/_jsx(SelectOptions, {
162
+ disabled: inputProps.disabled,
163
+ options: options,
164
+ multiple: multiple,
165
+ value: realValue,
166
+ inline: inline,
167
+ listStyle: listStyle,
168
+ onClick: handleSelect,
169
+ onClearAll: handleResetAll,
170
+ onSelectAll: handleSelectAll,
171
+ onSubmit: handleSubmit
140
172
  })
141
- }), multiple && !realActive && /*#__PURE__*/_jsx(SelectSummaryChips, {
142
- options: selectedOptions,
143
- disabled: inputProps.disabled,
144
- onDelete: handleSelect
145
- })]
146
- }), realActive && anchorEl && /*#__PURE__*/_jsx(Popover, {
147
- matchWidth: true,
148
- anchorEl: anchorEl,
149
- open: realActive,
150
- onClose: handleClose,
151
- placement: 'bottom-start',
152
- children: /*#__PURE__*/_jsx(SelectOptions, {
153
- disabled: inputProps.disabled,
154
- options: options,
155
- multiple: multiple,
156
- value: realValue,
157
- inline: inline,
158
- listStyle: listStyle,
159
- onClick: handleSelect,
160
- onClearAll: handleResetAll,
161
- onSelectAll: handleSelectAll,
162
- onSubmit: handleSubmit
163
- })
164
- })]
173
+ }) : /*#__PURE__*/_jsx("div", {
174
+ ref: inlineOptRef,
175
+ children: /*#__PURE__*/_jsx(SelectOptions, {
176
+ disabled: inputProps.disabled,
177
+ options: options,
178
+ multiple: multiple,
179
+ value: realValue,
180
+ inline: inline,
181
+ listStyle: listStyle,
182
+ onClick: handleSelect,
183
+ onClearAll: handleResetAll,
184
+ onSelectAll: handleSelectAll,
185
+ onSubmit: handleSubmit
186
+ })
187
+ }))]
188
+ })
165
189
  });
166
190
  }
167
191
  const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {
@@ -205,4 +229,19 @@ const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {
205
229
  })
206
230
  });
207
231
  });
232
+
233
+ // export const SelectTest = (props: SelectProps) => {
234
+ // return <Select inline={true} listStyle={'checkbox'} defaultValue={['1', '12312']} multiple={true} label={'TEST '} disabled={true} open={true} options={[{
235
+ // text: '1'
236
+ // },{
237
+ // text: 'aasdasdasdasd'
238
+ // },{
239
+ // text: '12312'
240
+ // },{
241
+ // text: 'gadadsasd'
242
+ // },{
243
+ // text: '123123123'
244
+ // },]} />
245
+ // }
246
+
208
247
  export default Select;