@sparrowengg/integrations-templates-frontend 6.0.3 → 6.0.4
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/dynamic-mapping/components/tabs-content-component.js +1 -0
- package/dist/cjs/dynamic-mapping/components/tabs-content-component.js.map +1 -1
- package/dist/es/dynamic-mapping/components/tabs-content-component.js +1 -0
- package/dist/es/dynamic-mapping/components/tabs-content-component.js.map +1 -1
- package/package.json +1 -1
|
@@ -44,6 +44,7 @@ const TabsContentComponent = ({
|
|
|
44
44
|
() => mapping_helpers.filterFieldsBySearch(fields || [], searchInput),
|
|
45
45
|
[fields, searchInput]
|
|
46
46
|
);
|
|
47
|
+
console.log("filteredFields", filteredFields);
|
|
47
48
|
const hasResults = React.useMemo(() => (filteredFields == null ? void 0 : filteredFields.length) > 0, [filteredFields]);
|
|
48
49
|
return /* @__PURE__ */ React.createElement(tabs.TabsContent, { value, css: { padding: 0, position: "relative" }, key: value }, /* @__PURE__ */ React.createElement(
|
|
49
50
|
input.Input,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-content-component.js","sources":["../../../../src/dynamic-mapping/components/tabs-content-component.tsx"],"sourcesContent":["/* ----- Imports ----- */\n\nimport React, { useMemo } from 'react';\nimport { Box, Flex, Input, Text, Checkbox, Tooltip, TabsContent } from '@sparrowengg/twigs-react';\nimport { SearchIcon } from '@sparrowengg/twigs-react-icons';\nimport { filterFieldsBySearch } from '../helpers';\n\n/* ----- Types / Interfaces ----- */\n\ninterface TabsContentComponentProps {\n value: string;\n searchInput: string;\n setSearchInput: React.Dispatch<React.SetStateAction<string>>;\n fields: any[];\n handleFieldValues: (field: any, value: boolean) => void;\n placeholder: string;\n /** Whether the data is from API (enables hierarchical display for questions) */\n isApiData?: boolean;\n}\n\n/* ----- Main Component ----- */\n\n/**\n * Tabs content component for mapping fields\n * \n * @param {TabsContentComponentProps} props - Component props\n * @returns {JSX.Element} Tabs content component\n * \n * @example\n * <TabsContentComponent\n * value=\"QUESTIONS\"\n * searchInput={search}\n * fields={questions}\n * handleFieldValues={handleChange}\n * placeholder=\"Questions\"\n * />\n */\nexport const TabsContentComponent = ({\n value,\n searchInput,\n setSearchInput,\n fields,\n handleFieldValues,\n placeholder,\n isApiData = false,\n}: TabsContentComponentProps): JSX.Element => {\n const filteredFields = useMemo(\n () => filterFieldsBySearch(fields || [], searchInput),\n [fields, searchInput]\n );\n\n\n const hasResults = useMemo(() => filteredFields?.length > 0, [filteredFields]);\n\n return (\n <TabsContent value={value} css={{ padding: 0, position: 'relative' }} key={value}>\n <Input\n leftIcon={<SearchIcon color=\"#848484\" />}\n variant=\"filled\"\n placeholder={`Search ${placeholder}`}\n size=\"lg\"\n css={{ marginTop: '$8' }}\n value={searchInput}\n onChange={(event) => setSearchInput(event.currentTarget.value)}\n />\n \n <Flex\n css={{\n padding: '$8 $4 $32 $4',\n marginTop: '$8',\n height: 'calc(100vh - 408px)',\n overflow: 'auto',\n scrollbarWidth: 'thin',\n '&::-webkit-scrollbar': {\n width: '4px',\n },\n '& label': {\n lineHeight: '$sm',\n },\n }}\n flexDirection=\"column\"\n gap=\"$8\"\n >\n {hasResults ? (\n <>\n {filteredFields.map((field: any) => (\n <Box\n key={field.id}\n css={{\n // Add left padding for child questions when isApiData is true\n ...(isApiData && field.isChild && { paddingLeft: '24px' }),\n label: {\n color: '$neutral900',\n fontSize: '$sm',\n maxWidth: '520px',\n display: 'block',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n },\n }}\n >\n <Tooltip\n content={field.tooltip || ''}\n css={{\n fontFamily: 'DM Sans !important',\n zIndex: '9999999 !important',\n }}\n >\n <Flex css={{ width: 'fit-content !important' }}>\n <Checkbox\n size=\"sm\"\n checked={field.isEnabled}\n disabled={field.disabled}\n onChange={(value) => handleFieldValues(field, value as boolean)}\n >\n {isApiData && field.isChild ? `-- ${field.name}` : field.name}\n </Checkbox>\n </Flex>\n </Tooltip>\n </Box>\n ))}\n </>\n ) : (\n <Flex alignItems=\"center\" justifyContent=\"center\" css={{ marginTop: '$40' }}>\n <Text size=\"sm\">No Results Found</Text>\n </Flex>\n )}\n </Flex>\n \n <Box\n css={{\n position: 'absolute',\n pointerEvents: 'none',\n top: '88%',\n height: '$25',\n width: '100%',\n background:\n 'linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))',\n }}\n />\n </TabsContent>\n );\n};\n"],"names":["useMemo","filterFieldsBySearch","TabsContent","Input","SearchIcon","Flex","Box","Tooltip","Checkbox","value","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,uBAAuB,CAAC;AAAA,EACnC,KAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAA8C;AAC5C,EAAA,MAAM,cAAA,GAAiBA,aAAA;AAAA,IACrB,MAAMC,oCAAA,CAAqB,MAAA,IAAU,IAAI,WAAW,CAAA;AAAA,IACpD,CAAC,QAAQ,WAAW;AAAA,GACtB;
|
|
1
|
+
{"version":3,"file":"tabs-content-component.js","sources":["../../../../src/dynamic-mapping/components/tabs-content-component.tsx"],"sourcesContent":["/* ----- Imports ----- */\n\nimport React, { useMemo } from 'react';\nimport { Box, Flex, Input, Text, Checkbox, Tooltip, TabsContent } from '@sparrowengg/twigs-react';\nimport { SearchIcon } from '@sparrowengg/twigs-react-icons';\nimport { filterFieldsBySearch } from '../helpers';\n\n/* ----- Types / Interfaces ----- */\n\ninterface TabsContentComponentProps {\n value: string;\n searchInput: string;\n setSearchInput: React.Dispatch<React.SetStateAction<string>>;\n fields: any[];\n handleFieldValues: (field: any, value: boolean) => void;\n placeholder: string;\n /** Whether the data is from API (enables hierarchical display for questions) */\n isApiData?: boolean;\n}\n\n/* ----- Main Component ----- */\n\n/**\n * Tabs content component for mapping fields\n * \n * @param {TabsContentComponentProps} props - Component props\n * @returns {JSX.Element} Tabs content component\n * \n * @example\n * <TabsContentComponent\n * value=\"QUESTIONS\"\n * searchInput={search}\n * fields={questions}\n * handleFieldValues={handleChange}\n * placeholder=\"Questions\"\n * />\n */\nexport const TabsContentComponent = ({\n value,\n searchInput,\n setSearchInput,\n fields,\n handleFieldValues,\n placeholder,\n isApiData = false,\n}: TabsContentComponentProps): JSX.Element => {\n const filteredFields = useMemo(\n () => filterFieldsBySearch(fields || [], searchInput),\n [fields, searchInput]\n );\n console.log('filteredFields', filteredFields);\n\n\n const hasResults = useMemo(() => filteredFields?.length > 0, [filteredFields]);\n\n return (\n <TabsContent value={value} css={{ padding: 0, position: 'relative' }} key={value}>\n <Input\n leftIcon={<SearchIcon color=\"#848484\" />}\n variant=\"filled\"\n placeholder={`Search ${placeholder}`}\n size=\"lg\"\n css={{ marginTop: '$8' }}\n value={searchInput}\n onChange={(event) => setSearchInput(event.currentTarget.value)}\n />\n \n <Flex\n css={{\n padding: '$8 $4 $32 $4',\n marginTop: '$8',\n height: 'calc(100vh - 408px)',\n overflow: 'auto',\n scrollbarWidth: 'thin',\n '&::-webkit-scrollbar': {\n width: '4px',\n },\n '& label': {\n lineHeight: '$sm',\n },\n }}\n flexDirection=\"column\"\n gap=\"$8\"\n >\n {hasResults ? (\n <>\n {filteredFields.map((field: any) => (\n <Box\n key={field.id}\n css={{\n // Add left padding for child questions when isApiData is true\n ...(isApiData && field.isChild && { paddingLeft: '24px' }),\n label: {\n color: '$neutral900',\n fontSize: '$sm',\n maxWidth: '520px',\n display: 'block',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n },\n }}\n >\n <Tooltip\n content={field.tooltip || ''}\n css={{\n fontFamily: 'DM Sans !important',\n zIndex: '9999999 !important',\n }}\n >\n <Flex css={{ width: 'fit-content !important' }}>\n <Checkbox\n size=\"sm\"\n checked={field.isEnabled}\n disabled={field.disabled}\n onChange={(value) => handleFieldValues(field, value as boolean)}\n >\n {isApiData && field.isChild ? `-- ${field.name}` : field.name}\n </Checkbox>\n </Flex>\n </Tooltip>\n </Box>\n ))}\n </>\n ) : (\n <Flex alignItems=\"center\" justifyContent=\"center\" css={{ marginTop: '$40' }}>\n <Text size=\"sm\">No Results Found</Text>\n </Flex>\n )}\n </Flex>\n \n <Box\n css={{\n position: 'absolute',\n pointerEvents: 'none',\n top: '88%',\n height: '$25',\n width: '100%',\n background:\n 'linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))',\n }}\n />\n </TabsContent>\n );\n};\n"],"names":["useMemo","filterFieldsBySearch","TabsContent","Input","SearchIcon","Flex","Box","Tooltip","Checkbox","value","Text"],"mappings":"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"}
|
|
@@ -42,6 +42,7 @@ const TabsContentComponent = ({
|
|
|
42
42
|
() => filterFieldsBySearch(fields || [], searchInput),
|
|
43
43
|
[fields, searchInput]
|
|
44
44
|
);
|
|
45
|
+
console.log("filteredFields", filteredFields);
|
|
45
46
|
const hasResults = useMemo(() => (filteredFields == null ? void 0 : filteredFields.length) > 0, [filteredFields]);
|
|
46
47
|
return /* @__PURE__ */ React__default.createElement(TabsContent, { value, css: { padding: 0, position: "relative" }, key: value }, /* @__PURE__ */ React__default.createElement(
|
|
47
48
|
Input,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-content-component.js","sources":["../../../../src/dynamic-mapping/components/tabs-content-component.tsx"],"sourcesContent":["/* ----- Imports ----- */\n\nimport React, { useMemo } from 'react';\nimport { Box, Flex, Input, Text, Checkbox, Tooltip, TabsContent } from '@sparrowengg/twigs-react';\nimport { SearchIcon } from '@sparrowengg/twigs-react-icons';\nimport { filterFieldsBySearch } from '../helpers';\n\n/* ----- Types / Interfaces ----- */\n\ninterface TabsContentComponentProps {\n value: string;\n searchInput: string;\n setSearchInput: React.Dispatch<React.SetStateAction<string>>;\n fields: any[];\n handleFieldValues: (field: any, value: boolean) => void;\n placeholder: string;\n /** Whether the data is from API (enables hierarchical display for questions) */\n isApiData?: boolean;\n}\n\n/* ----- Main Component ----- */\n\n/**\n * Tabs content component for mapping fields\n * \n * @param {TabsContentComponentProps} props - Component props\n * @returns {JSX.Element} Tabs content component\n * \n * @example\n * <TabsContentComponent\n * value=\"QUESTIONS\"\n * searchInput={search}\n * fields={questions}\n * handleFieldValues={handleChange}\n * placeholder=\"Questions\"\n * />\n */\nexport const TabsContentComponent = ({\n value,\n searchInput,\n setSearchInput,\n fields,\n handleFieldValues,\n placeholder,\n isApiData = false,\n}: TabsContentComponentProps): JSX.Element => {\n const filteredFields = useMemo(\n () => filterFieldsBySearch(fields || [], searchInput),\n [fields, searchInput]\n );\n\n\n const hasResults = useMemo(() => filteredFields?.length > 0, [filteredFields]);\n\n return (\n <TabsContent value={value} css={{ padding: 0, position: 'relative' }} key={value}>\n <Input\n leftIcon={<SearchIcon color=\"#848484\" />}\n variant=\"filled\"\n placeholder={`Search ${placeholder}`}\n size=\"lg\"\n css={{ marginTop: '$8' }}\n value={searchInput}\n onChange={(event) => setSearchInput(event.currentTarget.value)}\n />\n \n <Flex\n css={{\n padding: '$8 $4 $32 $4',\n marginTop: '$8',\n height: 'calc(100vh - 408px)',\n overflow: 'auto',\n scrollbarWidth: 'thin',\n '&::-webkit-scrollbar': {\n width: '4px',\n },\n '& label': {\n lineHeight: '$sm',\n },\n }}\n flexDirection=\"column\"\n gap=\"$8\"\n >\n {hasResults ? (\n <>\n {filteredFields.map((field: any) => (\n <Box\n key={field.id}\n css={{\n // Add left padding for child questions when isApiData is true\n ...(isApiData && field.isChild && { paddingLeft: '24px' }),\n label: {\n color: '$neutral900',\n fontSize: '$sm',\n maxWidth: '520px',\n display: 'block',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n },\n }}\n >\n <Tooltip\n content={field.tooltip || ''}\n css={{\n fontFamily: 'DM Sans !important',\n zIndex: '9999999 !important',\n }}\n >\n <Flex css={{ width: 'fit-content !important' }}>\n <Checkbox\n size=\"sm\"\n checked={field.isEnabled}\n disabled={field.disabled}\n onChange={(value) => handleFieldValues(field, value as boolean)}\n >\n {isApiData && field.isChild ? `-- ${field.name}` : field.name}\n </Checkbox>\n </Flex>\n </Tooltip>\n </Box>\n ))}\n </>\n ) : (\n <Flex alignItems=\"center\" justifyContent=\"center\" css={{ marginTop: '$40' }}>\n <Text size=\"sm\">No Results Found</Text>\n </Flex>\n )}\n </Flex>\n \n <Box\n css={{\n position: 'absolute',\n pointerEvents: 'none',\n top: '88%',\n height: '$25',\n width: '100%',\n background:\n 'linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))',\n }}\n />\n </TabsContent>\n );\n};\n"],"names":["React","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,uBAAuB,CAAC;AAAA,EACnC,KAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAA8C;AAC5C,EAAA,MAAM,cAAA,GAAiB,OAAA;AAAA,IACrB,MAAM,oBAAA,CAAqB,MAAA,IAAU,IAAI,WAAW,CAAA;AAAA,IACpD,CAAC,QAAQ,WAAW;AAAA,GACtB;
|
|
1
|
+
{"version":3,"file":"tabs-content-component.js","sources":["../../../../src/dynamic-mapping/components/tabs-content-component.tsx"],"sourcesContent":["/* ----- Imports ----- */\n\nimport React, { useMemo } from 'react';\nimport { Box, Flex, Input, Text, Checkbox, Tooltip, TabsContent } from '@sparrowengg/twigs-react';\nimport { SearchIcon } from '@sparrowengg/twigs-react-icons';\nimport { filterFieldsBySearch } from '../helpers';\n\n/* ----- Types / Interfaces ----- */\n\ninterface TabsContentComponentProps {\n value: string;\n searchInput: string;\n setSearchInput: React.Dispatch<React.SetStateAction<string>>;\n fields: any[];\n handleFieldValues: (field: any, value: boolean) => void;\n placeholder: string;\n /** Whether the data is from API (enables hierarchical display for questions) */\n isApiData?: boolean;\n}\n\n/* ----- Main Component ----- */\n\n/**\n * Tabs content component for mapping fields\n * \n * @param {TabsContentComponentProps} props - Component props\n * @returns {JSX.Element} Tabs content component\n * \n * @example\n * <TabsContentComponent\n * value=\"QUESTIONS\"\n * searchInput={search}\n * fields={questions}\n * handleFieldValues={handleChange}\n * placeholder=\"Questions\"\n * />\n */\nexport const TabsContentComponent = ({\n value,\n searchInput,\n setSearchInput,\n fields,\n handleFieldValues,\n placeholder,\n isApiData = false,\n}: TabsContentComponentProps): JSX.Element => {\n const filteredFields = useMemo(\n () => filterFieldsBySearch(fields || [], searchInput),\n [fields, searchInput]\n );\n console.log('filteredFields', filteredFields);\n\n\n const hasResults = useMemo(() => filteredFields?.length > 0, [filteredFields]);\n\n return (\n <TabsContent value={value} css={{ padding: 0, position: 'relative' }} key={value}>\n <Input\n leftIcon={<SearchIcon color=\"#848484\" />}\n variant=\"filled\"\n placeholder={`Search ${placeholder}`}\n size=\"lg\"\n css={{ marginTop: '$8' }}\n value={searchInput}\n onChange={(event) => setSearchInput(event.currentTarget.value)}\n />\n \n <Flex\n css={{\n padding: '$8 $4 $32 $4',\n marginTop: '$8',\n height: 'calc(100vh - 408px)',\n overflow: 'auto',\n scrollbarWidth: 'thin',\n '&::-webkit-scrollbar': {\n width: '4px',\n },\n '& label': {\n lineHeight: '$sm',\n },\n }}\n flexDirection=\"column\"\n gap=\"$8\"\n >\n {hasResults ? (\n <>\n {filteredFields.map((field: any) => (\n <Box\n key={field.id}\n css={{\n // Add left padding for child questions when isApiData is true\n ...(isApiData && field.isChild && { paddingLeft: '24px' }),\n label: {\n color: '$neutral900',\n fontSize: '$sm',\n maxWidth: '520px',\n display: 'block',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n },\n }}\n >\n <Tooltip\n content={field.tooltip || ''}\n css={{\n fontFamily: 'DM Sans !important',\n zIndex: '9999999 !important',\n }}\n >\n <Flex css={{ width: 'fit-content !important' }}>\n <Checkbox\n size=\"sm\"\n checked={field.isEnabled}\n disabled={field.disabled}\n onChange={(value) => handleFieldValues(field, value as boolean)}\n >\n {isApiData && field.isChild ? `-- ${field.name}` : field.name}\n </Checkbox>\n </Flex>\n </Tooltip>\n </Box>\n ))}\n </>\n ) : (\n <Flex alignItems=\"center\" justifyContent=\"center\" css={{ marginTop: '$40' }}>\n <Text size=\"sm\">No Results Found</Text>\n </Flex>\n )}\n </Flex>\n \n <Box\n css={{\n position: 'absolute',\n pointerEvents: 'none',\n top: '88%',\n height: '$25',\n width: '100%',\n background:\n 'linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))',\n }}\n />\n </TabsContent>\n );\n};\n"],"names":["React","value"],"mappings":"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"}
|