@cntrl-site/sdk-nextjs 0.12.5 → 0.12.7

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 (4) hide show
  1. package/.idea/codeStyles/codeStyleConfig.xml +5 -0
  2. package/lib/components/Item.js +5 -4
  3. package/package.json +2 -2
  4. package/src/components/Item.tsx +11 -8
package/.idea/codeStyles/codeStyleConfig.xml ADDED
@@ -0,0 +1,5 @@
1
+ <component name="ProjectCodeStyleConfiguration">
2
+ <state>
3
+ <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4
+ </state>
5
+ </component>
package/lib/components/Item.js CHANGED
@@ -41,7 +41,7 @@ const Item = ({ item, sectionId }) => {
41
41
  const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
42
42
  const layout = (0, useCurrentLayout_1.useCurrentLayout)();
43
43
  const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
44
- const layoutValues = [item.area];
44
+ const layoutValues = [item.area, item.hidden];
45
45
  const isInitialRef = (0, react_1.useRef)(true);
46
46
  layoutValues.push(item.sticky);
47
47
  layoutValues.push(sectionHeight);
@@ -72,11 +72,11 @@ const Item = ({ item, sectionId }) => {
72
72
  height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
73
73
  };
74
74
  return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, style: { top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }, children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
75
- ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, sticky, sectionHeight, layoutParams]) => {
75
+ ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
76
76
  const sizingAxis = parseSizing(layoutParams.sizing);
77
77
  return (`
78
- .item-${item.id} {
79
- position: ${sticky ? 'sticky' : 'absolute'};
78
+ .item-${item.id} {
79
+ position: ${sticky ? 'sticky' : 'absolute'};xw
80
80
  width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
81
81
  height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `w${area.height * 100}vw` : 'unset'};
82
82
  transform: scale(${scale});
@@ -84,6 +84,7 @@ const Item = ({ item, sectionId }) => {
84
84
  transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
85
85
  pointer-events: auto;
86
86
  --webkit-backface-visibility: hidden;
87
+ visibility: ${hidden ? 'hidden' : 'visible'};
87
88
  }
88
89
  .item-wrapper-${item.id} {
89
90
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "0.12.5",
3
+ "version": "0.12.7",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.ts",
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
23
23
  "dependencies": {
24
- "@cntrl-site/sdk": "^1.1.4",
24
+ "@cntrl-site/sdk": "^1.1.5",
25
25
  "html-react-parser": "^3.0.1",
26
26
  "styled-jsx": "^5.0.2"
27
27
  },
package/src/components/Item.tsx CHANGED
@@ -52,7 +52,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
52
52
  const sectionHeight = useSectionHeightData(sectionId);
53
53
  const layout = useCurrentLayout();
54
54
  const { width, height } = useItemDimensions(item, sectionId);
55
- const layoutValues: Record<string, any>[] = [item.area];
55
+ const layoutValues: Record<string, any>[] = [item.area, item.hidden];
56
56
  const isInitialRef = useRef(true);
57
57
  layoutValues.push(item.sticky);
58
58
  layoutValues.push(sectionHeight);
@@ -88,7 +88,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
88
88
  };
89
89
 
90
90
  return (
91
- <div className={`item-wrapper-${item.id}`}
91
+ <div
92
+ className={`item-wrapper-${item.id}`}
92
93
  style={{ top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }}
93
94
  >
94
95
  <div
@@ -99,18 +100,20 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
99
100
  <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
100
101
  </div>
101
102
  <JSXStyle id={id}>{`
102
- ${getLayoutStyles(layouts, layoutValues, ([area, sticky, sectionHeight, layoutParams]) => {
103
- const sizingAxis = parseSizing(layoutParams.sizing);
104
- return (`
105
- .item-${item.id} {
106
- position: ${sticky ? 'sticky' : 'absolute'};
103
+ ${getLayoutStyles(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
104
+ const sizingAxis = parseSizing(layoutParams.sizing);
105
+
106
+ return (`
107
+ .item-${item.id} {
108
+ position: ${sticky ? 'sticky' : 'absolute'};xw
107
109
  width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
108
110
  height: ${sizingAxis.y === SizingType.Manual ? `w${area.height * 100}vw` : 'unset'};
109
111
  transform: scale(${scale});
110
- top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
112
+ top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
111
113
  transform-origin: ${ScaleAnchorMap[scaleAnchor]};
112
114
  pointer-events: auto;
113
115
  --webkit-backface-visibility: hidden;
116
+ visibility: ${hidden ? 'hidden' : 'visible'};
114
117
  }
115
118
  .item-wrapper-${item.id} {
116
119
  position: absolute;