summaryrefslogtreecommitdiff
path: root/app_expo/components/wallpaper
diff options
context:
space:
mode:
authorKirill Rogovoy <[email protected]>2021-07-20 21:24:52 +0300
committerKirill Rogovoy <[email protected]>2021-07-20 21:24:52 +0300
commit5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb (patch)
tree273dfc086444533d86d580961c92ba8d14781a67 /app_expo/components/wallpaper
parentf0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 (diff)
WIP
Diffstat (limited to 'app_expo/components/wallpaper')
-rw-r--r--app_expo/components/wallpaper/wallpaper.presets.ts34
-rw-r--r--app_expo/components/wallpaper/wallpaper.props.ts19
-rw-r--r--app_expo/components/wallpaper/wallpaper.story.tsx16
-rw-r--r--app_expo/components/wallpaper/wallpaper.tsx25
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} />
+}