intelicoreact 2.0.17 → 2.0.19

package/dist/es/Atomic/FormElements/TagListToDropdown/TagListToDropdown.js

@@ -0,0 +1,82 @@
+import TagList from "../../UI/TagList/TagList.js";
+import TagsDropdown from "../TagsDropdown/TagsDropdown.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/TagListToDropdown/TagListToDropdown.tsx
+var TagListToDropdown = ({ options, tagsFullList, value = [], dropdownProps, listProps, onChange, useDropdownCompactMode }) => {
+	const preparedValue = value.map(({ value }) => value !== void 0 ? value : "");
+	const [isEditMode, setIsEditMode] = useState(false);
+	const [isRenderAllTags, setIsRenderAllTags] = useState(false);
+	const [newValue, setNewValue] = useState(preparedValue);
+	const [isValueChanged, setIsValueChanged] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const tagListRef = useRef(null);
+	const onConfirmChangesClick = () => {
+		if (isValueChanged) {
+			setIsLoading(true);
+			setIsValueChanged(false);
+			Promise.resolve(onChange?.(options.filter(({ value }) => value !== void 0 ? newValue.includes(value) : false))).finally(() => {
+				setIsEditMode(false);
+				setIsLoading(false);
+			});
+		} else setIsEditMode(false);
+	};
+	useEffect(() => {
+		setNewValue(preparedValue);
+	}, [isEditMode]);
+	const renderTagsDropdown = (props) => {
+		return /* @__PURE__ */ jsx(TagsDropdown, {
+			...dropdownProps,
+			disabled: isLoading,
+			options,
+			tagsFullList,
+			chosenOptions: newValue,
+			renderOptionsAsTags: true,
+			withCreateLogic: true,
+			isUseLocalOptionsStore: false,
+			onOptionEdit: dropdownProps?.onOptionEdit,
+			onOptionDelete: dropdownProps?.onOptionDelete,
+			onOptionCreate: dropdownProps?.onOptionCreate,
+			onActionConfirmClick: onConfirmChangesClick,
+			onActionCancelClick: () => setIsEditMode((v) => !v),
+			onChange: (data) => {
+				setNewValue(data);
+				setIsValueChanged(true);
+			},
+			...props,
+			isDefaultOpened: isEditMode
+		});
+	};
+	const renderTagsList = (props) => {
+		return /* @__PURE__ */ jsx(TagList, {
+			disabled: isLoading,
+			refProp: tagListRef,
+			...listProps,
+			items: value,
+			onEditClick: () => setIsEditMode((v) => !v),
+			...props
+		});
+	};
+	const renderCompactMode = () => {
+		return renderTagsDropdown({
+			withActions: false,
+			withSearchInputInList: true,
+			customTriggerRef: tagListRef,
+			recalculateListContainerStylesTrigger: isRenderAllTags,
+			onDropdownListClose: onConfirmChangesClick,
+			renderCustomTrigger: ({ setIsOpen }) => renderTagsList({
+				onToggleRenderAll: (v) => setTimeout(() => setIsRenderAllTags(v), 1),
+				onEditClick: () => {
+					setIsOpen(!isEditMode);
+					if (isEditMode) onConfirmChangesClick();
+					else setIsEditMode(true);
+				}
+			})
+		});
+	};
+	return useDropdownCompactMode ? renderCompactMode() : isEditMode ? renderTagsDropdown({ withActions: true }) : renderTagsList();
+};
+//#endregion
+export { TagListToDropdown as default };
+
+//# sourceMappingURL=TagListToDropdown.js.map

package/dist/es/Atomic/FormElements/TagListToDropdown/TagListToDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagListToDropdown.js","names":[],"sources":["../../../../../src/Atomic/FormElements/TagListToDropdown/TagListToDropdown.tsx"],"sourcesContent":["import type { ITagListProps } from '../../UI/TagList/TagList.interface';\n\nimport type { ITagsDropdownProps } from '../TagsDropdown/TagsDropdown.interface';\nimport type { ITagListToDropdownProps } from './TagListToDropdown.interface';\nimport { useEffect, useRef, useState } from 'react';\nimport TagList from '../../UI/TagList/TagList';\nimport TagsDropdown from '../TagsDropdown/TagsDropdown';\n\nconst TagListToDropdown: React.FC<ITagListToDropdownProps> = ({\n  options,\n  tagsFullList,\n  value = [],\n  dropdownProps,\n  listProps,\n  onChange,\n  useDropdownCompactMode,\n}) => {\n  const preparedValue: ITagsDropdownProps['chosenOptions'] = value.map(({ value }) => value !== undefined ? value : '');\n  const [isEditMode, setIsEditMode] = useState(false);\n  const [isRenderAllTags, setIsRenderAllTags] = useState(false);\n  const [newValue, setNewValue] = useState(preparedValue);\n  const [isValueChanged, setIsValueChanged] = useState(false);\n\n  const [isLoading, setIsLoading] = useState(false);\n\n  const tagListRef = useRef(null);\n\n  const onConfirmChangesClick = (): void => {\n    if (isValueChanged) {\n      setIsLoading(true);\n      setIsValueChanged(false);\n      Promise.resolve(onChange?.(\n        options.filter(({ value }) => value !== undefined ? newValue.includes(value) : false),\n      )).finally(() => {\n        setIsEditMode(false);\n        setIsLoading(false);\n      });\n    }\n    else {\n      setIsEditMode(false);\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(preparedValue);\n  }, [isEditMode]);\n\n  const renderTagsDropdown = (props?: Partial<ITagsDropdownProps>): JSX.Element => {\n    return (\n      <TagsDropdown\n        {...dropdownProps}\n        disabled={isLoading}\n        options={options}\n        tagsFullList={tagsFullList}\n        chosenOptions={newValue}\n        renderOptionsAsTags\n        withCreateLogic\n        isUseLocalOptionsStore={false}\n        onOptionEdit={dropdownProps?.onOptionEdit}\n        onOptionDelete={dropdownProps?.onOptionDelete}\n        onOptionCreate={dropdownProps?.onOptionCreate}\n        onActionConfirmClick={onConfirmChangesClick}\n        onActionCancelClick={() => setIsEditMode(v => !v)}\n        onChange={(data) => {\n          setNewValue(data);\n          setIsValueChanged(true);\n        }}\n        {...props}\n        isDefaultOpened={isEditMode}\n      />\n    );\n  };\n\n  const renderTagsList = (props?: Partial<ITagListProps>): JSX.Element => {\n    return (\n      <TagList\n        disabled={isLoading}\n        refProp={tagListRef}\n        {...listProps}\n        items={value}\n        onEditClick={() => setIsEditMode(v => !v)}\n        {...props}\n      />\n    );\n  };\n\n  const renderCompactMode = (): JSX.Element => {\n    return renderTagsDropdown({\n      withActions: false,\n      withSearchInputInList: true,\n      customTriggerRef: tagListRef,\n      recalculateListContainerStylesTrigger: isRenderAllTags,\n      onDropdownListClose: onConfirmChangesClick,\n      renderCustomTrigger: ({ setIsOpen }) =>\n        renderTagsList({\n          onToggleRenderAll: v => setTimeout(() => setIsRenderAllTags(v), 1),\n          onEditClick: () => {\n            setIsOpen(!isEditMode);\n            if (isEditMode) onConfirmChangesClick();\n            else setIsEditMode(true);\n          },\n        }),\n    });\n  };\n\n  return useDropdownCompactMode\n    ? renderCompactMode()\n    : isEditMode\n      ? renderTagsDropdown({ withActions: true })\n      : renderTagsList();\n}\n\nexport default TagListToDropdown;\n"],"mappings":";;;;;AAQA,IAAM,qBAAwD,EAC5D,SACA,cACA,QAAQ,CAAC,GACT,eACA,WACA,UACA,6BACI;CACJ,MAAM,gBAAqD,MAAM,KAAK,EAAE,YAAY,UAAU,KAAA,IAAY,QAAQ,EAAE;CACpH,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,KAAK;CAC5D,MAAM,CAAC,UAAU,eAAe,SAAS,aAAa;CACtD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAE1D,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,MAAM,aAAa,OAAO,IAAI;CAE9B,MAAM,8BAAoC;EACxC,IAAI,gBAAgB;GAClB,aAAa,IAAI;GACjB,kBAAkB,KAAK;GACvB,QAAQ,QAAQ,WACd,QAAQ,QAAQ,EAAE,YAAY,UAAU,KAAA,IAAY,SAAS,SAAS,KAAK,IAAI,KAAK,CACtF,CAAC,CAAC,CAAC,cAAc;IACf,cAAc,KAAK;IACnB,aAAa,KAAK;GACpB,CAAC;EACH,OAEE,cAAc,KAAK;CAEvB;CAEA,gBAAgB;EACd,YAAY,aAAa;CAC3B,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,sBAAsB,UAAqD;EAC/E,OACE,oBAAC,cAAD;GACE,GAAI;GACJ,UAAU;GACD;GACK;GACd,eAAe;GACf,qBAAA;GACA,iBAAA;GACA,wBAAwB;GACxB,cAAc,eAAe;GAC7B,gBAAgB,eAAe;GAC/B,gBAAgB,eAAe;GAC/B,sBAAsB;GACtB,2BAA2B,eAAc,MAAK,CAAC,CAAC;GAChD,WAAW,SAAS;IAClB,YAAY,IAAI;IAChB,kBAAkB,IAAI;GACxB;GACA,GAAI;GACJ,iBAAiB;EAClB,CAAA;CAEL;CAEA,MAAM,kBAAkB,UAAgD;EACtE,OACE,oBAAC,SAAD;GACE,UAAU;GACV,SAAS;GACT,GAAI;GACJ,OAAO;GACP,mBAAmB,eAAc,MAAK,CAAC,CAAC;GACxC,GAAI;EACL,CAAA;CAEL;CAEA,MAAM,0BAAuC;EAC3C,OAAO,mBAAmB;GACxB,aAAa;GACb,uBAAuB;GACvB,kBAAkB;GAClB,uCAAuC;GACvC,qBAAqB;GACrB,sBAAsB,EAAE,gBACtB,eAAe;IACb,oBAAmB,MAAK,iBAAiB,mBAAmB,CAAC,GAAG,CAAC;IACjE,mBAAmB;KACjB,UAAU,CAAC,UAAU;KACrB,IAAI,YAAY,sBAAsB;UACjC,cAAc,IAAI;IACzB;GACF,CAAC;EACL,CAAC;CACH;CAEA,OAAO,yBACH,kBAAkB,IAClB,aACE,mBAAmB,EAAE,aAAa,KAAK,CAAC,IACxC,eAAe;AACvB"}