@ebscn/ui 1.0.3-beta.0 → 1.0.3-beta.2
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/cjs/components/common-input/common-input.css +28 -0
- package/cjs/components/common-input/common-input.d.ts +27 -0
- package/cjs/components/common-input/common-input.js +88 -0
- package/cjs/components/common-input/index.d.ts +4 -0
- package/cjs/components/common-input/index.js +9 -0
- package/cjs/components/fene-input/fene-input.css +35 -0
- package/cjs/components/fene-input/fene-input.d.ts +14 -0
- package/cjs/components/fene-input/fene-input.js +63 -0
- package/cjs/components/fene-input/index.d.ts +4 -0
- package/cjs/components/fene-input/index.js +9 -0
- package/cjs/components/input/index.d.ts +4 -0
- package/cjs/components/input/index.js +9 -0
- package/cjs/components/input/input.css +96 -0
- package/cjs/components/input/input.d.ts +41 -0
- package/cjs/components/input/input.js +161 -0
- package/cjs/components/marketTag/marketTag.css +4 -4
- package/cjs/components/money-input/index.d.ts +4 -0
- package/cjs/components/money-input/index.js +9 -0
- package/cjs/components/money-input/money-input.css +35 -0
- package/cjs/components/money-input/money-input.d.ts +27 -0
- package/cjs/components/money-input/money-input.js +111 -0
- package/cjs/components/passcode-input/index.d.ts +4 -0
- package/cjs/components/passcode-input/index.js +9 -0
- package/cjs/components/passcode-input/passcode-input.css +136 -0
- package/cjs/components/passcode-input/passcode-input.d.ts +40 -0
- package/cjs/components/passcode-input/passcode-input.js +136 -0
- package/cjs/components/pay-input/index.d.ts +4 -0
- package/cjs/components/pay-input/index.js +10 -0
- package/cjs/components/pay-input/pay-input.css +136 -0
- package/cjs/components/pay-input/pay-input.d.ts +14 -0
- package/cjs/components/pay-input/pay-input.js +126 -0
- package/cjs/components/virtual-input/index.d.ts +4 -0
- package/cjs/components/virtual-input/index.js +9 -0
- package/cjs/components/virtual-input/virtual-input.css +99 -0
- package/cjs/components/virtual-input/virtual-input.d.ts +45 -0
- package/cjs/components/virtual-input/virtual-input.js +145 -0
- package/cjs/index.d.ts +5 -1
- package/cjs/index.js +37 -5
- package/es/components/common-input/common-input.css +28 -0
- package/es/components/common-input/common-input.d.ts +27 -0
- package/es/components/common-input/common-input.js +80 -0
- package/es/components/common-input/index.d.ts +4 -0
- package/es/components/common-input/index.js +3 -0
- package/es/components/fene-input/fene-input.css +35 -0
- package/es/components/fene-input/fene-input.d.ts +14 -0
- package/es/components/fene-input/fene-input.js +56 -0
- package/es/components/fene-input/index.d.ts +4 -0
- package/es/components/fene-input/index.js +3 -0
- package/es/components/input/index.d.ts +4 -0
- package/es/components/input/index.js +3 -0
- package/es/components/input/input.css +96 -0
- package/es/components/input/input.d.ts +41 -0
- package/es/components/input/input.js +152 -0
- package/es/components/marketTag/marketTag.css +4 -4
- package/es/components/money-input/index.d.ts +4 -0
- package/es/components/money-input/index.js +3 -0
- package/es/components/money-input/money-input.css +35 -0
- package/es/components/money-input/money-input.d.ts +27 -0
- package/es/components/money-input/money-input.js +103 -0
- package/es/components/passcode-input/index.d.ts +4 -0
- package/es/components/passcode-input/index.js +3 -0
- package/es/components/passcode-input/passcode-input.css +136 -0
- package/es/components/passcode-input/passcode-input.d.ts +40 -0
- package/es/components/passcode-input/passcode-input.js +127 -0
- package/es/components/pay-input/index.d.ts +4 -0
- package/es/components/pay-input/index.js +3 -0
- package/es/components/pay-input/pay-input.css +136 -0
- package/es/components/pay-input/pay-input.d.ts +14 -0
- package/es/components/pay-input/pay-input.js +115 -0
- package/es/components/virtual-input/index.d.ts +4 -0
- package/es/components/virtual-input/index.js +3 -0
- package/es/components/virtual-input/virtual-input.css +99 -0
- package/es/components/virtual-input/virtual-input.d.ts +45 -0
- package/es/components/virtual-input/virtual-input.js +134 -0
- package/es/index.d.ts +5 -1
- package/es/index.js +7 -2
- package/package.json +1 -1
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = PayInput;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _numberKeyboard = _interopRequireDefault(require("../number-keyboard"));
|
|
9
|
+
var _passcodeInput = _interopRequireDefault(require("../passcode-input"));
|
|
10
|
+
var _nativeProps = require("@ebscn/ui/utils/native-props");
|
|
11
|
+
var _withDefaultProps = require("@ebscn/ui/utils/with-default-props");
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
+
// import style from './index.module.less';
|
|
16
|
+
|
|
17
|
+
// import KeyBoard from 'components/keyboard';
|
|
18
|
+
|
|
19
|
+
var classPrefix = 'ebscn-pay-input';
|
|
20
|
+
var defaultProps = {
|
|
21
|
+
money: 'sss',
|
|
22
|
+
bankInfo: {
|
|
23
|
+
bankImg: 'stri',
|
|
24
|
+
bankName: 'string',
|
|
25
|
+
bank_code: ' string',
|
|
26
|
+
accountNo: 'string'
|
|
27
|
+
},
|
|
28
|
+
onCancel: function () {},
|
|
29
|
+
onSubmit: function () {}
|
|
30
|
+
};
|
|
31
|
+
function PayInput(props) {
|
|
32
|
+
var p = (0, _withDefaultProps.mergeProps)(defaultProps, props);
|
|
33
|
+
var _a = (0, _react.useState)(true),
|
|
34
|
+
visible = _a[0],
|
|
35
|
+
setVisible = _a[1];
|
|
36
|
+
var _b = (0, _react.useState)(''),
|
|
37
|
+
pwd = _b[0],
|
|
38
|
+
setPwd = _b[1];
|
|
39
|
+
var money = props.money,
|
|
40
|
+
bankInfo = props.bankInfo,
|
|
41
|
+
onSubmit = props.onSubmit,
|
|
42
|
+
onCancel = props.onCancel;
|
|
43
|
+
console.log(bankInfo);
|
|
44
|
+
// if (isError) {
|
|
45
|
+
// setPwd('')
|
|
46
|
+
// }
|
|
47
|
+
function onInput(key) {
|
|
48
|
+
if (pwd.length != 6) {
|
|
49
|
+
setPwd(pwd + key);
|
|
50
|
+
// if (pwd.length == 5) {
|
|
51
|
+
// onSubmit(pwd + key);
|
|
52
|
+
// }
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
function onConfirm() {
|
|
56
|
+
if (pwd.length == 6) {
|
|
57
|
+
onSubmit(pwd);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
function onDelete() {
|
|
61
|
+
if (pwd !== '') {
|
|
62
|
+
setPwd(pwd.slice(0, pwd.length - 1));
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
function onClean() {
|
|
66
|
+
setPwd('');
|
|
67
|
+
}
|
|
68
|
+
// function onCancel() {
|
|
69
|
+
// setVisible(false)
|
|
70
|
+
// }
|
|
71
|
+
return (0, _nativeProps.withNativeProps)(p, _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
|
|
72
|
+
className: "".concat(classPrefix),
|
|
73
|
+
id: 'payinput'
|
|
74
|
+
}, _react.default.createElement("div", {
|
|
75
|
+
className: "".concat(classPrefix, "-topArea")
|
|
76
|
+
}, _react.default.createElement("div", {
|
|
77
|
+
className: "".concat(classPrefix, "-topArea-cancel"),
|
|
78
|
+
onClick: function () {
|
|
79
|
+
return onCancel();
|
|
80
|
+
}
|
|
81
|
+
}), _react.default.createElement("div", {
|
|
82
|
+
className: "".concat(classPrefix, "-topArea-title")
|
|
83
|
+
}, "\u8BF7\u8F93\u5165\u8D44\u91D1\u5BC6\u7801")), _react.default.createElement("div", {
|
|
84
|
+
className: "".concat(classPrefix, "-moneyBox")
|
|
85
|
+
}, _react.default.createElement("div", {
|
|
86
|
+
className: "".concat(classPrefix, "-moneyBox-moneyTitle")
|
|
87
|
+
}, "\u53D6\u73B0\u91D1\u989D"), _react.default.createElement("div", {
|
|
88
|
+
className: "".concat(classPrefix, "-moneyBox-moneyArea")
|
|
89
|
+
}, _react.default.createElement("div", {
|
|
90
|
+
className: "".concat(classPrefix, "-moneyBox-moneyArea-moneyTip")
|
|
91
|
+
}, "\u00A5"), _react.default.createElement("div", {
|
|
92
|
+
className: "".concat(classPrefix, "-moneyBox-moneyArea-moneyText")
|
|
93
|
+
}, money)), _react.default.createElement("div", {
|
|
94
|
+
className: "".concat(classPrefix, "-moneyBox-cashCard")
|
|
95
|
+
}, _react.default.createElement("div", null, "\u53D6\u73B0\u91D1\u5230"), _react.default.createElement("div", null, _react.default.createElement("div", {
|
|
96
|
+
className: "".concat(classPrefix, "-moneyBox-cashCard-cardIcon"),
|
|
97
|
+
style: {
|
|
98
|
+
backgroundImage: "url(".concat(bankInfo.bankImg, ")")
|
|
99
|
+
}
|
|
100
|
+
}), _react.default.createElement("div", {
|
|
101
|
+
className: "".concat(classPrefix, "-moneyBox-cashCard-cardText")
|
|
102
|
+
}, "".concat(bankInfo.bankName))))), _react.default.createElement("div", {
|
|
103
|
+
className: "".concat(classPrefix, "-password")
|
|
104
|
+
}, _react.default.createElement(_passcodeInput.default, {
|
|
105
|
+
length: 6,
|
|
106
|
+
seperated: true,
|
|
107
|
+
keyboard: _react.default.createElement(_react.default.Fragment, null),
|
|
108
|
+
onFocus: function () {
|
|
109
|
+
setVisible(true);
|
|
110
|
+
},
|
|
111
|
+
value: pwd
|
|
112
|
+
})), _react.default.createElement("div", {
|
|
113
|
+
className: "".concat(classPrefix, "-forgetpassword"),
|
|
114
|
+
onClick: function () {
|
|
115
|
+
console.log(window.COMMON_CONF.forgetPwdUrl, 'urll');
|
|
116
|
+
}
|
|
117
|
+
}, "\u5FD8\u8BB0\u8D44\u91D1\u5BC6\u7801")), _react.default.createElement(_numberKeyboard.default, {
|
|
118
|
+
types: 'numberKeyboard',
|
|
119
|
+
visible: visible,
|
|
120
|
+
onInput: onInput,
|
|
121
|
+
onDelete: onDelete,
|
|
122
|
+
onClean: onClean,
|
|
123
|
+
onConfirm: onConfirm,
|
|
124
|
+
onClose: onCancel
|
|
125
|
+
})));
|
|
126
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
.ebscn-virtual-input {
|
|
2
|
+
--font-size: var(--adm-font-size-9);
|
|
3
|
+
--color: var(--adm-color-text);
|
|
4
|
+
--placeholder-color: var(--adm-color-light);
|
|
5
|
+
--disabled-color: var(--adm-color-weak);
|
|
6
|
+
--text-align: left;
|
|
7
|
+
--caret-width: var(--adm-virtual-input-caret-width, 2px);
|
|
8
|
+
--caret-color: var(--adm-virtual-input-caret-color, var(--adm-color-primary));
|
|
9
|
+
display: flex;
|
|
10
|
+
justify-content: flex-start;
|
|
11
|
+
align-items: center;
|
|
12
|
+
position: relative;
|
|
13
|
+
text-align: var(--text-align);
|
|
14
|
+
font-size: var(--font-size);
|
|
15
|
+
line-height: 1.5;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
color: var(--color);
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
20
|
+
.ebscn-virtual-input > * {
|
|
21
|
+
vertical-align: top;
|
|
22
|
+
}
|
|
23
|
+
.ebscn-virtual-input-content {
|
|
24
|
+
flex: auto;
|
|
25
|
+
display: inline-block;
|
|
26
|
+
position: relative;
|
|
27
|
+
z-index: 1;
|
|
28
|
+
width: 100%;
|
|
29
|
+
max-width: 100%;
|
|
30
|
+
overflow-y: hidden;
|
|
31
|
+
overflow-x: scroll;
|
|
32
|
+
scrollbar-width: none;
|
|
33
|
+
}
|
|
34
|
+
.ebscn-virtual-input-content::-webkit-scrollbar {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
37
|
+
.ebscn-virtual-input-placeholder {
|
|
38
|
+
display: block;
|
|
39
|
+
position: absolute;
|
|
40
|
+
z-index: 0;
|
|
41
|
+
left: 0;
|
|
42
|
+
top: 0;
|
|
43
|
+
width: 100%;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
text-align: var(--text-align);
|
|
46
|
+
color: var(--placeholder-color);
|
|
47
|
+
}
|
|
48
|
+
.ebscn-virtual-input-caret-container {
|
|
49
|
+
display: inline-block;
|
|
50
|
+
width: var(--caret-width);
|
|
51
|
+
height: 1.3em;
|
|
52
|
+
vertical-align: top;
|
|
53
|
+
margin-right: 1px;
|
|
54
|
+
}
|
|
55
|
+
.ebscn-virtual-input-caret {
|
|
56
|
+
width: 100%;
|
|
57
|
+
height: 100%;
|
|
58
|
+
background-color: var(--caret-color);
|
|
59
|
+
position: relative;
|
|
60
|
+
top: 5%;
|
|
61
|
+
}
|
|
62
|
+
.ebscn-virtual-input:focus {
|
|
63
|
+
outline: none;
|
|
64
|
+
}
|
|
65
|
+
.ebscn-virtual-input:focus .adm-virtual-input-caret {
|
|
66
|
+
display: block;
|
|
67
|
+
animation-name: adm-caret-blink;
|
|
68
|
+
animation-duration: 1s;
|
|
69
|
+
animation-timing-function: linear;
|
|
70
|
+
animation-iteration-count: infinite;
|
|
71
|
+
}
|
|
72
|
+
.ebscn-virtual-input-disabled {
|
|
73
|
+
color: var(--disabled-color);
|
|
74
|
+
}
|
|
75
|
+
@keyframes adm-caret-blink {
|
|
76
|
+
from {
|
|
77
|
+
opacity: 1;
|
|
78
|
+
}
|
|
79
|
+
60% {
|
|
80
|
+
opacity: 1;
|
|
81
|
+
}
|
|
82
|
+
80% {
|
|
83
|
+
opacity: 0;
|
|
84
|
+
}
|
|
85
|
+
to {
|
|
86
|
+
opacity: 0;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
.ebscn-virtual-input-clear {
|
|
90
|
+
flex: none;
|
|
91
|
+
margin-left: 8px;
|
|
92
|
+
color: var(--placeholder-color);
|
|
93
|
+
padding: 3px;
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
}
|
|
96
|
+
.ebscn-virtual-input-clear .antd-mobile-icon {
|
|
97
|
+
display: block;
|
|
98
|
+
font-size: var(--adm-font-size-6);
|
|
99
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ReactElement } from 'react';
|
|
3
|
+
import { NativeProps } from '../../utils/native-props';
|
|
4
|
+
import { NumberKeyboardProps } from '../number-keyboard';
|
|
5
|
+
type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
6
|
+
type AriaProps = {
|
|
7
|
+
role?: string;
|
|
8
|
+
};
|
|
9
|
+
export type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step' | 'id' | 'placeholder' | 'readOnly' | 'disabled'> & {
|
|
10
|
+
value?: string;
|
|
11
|
+
defaultValue?: string;
|
|
12
|
+
onChange?: (val: string) => void;
|
|
13
|
+
clearable?: boolean;
|
|
14
|
+
onlyShowClearWhenFocus?: boolean;
|
|
15
|
+
onClear?: () => void;
|
|
16
|
+
onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
17
|
+
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
|
|
18
|
+
min?: number;
|
|
19
|
+
max?: number;
|
|
20
|
+
} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'> & AriaProps;
|
|
21
|
+
export type VirtualInputProps = {
|
|
22
|
+
onFocus?: () => void;
|
|
23
|
+
onBlur?: () => void;
|
|
24
|
+
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
25
|
+
keyboard?: ReactElement<NumberKeyboardProps>;
|
|
26
|
+
clearable?: boolean;
|
|
27
|
+
onClear?: () => void;
|
|
28
|
+
} & Pick<InputProps, 'value' | 'onChange' | 'placeholder' | 'disabled'> & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--caret-width' | '--caret-color'>;
|
|
29
|
+
export type VirtualInputRef = {
|
|
30
|
+
focus: () => void;
|
|
31
|
+
blur: () => void;
|
|
32
|
+
};
|
|
33
|
+
export declare const VirtualInput: React.ForwardRefExoticComponent<{
|
|
34
|
+
onFocus?: (() => void) | undefined;
|
|
35
|
+
onBlur?: (() => void) | undefined;
|
|
36
|
+
onClick?: ((e: React.MouseEvent<HTMLDivElement>) => void) | undefined;
|
|
37
|
+
keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
|
|
38
|
+
clearable?: boolean | undefined;
|
|
39
|
+
onClear?: (() => void) | undefined;
|
|
40
|
+
} & Pick<InputProps, "disabled" | "value" | "onChange" | "placeholder"> & {
|
|
41
|
+
className?: string | undefined;
|
|
42
|
+
style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;
|
|
43
|
+
tabIndex?: number | undefined;
|
|
44
|
+
} & React.AriaAttributes & React.RefAttributes<VirtualInputRef>>;
|
|
45
|
+
export {};
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.VirtualInput = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _nativeProps = require("../../utils/native-props");
|
|
9
|
+
var _withDefaultProps = require("../../utils/with-default-props");
|
|
10
|
+
var _usePropsValue = require("../../utils/use-props-value");
|
|
11
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
12
|
+
var _ahooks = require("ahooks");
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
|
+
// import type { InputProps } from '../input'
|
|
17
|
+
|
|
18
|
+
// import { CloseCircleFill } from 'antd-mobile-icons'
|
|
19
|
+
|
|
20
|
+
// import { useConfig } from '../config-provider'
|
|
21
|
+
var classPrefix = 'ebscn-virtual-input';
|
|
22
|
+
var defaultProps = {
|
|
23
|
+
defaultValue: ''
|
|
24
|
+
};
|
|
25
|
+
var VirtualInput = exports.VirtualInput = (0, _react.forwardRef)(function (p, ref) {
|
|
26
|
+
var _a;
|
|
27
|
+
var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
|
|
28
|
+
var _b = (0, _usePropsValue.usePropsValue)(props),
|
|
29
|
+
value = _b[0],
|
|
30
|
+
setValue = _b[1];
|
|
31
|
+
console.log(props, value, 11);
|
|
32
|
+
var rootRef = (0, _react.useRef)(null);
|
|
33
|
+
var contentRef = (0, _react.useRef)(null);
|
|
34
|
+
var _c = (0, _react.useState)(false),
|
|
35
|
+
hasFocus = _c[0],
|
|
36
|
+
setHasFocus = _c[1];
|
|
37
|
+
// const { locale } = useConfig()
|
|
38
|
+
function scrollToEnd() {
|
|
39
|
+
var root = rootRef.current;
|
|
40
|
+
if (!root) return;
|
|
41
|
+
if (document.activeElement !== root) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
var content = contentRef.current;
|
|
45
|
+
if (!content) return;
|
|
46
|
+
content.scrollLeft = content.clientWidth;
|
|
47
|
+
}
|
|
48
|
+
(0, _ahooks.useIsomorphicLayoutEffect)(function () {
|
|
49
|
+
scrollToEnd();
|
|
50
|
+
}, [value]);
|
|
51
|
+
(0, _react.useEffect)(function () {
|
|
52
|
+
if (hasFocus) {
|
|
53
|
+
scrollToEnd();
|
|
54
|
+
}
|
|
55
|
+
}, [hasFocus]);
|
|
56
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
|
57
|
+
return {
|
|
58
|
+
focus: function () {
|
|
59
|
+
var _a;
|
|
60
|
+
(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
61
|
+
},
|
|
62
|
+
blur: function () {
|
|
63
|
+
var _a;
|
|
64
|
+
(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
});
|
|
68
|
+
function onFocus() {
|
|
69
|
+
var _a;
|
|
70
|
+
setHasFocus(true);
|
|
71
|
+
(_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
72
|
+
}
|
|
73
|
+
function onBlur() {
|
|
74
|
+
var _a;
|
|
75
|
+
setHasFocus(false);
|
|
76
|
+
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
77
|
+
}
|
|
78
|
+
var keyboard = props.keyboard;
|
|
79
|
+
var keyboardElement = keyboard && _react.default.cloneElement(keyboard, {
|
|
80
|
+
onInput: function (v) {
|
|
81
|
+
var _a, _b;
|
|
82
|
+
setValue(value + v);
|
|
83
|
+
(_b = (_a = keyboard.props).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, v);
|
|
84
|
+
},
|
|
85
|
+
onDelete: function () {
|
|
86
|
+
var _a, _b;
|
|
87
|
+
setValue(value.slice(0, -1));
|
|
88
|
+
(_b = (_a = keyboard.props).onDelete) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
89
|
+
},
|
|
90
|
+
visible: hasFocus,
|
|
91
|
+
onClose: function () {
|
|
92
|
+
var _a, _b, _c, _d;
|
|
93
|
+
var activeElement = document.activeElement;
|
|
94
|
+
// Long press makes `activeElement` to be the child of rootRef
|
|
95
|
+
// We will trigger blur on the child element instead
|
|
96
|
+
if (activeElement && ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
|
|
97
|
+
activeElement.blur();
|
|
98
|
+
} else {
|
|
99
|
+
(_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.blur();
|
|
100
|
+
}
|
|
101
|
+
(_d = (_c = keyboard.props).onClose) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
102
|
+
},
|
|
103
|
+
onChangeKeyBoard: function () {},
|
|
104
|
+
onClean: function () {
|
|
105
|
+
var _a, _b;
|
|
106
|
+
setValue('');
|
|
107
|
+
(_b = (_a = keyboard.props).onClean) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
108
|
+
},
|
|
109
|
+
onConfirm: function () {
|
|
110
|
+
var _a, _b;
|
|
111
|
+
setHasFocus(false);
|
|
112
|
+
(_b = (_a = keyboard.props).onConfirm) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
113
|
+
},
|
|
114
|
+
getContainer: null
|
|
115
|
+
});
|
|
116
|
+
return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
|
|
117
|
+
ref: rootRef,
|
|
118
|
+
className: (0, _classnames.default)(classPrefix, (_a = {}, _a["".concat(classPrefix, "-disabled")] = props.disabled, _a)),
|
|
119
|
+
tabIndex: props.disabled ? undefined : 0,
|
|
120
|
+
role: 'textbox',
|
|
121
|
+
onFocus: onFocus,
|
|
122
|
+
onBlur: onBlur,
|
|
123
|
+
onClick: props.onClick
|
|
124
|
+
}, _react.default.createElement("div", {
|
|
125
|
+
className: "".concat(classPrefix, "-content"),
|
|
126
|
+
ref: contentRef,
|
|
127
|
+
"aria-disabled": props.disabled,
|
|
128
|
+
"aria-label": props.placeholder
|
|
129
|
+
}, value, _react.default.createElement("div", {
|
|
130
|
+
className: "".concat(classPrefix, "-caret-container")
|
|
131
|
+
}, hasFocus && _react.default.createElement("div", {
|
|
132
|
+
className: "".concat(classPrefix, "-caret")
|
|
133
|
+
}))), props.clearable && !!value && hasFocus && _react.default.createElement("div", {
|
|
134
|
+
className: "".concat(classPrefix, "-clear"),
|
|
135
|
+
onClick: function (e) {
|
|
136
|
+
var _a;
|
|
137
|
+
e.stopPropagation();
|
|
138
|
+
setValue('');
|
|
139
|
+
(_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
140
|
+
},
|
|
141
|
+
role: 'button'
|
|
142
|
+
}), [undefined, null, ''].includes(value) && _react.default.createElement("div", {
|
|
143
|
+
className: "".concat(classPrefix, "-placeholder")
|
|
144
|
+
}, props.placeholder), keyboardElement));
|
|
145
|
+
});
|
package/cjs/index.d.ts
CHANGED
|
@@ -15,7 +15,6 @@ export { default as Mask } from './components/mask';
|
|
|
15
15
|
export { NoticeBar, NoticeBarGraph } from './components/notice-bar';
|
|
16
16
|
export { default as NumberKeyboard } from './components/number-keyboard';
|
|
17
17
|
export { default as PageIndicator } from './components/page-indicator';
|
|
18
|
-
export { default as PdfLink } from './components/pdfLink';
|
|
19
18
|
export { default as Picker } from './components/picker';
|
|
20
19
|
export { default as PickerView } from './components/picker-view';
|
|
21
20
|
export { default as Popup } from './components/popup';
|
|
@@ -36,3 +35,8 @@ export { default as Switch } from './components/switch';
|
|
|
36
35
|
export { default as Tabs } from './components/tabs';
|
|
37
36
|
export { default as Tip } from './components/tip';
|
|
38
37
|
export { default as ToastLoading } from './components/toastLoading';
|
|
38
|
+
export { default as PayInput } from './components/pay-input';
|
|
39
|
+
export { default as MoneyInput } from './components/money-input';
|
|
40
|
+
export { default as FeneInput } from './components/fene-input';
|
|
41
|
+
export { default as Input } from './components/input';
|
|
42
|
+
export { default as CommonInput } from './components/common-input';
|
package/cjs/index.js
CHANGED
|
@@ -21,7 +21,6 @@ var _exportNames = {
|
|
|
21
21
|
NoticeBarGraph: true,
|
|
22
22
|
NumberKeyboard: true,
|
|
23
23
|
PageIndicator: true,
|
|
24
|
-
PdfLink: true,
|
|
25
24
|
Picker: true,
|
|
26
25
|
PickerView: true,
|
|
27
26
|
Popup: true,
|
|
@@ -41,7 +40,12 @@ var _exportNames = {
|
|
|
41
40
|
Switch: true,
|
|
42
41
|
Tabs: true,
|
|
43
42
|
Tip: true,
|
|
44
|
-
ToastLoading: true
|
|
43
|
+
ToastLoading: true,
|
|
44
|
+
PayInput: true,
|
|
45
|
+
MoneyInput: true,
|
|
46
|
+
FeneInput: true,
|
|
47
|
+
Input: true,
|
|
48
|
+
CommonInput: true
|
|
45
49
|
};
|
|
46
50
|
Object.defineProperty(exports, "AlphabetKeyboard", {
|
|
47
51
|
enumerable: true,
|
|
@@ -73,6 +77,12 @@ Object.defineProperty(exports, "Checkbox", {
|
|
|
73
77
|
return _checkbox.default;
|
|
74
78
|
}
|
|
75
79
|
});
|
|
80
|
+
Object.defineProperty(exports, "CommonInput", {
|
|
81
|
+
enumerable: true,
|
|
82
|
+
get: function () {
|
|
83
|
+
return _commonInput.default;
|
|
84
|
+
}
|
|
85
|
+
});
|
|
76
86
|
Object.defineProperty(exports, "DateRangePicker", {
|
|
77
87
|
enumerable: true,
|
|
78
88
|
get: function () {
|
|
@@ -85,6 +95,12 @@ Object.defineProperty(exports, "Divider", {
|
|
|
85
95
|
return _divider.default;
|
|
86
96
|
}
|
|
87
97
|
});
|
|
98
|
+
Object.defineProperty(exports, "FeneInput", {
|
|
99
|
+
enumerable: true,
|
|
100
|
+
get: function () {
|
|
101
|
+
return _feneInput.default;
|
|
102
|
+
}
|
|
103
|
+
});
|
|
88
104
|
Object.defineProperty(exports, "Grid", {
|
|
89
105
|
enumerable: true,
|
|
90
106
|
get: function () {
|
|
@@ -103,6 +119,12 @@ Object.defineProperty(exports, "ImageViewer", {
|
|
|
103
119
|
return _imageViewer.default;
|
|
104
120
|
}
|
|
105
121
|
});
|
|
122
|
+
Object.defineProperty(exports, "Input", {
|
|
123
|
+
enumerable: true,
|
|
124
|
+
get: function () {
|
|
125
|
+
return _input.default;
|
|
126
|
+
}
|
|
127
|
+
});
|
|
106
128
|
Object.defineProperty(exports, "MarketTag", {
|
|
107
129
|
enumerable: true,
|
|
108
130
|
get: function () {
|
|
@@ -115,6 +137,12 @@ Object.defineProperty(exports, "Mask", {
|
|
|
115
137
|
return _mask.default;
|
|
116
138
|
}
|
|
117
139
|
});
|
|
140
|
+
Object.defineProperty(exports, "MoneyInput", {
|
|
141
|
+
enumerable: true,
|
|
142
|
+
get: function () {
|
|
143
|
+
return _moneyInput.default;
|
|
144
|
+
}
|
|
145
|
+
});
|
|
118
146
|
Object.defineProperty(exports, "NoticeBar", {
|
|
119
147
|
enumerable: true,
|
|
120
148
|
get: function () {
|
|
@@ -139,10 +167,10 @@ Object.defineProperty(exports, "PageIndicator", {
|
|
|
139
167
|
return _pageIndicator.default;
|
|
140
168
|
}
|
|
141
169
|
});
|
|
142
|
-
Object.defineProperty(exports, "
|
|
170
|
+
Object.defineProperty(exports, "PayInput", {
|
|
143
171
|
enumerable: true,
|
|
144
172
|
get: function () {
|
|
145
|
-
return
|
|
173
|
+
return _payInput.default;
|
|
146
174
|
}
|
|
147
175
|
});
|
|
148
176
|
Object.defineProperty(exports, "Picker", {
|
|
@@ -299,7 +327,6 @@ var _mask = _interopRequireDefault(require("./components/mask"));
|
|
|
299
327
|
var _noticeBar = require("./components/notice-bar");
|
|
300
328
|
var _numberKeyboard = _interopRequireDefault(require("./components/number-keyboard"));
|
|
301
329
|
var _pageIndicator = _interopRequireDefault(require("./components/page-indicator"));
|
|
302
|
-
var _pdfLink = _interopRequireDefault(require("./components/pdfLink"));
|
|
303
330
|
var _picker = _interopRequireDefault(require("./components/picker"));
|
|
304
331
|
var _pickerView = _interopRequireDefault(require("./components/picker-view"));
|
|
305
332
|
var _popup = _interopRequireDefault(require("./components/popup"));
|
|
@@ -320,4 +347,9 @@ var _switch = _interopRequireDefault(require("./components/switch"));
|
|
|
320
347
|
var _tabs = _interopRequireDefault(require("./components/tabs"));
|
|
321
348
|
var _tip = _interopRequireDefault(require("./components/tip"));
|
|
322
349
|
var _toastLoading = _interopRequireDefault(require("./components/toastLoading"));
|
|
350
|
+
var _payInput = _interopRequireDefault(require("./components/pay-input"));
|
|
351
|
+
var _moneyInput = _interopRequireDefault(require("./components/money-input"));
|
|
352
|
+
var _feneInput = _interopRequireDefault(require("./components/fene-input"));
|
|
353
|
+
var _input = _interopRequireDefault(require("./components/input"));
|
|
354
|
+
var _commonInput = _interopRequireDefault(require("./components/common-input"));
|
|
323
355
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
.ebscn-Common-input {
|
|
2
|
+
height: 170.5px;
|
|
3
|
+
background: #ffffff;
|
|
4
|
+
padding: 13.5px 16px 13.5px 16px;
|
|
5
|
+
}
|
|
6
|
+
.ebscn-Common-input-middleArea {
|
|
7
|
+
border-bottom: 1px solid ;
|
|
8
|
+
}
|
|
9
|
+
.ebscn-Common-input-middleArea-inputArea {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: space-between;
|
|
13
|
+
}
|
|
14
|
+
.ebscn-Common-input-middleArea-unitBox {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: row;
|
|
17
|
+
margin-left: 45px;
|
|
18
|
+
}
|
|
19
|
+
.ebscn-Common-input-middleArea-unitBox-unit {
|
|
20
|
+
height: 15px;
|
|
21
|
+
font-size: 11px;
|
|
22
|
+
font-weight: 400;
|
|
23
|
+
color: #999999;
|
|
24
|
+
}
|
|
25
|
+
.ebscn-Common-input-middleArea-unitBox-line {
|
|
26
|
+
width: 0.5px;
|
|
27
|
+
height: 15px;
|
|
28
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { NativeProps } from '../../utils/native-props';
|
|
3
|
+
import { InputProps } from "../input";
|
|
4
|
+
type tipProps = {
|
|
5
|
+
isShowTip: boolean;
|
|
6
|
+
tipComponent: React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
type unitProps = {
|
|
9
|
+
isShowUnit: boolean;
|
|
10
|
+
unitComponent: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
export type CommonInputProps = {
|
|
13
|
+
value?: string;
|
|
14
|
+
defaultValue?: string;
|
|
15
|
+
onChange?: (val: string) => void;
|
|
16
|
+
isShowUnit?: boolean;
|
|
17
|
+
isShowLine: boolean;
|
|
18
|
+
tipProps?: tipProps;
|
|
19
|
+
unitProps?: unitProps;
|
|
20
|
+
clearable: boolean;
|
|
21
|
+
inputProps?: InputProps;
|
|
22
|
+
inputleftComponent?: React.ReactNode;
|
|
23
|
+
prefixComponent?: React.ReactNode;
|
|
24
|
+
suffixComponent?: React.ReactNode;
|
|
25
|
+
} & NativeProps;
|
|
26
|
+
export declare function CommonInput(p: CommonInputProps): JSX.Element;
|
|
27
|
+
export {};
|