karaolidis/terminally-online
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix layout bugs

Browse Source 
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
Nick Karaolidis
2023-07-22 12:28:02 +03:00
parent a4726eb89a
commit fa0a89f324
25 changed files with 561 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/contexts/dimensions.tsx
View File

@@ -11,17 +11,22 @@ import { Dimensions, ScaledSize } from 'react-native';
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;
enum ORIENTATION {
PORTRAIT = 'portrait',
LANDSCAPE = 'landscape',
}
interface ScaleFunctions {
horizontalScale: (size: number) => number;
verticalScale: (size: number) => number;
moderateScale: (size: number, factor?: number) => number;
moderateHorizontalScale: (size: number, factor?: number) => number;
moderateVerticalScale: (size: number, factor?: number) => number;
}
interface DimensionsContext {
orientation: 'portrait' | 'landscape';
orientation: ORIENTATION;
dimensions: ScaledSize;
responsive: ScaleFunctions;
fixed: ScaleFunctions;
}
const createScaleFunctions = (dimensionsIn: ScaledSize) => {
@@ -29,10 +34,17 @@ const createScaleFunctions = (dimensionsIn: ScaledSize) => {
(dimensionsIn.width / guidelineBaseWidth) * size;
const verticalScale = (size: number) =>
(dimensionsIn.height / guidelineBaseHeight) * size;
const moderateScale = (size: number, factor = 0.5) =>
const moderateHorizontalScale = (size: number, factor = 0.5) =>
size + (horizontalScale(size) - size) * factor;
const moderateVerticalScale = (size: number, factor = 0.5) =>
size + (verticalScale(size) - size) * factor;
return { horizontalScale, verticalScale, moderateScale };
return {
horizontalScale,
verticalScale,
moderateHorizontalScale,
moderateVerticalScale,
};
};
const DimensionsContext = createContext<DimensionsContext | undefined>(
@@ -41,22 +53,14 @@ const DimensionsContext = createContext<DimensionsContext | undefined>(
const DimensionsProvider = ({ children }: { children: ReactNode }) => {
const [dimensions, setDimensions] = useState(Dimensions.get('window'));
const orientation =
dimensions.width > dimensions.height ? 'landscape' : 'portrait';
const initialDimensions = useMemo(() => {
if (orientation === 'landscape') {
return {
width: dimensions.height,
height: dimensions.width,
} as ScaledSize;
}
return dimensions;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const orientation = useMemo(() => {
return dimensions.width > dimensions.height
? ORIENTATION.LANDSCAPE
: ORIENTATION.PORTRAIT;
}, [dimensions]);
const responsiveScale = createScaleFunctions(dimensions);
const fixedScale = createScaleFunctions(initialDimensions);
useEffect(() => {
const onChange = ({ window }: { window: ScaledSize }) => {
@@ -76,7 +80,6 @@ const DimensionsProvider = ({ children }: { children: ReactNode }) => {
orientation,
dimensions,
responsive: responsiveScale,
fixed: fixedScale,
}}>
{children}
</DimensionsContext.Provider>
@@ -91,4 +94,4 @@ const useDimensions = (): DimensionsContext => {
return context;
};
export { DimensionsProvider, useDimensions };
export { ORIENTATION, DimensionsProvider, useDimensions };