@ebscn/ui 1.0.3-beta.1 → 1.0.3-beta.2

package/cjs/components/money-input/money-input.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { NativeProps } from '../../utils/native-props';
+import { VirtualInputProps } from "../virtual-input/virtual-input";
+type tipProps = {
+    isShowTip: boolean;
+    tipComponent: React.ReactNode;
+};
+type unitProps = {
+    isShowUnit: boolean;
+    unitComponent: React.ReactNode;
+};
+export type MoneyInputProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (val: string) => void;
+    isShowUnit?: boolean;
+    isShowLine: boolean;
+    tipProps?: tipProps;
+    unitProps?: unitProps;
+    clearable: boolean;
+    inputProps?: VirtualInputProps;
+    inputleftComponent?: React.ReactNode;
+    prefixComponent?: React.ReactNode;
+    suffixComponent?: React.ReactNode;
+} & NativeProps;
+export declare function MoneyInput(p: MoneyInputProps): JSX.Element;
+export {};

package/cjs/components/money-input/money-input.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoneyInput = MoneyInput;
+var _react = _interopRequireWildcard(require("react"));
+var _nativeProps = require("../../utils/native-props");
+var _withDefaultProps = require("../../utils/with-default-props");
+var _tip = _interopRequireDefault(require("./demos/component/tip"));
+var _usePropsValue = require("@ebscn/ui/utils/use-props-value");
+var _virtualInput = require("../virtual-input/virtual-input");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+// import cns from "classnames";
+// import { useEffect, useRef } from "react";
+// import React from "react";
+// import { VirtualInputProps, VirtualInput } from "../virtual-input/virtual-input";
+// import { NativeProps, withNativeProps } from '../../utils/native-props'
+// import { mergeProps } from '../../utils/with-default-props'
+// import TitleLeft from "./demos/component/title-left";
+// import TitleRight from "./demos/component/title-right";
+// import InputLeft from "./demos/component/input-left";
+// import InputRight from "./demos/component/input-right";
+// import Tip from "./demos/component/tip";
+// import Footer from "./demos/component/footer";
+// import Content from "./demos/component/content";
+// const classPrefix = 'ebscn-money-input'
+// export type MoneyInputProps = {
+//     titleLeftComponent?: React.ReactNode
+//     titleRightComponent?: React.ReactNode
+//     inputProps?: VirtualInputProps
+//     inputleftComponent?: React.ReactNode
+//     inputrightComponent?: React.ReactNode
+//     tipComponent?: React.ReactNode
+//     contentComponent?: React.ReactNode
+//     footerComponent?: React.ReactNode
+// } & NativeProps;
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var classPrefix = 'ebscn-money-input';
+var defaultProps = {
+  // inputleftComponent: <InputLeft></InputLeft>,
+  tipComponent: _react.default.createElement(_tip.default, null),
+  defaultValue: ''
+};
+function MoneyInput(p) {
+  var _a, _b, _c;
+  var props = (0, _withDefaultProps.mergeProps)(p, defaultProps);
+  var _d = (0, _usePropsValue.usePropsValue)(props),
+    value = _d[0],
+    setValue = _d[1];
+  var _e = (0, _react.useState)('#ebebeb'),
+    color = _e[0],
+    setColor = _e[1];
+  var _f = (0, _react.useState)(false),
+    showTip = _f[0],
+    setShowTip = _f[1];
+  var _g = (0, _react.useState)(true),
+    clearable = _g[0],
+    setClearable = _g[1];
+  console.log(p, 'CommonProp');
+  function changeColor(isShowLine, color) {
+    if (isShowLine) {
+      setColor(color);
+    }
+  }
+  // const {titleLeftComponent,inputProps,} = props
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: "".concat(classPrefix)
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea"),
+    style: {
+      'borderBottomColor': "".concat(((_a = props.tipProps) === null || _a === void 0 ? void 0 : _a.isShowTip) ? 'red' : color)
+    }
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-inputArea")
+  }, props.prefixComponent, props.inputleftComponent, _react.default.createElement(_virtualInput.VirtualInput, __assign({
+    onFocus: function () {
+      changeColor(props.isShowLine, 'blue');
+    },
+    onBlur: function () {
+      changeColor(props.isShowLine, '#ebebeb');
+    },
+    value: value
+  }, props.inputProps, {
+    onChange: function (val) {
+      var _a;
+      console.log((_a = props.tipProps) === null || _a === void 0 ? void 0 : _a.isShowTip, 'isShowTIP');
+      // props.tipProps?.isShowTip ? setColor('red') : setColor('blue')
+      setValue(val);
+    }
+  }, props.inputProps)), props.suffixComponent), ((_b = props.unitProps) === null || _b === void 0 ? void 0 : _b.isShowUnit) ? _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-unitBox")
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-unitBox-line")
+  }), _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-unitBox-unit")
+  }, props.unitProps.unitComponent)) : _react.default.createElement(_react.default.Fragment, null)), ((_c = props.tipProps) === null || _c === void 0 ? void 0 : _c.isShowTip) ? _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-tipArea")
+  }, props.tipProps.tipComponent) : _react.default.createElement(_react.default.Fragment, null)));
+}

package/cjs/components/passcode-input/index.d.ts

@@ -0,0 +1,4 @@
+import './passcode-input.less';
+import { PasscodeInput } from './passcode-input';
+export type { PasscodeInputProps, PasscodeInputRef } from './passcode-input';
+export default PasscodeInput;

package/cjs/components/passcode-input/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./passcode-input.css");
+var _passcodeInput2 = require("./passcode-input");
+var _default = exports.default = _passcodeInput2.PasscodeInput;

package/cjs/components/passcode-input/passcode-input.css

@@ -0,0 +1,136 @@
+.ebscn-passcode-input {
+  position: relative;
+  display: inline-block;
+  --cell-size: 50px;
+  --cell-gap: 10px;
+  --dot-size: 10px;
+  --border-radius: 12px;
+}
+.ebscn-passcode-input-cell-container {
+  display: inline-flex;
+  vertical-align: top;
+}
+.ebscn-passcode-input-cell {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-size: var(--adm-font-size-10);
+  width: var(--cell-size);
+  height: var(--cell-size);
+  background: var(--adm-color-background);
+  background-color: #f5f5f5;
+}
+.ebscn-passcode-input:not(.ebscn-passcode-input-seperated) {
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+}
+.ebscn-passcode-input:not(.ebscn-passcode-input-seperated) .ebscn-passcode-input-cell:not(:last-child) {
+  border-right: 1px solid var(--border-color);
+}
+.ebscn-passcode-input:not(.ebscn-passcode-input-seperated).ebscn-passcode-input-focused {
+  border-color: var(--adm-color-primary);
+  box-shadow: 0 0 2px 0 var(--adm-color-primary);
+  outline: none;
+}
+.ebscn-passcode-input:not(.ebscn-passcode-input-seperated).ebscn-passcode-input-error {
+  border-color: var(--adm-color-danger);
+  box-shadow: 0 0 2px 0 var(--adm-color-danger);
+  animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;
+}
+.ebscn-passcode-input.ebscn-passcode-input-seperated .ebscn-passcode-input-cell {
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+}
+.ebscn-passcode-input.ebscn-passcode-input-seperated .ebscn-passcode-input-cell:not(:last-child) {
+  margin-right: var(--cell-gap);
+}
+.ebscn-passcode-input.ebscn-passcode-input-seperated .ebscn-passcode-input-cell-focused {
+  border-color: var(--adm-color-primary);
+  box-shadow: 0 0 2px 0 var(--adm-color-primary);
+}
+.ebscn-passcode-input-seperated.ebscn-passcode-input-focused {
+  outline: none;
+}
+.ebscn-passcode-input.ebscn-passcode-input-seperated.ebscn-passcode-input-error {
+  animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;
+}
+.ebscn-passcode-input.ebscn-passcode-input-seperated.ebscn-passcode-input-error .ebscn-passcode-input-cell {
+  border-color: var(--adm-color-danger);
+  box-shadow: 0 0 2px 0 var(--adm-color-danger);
+}
+.ebscn-passcode-input-cell-dot::before {
+  content: '';
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: 100%;
+  background: var(--adm-color-text);
+}
+.ebscn-passcode-input-cell-caret::after {
+  content: '';
+  width: 2px;
+  height: 1.1em;
+  margin-left: 1px;
+  background: var(--adm-color-primary);
+  animation: 1s linear infinite adm-caret-blink;
+}
+.ebscn-passcode-input > .ebscn-passcode-input-native-input {
+  position: absolute;
+  left: -200vw;
+  top: 0;
+  display: block;
+  width: 50px;
+  height: 20px;
+  opacity: 0.5;
+}
+@keyframes adm-shake-horizontal {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(-4px);
+  }
+  20% {
+    transform: translateX(5px);
+  }
+  30% {
+    transform: translateX(-1px);
+  }
+  40% {
+    transform: translateX(8px);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  60% {
+    transform: translateX(-8px);
+  }
+  70% {
+    transform: translateX(1px);
+  }
+  80% {
+    transform: translateX(-5px);
+  }
+  90% {
+    transform: translateX(4px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes adm-caret-blink {
+  from {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/cjs/components/passcode-input/passcode-input.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import type { NumberKeyboardProps } from '../number-keyboard';
+export type PasscodeInputProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (val: string) => void;
+    length?: number;
+    plain?: boolean;
+    error?: boolean;
+    caret?: boolean;
+    seperated?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    keyboard?: ReactElement<NumberKeyboardProps>;
+    onFill?: (val: string) => void;
+} & NativeProps<'--cell-gap' | '--cell-size' | '--dot-size' | '--border-color' | '--border-radius'>;
+export type PasscodeInputRef = {
+    focus: () => void;
+    blur: () => void;
+};
+export declare const PasscodeInput: React.ForwardRefExoticComponent<{
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onChange?: ((val: string) => void) | undefined;
+    length?: number | undefined;
+    plain?: boolean | undefined;
+    error?: boolean | undefined;
+    caret?: boolean | undefined;
+    seperated?: boolean | undefined;
+    onBlur?: (() => void) | undefined;
+    onFocus?: (() => void) | undefined;
+    keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
+    onFill?: ((val: string) => void) | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-color" | "--dot-size" | "--border-radius" | "--cell-gap" | "--cell-size", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<PasscodeInputRef>>;

package/cjs/components/passcode-input/passcode-input.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PasscodeInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _withDefaultProps = require("../../utils/with-default-props");
+var _nativeProps = require("../../utils/native-props");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _bound = require("../../utils/bound");
+var _usePropsValue = require("../../utils/use-props-value");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+var classPrefix = 'ebscn-passcode-input';
+var defaultProps = {
+  defaultValue: '',
+  length: 6,
+  plain: false,
+  error: false,
+  seperated: false,
+  caret: true
+};
+var PasscodeInput = exports.PasscodeInput = (0, _react.forwardRef)(function (p, ref) {
+  var _a;
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  // 防止 length 值不合法
+  var cellLength = props.length > 0 && props.length < Infinity ? Math.floor(props.length) : defaultProps.length;
+  var _b = (0, _react.useState)(false),
+    focused = _b[0],
+    setFocused = _b[1];
+  var _c = (0, _usePropsValue.usePropsValue)(props),
+    value = _c[0],
+    setValue = _c[1];
+  var rootRef = (0, _react.useRef)(null);
+  var nativeInputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var _a;
+    if (value.length >= cellLength) {
+      (_a = props.onFill) === null || _a === void 0 ? void 0 : _a.call(props, value);
+    }
+  }, [value, cellLength]);
+  var onFocus = function () {
+    var _a, _b;
+    if (!props.keyboard) {
+      (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    setFocused(true);
+    (_b = props.onFocus) === null || _b === void 0 ? void 0 : _b.call(props);
+  };
+  (0, _react.useEffect)(function () {
+    if (!focused) return;
+    var timeout = window.setTimeout(function () {
+      var _a;
+      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+        block: 'center',
+        inline: 'center',
+        behavior: 'smooth'
+      });
+    }, 100);
+    return function () {
+      window.clearTimeout(timeout);
+    };
+  }, [focused]);
+  var onBlur = function () {
+    var _a;
+    setFocused(false);
+    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      focus: function () {
+        var _a;
+        return (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      blur: function () {
+        var _a, _b;
+        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+      }
+    };
+  });
+  var renderCells = function () {
+    var _a;
+    var cells = [];
+    var chars = value.split('');
+    var caretIndex = chars.length; // 光标位置index等于当前文字长度
+    var focusedIndex = (0, _bound.bound)(chars.length, 0, cellLength - 1);
+    for (var i = 0; i < cellLength; i++) {
+      cells.push(_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(classPrefix, "-cell"), (_a = {}, _a["".concat(classPrefix, "-cell-caret")] = props.caret && caretIndex === i && focused, _a["".concat(classPrefix, "-cell-focused")] = focusedIndex === i && focused, _a["".concat(classPrefix, "-cell-dot")] = !props.plain && chars[i], _a)),
+        key: i
+      }, chars[i] && props.plain ? chars[i] : ''));
+    }
+    return cells;
+  };
+  var cls = (0, _classnames.default)(classPrefix, (_a = {}, _a["".concat(classPrefix, "-focused")] = focused, _a["".concat(classPrefix, "-error")] = props.error, _a["".concat(classPrefix, "-seperated")] = props.seperated, _a));
+  return _react.default.createElement(_react.default.Fragment, null, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    ref: rootRef,
+    tabIndex: 0,
+    className: cls,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    role: 'button'
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-cell-container")
+  }, renderCells()), _react.default.createElement("input", {
+    ref: nativeInputRef,
+    className: "".concat(classPrefix, "-native-input"),
+    value: value,
+    type: 'text',
+    pattern: '[0-9]*',
+    inputMode: 'numeric',
+    onChange: function (e) {
+      setValue(e.target.value.slice(0, props.length));
+    },
+    "aria-hidden": true
+  }))), props.keyboard && _react.default.cloneElement(props.keyboard, {
+    visible: focused,
+    onInput: function (v) {
+      if (value.length < cellLength) {
+        setValue((value + v).slice(0, props.length));
+      }
+    },
+    onDelete: function () {
+      setValue(value.slice(0, -1));
+    },
+    onClose: function () {
+      var _a;
+      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    },
+    onClean: function () {},
+    onConfirm: function () {}
+  }));
+});

package/cjs/components/pay-input/index.d.ts

@@ -0,0 +1,4 @@
+import PayInput from "./pay-input";
+import "./pay-input.less";
+export type { PayInputProps } from "./pay-input";
+export default PayInput;

package/cjs/components/pay-input/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _payInput = _interopRequireDefault(require("./pay-input"));
+require("./pay-input.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = _payInput.default;

package/cjs/components/pay-input/pay-input.css

@@ -0,0 +1,136 @@
+.ebscn-pay-input {
+  background: #ffffff;
+  border-radius: 10px 10px 0px 0px;
+  padding: 0 16px;
+  padding-bottom: 216px;
+}
+.ebscn-pay-input-topArea {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  height: 65px;
+}
+.ebscn-pay-input-topArea-cancel {
+  position: absolute;
+  left: 10px;
+  align-self: center;
+  background: url('./images/common_icon_cancel.png') no-repeat center / 100%;
+  height: 28px;
+  width: 28px;
+}
+.ebscn-pay-input-topArea-title {
+  align-self: center;
+  font-size: 18px;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+}
+.ebscn-pay-input-moneyBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.ebscn-pay-input-moneyBox-moneyTitle {
+  margin-top: 13.5px;
+  margin-bottom: 8px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 22px;
+}
+.ebscn-pay-input-moneyBox-moneyArea {
+  display: flex;
+}
+.ebscn-pay-input-moneyBox-moneyArea-moneyTip {
+  font-size: 28px;
+  font-family: GD;
+  font-weight: 500;
+  color: #333333;
+  line-height: 50px;
+}
+.ebscn-pay-input-moneyBox-moneyArea-moneyText {
+  margin-left: 10px;
+  margin-bottom: 31px;
+  font-size: 28px;
+  font-family: GD;
+  font-weight: 500;
+  color: #333333;
+  line-height: 50px;
+}
+.ebscn-pay-input-moneyBox-cashCard {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 32px;
+}
+.ebscn-pay-input-moneyBox-cashCard div:first-child {
+  font-size: 16px;
+  font-weight: 400;
+  color: #666666;
+  line-height: 22px;
+}
+.ebscn-pay-input-moneyBox-cashCard div:nth-child(2) {
+  display: flex;
+  flex-direction: row;
+}
+.ebscn-pay-input-moneyBox-cashCard div:nth-child(2)-cardIcon {
+  margin-top: 3px;
+  width: 20px;
+  height: 20px;
+}
+.ebscn-pay-input-moneyBox-cashCard div:nth-child(2)-cardText {
+  margin-left: 8px;
+  font-size: 16px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 400;
+  color: #333333;
+  line-height: 22px;
+}
+.ebscn-pay-input-password {
+  display: flex;
+  justify-content: center;
+  padding: 0 16px;
+}
+.ebscn-pay-input-inputBox {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.ebscn-pay-input-inputBox .pwdItem {
+  width: 47px;
+  height: 47px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+.ebscn-pay-input-inputBox .pwdItem .circle {
+  font-size: 40px;
+}
+.ebscn-pay-input-pwdTip {
+  margin-top: 13px;
+  margin-bottom: 23px;
+  position: relative;
+  right: 0;
+  font-size: 17px;
+  font-weight: 400;
+  text-align: right;
+  color: #4c7cf1;
+  line-height: 24px;
+}
+.ebscn-pay-input-forgetpassword {
+  color: #4c7cf1;
+  font-size: 17px;
+  text-align: right;
+  line-height: 24px;
+  margin-top: 17.5px;
+  margin-bottom: 12px;
+}
+.ebscn-pay-input :global .adm-passcode-input-cell {
+  width: 94px;
+  height: 94px;
+  background-color: #f5f5f5;
+}

package/cjs/components/pay-input/pay-input.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NativeProps } from '@ebscn/ui/utils/native-props';
+export type PayInputProps = {
+    money: string;
+    bankInfo: {
+        bankImg: string;
+        bankName: string;
+        bank_code: string;
+        accountNo: string;
+    };
+    onCancel: Function;
+    onSubmit: Function;
+} & NativeProps;
+export default function PayInput(props: PayInputProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;