@ludo.ninja/components 2.4.2 → 2.4.3

package/build/components/submitNewProjectForm/blockchainSelect/index.d.ts

@@ -6,6 +6,7 @@ interface Props {
     onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => Promise<void>;
     name: string;
     isError: boolean;
+    disabled?: boolean;
     menuPortalTarget?: HTMLElement;
 }
 declare const BlockChainSelect: React.FC<Props>;

package/build/components/submitNewProjectForm/blockchainSelect/index.js

@@ -155,9 +155,10 @@ const Option = (props) => {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_select_1.components.Option, { ...props, children: (0, jsx_runtime_1.jsxs)(OptionWrapper, { children: [(0, jsx_runtime_1.jsx)(StyledImg, { width: 20, height: 20, src: props.data.icon, alt: props.label }), props.label] }) }) }));
 };
 const SingleValue = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(react_select_1.components.SingleValue, { ...props, children: (0, jsx_runtime_1.jsxs)(SingleValueWrapper, { children: [(0, jsx_runtime_1.jsx)(StyledImg, { width: 20, height: 20, src: props.data.icon, alt: props.data.label }), children] }) }));
-const BlockChainSelect = ({ menuPortalTarget, isLoading, isError, onChangeHandler, defaultOptionValue, name, }) => {
+const BlockChainSelect = ({ menuPortalTarget, isLoading, isError, disabled, onChangeHandler, defaultOptionValue, name, }) => {
     const getStaticENVDomain = (0, env_1.useEnvStore)((state) => state.getStaticDomain);
-    return ((0, jsx_runtime_1.jsx)(StyledSelect, { isError: isError, options: getBlockchainOptions(getStaticENVDomain()), isLoading: isLoading, isSearchable: true, onChangeHandler: onChangeHandler, name: name, customComponents: { Option, SingleValue }, ...(menuPortalTarget
+    const options = getBlockchainOptions(getStaticENVDomain());
+    return ((0, jsx_runtime_1.jsx)(StyledSelect, { disabled: disabled, isError: isError, options: options, isLoading: isLoading, isSearchable: true, onChangeHandler: onChangeHandler, name: name, customComponents: { Option, SingleValue }, ...(menuPortalTarget
             ? {
                 styles: {
                     menuPortal: (base) => ({

package/build/components/submitNewProjectForm/index.d.ts

@@ -1,5 +1,6 @@
-declare const SubmitNewProjectForm: ({ blockchain, contractAddress }: {
+declare const SubmitNewProjectForm: ({ blockchain, contractAddress, disabledBlockchainSelect }: {
     blockchain?: string;
     contractAddress?: string;
+    disabledBlockchainSelect?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubmitNewProjectForm;

package/build/components/submitNewProjectForm/index.js

@@ -105,7 +105,7 @@ const StyledCreateForm = styled_components_1.default.div `
         }
     }
 `;
-const SubmitNewProjectForm = ({ blockchain, contractAddress }) => {
+const SubmitNewProjectForm = ({ blockchain, contractAddress, disabledBlockchainSelect }) => {
     const { control, register, handleSubmit, formState: { errors }, setError, setFocus, watch, } = (0, react_hook_form_1.useForm)({
         mode: 'all',
         defaultValues: {
@@ -171,7 +171,7 @@ const SubmitNewProjectForm = ({ blockchain, contractAddress }) => {
     };
     return ((0, jsx_runtime_1.jsxs)(StyledCreateForm, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'head', children: [(0, jsx_runtime_1.jsx)("h3", { className: 'tittle', children: 'Submit New Project' }), (0, jsx_runtime_1.jsx)(Text_1.MainText, { color: colors_1.TextGrayColor, children: "Add your favorite project to follow up it on Ludo" })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'content', children: [(0, jsx_runtime_1.jsx)("div", { className: "input_group", children: (0, jsx_runtime_1.jsx)(Forms_1.Input, { register: registerContract, error: errorContract, data: dataForContract }) }), (0, jsx_runtime_1.jsx)("div", { className: "input_group", children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "blockchain", control: control, rules: {
                                         required: { message: 'Blockchain is required', value: true },
-                                    }, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(blockchainSelect_1.default, { isError: Boolean(errors.blockchain), isLoading: false, onChangeHandler: async (fieldName, fieldValue) => field.onChange(fieldValue), name: field.name }), errors.blockchain && ((0, jsx_runtime_1.jsx)(Forms_1.BasicErrorLabel, { children: errors.blockchain.message }))] })) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "btns", children: [(0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Add', type: 'submit', variant: "primaryM", disabled: loading, onClick: () => null }), (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Cancel', variant: "outline", onClick: () => {
+                                    }, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(blockchainSelect_1.default, { defaultOptionValue: blockchain, disabled: disabledBlockchainSelect, isError: Boolean(errors.blockchain), isLoading: false, onChangeHandler: async (fieldName, fieldValue) => field.onChange(fieldValue), name: field.name }), errors.blockchain && ((0, jsx_runtime_1.jsx)(Forms_1.BasicErrorLabel, { children: errors.blockchain.message }))] })) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "btns", children: [(0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Add', type: 'submit', variant: "primaryM", disabled: loading, onClick: () => null }), (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Cancel', variant: "outline", onClick: () => {
                                     closeModalSidebarPortal();
                                 } })] })] })] }));
 };

package/build/system/Forms/Selects/DesktopSelect/index.d.ts

@@ -8,6 +8,7 @@ interface Props {
     defaultOptionValue?: string;
     isLoading?: boolean;
     isSearchable?: boolean;
+    disabled?: boolean;
     onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => Promise<void>;
     name: string;
     customComponents?: Partial<SelectComponents<unknown, boolean, GroupBase<unknown>>>;

package/build/system/Forms/Selects/DesktopSelect/index.js

@@ -51,6 +51,7 @@ const SelectElement = (0, styled_components_1.default)(react_select_1.default) `
     border-radius: 6px;
     box-shadow: none;
     min-height: ${(props) => `${props.minHeight}px`};
+    opacity: ${(props) => props.isDisabled ? 0.5 : 1};
     cursor: pointer;
 
     &:hover,
@@ -108,7 +109,7 @@ const SelectElement = (0, styled_components_1.default)(react_select_1.default) `
     cursor: pointer;
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
     .react-select__value-container {
       padding: 0 0 0 ${(0, _4k_1.adaptiveValueCalc)(20)};
     }
@@ -149,7 +150,7 @@ const DropdownIndicator = (props) => {
                 transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "rotate(0)",
             }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 11L12 15L8 11", stroke: "#696F91", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
-const DesktopSelect = ({ options, isLoading, onChangeHandler, defaultOptionValue, name, customComponents, isSearchable, ...props }) => {
+const DesktopSelect = ({ options, isLoading, onChangeHandler, defaultOptionValue, name, customComponents, isSearchable, disabled, ...props }) => {
     const [selectedOption, setSelectedOption] = (0, react_1.useState)(options.find((option) => {
         return defaultOptionValue === option.id;
     }) || null);
@@ -158,7 +159,7 @@ const DesktopSelect = ({ options, isLoading, onChangeHandler, defaultOptionValue
             return defaultOptionValue === option.id;
         });
         setSelectedOption(findOption || null);
-    }, [defaultOptionValue]);
+    }, [defaultOptionValue, options]);
     const handleChangeOption = async (option) => {
         await onChangeHandler(name, option.id);
         setSelectedOption(option);
@@ -172,7 +173,7 @@ const DesktopSelect = ({ options, isLoading, onChangeHandler, defaultOptionValue
     const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
     if (isLoading)
         return (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: `${minHeight}px`, width: "154px" });
-    return ((0, jsx_runtime_1.jsx)(SelectElement, { id: String(Math.random()), minHeight: minHeight, scale: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }), classNamePrefix: "react-select", name: name, getOptionLabel: (option) => getOptionLabel(option), getOptionValue: (option) => getOptionValue(option), options: options, value: selectedOption, defaultValue: selectedOption, onChange: (option) => handleChangeOption(option), isSearchable: isSearchable, components: {
+    return ((0, jsx_runtime_1.jsx)(SelectElement, { id: String(Math.random()), minHeight: minHeight, scale: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }), classNamePrefix: "react-select", name: name, getOptionLabel: (option) => getOptionLabel(option), getOptionValue: (option) => getOptionValue(option), options: options, value: selectedOption, defaultValue: selectedOption, onChange: (option) => handleChangeOption(option), isSearchable: isSearchable, isDisabled: disabled, components: {
             DropdownIndicator,
             IndicatorSeparator: () => null,
             ...customComponents

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",