djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Minor fixes

Browse source
This commit is contained in:
dominik-zeglen 2019-10-08 12:56:24 +02:00
parent a770c464c7
commit 03374fb00b
6 changed files with 50 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
View file

@ -32,6 +32,7 @@ export interface ProductVariantCreateContentProps {
dispatchFormDataAction: React.Dispatch<ProductVariantCreateReducerAction>;
errors: ProductVariantBulkCreate_productVariantBulkCreate_bulkProductErrors[];
step: ProductVariantCreateStep;
onStepClick: (step: ProductVariantCreateStep) => void;
}
const ProductVariantCreateContent: React.FC<
@ -43,7 +44,8 @@ const ProductVariantCreateContent: React.FC<
data,
dispatchFormDataAction,
errors,
step
step,
onStepClick
} = props;
const classes = useStyles(props);
@ -57,7 +59,7 @@ const ProductVariantCreateContent: React.FC<
return (
<div>
<ProductVariantCreateTabs step={step} />
<ProductVariantCreateTabs step={step} onStepClick={onStepClick} />
<div className={classes.root}>
{step === "values" && (
<ProductVariantCreateValues

10
src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
View file

@ -24,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) => ({
overflowX: "visible",
overflowY: "hidden",
width: 800
},
spacer: {
flex: 1
}
}));
@ -146,19 +149,24 @@ const ProductVariantCreateDialog: React.FC<
data={data}
dispatchFormDataAction={dispatchFormDataAction}
step={step}
onStepClick={step => setStep(step)}
/>
</DialogContent>
<DialogActions>
<Button className={classes.button} onClick={onClose}>
<FormattedMessage defaultMessage="Cancel" description="button" />
</Button>
<div className={classes.spacer} />
{step !== "values" && (
<Button
className={classes.button}
color="primary"
onClick={handlePrevStep}
>
<FormattedMessage defaultMessage="Back" description="button" />
<FormattedMessage
defaultMessage="Previous"
description="previous step, button"
/>
</Button>
)}
{step !== "summary" ? (

24
src/products/components/ProductVariantCreateDialog/ProductVariantCreateTabs.tsx
View file

@ -51,13 +51,15 @@ const useStyles = makeStyles(
},
tab: {
flex: 1,
paddingBottom: theme.spacing.unit
paddingBottom: theme.spacing.unit,
userSelect: "none"
},
tabActive: {
fontWeight: 600
},
tabUnderline: {
borderBottom: `3px solid ${theme.palette.primary.main}`
tabVisited: {
borderBottom: `3px solid ${theme.palette.primary.main}`,
cursor: "pointer"
}
}),
{
@ -67,32 +69,38 @@ const useStyles = makeStyles(
export interface ProductVariantCreateTabsProps {
step: ProductVariantCreateStep;
onStepClick: (step: ProductVariantCreateStep) => void;
}
const ProductVariantCreateTabs: React.FC<
ProductVariantCreateTabsProps
> = props => {
const { step: currentStep } = props;
const { step: currentStep, onStepClick } = props;
const classes = useStyles(props);
const intl = useIntl();
const steps = getSteps(intl);
return (
<div className={classes.root}>
{steps.map((step, stepIndex) => (
{steps.map((step, stepIndex) => {
const visitedStep =
steps.findIndex(step => step.value === currentStep) >= stepIndex;
return (
<div
className={classNames(classes.tab, {
[classes.tabActive]: step.value === currentStep,
[classes.tabUnderline]:
steps.findIndex(step => step.value === currentStep) >= stepIndex
[classes.tabVisited]: visitedStep
})}
onClick={visitedStep ? () => onStepClick(step.value) : undefined}
key={step.value}
>
<Typography className={classes.label} variant="caption">
{step.label}
</Typography>
</div>
))}
);
})}
</div>
);
};

2
src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
View file

@ -50,6 +50,7 @@ const ProductVariantCreateValues: React.FC<
<Debounce
debounceFn={() => onValueClick(attribute.id, value.slug)}
time={100}
key={value.slug}
>
{change => (
<ControlledCheckbox
@ -63,7 +64,6 @@ const ProductVariantCreateValues: React.FC<
name={`value:${value.slug}`}
label={value.name}
onChange={change}
key={value.slug}
/>
)}
</Debounce>

18
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -82067,7 +82067,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
class="ProductVariantCreateTabs-root-id"
>
<div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id"
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
>
<span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -82076,7 +82076,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
</span>
</div>
<div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id"
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
>
<span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -82085,7 +82085,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
</span>
</div>
<div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id"
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
>
<span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -82770,7 +82770,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
class="ProductVariantCreateTabs-root-id"
>
<div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id"
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
>
<span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -82779,7 +82779,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
</span>
</div>
<div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id"
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
>
<span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -82788,7 +82788,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
</span>
</div>
<div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id"
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
>
<span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -83478,7 +83478,7 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
class="ProductVariantCreateTabs-root-id"
>
<div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id"
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
>
<span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -83762,7 +83762,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
class="ProductVariantCreateTabs-root-id"
>
<div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id"
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
>
<span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -83771,7 +83771,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
</span>
</div>
<div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id"
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
>
<span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"

2
src/theme.ts
View file

@ -60,7 +60,7 @@ export default (colors: IThemeColors): Theme =>
},
flat: {
"& span": {
color: colors.primary
color: colors.font.gray
}
},
flatPrimary: {