sotre
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import { Component } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
@@ -10,72 +11,72 @@ const taxPillSx = {
|
||||
'& .MuiChip-label': { px: 1 },
|
||||
};
|
||||
|
||||
export function TaxRatePills({ rates, selected, onSelect, readOnly }) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, minHeight: 28 }}>
|
||||
{rates.map((rate) => {
|
||||
const active = Number(selected) === Number(rate);
|
||||
return (
|
||||
<Chip
|
||||
key={rate}
|
||||
size="small"
|
||||
label={`${rate} %`}
|
||||
onClick={readOnly || !onSelect ? undefined : () => onSelect(rate)}
|
||||
sx={{
|
||||
...taxPillSx,
|
||||
visibility: active || !readOnly ? 'visible' : 'hidden',
|
||||
bgcolor: active ? 'rgba(0, 0, 0, 0.14)' : 'rgba(0, 0, 0, 0.06)',
|
||||
...(readOnly
|
||||
? {}
|
||||
: {
|
||||
cursor: 'pointer',
|
||||
'&:hover': { bgcolor: 'rgba(0, 0, 0, 0.12)' },
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
export class TaxRatePills extends Component {
|
||||
render() {
|
||||
const { rates, selected, onSelect, readOnly } = this.props;
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, minHeight: 28 }}>
|
||||
{rates.map((rate) => {
|
||||
const active = Number(selected) === Number(rate);
|
||||
return (
|
||||
<Chip
|
||||
key={rate}
|
||||
size="small"
|
||||
label={`${rate} %`}
|
||||
onClick={readOnly || !onSelect ? undefined : () => onSelect(rate)}
|
||||
sx={{
|
||||
...taxPillSx,
|
||||
visibility: active || !readOnly ? 'visible' : 'hidden',
|
||||
bgcolor: active ? 'rgba(0, 0, 0, 0.14)' : 'rgba(0, 0, 0, 0.06)',
|
||||
...(readOnly
|
||||
? {}
|
||||
: {
|
||||
cursor: 'pointer',
|
||||
'&:hover': { bgcolor: 'rgba(0, 0, 0, 0.12)' },
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function PriceTaxRow({
|
||||
rates,
|
||||
selected,
|
||||
onSelectTax,
|
||||
readOnly,
|
||||
onOpenTiers,
|
||||
}) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
flexWrap: 'wrap',
|
||||
minHeight: 36,
|
||||
}}
|
||||
>
|
||||
<TaxRatePills
|
||||
rates={rates}
|
||||
selected={selected}
|
||||
onSelect={onSelectTax}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
<IconButton
|
||||
type="button"
|
||||
size="small"
|
||||
aria-label="Staffelpreise"
|
||||
disabled={readOnly}
|
||||
onClick={readOnly ? undefined : onOpenTiers}
|
||||
export class PriceTaxRow extends Component {
|
||||
render() {
|
||||
const { rates, selected, onSelectTax, readOnly, onOpenTiers } = this.props;
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
p: 0.5,
|
||||
visibility: readOnly ? 'hidden' : 'visible',
|
||||
pointerEvents: readOnly ? 'none' : 'auto',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
flexWrap: 'wrap',
|
||||
minHeight: 36,
|
||||
}}
|
||||
>
|
||||
<LayersOutlinedIcon sx={{ fontSize: 28 }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
<TaxRatePills
|
||||
rates={rates}
|
||||
selected={selected}
|
||||
onSelect={onSelectTax}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
<IconButton
|
||||
type="button"
|
||||
size="small"
|
||||
aria-label="Staffelpreise"
|
||||
disabled={readOnly}
|
||||
onClick={readOnly ? undefined : onOpenTiers}
|
||||
sx={{
|
||||
p: 0.5,
|
||||
visibility: readOnly ? 'hidden' : 'visible',
|
||||
pointerEvents: readOnly ? 'none' : 'auto',
|
||||
}}
|
||||
>
|
||||
<LayersOutlinedIcon sx={{ fontSize: 28 }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user