Changeset View
Changeset View
Standalone View
Standalone View
cashtab/src/components/Common/EnhancedInputs.js
import * as React from 'react'; | import * as React from 'react'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import { Form, Input, Select } from 'antd'; | import { Form, Input, Select, Checkbox } from 'antd'; | ||||
import { | import { | ||||
ThemedDollarOutlined, | ThemedDollarOutlined, | ||||
ThemedWalletOutlined, | ThemedWalletOutlined, | ||||
ThemedAliasOutlined, | |||||
} from 'components/Common/CustomIcons'; | } from 'components/Common/CustomIcons'; | ||||
import styled, { css } from 'styled-components'; | import styled, { css } from 'styled-components'; | ||||
import ScanQRCode from './ScanQRCode'; | import ScanQRCode from './ScanQRCode'; | ||||
import { currency } from 'components/Common/Ticker.js'; | import { currency } from 'components/Common/Ticker.js'; | ||||
const { TextArea } = Input; | const { TextArea } = Input; | ||||
export const AntdFormCss = css` | export const AntdFormCss = css` | ||||
▲ Show 20 Lines • Show All 131 Lines • ▼ Show 20 Lines | export const InputNumberAddonText = styled.span` | ||||
${props => | ${props => | ||||
props.disabled | props.disabled | ||||
? ` | ? ` | ||||
cursor: not-allowed; | cursor: not-allowed; | ||||
` | ` | ||||
: `cursor: pointer;`} | : `cursor: pointer;`} | ||||
`; | `; | ||||
export const CashtabCheckbox = styled(Checkbox)` | |||||
.ant-checkbox-checked .ant-checkbox-inner { | |||||
background-color: ${props => props.theme.eCashBlue} !important; | |||||
border-color: ${props => props.theme.eCashBlue} !important; | |||||
} | |||||
.ant-checkbox + span { | |||||
color: ${props => props.theme.forms.text} !important; | |||||
} | |||||
`; | |||||
export const SendBchInput = ({ | export const SendBchInput = ({ | ||||
onMax, | onMax, | ||||
inputProps, | inputProps, | ||||
selectProps, | selectProps, | ||||
activeFiatCode, | activeFiatCode, | ||||
...otherProps | ...otherProps | ||||
}) => { | }) => { | ||||
const { Option } = Select; | const { Option } = Select; | ||||
▲ Show 20 Lines • Show All 182 Lines • ▼ Show 20 Lines | return ( | ||||
</AntdFormWrapper> | </AntdFormWrapper> | ||||
); | ); | ||||
}; | }; | ||||
DestinationAddressSingleWithoutQRScan.propTypes = { | DestinationAddressSingleWithoutQRScan.propTypes = { | ||||
inputProps: PropTypes.object, | inputProps: PropTypes.object, | ||||
}; | }; | ||||
export const AliasInput = ({ inputProps, ...otherProps }) => { | |||||
return ( | |||||
<AntdFormWrapper> | |||||
<Form.Item {...otherProps}> | |||||
<Input | |||||
prefix={<ThemedAliasOutlined />} | |||||
autoComplete="off" | |||||
{...inputProps} | |||||
/> | |||||
</Form.Item> | |||||
</AntdFormWrapper> | |||||
); | |||||
}; | |||||
AliasInput.propTypes = { | |||||
inputProps: PropTypes.object, | |||||
}; | |||||
export const AliasAddressInput = ({ inputProps, ...otherProps }) => { | |||||
return ( | |||||
<AntdFormWrapper> | |||||
<Form.Item {...otherProps}> | |||||
<Input | |||||
prefix={<ThemedWalletOutlined />} | |||||
autoComplete="off" | |||||
{...inputProps} | |||||
/> | |||||
</Form.Item> | |||||
</AntdFormWrapper> | |||||
); | |||||
}; | |||||
AliasAddressInput.propTypes = { | |||||
inputProps: PropTypes.object, | |||||
}; | |||||
export const DestinationAddressMulti = ({ inputProps, ...otherProps }) => { | export const DestinationAddressMulti = ({ inputProps, ...otherProps }) => { | ||||
return ( | return ( | ||||
<AntdFormWrapper> | <AntdFormWrapper> | ||||
<Form.Item {...otherProps}> | <Form.Item {...otherProps}> | ||||
<TextArea | <TextArea | ||||
style={{ height: '189px' }} | style={{ height: '189px' }} | ||||
prefix={<ThemedWalletOutlined />} | prefix={<ThemedWalletOutlined />} | ||||
autoComplete="off" | autoComplete="off" | ||||
▲ Show 20 Lines • Show All 50 Lines • Show Last 20 Lines |