Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 52x 52x 52x 52x 52x 52x 52x 52x 52x 52x 4x 3x 3x 3x 3x 3x 3x 6x 3x 3x 3x 3x 3x 3x | import { noop } from 'lodash';
import React from 'react';
import ReactDOM from 'react-dom';
import { getAppliedStyles } from '../../common/dom';
import { FormContext, FormFieldContainer, TextInput } from '../../ui/form';
export enum CreditCardInputStylesType {
Default = 'default',
Error = 'error',
Focus = 'focus',
}
export default function getCreditCardInputStyles(
containerId: string,
properties: string[],
type: CreditCardInputStylesType = CreditCardInputStylesType.Default
): Promise<{ [key: string]: string }> {
const container = document.createElement('div');
const parentContainer = document.getElementById(containerId);
Iif (!parentContainer) {
throw new Error('Unable to retrieve input styles as the provided container ID is not valid.');
}
parentContainer.appendChild(container);
return new Promise(resolve => {
const callbackRef = (element: HTMLInputElement | null) => {
if (!element) {
return;
}
resolve(getAppliedStyles(element, properties));
ReactDOM.unmountComponentAtNode(container);
Eif (container.parentElement) {
container.parentElement.removeChild(container);
}
};
ReactDOM.render(
<FormContext.Provider value={ { isSubmitted: true, setSubmitted: noop } }>
<FormFieldContainer hasError={ type === CreditCardInputStylesType.Error }>
<TextInput
appearFocused={ type === CreditCardInputStylesType.Focus }
ref={ callbackRef }
/>
</FormFieldContainer>
</FormContext.Provider>,
container
);
});
}
|