From e5021187e96b78b53203bd95d08d6818aea47d17 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Wed, 14 Jul 2021 15:10:31 +0200
Subject: New Ignite 7.0.6 app

---
 app/components/wallpaper/bg.png               | Bin 0 -> 56176 bytes
 app/components/wallpaper/bg@2x.png            | Bin 0 -> 203224 bytes
 app/components/wallpaper/wallpaper.presets.ts |  34 ++++++++++++++++++++++++++
 app/components/wallpaper/wallpaper.props.ts   |  19 ++++++++++++++
 app/components/wallpaper/wallpaper.story.tsx  |  16 ++++++++++++
 app/components/wallpaper/wallpaper.tsx        |  25 +++++++++++++++++++
 6 files changed, 94 insertions(+)
 create mode 100644 app/components/wallpaper/bg.png
 create mode 100644 app/components/wallpaper/bg@2x.png
 create mode 100644 app/components/wallpaper/wallpaper.presets.ts
 create mode 100644 app/components/wallpaper/wallpaper.props.ts
 create mode 100644 app/components/wallpaper/wallpaper.story.tsx
 create mode 100644 app/components/wallpaper/wallpaper.tsx

(limited to 'app/components/wallpaper')

diff --git a/app/components/wallpaper/bg.png b/app/components/wallpaper/bg.png
new file mode 100644
index 0000000..641838e
Binary files /dev/null and b/app/components/wallpaper/bg.png differ
diff --git a/app/components/wallpaper/bg@2x.png b/app/components/wallpaper/bg@2x.png
new file mode 100644
index 0000000..3ae8396
Binary files /dev/null and b/app/components/wallpaper/bg@2x.png differ
diff --git a/app/components/wallpaper/wallpaper.presets.ts b/app/components/wallpaper/wallpaper.presets.ts
new file mode 100644
index 0000000..3885b8f
--- /dev/null
+++ b/app/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/components/wallpaper/wallpaper.props.ts b/app/components/wallpaper/wallpaper.props.ts
new file mode 100644
index 0000000..592bac9
--- /dev/null
+++ b/app/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/components/wallpaper/wallpaper.story.tsx b/app/components/wallpaper/wallpaper.story.tsx
new file mode 100644
index 0000000..8f5488a
--- /dev/null
+++ b/app/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/components/wallpaper/wallpaper.tsx b/app/components/wallpaper/wallpaper.tsx
new file mode 100644
index 0000000..ebba75a
--- /dev/null
+++ b/app/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 <Image source={source} style={styles} />
+}
-- 
cgit v1.2.3