@antscorp/antsomi-ui 1.3.5-beta.912 → 1.3.5-beta.914

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/es/components/molecules/MatchAnySelect/MatchesAnySelect.js +8 -3
  2. package/package.json +1 -1
package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js CHANGED
@@ -48,6 +48,7 @@ export function MatchesAny(props) {
48
48
  const [state, setState] = useState(matchesAnyInitialState);
49
49
  const [maxItemsError, setMaxItemsError] = useState(false);
50
50
  const [itemOverMaxLength, setItemOverMaxLength] = useState(false);
51
+ const [isApply, setIsApply] = useState(false);
51
52
  // Variables
52
53
  const { selectedItems, selectedTreeData, isShowLoadMoreEl, expandedKeys, selectedExpandedKeys } = state;
53
54
  const { icon: listEmptyIcon = _jsx(LongerIcon, {}), description: listEmptyDescription = (_jsx("div", { dangerouslySetInnerHTML: { __html: t(translations.matchesAnySelect.noData) } })), ...restListEmptyProps } = listEmptyProps || {};
@@ -57,7 +58,9 @@ export function MatchesAny(props) {
57
58
  const isSomeTextTooLong = selectedItems && selectedItems.some(item => item.key?.toString().length > maxLengthEachItem);
58
59
  setMaxItemsError(!!isOverMaxSelected);
59
60
  setItemOverMaxLength(!!isSomeTextTooLong);
60
- }, [selectedItems, maxSelectedItem, maxLengthEachItem]);
61
+ if (isApply && !isOverMaxSelected && !isSomeTextTooLong)
62
+ setIsApply(false);
63
+ }, [selectedItems, maxSelectedItem, maxLengthEachItem, isApply]);
61
64
  // Refs
62
65
  const { ref: loadMoreRef } = useIntersectionObserver({
63
66
  threshold: 0,
@@ -172,8 +175,10 @@ export function MatchesAny(props) {
172
175
  setState(prev => ({ ...prev, selectedItems: [], selectedTreeData: [] }));
173
176
  };
174
177
  const onClickApply = () => {
175
- if (maxItemsError || itemOverMaxLength)
178
+ if (maxItemsError || itemOverMaxLength) {
179
+ setIsApply(true);
176
180
  return;
181
+ }
177
182
  onApply(selectedItems || [], selectedTreeData || []);
178
183
  };
179
184
  const handleClickRemoveInvalid = () => {
@@ -368,7 +373,7 @@ export function MatchesAny(props) {
368
373
  }));
369
374
  }
370
375
  };
371
- return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: translate(translationsLocale._ACT_APPLY) }), _jsx(Button, { onClick: () => onCancel(), children: translate(translationsLocale._ACT_CANCEL) }), (maxItemsError || itemOverMaxLength) && (_jsxs(_Fragment, { children: [_jsx(Typography, { style: { color: globalToken?.colorError }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT) }), itemOverMaxLength && (_jsx(Button, { type: "text", onClick: handleClickRemoveInvalid, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT_REMOVE_INV) }))] }))] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: t(translations.extendValue.title).toString() }) }))] })] }) }));
376
+ return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: translate(translationsLocale._ACT_APPLY) }), _jsx(Button, { onClick: () => onCancel(), children: translate(translationsLocale._ACT_CANCEL) }), isApply && (maxItemsError || itemOverMaxLength) && (_jsxs(_Fragment, { children: [_jsx(Typography, { style: { color: globalToken?.colorError }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT) }), itemOverMaxLength && (_jsx(Button, { type: "text", onClick: handleClickRemoveInvalid, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT_REMOVE_INV) }))] }))] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: t(translations.extendValue.title).toString() }) }))] })] }) }));
372
377
  }
373
378
  export function MatchesAnySelect(props) {
374
379
  const { maxSelectedItem, maxLengthEachItem = 200, placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, error, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.912",
3
+ "version": "1.3.5-beta.914",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",