Skip to content

Commit

Permalink
fix: default values of transitions is tuple which needs to be reset (#…
Browse files Browse the repository at this point in the history
…3303)

## Description

Fixes the issue with transitions that is leaving a `tuple` default value
on reset.

## Steps for reproduction

Please refer to #3302  for the steps to reproduce.

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)
  • Loading branch information
JayaKrishnaNamburu authored May 5, 2024
1 parent 7128bc9 commit 89979eb
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import type { IntermediateStyleValue } from "../../shared/css-value-input";
import { CssValueInputContainer } from "../../shared/css-value-input";
import { toPascalCase } from "../../shared/keyword-utils";
import { ColorControl } from "../../controls";
import type { SetProperty } from "../../shared/use-style-data";
import type { DeleteProperty, SetProperty } from "../../shared/use-style-data";

/*
When it comes to checking and validating individual CSS properties for the box-shadow,
Expand Down Expand Up @@ -66,6 +66,7 @@ type BoxShadowContentProps = {
layer: TupleValue;
shadow: string;
onEditLayer: (index: number, layers: LayersValue) => void;
deleteProperty: DeleteProperty;
};

const convertValuesToTupple = (
Expand All @@ -90,6 +91,7 @@ export const BoxShadowContent = ({
index,
shadow,
onEditLayer,
deleteProperty,
}: BoxShadowContentProps) => {
const [intermediateValue, setIntermediateValue] = useState<
IntermediateStyleValue | InvalidValue | undefined
Expand Down Expand Up @@ -432,6 +434,16 @@ export const BoxShadowContent = ({
handleComplete();
event.preventDefault();
}

if (event.key === "Escape") {
if (intermediateValue === undefined) {
return;
}

deleteProperty("boxShadow", { isEphemeral: true });
setIntermediateValue(undefined);
event.preventDefault();
}
}}
/>
</Flex>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const BoxShadowLayer = <T extends TupleValue>(props: LayerProps<T>) => {
shadow={shadow}
layer={layer}
onEditLayer={props.onEditLayer}
deleteProperty={props.deleteProperty}
/>
}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ export const TransitionContent = ({
}

onEditLayer(index, layers);
setIntermediateValue(undefined);
};

const handlePropertyUpdate = (
Expand Down
32 changes: 17 additions & 15 deletions apps/builder/app/builder/features/style-panel/style-layer-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,6 @@ import type { SectionProps } from "./sections";
import type { StyleInfo } from "./shared/style-info";
import type { CreateBatchUpdate } from "./shared/use-style-data";

const isLayersOrTuppleValue = (
value: TupleValue | LayersValue
): value is LayersValue | TupleValue => {
return value.type === "layers" || value.type === "tuple";
};

export const deleteLayer = <T extends TupleValue | LayersValue>(
property: StyleProperty,
index: number,
Expand All @@ -35,10 +29,6 @@ export const deleteLayer = <T extends TupleValue | LayersValue>(
value: newLayers as LayersValue["value"],
};

if (isLayersOrTuppleValue(propertyValue) === false) {
return;
}

if (newLayers.length === 0) {
batch.deleteProperty(property);
} else {
Expand Down Expand Up @@ -86,12 +76,24 @@ export const addLayer = <T extends LayersValue | TupleValue>(
return;
}

const existingValues = getValue(property, style);
if (existingValues?.type === "layers" || existingValues?.type === "tuple") {
// Adding layers we had before
const existingValues = style[property]?.value;
// Transitions come's with a default property of tuple. Which needs to be overwritten
// Because, we handle transitions using layers in the project. So, we merge the values
// only if the existing value is a layer or the value is overwritten a layer is created.
if (
(property === "transition" || property === "boxShadow") &&
existingValues?.type === "layers"
) {
value.value = [...value.value, ...existingValues.value] as T["value"];
}

if (property === "filter" && existingValues?.type === "tuple") {
value.value = [
...value.value,
...(existingValues?.value || []),
] as T["value"];
}

const batch = createBatchUpdate();
batch.setProperty(property)(value);
batch.publish();
Expand Down Expand Up @@ -132,8 +134,8 @@ export const getLayerCount = (property: StyleProperty, style: StyleInfo) => {

export const getValue = (property: StyleProperty, style: StyleInfo) => {
const value = style[property]?.value;
return value?.type === "layers" ||
(value?.type === "tuple" && value.value.length > 0)
return (value?.type === "layers" || value?.type === "tuple") &&
value.value.length > 0
? value
: undefined;
};
Expand Down

0 comments on commit 89979eb

Please sign in to comment.