revenge-mod/Revenge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[UI > Summary] Add animation (#29)

Browse source
This commit is contained in:
Jack 2023-03-04 17:33:00 -05:00 committed by GitHub
parent 6dff7f7119
commit dc5ad0ca1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/def.d.ts vendored
View file

@ -11,6 +11,7 @@ interface SummaryProps {
label: string; label: string;
icon?: string; icon?: string;
noPadding?: boolean; noPadding?: boolean;
noAnimation?: boolean;
children: JSX.Element | JSX.Element[]; children: JSX.Element | JSX.Element[];
} }

10
src/ui/components/Summary.tsx
View file

@ -3,10 +3,9 @@ import { Forms } from "@ui/components";
import { getAssetIDByName } from "@ui/assets"; import { getAssetIDByName } from "@ui/assets";
import { ReactNative as RN } from "@metro/common"; import { ReactNative as RN } from "@metro/common";
// TODO: Animated would be awesome
// TODO: Destructuring Forms doesn't work here. Why? // TODO: Destructuring Forms doesn't work here. Why?
export default function Summary({ label, icon, noPadding = false, children }: SummaryProps) { export default function Summary({ label, icon, noPadding = false, noAnimation = false, children }: SummaryProps) {
const [hidden, setHidden] = React.useState(true); const [hidden, setHidden] = React.useState(true);
return ( return (
@ -14,8 +13,11 @@ export default function Summary({ label, icon, noPadding = false, children }: Su
<Forms.FormRow <Forms.FormRow
label={label} label={label}
leading={icon && <Forms.FormRow.Icon source={getAssetIDByName(icon)} />} leading={icon && <Forms.FormRow.Icon source={getAssetIDByName(icon)} />}
trailing={<Forms.FormRow.Arrow style={{ transform: [{ rotate: `${hidden ? 180 : 90}deg` }] }} source={getAssetIDByName("down_arrow")} />} trailing={<Forms.FormRow.Arrow style={{ transform: [{ rotate: `${hidden ? 180 : 90}deg` }] }} />}
onPress={() => setHidden(!hidden)} onPress={() => {
setHidden(!hidden);
if (!noAnimation) RN.LayoutAnimation.configureNext(RN.LayoutAnimation.Presets.easeInEaseOut);
}}
/> />
{!hidden && <> {!hidden && <>
<Forms.FormDivider /> <Forms.FormDivider />