@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
72 lines (68 loc) • 1.93 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { useRef, useEffect } from 'react';
import styled from '../../../styles/styled/index.js';
import { ModalBody } from '../Modal/styles.js';
const Container = styled.button`
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
background: transparent;
`;
const InputField = styled.input`
margin: 0;
padding: 0;
background: none;
border: none;
outline: none;
font-size: 30px;
font-weight: var(--ck-modal-h1-font-weight, 600);
color: var(--ck-body-color);
width: ${(props) => {
const length = props.value?.length ?? 0;
if (length === 0) return "3.55ch";
const numPunctuations = (props.value?.match(/[.,]/g) || []).length;
const adjustedLength = length - numPunctuations * 0.55;
return `${Math.min(adjustedLength, 10)}ch`;
}};
min-width: 1ch;
max-width: 10ch;
`;
const AnimatedCurrency = styled(ModalBody)`
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
animation: fadeInDown 0.3s ease-out forwards;
font-size: ${(props) => props.$small ? "16px" : "24px"};
`;
const AmountInputField = ({ value, onChange, currency = "$", onKeyDown }) => {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current?.focus();
}, [value]);
return /* @__PURE__ */ jsxs(Container, { children: [
currency === "$" && /* @__PURE__ */ jsx(AnimatedCurrency, { children: currency }),
/* @__PURE__ */ jsx(
InputField,
{
ref: inputRef,
type: "text",
inputMode: "decimal",
value,
onChange,
placeholder: "0.00",
onKeyDown
}
),
currency !== "$" && /* @__PURE__ */ jsx(AnimatedCurrency, { $small: true, children: currency })
] });
};
export { AmountInputField as default };
//# sourceMappingURL=AmountInputField.js.map