@ape.swap/bonds-sdk 1.0.208 → 1.0.209
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/dist/components/uikit/Input/Input.js +3 -1
- package/dist/components/uikit-sdk/Input/Input.d.ts +4 -0
- package/dist/components/uikit-sdk/Input/Input.js +70 -0
- package/dist/components/uikit-sdk/Input/NumericInput.d.ts +10 -0
- package/dist/components/uikit-sdk/Input/NumericInput.js +35 -0
- package/dist/components/uikit-sdk/Input/StyledInput.d.ts +11 -0
- package/dist/components/uikit-sdk/Input/StyledInput.js +37 -0
- package/dist/components/uikit-sdk/Input/index.d.ts +3 -0
- package/dist/components/uikit-sdk/Input/index.js +3 -0
- package/package.json +1 -1
|
@@ -22,7 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
24
24
|
import { Input as ThemeInput, Spinner } from 'theme-ui';
|
|
25
|
-
import { Text
|
|
25
|
+
import { Text } from '../../uikit';
|
|
26
|
+
import Flex from '../Flex';
|
|
27
|
+
import Svg from '../Svg';
|
|
26
28
|
var colorScheme = {
|
|
27
29
|
default: 'gray',
|
|
28
30
|
error: 'red',
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
24
|
+
import { Input as ThemeInput, Spinner } from 'theme-ui';
|
|
25
|
+
import { Text, Flex, Svg } from '../../uikit-sdk';
|
|
26
|
+
var colorScheme = {
|
|
27
|
+
default: 'gray',
|
|
28
|
+
error: 'red',
|
|
29
|
+
success: 'green',
|
|
30
|
+
};
|
|
31
|
+
var Input = function (_a) {
|
|
32
|
+
var variant = _a.variant, width = _a.width, status = _a.status, isLoading = _a.isLoading, props = __rest(_a, ["variant", "width", "status", "isLoading"]);
|
|
33
|
+
switch (variant) {
|
|
34
|
+
case 'search':
|
|
35
|
+
return (_jsxs(Flex, __assign({ sx: { position: 'relative', width: width ? width : 'unset' } }, { children: [_jsx(ThemeInput, __assign({}, props, { sx: {
|
|
36
|
+
background: 'white3',
|
|
37
|
+
border: 'none',
|
|
38
|
+
pl: '10px',
|
|
39
|
+
borderRadius: '10px',
|
|
40
|
+
':focus': { outline: 'none' },
|
|
41
|
+
} })), _jsx(Flex, __assign({ sx: { position: 'absolute', right: 5, justifyContent: 'center', height: '100%' } }, { children: _jsx(Svg, { icon: "search" }) }))] })));
|
|
42
|
+
case 'password':
|
|
43
|
+
var statusColor = colorScheme[status];
|
|
44
|
+
return (_jsxs(Flex, __assign({ sx: {
|
|
45
|
+
width: width ? width : '100%',
|
|
46
|
+
flexDirection: 'column',
|
|
47
|
+
alignItems: 'center',
|
|
48
|
+
gap: '5px',
|
|
49
|
+
position: 'relative',
|
|
50
|
+
} }, { children: [_jsx(ThemeInput, __assign({}, props, { type: "password", sx: {
|
|
51
|
+
position: 'relative',
|
|
52
|
+
background: 'white3',
|
|
53
|
+
border: 'none',
|
|
54
|
+
borderBottom: "2px solid ".concat(statusColor),
|
|
55
|
+
color: statusColor,
|
|
56
|
+
pl: '10px',
|
|
57
|
+
borderRadius: '10px',
|
|
58
|
+
':focus': { outline: 'none' },
|
|
59
|
+
} })), isLoading && (_jsx(Flex, __assign({ sx: { position: 'absolute', top: '5px', right: '5px', justifyContent: 'center', height: '100%' } }, { children: _jsx(Spinner, { width: "20px", height: "20px" }) }))), _jsx(Text, __assign({ sx: { fontSize: '10px', color: statusColor, visibility: status === 'default' ? 'hidden' : 'visible' } }, { children: status === 'error' ? 'Wrong Password' : 'Correct Password' }))] })));
|
|
60
|
+
default:
|
|
61
|
+
return (_jsx(ThemeInput, __assign({}, props, { sx: {
|
|
62
|
+
background: 'white3',
|
|
63
|
+
border: 'none',
|
|
64
|
+
pl: '10px',
|
|
65
|
+
borderRadius: '10px',
|
|
66
|
+
':focus': { outline: 'none' },
|
|
67
|
+
} })));
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
export default Input;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ThemeUIStyleObject } from 'theme-ui';
|
|
3
|
+
declare const NumericInput: ({ onUserInput, value, disabled, style, placeholder, }: {
|
|
4
|
+
onUserInput?: ((input: string) => void) | undefined;
|
|
5
|
+
value: string;
|
|
6
|
+
disabled?: boolean | undefined;
|
|
7
|
+
style?: ThemeUIStyleObject<import("@theme-ui/css").Theme<{}>> | undefined;
|
|
8
|
+
placeholder?: string | undefined;
|
|
9
|
+
}) => import("react").JSX.Element;
|
|
10
|
+
export default NumericInput;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
13
|
+
import { isNumber } from '../../../utils/numbers';
|
|
14
|
+
import Input from './Input';
|
|
15
|
+
var NumericInput = function (_a) {
|
|
16
|
+
var onUserInput = _a.onUserInput, value = _a.value, disabled = _a.disabled, style = _a.style, _b = _a.placeholder, placeholder = _b === void 0 ? '0.0' : _b;
|
|
17
|
+
return (_jsx(Input, { sx: __assign({ border: 'none', padding: '0px 0px', position: 'relative', width: '100%', display: 'inline-block', fontSize: ['19px', '19px', '22px', '22px'], ':focus': { outline: 'none' } }, style), disabled: disabled, value: value, onChange: function (e) {
|
|
18
|
+
onUserInput && onUserInput(e.target.value);
|
|
19
|
+
}, placeholder: placeholder, pattern: "^[0-9]*[.,]?[0-9]*$", onInput: function (v) {
|
|
20
|
+
if (v.currentTarget.value.includes(',')) {
|
|
21
|
+
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
22
|
+
}
|
|
23
|
+
if (v.currentTarget.value.includes('%')) {
|
|
24
|
+
v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '');
|
|
25
|
+
}
|
|
26
|
+
if (v.currentTarget.value === '.') {
|
|
27
|
+
v.currentTarget.value = '0.';
|
|
28
|
+
}
|
|
29
|
+
v.currentTarget.value =
|
|
30
|
+
!!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
|
|
31
|
+
? v.currentTarget.value
|
|
32
|
+
: v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
|
|
33
|
+
} }));
|
|
34
|
+
};
|
|
35
|
+
export default NumericInput;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface InputProps {
|
|
3
|
+
endAdornment?: React.ReactNode;
|
|
4
|
+
onChange: (e: React.FormEvent<HTMLInputElement>) => void;
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
startAdornment?: React.ReactNode;
|
|
7
|
+
value: string;
|
|
8
|
+
height?: string;
|
|
9
|
+
}
|
|
10
|
+
declare const StyledInput: React.FC<InputProps>;
|
|
11
|
+
export default StyledInput;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
var __assign = (this && this.__assign) || function () {
|
|
6
|
+
__assign = Object.assign || function(t) {
|
|
7
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
+
s = arguments[i];
|
|
9
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
+
t[p] = s[p];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
};
|
|
16
|
+
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
17
|
+
//@ts-nocheck
|
|
18
|
+
import styled from '@emotion/styled';
|
|
19
|
+
import Flex from '../Flex';
|
|
20
|
+
import Input from './Input';
|
|
21
|
+
var StyledInputWrapper = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background: ", ";\n border-radius: 10px;\n height: 72px;\n padding: 0px 16px;\n"], ["\n align-items: center;\n background: ", ";\n border-radius: 10px;\n height: 72px;\n padding: 0px 16px;\n"])), function (_a) {
|
|
22
|
+
var theme = _a.theme;
|
|
23
|
+
return theme.colors.white4;
|
|
24
|
+
});
|
|
25
|
+
var StyledInputComponent = styled(Input)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n background: none;\n border: 0;\n color: ", ";\n flex: 1;\n height: 56px;\n margin: 0;\n padding: 0;\n outline: none;\n font-weight: 800;\n font-size: 22px;\n\n &::placeholder {\n color: ", ";\n }\n"], ["\n width: 100%;\n background: none;\n border: 0;\n color: ", ";\n flex: 1;\n height: 56px;\n margin: 0;\n padding: 0;\n outline: none;\n font-weight: 800;\n font-size: 22px;\n\n &::placeholder {\n color: ", ";\n }\n"])), function (_a) {
|
|
26
|
+
var theme = _a.theme;
|
|
27
|
+
return (theme.isDark ? theme.colors.primaryBright : theme.colors.primary);
|
|
28
|
+
}, function (_a) {
|
|
29
|
+
var theme = _a.theme;
|
|
30
|
+
return !theme.isDark && theme.colors.gray;
|
|
31
|
+
});
|
|
32
|
+
var StyledInput = function (_a) {
|
|
33
|
+
var endAdornment = _a.endAdornment, onChange = _a.onChange, placeholder = _a.placeholder, startAdornment = _a.startAdornment, value = _a.value, height = _a.height;
|
|
34
|
+
return (_jsxs(StyledInputWrapper, __assign({ sx: { height: height !== null && height !== void 0 ? height : null } }, { children: [!!startAdornment && startAdornment, _jsx(StyledInputComponent, { placeholder: placeholder, value: value, onChange: onChange }), !!endAdornment && endAdornment] })));
|
|
35
|
+
};
|
|
36
|
+
export default StyledInput;
|
|
37
|
+
var templateObject_1, templateObject_2;
|