feat #243 - Refac JSONPath WIP

dassana-io · Mar 11, 2021 · b32f948 · b32f948
1 parent 8f574f4
commit b32f948
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 33 deletions.
diff --git a/src/components/Table/MultipleIcons.tsx b/src/components/Table/MultipleIcons.tsx
@@ -70,7 +70,7 @@ export const MultipleIcons: FC<Props> = ({
 	return (
 		<>
 			{renderIcons({ sliceEndIndex: truncateLength, sliceStartIndex: 0 })}
-			{truncateLength < iconPropsArr.length ? (
+			{truncateLength < iconPropsArr.length && (
 				<Tooltip
 					classes={[classes.tooltip]}
 					placement='bottom'
@@ -91,8 +91,6 @@ export const MultipleIcons: FC<Props> = ({
 						+{iconPropsArr.length - truncateLength}
 					</span>
 				</Tooltip>
-			) : (
-				''
 			)}
 		</>
 	)

diff --git a/src/components/Table/fixtures/7_sample_data.ts b/src/components/Table/fixtures/7_sample_data.ts
@@ -8,21 +8,21 @@ const { component, number, string } = ColumnTypes
 const { date, icon } = ColumnFormats
 
 export interface JSONPathData {
-	company: { id: string; value: IconName }
+	company: { id: string; name?: string; value: IconName }
 	id: number
 	name: { id: string; value: string }
 	start_date: { id: string; date: number }
-	vendors: { id: string; value: string }[]
+	vendors: { id: string; name?: string; value: string }[]
 }
 
 const columns: ColumnType[] = [
 	{
-		dataIndex: '$.name.value',
+		dataIndex: 'name.value',
 		title: 'Name',
 		type: string
 	},
 	{
-		dataIndex: '$.start_date.date',
+		dataIndex: 'start_date.date',
 		format: date,
 		renderProps: {
 			displayFormat: dateFormat
@@ -31,19 +31,21 @@ const columns: ColumnType[] = [
 		type: number
 	},
 	{
-		dataIndex: '$.company.value',
+		dataIndex: 'company',
 		format: icon,
 		renderProps: {
-			type: 'iconKey'
+			type: 'iconKey',
+			iconKey: 'value'
 		},
 		title: 'Company',
 		type: component
 	},
 	{
-		dataIndex: '$.vendors..value',
+		dataIndex: 'vendors',
 		format: icon,
 		renderProps: {
-			type: 'iconUrl'
+			type: 'iconUrl',
+			iconKey: 'value'
 		},
 		title: 'Vendors',
 		type: component
@@ -52,7 +54,7 @@ const columns: ColumnType[] = [
 
 const data: JSONPathData[] = [
 	{
-		company: { id: 'c1', value: 'azure' },
+		company: { id: 'c1', name: 'azure', value: 'azure' },
 		id: 0,
 		name: { id: 'n1', value: 'Lorem ipsum' },
 		start_date: { date: 1519782342212, id: 'sd1' },

diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts
@@ -83,21 +83,31 @@ interface PartialComponentType extends PartialColumnType {
 	type: ColumnTypes.component
 }
 
-interface RenderPropsIcon extends SharedIconProps {
+interface SharedCompIcontype extends SharedIconProps {
+	filterKey?: string
+	iconKey?: string
+}
+
+interface RenderPropsIcon extends SharedCompIcontype {
 	type: 'icon'
 	iconMap: {
 		[key: string]: string
 	}
 }
 
-interface RenderPropsIconKey extends SharedIconProps {
+interface RenderPropsIconKey extends SharedCompIcontype {
 	type: 'iconKey'
 }
 
-interface RenderPropsIconUrl extends SharedIconProps {
+interface RenderPropsIconUrl extends SharedCompIcontype {
 	type: 'iconUrl'
 }
 
+interface ComponentIconType extends PartialComponentType {
+	format: ColumnFormats.icon
+	renderProps: RenderPropsIcon | RenderPropsIconKey | RenderPropsIconUrl
+}
+
 export interface ComponentActionType extends PartialComponentType {
 	dataIndex: ''
 	format: ColumnFormats.action
@@ -110,11 +120,6 @@ export interface ComponentActionType extends PartialComponentType {
 	title: ''
 }
 
-interface ComponentIconType extends PartialComponentType {
-	format: ColumnFormats.icon
-	renderProps: RenderPropsIcon | RenderPropsIconKey | RenderPropsIconUrl
-}
-
 interface ComponentColoredDotType extends PartialComponentType {
 	format: ColumnFormats.coloredDot
 	renderProps: {

diff --git a/src/components/Table/utils.tsx b/src/components/Table/utils.tsx
@@ -97,20 +97,22 @@ export function processData<TableData extends DataId>(
 		} as ProcessedData<TableData>
 
 		columns.forEach(col => {
-			const { dataIndex } = col
+			const { dataIndex, format } = col
 
-			if (isJSONPath(dataIndex)) {
-				const value = JSONPath({
-					json: item,
-					path: dataIndex
-				})
+			const value = JSONPath({
+				json: item,
+				path: `$.${dataIndex}`
+			})
 
-				if (value.length) {
-					partialData[dataIndex as keyof TableData] =
-						value.length <= 1 ? value[0] : value
-				}
-			} else {
-				partialData[dataIndex as keyof TableData] = item[dataIndex]
+			if (value.length) {
+				partialData[dataIndex as keyof TableData] = value[0]
+			}
+
+			//@ts-ignore
+			const pathArr: string[] = JSONPath.toPathArray(`$.${dataIndex}`)
+
+			if (pathArr && pathArr.length) {
+				partialData[pathArr[0] as keyof TableData] = item[pathArr[0]]
 			}
 		})
 
@@ -138,12 +140,23 @@ export function mapFilterKeys(columns: ColumnType[]) {
 		switch (column.type) {
 			case component:
 				switch (column.format) {
-					case icon:
 					case coloredDot:
 					case link:
 						keysArr.push(dataIndex)
 						break
 
+					case icon: {
+						const {
+							renderProps: { filterKey, iconKey }
+						} = column
+
+						if (iconKey && filterKey) {
+							keysArr.push(`${dataIndex}.${filterKey}`)
+						} else if (!iconKey) {
+							keysArr.push(dataIndex)
+						}
+					}
+
 					case tag:
 						keysArr.push([dataIndex, 'name'])
 						break