Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Common/EnhancedInputs.js
Show All 10 Lines | |||||
export const AntdFormCss = css` | export const AntdFormCss = css` | ||||
.ant-input-group-addon { | .ant-input-group-addon { | ||||
background-color: ${props => | background-color: ${props => | ||||
props.theme.formAddonBackground} !important; | props.theme.formAddonBackground} !important; | ||||
border: 1px solid ${props => props.theme.formBorders}; | border: 1px solid ${props => props.theme.formBorders}; | ||||
color: ${props => props.theme.formAddonForeground} !important; | color: ${props => props.theme.formAddonForeground} !important; | ||||
} | } | ||||
input.ant-input, | |||||
.ant-select-selection { | |||||
background-color: #fff !important; | |||||
box-shadow: none !important; | |||||
border-radius: 4px; | |||||
font-weight: bold; | |||||
color: rgb(62, 63, 66); | |||||
opacity: 1; | |||||
height: 50px; | |||||
} | |||||
.ant-input-affix-wrapper { | |||||
background-color: #fff; | |||||
border: 1px solid #eaedf3 !important; | |||||
} | |||||
.ant-select-selector { | |||||
height: 60px !important; | |||||
border: 1px solid #eaedf3 !important; | |||||
} | |||||
.ant-form-item-has-error | |||||
> div | |||||
> div.ant-form-item-control-input | |||||
> div | |||||
> span | |||||
> span | |||||
> span.ant-input-affix-wrapper { | |||||
background-color: #fff; | |||||
border-color: #f04134 !important; | |||||
} | |||||
.ant-form-item-has-error .ant-input, | |||||
.ant-form-item-has-error .ant-input-affix-wrapper, | |||||
.ant-form-item-has-error .ant-input:hover, | |||||
.ant-form-item-has-error .ant-input-affix-wrapper:hover { | |||||
background-color: #fff; | |||||
border-color: #f04134 !important; | |||||
} | |||||
.ant-form-item-has-error | |||||
.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) | |||||
.ant-select-selector { | |||||
background-color: #fff; | |||||
border-color: #f04134 !important; | |||||
} | |||||
.ant-select-single .ant-select-selector .ant-select-selection-item, | |||||
.ant-select-single .ant-select-selector .ant-select-selection-placeholder { | |||||
line-height: 60px; | |||||
text-align: left; | |||||
color: #3e3f42; | |||||
font-weight: bold; | |||||
} | |||||
`; | `; | ||||
export const AntdFormWrapper = styled.div` | export const AntdFormWrapper = styled.div` | ||||
${AntdFormCss} | ${AntdFormCss} | ||||
`; | `; | ||||
export const InputAddonText = styled.span` | export const InputAddonText = styled.span` | ||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
display: block; | display: block; | ||||
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Lines | const CurrencySelect = ( | ||||
className="select-after" | className="select-after" | ||||
style={{ width: '30%' }} | style={{ width: '30%' }} | ||||
{...selectProps} | {...selectProps} | ||||
> | > | ||||
{currencyOptions} | {currencyOptions} | ||||
</Select> | </Select> | ||||
); | ); | ||||
return ( | return ( | ||||
<AntdFormWrapper> | |||||
<Form.Item {...otherProps}> | <Form.Item {...otherProps}> | ||||
<Input.Group compact> | <Input.Group compact> | ||||
<Input | <Input | ||||
style={{ width: '60%', textAlign: 'left' }} | style={{ width: '60%', textAlign: 'left' }} | ||||
type="number" | type="number" | ||||
step={ | step={ | ||||
inputProps.dollar === 1 | inputProps.dollar === 1 | ||||
? 0.01 | ? 0.01 | ||||
: 1 / 10 ** currency.cashDecimals | : 1 / 10 ** currency.cashDecimals | ||||
} | } | ||||
prefix={ | prefix={ | ||||
inputProps.dollar === 1 ? ( | inputProps.dollar === 1 ? ( | ||||
<ThemedDollarOutlined /> | <ThemedDollarOutlined /> | ||||
) : ( | ) : ( | ||||
<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%', height: '60px', lineHeight: '60px' }} | 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> | ||||
</AntdFormWrapper> | |||||
); | ); | ||||
}; | }; | ||||
export const FormItemWithMaxAddon = ({ onMax, inputProps, ...otherProps }) => { | export const FormItemWithMaxAddon = ({ onMax, inputProps, ...otherProps }) => { | ||||
return ( | return ( | ||||
<AntdFormWrapper> | <AntdFormWrapper> | ||||
<Form.Item {...otherProps}> | <Form.Item {...otherProps}> | ||||
<Input | <Input | ||||
▲ Show 20 Lines • Show All 69 Lines • Show Last 20 Lines |