Skip to content

Commit 6ef05e7

Browse files
bbohlenderbbohlender
authored
Merge pull request #83 from pmndrs/feature/set-style-merge
feat: setStyle merge with exsisting styles by default
2 parents da83f03 + 2e8a571 commit 6ef05e7

13 files changed

Lines changed: 38 additions & 37 deletions

File tree

‎docs/advanced/performance.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function AnimateBackground() {
2828
}
2929
```
3030

31-
Setting executing `setStyle(undefined)` resets all changes back to the initial properties provided to the directly to the component.
31+
Setting executing `setStyle(undefined, true)` resets all changes back to the initial properties provided to the directly to the component.
3232

3333
### using signals
3434

‎docs/getting-started/components-and-properties.md‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -532,17 +532,17 @@ All Components support [all R3F event handlers](https://docs.pmnd.rs/react-three
532532

533533
Each component exposes the `ComponentInternals` when using a `ref`. The component internals provide you with access to
534534

535-
| Property | Explanation |
536-
| ------------------- | ---------------------------------------------------------------------------------------------------------- |
537-
| borderInset | a tuple containing the border sizes on all 4 sides `[top, right, bottom, left]` |
538-
| paddingInset | a tuple containing the padding sizes on all 4 sides `[top, right, bottom, left]` |
539-
| center | the offset between from the element's center to its parent's center |
540-
| size | the outer width/height of the element |
541-
| interactionPanel | the mesh added to the scene graph to capture events |
542-
| scrollPosition | the x/y scroll position of the children when the element is scrollable |
543-
| pixelSize | the size of one pixel |
544-
| maxScrollPosition | the maximum x/y scroll position, based on the size of the children |
545-
| isClipped | exploses whether the element is fully clipped by some ancestor |
546-
| setStyle | set the styles of the element (the provided styles have a higher precedence then the element's properties) |
547-
| getStyle | get the object last written to `setStyle` |
548-
| getComputedProperty | read the current value for any property (combines default properties, direct properties, and styles) |
535+
| Property | Explanation |
536+
| ------------------- | --------------------------------------------------------------------------------------------------------------- |
537+
| borderInset | a tuple containing the border sizes on all 4 sides `[top, right, bottom, left]` |
538+
| paddingInset | a tuple containing the padding sizes on all 4 sides `[top, right, bottom, left]` |
539+
| center | the offset between from the element's center to its parent's center |
540+
| size | the outer width/height of the element |
541+
| interactionPanel | the mesh added to the scene graph to capture events |
542+
| scrollPosition | the x/y scroll position of the children when the element is scrollable |
543+
| pixelSize | the size of one pixel |
544+
| maxScrollPosition | the maximum x/y scroll position, based on the size of the children |
545+
| isClipped | exploses whether the element is fully clipped by some ancestor |
546+
| setStyle | modifies the styles of the element (the provided styles have a higher precedence then the element's properties) |
547+
| getStyle | get the current style of the object |
548+
| getComputedProperty | read the current value for any property (combines default properties, direct properties, and styles) |

‎packages/react/src/ref.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export type ComponentInternals<T = ContainerProperties> = {
5454
/**
5555
* set the styles of the element (the provided styles have a higher precedence then the element's properties)
5656
*/
57-
setStyle(style: T | undefined): void
57+
setStyle(style: T | undefined, replace?: boolean): void
5858
/**
5959
* get the object last written to `setStyle`
6060
*/
@@ -91,7 +91,8 @@ export function useComponentInternals<T, O = {}>(
9191
() => {
9292
const { scrollPosition, paddingInset, borderInset, relativeCenter, size, maxScrollPosition } = internals
9393
return {
94-
setStyle: (style: T | undefined) => (styleSignal.value = style),
94+
setStyle: (style: T | undefined, replace?: boolean) =>
95+
(styleSignal.value = replace ? style : ({ ...styleSignal.value, ...style } as T)),
9596
getStyle: () => styleSignal.peek(),
9697
getComputedProperty: <K extends keyof T>(key: K) =>
9798
untracked(() => internals.mergedProperties.value.read<T[K] | undefined>(key as string, undefined)),

‎packages/uikit/src/vanilla/container.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ export class Container extends Parent {
5858
return this.styleSignal.peek()
5959
}
6060

61-
setStyle(style: ContainerProperties | undefined) {
62-
this.styleSignal.value = style
61+
setStyle(style: ContainerProperties | undefined, replace?: boolean) {
62+
this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
6363
}
6464

6565
setProperties(properties: ContainerProperties | undefined) {

‎packages/uikit/src/vanilla/content.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,8 @@ export class Content extends Component {
9090
return this.styleSignal.peek()
9191
}
9292

93-
setStyle(style: ContentProperties | undefined) {
94-
this.styleSignal.value = style
93+
setStyle(style: ContentProperties | undefined, replace?: boolean) {
94+
this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
9595
}
9696

9797
setProperties(properties: ContentProperties | undefined) {

‎packages/uikit/src/vanilla/custom.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ export class CustomContainer extends Component {
6464
return this.styleSignal.peek()
6565
}
6666

67-
setStyle(style: CustomContainerProperties | undefined) {
68-
this.styleSignal.value = style
67+
setStyle(style: CustomContainerProperties | undefined, replace?: boolean) {
68+
this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
6969
}
7070

7171
setProperties(properties: CustomContainerProperties | undefined) {

‎packages/uikit/src/vanilla/fullscreen.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ export class Fullscreen extends Root {
7777
return this.styleSignal.peek()
7878
}
7979

80-
setStyle(style: FullscreenProperties | undefined): void {
81-
super.setStyle(style)
80+
setStyle(style: FullscreenProperties | undefined, replace?: boolean): void {
81+
super.setStyle(style, replace)
8282
}
8383

8484
setProperties(properties: FullscreenProperties | undefined): void {

‎packages/uikit/src/vanilla/icon.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export class Icon extends Component {
6666
return this.styleSignal.peek()
6767
}
6868

69-
setStyle(style: IconProperties | undefined) {
70-
this.styleSignal.value = style
69+
setStyle(style: IconProperties | undefined, replace?: boolean) {
70+
this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
7171
}
7272

7373
setProperties(properties: IconProperties | undefined) {

‎packages/uikit/src/vanilla/image.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ export class Image extends Parent {
5757
return this.styleSignal.peek()
5858
}
5959

60-
setStyle(style: ImageProperties | undefined) {
61-
this.styleSignal.value = style
60+
setStyle(style: ImageProperties | undefined, replace?: boolean) {
61+
this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
6262
}
6363

6464
setProperties(properties: ImageProperties | undefined) {

‎packages/uikit/src/vanilla/input.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ export class Input extends Component {
5858
return this.styleSignal.peek()
5959
}
6060

61-
setStyle(style: InputProperties | undefined) {
62-
this.styleSignal.value = style
61+
setStyle(style: InputProperties | undefined, replace?: boolean) {
62+
this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
6363
}
6464

6565
setProperties(properties: InputProperties | undefined) {

0 commit comments

Comments
 (0)