@ludo.ninja/components 2.3.69 → 2.3.70
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.
|
@@ -6,6 +6,7 @@ interface Props {
|
|
|
6
6
|
onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => Promise<void>;
|
|
7
7
|
name: string;
|
|
8
8
|
isError: boolean;
|
|
9
|
+
menuPortalTarget?: HTMLElement;
|
|
9
10
|
}
|
|
10
11
|
declare const BlockChainSelect: React.FC<Props>;
|
|
11
12
|
export default BlockChainSelect;
|
|
@@ -9,6 +9,7 @@ const ScreenWidth_1 = require("../../../styles/ScreenWidth");
|
|
|
9
9
|
const DesktopSelect_1 = __importDefault(require("../../../system/Forms/Selects/DesktopSelect"));
|
|
10
10
|
const core_1 = require("@ludo.ninja/core");
|
|
11
11
|
const data_1 = require("@ludo.ninja/core/build/blockchains/data");
|
|
12
|
+
const vars_1 = require("@ludo.ninja/ui/build/fonts/vars");
|
|
12
13
|
const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
|
|
13
14
|
const typography_1 = require("@ludo.ninja/ui/build/styles/typography");
|
|
14
15
|
const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
@@ -28,9 +29,10 @@ const StyledSelect = (0, styled_components_1.default)(DesktopSelect_1.default) `
|
|
|
28
29
|
.react-select__option {
|
|
29
30
|
padding: 0;
|
|
30
31
|
font-weight: 400;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
32
|
+
|
|
33
|
+
&.react-select__option--is-focused {
|
|
34
|
+
background: ${colors_1.BackgroundColorLight};
|
|
35
|
+
}
|
|
34
36
|
}
|
|
35
37
|
}
|
|
36
38
|
|
|
@@ -122,8 +124,55 @@ const Option = (props) => {
|
|
|
122
124
|
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] }) }) }));
|
|
123
125
|
};
|
|
124
126
|
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] }) }));
|
|
125
|
-
const BlockChainSelect = ({ isLoading, isError, onChangeHandler, defaultOptionValue, name }) => {
|
|
127
|
+
const BlockChainSelect = ({ menuPortalTarget, isLoading, isError, onChangeHandler, defaultOptionValue, name, }) => {
|
|
126
128
|
const getStaticENVDomain = (0, env_1.useEnvStore)((state) => state.getStaticDomain);
|
|
127
|
-
return ((0, jsx_runtime_1.jsx)(StyledSelect, { isError: isError, options: getBlockchainOptions(getStaticENVDomain()), isLoading: isLoading, isSearchable: true, onChangeHandler: onChangeHandler, name: name, customComponents: { Option, SingleValue },
|
|
129
|
+
return ((0, jsx_runtime_1.jsx)(StyledSelect, { isError: isError, options: getBlockchainOptions(getStaticENVDomain()), isLoading: isLoading, isSearchable: true, onChangeHandler: onChangeHandler, name: name, customComponents: { Option, SingleValue }, ...(menuPortalTarget
|
|
130
|
+
? {
|
|
131
|
+
styles: {
|
|
132
|
+
menuPortal: (base) => ({
|
|
133
|
+
...base,
|
|
134
|
+
zIndex: 999999,
|
|
135
|
+
fontFamily: vars_1.dmsansFontVarCss.css,
|
|
136
|
+
".react-select__menu": {
|
|
137
|
+
boxShadow: " 0 8px 16px 0 rgba(33, 21, 95, 0.1)",
|
|
138
|
+
fontSize: "15px",
|
|
139
|
+
fontWeight: "400",
|
|
140
|
+
lineHeight: "22px",
|
|
141
|
+
color: colors_1.TextGrayColor,
|
|
142
|
+
margin: "4px 0",
|
|
143
|
+
[ScreenWidth_1.mediaQuery.minWidthFourK]: {
|
|
144
|
+
fontSize: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 15, windowWidth: window.innerWidth })}px`,
|
|
145
|
+
lineHeight: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 22, windowWidth: window.innerWidth })}px`,
|
|
146
|
+
margin: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 4, windowWidth: window.innerWidth })}px 0`,
|
|
147
|
+
},
|
|
148
|
+
},
|
|
149
|
+
".react-select__menu-list": {
|
|
150
|
+
padding: "8px",
|
|
151
|
+
[ScreenWidth_1.mediaQuery.minWidthFourK]: {
|
|
152
|
+
padding: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 8, windowWidth: window.innerWidth })}px`,
|
|
153
|
+
},
|
|
154
|
+
".react-select__option": {
|
|
155
|
+
padding: "0",
|
|
156
|
+
fontWeight: "400",
|
|
157
|
+
"&.react-select__option--is-focused": {
|
|
158
|
+
background: colors_1.BackgroundColorLight,
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
".react-select__option--is-selected": {
|
|
162
|
+
backgroundColor: "transparent",
|
|
163
|
+
color: colors_1.BlackColor,
|
|
164
|
+
},
|
|
165
|
+
".react-select__option--is-focused": {
|
|
166
|
+
backgroundColor: "transparent",
|
|
167
|
+
color: colors_1.BlackColor,
|
|
168
|
+
transition: "font-weight 0.3s ease-in-out",
|
|
169
|
+
cursor: "pointer",
|
|
170
|
+
},
|
|
171
|
+
},
|
|
172
|
+
}),
|
|
173
|
+
},
|
|
174
|
+
menuPortalTarget: menuPortalTarget,
|
|
175
|
+
}
|
|
176
|
+
: {}), defaultOptionValue: defaultOptionValue, placeholder: "Blockchain" }));
|
|
128
177
|
};
|
|
129
178
|
exports.default = BlockChainSelect;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ludo.ninja/components",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.70",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"publish": "npm publish --access public -workspace @ludo.ninja/components"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@ludo.ninja/api": "^3.
|
|
26
|
+
"@ludo.ninja/api": "^3.2.6",
|
|
27
27
|
"@react-three/drei": "^9.68.3",
|
|
28
28
|
"@react-three/fiber": "^8.13.0",
|
|
29
29
|
"chart.js": "^4.4.3",
|