@cmssy/react 0.1.3 → 0.1.5

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 (7) hide show
  1. package/dist/client.cjs +42 -14
  2. package/dist/client.js +42 -14
  3. package/dist/index.cjs +3 -1
  4. package/dist/index.d.cts +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +3 -1
  7. package/package.json +1 -1
package/dist/client.cjs CHANGED
@@ -304,18 +304,41 @@ function blockElements() {
304
304
  )
305
305
  ).filter(visible);
306
306
  }
307
- function computeDropTarget(clientY) {
308
- const els = blockElements();
309
- for (let i = 0; i < els.length; i++) {
310
- const r = els[i].getBoundingClientRect();
311
- if (clientY < r.top + r.height / 2) {
312
- return { index: i, y: r.top };
313
- }
314
- }
315
- const last = els[els.length - 1];
307
+ function createDropTargetResolver() {
308
+ let cache = null;
309
+ const build = () => {
310
+ const els = blockElements();
311
+ const scrollY = window.scrollY;
312
+ let absLastBottom = scrollY;
313
+ const blocks = els.map((el, index) => {
314
+ const r = el.getBoundingClientRect();
315
+ absLastBottom = r.bottom + scrollY;
316
+ return {
317
+ index,
318
+ absTop: r.top + scrollY,
319
+ absMid: r.top + scrollY + r.height / 2
320
+ };
321
+ });
322
+ cache = { blocks, absLastBottom };
323
+ };
316
324
  return {
317
- index: els.length,
318
- y: last ? last.getBoundingClientRect().bottom : 0
325
+ resolve(clientY) {
326
+ if (!cache) build();
327
+ const scrollY = window.scrollY;
328
+ const pageY = clientY + scrollY;
329
+ for (const block of cache.blocks) {
330
+ if (pageY < block.absMid) {
331
+ return { index: block.index, y: block.absTop - scrollY };
332
+ }
333
+ }
334
+ return {
335
+ index: cache.blocks.length,
336
+ y: cache.absLastBottom - scrollY
337
+ };
338
+ },
339
+ invalidate() {
340
+ cache = null;
341
+ }
319
342
  };
320
343
  }
321
344
  function useDragAgent(config) {
@@ -330,6 +353,7 @@ function useDragAgent(config) {
330
353
  }
331
354
  let movingId = null;
332
355
  let lastDropY = null;
356
+ const resolver = createDropTargetResolver();
333
357
  const updateDropY = (y) => {
334
358
  if (y === lastDropY) return;
335
359
  lastDropY = y;
@@ -340,21 +364,23 @@ function useDragAgent(config) {
340
364
  const id = blockEl?.getAttribute("data-block-id");
341
365
  if (!id || !event.dataTransfer) return;
342
366
  movingId = id;
367
+ resolver.invalidate();
343
368
  event.dataTransfer.setData(MOVE_MIME, id);
344
369
  event.dataTransfer.effectAllowed = "move";
345
370
  };
346
371
  const onDragOver = (event) => {
347
372
  if (!movingId) return;
348
373
  event.preventDefault();
349
- updateDropY(computeDropTarget(event.clientY).y);
374
+ updateDropY(resolver.resolve(event.clientY).y);
350
375
  };
351
376
  const onDrop = (event) => {
352
377
  if (!movingId) return;
353
378
  event.preventDefault();
354
- const { index } = computeDropTarget(event.clientY);
379
+ const { index } = resolver.resolve(event.clientY);
355
380
  const blockId = movingId;
356
381
  movingId = null;
357
382
  updateDropY(null);
383
+ resolver.invalidate();
358
384
  try {
359
385
  postToEditor(window.parent, editorOrigin, {
360
386
  type: "cmssy:move",
@@ -368,6 +394,7 @@ function useDragAgent(config) {
368
394
  const onDragEnd = () => {
369
395
  movingId = null;
370
396
  updateDropY(null);
397
+ resolver.invalidate();
371
398
  };
372
399
  const onMessage = (event) => {
373
400
  if (event.source && event.source !== window.parent) return;
@@ -385,7 +412,7 @@ function useDragAgent(config) {
385
412
  } else if (message.y > window.innerHeight - edge) {
386
413
  window.scrollBy(0, step);
387
414
  }
388
- const { index, y } = computeDropTarget(message.y);
415
+ const { index, y } = resolver.resolve(message.y);
389
416
  updateDropY(y);
390
417
  try {
391
418
  postToEditor(window.parent, editorOrigin, {
@@ -397,6 +424,7 @@ function useDragAgent(config) {
397
424
  }
398
425
  } else if (message.type === "cmssy:drag-end") {
399
426
  updateDropY(null);
427
+ resolver.invalidate();
400
428
  }
401
429
  };
402
430
  document.addEventListener("dragstart", onDragStart);
package/dist/client.js CHANGED
@@ -302,18 +302,41 @@ function blockElements() {
302
302
  )
303
303
  ).filter(visible);
304
304
  }
305
- function computeDropTarget(clientY) {
306
- const els = blockElements();
307
- for (let i = 0; i < els.length; i++) {
308
- const r = els[i].getBoundingClientRect();
309
- if (clientY < r.top + r.height / 2) {
310
- return { index: i, y: r.top };
311
- }
312
- }
313
- const last = els[els.length - 1];
305
+ function createDropTargetResolver() {
306
+ let cache = null;
307
+ const build = () => {
308
+ const els = blockElements();
309
+ const scrollY = window.scrollY;
310
+ let absLastBottom = scrollY;
311
+ const blocks = els.map((el, index) => {
312
+ const r = el.getBoundingClientRect();
313
+ absLastBottom = r.bottom + scrollY;
314
+ return {
315
+ index,
316
+ absTop: r.top + scrollY,
317
+ absMid: r.top + scrollY + r.height / 2
318
+ };
319
+ });
320
+ cache = { blocks, absLastBottom };
321
+ };
314
322
  return {
315
- index: els.length,
316
- y: last ? last.getBoundingClientRect().bottom : 0
323
+ resolve(clientY) {
324
+ if (!cache) build();
325
+ const scrollY = window.scrollY;
326
+ const pageY = clientY + scrollY;
327
+ for (const block of cache.blocks) {
328
+ if (pageY < block.absMid) {
329
+ return { index: block.index, y: block.absTop - scrollY };
330
+ }
331
+ }
332
+ return {
333
+ index: cache.blocks.length,
334
+ y: cache.absLastBottom - scrollY
335
+ };
336
+ },
337
+ invalidate() {
338
+ cache = null;
339
+ }
317
340
  };
318
341
  }
319
342
  function useDragAgent(config) {
@@ -328,6 +351,7 @@ function useDragAgent(config) {
328
351
  }
329
352
  let movingId = null;
330
353
  let lastDropY = null;
354
+ const resolver = createDropTargetResolver();
331
355
  const updateDropY = (y) => {
332
356
  if (y === lastDropY) return;
333
357
  lastDropY = y;
@@ -338,21 +362,23 @@ function useDragAgent(config) {
338
362
  const id = blockEl?.getAttribute("data-block-id");
339
363
  if (!id || !event.dataTransfer) return;
340
364
  movingId = id;
365
+ resolver.invalidate();
341
366
  event.dataTransfer.setData(MOVE_MIME, id);
342
367
  event.dataTransfer.effectAllowed = "move";
343
368
  };
344
369
  const onDragOver = (event) => {
345
370
  if (!movingId) return;
346
371
  event.preventDefault();
347
- updateDropY(computeDropTarget(event.clientY).y);
372
+ updateDropY(resolver.resolve(event.clientY).y);
348
373
  };
349
374
  const onDrop = (event) => {
350
375
  if (!movingId) return;
351
376
  event.preventDefault();
352
- const { index } = computeDropTarget(event.clientY);
377
+ const { index } = resolver.resolve(event.clientY);
353
378
  const blockId = movingId;
354
379
  movingId = null;
355
380
  updateDropY(null);
381
+ resolver.invalidate();
356
382
  try {
357
383
  postToEditor(window.parent, editorOrigin, {
358
384
  type: "cmssy:move",
@@ -366,6 +392,7 @@ function useDragAgent(config) {
366
392
  const onDragEnd = () => {
367
393
  movingId = null;
368
394
  updateDropY(null);
395
+ resolver.invalidate();
369
396
  };
370
397
  const onMessage = (event) => {
371
398
  if (event.source && event.source !== window.parent) return;
@@ -383,7 +410,7 @@ function useDragAgent(config) {
383
410
  } else if (message.y > window.innerHeight - edge) {
384
411
  window.scrollBy(0, step);
385
412
  }
386
- const { index, y } = computeDropTarget(message.y);
413
+ const { index, y } = resolver.resolve(message.y);
387
414
  updateDropY(y);
388
415
  try {
389
416
  postToEditor(window.parent, editorOrigin, {
@@ -395,6 +422,7 @@ function useDragAgent(config) {
395
422
  }
396
423
  } else if (message.type === "cmssy:drag-end") {
397
424
  updateDropY(null);
425
+ resolver.invalidate();
398
426
  }
399
427
  };
400
428
  document.addEventListener("dragstart", onDragStart);
package/dist/index.cjs CHANGED
@@ -421,7 +421,9 @@ var FORM_QUERY = `query PublicForm($formId: ID!) {
421
421
  description
422
422
  fields {
423
423
  id name fieldType label placeholder helpText
424
- defaultValue options validation width order showIf
424
+ defaultValue width order showIf
425
+ options { value label disabled }
426
+ validation { required minLength maxLength minValue maxValue pattern customMessage }
425
427
  }
426
428
  settings {
427
429
  actionType submitButtonLabel successMessage errorMessage
package/dist/index.d.cts CHANGED
@@ -155,7 +155,7 @@ interface SubmitFormInput {
155
155
  data: Record<string, unknown>;
156
156
  website?: string;
157
157
  }
158
- declare const FORM_QUERY = "query PublicForm($formId: ID!) {\n publicForm(formId: $formId) {\n id\n name\n slug\n description\n fields {\n id name fieldType label placeholder helpText\n defaultValue options validation width order showIf\n }\n settings {\n actionType submitButtonLabel successMessage errorMessage\n redirectUrl requireLogin enableCaptcha\n }\n }\n}";
158
+ declare const FORM_QUERY = "query PublicForm($formId: ID!) {\n publicForm(formId: $formId) {\n id\n name\n slug\n description\n fields {\n id name fieldType label placeholder helpText\n defaultValue width order showIf\n options { value label disabled }\n validation { required minLength maxLength minValue maxValue pattern customMessage }\n }\n settings {\n actionType submitButtonLabel successMessage errorMessage\n redirectUrl requireLogin enableCaptcha\n }\n }\n}";
159
159
  declare const SUBMIT_FORM_MUTATION = "mutation SubmitForm($formId: ID!, $input: SubmitFormInput!) {\n submitForm(formId: $formId, input: $input) {\n success message submissionId redirectUrl accessToken customer\n }\n}";
160
160
 
161
161
  interface CmssyBlockProps {
package/dist/index.d.ts CHANGED
@@ -155,7 +155,7 @@ interface SubmitFormInput {
155
155
  data: Record<string, unknown>;
156
156
  website?: string;
157
157
  }
158
- declare const FORM_QUERY = "query PublicForm($formId: ID!) {\n publicForm(formId: $formId) {\n id\n name\n slug\n description\n fields {\n id name fieldType label placeholder helpText\n defaultValue options validation width order showIf\n }\n settings {\n actionType submitButtonLabel successMessage errorMessage\n redirectUrl requireLogin enableCaptcha\n }\n }\n}";
158
+ declare const FORM_QUERY = "query PublicForm($formId: ID!) {\n publicForm(formId: $formId) {\n id\n name\n slug\n description\n fields {\n id name fieldType label placeholder helpText\n defaultValue width order showIf\n options { value label disabled }\n validation { required minLength maxLength minValue maxValue pattern customMessage }\n }\n settings {\n actionType submitButtonLabel successMessage errorMessage\n redirectUrl requireLogin enableCaptcha\n }\n }\n}";
159
159
  declare const SUBMIT_FORM_MUTATION = "mutation SubmitForm($formId: ID!, $input: SubmitFormInput!) {\n submitForm(formId: $formId, input: $input) {\n success message submissionId redirectUrl accessToken customer\n }\n}";
160
160
 
161
161
  interface CmssyBlockProps {
package/dist/index.js CHANGED
@@ -419,7 +419,9 @@ var FORM_QUERY = `query PublicForm($formId: ID!) {
419
419
  description
420
420
  fields {
421
421
  id name fieldType label placeholder helpText
422
- defaultValue options validation width order showIf
422
+ defaultValue width order showIf
423
+ options { value label disabled }
424
+ validation { required minLength maxLength minValue maxValue pattern customMessage }
423
425
  }
424
426
  settings {
425
427
  actionType submitButtonLabel successMessage errorMessage
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cmssy/react",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "description": "React blocks, renderers, data client and editor bridge for cmssy headless sites",
5
5
  "keywords": [
6
6
  "cmssy",