-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: allow diffing with CUSTOM_DIFF_FIELDS component
- Loading branch information
Showing
1 changed file
with
215 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,215 @@ | ||
import React from "react"; | ||
import { FieldProps } from "@rjsf/core"; | ||
import NumberFormat from "react-number-format"; | ||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons"; | ||
|
||
const showStringDiff = (id: string, oldData: string, newData: string) => ( | ||
<> | ||
<span id={id && `${id}-diffOld`} className="diffOld"> | ||
{oldData} | ||
</span> | ||
| ||
<FontAwesomeIcon size="lg" color="black" icon={faLongArrowAltRight} /> | ||
| ||
<span id={id && `${id}-diffNew`} className="diffNew"> | ||
{newData} | ||
</span> | ||
</> | ||
); | ||
|
||
const showStringAdded = (id: string, newData: string) => ( | ||
<> | ||
<span id={id && `${id}-diffNew`} className="diffNew"> | ||
{newData} | ||
</span> | ||
| ||
<FontAwesomeIcon size="lg" color="black" icon={faLongArrowAltRight} /> | ||
| ||
<span> | ||
<strong> | ||
<em>ADDED</em> | ||
</strong> | ||
</span> | ||
</> | ||
); | ||
|
||
const showStringRemoved = (id: string, oldData: string) => ( | ||
<> | ||
<span id={id && `${id}-diffOld`} className="diffOld"> | ||
{oldData} | ||
</span> | ||
| ||
<FontAwesomeIcon size="lg" color="black" icon={faLongArrowAltRight} /> | ||
| ||
<span> | ||
<strong> | ||
<em>REMOVED</em> | ||
</strong> | ||
</span> | ||
</> | ||
); | ||
|
||
const showNumberDiff = ( | ||
id: string, | ||
oldData: number, | ||
newData: number, | ||
isMoney: boolean | ||
) => ( | ||
<> | ||
<span id={id && `${id}-diffOld`} className="diffOld"> | ||
<NumberFormat | ||
thousandSeparator | ||
prefix={isMoney ? "$" : ""} | ||
id={id} | ||
displayType="text" | ||
value={oldData} | ||
/> | ||
</span> | ||
| ||
<FontAwesomeIcon size="lg" color="black" icon={faLongArrowAltRight} /> | ||
| ||
<span id={id && `${id}-diffNew`} className="diffNew"> | ||
<NumberFormat | ||
thousandSeparator | ||
prefix={isMoney ? "$" : ""} | ||
id={id} | ||
displayType="text" | ||
value={newData} | ||
/> | ||
</span> | ||
</> | ||
); | ||
|
||
const showNumberAdded = (id: string, newData: number, isMoney: boolean) => ( | ||
<> | ||
<span id={id && `${id}-diffNew`} className="diffNew"> | ||
<NumberFormat | ||
thousandSeparator | ||
prefix={isMoney ? "$" : ""} | ||
id={id} | ||
displayType="text" | ||
value={newData} | ||
/> | ||
</span> | ||
| ||
<FontAwesomeIcon size="lg" color="black" icon={faLongArrowAltRight} /> | ||
| ||
<span> | ||
<strong> | ||
<em>ADDED</em> | ||
</strong> | ||
</span> | ||
</> | ||
); | ||
|
||
const showNumberRemoved = (id: string, oldData: number, isMoney: boolean) => ( | ||
<> | ||
<span id={id && `${id}-diffOld`} className="diffOld"> | ||
<NumberFormat | ||
thousandSeparator | ||
prefix={isMoney ? "$" : ""} | ||
id={id} | ||
displayType="text" | ||
value={oldData} | ||
/> | ||
</span> | ||
| ||
<span> | ||
<strong> | ||
<em>REMOVED</em> | ||
</strong> | ||
</span> | ||
</> | ||
); | ||
|
||
const CUSTOM_DIFF_FIELDS: Record< | ||
string, | ||
React.FunctionComponent<FieldProps> | ||
> = { | ||
StringField: (props) => { | ||
const { idSchema, formData, formContext } = props; | ||
const id = idSchema?.$id; | ||
const previousValue = formContext?.oldData?.[props.name]; | ||
|
||
if (previousValue && formData) { | ||
return showStringDiff(id, previousValue, formData); | ||
} else if ( | ||
!previousValue && | ||
formData && | ||
formContext.operation === "CREATE" | ||
) { | ||
return showStringAdded(id, formData); | ||
} else if ( | ||
formContext.operation === "ARCHIVE" || | ||
(!formData && previousValue) | ||
) { | ||
return showStringRemoved(id, previousValue); | ||
} else { | ||
return <>DISPLAY ERROR</>; | ||
} | ||
}, | ||
NumberField: (props) => { | ||
const { idSchema, formData, formContext, uiSchema } = props; | ||
const id = idSchema?.$id; | ||
const previousValue = formContext?.oldData?.[props.name]; | ||
|
||
if (uiSchema["ui:options"]) { | ||
if (previousValue && formData && formContext.operation === "UPDATE") { | ||
return showStringDiff( | ||
id, | ||
formContext?.oldUiSchema?.[props.name]?.["ui:options"]?.text, | ||
uiSchema["ui:options"].text as string | ||
); | ||
} else if ( | ||
!previousValue && | ||
formData && | ||
formContext.operation === "CREATE" | ||
) { | ||
return showStringAdded(id, uiSchema["ui:options"].text as string); | ||
} else if ( | ||
formContext.operation === "ARCHIVE" || | ||
(!formData && previousValue) | ||
) { | ||
return showStringRemoved( | ||
id, | ||
formContext?.oldUiSchema?.[props.name]?.["ui:options"]?.text | ||
); | ||
} else { | ||
return <>DISPLAY ERROR</>; | ||
} | ||
} else { | ||
if (previousValue && formData && formContext.operation === "UPDATE") { | ||
return showNumberDiff( | ||
id, | ||
formContext?.oldData?.[props.name], | ||
formData, | ||
uiSchema?.["ui:widget"] === "MoneyWidget" | ||
); | ||
} else if ( | ||
!previousValue && | ||
formData && | ||
formContext.operation === "CREATE" | ||
) { | ||
return showNumberAdded( | ||
id, | ||
formData, | ||
uiSchema?.["ui:widget"] === "MoneyWidget" | ||
); | ||
} else if ( | ||
formContext.operation === "ARCHIVE" || | ||
(!formData && previousValue) | ||
) { | ||
return showNumberRemoved( | ||
id, | ||
formContext?.oldData?.[props.name], | ||
uiSchema?.["ui:widget"] === "MoneyWidget" | ||
); | ||
} else { | ||
return <>DISPLAY ERROR</>; | ||
} | ||
} | ||
}, | ||
}; | ||
|
||
export default CUSTOM_DIFF_FIELDS; |