@san-siva/blogkit 1.1.31 → 1.1.33
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.
- package/dist/cjs/components/CheckList.js +1 -4
- package/dist/cjs/components/CheckList.js.map +1 -1
- package/dist/cjs/dynamicComponents/BlogSectionDynamic.js +1 -1
- package/dist/cjs/dynamicComponents/BlogSectionDynamic.js.map +1 -1
- package/dist/cjs/dynamicComponents/CheckListDynamic.js +11 -14
- package/dist/cjs/dynamicComponents/CheckListDynamic.js.map +1 -1
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/index.css.map +1 -1
- package/dist/cjs/staticComponents/BlogSectionStatic.js +1 -1
- package/dist/cjs/staticComponents/BlogSectionStatic.js.map +1 -1
- package/dist/cjs/utils/index.js +14 -0
- package/dist/cjs/utils/index.js.map +1 -1
- package/dist/esm/components/CheckList.js +1 -4
- package/dist/esm/components/CheckList.js.map +1 -1
- package/dist/esm/dynamicComponents/BlogSectionDynamic.js +2 -2
- package/dist/esm/dynamicComponents/BlogSectionDynamic.js.map +1 -1
- package/dist/esm/dynamicComponents/CheckListDynamic.js +11 -14
- package/dist/esm/dynamicComponents/CheckListDynamic.js.map +1 -1
- package/dist/esm/index.css +1 -1
- package/dist/esm/index.css.map +1 -1
- package/dist/esm/staticComponents/BlogSectionStatic.js +2 -2
- package/dist/esm/staticComponents/BlogSectionStatic.js.map +1 -1
- package/dist/esm/utils/index.js +14 -1
- package/dist/esm/utils/index.js.map +1 -1
- package/dist/types/components/CheckList.d.ts.map +1 -1
- package/dist/types/utils/index.d.ts +2 -0
- package/dist/types/utils/index.d.ts.map +1 -1
- package/dist/types/utils/index.test.d.ts +2 -0
- package/dist/types/utils/index.test.d.ts.map +1 -0
- package/package.json +4 -2
- package/src/components/CheckList.tsx +8 -13
- package/src/dynamicComponents/BlogSectionDynamic.tsx +2 -2
- package/src/staticComponents/BlogSectionStatic.tsx +2 -2
- package/src/styles/CheckList.module.scss +2 -2
- package/src/styles/CodeBlock.module.scss +2 -3
- package/src/utils/index.test.tsx +63 -0
- package/src/utils/index.ts +11 -0
- package/src/dynamicComponents/CheckListDynamic.tsx +0 -66
|
@@ -7,7 +7,7 @@ var BlogSection_module = require('../styles/BlogSection.module.scss.js');
|
|
|
7
7
|
var index = require('../utils/index.js');
|
|
8
8
|
|
|
9
9
|
const BlogSectionStatic = ({ title = '', category = '', children = null, }) => {
|
|
10
|
-
const titleString = typeof title === 'string' ? title :
|
|
10
|
+
const titleString = typeof title === 'string' ? title : index.extractTextFromReactNode(title);
|
|
11
11
|
const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
|
|
12
12
|
const id = index.generateIdForBlogTitle(titleWithCategory);
|
|
13
13
|
return (jsxRuntime.jsxs("div", { className: BlogSection_module.default['blog-section'], "data-title": titleString, "data-id": id, children: [title ? (jsxRuntime.jsx("h3", { className: BlogSection_module.default['blog-section__title'], children: title })) : null, children] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlogSectionStatic.js","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from 'react';\nimport styles from '../styles/BlogSection.module.scss';\nimport { generateIdForBlogTitle } from '../utils';\n\ninterface BlogSectionStaticProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSectionStatic = ({\n\ttitle = '',\n\tcategory = '',\n\tchildren = null,\n}: BlogSectionStaticProperties) => {\n\tconst titleString = typeof title === 'string' ? title :
|
|
1
|
+
{"version":3,"file":"BlogSectionStatic.js","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from 'react';\nimport styles from '../styles/BlogSection.module.scss';\nimport { extractTextFromReactNode, generateIdForBlogTitle } from '../utils';\n\ninterface BlogSectionStaticProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSectionStatic = ({\n\ttitle = '',\n\tcategory = '',\n\tchildren = null,\n}: BlogSectionStaticProperties) => {\n\tconst titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);\n\tconst titleWithCategory = category ? `${category} - ${titleString}` : titleString;\n\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\treturn (\n\t\t<div className={styles['blog-section']} data-title={titleString} data-id={id}>\n\t\t\t{title ? (\n\t\t\t\t<h3 className={styles['blog-section__title']}>{title}</h3>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport default BlogSectionStatic;\n"],"names":["extractTextFromReactNode","generateIdForBlogTitle","_jsxs","styles","_jsx"],"mappings":";;;;;;;;AAUA,MAAM,iBAAiB,GAAG,CAAC,EAC1B,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,GACc,KAAI;AACjC,IAAA,MAAM,WAAW,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAGA,8BAAwB,CAAC,KAAK,CAAC;AACvF,IAAA,MAAM,iBAAiB,GAAG,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,GAAA,EAAM,WAAW,CAAA,CAAE,GAAG,WAAW;AACjF,IAAA,MAAM,EAAE,GAAGC,4BAAsB,CAAC,iBAAiB,CAAC;AAEpD,IAAA,QACCC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,0BAAM,CAAC,cAAc,CAAC,EAAA,YAAA,EAAc,WAAW,aAAW,EAAE,EAAA,QAAA,EAAA,CAC1E,KAAK,IACLC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAED,0BAAM,CAAC,qBAAqB,CAAC,YAAG,KAAK,EAAA,CAAM,IACvD,IAAI,EACP,QAAQ,CAAA,EAAA,CACJ;AAER;;;;"}
|
package/dist/cjs/utils/index.js
CHANGED
|
@@ -1,9 +1,23 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var react = require('react');
|
|
4
|
+
|
|
5
|
+
const extractTextFromReactNode = (node) => {
|
|
6
|
+
if (node === null || node === undefined || typeof node === 'boolean')
|
|
7
|
+
return '';
|
|
8
|
+
if (typeof node === 'string' || typeof node === 'number')
|
|
9
|
+
return String(node);
|
|
10
|
+
if (react.isValidElement(node))
|
|
11
|
+
return extractTextFromReactNode(node.props.children);
|
|
12
|
+
if (Array.isArray(node))
|
|
13
|
+
return node.map(extractTextFromReactNode).join('');
|
|
14
|
+
return '';
|
|
15
|
+
};
|
|
3
16
|
const generateIdForBlogTitle = (title) => title.toLowerCase().replace(/[^\w\d]/g, '-');
|
|
4
17
|
const generateUrlForBlogTitle = (title) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());
|
|
5
18
|
const generateSectionHref = (id) => `?section=${id}`;
|
|
6
19
|
|
|
20
|
+
exports.extractTextFromReactNode = extractTextFromReactNode;
|
|
7
21
|
exports.generateIdForBlogTitle = generateIdForBlogTitle;
|
|
8
22
|
exports.generateSectionHref = generateSectionHref;
|
|
9
23
|
exports.generateUrlForBlogTitle = generateUrlForBlogTitle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\n\nexport const extractTextFromReactNode = (node: ReactNode): string => {\n\tif (node === null || node === undefined || typeof node === 'boolean') return '';\n\tif (typeof node === 'string' || typeof node === 'number') return String(node);\n\tif (isValidElement(node)) return extractTextFromReactNode((node.props as { children?: ReactNode }).children);\n\tif (Array.isArray(node)) return node.map(extractTextFromReactNode).join('');\n\treturn '';\n};\n\nexport const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n\nexport const generateSectionHref = (id: string) => `?section=${id}`;\n"],"names":["isValidElement"],"mappings":";;;;AAGO,MAAM,wBAAwB,GAAG,CAAC,IAAe,KAAY;IACnE,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,IAAI,KAAK,SAAS;AAAE,QAAA,OAAO,EAAE;IAC/E,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ;AAAE,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC;IAC7E,IAAIA,oBAAc,CAAC,IAAI,CAAC;QAAE,OAAO,wBAAwB,CAAE,IAAI,CAAC,KAAkC,CAAC,QAAQ,CAAC;AAC5G,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAC3E,IAAA,OAAO,EAAE;AACV;MAEa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE;AAEjH,MAAM,mBAAmB,GAAG,CAAC,EAAU,KAAK,CAAA,SAAA,EAAY,EAAE,CAAA;;;;;;;"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { lazy, Suspense } from 'react';
|
|
4
2
|
import CheckListStatic from '../staticComponents/CheckListStatic.js';
|
|
5
3
|
|
|
6
|
-
const CheckListDynamic = lazy(() => import('../dynamicComponents/CheckListDynamic.js'));
|
|
7
4
|
const CheckList = ({ items, hasMarginUp = false, hasMarginDown = false, }) => {
|
|
8
|
-
return (jsx(
|
|
5
|
+
return (jsx(CheckListStatic, { items: items, hasMarginUp: hasMarginUp, hasMarginDown: hasMarginDown }));
|
|
9
6
|
};
|
|
10
7
|
|
|
11
8
|
export { CheckList as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckList.js","sources":["../../../src/components/CheckList.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"CheckList.js","sources":["../../../src/components/CheckList.tsx"],"sourcesContent":["import CheckListStatic, {\n\ttype CheckListItem,\n} from '../staticComponents/CheckListStatic';\n\ninterface CheckListProperties {\n\titems: CheckListItem[];\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst CheckList = ({\n\titems,\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: CheckListProperties) => {\n\treturn (\n\t\t<CheckListStatic\n\t\t\titems={items}\n\t\t\thasMarginUp={hasMarginUp}\n\t\t\thasMarginDown={hasMarginDown}\n\t\t/>\n\t);\n};\n\nexport { type CheckListItem };\nexport default CheckList;\n"],"names":["_jsx"],"mappings":";;;AAUA,MAAM,SAAS,GAAG,CAAC,EAClB,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACA,KAAI;AACzB,IAAA,QACCA,GAAA,CAAC,eAAe,EAAA,EACf,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAAA,CAC3B;AAEJ;;;;"}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef, useRef, useImperativeHandle, useEffect, Children, isValidElement, cloneElement } from 'react';
|
|
4
4
|
import styles from '../styles/BlogSection.module.scss.js';
|
|
5
|
-
import { generateIdForBlogTitle, generateSectionHref } from '../utils/index.js';
|
|
5
|
+
import { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref } from '../utils/index.js';
|
|
6
6
|
|
|
7
7
|
const BlogSection = forwardRef(({ title = '', category = '', children = null }, forwardedReference) => {
|
|
8
|
-
const titleString = typeof title === 'string' ? title :
|
|
8
|
+
const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
|
|
9
9
|
const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
|
|
10
10
|
const id = generateIdForBlogTitle(titleWithCategory);
|
|
11
11
|
const parentReference = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlogSectionDynamic.js","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tforwardRef,\n\tisValidElement,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from 'react';\n\nimport type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';\n\nimport styles from '../styles/BlogSection.module.scss';\n\nimport type { ForwardedReference } from './BlogDynamic';\nimport { generateIdForBlogTitle, generateSectionHref } from '../utils';\n\ninterface BlogProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSection = forwardRef<ForwardedReference, BlogProperties>(\n\t(\n\t\t{ title = '', category = '', children = null }: BlogProperties,\n\t\tforwardedReference\n\t) => {\n\t\tconst titleString = typeof title === 'string' ? title :
|
|
1
|
+
{"version":3,"file":"BlogSectionDynamic.js","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tforwardRef,\n\tisValidElement,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from 'react';\n\nimport type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';\n\nimport styles from '../styles/BlogSection.module.scss';\n\nimport type { ForwardedReference } from './BlogDynamic';\nimport { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref } from '../utils';\n\ninterface BlogProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSection = forwardRef<ForwardedReference, BlogProperties>(\n\t(\n\t\t{ title = '', category = '', children = null }: BlogProperties,\n\t\tforwardedReference\n\t) => {\n\t\tconst titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);\n\t\tconst titleWithCategory = category ? `${category} - ${titleString}` : titleString;\n\t\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\t\tconst parentReference = useRef<ForwardedReference['parentRef']>(null);\n\t\tconst childReferences = useRef<ForwardedReference['childRefs']>([]);\n\t\tconst imperativeHandleRef = useRef<ForwardedReference | null>(null);\n\n\t\tuseImperativeHandle(forwardedReference, () => {\n\t\t\tconst handle = {\n\t\t\t\tparentRef: parentReference.current!,\n\t\t\t\tchildRefs: childReferences.current!,\n\t\t\t};\n\t\t\timperativeHandleRef.current = handle;\n\t\t\treturn handle;\n\t\t});\n\n\t\t// Re-register when title or category changes so the TOC reflects the updated heading\n\t\tuseEffect(() => {\n\t\t\tif (\n\t\t\t\ttypeof forwardedReference === 'function' &&\n\t\t\t\timperativeHandleRef.current\n\t\t\t) {\n\t\t\t\tforwardedReference(imperativeHandleRef.current);\n\t\t\t}\n\t\t}, [title, category]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\t\tconst handleChildReferences = (element: ForwardedReference | null) => {\n\t\t\tif (!element) return;\n\t\t\tconst { parentRef: subParentReference } = element;\n\t\t\tif (!subParentReference) return;\n\n\t\t\t// Avoid registering the same child section twice\n\t\t\tconst alreadyRegistered = childReferences.current.some(\n\t\t\t\tref => ref.parentRef === subParentReference\n\t\t\t);\n\t\t\tif (!alreadyRegistered) {\n\t\t\t\tchildReferences.current.push(element);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\ttypeof forwardedReference === 'function' &&\n\t\t\t\timperativeHandleRef.current\n\t\t\t) {\n\t\t\t\tforwardedReference(imperativeHandleRef.current);\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={styles['blog-section']}\n\t\t\t\tdata-title={titleString}\n\t\t\t\tdata-id={id}\n\t\t\t\tref={parentReference}\n\t\t\t>\n\t\t\t\t<h3\n\t\t\t\t\tclassName={`${styles['blog-section__title']} ${title ? '' : styles['blog-section__title--empty']}`}\n\t\t\t\t>\n\t\t\t\t\t{title ? (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref={generateSectionHref(id)}\n\t\t\t\t\t\t\tclassName={styles['blog-section__title-link']}\n\t\t\t\t\t\t\tonClick={e => e.preventDefault()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<p>No title</p>\n\t\t\t\t\t)}\n\t\t\t\t</h3>\n\t\t\t\t{Children.map(children, child => {\n\t\t\t\t\tif (!isValidElement(child)) return child;\n\t\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\t\tref: handleChildReferences,\n\t\t\t\t\t} as RefAttributes<ForwardedReference>);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nBlogSection.displayName = 'BlogSection';\n\nexport default BlogSection;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -3,24 +3,21 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useState, useRef, useEffect } from 'react';
|
|
4
4
|
import styles from '../styles/CheckList.module.scss.js';
|
|
5
5
|
|
|
6
|
-
const CHECKBOX_SIZE = 12;
|
|
7
|
-
const P_TAG_FONT_SIZE = 16;
|
|
8
6
|
const CheckListDynamic = ({ items, hasMarginUp = false, hasMarginDown = false, }) => {
|
|
9
7
|
const [checkboxMarginTop, setCheckboxMarginTop] = useState(0);
|
|
10
8
|
const measureRef = useRef(null);
|
|
11
9
|
useEffect(() => {
|
|
12
|
-
if (!measureRef.current)
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
10
|
+
// if (!measureRef.current) return;
|
|
11
|
+
// const p = measureRef.current.querySelector('p');
|
|
12
|
+
// if (!p) return;
|
|
13
|
+
// const rawLineHeight = getComputedStyle(p).lineHeight;
|
|
14
|
+
// const lineHeight =
|
|
15
|
+
// rawLineHeight === 'normal'
|
|
16
|
+
// ? P_TAG_FONT_SIZE * 1.2
|
|
17
|
+
// : parseFloat(rawLineHeight);
|
|
18
|
+
// if (!isNaN(lineHeight)) {
|
|
19
|
+
// setCheckboxMarginTop(Math.max(0, (lineHeight - CHECKBOX_SIZE) / 2));
|
|
20
|
+
// }
|
|
24
21
|
}, []);
|
|
25
22
|
return (jsx("div", { className: `${styles['check-list']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`, children: items.map((item, index) => (jsxs("div", { className: styles['check-list__item'], style: { alignItems: 'flex-start' }, "data-id": item.id, ref: index === 0 ? measureRef : undefined, children: [jsx("div", { className: `${styles['check-list__item__input']} ${item.isChecked ? styles['check-list__item__input--checked'] : ''}`, style: { marginTop: `${checkboxMarginTop}px` } }), item.children] }, item.id))) }));
|
|
26
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckListDynamic.js","sources":["../../../src/dynamicComponents/CheckListDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { CheckListItem } from '../staticComponents/CheckListStatic';\nimport styles from '../styles/CheckList.module.scss';\n\ninterface Properties {\n\titems: CheckListItem[];\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst CHECKBOX_SIZE = 12;\nconst P_TAG_FONT_SIZE = 16;\n\nconst CheckListDynamic = ({\n\titems,\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: Properties) => {\n\tconst [checkboxMarginTop, setCheckboxMarginTop] = useState(0);\n\tconst measureRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\
|
|
1
|
+
{"version":3,"file":"CheckListDynamic.js","sources":["../../../src/dynamicComponents/CheckListDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { CheckListItem } from '../staticComponents/CheckListStatic';\nimport styles from '../styles/CheckList.module.scss';\n\ninterface Properties {\n\titems: CheckListItem[];\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst CHECKBOX_SIZE = 12;\nconst P_TAG_FONT_SIZE = 16;\n\nconst CheckListDynamic = ({\n\titems,\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: Properties) => {\n\tconst [checkboxMarginTop, setCheckboxMarginTop] = useState(0);\n\tconst measureRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\t// if (!measureRef.current) return;\n\t\t// const p = measureRef.current.querySelector('p');\n\t\t// if (!p) return;\n\t\t// const rawLineHeight = getComputedStyle(p).lineHeight;\n\t\t// const lineHeight =\n\t\t// \trawLineHeight === 'normal'\n\t\t// \t\t? P_TAG_FONT_SIZE * 1.2\n\t\t// \t\t: parseFloat(rawLineHeight);\n\t\t// if (!isNaN(lineHeight)) {\n\t\t// \tsetCheckboxMarginTop(Math.max(0, (lineHeight - CHECKBOX_SIZE) / 2));\n\t\t// }\n\t}, []);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['check-list']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${\n\t\t\t\thasMarginDown ? styles['margin-bottom--2'] : ''\n\t\t\t}`}\n\t\t>\n\t\t\t{items.map((item, index) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={item.id}\n\t\t\t\t\tclassName={styles['check-list__item']}\n\t\t\t\t\tstyle={{ alignItems: 'flex-start' }}\n\t\t\t\t\tdata-id={item.id}\n\t\t\t\t\tref={index === 0 ? measureRef : undefined}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`${styles['check-list__item__input']} ${\n\t\t\t\t\t\t\titem.isChecked ? styles['check-list__item__input--checked'] : ''\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tstyle={{ marginTop: `${checkboxMarginTop}px` }}\n\t\t\t\t\t/>\n\t\t\t\t\t{item.children}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default CheckListDynamic;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAgBA,MAAM,gBAAgB,GAAG,CAAC,EACzB,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACT,KAAI;IAChB,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC7D,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;IAE/C,SAAS,CAAC,MAAK;;;;;;;;;;;;IAYf,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACCA,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,CAAA,CAAA,EAC/E,aAAa,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,CAAA,CAAE,EAAA,QAAA,EAED,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACtBC,IAAA,CAAA,KAAA,EAAA,EAEC,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EACrC,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,EAAA,SAAA,EAC1B,IAAI,CAAC,EAAE,EAChB,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,UAAU,GAAG,SAAS,EAAA,QAAA,EAAA,CAEzCD,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,yBAAyB,CAAC,CAAA,CAAA,EAC9C,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,kCAAkC,CAAC,GAAG,EAC/D,CAAA,CAAE,EACF,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,iBAAiB,CAAA,EAAA,CAAI,EAAE,EAAA,CAC7C,EACD,IAAI,CAAC,QAAQ,CAAA,EAAA,EAZT,IAAI,CAAC,EAAE,CAaP,CACN,CAAC,EAAA,CACG;AAER;;;;"}
|