react-asc 25.7.3 → 25.7.4
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.
- package/index.es.js +13 -9
- package/index.js +13 -9
- package/package.json +1 -1
package/index.es.js
CHANGED
|
@@ -5089,6 +5089,7 @@ const Select = (props) => {
|
|
|
5089
5089
|
const [isShow, setIsShow] = useState(false);
|
|
5090
5090
|
const [selectedOptions, setSelectedOptions] = useState([]);
|
|
5091
5091
|
const selectConainter = useRef(null);
|
|
5092
|
+
const selectMenu = useRef(null);
|
|
5092
5093
|
const getCssClass = () => {
|
|
5093
5094
|
const cssClasses = [];
|
|
5094
5095
|
className && cssClasses.push(className);
|
|
@@ -5109,13 +5110,15 @@ const Select = (props) => {
|
|
|
5109
5110
|
}, [value, options]);
|
|
5110
5111
|
useEffect(() => {
|
|
5111
5112
|
if (hoverIndex) {
|
|
5112
|
-
|
|
5113
|
+
setTimeout(() => {
|
|
5114
|
+
scrollIntoView(hoverIndex);
|
|
5115
|
+
}, 100);
|
|
5113
5116
|
}
|
|
5114
5117
|
}, [hoverIndex, isShow]);
|
|
5115
5118
|
const scrollIntoView = (index) => {
|
|
5116
|
-
const htmlListItem =
|
|
5119
|
+
const htmlListItem = selectMenu.current?.children[0]?.querySelector(`#list-item-${index}`);
|
|
5117
5120
|
if (htmlListItem) {
|
|
5118
|
-
htmlListItem?.scrollIntoView({ block: '
|
|
5121
|
+
htmlListItem?.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
|
5119
5122
|
}
|
|
5120
5123
|
};
|
|
5121
5124
|
const writeValue = (val) => setModel(val);
|
|
@@ -5172,8 +5175,7 @@ const Select = (props) => {
|
|
|
5172
5175
|
const renderMultipleViewModel = () => {
|
|
5173
5176
|
let result = null;
|
|
5174
5177
|
if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
|
|
5175
|
-
result = selectedOptions
|
|
5176
|
-
.map(option => jsx(Chip, { color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option), children: option.label }, option.value));
|
|
5178
|
+
result = selectedOptions.map(option => (jsx(Chip, { color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option), children: option.label }, option.value)));
|
|
5177
5179
|
}
|
|
5178
5180
|
else {
|
|
5179
5181
|
result = jsxs("span", { children: [selectedOptions.length, " Items selected"] });
|
|
@@ -5214,10 +5216,12 @@ const Select = (props) => {
|
|
|
5214
5216
|
}
|
|
5215
5217
|
}
|
|
5216
5218
|
};
|
|
5217
|
-
return (jsxs("div", { ref: selectConainter, className: styles$E.selectContainer, children: [jsx("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e), children: jsxs(Fragment$1, { children: [!multiple && renderSingleViewModel(), multiple &&
|
|
5218
|
-
|
|
5219
|
-
|
|
5220
|
-
|
|
5219
|
+
return (jsxs("div", { ref: selectConainter, className: styles$E.selectContainer, children: [jsx("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e), children: jsxs(Fragment$1, { children: [!multiple && renderSingleViewModel(), multiple && jsx("div", { className: styles$E.chipContainer, children: renderMultipleViewModel() }), jsx(Icon, { className: "ml-auto", children: jsx(ChevronDownSolidIcon, {}) })] }) }), isShow && (jsxs(Portal$1, { className: "backdrop-root", children: [jsx("div", { ref: selectMenu, className: styles$E.selectMenu, style: {
|
|
5220
|
+
left: selectConainter.current?.getBoundingClientRect().x,
|
|
5221
|
+
top: selectConainter.current?.getBoundingClientRect().y,
|
|
5222
|
+
width: selectConainter.current?.getBoundingClientRect().width,
|
|
5223
|
+
}, children: jsx(List, { children: options &&
|
|
5224
|
+
options.map((option, index) => (jsxs(ListItem, { id: `list-item-${index}`, onClick: () => handleOnClick(option), active: isActive(option), children: [multiple && jsx(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }), jsx(ListItemText, { primary: option.label ? option.label : option.value })] }, option.value))) }) }), jsx(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })] }))] }));
|
|
5221
5225
|
};
|
|
5222
5226
|
|
|
5223
5227
|
var css_248z$D = ".Textarea-module_textarea__L5zqa {\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
package/index.js
CHANGED
|
@@ -5091,6 +5091,7 @@ const Select = (props) => {
|
|
|
5091
5091
|
const [isShow, setIsShow] = React.useState(false);
|
|
5092
5092
|
const [selectedOptions, setSelectedOptions] = React.useState([]);
|
|
5093
5093
|
const selectConainter = React.useRef(null);
|
|
5094
|
+
const selectMenu = React.useRef(null);
|
|
5094
5095
|
const getCssClass = () => {
|
|
5095
5096
|
const cssClasses = [];
|
|
5096
5097
|
className && cssClasses.push(className);
|
|
@@ -5111,13 +5112,15 @@ const Select = (props) => {
|
|
|
5111
5112
|
}, [value, options]);
|
|
5112
5113
|
React.useEffect(() => {
|
|
5113
5114
|
if (hoverIndex) {
|
|
5114
|
-
|
|
5115
|
+
setTimeout(() => {
|
|
5116
|
+
scrollIntoView(hoverIndex);
|
|
5117
|
+
}, 100);
|
|
5115
5118
|
}
|
|
5116
5119
|
}, [hoverIndex, isShow]);
|
|
5117
5120
|
const scrollIntoView = (index) => {
|
|
5118
|
-
const htmlListItem =
|
|
5121
|
+
const htmlListItem = selectMenu.current?.children[0]?.querySelector(`#list-item-${index}`);
|
|
5119
5122
|
if (htmlListItem) {
|
|
5120
|
-
htmlListItem?.scrollIntoView({ block: '
|
|
5123
|
+
htmlListItem?.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
|
5121
5124
|
}
|
|
5122
5125
|
};
|
|
5123
5126
|
const writeValue = (val) => setModel(val);
|
|
@@ -5174,8 +5177,7 @@ const Select = (props) => {
|
|
|
5174
5177
|
const renderMultipleViewModel = () => {
|
|
5175
5178
|
let result = null;
|
|
5176
5179
|
if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
|
|
5177
|
-
result = selectedOptions
|
|
5178
|
-
.map(option => jsxRuntime.jsx(Chip, { color: exports.COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option), children: option.label }, option.value));
|
|
5180
|
+
result = selectedOptions.map(option => (jsxRuntime.jsx(Chip, { color: exports.COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option), children: option.label }, option.value)));
|
|
5179
5181
|
}
|
|
5180
5182
|
else {
|
|
5181
5183
|
result = jsxRuntime.jsxs("span", { children: [selectedOptions.length, " Items selected"] });
|
|
@@ -5216,10 +5218,12 @@ const Select = (props) => {
|
|
|
5216
5218
|
}
|
|
5217
5219
|
}
|
|
5218
5220
|
};
|
|
5219
|
-
return (jsxRuntime.jsxs("div", { ref: selectConainter, className: styles$E.selectContainer, children: [jsxRuntime.jsx("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!multiple && renderSingleViewModel(), multiple &&
|
|
5220
|
-
|
|
5221
|
-
|
|
5222
|
-
|
|
5221
|
+
return (jsxRuntime.jsxs("div", { ref: selectConainter, className: styles$E.selectContainer, children: [jsxRuntime.jsx("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!multiple && renderSingleViewModel(), multiple && jsxRuntime.jsx("div", { className: styles$E.chipContainer, children: renderMultipleViewModel() }), jsxRuntime.jsx(Icon, { className: "ml-auto", children: jsxRuntime.jsx(ChevronDownSolidIcon, {}) })] }) }), isShow && (jsxRuntime.jsxs(Portal$1, { className: "backdrop-root", children: [jsxRuntime.jsx("div", { ref: selectMenu, className: styles$E.selectMenu, style: {
|
|
5222
|
+
left: selectConainter.current?.getBoundingClientRect().x,
|
|
5223
|
+
top: selectConainter.current?.getBoundingClientRect().y,
|
|
5224
|
+
width: selectConainter.current?.getBoundingClientRect().width,
|
|
5225
|
+
}, children: jsxRuntime.jsx(List, { children: options &&
|
|
5226
|
+
options.map((option, index) => (jsxRuntime.jsxs(ListItem, { id: `list-item-${index}`, onClick: () => handleOnClick(option), active: isActive(option), children: [multiple && jsxRuntime.jsx(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }), jsxRuntime.jsx(ListItemText, { primary: option.label ? option.label : option.value })] }, option.value))) }) }), jsxRuntime.jsx(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })] }))] }));
|
|
5223
5227
|
};
|
|
5224
5228
|
|
|
5225
5229
|
var css_248z$D = ".Textarea-module_textarea__L5zqa {\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|