@modul/mbui 0.0.13-beta-pv-53036-091041a3 → 0.0.13-beta-pv-53036-fcbcc069
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,7 +6,7 @@ const React = (0, tslib_1.__importStar)(require("react"));
|
|
|
6
6
|
const Icon_1 = require("../Icon");
|
|
7
7
|
const react_select_1 = (0, tslib_1.__importStar)(require("react-select"));
|
|
8
8
|
const utils_1 = require("../@/lib/utils");
|
|
9
|
-
const selectTriggerClasses = 'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white';
|
|
9
|
+
const selectTriggerClasses = 'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white cursor-pointer';
|
|
10
10
|
const colourStyles = {
|
|
11
11
|
control: () => ({}),
|
|
12
12
|
option: () => ({}),
|
|
@@ -19,8 +19,8 @@ const colourStyles = {
|
|
|
19
19
|
valueContainer: () => ({}),
|
|
20
20
|
};
|
|
21
21
|
const Control = ({ children, ...props }) => {
|
|
22
|
-
const
|
|
23
|
-
return (React.createElement(react_select_1.components.Control, { className: selectTriggerClasses, ...props }, children));
|
|
22
|
+
const { isFocused } = props;
|
|
23
|
+
return (React.createElement(react_select_1.components.Control, { className: (0, utils_1.cn)(selectTriggerClasses, { 'outline outline-primary outline-offset-2 outline-2': isFocused }), ...props }, children));
|
|
24
24
|
};
|
|
25
25
|
const optionClasses = 'flex items-center first:rounded-t-md last:rounded-b-md px-[12px] py-[16px] w-full cursor-default select-none outline-none';
|
|
26
26
|
const Option = ({ children, ...props }) => {
|
|
@@ -33,12 +33,12 @@ const Option = ({ children, ...props }) => {
|
|
|
33
33
|
React.createElement("span", null,
|
|
34
34
|
React.createElement("span", null, label),
|
|
35
35
|
React.createElement("br", null),
|
|
36
|
-
React.createElement("span", { className:
|
|
37
|
-
React.createElement("span", { className:
|
|
36
|
+
React.createElement("span", { className: "text-[14px] text-light" }, account)),
|
|
37
|
+
React.createElement("span", { className: "ml-auto shrink-0" },
|
|
38
38
|
balance,
|
|
39
39
|
"\u00A0",
|
|
40
40
|
cur)),
|
|
41
|
-
React.createElement("span", { className:
|
|
41
|
+
React.createElement("span", { className: "ml-[16px] w-[24px] h-[24px] shrink-0" }, isSelected && (React.createElement(Icon_1.CheckSmall, { width: "24", height: "24", className: "text-primary" })))));
|
|
42
42
|
};
|
|
43
43
|
const DropdownIndicator = ({ children, ...props }) => {
|
|
44
44
|
return (React.createElement(react_select_1.components.DropdownIndicator, { className: "shrink-0", ...props },
|
|
@@ -50,7 +50,7 @@ const ValueContainer = ({ children, ...props }) => {
|
|
|
50
50
|
const SingleValue = ({ children, ...props }) => {
|
|
51
51
|
// @ts-ignore
|
|
52
52
|
const { label, account, balance, cur } = props.data;
|
|
53
|
-
return (React.createElement(react_select_1.components.SingleValue, { className:
|
|
53
|
+
return (React.createElement(react_select_1.components.SingleValue, { className: "col-start-1 col-end-3 row-start-1 row-end-2", ...props },
|
|
54
54
|
React.createElement("span", { className: "block max-w-full text-[16px] truncate leading-[1.5]" },
|
|
55
55
|
label,
|
|
56
56
|
" ",
|
|
@@ -61,9 +61,9 @@ const SingleValue = ({ children, ...props }) => {
|
|
|
61
61
|
cur)));
|
|
62
62
|
};
|
|
63
63
|
const Menu = ({ children, ...props }) => {
|
|
64
|
-
return (React.createElement(react_select_1.components.Menu, { className: "bg-page drop-shadow-1 mt-[8px] rounded-md", ...props }, children));
|
|
64
|
+
return (React.createElement(react_select_1.components.Menu, { className: "absolute inset-x-0 bg-page drop-shadow-1 mt-[8px] rounded-md", ...props }, children));
|
|
65
65
|
};
|
|
66
|
-
const SelectAccountCard = React.forwardRef(({ className, ...props }, ref) => (React.createElement(react_select_1.default, { className: className,
|
|
66
|
+
const SelectAccountCard = React.forwardRef(({ className, defaultValue, ...props }, ref) => (React.createElement(react_select_1.default, { className: className, isSearchable: false, components: {
|
|
67
67
|
Control,
|
|
68
68
|
Option,
|
|
69
69
|
SingleValue,
|
|
@@ -71,6 +71,6 @@ const SelectAccountCard = React.forwardRef(({ className, ...props }, ref) => (Re
|
|
|
71
71
|
IndicatorSeparator: () => null,
|
|
72
72
|
Menu,
|
|
73
73
|
ValueContainer,
|
|
74
|
-
}, styles: colourStyles, unstyled: true, ...props })));
|
|
74
|
+
}, styles: colourStyles, unstyled: true, ...props, defaultValue: defaultValue })));
|
|
75
75
|
exports.SelectAccountCard = SelectAccountCard;
|
|
76
76
|
//# sourceMappingURL=SelectAccountCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectAccountCard.js","sourceRoot":"","sources":["../../src/Select/SelectAccountCard.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAE9B,kCAAsD;AAEtD,0EASqB;AAErB,0CAAmC;AAEnC,MAAM,oBAAoB,GACzB,
|
|
1
|
+
{"version":3,"file":"SelectAccountCard.js","sourceRoot":"","sources":["../../src/Select/SelectAccountCard.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@ import Select, {
|
|
|
16
16
|
import { cn } from '../@/lib/utils'
|
|
17
17
|
|
|
18
18
|
const selectTriggerClasses: string =
|
|
19
|
-
'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white'
|
|
19
|
+
'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white cursor-pointer'
|
|
20
20
|
|
|
21
21
|
const colourStyles: StylesConfig = {
|
|
22
22
|
control: () => ({}),
|
|
@@ -31,10 +31,14 @@ const colourStyles: StylesConfig = {
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
const Control = ({ children, ...props }: ControlProps) => {
|
|
34
|
-
const
|
|
34
|
+
const { isFocused } = props
|
|
35
|
+
|
|
35
36
|
return (
|
|
36
37
|
<components.Control
|
|
37
|
-
className={
|
|
38
|
+
className={cn(
|
|
39
|
+
selectTriggerClasses,
|
|
40
|
+
{ 'outline outline-primary outline-offset-2 outline-2': isFocused }
|
|
41
|
+
)}
|
|
38
42
|
{...props}
|
|
39
43
|
>
|
|
40
44
|
{children}
|
|
@@ -51,29 +55,26 @@ const Option = ({ children, ...props }: OptionProps) => {
|
|
|
51
55
|
isFocused,
|
|
52
56
|
isDisabled,
|
|
53
57
|
// @ts-ignore
|
|
54
|
-
data
|
|
58
|
+
data: { label, account, balance, cur },
|
|
55
59
|
} = props
|
|
56
60
|
const style = { cursor: 'pointer' }
|
|
57
61
|
return (
|
|
58
62
|
<components.Option
|
|
59
|
-
className={cn(
|
|
60
|
-
optionClasses,
|
|
61
|
-
{ 'bg-light': isFocused },
|
|
62
|
-
{ 'opacity-50 pointer-events-none': isDisabled }
|
|
63
|
-
)}
|
|
63
|
+
className={cn(optionClasses, { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
|
|
64
64
|
{...props}
|
|
65
65
|
>
|
|
66
66
|
<span className="flex basis-0 grow">
|
|
67
67
|
<span>
|
|
68
|
-
<span>{label}</span
|
|
69
|
-
<
|
|
68
|
+
<span>{label}</span>
|
|
69
|
+
<br />
|
|
70
|
+
<span className="text-[14px] text-light">{account}</span>
|
|
70
71
|
</span>
|
|
71
|
-
<span
|
|
72
|
+
<span className="ml-auto shrink-0">
|
|
72
73
|
{balance} {cur}
|
|
73
74
|
</span>
|
|
74
75
|
</span>
|
|
75
76
|
|
|
76
|
-
<span className=
|
|
77
|
+
<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
|
|
77
78
|
{isSelected && (
|
|
78
79
|
<CheckSmall
|
|
79
80
|
width="24"
|
|
@@ -82,7 +83,6 @@ const Option = ({ children, ...props }: OptionProps) => {
|
|
|
82
83
|
/>
|
|
83
84
|
)}
|
|
84
85
|
</span>
|
|
85
|
-
|
|
86
86
|
</components.Option>
|
|
87
87
|
)
|
|
88
88
|
}
|
|
@@ -117,7 +117,10 @@ const SingleValue = ({ children, ...props }: SingleValueProps) => {
|
|
|
117
117
|
// @ts-ignore
|
|
118
118
|
const { label, account, balance, cur } = props.data
|
|
119
119
|
return (
|
|
120
|
-
<components.SingleValue
|
|
120
|
+
<components.SingleValue
|
|
121
|
+
className="col-start-1 col-end-3 row-start-1 row-end-2"
|
|
122
|
+
{...props}
|
|
123
|
+
>
|
|
121
124
|
<span className="block max-w-full text-[16px] truncate leading-[1.5]">
|
|
122
125
|
{label} <span className="opacity-75 text-[14px] leading-[1.42]">{account}</span>
|
|
123
126
|
</span>
|
|
@@ -131,7 +134,7 @@ const SingleValue = ({ children, ...props }: SingleValueProps) => {
|
|
|
131
134
|
const Menu = ({ children, ...props }: MenuProps) => {
|
|
132
135
|
return (
|
|
133
136
|
<components.Menu
|
|
134
|
-
className="bg-page drop-shadow-1 mt-[8px] rounded-md"
|
|
137
|
+
className="absolute inset-x-0 bg-page drop-shadow-1 mt-[8px] rounded-md"
|
|
135
138
|
{...props}
|
|
136
139
|
>
|
|
137
140
|
{children}
|
|
@@ -139,25 +142,26 @@ const Menu = ({ children, ...props }: MenuProps) => {
|
|
|
139
142
|
)
|
|
140
143
|
}
|
|
141
144
|
|
|
142
|
-
const SelectAccountCard = React.forwardRef<Select, { className?: string }
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
)
|
|
145
|
+
const SelectAccountCard = React.forwardRef<Select, { className?: string; defaultValue: {} }>(
|
|
146
|
+
({ className, defaultValue, ...props }, ref) => (
|
|
147
|
+
<Select
|
|
148
|
+
className={className}
|
|
149
|
+
isSearchable={false}
|
|
150
|
+
components={{
|
|
151
|
+
Control,
|
|
152
|
+
Option,
|
|
153
|
+
SingleValue,
|
|
154
|
+
DropdownIndicator,
|
|
155
|
+
IndicatorSeparator: () => null,
|
|
156
|
+
Menu,
|
|
157
|
+
ValueContainer,
|
|
158
|
+
}}
|
|
159
|
+
styles={colourStyles}
|
|
160
|
+
unstyled={true}
|
|
161
|
+
{...props}
|
|
162
|
+
defaultValue={defaultValue}
|
|
163
|
+
/>
|
|
164
|
+
)
|
|
165
|
+
)
|
|
162
166
|
|
|
163
167
|
export { SelectAccountCard }
|