diff options
author | Kirill Rogovoy <[email protected]> | 2021-07-20 21:24:52 +0300 |
---|---|---|
committer | Kirill Rogovoy <[email protected]> | 2021-07-20 21:24:52 +0300 |
commit | 5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb (patch) | |
tree | 273dfc086444533d86d580961c92ba8d14781a67 /app_expo/components/wallpaper | |
parent | f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 (diff) |
WIP
Diffstat (limited to 'app_expo/components/wallpaper')
-rw-r--r-- | app_expo/components/wallpaper/wallpaper.presets.ts | 34 | ||||
-rw-r--r-- | app_expo/components/wallpaper/wallpaper.props.ts | 19 | ||||
-rw-r--r-- | app_expo/components/wallpaper/wallpaper.story.tsx | 16 | ||||
-rw-r--r-- | app_expo/components/wallpaper/wallpaper.tsx | 25 |
4 files changed, 94 insertions, 0 deletions
diff --git a/app_expo/components/wallpaper/wallpaper.presets.ts b/app_expo/components/wallpaper/wallpaper.presets.ts new file mode 100644 index 0000000..148ad5c --- /dev/null +++ b/app_expo/components/wallpaper/wallpaper.presets.ts @@ -0,0 +1,34 @@ +import { ImageStyle } from 'react-native' + +/** + * All wallpaper will start off looking like this. + */ +const BASE: ImageStyle = { + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, +} + +/** + * All the variations of wallpaper styling within the app. + * + * You want to customize these to whatever you need in your app. + */ +export const presets = { + /** + * The default wallpaper styles. + */ + stretch: { + ...BASE, + resizeMode: 'stretch', + width: null, // Have to set these to null because android ¯\_(ツ)_/¯ + height: null, + } as ImageStyle, +} + +/** + * A list of preset names. + */ +export type WallpaperPresets = keyof typeof presets diff --git a/app_expo/components/wallpaper/wallpaper.props.ts b/app_expo/components/wallpaper/wallpaper.props.ts new file mode 100644 index 0000000..9d97f12 --- /dev/null +++ b/app_expo/components/wallpaper/wallpaper.props.ts @@ -0,0 +1,19 @@ +import { ImageStyle, StyleProp } from 'react-native' +import { WallpaperPresets } from './wallpaper.presets' + +export interface WallpaperProps { + /** + * An optional style override useful for padding & margin. + */ + style?: StyleProp<ImageStyle> + + /** + * An optional background image to override the default image. + */ + backgroundImage?: string + + /** + * One of the different types of wallpaper presets. + */ + preset?: WallpaperPresets +} diff --git a/app_expo/components/wallpaper/wallpaper.story.tsx b/app_expo/components/wallpaper/wallpaper.story.tsx new file mode 100644 index 0000000..14a5f62 --- /dev/null +++ b/app_expo/components/wallpaper/wallpaper.story.tsx @@ -0,0 +1,16 @@ +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Wallpaper } from './wallpaper' + +declare let module + +storiesOf('Wallpaper', module) + .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) + .add('Style Presets', () => ( + <Story> + <UseCase text="default/stretch" usage="Full screen wallpaper image."> + <Wallpaper /> + </UseCase> + </Story> + )) diff --git a/app_expo/components/wallpaper/wallpaper.tsx b/app_expo/components/wallpaper/wallpaper.tsx new file mode 100644 index 0000000..f5e24f1 --- /dev/null +++ b/app_expo/components/wallpaper/wallpaper.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import { AutoImage as Image } from '../auto-image/auto-image' +import { presets } from './wallpaper.presets' +import { WallpaperProps } from './wallpaper.props' + +//const defaultImage = require("./bg.png") + +/** + * For your text displaying needs. + * + * This component is a HOC over the built-in React Native one. + */ +export function Wallpaper(props: WallpaperProps) { + // grab the props + const { preset = 'stretch', style: styleOverride, backgroundImage } = props + + // assemble the style + const presetToUse = presets[preset] || presets.stretch + const styles = [presetToUse, styleOverride] + + // figure out which image to use + //const source = backgroundImage || defaultImage + + return null //<Image source={source} style={styles} /> +} |