From 5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb Mon Sep 17 00:00:00 2001
From: Kirill Rogovoy <kirill@rogovoy.me>
Date: Tue, 20 Jul 2021 21:24:52 +0300
Subject: WIP

---
 app_expo/components/wallpaper/wallpaper.presets.ts | 34 ++++++++++++++++++++++
 app_expo/components/wallpaper/wallpaper.props.ts   | 19 ++++++++++++
 app_expo/components/wallpaper/wallpaper.story.tsx  | 16 ++++++++++
 app_expo/components/wallpaper/wallpaper.tsx        | 25 ++++++++++++++++
 4 files changed, 94 insertions(+)
 create mode 100644 app_expo/components/wallpaper/wallpaper.presets.ts
 create mode 100644 app_expo/components/wallpaper/wallpaper.props.ts
 create mode 100644 app_expo/components/wallpaper/wallpaper.story.tsx
 create mode 100644 app_expo/components/wallpaper/wallpaper.tsx

(limited to 'app_expo/components/wallpaper')

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} />
+}
-- 
cgit v1.2.3