@sparrowengg/integrations-templates-frontend 5.0.1 → 5.0.2
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/configuration.js +11 -3
- package/dist/cjs/dynamic-mapping/components/configuration.js.map +1 -1
- package/dist/es/dynamic-mapping/components/configuration.js +11 -3
- package/dist/es/dynamic-mapping/components/configuration.js.map +1 -1
- package/package.json +1 -1
|
@@ -91,18 +91,25 @@ const Configuration = ({
|
|
|
91
91
|
/* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, field.label)
|
|
92
92
|
)), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral500" } }, checkboxDescription));
|
|
93
93
|
const renderInputField = () => /* @__PURE__ */ React.createElement(
|
|
94
|
-
|
|
94
|
+
flex.Flex,
|
|
95
95
|
{
|
|
96
96
|
className: "dm-sans",
|
|
97
|
+
alignItems: "center",
|
|
98
|
+
gap: "$4",
|
|
97
99
|
css: {
|
|
100
|
+
width: "100%",
|
|
98
101
|
label: {
|
|
99
102
|
fontSize: "$xs !important"
|
|
100
103
|
}
|
|
101
104
|
}
|
|
102
105
|
},
|
|
103
|
-
/* @__PURE__ */ React.createElement(
|
|
106
|
+
/* @__PURE__ */ React.createElement(box.Box, { css: {
|
|
107
|
+
width: (field == null ? void 0 : field.rightElement) ? "90%" : "100%",
|
|
108
|
+
flex: 1
|
|
109
|
+
} }, /* @__PURE__ */ React.createElement(
|
|
104
110
|
formInput.FormInput,
|
|
105
111
|
__spreadProps(__spreadValues(__spreadProps(__spreadValues({
|
|
112
|
+
helperText: field.helperText || "dff",
|
|
106
113
|
placeholder: field.placeholder || "",
|
|
107
114
|
className: "dm-sans",
|
|
108
115
|
disabled: field == null ? void 0 : field.disabled
|
|
@@ -118,7 +125,8 @@ const Configuration = ({
|
|
|
118
125
|
}), {
|
|
119
126
|
onChange: handleInputChange
|
|
120
127
|
})
|
|
121
|
-
)
|
|
128
|
+
)),
|
|
129
|
+
(field == null ? void 0 : field.rightElement) && field.rightElement()
|
|
122
130
|
);
|
|
123
131
|
const renderSelectField = () => /* @__PURE__ */ React.createElement(
|
|
124
132
|
flex.Flex,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"configuration.js","sources":["../../../../src/dynamic-mapping/components/configuration.tsx"],"sourcesContent":["/* ----- Imports ----- */\n\nimport React, { useMemo } from 'react';\nimport { Box, Flex, Text, Switch, Checkbox, FormInput, FormLabel } from '@sparrowengg/twigs-react';\nimport { CustomAddNewSelect } from './custom-add-new-select';\nimport { useConfigurationField } from '../hooks';\nimport { isConfigurationFieldVisible } from '../helpers';\n\n/* ----- Types / Interfaces ----- */\n\ninterface ConfigurationProps {\n field: any;\n configuredFields: any;\n responseImportType?: string | null;\n}\n\n/* ----- Main Component ----- */\n\n/**\n * Configuration field component with dynamic field type rendering\n * \n * @param {ConfigurationProps} props - Component props\n * @returns {JSX.Element | null} Configuration field component\n * \n * @example\n * <Configuration\n * field={configField}\n * configuredFields={fields}\n * />\n */\nexport const Configuration = ({\n field,\n configuredFields,\n responseImportType = null,\n}: ConfigurationProps): JSX.Element | null => {\n const { error, fieldValue, handleInputChange, handleCheckboxChange, handleSwitchChange } =\n useConfigurationField({\n field,\n configuredFields,\n });\n\n const isVisible = useMemo(\n () => isConfigurationFieldVisible(field, configuredFields),\n [field, configuredFields]\n );\n\n const checkboxDescription = useMemo(() => {\n if (field.fieldType !== 'checkbox') return '';\n if (field.value && typeof field.ifChecked === 'function') {\n return field.ifChecked();\n }\n if (!field.value && typeof field.ifUnchecked === 'function') {\n return field.ifUnchecked(responseImportType);\n }\n return '';\n }, [field, responseImportType]);\n\n if (!isVisible) return null;\n\n const renderSwitchField = () => (\n <Flex\n gap=\"$4\"\n alignItems=\"center\"\n css={{\n marginBlockStart: '$12',\n borderTop: '$borderWidths$xs solid $neutral200',\n paddingTop: '$16',\n }}\n >\n <Switch\n disabled={field?.disabled}\n size=\"sm\"\n checked={field?.value}\n onChange={handleSwitchChange}\n />\n <Text size=\"md\" weight=\"regular\" css={{ color: '$neutral900' }}>\n {field.label}\n </Text>\n </Flex>\n );\n\n const renderCheckboxField = () => (\n <Flex flexDirection=\"column\" alignItems=\"start\" gap=\"$4\">\n <Flex gap=\"$4\" alignItems=\"center\">\n <Checkbox\n disabled={field?.disabled}\n checked={!!fieldValue}\n onChange={(value) => handleCheckboxChange(value as boolean)}\n >\n <Text size=\"sm\" weight=\"regular\" css={{ color: '$neutral900' }}>\n {field.label}\n </Text>\n </Checkbox>\n </Flex>\n <Text size=\"sm\" weight=\"regular\" css={{ color: '$neutral500' }}>\n {checkboxDescription}\n </Text>\n </Flex>\n );\n\n const renderInputField = () => (\n <
|
|
1
|
+
{"version":3,"file":"configuration.js","sources":["../../../../src/dynamic-mapping/components/configuration.tsx"],"sourcesContent":["/* ----- Imports ----- */\n\nimport React, { useMemo } from 'react';\nimport { Box, Flex, Text, Switch, Checkbox, FormInput, FormLabel, IconButton } from '@sparrowengg/twigs-react';\nimport { CustomAddNewSelect } from './custom-add-new-select';\nimport { useConfigurationField } from '../hooks';\nimport { isConfigurationFieldVisible } from '../helpers';\n\n/* ----- Types / Interfaces ----- */\n\ninterface ConfigurationProps {\n field: any;\n configuredFields: any;\n responseImportType?: string | null;\n}\n\n/* ----- Main Component ----- */\n\n/**\n * Configuration field component with dynamic field type rendering\n * \n * @param {ConfigurationProps} props - Component props\n * @returns {JSX.Element | null} Configuration field component\n * \n * @example\n * <Configuration\n * field={configField}\n * configuredFields={fields}\n * />\n */\nexport const Configuration = ({\n field,\n configuredFields,\n responseImportType = null,\n}: ConfigurationProps): JSX.Element | null => {\n const { error, fieldValue, handleInputChange, handleCheckboxChange, handleSwitchChange } =\n useConfigurationField({\n field,\n configuredFields,\n });\n\n const isVisible = useMemo(\n () => isConfigurationFieldVisible(field, configuredFields),\n [field, configuredFields]\n );\n\n const checkboxDescription = useMemo(() => {\n if (field.fieldType !== 'checkbox') return '';\n if (field.value && typeof field.ifChecked === 'function') {\n return field.ifChecked();\n }\n if (!field.value && typeof field.ifUnchecked === 'function') {\n return field.ifUnchecked(responseImportType);\n }\n return '';\n }, [field, responseImportType]);\n\n if (!isVisible) return null;\n\n const renderSwitchField = () => (\n <Flex\n gap=\"$4\"\n alignItems=\"center\"\n css={{\n marginBlockStart: '$12',\n borderTop: '$borderWidths$xs solid $neutral200',\n paddingTop: '$16',\n }}\n >\n <Switch\n disabled={field?.disabled}\n size=\"sm\"\n checked={field?.value}\n onChange={handleSwitchChange}\n />\n <Text size=\"md\" weight=\"regular\" css={{ color: '$neutral900' }}>\n {field.label}\n </Text>\n </Flex>\n );\n\n const renderCheckboxField = () => (\n <Flex flexDirection=\"column\" alignItems=\"start\" gap=\"$4\">\n <Flex gap=\"$4\" alignItems=\"center\">\n <Checkbox\n disabled={field?.disabled}\n checked={!!fieldValue}\n onChange={(value) => handleCheckboxChange(value as boolean)}\n >\n <Text size=\"sm\" weight=\"regular\" css={{ color: '$neutral900' }}>\n {field.label}\n </Text>\n </Checkbox>\n </Flex>\n <Text size=\"sm\" weight=\"regular\" css={{ color: '$neutral500' }}>\n {checkboxDescription}\n </Text>\n </Flex>\n );\n\n const renderInputField = () => (\n <Flex\n className=\"dm-sans\"\n alignItems=\"center\"\n gap=\"$4\"\n css={{\n width: '100%',\n label: {\n fontSize: '$xs !important',\n },\n }}\n >\n <Box css={{\n width: field?.rightElement ? '90%' : '100%',\n flex: 1,\n }}>\n <FormInput\n helperText={field.helperText || 'dff'}\n placeholder={field.placeholder || ''}\n className=\"dm-sans\"\n disabled={field?.disabled}\n {...(error.id === field.id && {\n error: error.errorMessage,\n errorBorder: error.error,\n })}\n label={field.label}\n value={typeof fieldValue === 'object' ? '' : fieldValue || ''}\n size=\"lg\"\n {...(field.pattern && {\n pattern: field.pattern,\n })}\n onChange={handleInputChange}\n />\n </Box>\n {field?.rightElement && (\n field.rightElement()\n )}\n </Flex>\n );\n\n const renderSelectField = () => (\n <Flex\n gap=\"$2\"\n flexDirection=\"column\"\n css={{\n cursor: 'pointer !important',\n '.twigs-select__indicator': {\n width: '14px !important',\n color: '#848484 !important',\n },\n }}\n >\n <FormLabel size=\"xs\" css={{ fontWeight: '$5' }}>\n {field.label}\n </FormLabel>\n <CustomAddNewSelect field={field} />\n </Flex>\n );\n\n switch (field.fieldType) {\n case 'switch':\n return renderSwitchField();\n case 'checkbox':\n return renderCheckboxField();\n case 'input':\n return renderInputField();\n default:\n return renderSelectField();\n }\n};\n"],"names":["useConfigurationField","useMemo","isConfigurationFieldVisible","Flex","Switch","Text","Checkbox","Box","FormInput","FormLabel","CustomAddNewSelect"],"mappings":"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"}
|
|
@@ -89,18 +89,25 @@ const Configuration = ({
|
|
|
89
89
|
/* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, field.label)
|
|
90
90
|
)), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "regular", css: { color: "$neutral500" } }, checkboxDescription));
|
|
91
91
|
const renderInputField = () => /* @__PURE__ */ React__default.createElement(
|
|
92
|
-
|
|
92
|
+
Flex,
|
|
93
93
|
{
|
|
94
94
|
className: "dm-sans",
|
|
95
|
+
alignItems: "center",
|
|
96
|
+
gap: "$4",
|
|
95
97
|
css: {
|
|
98
|
+
width: "100%",
|
|
96
99
|
label: {
|
|
97
100
|
fontSize: "$xs !important"
|
|
98
101
|
}
|
|
99
102
|
}
|
|
100
103
|
},
|
|
101
|
-
/* @__PURE__ */ React__default.createElement(
|
|
104
|
+
/* @__PURE__ */ React__default.createElement(Box, { css: {
|
|
105
|
+
width: (field == null ? void 0 : field.rightElement) ? "90%" : "100%",
|
|
106
|
+
flex: 1
|
|
107
|
+
} }, /* @__PURE__ */ React__default.createElement(
|
|
102
108
|
FormInput,
|
|
103
109
|
__spreadProps(__spreadValues(__spreadProps(__spreadValues({
|
|
110
|
+
helperText: field.helperText || "dff",
|
|
104
111
|
placeholder: field.placeholder || "",
|
|
105
112
|
className: "dm-sans",
|
|
106
113
|
disabled: field == null ? void 0 : field.disabled
|
|
@@ -116,7 +123,8 @@ const Configuration = ({
|
|
|
116
123
|
}), {
|
|
117
124
|
onChange: handleInputChange
|
|
118
125
|
})
|
|
119
|
-
)
|
|
126
|
+
)),
|
|
127
|
+
(field == null ? void 0 : field.rightElement) && field.rightElement()
|
|
120
128
|
);
|
|
121
129
|
const renderSelectField = () => /* @__PURE__ */ React__default.createElement(
|
|
122
130
|
Flex,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"configuration.js","sources":["../../../../src/dynamic-mapping/components/configuration.tsx"],"sourcesContent":["/* ----- Imports ----- */\n\nimport React, { useMemo } from 'react';\nimport { Box, Flex, Text, Switch, Checkbox, FormInput, FormLabel } from '@sparrowengg/twigs-react';\nimport { CustomAddNewSelect } from './custom-add-new-select';\nimport { useConfigurationField } from '../hooks';\nimport { isConfigurationFieldVisible } from '../helpers';\n\n/* ----- Types / Interfaces ----- */\n\ninterface ConfigurationProps {\n field: any;\n configuredFields: any;\n responseImportType?: string | null;\n}\n\n/* ----- Main Component ----- */\n\n/**\n * Configuration field component with dynamic field type rendering\n * \n * @param {ConfigurationProps} props - Component props\n * @returns {JSX.Element | null} Configuration field component\n * \n * @example\n * <Configuration\n * field={configField}\n * configuredFields={fields}\n * />\n */\nexport const Configuration = ({\n field,\n configuredFields,\n responseImportType = null,\n}: ConfigurationProps): JSX.Element | null => {\n const { error, fieldValue, handleInputChange, handleCheckboxChange, handleSwitchChange } =\n useConfigurationField({\n field,\n configuredFields,\n });\n\n const isVisible = useMemo(\n () => isConfigurationFieldVisible(field, configuredFields),\n [field, configuredFields]\n );\n\n const checkboxDescription = useMemo(() => {\n if (field.fieldType !== 'checkbox') return '';\n if (field.value && typeof field.ifChecked === 'function') {\n return field.ifChecked();\n }\n if (!field.value && typeof field.ifUnchecked === 'function') {\n return field.ifUnchecked(responseImportType);\n }\n return '';\n }, [field, responseImportType]);\n\n if (!isVisible) return null;\n\n const renderSwitchField = () => (\n <Flex\n gap=\"$4\"\n alignItems=\"center\"\n css={{\n marginBlockStart: '$12',\n borderTop: '$borderWidths$xs solid $neutral200',\n paddingTop: '$16',\n }}\n >\n <Switch\n disabled={field?.disabled}\n size=\"sm\"\n checked={field?.value}\n onChange={handleSwitchChange}\n />\n <Text size=\"md\" weight=\"regular\" css={{ color: '$neutral900' }}>\n {field.label}\n </Text>\n </Flex>\n );\n\n const renderCheckboxField = () => (\n <Flex flexDirection=\"column\" alignItems=\"start\" gap=\"$4\">\n <Flex gap=\"$4\" alignItems=\"center\">\n <Checkbox\n disabled={field?.disabled}\n checked={!!fieldValue}\n onChange={(value) => handleCheckboxChange(value as boolean)}\n >\n <Text size=\"sm\" weight=\"regular\" css={{ color: '$neutral900' }}>\n {field.label}\n </Text>\n </Checkbox>\n </Flex>\n <Text size=\"sm\" weight=\"regular\" css={{ color: '$neutral500' }}>\n {checkboxDescription}\n </Text>\n </Flex>\n );\n\n const renderInputField = () => (\n <
|
|
1
|
+
{"version":3,"file":"configuration.js","sources":["../../../../src/dynamic-mapping/components/configuration.tsx"],"sourcesContent":["/* ----- Imports ----- */\n\nimport React, { useMemo } from 'react';\nimport { Box, Flex, Text, Switch, Checkbox, FormInput, FormLabel, IconButton } from '@sparrowengg/twigs-react';\nimport { CustomAddNewSelect } from './custom-add-new-select';\nimport { useConfigurationField } from '../hooks';\nimport { isConfigurationFieldVisible } from '../helpers';\n\n/* ----- Types / Interfaces ----- */\n\ninterface ConfigurationProps {\n field: any;\n configuredFields: any;\n responseImportType?: string | null;\n}\n\n/* ----- Main Component ----- */\n\n/**\n * Configuration field component with dynamic field type rendering\n * \n * @param {ConfigurationProps} props - Component props\n * @returns {JSX.Element | null} Configuration field component\n * \n * @example\n * <Configuration\n * field={configField}\n * configuredFields={fields}\n * />\n */\nexport const Configuration = ({\n field,\n configuredFields,\n responseImportType = null,\n}: ConfigurationProps): JSX.Element | null => {\n const { error, fieldValue, handleInputChange, handleCheckboxChange, handleSwitchChange } =\n useConfigurationField({\n field,\n configuredFields,\n });\n\n const isVisible = useMemo(\n () => isConfigurationFieldVisible(field, configuredFields),\n [field, configuredFields]\n );\n\n const checkboxDescription = useMemo(() => {\n if (field.fieldType !== 'checkbox') return '';\n if (field.value && typeof field.ifChecked === 'function') {\n return field.ifChecked();\n }\n if (!field.value && typeof field.ifUnchecked === 'function') {\n return field.ifUnchecked(responseImportType);\n }\n return '';\n }, [field, responseImportType]);\n\n if (!isVisible) return null;\n\n const renderSwitchField = () => (\n <Flex\n gap=\"$4\"\n alignItems=\"center\"\n css={{\n marginBlockStart: '$12',\n borderTop: '$borderWidths$xs solid $neutral200',\n paddingTop: '$16',\n }}\n >\n <Switch\n disabled={field?.disabled}\n size=\"sm\"\n checked={field?.value}\n onChange={handleSwitchChange}\n />\n <Text size=\"md\" weight=\"regular\" css={{ color: '$neutral900' }}>\n {field.label}\n </Text>\n </Flex>\n );\n\n const renderCheckboxField = () => (\n <Flex flexDirection=\"column\" alignItems=\"start\" gap=\"$4\">\n <Flex gap=\"$4\" alignItems=\"center\">\n <Checkbox\n disabled={field?.disabled}\n checked={!!fieldValue}\n onChange={(value) => handleCheckboxChange(value as boolean)}\n >\n <Text size=\"sm\" weight=\"regular\" css={{ color: '$neutral900' }}>\n {field.label}\n </Text>\n </Checkbox>\n </Flex>\n <Text size=\"sm\" weight=\"regular\" css={{ color: '$neutral500' }}>\n {checkboxDescription}\n </Text>\n </Flex>\n );\n\n const renderInputField = () => (\n <Flex\n className=\"dm-sans\"\n alignItems=\"center\"\n gap=\"$4\"\n css={{\n width: '100%',\n label: {\n fontSize: '$xs !important',\n },\n }}\n >\n <Box css={{\n width: field?.rightElement ? '90%' : '100%',\n flex: 1,\n }}>\n <FormInput\n helperText={field.helperText || 'dff'}\n placeholder={field.placeholder || ''}\n className=\"dm-sans\"\n disabled={field?.disabled}\n {...(error.id === field.id && {\n error: error.errorMessage,\n errorBorder: error.error,\n })}\n label={field.label}\n value={typeof fieldValue === 'object' ? '' : fieldValue || ''}\n size=\"lg\"\n {...(field.pattern && {\n pattern: field.pattern,\n })}\n onChange={handleInputChange}\n />\n </Box>\n {field?.rightElement && (\n field.rightElement()\n )}\n </Flex>\n );\n\n const renderSelectField = () => (\n <Flex\n gap=\"$2\"\n flexDirection=\"column\"\n css={{\n cursor: 'pointer !important',\n '.twigs-select__indicator': {\n width: '14px !important',\n color: '#848484 !important',\n },\n }}\n >\n <FormLabel size=\"xs\" css={{ fontWeight: '$5' }}>\n {field.label}\n </FormLabel>\n <CustomAddNewSelect field={field} />\n </Flex>\n );\n\n switch (field.fieldType) {\n case 'switch':\n return renderSwitchField();\n case 'checkbox':\n return renderCheckboxField();\n case 'input':\n return renderInputField();\n default:\n return renderSelectField();\n }\n};\n"],"names":["React"],"mappings":"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"}
|