@gem-sdk/core 1.43.0-dev.95 → 1.43.0-dev.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/cjs/components/resize/Spacing.js +18 -11
  2. package/dist/esm/components/resize/Spacing.js +18 -11
  3. package/package.json +1 -1
package/dist/cjs/components/resize/Spacing.js CHANGED
@@ -130,7 +130,7 @@ function Spacing(props) {
130
130
  const tag = el.getAttribute('data-component-tag');
131
131
  return tag === 'Row' || tag === 'Product';
132
132
  };
133
- const updateSpacing = react.useCallback(()=>{
133
+ const updateSpacing = react.useCallback((isShowVisualize)=>{
134
134
  const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
135
135
  if (!$component) return;
136
136
  const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
@@ -143,7 +143,7 @@ function Spacing(props) {
143
143
  if ($marginBottom) {
144
144
  if ($bottomBg.current && $bottomDrag.current) {
145
145
  let value = style.marginBottom;
146
- onShowMarginBottomNumber(value);
146
+ isShowVisualize && onShowMarginBottomNumber(value);
147
147
  if (parseFloat(value) < 0) {
148
148
  value = '0';
149
149
  }
@@ -171,34 +171,41 @@ function Spacing(props) {
171
171
  setIsShowVisual(false);
172
172
  }, 2000);
173
173
  // break point 28px
174
- const topPosition = parsedValue < 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
174
+ const topPosition = parsedValue <= 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
175
175
  if ($visualNumberValue.current) {
176
176
  $visualNumberValue.current.style.transform = `translateY(${topPosition}px)`;
177
177
  }
178
178
  };
179
179
  const previousAdvanced = usePrevious(props.advanced?.['spacing-setting']);
180
180
  react.useEffect(()=>{
181
- // validate spacing setting changed
182
- if (JSON.stringify(previousAdvanced) !== JSON.stringify(props.advanced?.['spacing-setting'])) {
183
- updateSpacing();
184
- }
181
+ // validate margin bottom setting changed
182
+ const isShowVisualize = verifyMarginBottomChanged(previousAdvanced, props.advanced?.['spacing-setting']);
183
+ updateSpacing(isShowVisualize);
185
184
  }, [
186
185
  previousAdvanced,
187
186
  props.advanced,
188
187
  updateSpacing
189
188
  ]);
189
+ const verifyMarginBottomChanged = (prevValue, newValue)=>{
190
+ const listDevices = [
191
+ 'desktop',
192
+ 'tablet',
193
+ 'mobile'
194
+ ];
195
+ return listDevices.some((device)=>JSON.stringify(prevValue?.[device]?.margin?.bottom) !== JSON.stringify(newValue?.[device]?.margin?.bottom));
196
+ };
190
197
  const onWindowResize = react.useCallback(()=>{
191
198
  updateSpacing();
192
199
  }, [
193
200
  updateSpacing
194
201
  ]);
195
202
  react.useEffect(()=>{
196
- window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
197
- window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
203
+ window.addEventListener('editor:toolbar:update-margin-bottom', ()=>updateSpacing);
204
+ window.addEventListener('editor:toolbar:update-padding-left', ()=>updateSpacing);
198
205
  window.addEventListener('resize', onWindowResize);
199
206
  return ()=>{
200
- window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
201
- window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
207
+ window.removeEventListener('editor:toolbar:update-margin-bottom', ()=>updateSpacing);
208
+ window.removeEventListener('editor:toolbar:update-padding-left', ()=>updateSpacing);
202
209
  window.removeEventListener('resize', onWindowResize);
203
210
  };
204
211
  }, [
package/dist/esm/components/resize/Spacing.js CHANGED
@@ -126,7 +126,7 @@ function Spacing(props) {
126
126
  const tag = el.getAttribute('data-component-tag');
127
127
  return tag === 'Row' || tag === 'Product';
128
128
  };
129
- const updateSpacing = useCallback(()=>{
129
+ const updateSpacing = useCallback((isShowVisualize)=>{
130
130
  const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
131
131
  if (!$component) return;
132
132
  const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
@@ -139,7 +139,7 @@ function Spacing(props) {
139
139
  if ($marginBottom) {
140
140
  if ($bottomBg.current && $bottomDrag.current) {
141
141
  let value = style.marginBottom;
142
- onShowMarginBottomNumber(value);
142
+ isShowVisualize && onShowMarginBottomNumber(value);
143
143
  if (parseFloat(value) < 0) {
144
144
  value = '0';
145
145
  }
@@ -167,34 +167,41 @@ function Spacing(props) {
167
167
  setIsShowVisual(false);
168
168
  }, 2000);
169
169
  // break point 28px
170
- const topPosition = parsedValue < 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
170
+ const topPosition = parsedValue <= 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
171
171
  if ($visualNumberValue.current) {
172
172
  $visualNumberValue.current.style.transform = `translateY(${topPosition}px)`;
173
173
  }
174
174
  };
175
175
  const previousAdvanced = usePrevious(props.advanced?.['spacing-setting']);
176
176
  useEffect(()=>{
177
- // validate spacing setting changed
178
- if (JSON.stringify(previousAdvanced) !== JSON.stringify(props.advanced?.['spacing-setting'])) {
179
- updateSpacing();
180
- }
177
+ // validate margin bottom setting changed
178
+ const isShowVisualize = verifyMarginBottomChanged(previousAdvanced, props.advanced?.['spacing-setting']);
179
+ updateSpacing(isShowVisualize);
181
180
  }, [
182
181
  previousAdvanced,
183
182
  props.advanced,
184
183
  updateSpacing
185
184
  ]);
185
+ const verifyMarginBottomChanged = (prevValue, newValue)=>{
186
+ const listDevices = [
187
+ 'desktop',
188
+ 'tablet',
189
+ 'mobile'
190
+ ];
191
+ return listDevices.some((device)=>JSON.stringify(prevValue?.[device]?.margin?.bottom) !== JSON.stringify(newValue?.[device]?.margin?.bottom));
192
+ };
186
193
  const onWindowResize = useCallback(()=>{
187
194
  updateSpacing();
188
195
  }, [
189
196
  updateSpacing
190
197
  ]);
191
198
  useEffect(()=>{
192
- window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
193
- window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
199
+ window.addEventListener('editor:toolbar:update-margin-bottom', ()=>updateSpacing);
200
+ window.addEventListener('editor:toolbar:update-padding-left', ()=>updateSpacing);
194
201
  window.addEventListener('resize', onWindowResize);
195
202
  return ()=>{
196
- window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
197
- window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
203
+ window.removeEventListener('editor:toolbar:update-margin-bottom', ()=>updateSpacing);
204
+ window.removeEventListener('editor:toolbar:update-padding-left', ()=>updateSpacing);
198
205
  window.removeEventListener('resize', onWindowResize);
199
206
  };
200
207
  }, [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.43.0-dev.95",
3
+ "version": "1.43.0-dev.97",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",