From 31e7b56785aefbe6171be21a4e304e6cfb636237 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Mon, 25 Jul 2022 00:30:18 +0300 Subject: [PATCH] use new createBatchUpdate for batched updates --- .../style-panel/lib/use-style-data.ts | 54 ++++++++++++++++--- .../features/style-panel/style-panel.tsx | 10 ++-- .../features/style-panel/style-section.tsx | 15 ++++-- .../features/style-panel/style-settings.tsx | 6 ++- 4 files changed, 71 insertions(+), 14 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/lib/use-style-data.ts b/apps/designer/app/designer/features/style-panel/lib/use-style-data.ts index 5e0a4afa18..a3d5658df5 100644 --- a/apps/designer/app/designer/features/style-panel/lib/use-style-data.ts +++ b/apps/designer/app/designer/features/style-panel/lib/use-style-data.ts @@ -21,6 +21,11 @@ export type SetProperty = ( property: StyleProperty ) => (value: string, options?: StyleUpdateOptions) => void; +export type CreateBatchUpdate = () => { + setProperty: SetProperty; + publish: () => void; +}; + export const useStyleData = ({ selectedInstanceData, publish, @@ -86,13 +91,18 @@ export const useStyleData = ({ }); }; + const toStyleValue = (property: StyleProperty, value: string) => { + if (currentStyle === undefined) return; + const currentValue = currentStyle[property]; + const defaultUnit = + currentValue?.type === "unit" ? currentValue?.unit : undefined; + return parseCssValue(property, value, defaultUnit); + }; + const setProperty: SetProperty = (property) => { return (input, options = { isEphemeral: false }) => { - if (currentStyle === undefined) return; - const currentValue = currentStyle[property]; - const defaultUnit = - currentValue?.type === "unit" ? currentValue?.unit : undefined; - const nextValue = parseCssValue(property, input, defaultUnit); + const nextValue = toStyleValue(property, input); + if (nextValue === undefined) return; if (nextValue.type !== "invalid") { const updates = [{ property, value: nextValue }]; const type = options.isEphemeral ? "preview" : "update"; @@ -104,5 +114,37 @@ export const useStyleData = ({ }; }; - return { currentStyle, inheritedStyle, setProperty }; + const createBatchUpdate = () => { + const updates: StyleUpdates["updates"] = []; + + const setProperty = (property: StyleProperty) => { + const setValue = (input: string) => { + const value = toStyleValue(property, input); + if (value === undefined || value.type === "invalid") { + return; + } + updates.push({ property, value }); + }; + return setValue; + }; + + const publish = () => { + publishUpdates("update", updates); + const nextStyle = updates.reduce( + (currentStyle, { property, value }) => { + currentStyle[property] = value; + return currentStyle; + }, + { ...currentStyle } + ); + setCurrentStyle(nextStyle); + }; + + return { + setProperty, + publish, + }; + }; + + return { currentStyle, inheritedStyle, setProperty, createBatchUpdate }; }; diff --git a/apps/designer/app/designer/features/style-panel/style-panel.tsx b/apps/designer/app/designer/features/style-panel/style-panel.tsx index cb7a86e839..f944b5f3a8 100644 --- a/apps/designer/app/designer/features/style-panel/style-panel.tsx +++ b/apps/designer/app/designer/features/style-panel/style-panel.tsx @@ -21,10 +21,11 @@ export const StylePanel = ({ selectedInstanceData, publish, }: StylePanelProps) => { - const { currentStyle, inheritedStyle, setProperty } = useStyleData({ - selectedInstanceData, - publish, - }); + const { currentStyle, inheritedStyle, setProperty, createBatchUpdate } = + useStyleData({ + selectedInstanceData, + publish, + }); const [breakpoint] = useSelectedBreakpoint(); const [canvasWidth] = useCanvasWidth(); const [search, setSearch] = useState(""); @@ -70,6 +71,7 @@ export const StylePanel = ({ currentStyle={currentStyle} inheritedStyle={inheritedStyle} setProperty={setProperty} + createBatchUpdate={createBatchUpdate} /> diff --git a/apps/designer/app/designer/features/style-panel/style-section.tsx b/apps/designer/app/designer/features/style-panel/style-section.tsx index 1a67d21ea4..c0b1d87451 100644 --- a/apps/designer/app/designer/features/style-panel/style-section.tsx +++ b/apps/designer/app/designer/features/style-panel/style-section.tsx @@ -24,7 +24,7 @@ import { type StyleValue, type CSS, } from "@webstudio-is/react-sdk"; -import type { SetProperty } from "./lib/use-style-data"; +import type { SetProperty, CreateBatchUpdate } from "./lib/use-style-data"; import type { InheritedStyle } from "./lib/get-inherited-style"; import { ColorPicker } from "./lib/color-picker"; import { @@ -389,10 +389,12 @@ const GridControl = ({ css, currentStyle, setProperty, + createBatchUpdate, }: { css: CSS; currentStyle: Style; setProperty: SetProperty; + createBatchUpdate: CreateBatchUpdate; }) => { const flexDirection = currentStyle.flexDirection?.value as string; const justifyContent = currentStyle.justifyContent?.value as string; @@ -416,8 +418,9 @@ const GridControl = ({ { normal: 0, start: 0, center: 1, end: 2 } as Record )[justifyContent]; const position = row * 3 + column; - const setAlignItems = setProperty("alignItems"); - const setJustifyContent = setProperty("justifyContent"); + const batch = createBatchUpdate(); + const setAlignItems = batch.setProperty("alignItems"); + const setJustifyContent = batch.setProperty("justifyContent"); return ( @@ -546,6 +550,7 @@ const ShowMore = ({ styleConfigs }: { styleConfigs: Array }) => { type RenderPropertyProps = { setProperty: SetProperty; + createBatchUpdate: CreateBatchUpdate; currentStyle: Style; inheritedStyle: InheritedStyle; styleConfig: StyleConfig; @@ -556,6 +561,7 @@ export const renderProperty = ({ currentStyle, inheritedStyle, setProperty, + createBatchUpdate, styleConfig, category, }: RenderPropertyProps) => { @@ -581,6 +587,7 @@ export const renderProperty = ({ type RenderCategoryProps = { setProperty: SetProperty; + createBatchUpdate: CreateBatchUpdate; currentStyle: Style; category: Category; styleConfigsByCategory: JSX.Element[]; @@ -590,6 +597,7 @@ type RenderCategoryProps = { // the new designs, refactor ColorControl, SpacingControl if needed. export const renderCategory = ({ setProperty, + createBatchUpdate, currentStyle, category, styleConfigsByCategory, @@ -642,6 +650,7 @@ export const renderCategory = ({ css={{ gridArea: "grid" }} currentStyle={currentStyle} setProperty={setProperty} + createBatchUpdate={createBatchUpdate} /> diff --git a/apps/designer/app/designer/features/style-panel/style-settings.tsx b/apps/designer/app/designer/features/style-panel/style-settings.tsx index 97a2e55160..0f0dcc2ef1 100644 --- a/apps/designer/app/designer/features/style-panel/style-settings.tsx +++ b/apps/designer/app/designer/features/style-panel/style-settings.tsx @@ -11,7 +11,7 @@ import { CollapsibleSection } from "~/designer/shared/inspector"; import { renderProperty, renderCategory } from "./style-section"; import { dependencies } from "./lib/dependencies"; import { type InheritedStyle } from "./lib/get-inherited-style"; -import { type SetProperty } from "./lib/use-style-data"; +import { type SetProperty, type CreateBatchUpdate } from "./lib/use-style-data"; import { type SelectedInstanceData } from "~/shared/canvas-components"; // Finds a property/value by using any available form: property, label, value @@ -69,12 +69,14 @@ type StyleSettingsProps = { inheritedStyle: InheritedStyle; cssRule?: CssRule; setProperty: SetProperty; + createBatchUpdate: CreateBatchUpdate; selectedInstanceData: SelectedInstanceData; search: string; }; export const StyleSettings = ({ setProperty, + createBatchUpdate, currentStyle, search, ...rest @@ -104,6 +106,7 @@ export const StyleSettings = ({ const element = renderProperty({ ...rest, setProperty, + createBatchUpdate, currentStyle, styleConfig, category, @@ -135,6 +138,7 @@ export const StyleSettings = ({ <> {renderCategory({ setProperty, + createBatchUpdate, currentStyle, category, styleConfigsByCategory,