Differential D9312 Diff 27918 web/cashtab/src/components/Common/EnhancedInputs.js

Changeset View

Standalone View

web/cashtab/src/components/Common/EnhancedInputs.js

import * as React from 'react';		import * as React from 'react';
import { Form, Input, Select } from 'antd';		import { Form, Input, Select } from 'antd';
import {		import {
ThemedDollarOutlined,		ThemedDollarOutlined,
ThemedWalletOutlined,		ThemedWalletOutlined,
} from '@components/Common/CustomIcons';		} from '@components/Common/CustomIcons';
import styled from 'styled-components';		import styled, { css } from 'styled-components/macro';
import { ScanQRCode } from './ScanQRCode';		import { ScanQRCode } from './ScanQRCode';
import useBCH from '@hooks/useBCH';		import useBCH from '@hooks/useBCH';
import { currency } from '@components/Common/Ticker.js';		import { currency } from '@components/Common/Ticker.js';

		export const AntdFormCss = css`
		.ant-input-group-addon {
		background-color: ${props =>
		props.theme.formAddonBackground} !important;
		border: 1px solid ${props => props.theme.formBorders};
		color: ${props => props.theme.formAddonForeground} !important;
		}
		`;
		export const AntdFormWrapper = styled.div`
		${AntdFormCss}
		`;

export const InputAddonText = styled.span`		export const InputAddonText = styled.span`
width: 100%;		width: 100%;
height: 100%;		height: 100%;
display: block;		display: block;

${props =>		${props =>
props.disabled		props.disabled
? `		? `
cursor: not-allowed;		cursor: not-allowed;
`		`
: `cursor: pointer;`}		: `cursor: pointer;`}
`;		`;

export const InputNumberAddonText = styled.span`		export const InputNumberAddonText = styled.span`
background-color: #f4f4f4 !important;		background-color: ${props =>
border: 1px solid rgb(234, 237, 243);		props.theme.formAddonBackground} !important;
color: #3e3f42 !important;		border: border: 1px solid ${props => props.theme.formBorders};
		color: ${props => props.theme.formAddonForeground} !important;
height: 50px;		height: 50px;
line-height: 47px;		line-height: 47px;

* {		* {
color: #3e3f42 !important;		color: ${props => props.theme.formAddonForeground} !important;
}		}
${props =>		${props =>
props.disabled		props.disabled
? `		? `
cursor: not-allowed;		cursor: not-allowed;
`		`
: `cursor: pointer;`}		: `cursor: pointer;`}
`;		`;

export const SendBchInput = ({		export const SendBchInput = ({
onMax,		onMax,
inputProps,		inputProps,
selectProps,		selectProps,
...otherProps		...otherProps
}) => {		}) => {
const { Option } = Select;		const { Option } = Select;
▲ Show 20 Lines • Show All 66 Lines • ▼ Show 20 Lines	return (
</InputNumberAddonText>		</InputNumberAddonText>
</Input.Group>		</Input.Group>
</Form.Item>		</Form.Item>
);		);
};		};

export const FormItemWithMaxAddon = ({ onMax, inputProps, ...otherProps }) => {		export const FormItemWithMaxAddon = ({ onMax, inputProps, ...otherProps }) => {
return (		return (
		<AntdFormWrapper>
<Form.Item {...otherProps}>		<Form.Item {...otherProps}>
<Input		<Input
type="number"		type="number"
prefix={		prefix={
<img src={currency.logo} alt="" width={16} height={16} />		<img
		src={currency.logo}
		alt=""
		width={16}
		height={16}
		/>
}		}
addonAfter={		addonAfter={
<InputAddonText		<InputAddonText
disabled={!!(inputProps \|\| {}).disabled}		disabled={!!(inputProps \|\| {}).disabled}
onClick={!(inputProps \|\| {}).disabled && onMax}		onClick={!(inputProps \|\| {}).disabled && onMax}
>		>
max		max
</InputAddonText>		</InputAddonText>
}		}
{...inputProps}		{...inputProps}
/>		/>
</Form.Item>		</Form.Item>
		</AntdFormWrapper>
);		);
};		};

// loadWithCameraOpen prop: if true, load page with camera scanning open		// loadWithCameraOpen prop: if true, load page with camera scanning open
export const FormItemWithQRCodeAddon = ({		export const FormItemWithQRCodeAddon = ({
onScan,		onScan,
loadWithCameraOpen,		loadWithCameraOpen,
inputProps,		inputProps,
...otherProps		...otherProps
}) => {		}) => {
return (		return (
		<AntdFormWrapper>
<Form.Item {...otherProps}>		<Form.Item {...otherProps}>
<Input		<Input
prefix={<ThemedWalletOutlined />}		prefix={<ThemedWalletOutlined />}
autoComplete="off"		autoComplete="off"
addonAfter={		addonAfter={
<ScanQRCode		<ScanQRCode
loadWithCameraOpen={loadWithCameraOpen}		loadWithCameraOpen={loadWithCameraOpen}
onScan={onScan}		onScan={onScan}
/>		/>
}		}
{...inputProps}		{...inputProps}
/>		/>
</Form.Item>		</Form.Item>
		</AntdFormWrapper>
);		);
};		};

export const AddressValidators = () => {		export const AddressValidators = () => {
const { BCH } = useBCH();		const { BCH } = useBCH();

return {		return {
safelyDetectAddressFormat: value => {		safelyDetectAddressFormat: value => {
Show All 14 Lines