@redneckz/wildless-cms-uni-blocks 0.14.908 → 0.14.910
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/bundle/bundle.umd.js +86 -70
- package/bundle/bundle.umd.min.js +1 -1
- package/bundle/ui-kit/Select/Select.d.ts +6 -0
- package/bundle/ui-kit/Select/SelectPopup.d.ts +1 -0
- package/bundle/ui-kit/Select/filterOptions.d.ts +1 -1
- package/bundle/ui-kit/Select/renderIcon.d.ts +2 -0
- package/bundle/ui-kit/Select/renderOptionText.d.ts +9 -0
- package/bundle/ui-kit/Select/renderSearchInput.d.ts +9 -0
- package/bundle/ui-kit/Select/renderSelectContainer.d.ts +15 -0
- package/bundle/ui-kit/Select/useSelectPopup.d.ts +2 -1
- package/dist/ui-kit/FormField/Fields/InnDadataField.js +5 -2
- package/dist/ui-kit/FormField/Fields/InnDadataField.js.map +1 -1
- package/dist/ui-kit/Select/Select.d.ts +6 -0
- package/dist/ui-kit/Select/Select.js +31 -40
- package/dist/ui-kit/Select/Select.js.map +1 -1
- package/dist/ui-kit/Select/SelectPopup.d.ts +1 -0
- package/dist/ui-kit/Select/SelectPopup.js +2 -2
- package/dist/ui-kit/Select/SelectPopup.js.map +1 -1
- package/dist/ui-kit/Select/filterOptions.d.ts +1 -1
- package/dist/ui-kit/Select/filterOptions.js +2 -2
- package/dist/ui-kit/Select/filterOptions.js.map +1 -1
- package/dist/ui-kit/Select/renderIcon.d.ts +2 -0
- package/dist/ui-kit/Select/renderIcon.js +8 -0
- package/dist/ui-kit/Select/renderIcon.js.map +1 -0
- package/dist/ui-kit/Select/renderOptionText.d.ts +9 -0
- package/dist/ui-kit/Select/renderOptionText.js +11 -0
- package/dist/ui-kit/Select/renderOptionText.js.map +1 -0
- package/dist/ui-kit/Select/renderSearchInput.d.ts +9 -0
- package/dist/ui-kit/Select/renderSearchInput.js +7 -0
- package/dist/ui-kit/Select/renderSearchInput.js.map +1 -0
- package/dist/ui-kit/Select/renderSelectContainer.d.ts +15 -0
- package/dist/ui-kit/Select/renderSelectContainer.js +18 -0
- package/dist/ui-kit/Select/renderSelectContainer.js.map +1 -0
- package/dist/ui-kit/Select/useSelectPopup.d.ts +2 -1
- package/dist/ui-kit/Select/useSelectPopup.js +6 -5
- package/dist/ui-kit/Select/useSelectPopup.js.map +1 -1
- package/lib/common.css +1 -1
- package/lib/ui-kit/FormField/Fields/InnDadataField.js +5 -2
- package/lib/ui-kit/FormField/Fields/InnDadataField.js.map +1 -1
- package/lib/ui-kit/Select/Select.d.ts +6 -0
- package/lib/ui-kit/Select/Select.js +32 -41
- package/lib/ui-kit/Select/Select.js.map +1 -1
- package/lib/ui-kit/Select/SelectPopup.d.ts +1 -0
- package/lib/ui-kit/Select/SelectPopup.js +2 -2
- package/lib/ui-kit/Select/SelectPopup.js.map +1 -1
- package/lib/ui-kit/Select/filterOptions.d.ts +1 -1
- package/lib/ui-kit/Select/filterOptions.js +2 -2
- package/lib/ui-kit/Select/filterOptions.js.map +1 -1
- package/lib/ui-kit/Select/renderIcon.d.ts +2 -0
- package/lib/ui-kit/Select/renderIcon.js +5 -0
- package/lib/ui-kit/Select/renderIcon.js.map +1 -0
- package/lib/ui-kit/Select/renderOptionText.d.ts +9 -0
- package/lib/ui-kit/Select/renderOptionText.js +8 -0
- package/lib/ui-kit/Select/renderOptionText.js.map +1 -0
- package/lib/ui-kit/Select/renderSearchInput.d.ts +9 -0
- package/lib/ui-kit/Select/renderSearchInput.js +4 -0
- package/lib/ui-kit/Select/renderSearchInput.js.map +1 -0
- package/lib/ui-kit/Select/renderSelectContainer.d.ts +15 -0
- package/lib/ui-kit/Select/renderSelectContainer.js +15 -0
- package/lib/ui-kit/Select/renderSelectContainer.js.map +1 -0
- package/lib/ui-kit/Select/useSelectPopup.d.ts +2 -1
- package/lib/ui-kit/Select/useSelectPopup.js +6 -5
- package/lib/ui-kit/Select/useSelectPopup.js.map +1 -1
- package/mobile/bundle/bundle.umd.js +86 -70
- package/mobile/bundle/bundle.umd.min.js +1 -1
- package/mobile/bundle/ui-kit/Select/Select.d.ts +6 -0
- package/mobile/bundle/ui-kit/Select/SelectPopup.d.ts +1 -0
- package/mobile/bundle/ui-kit/Select/filterOptions.d.ts +1 -1
- package/mobile/bundle/ui-kit/Select/renderIcon.d.ts +2 -0
- package/mobile/bundle/ui-kit/Select/renderOptionText.d.ts +9 -0
- package/mobile/bundle/ui-kit/Select/renderSearchInput.d.ts +9 -0
- package/mobile/bundle/ui-kit/Select/renderSelectContainer.d.ts +15 -0
- package/mobile/bundle/ui-kit/Select/useSelectPopup.d.ts +2 -1
- package/mobile/dist/ui-kit/FormField/Fields/InnDadataField.js +5 -2
- package/mobile/dist/ui-kit/FormField/Fields/InnDadataField.js.map +1 -1
- package/mobile/dist/ui-kit/Select/Select.d.ts +6 -0
- package/mobile/dist/ui-kit/Select/Select.js +31 -40
- package/mobile/dist/ui-kit/Select/Select.js.map +1 -1
- package/mobile/dist/ui-kit/Select/SelectPopup.d.ts +1 -0
- package/mobile/dist/ui-kit/Select/SelectPopup.js +2 -2
- package/mobile/dist/ui-kit/Select/SelectPopup.js.map +1 -1
- package/mobile/dist/ui-kit/Select/filterOptions.d.ts +1 -1
- package/mobile/dist/ui-kit/Select/filterOptions.js +2 -2
- package/mobile/dist/ui-kit/Select/filterOptions.js.map +1 -1
- package/mobile/dist/ui-kit/Select/renderIcon.d.ts +2 -0
- package/mobile/dist/ui-kit/Select/renderIcon.js +8 -0
- package/mobile/dist/ui-kit/Select/renderIcon.js.map +1 -0
- package/mobile/dist/ui-kit/Select/renderOptionText.d.ts +9 -0
- package/mobile/dist/ui-kit/Select/renderOptionText.js +11 -0
- package/mobile/dist/ui-kit/Select/renderOptionText.js.map +1 -0
- package/mobile/dist/ui-kit/Select/renderSearchInput.d.ts +9 -0
- package/mobile/dist/ui-kit/Select/renderSearchInput.js +7 -0
- package/mobile/dist/ui-kit/Select/renderSearchInput.js.map +1 -0
- package/mobile/dist/ui-kit/Select/renderSelectContainer.d.ts +15 -0
- package/mobile/dist/ui-kit/Select/renderSelectContainer.js +18 -0
- package/mobile/dist/ui-kit/Select/renderSelectContainer.js.map +1 -0
- package/mobile/dist/ui-kit/Select/useSelectPopup.d.ts +2 -1
- package/mobile/dist/ui-kit/Select/useSelectPopup.js +6 -5
- package/mobile/dist/ui-kit/Select/useSelectPopup.js.map +1 -1
- package/mobile/lib/common.css +1 -1
- package/mobile/lib/ui-kit/FormField/Fields/InnDadataField.js +5 -2
- package/mobile/lib/ui-kit/FormField/Fields/InnDadataField.js.map +1 -1
- package/mobile/lib/ui-kit/Select/Select.d.ts +6 -0
- package/mobile/lib/ui-kit/Select/Select.js +32 -41
- package/mobile/lib/ui-kit/Select/Select.js.map +1 -1
- package/mobile/lib/ui-kit/Select/SelectPopup.d.ts +1 -0
- package/mobile/lib/ui-kit/Select/SelectPopup.js +2 -2
- package/mobile/lib/ui-kit/Select/SelectPopup.js.map +1 -1
- package/mobile/lib/ui-kit/Select/filterOptions.d.ts +1 -1
- package/mobile/lib/ui-kit/Select/filterOptions.js +2 -2
- package/mobile/lib/ui-kit/Select/filterOptions.js.map +1 -1
- package/mobile/lib/ui-kit/Select/renderIcon.d.ts +2 -0
- package/mobile/lib/ui-kit/Select/renderIcon.js +5 -0
- package/mobile/lib/ui-kit/Select/renderIcon.js.map +1 -0
- package/mobile/lib/ui-kit/Select/renderOptionText.d.ts +9 -0
- package/mobile/lib/ui-kit/Select/renderOptionText.js +8 -0
- package/mobile/lib/ui-kit/Select/renderOptionText.js.map +1 -0
- package/mobile/lib/ui-kit/Select/renderSearchInput.d.ts +9 -0
- package/mobile/lib/ui-kit/Select/renderSearchInput.js +4 -0
- package/mobile/lib/ui-kit/Select/renderSearchInput.js.map +1 -0
- package/mobile/lib/ui-kit/Select/renderSelectContainer.d.ts +15 -0
- package/mobile/lib/ui-kit/Select/renderSelectContainer.js +15 -0
- package/mobile/lib/ui-kit/Select/renderSelectContainer.js.map +1 -0
- package/mobile/lib/ui-kit/Select/useSelectPopup.d.ts +2 -1
- package/mobile/lib/ui-kit/Select/useSelectPopup.js +6 -5
- package/mobile/lib/ui-kit/Select/useSelectPopup.js.map +1 -1
- package/mobile/src/ui-kit/FormField/Fields/InnDadataField.tsx +7 -2
- package/mobile/src/ui-kit/Select/Select.tsx +46 -105
- package/mobile/src/ui-kit/Select/SelectPopup.tsx +13 -3
- package/mobile/src/ui-kit/Select/filterOptions.ts +6 -2
- package/mobile/src/ui-kit/Select/renderIcon.tsx +13 -0
- package/mobile/src/ui-kit/Select/renderOptionText.tsx +22 -0
- package/mobile/src/ui-kit/Select/renderSearchInput.tsx +28 -0
- package/mobile/src/ui-kit/Select/renderSelectContainer.tsx +60 -0
- package/mobile/src/ui-kit/Select/useSelectPopup.tsx +11 -7
- package/package.json +1 -1
- package/src/ui-kit/FormField/Fields/InnDadataField.tsx +7 -2
- package/src/ui-kit/Select/Select.tsx +46 -105
- package/src/ui-kit/Select/SelectPopup.tsx +13 -3
- package/src/ui-kit/Select/filterOptions.ts +6 -2
- package/src/ui-kit/Select/renderIcon.tsx +13 -0
- package/src/ui-kit/Select/renderOptionText.tsx +22 -0
- package/src/ui-kit/Select/renderSearchInput.tsx +28 -0
- package/src/ui-kit/Select/renderSelectContainer.tsx +60 -0
- package/src/ui-kit/Select/useSelectPopup.tsx +11 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectPopup.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/useSelectPopup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAE9E,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"useSelectPopup.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/useSelectPopup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAE9E,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AAQnE,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,GAAG,IAAI,EACf,OAAO,GAAG,IAAI,EACd,WAAW,EACX,oBAAoB,GAAG,KAAK,EAC5B,aAAa,GAAG,IAAI,GACD;IACnB,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAEhC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,KAAK,CAAC,KAAK,EAAE,CAAC;QACd,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,MAAc,EAAE,EAAE;QACjB,KAAK,EAAE,CAAC;QACR,QAAQ,CAAC,MAAM,CAAC,CAAC;QACjB,aAAa,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,CAAC,CAClB,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,eAAe,CAAiB,KAAK,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAChC,OAAO;SACR;QAED,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC;QACtC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;QAE1E,KAAK,CAAC,IAAI,CAAC;YACT,KAAK,EAAE,CACL,KAAC,WAAW,IACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,oBAAoB,EAAE,oBAAoB,EAC1C,QAAQ,EAAE,YAAY,EACtB,aAAa,EAAE,aAAa,GAC5B,CACH;YACD,GAAG,EAAE,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM;YAClC,IAAI;YACJ,KAAK;SACN,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAElD,OAAO,QAAQ,CAAC;AAClB,CAAC"}
|
|
@@ -1894,8 +1894,6 @@
|
|
|
1894
1894
|
return debouncedCallback;
|
|
1895
1895
|
};
|
|
1896
1896
|
|
|
1897
|
-
const formatOption = (_) => _?.text || _?.key || '';
|
|
1898
|
-
|
|
1899
1897
|
function useEventListener(target, type, listener, options) {
|
|
1900
1898
|
useEffect(() => {
|
|
1901
1899
|
if (!target || !listener) {
|
|
@@ -1919,35 +1917,78 @@
|
|
|
1919
1917
|
return targetRef;
|
|
1920
1918
|
}
|
|
1921
1919
|
|
|
1920
|
+
const InputWrapper = JSX(({ className, label, value = '', error, errors, type, isInteger, placeholder, maxLength, inputRef, isOpen, onOpen, onClose, onChange = noop, ...rest }) => {
|
|
1921
|
+
const popupRef = useOutsideClick(onClose);
|
|
1922
|
+
const handleChange = useCallback((v) => {
|
|
1923
|
+
const isOverMax = maxLength && v.length > maxLength;
|
|
1924
|
+
!isOpen && onOpen();
|
|
1925
|
+
if (!isOverMax) {
|
|
1926
|
+
onChange(normalizeInteger(v, isInteger));
|
|
1927
|
+
}
|
|
1928
|
+
}, [isOpen, onChange]);
|
|
1929
|
+
return (jsxs("div", { className: style('shrink-0 w-full', className), ref: popupRef, onBlur: onClose, onFocus: onOpen, children: [jsx("div", { ref: inputRef, children: jsx(Input, { type: type || 'text', "aria-label": label, label: getRequiredLabel({ label, errors }), valid: Boolean(!error), onChange: handleChange, placeholder: getPlaceholder({ placeholder, errors, label }), value: value, ...rest }) }), renderErrorText(error)] }));
|
|
1930
|
+
});
|
|
1931
|
+
const normalizeInteger = (val = '', isInteger = false) => isInteger && val ? val.replace(/[^\d]+/g, '') : val;
|
|
1932
|
+
const getPlaceholder = ({ placeholder, errors, label }) => errors && !label ? `${placeholder}*` : placeholder;
|
|
1933
|
+
|
|
1934
|
+
const InputControl = JSX((props) => {
|
|
1935
|
+
const [isOpen, { setFalse: close, setTrue: open }] = useBool();
|
|
1936
|
+
return jsx(InputWrapper, { isOpen: isOpen, onOpen: open, onClose: close, ...props });
|
|
1937
|
+
});
|
|
1938
|
+
|
|
1939
|
+
const renderSearchInput = ({ query, isDisabled, onChangeQuery, inputProps, }) => (jsx("div", { className: "absolute top-0 w-full z-20", children: jsx(InputControl, { type: "text", value: query, autoFocus: true, disabled: isDisabled, onChange: (value) => onChangeQuery(value), maxLength: inputProps?.maxLength, isInteger: inputProps?.isInteger ?? false }) }));
|
|
1940
|
+
|
|
1941
|
+
const renderIcon$2 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-0 flex self-center', { 'rotate-180': !isOpen }), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
|
|
1942
|
+
|
|
1943
|
+
const formatOption = (_) => _?.text || _?.key || '';
|
|
1944
|
+
|
|
1945
|
+
const renderOptionText = ({ isManualInput, query, value, placeholder, }) => {
|
|
1946
|
+
if (isManualInput && query) {
|
|
1947
|
+
return query;
|
|
1948
|
+
}
|
|
1949
|
+
return formatOption(value) || placeholder;
|
|
1950
|
+
};
|
|
1951
|
+
|
|
1952
|
+
const renderSelectContainer = ({ isBorder = true, valid = true, isDisabled = false, isOpen = false, onOpen, onClose, isManualInput = false, query = '', value, placeholder = '', iconVersion = 'black', options = [], }) => {
|
|
1953
|
+
const isIconHidden = getIconHidden(isManualInput, options, query);
|
|
1954
|
+
return (jsxs("div", { className: style({ 'border rounded-md': isBorder }, { 'hover:border-primary-hover': isBorder && !isDisabled }, isDisabled ? 'bg-main-divider' : 'cursor-pointer ', valid ? 'border-gray' : 'border-error', 'h-14 [&>*]:p-m pr-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden'), onClick: isOpen ? onClose : onOpen, children: [jsx("p", { className: "line-clamp-2 text-ellipsis", children: renderOptionText({ isManualInput, query, value, placeholder }) }), isIconHidden ? '' : renderIcon$2(isOpen, iconVersion)] }));
|
|
1955
|
+
};
|
|
1956
|
+
const getIconHidden = (isManualInput, options, query) => {
|
|
1957
|
+
if (isManualInput && query?.length) {
|
|
1958
|
+
return true;
|
|
1959
|
+
}
|
|
1960
|
+
return isManualInput && !options.length;
|
|
1961
|
+
};
|
|
1962
|
+
|
|
1922
1963
|
const usePopupManager = () => useEmitterWithActions(defaultEventBus.emitter, 'popup');
|
|
1923
1964
|
|
|
1924
|
-
const filterOptions = (options, query) => {
|
|
1925
|
-
if (!options?.length || !query?.trim()) {
|
|
1965
|
+
const filterOptions = (options, query, disableFilterOptions) => {
|
|
1966
|
+
if (!options?.length || !query?.trim() || disableFilterOptions) {
|
|
1926
1967
|
return options;
|
|
1927
1968
|
}
|
|
1928
1969
|
return options.filter((_) => _.text?.toLocaleLowerCase().includes(query?.trim().toLocaleLowerCase()));
|
|
1929
1970
|
};
|
|
1930
1971
|
|
|
1931
|
-
const SelectPopup = JSX(({ popupRef, options, value, query,
|
|
1972
|
+
const SelectPopup = JSX(({ popupRef, options, value, query, iconVersion, disableFilterOptions, onChange, onChangeQuery, }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl", role: "list", ref: popupRef, children: filterOptions(options, query, disableFilterOptions).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", "aria-selected": option.key === value?.key, onClick: (e) => {
|
|
1932
1973
|
e.stopPropagation();
|
|
1933
1974
|
if (onChange) {
|
|
1934
1975
|
onChangeQuery?.('');
|
|
1935
1976
|
onChange(option);
|
|
1936
1977
|
}
|
|
1937
|
-
}, children: [option?.innDaData ? (jsxs("span", { children: [jsx(Text, { size: "text-s", children: option?.innDaData?.companyName }), jsxs("div", { className: "space-x-2", children: [jsx(Text, { size: "text-s", font: "font-light", children: formatOption(option) }), jsx(Text, { size: "text-s", font: "font-light", children: option?.innDaData?.companyAddress })] })] })) : (jsx("span", { className: "min-h-6", children: formatOption(option) })), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", iconVersion: iconVersion, className: style('absolute right-
|
|
1978
|
+
}, children: [option?.innDaData ? (jsxs("span", { children: [jsx(Text, { size: "text-s", children: option?.innDaData?.companyName }), jsxs("div", { className: "space-x-2", children: [jsx(Text, { size: "text-s", font: "font-light", children: formatOption(option) }), jsx(Text, { size: "text-s", font: "font-light", children: option?.innDaData?.companyAddress })] })] })) : (jsx("span", { className: "min-h-6", children: formatOption(option) })), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", iconVersion: iconVersion, className: style('absolute right-2 pt-2xs', {
|
|
1938
1979
|
hidden: option.key !== value?.key,
|
|
1939
1980
|
}) })] }, option.key))) })) : null);
|
|
1940
1981
|
|
|
1941
|
-
function useSelectPopup({ isOpen, options, value, query, onChange, onClose, iconVersion, onChangeQuery, }) {
|
|
1982
|
+
function useSelectPopup({ isOpen, options, value, query, onChange = noop, onClose = noop, iconVersion, disableFilterOptions = false, onChangeQuery = noop, }) {
|
|
1942
1983
|
const popup = usePopupManager();
|
|
1943
1984
|
const close = useCallback(() => {
|
|
1944
1985
|
popup.close();
|
|
1945
|
-
onClose
|
|
1986
|
+
onClose();
|
|
1946
1987
|
}, [onClose]);
|
|
1947
1988
|
const handleChange = useCallback((option) => {
|
|
1948
1989
|
close();
|
|
1949
|
-
onChange
|
|
1950
|
-
onChangeQuery
|
|
1990
|
+
onChange(option);
|
|
1991
|
+
onChangeQuery('');
|
|
1951
1992
|
}, [close, onChange]);
|
|
1952
1993
|
const inputRef = useRef(null);
|
|
1953
1994
|
const popupRef = useOutsideClick(close);
|
|
@@ -1958,7 +1999,7 @@
|
|
|
1958
1999
|
const inputElement = inputRef.current;
|
|
1959
2000
|
const { top, left, width, height } = inputElement.getBoundingClientRect();
|
|
1960
2001
|
popup.open({
|
|
1961
|
-
popup: (jsx(SelectPopup, { popupRef: popupRef, options: options, value: value, query: query,
|
|
2002
|
+
popup: (jsx(SelectPopup, { popupRef: popupRef, options: options, value: value, query: query, iconVersion: iconVersion, disableFilterOptions: disableFilterOptions, onChange: handleChange, onChangeQuery: onChangeQuery })),
|
|
1962
2003
|
top: top + window.scrollY + height,
|
|
1963
2004
|
left,
|
|
1964
2005
|
width,
|
|
@@ -1967,56 +2008,47 @@
|
|
|
1967
2008
|
return inputRef;
|
|
1968
2009
|
}
|
|
1969
2010
|
|
|
1970
|
-
const Select = JSX(({ className, label, options = [], value,
|
|
2011
|
+
const Select = JSX(({ className, label, options = [], value, isSearch = false, isManualInput = false, disabled = false, iconVersion = 'black', onChange, onSearchQuery = noop, inputProps, disableFilterOptions = false, ...rest }) => {
|
|
1971
2012
|
const [isOpen, { setFalse: close, setTrue: open }] = useBool();
|
|
1972
2013
|
const [query, setQuery] = useState('');
|
|
1973
|
-
const isDisabled =
|
|
1974
|
-
const
|
|
1975
|
-
const hasOpen = isOpen && !isDisabled;
|
|
1976
|
-
const debouncedOnSearchQuery = useMemo(() => onSearchQuery && getDebouncedSearchQuery(onSearchQuery), [onSearchQuery]);
|
|
2014
|
+
const isDisabled = disabled || (!isManualInput && options.length === 0);
|
|
2015
|
+
const debouncedOnSearchQuery = useMemo(() => debounce((searchValue) => onSearchQuery(searchValue), 300), [onSearchQuery]);
|
|
1977
2016
|
const handleOpen = useCallback(() => {
|
|
1978
|
-
|
|
1979
|
-
return;
|
|
1980
|
-
}
|
|
1981
|
-
open();
|
|
2017
|
+
isDisabled ? noop() : open();
|
|
1982
2018
|
}, [isDisabled]);
|
|
1983
|
-
const handleChangeQuery = (newQuery) => {
|
|
1984
|
-
setQuery(newQuery);
|
|
1985
|
-
isManualInput && setOption(newQuery, onChange);
|
|
1986
|
-
debouncedOnSearchQuery && debouncedOnSearchQuery(newQuery);
|
|
1987
|
-
};
|
|
1988
2019
|
const handleClose = useCallback(() => {
|
|
1989
2020
|
!isManualInput && setQuery('');
|
|
1990
2021
|
close();
|
|
1991
|
-
}, []);
|
|
2022
|
+
}, [isManualInput]);
|
|
2023
|
+
const handleChangeQuery = useCallback((newQuery) => {
|
|
2024
|
+
setQuery(newQuery);
|
|
2025
|
+
isManualInput && onChange?.({ key: newQuery, text: newQuery, innDaData: {} });
|
|
2026
|
+
debouncedOnSearchQuery?.(newQuery);
|
|
2027
|
+
}, [isManualInput, onChange, debouncedOnSearchQuery]);
|
|
2028
|
+
const selectState = { query, value, options, isOpen, iconVersion };
|
|
1992
2029
|
const inputRef = useSelectPopup({
|
|
1993
|
-
isOpen,
|
|
1994
|
-
options,
|
|
1995
|
-
value,
|
|
1996
|
-
query,
|
|
1997
2030
|
onChange,
|
|
1998
2031
|
onClose: handleClose,
|
|
1999
|
-
|
|
2032
|
+
disableFilterOptions,
|
|
2000
2033
|
onChangeQuery: setQuery,
|
|
2034
|
+
...selectState,
|
|
2001
2035
|
});
|
|
2002
|
-
return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel$1(label), jsxs("div", { className: style('relative',
|
|
2036
|
+
return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel$1(label), jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [renderSelectContainer({
|
|
2037
|
+
isDisabled,
|
|
2038
|
+
onClose: handleClose,
|
|
2039
|
+
onOpen: handleOpen,
|
|
2040
|
+
isManualInput,
|
|
2041
|
+
...selectState,
|
|
2042
|
+
...rest,
|
|
2043
|
+
}), isSearch && isOpen
|
|
2044
|
+
? renderSearchInput({
|
|
2045
|
+
query,
|
|
2046
|
+
isDisabled,
|
|
2047
|
+
inputProps,
|
|
2048
|
+
onChangeQuery: handleChangeQuery,
|
|
2049
|
+
})
|
|
2050
|
+
: null] })] }));
|
|
2003
2051
|
});
|
|
2004
|
-
const useRenderOptionText = (data) => useMemo(() => {
|
|
2005
|
-
if (data.isManualInput && data.query) {
|
|
2006
|
-
return data.query;
|
|
2007
|
-
}
|
|
2008
|
-
return formatOption(data.value) || data.placeholder;
|
|
2009
|
-
}, [data.isManualInput, data.query, data.value, data.placeholder]);
|
|
2010
|
-
const renderSearchInput = (query, isDisabled, onChangeQuery) => (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", value: query, autoFocus: true, disabled: isDisabled, onChange: (value) => onChangeQuery(value) }) }));
|
|
2011
|
-
const renderIcon$2 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-0 flex self-center', { 'rotate-180': !isOpen }), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
|
|
2012
|
-
const getStyle = (isBorder, valid, disabled) => style(isBorder ? 'border rounded-md ' : '', isBorder && !disabled ? 'hover:border-primary-hover' : '', disabled ? 'bg-main-divider' : 'cursor-pointer ', valid ? 'border-gray' : 'border-error');
|
|
2013
|
-
// TODO Нужен рефактор и декомпозиция компонента getDisabled, setOption, getIconHidden
|
|
2014
|
-
const getDisabled = (disabled, length, isManualInput) => disabled || (!isManualInput && length === 0);
|
|
2015
|
-
const setOption = (query, onChange) => {
|
|
2016
|
-
onChange && query.trim() !== '' && onChange({ key: query, text: query, innDaData: {} });
|
|
2017
|
-
};
|
|
2018
|
-
const getIconHidden = (isManualInput, options) => isManualInput && !options.length;
|
|
2019
|
-
const getDebouncedSearchQuery = (onSearchQuery) => debounce((searchValue) => onSearchQuery(searchValue), 300);
|
|
2020
2052
|
|
|
2021
2053
|
const SelectControl = JSX(({ className = '', label, error, errors, ...rest }) => (jsxs("div", { className: className, children: [jsx(Select, { ...rest, valid: !error, label: getRequiredLabel({ label, errors }) }), renderErrorText(error)] })));
|
|
2022
2054
|
|
|
@@ -2213,25 +2245,6 @@
|
|
|
2213
2245
|
const ITEMS_CREDIT_AMOUNT = ['От 1 000 ₽', 'До 1 000 000 000 ₽'];
|
|
2214
2246
|
const AmountField = JSX(({ field, input }) => (jsx(InputRange, { title: "\u0421\u0443\u043C\u043C\u0430, \u20BD", items: ITEMS_CREDIT_AMOUNT, min: MIN_CREDIT_AMOUNT, max: MAX_CREDIT_AMOUNT, ...field(input?.name ?? '') })));
|
|
2215
2247
|
|
|
2216
|
-
const InputWrapper = JSX(({ className, label, value = '', error, errors, type, isInteger, placeholder, maxLength, inputRef, isOpen, onOpen, onClose, onChange = noop, ...rest }) => {
|
|
2217
|
-
const popupRef = useOutsideClick(onClose);
|
|
2218
|
-
const handleChange = useCallback((v) => {
|
|
2219
|
-
const isOverMax = maxLength && v.length > maxLength;
|
|
2220
|
-
!isOpen && onOpen();
|
|
2221
|
-
if (!isOverMax) {
|
|
2222
|
-
onChange(normalizeInteger(v, isInteger));
|
|
2223
|
-
}
|
|
2224
|
-
}, [isOpen, onChange]);
|
|
2225
|
-
return (jsxs("div", { className: style('shrink-0 w-full', className), ref: popupRef, onBlur: onClose, onFocus: onOpen, children: [jsx("div", { ref: inputRef, children: jsx(Input, { type: type || 'text', "aria-label": label, label: getRequiredLabel({ label, errors }), valid: Boolean(!error), onChange: handleChange, placeholder: getPlaceholder({ placeholder, errors, label }), value: value, ...rest }) }), renderErrorText(error)] }));
|
|
2226
|
-
});
|
|
2227
|
-
const normalizeInteger = (val = '', isInteger = false) => isInteger && val ? val.replace(/[^\d]+/g, '') : val;
|
|
2228
|
-
const getPlaceholder = ({ placeholder, errors, label }) => errors && !label ? `${placeholder}*` : placeholder;
|
|
2229
|
-
|
|
2230
|
-
const InputControl = JSX((props) => {
|
|
2231
|
-
const [isOpen, { setFalse: close, setTrue: open }] = useBool();
|
|
2232
|
-
return jsx(InputWrapper, { isOpen: isOpen, onOpen: open, onClose: close, ...props });
|
|
2233
|
-
});
|
|
2234
|
-
|
|
2235
2248
|
const AnnualRevenueField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u0432\u044B\u0440\u0443\u0447\u043A\u0430, \u20BD", ...field(input?.name ?? '') })));
|
|
2236
2249
|
|
|
2237
2250
|
const ApplicationDateField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043C\u044F \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u044F \u0432 \u0411\u0430\u043D\u043A", ...field(input?.name ?? '') })));
|
|
@@ -2646,7 +2659,7 @@
|
|
|
2646
2659
|
inn: _?.data?.inn,
|
|
2647
2660
|
}));
|
|
2648
2661
|
|
|
2649
|
-
const InnDadataField = JSX(({ field, input }) => {
|
|
2662
|
+
const InnDadataField = JSX(({ field, input = {} }) => {
|
|
2650
2663
|
const [options, setOptions] = useState([]);
|
|
2651
2664
|
const [searchQuery, setSearchQuery] = useState('');
|
|
2652
2665
|
useAsyncEffect(async () => {
|
|
@@ -2664,7 +2677,10 @@
|
|
|
2664
2677
|
},
|
|
2665
2678
|
}));
|
|
2666
2679
|
}, [options]);
|
|
2667
|
-
return (jsx(SelectControl, { label: "\u0418\u041D\u041D", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0418\u041D\u041D", options: getOptions, ...field(input
|
|
2680
|
+
return (jsx(SelectControl, { label: "\u0418\u041D\u041D", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0418\u041D\u041D", options: getOptions, ...field(input.name ?? ''), isSearch: true, isManualInput: true, inputProps: {
|
|
2681
|
+
isInteger: true,
|
|
2682
|
+
maxLength: 12,
|
|
2683
|
+
}, disableFilterOptions: true, onSearchQuery: setSearchQuery }));
|
|
2668
2684
|
});
|
|
2669
2685
|
|
|
2670
2686
|
const InnField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0418\u041D\u041D", isInteger: true, maxLength: 12, ...input, ...field(input?.name ?? '') })));
|
|
@@ -11736,7 +11752,7 @@
|
|
|
11736
11752
|
slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
|
|
11737
11753
|
});
|
|
11738
11754
|
|
|
11739
|
-
const packageVersion = "0.14.
|
|
11755
|
+
const packageVersion = "0.14.909";
|
|
11740
11756
|
|
|
11741
11757
|
exports.Blocks = Blocks;
|
|
11742
11758
|
exports.ContentPage = ContentPage;
|