Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Common/EnhancedInputs.js
import * as React from 'react'; | import * as React from 'react'; | ||||
import { Form, Input, Icon, Select } from 'antd'; | import { Form, Input, Select } from 'antd'; | ||||
import { DollarOutlined, WalletOutlined } from '@ant-design/icons'; | |||||
import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
import { ScanQRCode } from './ScanQRCode'; | import { ScanQRCode } from './ScanQRCode'; | ||||
import useBCH from '../../hooks/useBCH'; | import useBCH from '../../hooks/useBCH'; | ||||
import { currency } from '../Common/Ticker.js'; | import { currency } from '../Common/Ticker.js'; | ||||
export const InputAddonText = styled.span` | export const InputAddonText = styled.span` | ||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
Show All 36 Lines | const currencies = [ | ||||
{ | { | ||||
value: currency.ticker, | value: currency.ticker, | ||||
label: currency.ticker, | label: currency.ticker, | ||||
}, | }, | ||||
{ value: 'USD', label: 'USD' }, | { value: 'USD', label: 'USD' }, | ||||
]; | ]; | ||||
const currencyOptions = currencies.map(currency => { | const currencyOptions = currencies.map(currency => { | ||||
return ( | return ( | ||||
<Option key={currency.value} value={currency.value}> | <Option | ||||
key={currency.value} | |||||
value={currency.value} | |||||
className="selectedCurrencyOption" | |||||
style={{ | |||||
textAlign: 'left', | |||||
backgroundColor: 'white', | |||||
color: ' #3e3f42', | |||||
}} | |||||
> | |||||
{currency.label} | {currency.label} | ||||
</Option> | </Option> | ||||
); | ); | ||||
}); | }); | ||||
const CurrencySelect = ( | const CurrencySelect = ( | ||||
<Select | <Select | ||||
defaultValue={currency.ticker} | defaultValue={currency.ticker} | ||||
className="select-after" | className="select-after" | ||||
style={{ width: '30%' }} | style={{ width: '30%' }} | ||||
{...selectProps} | {...selectProps} | ||||
> | > | ||||
{currencyOptions} | {currencyOptions} | ||||
</Select> | </Select> | ||||
); | ); | ||||
return ( | return ( | ||||
<Form.Item {...otherProps}> | <Form.Item {...otherProps}> | ||||
<Input.Group compact> | <Input.Group compact> | ||||
<Input | <Input | ||||
style={{ width: '60%' }} | style={{ width: '60%', textAlign: 'left' }} | ||||
type="number" | type="number" | ||||
step="0.01" | step="0.01" | ||||
prefix={ | prefix={ | ||||
inputProps.dollar === 1 ? ( | inputProps.dollar === 1 ? ( | ||||
<Icon type="dollar" /> | <DollarOutlined /> | ||||
) : ( | ) : ( | ||||
<img | <img | ||||
src={currency.logo} | src={currency.logo} | ||||
alt="" | alt="" | ||||
width={16} | width={16} | ||||
height={16} | height={16} | ||||
/> | /> | ||||
) | ) | ||||
} | } | ||||
{...inputProps} | {...inputProps} | ||||
/> | /> | ||||
{CurrencySelect} | {CurrencySelect} | ||||
<InputNumberAddonText | <InputNumberAddonText | ||||
style={{ width: '10%' }} | style={{ width: '10%', height: '60px', lineHeight: '60px' }} | ||||
disabled={!!(inputProps || {}).disabled} | disabled={!!(inputProps || {}).disabled} | ||||
onClick={!(inputProps || {}).disabled && onMax} | onClick={!(inputProps || {}).disabled && onMax} | ||||
> | > | ||||
max | max | ||||
</InputNumberAddonText> | </InputNumberAddonText> | ||||
</Input.Group> | </Input.Group> | ||||
</Form.Item> | </Form.Item> | ||||
); | ); | ||||
Show All 26 Lines | export const FormItemWithQRCodeAddon = ({ | ||||
onScan, | onScan, | ||||
loadWithCameraOpen, | loadWithCameraOpen, | ||||
inputProps, | inputProps, | ||||
...otherProps | ...otherProps | ||||
}) => { | }) => { | ||||
return ( | return ( | ||||
<Form.Item {...otherProps}> | <Form.Item {...otherProps}> | ||||
<Input | <Input | ||||
prefix={<Icon type="wallet" />} | prefix={<WalletOutlined />} | ||||
addonAfter={ | addonAfter={ | ||||
<ScanQRCode | <ScanQRCode | ||||
loadWithCameraOpen={loadWithCameraOpen} | loadWithCameraOpen={loadWithCameraOpen} | ||||
onScan={onScan} | onScan={onScan} | ||||
/> | /> | ||||
} | } | ||||
{...inputProps} | {...inputProps} | ||||
/> | /> | ||||
Show All 23 Lines |