summaryrefslogtreecommitdiff
path: root/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'app/components')
-rw-r--r--app/components/auto-image/auto-image.story.tsx26
-rw-r--r--app/components/auto-image/auto-image.tsx6
-rw-r--r--app/components/bullet-item/bullet-item.tsx16
-rw-r--r--app/components/button/button.presets.ts16
-rw-r--r--app/components/button/button.props.ts11
-rw-r--r--app/components/button/button.story.tsx44
-rw-r--r--app/components/button/button.tsx12
-rw-r--r--app/components/checkbox/checkbox.props.ts4
-rw-r--r--app/components/checkbox/checkbox.story.tsx45
-rw-r--r--app/components/checkbox/checkbox.tsx33
-rw-r--r--app/components/form-row/form-row.presets.ts4
-rw-r--r--app/components/form-row/form-row.props.tsx6
-rw-r--r--app/components/form-row/form-row.story.tsx46
-rw-r--r--app/components/form-row/form-row.tsx8
-rw-r--r--app/components/graph-ui/graph-ui.story.tsx14
-rw-r--r--app/components/graph-ui/graph-ui.tsx32
-rw-r--r--app/components/graph/graph.story.tsx14
-rw-r--r--app/components/graph/graph.tsx318
-rw-r--r--app/components/graph/graphgood.tsx155
-rw-r--r--app/components/header/header.props.ts6
-rw-r--r--app/components/header/header.story.tsx20
-rw-r--r--app/components/header/header.tsx28
-rw-r--r--app/components/icon/icon.props.ts4
-rw-r--r--app/components/icon/icon.story.tsx12
-rw-r--r--app/components/icon/icon.tsx12
-rw-r--r--app/components/icon/icons/index.ts4
-rw-r--r--app/components/index.ts32
-rw-r--r--app/components/local-button/local-button.story.tsx14
-rw-r--r--app/components/local-button/local-button.tsx43
-rw-r--r--app/components/local/local.story.tsx14
-rw-r--r--app/components/local/local.tsx34
-rw-r--r--app/components/screen/screen.presets.ts20
-rw-r--r--app/components/screen/screen.props.ts10
-rw-r--r--app/components/screen/screen.tsx42
-rw-r--r--app/components/switch/switch.props.ts2
-rw-r--r--app/components/switch/switch.story.tsx53
-rw-r--r--app/components/switch/switch.tsx25
-rw-r--r--app/components/text-field/text-field.story.tsx69
-rw-r--r--app/components/text-field/text-field.tsx23
-rw-r--r--app/components/text/text.presets.ts8
-rw-r--r--app/components/text/text.props.ts8
-rw-r--r--app/components/text/text.story.tsx39
-rw-r--r--app/components/text/text.tsx20
-rw-r--r--app/components/tweaks/tweaks.story.tsx14
-rw-r--r--app/components/tweaks/tweaks.tsx257
-rw-r--r--app/components/wallpaper/wallpaper.presets.ts6
-rw-r--r--app/components/wallpaper/wallpaper.props.ts4
-rw-r--r--app/components/wallpaper/wallpaper.story.tsx12
-rw-r--r--app/components/wallpaper/wallpaper.tsx12
49 files changed, 955 insertions, 702 deletions
diff --git a/app/components/auto-image/auto-image.story.tsx b/app/components/auto-image/auto-image.story.tsx
index f7ecc86..76e9dab 100644
--- a/app/components/auto-image/auto-image.story.tsx
+++ b/app/components/auto-image/auto-image.story.tsx
@@ -1,31 +1,37 @@
/* eslint-disable */
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { AutoImage } from "./auto-image"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { AutoImage } from './auto-image'
declare let module
-const bowser = require("../../screens/welcome/bowser.png")
-const morty = { uri: "https://rickandmortyapi.com/api/character/avatar/2.jpeg" }
+const bowser = require('../../screens/welcome/bowser.png')
+const morty = { uri: 'https://rickandmortyapi.com/api/character/avatar/2.jpeg' }
-storiesOf("AutoImage", module)
+storiesOf('AutoImage', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Style Presets", () => (
+ .add('Style Presets', () => (
<Story>
<UseCase text="With require()">
<AutoImage source={bowser} />
<AutoImage source={bowser} style={{ width: 150 }} />
<AutoImage source={bowser} style={{ width: 150, height: 150 }} />
<AutoImage source={bowser} style={{ height: 150 }} />
- <AutoImage source={bowser} style={{ height: 150, resizeMode: "contain" }} />
+ <AutoImage
+ source={bowser}
+ style={{ height: 150, resizeMode: 'contain' }}
+ />
</UseCase>
<UseCase text="With URL">
<AutoImage source={morty} />
<AutoImage source={morty} style={{ width: 150 }} />
<AutoImage source={morty} style={{ width: 150, height: 150 }} />
<AutoImage source={morty} style={{ height: 150 }} />
- <AutoImage source={morty} style={{ height: 150, resizeMode: "contain" }} />
+ <AutoImage
+ source={morty}
+ style={{ height: 150, resizeMode: 'contain' }}
+ />
</UseCase>
</Story>
))
diff --git a/app/components/auto-image/auto-image.tsx b/app/components/auto-image/auto-image.tsx
index 39d71ca..a8bfe37 100644
--- a/app/components/auto-image/auto-image.tsx
+++ b/app/components/auto-image/auto-image.tsx
@@ -1,10 +1,10 @@
-import React, { useLayoutEffect, useState } from "react"
+import React, { useLayoutEffect, useState } from 'react'
import {
Image as RNImage,
ImageProps as DefaultImageProps,
ImageURISource,
Platform,
-} from "react-native"
+} from 'react-native'
type ImageProps = DefaultImageProps & {
source: ImageURISource
@@ -31,7 +31,7 @@ export function AutoImage(props: ImageProps) {
RNImage.getSize(props.source.uri as any, (width, height) => {
setImageSize({ width, height })
})
- } else if (Platform.OS === "web") {
+ } else if (Platform.OS === 'web') {
// web requires a different method to get it's size
RNImage.getSize(props.source as any, (width, height) => {
setImageSize({ width, height })
diff --git a/app/components/bullet-item/bullet-item.tsx b/app/components/bullet-item/bullet-item.tsx
index d999e10..f6b2f17 100644
--- a/app/components/bullet-item/bullet-item.tsx
+++ b/app/components/bullet-item/bullet-item.tsx
@@ -1,15 +1,15 @@
-import * as React from "react"
-import { View, ViewStyle, ImageStyle, TextStyle } from "react-native"
-import { Text } from "../text/text"
-import { Icon } from "../icon/icon"
-import { spacing, typography } from "../../theme"
+import * as React from 'react'
+import { View, ViewStyle, ImageStyle, TextStyle } from 'react-native'
+import { Text } from '../text/text'
+import { Icon } from '../icon/icon'
+import { spacing, typography } from '../../theme'
const BULLET_ITEM: ViewStyle = {
- flexDirection: "row",
+ flexDirection: 'row',
marginTop: spacing[4],
paddingBottom: spacing[4],
borderBottomWidth: 1,
- borderBottomColor: "#3A3048",
+ borderBottomColor: '#3A3048',
}
const BULLET_CONTAINER: ViewStyle = {
marginRight: spacing[4] - 1,
@@ -22,7 +22,7 @@ const BULLET: ImageStyle = {
const BULLET_TEXT: TextStyle = {
flex: 1,
fontFamily: typography.primary,
- color: "#BAB6C8",
+ color: '#BAB6C8',
fontSize: 15,
lineHeight: 22,
}
diff --git a/app/components/button/button.presets.ts b/app/components/button/button.presets.ts
index b140fd2..bc0ad3f 100644
--- a/app/components/button/button.presets.ts
+++ b/app/components/button/button.presets.ts
@@ -1,5 +1,5 @@
-import { ViewStyle, TextStyle } from "react-native"
-import { color, spacing } from "../../theme"
+import { ViewStyle, TextStyle } from 'react-native'
+import { color, spacing } from '../../theme'
/**
* All text will start off looking like this.
@@ -8,8 +8,8 @@ const BASE_VIEW: ViewStyle = {
paddingVertical: spacing[2],
paddingHorizontal: spacing[2],
borderRadius: 4,
- justifyContent: "center",
- alignItems: "center",
+ justifyContent: 'center',
+ alignItems: 'center',
}
const BASE_TEXT: TextStyle = {
@@ -34,12 +34,16 @@ export const viewPresets: Record<string, ViewStyle> = {
...BASE_VIEW,
paddingHorizontal: 0,
paddingVertical: 0,
- alignItems: "flex-start",
+ alignItems: 'flex-start',
} as ViewStyle,
}
export const textPresets: Record<ButtonPresetNames, TextStyle> = {
- primary: { ...BASE_TEXT, fontSize: 9, color: color.palette.white } as TextStyle,
+ primary: {
+ ...BASE_TEXT,
+ fontSize: 9,
+ color: color.palette.white,
+ } as TextStyle,
link: {
...BASE_TEXT,
color: color.text,
diff --git a/app/components/button/button.props.ts b/app/components/button/button.props.ts
index 1377a7e..5f26136 100644
--- a/app/components/button/button.props.ts
+++ b/app/components/button/button.props.ts
@@ -1,6 +1,11 @@
-import { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native"
-import { ButtonPresetNames } from "./button.presets"
-import { TxKeyPath } from "../../i18n"
+import {
+ StyleProp,
+ TextStyle,
+ TouchableOpacityProps,
+ ViewStyle,
+} from 'react-native'
+import { ButtonPresetNames } from './button.presets'
+import { TxKeyPath } from '../../i18n'
export interface ButtonProps extends TouchableOpacityProps {
/**
diff --git a/app/components/button/button.story.tsx b/app/components/button/button.story.tsx
index 4861772..5dc21c1 100644
--- a/app/components/button/button.story.tsx
+++ b/app/components/button/button.story.tsx
@@ -1,30 +1,48 @@
-import * as React from "react"
-import { ViewStyle, TextStyle, Alert } from "react-native"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Button } from "./button"
+import * as React from 'react'
+import { ViewStyle, TextStyle, Alert } from 'react-native'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Button } from './button'
declare let module
-const buttonStyleArray: ViewStyle[] = [{ paddingVertical: 100 }, { borderRadius: 0 }]
+const buttonStyleArray: ViewStyle[] = [
+ { paddingVertical: 100 },
+ { borderRadius: 0 },
+]
-const buttonTextStyleArray: TextStyle[] = [{ fontSize: 20 }, { color: "#a511dc" }]
+const buttonTextStyleArray: TextStyle[] = [
+ { fontSize: 20 },
+ { color: '#a511dc' },
+]
-storiesOf("Button", module)
+storiesOf('Button', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Style Presets", () => (
+ .add('Style Presets', () => (
<Story>
<UseCase text="Primary" usage="The primary button.">
- <Button text="Click It" preset="primary" onPress={() => Alert.alert("pressed")} />
+ <Button
+ text="Click It"
+ preset="primary"
+ onPress={() => Alert.alert('pressed')}
+ />
</UseCase>
- <UseCase text="Disabled" usage="The disabled behaviour of the primary button.">
- <Button text="Click It" preset="primary" onPress={() => Alert.alert("pressed")} disabled />
+ <UseCase
+ text="Disabled"
+ usage="The disabled behaviour of the primary button."
+ >
+ <Button
+ text="Click It"
+ preset="primary"
+ onPress={() => Alert.alert('pressed')}
+ disabled
+ />
</UseCase>
<UseCase text="Array Style" usage="Button with array style">
<Button
text="Click It"
preset="primary"
- onPress={() => Alert.alert("pressed")}
+ onPress={() => Alert.alert('pressed')}
style={buttonStyleArray}
textStyle={buttonTextStyleArray}
/>
diff --git a/app/components/button/button.tsx b/app/components/button/button.tsx
index a5662ff..03b8f85 100644
--- a/app/components/button/button.tsx
+++ b/app/components/button/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { TouchableOpacity } from "react-native"
-import { Text } from "../text/text"
-import { viewPresets, textPresets } from "./button.presets"
-import { ButtonProps } from "./button.props"
+import * as React from 'react'
+import { TouchableOpacity } from 'react-native'
+import { Text } from '../text/text'
+import { viewPresets, textPresets } from './button.presets'
+import { ButtonProps } from './button.props'
/**
* For your text displaying needs.
@@ -12,7 +12,7 @@ import { ButtonProps } from "./button.props"
export function Button(props: ButtonProps) {
// grab the props
const {
- preset = "primary",
+ preset = 'primary',
tx,
text,
style: styleOverride,
diff --git a/app/components/checkbox/checkbox.props.ts b/app/components/checkbox/checkbox.props.ts
index 01a13d0..4a212e3 100644
--- a/app/components/checkbox/checkbox.props.ts
+++ b/app/components/checkbox/checkbox.props.ts
@@ -1,5 +1,5 @@
-import { StyleProp, ViewStyle } from "react-native"
-import { TxKeyPath } from "../../i18n"
+import { StyleProp, ViewStyle } from 'react-native'
+import { TxKeyPath } from '../../i18n'
export interface CheckboxProps {
/**
diff --git a/app/components/checkbox/checkbox.story.tsx b/app/components/checkbox/checkbox.story.tsx
index f8d80d8..9d1429a 100644
--- a/app/components/checkbox/checkbox.story.tsx
+++ b/app/components/checkbox/checkbox.story.tsx
@@ -1,26 +1,37 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react-native/no-color-literals */
-import * as React from "react"
-import { View, ViewStyle } from "react-native"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Checkbox } from "./checkbox"
-import { Toggle } from "react-powerplug"
+import * as React from 'react'
+import { View, ViewStyle } from 'react-native'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Checkbox } from './checkbox'
+import { Toggle } from 'react-powerplug'
declare let module
-const arrayStyle: ViewStyle[] = [{ paddingVertical: 40 }, { alignSelf: "flex-end" }]
-const arrayOutlineStyle: ViewStyle[] = [{ borderColor: "#b443c9" }, { borderWidth: 25 }]
-const arrayFillStyle: ViewStyle[] = [{ backgroundColor: "#55e0ff" }]
+const arrayStyle: ViewStyle[] = [
+ { paddingVertical: 40 },
+ { alignSelf: 'flex-end' },
+]
+const arrayOutlineStyle: ViewStyle[] = [
+ { borderColor: '#b443c9' },
+ { borderWidth: 25 },
+]
+const arrayFillStyle: ViewStyle[] = [{ backgroundColor: '#55e0ff' }]
-storiesOf("Checkbox", module)
+storiesOf('Checkbox', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Behaviour", () => (
+ .add('Behaviour', () => (
<Story>
- <UseCase text="The Checkbox" usage="Use the checkbox to represent on/off states.">
+ <UseCase
+ text="The Checkbox"
+ usage="Use the checkbox to represent on/off states."
+ >
<Toggle initial={false}>
- {({ on, toggle }) => <Checkbox value={on} onToggle={toggle} text="Toggle me" />}
+ {({ on, toggle }) => (
+ <Checkbox value={on} onToggle={toggle} text="Toggle me" />
+ )}
</Toggle>
</UseCase>
<UseCase text="value = true" usage="This is permanently on.">
@@ -31,7 +42,7 @@ storiesOf("Checkbox", module)
</UseCase>
</Story>
))
- .add("Styling", () => (
+ .add('Styling', () => (
<Story>
<UseCase text="multiline = true" usage="For really really long text">
<Toggle initial={false}>
@@ -55,7 +66,7 @@ storiesOf("Checkbox", module)
text="Hello there!"
value={on}
style={{
- backgroundColor: "purple",
+ backgroundColor: 'purple',
marginLeft: 40,
paddingVertical: 30,
paddingLeft: 60,
@@ -74,7 +85,7 @@ storiesOf("Checkbox", module)
text="Outline is the box frame"
value={on}
outlineStyle={{
- borderColor: "green",
+ borderColor: 'green',
borderRadius: 10,
borderWidth: 4,
width: 60,
@@ -93,7 +104,7 @@ storiesOf("Checkbox", module)
<Checkbox
text="Fill er up"
value={on}
- fillStyle={{ backgroundColor: "red", borderRadius: 8 }}
+ fillStyle={{ backgroundColor: 'red', borderRadius: 8 }}
onToggle={toggle}
/>
</View>
diff --git a/app/components/checkbox/checkbox.tsx b/app/components/checkbox/checkbox.tsx
index fc3992a..d788114 100644
--- a/app/components/checkbox/checkbox.tsx
+++ b/app/components/checkbox/checkbox.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import { TextStyle, TouchableOpacity, View, ViewStyle } from "react-native"
-import { Text } from "../text/text"
-import { color, spacing } from "../../theme"
-import { CheckboxProps } from "./checkbox.props"
+import * as React from 'react'
+import { TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
+import { Text } from '../text/text'
+import { color, spacing } from '../../theme'
+import { CheckboxProps } from './checkbox.props'
const ROOT: ViewStyle = {
- flexDirection: "row",
+ flexDirection: 'row',
paddingVertical: spacing[1],
- alignSelf: "flex-start",
+ alignSelf: 'flex-start',
}
const DIMENSIONS = { width: 16, height: 16 }
@@ -15,8 +15,8 @@ const DIMENSIONS = { width: 16, height: 16 }
const OUTLINE: ViewStyle = {
...DIMENSIONS,
marginTop: 2, // finicky and will depend on font/line-height/baseline/weather
- justifyContent: "center",
- alignItems: "center",
+ justifyContent: 'center',
+ alignItems: 'center',
borderWidth: 1,
borderColor: color.primaryDarker,
borderRadius: 1,
@@ -37,7 +37,9 @@ export function Checkbox(props: CheckboxProps) {
const outlineStyle = [OUTLINE, props.outlineStyle]
const fillStyle = [FILL, props.fillStyle]
- const onPress = props.onToggle ? () => props.onToggle && props.onToggle(!props.value) : null
+ const onPress = props.onToggle
+ ? () => props.onToggle && props.onToggle(!props.value)
+ : null
return (
<TouchableOpacity
@@ -46,8 +48,15 @@ export function Checkbox(props: CheckboxProps) {
onPress={onPress}
style={rootStyle}
>
- <View style={outlineStyle}>{props.value && <View style={fillStyle} />}</View>
- <Text text={props.text} tx={props.tx} numberOfLines={numberOfLines} style={LABEL} />
+ <View style={outlineStyle}>
+ {props.value && <View style={fillStyle} />}
+ </View>
+ <Text
+ text={props.text}
+ tx={props.tx}
+ numberOfLines={numberOfLines}
+ style={LABEL}
+ />
</TouchableOpacity>
)
}
diff --git a/app/components/form-row/form-row.presets.ts b/app/components/form-row/form-row.presets.ts
index 7c10294..0c796c2 100644
--- a/app/components/form-row/form-row.presets.ts
+++ b/app/components/form-row/form-row.presets.ts
@@ -1,5 +1,5 @@
-import { ViewStyle } from "react-native"
-import { color, spacing } from "../../theme"
+import { ViewStyle } from 'react-native'
+import { color, spacing } from '../../theme'
/**
* The size of the border radius.
diff --git a/app/components/form-row/form-row.props.tsx b/app/components/form-row/form-row.props.tsx
index f010206..55b632e 100644
--- a/app/components/form-row/form-row.props.tsx
+++ b/app/components/form-row/form-row.props.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import { StyleProp, ViewStyle } from "react-native"
-import { FormRowPresets } from "./form-row.presets"
+import * as React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import { FormRowPresets } from './form-row.presets'
/**
* The properties you can pass to FormRow.
diff --git a/app/components/form-row/form-row.story.tsx b/app/components/form-row/form-row.story.tsx
index 509afbb..97e43a2 100644
--- a/app/components/form-row/form-row.story.tsx
+++ b/app/components/form-row/form-row.story.tsx
@@ -1,23 +1,23 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react-native/no-color-literals */
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Text, FormRow } from "../"
-import { color } from "../../theme/color"
-import { ViewStyle } from "react-native"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Text, FormRow } from '../'
+import { color } from '../../theme/color'
+import { ViewStyle } from 'react-native'
declare let module
const TEXT_STYLE_OVERRIDE = {
color: color.storybookTextColor,
}
-const arrayStyle: ViewStyle[] = [{ borderWidth: 5 }, { borderColor: "#32cd32" }]
+const arrayStyle: ViewStyle[] = [{ borderWidth: 5 }, { borderColor: '#32cd32' }]
-storiesOf("FormRow", module)
+storiesOf('FormRow', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Assembled", () => (
+ .add('Assembled', () => (
<Story>
<UseCase
text="Fully Assembled"
@@ -30,9 +30,10 @@ storiesOf("FormRow", module)
</FormRow>
<FormRow preset="middle">
<Text style={TEXT_STYLE_OVERRIDE}>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi officia quo rerum
- impedit asperiores hic ex quae, quam dolores vel odit doloribus, tempore atque deserunt
- possimus incidunt, obcaecati numquam officiis.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
+ officia quo rerum impedit asperiores hic ex quae, quam dolores vel
+ odit doloribus, tempore atque deserunt possimus incidunt, obcaecati
+ numquam officiis.
</Text>
</FormRow>
<FormRow preset="middle">
@@ -47,20 +48,25 @@ storiesOf("FormRow", module)
<UseCase text="Alternatives" usage="Less commonly used presets.">
<FormRow preset="clear">
<Text style={TEXT_STYLE_OVERRIDE}>
- My borders are still there, but they are clear. This causes the text to still align
- properly due to the box model of flexbox.
+ My borders are still there, but they are clear. This causes the text
+ to still align properly due to the box model of flexbox.
</Text>
</FormRow>
<FormRow preset="soloRound">
<Text style={TEXT_STYLE_OVERRIDE}>I'm round</Text>
</FormRow>
- <FormRow preset="soloStraight" style={{ marginTop: 10, backgroundColor: "#ffe" }}>
- <Text style={TEXT_STYLE_OVERRIDE}>I'm square and have a custom style.</Text>
+ <FormRow
+ preset="soloStraight"
+ style={{ marginTop: 10, backgroundColor: '#ffe' }}
+ >
+ <Text style={TEXT_STYLE_OVERRIDE}>
+ I'm square and have a custom style.
+ </Text>
</FormRow>
</UseCase>
</Story>
))
- .add("Presets", () => (
+ .add('Presets', () => (
<Story>
<UseCase text="top" usage="The top of a form.">
<FormRow preset="top">
@@ -70,7 +76,9 @@ storiesOf("FormRow", module)
</UseCase>
<UseCase text="middle" usage="A row in the middle of a form.">
<FormRow preset="middle">
- <Text style={TEXT_STYLE_OVERRIDE}>No curves and empty at the bottom.</Text>
+ <Text style={TEXT_STYLE_OVERRIDE}>
+ No curves and empty at the bottom.
+ </Text>
</FormRow>
</UseCase>
<UseCase text="bottom" usage="The bottom of a form.">
@@ -96,7 +104,7 @@ storiesOf("FormRow", module)
</UseCase>
</Story>
))
- .add("Styling", () => (
+ .add('Styling', () => (
<Story>
<UseCase text="Style array" usage="Form row with an array of styles">
<FormRow preset="soloStraight" style={arrayStyle}>
diff --git a/app/components/form-row/form-row.tsx b/app/components/form-row/form-row.tsx
index 2045336..c6453bc 100644
--- a/app/components/form-row/form-row.tsx
+++ b/app/components/form-row/form-row.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { View } from "react-native"
-import { PRESETS } from "./form-row.presets"
-import { FormRowProps } from "./form-row.props"
+import * as React from 'react'
+import { View } from 'react-native'
+import { PRESETS } from './form-row.presets'
+import { FormRowProps } from './form-row.props'
/**
* A horizontal container component used to hold a row of a form.
diff --git a/app/components/graph-ui/graph-ui.story.tsx b/app/components/graph-ui/graph-ui.story.tsx
index 71151c8..7564c93 100644
--- a/app/components/graph-ui/graph-ui.story.tsx
+++ b/app/components/graph-ui/graph-ui.story.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { GraphUi } from "./graph-ui"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { GraphUi } from './graph-ui'
-storiesOf("GraphUi", module)
+storiesOf('GraphUi', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Style Presets", () => (
+ .add('Style Presets', () => (
<Story>
<UseCase text="Primary" usage="The primary.">
<GraphUi style={{ backgroundColor: color.error }} />
diff --git a/app/components/graph-ui/graph-ui.tsx b/app/components/graph-ui/graph-ui.tsx
index 9ea792a..36a675a 100644
--- a/app/components/graph-ui/graph-ui.tsx
+++ b/app/components/graph-ui/graph-ui.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { LocalButton, Text, Tweaks } from "../"
-import { flatten } from "ramda"
+import * as React from 'react'
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { LocalButton, Text, Tweaks } from '../'
+import { flatten } from 'ramda'
const CONTAINER: ViewStyle = {
- justifyContent: "center",
+ justifyContent: 'center',
}
const TEXT: TextStyle = {
@@ -20,8 +20,8 @@ export interface GraphUiProps {
* An optional style override useful for padding & margin.
*/
style?: StyleProp<ViewStyle>
- physics
- setPhysics
+ physics
+ setPhysics
}
/**
@@ -32,9 +32,17 @@ export const GraphUi = observer(function GraphUi(props: GraphUiProps) {
const styles = flatten([CONTAINER, style])
return (
- <View style={{height: "100%", width: "100%", borderStyle: "solid", borderWidth: 5,position:"relative"}}>
- <Tweaks physics={physics} setPhysics={setPhysics} />
- <LocalButton physics={physics} setPhysics={setPhysics}/>
+ <View
+ style={{
+ height: '100%',
+ width: '100%',
+ borderStyle: 'solid',
+ borderWidth: 5,
+ position: 'relative',
+ }}
+ >
+ <Tweaks physics={physics} setPhysics={setPhysics} />
+ <LocalButton physics={physics} setPhysics={setPhysics} />
</View>
)
})
diff --git a/app/components/graph/graph.story.tsx b/app/components/graph/graph.story.tsx
index e5385e6..3b094d9 100644
--- a/app/components/graph/graph.story.tsx
+++ b/app/components/graph/graph.story.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { Graph } from "./graph"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { Graph } from './graph'
-storiesOf("Graph", module)
+storiesOf('Graph', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Style Presets", () => (
+ .add('Style Presets', () => (
<Story>
<UseCase text="Primary" usage="The primary.">
<Graph style={{ backgroundColor: color.error }} />
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 5e68c3f..7b175a1 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -1,22 +1,27 @@
-import * as React from "react"
-import { useState, useEffect, useRef, useMemo, useCallback } from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
+import * as React from 'react'
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
//import data from "../../data/miserables.json"
//import genRandomTree from "../../data/randomdata";
//import gData from "../../data/rando.json"
-import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph"
-import * as d3 from "d3-force-3d"
+import {
+ ForceGraph2D,
+ ForceGraph3D,
+ ForceGraphVR,
+ ForceGraphAR,
+} from 'react-force-graph'
+import * as d3 from 'd3-force-3d'
//import * as three from "three"
-import SpriteText from "three-spritetext"
+import SpriteText from 'three-spritetext'
const CONTAINER: ViewStyle = {
- justifyContent: "center",
+ justifyContent: 'center',
}
const TEXT: TextStyle = {
@@ -35,16 +40,25 @@ export interface GraphProps {
setPhysics
nodeIds: string[]
threeDim
- setThreeDim
- local
- setLocal
+ setThreeDim
+ local
+ setLocal
}
/**
* Describe your component here
*/
export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
- const { style, physics, setPhysics, gData, threeDim, setThreeDim, local, setLocal } = props
+ const {
+ style,
+ physics,
+ setPhysics,
+ gData,
+ threeDim,
+ setThreeDim,
+ local,
+ setLocal,
+ } = props
const styles = flatten([CONTAINER, style])
const fgRef = useRef()
@@ -60,30 +74,30 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
const fg = fgRef.current
//fg.d3Force('center').strength(0.05);
if (physics.gravityOn) {
- fg.d3Force("x", d3.forceX().strength(physics.gravity))
- fg.d3Force("y", d3.forceY().strength(physics.gravity))
+ fg.d3Force('x', d3.forceX().strength(physics.gravity))
+ fg.d3Force('y', d3.forceY().strength(physics.gravity))
if (threeDim) {
if (physics.galaxy) {
- fg.d3Force("x", d3.forceX().strength(physics.gravity / 5))
- fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5))
+ fg.d3Force('x', d3.forceX().strength(physics.gravity / 5))
+ fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5))
} else {
- fg.d3Force("x", d3.forceX().strength(physics.gravity))
- fg.d3Force("z", d3.forceZ().strength(physics.gravity))
+ fg.d3Force('x', d3.forceX().strength(physics.gravity))
+ fg.d3Force('z', d3.forceZ().strength(physics.gravity))
}
} else {
- fg.d3Force("z", null)
+ fg.d3Force('z', null)
}
} else {
- fg.d3Force("x", null)
- fg.d3Force("y", null)
- threeDim ? fg.d3Force("z", null) : null
+ fg.d3Force('x', null)
+ fg.d3Force('y', null)
+ threeDim ? fg.d3Force('z', null) : null
}
- fg.d3Force("link").strength(physics.linkStrength)
- fg.d3Force("link").iterations(physics.linkIts)
+ fg.d3Force('link').strength(physics.linkStrength)
+ fg.d3Force('link').iterations(physics.linkIts)
physics.collision
- ? fg.d3Force("collide", d3.forceCollide().radius(20))
- : fg.d3Force("collide", null)
- fg.d3Force("charge").strength(physics.charge)
+ ? fg.d3Force('collide', d3.forceCollide().radius(20))
+ : fg.d3Force('collide', null)
+ fg.d3Force('charge').strength(physics.charge)
})
// For the expandable version of the graph
@@ -143,7 +157,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
}
const handleNodeHover = (node) => {
- console.log("hover")
+ console.log('hover')
if (!selectedNode) {
highlightNodes.clear()
highlightLinks.clear()
@@ -211,19 +225,21 @@ onLinkHover={handleLinkHover}
const getLocalGraphData = (node) => {
console.log(localGraphData)
- localGraphData.nodes.length ? setLocalGraphData({ nodes: [], links: [] }) : null
+ localGraphData.nodes.length
+ ? setLocalGraphData({ nodes: [], links: [] })
+ : null
let g = localGraphData
console.log(g.nodes)
if (!node.local) {
g = { nodes: [], links: [] }
- console.log("length is 0")
+ console.log('length is 0')
node.local = true //keep track of these boys
g.nodes.push(node) //only add the clicked node if its the first
}
node.links.length &&
node.links.forEach((neighborLink) => {
if (!neighborLink.local) {
- console.log("0")
+ console.log('0')
neighborLink.local = true
g.links.push(neighborLink)
console.log(neighborLink)
@@ -231,23 +247,23 @@ onLinkHover={handleLinkHover}
const sourceNode = gData.nodes[neighborLink.sourceIndex]
if (targetNode.id !== sourceNode.id) {
if (targetNode.id === node.id) {
- console.log("1. I am the target, the source is ")
+ console.log('1. I am the target, the source is ')
console.log(sourceNode)
if (!sourceNode.local) {
- console.log("2. The source is not local")
+ console.log('2. The source is not local')
sourceNode.local = true
g.nodes.push(sourceNode)
} else {
- console.log("2.5 The source is already local")
+ console.log('2.5 The source is already local')
}
} else {
- console.log("3. I am the source")
+ console.log('3. I am the source')
if (!targetNode.local) {
- console.log("4. The target is not local.")
+ console.log('4. The target is not local.')
targetNode.local = true
g.nodes.push(targetNode)
} else {
- console.log("The target is already local")
+ console.log('The target is already local')
}
}
}
@@ -257,7 +273,7 @@ onLinkHover={handleLinkHover}
}
const selectClick = (node, event) => {
- window.open('org-protocol://roam-node?node=' + node.id, '_self');
+ window.open('org-protocol://roam-node?node=' + node.id, '_self')
highlightNodes.clear()
highlightLinks.clear()
console.log(localGraphData)
@@ -275,11 +291,11 @@ onLinkHover={handleLinkHover}
setDoubleClick(event.timeStamp)
}
- useEffect(()=>{
- if(local && selectedNode) {
- getLocalGraphData(selectedNode)
- }
- }, [local])
+ useEffect(() => {
+ if (local && selectedNode) {
+ getLocalGraphData(selectedNode)
+ }
+ }, [local])
return (
<View style={style}>
{!threeDim ? (
@@ -293,39 +309,44 @@ onLinkHover={handleLinkHover}
!physics.colorful
? (node) => {
if (highlightNodes.size === 0) {
- return "rgb(100, 100, 100, 1)"
+ return 'rgb(100, 100, 100, 1)'
} else {
- return highlightNodes.has(node) ? "#a991f1" : "rgb(50, 50, 50, 0.5)"
+ return highlightNodes.has(node)
+ ? '#a991f1'
+ : 'rgb(50, 50, 50, 0.5)'
}
}
: (node) => {
- if (node.neighbors.length === 1 || node.neighbors.length === 2) {
+ if (
+ node.neighbors.length === 1 ||
+ node.neighbors.length === 2
+ ) {
return [
- "#ff665c",
- "#e69055",
- "#7bc275",
- "#4db5bd",
- "#FCCE7B",
- "#51afef",
- "#1f5582",
- "#C57BDB",
- "#a991f1",
- "#5cEfFF",
- "#6A8FBF",
+ '#ff665c',
+ '#e69055',
+ '#7bc275',
+ '#4db5bd',
+ '#FCCE7B',
+ '#51afef',
+ '#1f5582',
+ '#C57BDB',
+ '#a991f1',
+ '#5cEfFF',
+ '#6A8FBF',
][node.neighbors[0].index % 11]
} else {
return [
- "#ff665c",
- "#e69055",
- "#7bc275",
- "#4db5bd",
- "#FCCE7B",
- "#51afef",
- "#1f5582",
- "#C57BDB",
- "#a991f1",
- "#5cEfFF",
- "#6A8FBF",
+ '#ff665c',
+ '#e69055',
+ '#7bc275',
+ '#4db5bd',
+ '#FCCE7B',
+ '#51afef',
+ '#1f5582',
+ '#C57BDB',
+ '#a991f1',
+ '#5cEfFF',
+ '#6A8FBF',
][node.index % 11]
}
}
@@ -335,24 +356,26 @@ onLinkHover={handleLinkHover}
!physics.colorful
? (link) => {
if (highlightLinks.size === 0) {
- return "rgb(50, 50, 50, 0.8)"
+ return 'rgb(50, 50, 50, 0.8)'
} else {
- return highlightLinks.has(link) ? "#a991f1" : "rgb(50, 50, 50, 0.2)"
+ return highlightLinks.has(link)
+ ? '#a991f1'
+ : 'rgb(50, 50, 50, 0.2)'
}
}
: (link) =>
[
- "#ff665c",
- "#e69055",
- "#7bc275",
- "#4db5bd",
- "#FCCE7B",
- "#51afef",
- "#1f5582",
- "#C57BDB",
- "#a991f1",
- "#5cEfFF",
- "#6A8FBF",
+ '#ff665c',
+ '#e69055',
+ '#7bc275',
+ '#4db5bd',
+ '#FCCE7B',
+ '#51afef',
+ '#1f5582',
+ '#C57BDB',
+ '#a991f1',
+ '#5cEfFF',
+ '#6A8FBF',
][gData.nodes[link.sourceIndex].index % 11]
}
linkDirectionalParticles={physics.particles}
@@ -364,60 +387,70 @@ onLinkHover={handleLinkHover}
linkOpacity={physics.linkOpacity}
nodeRelSize={physics.nodeRel}
nodeVal={(node) => {
- return highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+ return highlightNodes.has(node)
+ ? node.neighbors.length + 5
+ : node.neighbors.length + 3
}}
linkDirectionalParticleWidth={physics.particleWidth}
nodeCanvasObject={(node, ctx, globalScale) => {
if (physics.labels) {
- if (globalScale > physics.labelScale || highlightNodes.has(node)) {
- const label = node.title.substring(0, Math.min(node.title.length, 30))
+ if (
+ globalScale > physics.labelScale ||
+ highlightNodes.has(node)
+ ) {
+ const label = node.title.substring(
+ 0,
+ Math.min(node.title.length, 30),
+ )
const fontSize = 12 / globalScale
ctx.font = `${fontSize}px Sans-Serif`
const textWidth = ctx.measureText(label).width
- const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) // some padding
+ const bckgDimensions = [textWidth * 1.1, fontSize].map(
+ (n) => n + fontSize * 0.5,
+ ) // some padding
const fadeFactor = Math.min(
(3 * (globalScale - physics.labelScale)) / physics.labelScale,
1,
)
ctx.fillStyle =
- "rgba(20, 20, 20, " +
+ 'rgba(20, 20, 20, ' +
(highlightNodes.size === 0
? 0.5 * fadeFactor
: highlightNodes.has(node)
? 0.5
: 0.15 * fadeFactor) +
- ")"
+ ')'
ctx.fillRect(
node.x - bckgDimensions[0] / 2,
node.y - bckgDimensions[1] / 2,
...bckgDimensions,
)
- ctx.textAlign = "center"
- ctx.textBaseline = "middle"
+ ctx.textAlign = 'center'
+ ctx.textBaseline = 'middle'
ctx.fillStyle =
- "rgb(255, 255, 255, " +
+ 'rgb(255, 255, 255, ' +
(highlightNodes.size === 0
? fadeFactor
: highlightNodes.has(node)
? 1
: 0.3 * fadeFactor) +
- ")"
+ ')'
ctx.fillText(label, node.x, node.y)
node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint
}
}
}}
- nodeCanvasObjectMode={() => "after"}
+ nodeCanvasObjectMode={() => 'after'}
onNodeHover={physics.hover ? handleNodeHover : null}
//onLinkHover={physics.hover ? handleLinkHover : null}
d3AlphaDecay={physics.alphaDecay}
d3AlphaMin={physics.alphaTarget}
d3VelocityDecay={physics.velocityDecay}
onBackgroundClick={handleBackgroundClick}
- backgroundColor={"#242730"}
+ backgroundColor={'#242730'}
/>
) : (
<ForceGraph3D
@@ -428,39 +461,44 @@ onLinkHover={handleLinkHover}
!physics.colorful
? (node) => {
if (highlightNodes.size === 0) {
- return "rgb(100, 100, 100, 1)"
+ return 'rgb(100, 100, 100, 1)'
} else {
- return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+ return highlightNodes.has(node)
+ ? 'purple'
+ : 'rgb(50, 50, 50, 0.5)'
}
}
: (node) => {
- if (node.neighbors.length === 1 || node.neighbors.length === 2) {
+ if (
+ node.neighbors.length === 1 ||
+ node.neighbors.length === 2
+ ) {
return [
- "#ff665c",
- "#e69055",
- "#7bc275",
- "#4db5bd",
- "#FCCE7B",
- "#51afef",
- "#1f5582",
- "#C57BDB",
- "#a991f1",
- "#5cEfFF",
- "#6A8FBF",
+ '#ff665c',
+ '#e69055',
+ '#7bc275',
+ '#4db5bd',
+ '#FCCE7B',
+ '#51afef',
+ '#1f5582',
+ '#C57BDB',
+ '#a991f1',
+ '#5cEfFF',
+ '#6A8FBF',
][node.neighbors[0].index % 11]
} else {
return [
- "#ff665c",
- "#e69055",
- "#7bc275",
- "#4db5bd",
- "#FCCE7B",
- "#51afef",
- "#1f5582",
- "#C57BDB",
- "#a991f1",
- "#5cEfFF",
- "#6A8FBF",
+ '#ff665c',
+ '#e69055',
+ '#7bc275',
+ '#4db5bd',
+ '#FCCE7B',
+ '#51afef',
+ '#1f5582',
+ '#C57BDB',
+ '#a991f1',
+ '#5cEfFF',
+ '#6A8FBF',
][node.index % 11]
}
}
@@ -470,24 +508,26 @@ onLinkHover={handleLinkHover}
!physics.colorful
? (link) => {
if (highlightLinks.size === 0) {
- return "rgb(50, 50, 50, 0.8)"
+ return 'rgb(50, 50, 50, 0.8)'
} else {
- return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+ return highlightLinks.has(link)
+ ? 'purple'
+ : 'rgb(50, 50, 50, 0.2)'
}
}
: (link) =>
[
- "#ff665c",
- "#e69055",
- "#7bc275",
- "#4db5bd",
- "#FCCE7B",
- "#51afef",
- "#1f5582",
- "#C57BDB",
- "#a991f1",
- "#5cEfFF",
- "#6A8FBF",
+ '#ff665c',
+ '#e69055',
+ '#7bc275',
+ '#4db5bd',
+ '#FCCE7B',
+ '#51afef',
+ '#1f5582',
+ '#C57BDB',
+ '#a991f1',
+ '#5cEfFF',
+ '#6A8FBF',
][gData.nodes[link.sourceIndex].index % 11]
}
linkDirectionalParticles={physics.particles}
@@ -498,7 +538,9 @@ onLinkHover={handleLinkHover}
linkOpacity={physics.linkOpacity}
nodeRelSize={physics.nodeRel}
nodeVal={(node) =>
- highlightNodes.has(node) ? node.neighbors.length * 3 : node.neighbors.length * 2
+ highlightNodes.has(node)
+ ? node.neighbors.length * 3
+ : node.neighbors.length * 2
}
linkDirectionalParticleWidth={physics.particleWidth}
onNodeHover={physics.hover ? handleNodeHover : null}
@@ -512,8 +554,8 @@ onLinkHover={handleLinkHover}
if (highlightNodes.has(node)) {
console.log(node.title)
const sprite = new SpriteText(node.title.substring(0, 30))
- console.log("didnt crash here 2")
- sprite.color = "#ffffff"
+ console.log('didnt crash here 2')
+ sprite.color = '#ffffff'
sprite.textHeight = 8
return sprite
} else {
@@ -524,7 +566,7 @@ onLinkHover={handleLinkHover}
nodeThreeObjectExtend={true}
onNodeClick={selectClick}
onBackgroundClick={handleBackgroundClick}
- backgroundColor={"#242730"}
+ backgroundColor={'#242730'}
/>
)}
</View>
diff --git a/app/components/graph/graphgood.tsx b/app/components/graph/graphgood.tsx
index f273a66..b204176 100644
--- a/app/components/graph/graphgood.tsx
+++ b/app/components/graph/graphgood.tsx
@@ -1,22 +1,27 @@
-import * as React from "react"
-import { useState, useEffect, useRef, useMemo, useCallback } from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
+import * as React from 'react'
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
//import data from "../../data/miserables.json"
//import genRandomTree from "../../data/randomdata";
//import rando from "../../data/rando.json"
-import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph"
-import * as d3 from "d3-force-3d"
-import * as three from "three"
-import SpriteText from "three-spritetext"
+import {
+ ForceGraph2D,
+ ForceGraph3D,
+ ForceGraphVR,
+ ForceGraphAR,
+} from 'react-force-graph'
+import * as d3 from 'd3-force-3d'
+import * as three from 'three'
+import SpriteText from 'three-spritetext'
const CONTAINER: ViewStyle = {
- justifyContent: "center",
+ justifyContent: 'center',
}
const TEXT: TextStyle = {
@@ -56,45 +61,49 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
const fg = fgRef.current
//fg.d3Force('center').strength(0.05);
if (physics.gravityOn) {
- fg.d3Force("x", d3.forceX().strength(physics.gravity))
- fg.d3Force("y", d3.forceY().strength(physics.gravity))
+ fg.d3Force('x', d3.forceX().strength(physics.gravity))
+ fg.d3Force('y', d3.forceY().strength(physics.gravity))
if (physics.threedim) {
if (physics.galaxy) {
- fg.d3Force("y", d3.forceY().strength(physics.gravity / 5))
- fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5))
+ fg.d3Force('y', d3.forceY().strength(physics.gravity / 5))
+ fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5))
} else {
- fg.d3Force("y", d3.forceY().strength(physics.gravity))
- fg.d3Force("z", d3.forceZ().strength(physics.gravity))
+ fg.d3Force('y', d3.forceY().strength(physics.gravity))
+ fg.d3Force('z', d3.forceZ().strength(physics.gravity))
}
} else {
- fg.d3Force("z", null)
+ fg.d3Force('z', null)
}
} else {
- fg.d3Force("x", null)
- fg.d3Force("y", null)
- physics.threedim ? fg.d3Force("z", null) : null
+ fg.d3Force('x', null)
+ fg.d3Force('y', null)
+ physics.threedim ? fg.d3Force('z', null) : null
}
- fg.d3Force("link").strength(physics.linkStrength)
- fg.d3Force("link").iterations(physics.linkIts)
+ fg.d3Force('link').strength(physics.linkStrength)
+ fg.d3Force('link').iterations(physics.linkIts)
physics.collision
- ? fg.d3Force("collide", d3.forceCollide().radius(20))
- : fg.d3Force("collide", null)
- fg.d3Force("charge").strength(physics.charge)
+ ? fg.d3Force('collide', d3.forceCollide().radius(20))
+ : fg.d3Force('collide', null)
+ fg.d3Force('charge').strength(physics.charge)
})
// For the expandable version of the graph
const nodesById = useMemo(() => {
- const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node]))
+ const nodesById = Object.fromEntries(
+ gData.nodes.map((node) => [node.index, node]),
+ )
console.log(nodesById)
// link parent/children
gData.nodes.forEach((node) => {
- typeof physics.rootId === "number"
+ typeof physics.rootId === 'number'
? (node.collapsed = node.index !== physics.rootId)
: (node.collapsed = node.id !== physics.rootId)
node.childLinks = []
})
- gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link))
+ gData.links.forEach((link) =>
+ nodesById[link.sourceIndex].childLinks.push(link),
+ )
return nodesById
}, [gData])
const getPrunedTree = useCallback(() => {
@@ -106,7 +115,9 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
visibleLinks.push(...node.childLinks)
node.childLinks
.map((link) =>
- typeof link.targetIndex === "object" ? link.targetIndex : nodesById[link.targetIndex],
+ typeof link.targetIndex === 'object'
+ ? link.targetIndex
+ : nodesById[link.targetIndex],
) // get child node
.forEach(traverseTree)
})()
@@ -140,7 +151,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
}
const handleNodeHover = (node) => {
- console.log("hover")
+ console.log('hover')
if (!selectedNode) {
highlightNodes.clear()
highlightLinks.clear()
@@ -264,29 +275,39 @@ onLinkHover={handleLinkHover}
ref={fgRef}
autoPauseRedraw={false}
//graphData={gData}
- graphData={physics.local ? localGraphData : physics.collapse ? prunedTree : gData}
- nodeAutoColorBy={physics.colorful ? "id" : undefined}
+ graphData={
+ physics.local
+ ? localGraphData
+ : physics.collapse
+ ? prunedTree
+ : gData
+ }
+ nodeAutoColorBy={physics.colorful ? 'id' : undefined}
nodeColor={
!physics.colorful
? (node) => {
if (highlightNodes.size === 0) {
- return "rgb(100, 100, 100, 1)"
+ return 'rgb(100, 100, 100, 1)'
} else {
- return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+ return highlightNodes.has(node)
+ ? 'purple'
+ : 'rgb(50, 50, 50, 0.5)'
}
// !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
}
: undefined
}
- linkAutoColorBy={physics.colorful ? "target" : undefined}
+ linkAutoColorBy={physics.colorful ? 'target' : undefined}
//linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
linkColor={
!physics.colorful
? (link) => {
if (highlightLinks.size === 0) {
- return "rgb(50, 50, 50, 0.8)"
+ return 'rgb(50, 50, 50, 0.8)'
} else {
- return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+ return highlightLinks.has(link)
+ ? 'purple'
+ : 'rgb(50, 50, 50, 0.2)'
}
// !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
}
@@ -305,53 +326,63 @@ onLinkHover={handleLinkHover}
linkOpacity={physics.linkOpacity}
nodeRelSize={physics.nodeRel}
nodeVal={(node) =>
- highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+ highlightNodes.has(node)
+ ? node.neighbors.length + 5
+ : node.neighbors.length + 3
}
linkDirectionalParticleWidth={physics.particleWidth}
nodeCanvasObject={(node, ctx, globalScale) => {
if (physics.labels) {
- if (globalScale > physics.labelScale || highlightNodes.has(node)) {
- const label = node.title.substring(0, Math.min(node.title.length, 30))
+ if (
+ globalScale > physics.labelScale ||
+ highlightNodes.has(node)
+ ) {
+ const label = node.title.substring(
+ 0,
+ Math.min(node.title.length, 30),
+ )
const fontSize = 12 / globalScale
ctx.font = `${fontSize}px Sans-Serif`
const textWidth = ctx.measureText(label).width
- const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) // some padding
+ const bckgDimensions = [textWidth * 1.1, fontSize].map(
+ (n) => n + fontSize * 0.5,
+ ) // some padding
const fadeFactor = Math.min(
(3 * (globalScale - physics.labelScale)) / physics.labelScale,
1,
)
ctx.fillStyle =
- "rgba(20, 20, 20, " +
+ 'rgba(20, 20, 20, ' +
(highlightNodes.size === 0
? 0.5 * fadeFactor
: highlightNodes.has(node)
? 0.5
: 0.15 * fadeFactor) +
- ")"
+ ')'
ctx.fillRect(
node.x - bckgDimensions[0] / 2,
node.y - bckgDimensions[1] / 2,
...bckgDimensions,
)
- ctx.textAlign = "center"
- ctx.textBaseline = "middle"
+ ctx.textAlign = 'center'
+ ctx.textBaseline = 'middle'
ctx.fillStyle =
- "rgb(255, 255, 255, " +
+ 'rgb(255, 255, 255, ' +
(highlightNodes.size === 0
? fadeFactor
: highlightNodes.has(node)
? 1
: 0.3 * fadeFactor) +
- ")"
+ ')'
ctx.fillText(label, node.x, node.y)
node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint
}
}
}}
- nodeCanvasObjectMode={() => "after"}
+ nodeCanvasObjectMode={() => 'after'}
onNodeHover={physics.hover ? handleNodeHover : null}
//onLinkHover={physics.hover ? handleLinkHover : null}
d3AlphaDecay={physics.alphaDecay}
@@ -365,28 +396,32 @@ onLinkHover={handleLinkHover}
autoPauseRedraw={false}
graphData={gData}
//graphData={physics.collapse ? prunedTree : gData}
- nodeAutoColorBy={physics.colorful ? "id" : undefined}
+ nodeAutoColorBy={physics.colorful ? 'id' : undefined}
nodeColor={
!physics.colorful
? (node) => {
if (highlightNodes.size === 0) {
- return "rgb(100, 100, 100, 1)"
+ return 'rgb(100, 100, 100, 1)'
} else {
- return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+ return highlightNodes.has(node)
+ ? 'purple'
+ : 'rgb(50, 50, 50, 0.5)'
}
// !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
}
: undefined
}
- linkAutoColorBy={physics.colorful ? "target" : undefined}
+ linkAutoColorBy={physics.colorful ? 'target' : undefined}
//linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
linkColor={
!physics.colorful
? (link) => {
if (highlightLinks.size === 0) {
- return "rgb(50, 50, 50, 0.8)"
+ return 'rgb(50, 50, 50, 0.8)'
} else {
- return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+ return highlightLinks.has(link)
+ ? 'purple'
+ : 'rgb(50, 50, 50, 0.2)'
}
// !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
}
@@ -405,7 +440,9 @@ onLinkHover={handleLinkHover}
linkOpacity={physics.linkOpacity}
nodeRelSize={physics.nodeRel}
nodeVal={(node) =>
- highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+ highlightNodes.has(node)
+ ? node.neighbors.length + 5
+ : node.neighbors.length + 3
}
linkDirectionalParticleWidth={physics.particleWidth}
onNodeHover={physics.hover ? handleNodeHover : null}
@@ -420,8 +457,8 @@ onLinkHover={handleLinkHover}
if (highlightNodes.has(node)) {
console.log(node.title)
const sprite = new SpriteText(node.title.substring(0, 30))
- console.log("didnt crash here 2")
- sprite.color = "#ffffff"
+ console.log('didnt crash here 2')
+ sprite.color = '#ffffff'
sprite.textHeight = 8
return sprite
} else {
diff --git a/app/components/header/header.props.ts b/app/components/header/header.props.ts
index 07f2c4d..f142656 100644
--- a/app/components/header/header.props.ts
+++ b/app/components/header/header.props.ts
@@ -1,6 +1,6 @@
-import { StyleProp, TextStyle, ViewStyle } from "react-native"
-import { IconTypes } from "../icon/icons"
-import { TxKeyPath } from "../../i18n"
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
+import { IconTypes } from '../icon/icons'
+import { TxKeyPath } from '../../i18n'
export interface HeaderProps {
/**
diff --git a/app/components/header/header.story.tsx b/app/components/header/header.story.tsx
index 05093b3..db87b89 100644
--- a/app/components/header/header.story.tsx
+++ b/app/components/header/header.story.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import { View, Alert } from "react-native"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Header } from "./header"
-import { color } from "../../theme"
+import * as React from 'react'
+import { View, Alert } from 'react-native'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Header } from './header'
+import { color } from '../../theme'
declare let module
@@ -12,9 +12,9 @@ const VIEWSTYLE = {
backgroundColor: color.storybookDarkBg,
}
-storiesOf("Header", module)
+storiesOf('Header', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Behavior", () => (
+ .add('Behavior', () => (
<Story>
<UseCase noPad text="default" usage="The default usage">
<View style={VIEWSTYLE}>
@@ -26,7 +26,7 @@ storiesOf("Header", module)
<Header
headerTx="demoScreen.howTo"
leftIcon="back"
- onLeftPress={() => Alert.alert("left nav")}
+ onLeftPress={() => Alert.alert('left nav')}
/>
</View>
</UseCase>
@@ -35,7 +35,7 @@ storiesOf("Header", module)
<Header
headerTx="demoScreen.howTo"
rightIcon="bullet"
- onRightPress={() => Alert.alert("right nav")}
+ onRightPress={() => Alert.alert('right nav')}
/>
</View>
</UseCase>
diff --git a/app/components/header/header.tsx b/app/components/header/header.tsx
index b4a6634..25e0914 100644
--- a/app/components/header/header.tsx
+++ b/app/components/header/header.tsx
@@ -1,23 +1,23 @@
-import React from "react"
-import { View, ViewStyle, TextStyle } from "react-native"
-import { HeaderProps } from "./header.props"
-import { Button } from "../button/button"
-import { Text } from "../text/text"
-import { Icon } from "../icon/icon"
-import { spacing } from "../../theme"
-import { translate } from "../../i18n/"
+import React from 'react'
+import { View, ViewStyle, TextStyle } from 'react-native'
+import { HeaderProps } from './header.props'
+import { Button } from '../button/button'
+import { Text } from '../text/text'
+import { Icon } from '../icon/icon'
+import { spacing } from '../../theme'
+import { translate } from '../../i18n/'
// static styles
const ROOT: ViewStyle = {
- flexDirection: "row",
+ flexDirection: 'row',
paddingHorizontal: spacing[4],
- alignItems: "center",
+ alignItems: 'center',
paddingTop: spacing[5],
paddingBottom: spacing[5],
- justifyContent: "flex-start",
+ justifyContent: 'flex-start',
}
-const TITLE: TextStyle = { textAlign: "center" }
-const TITLE_MIDDLE: ViewStyle = { flex: 1, justifyContent: "center" }
+const TITLE: TextStyle = { textAlign: 'center' }
+const TITLE_MIDDLE: ViewStyle = { flex: 1, justifyContent: 'center' }
const LEFT: ViewStyle = { width: 32 }
const RIGHT: ViewStyle = { width: 32 }
@@ -35,7 +35,7 @@ export function Header(props: HeaderProps) {
style,
titleStyle,
} = props
- const header = headerText || (headerTx && translate(headerTx)) || ""
+ const header = headerText || (headerTx && translate(headerTx)) || ''
return (
<View style={[ROOT, style]}>
diff --git a/app/components/icon/icon.props.ts b/app/components/icon/icon.props.ts
index 71ce0b7..1f3ed2e 100644
--- a/app/components/icon/icon.props.ts
+++ b/app/components/icon/icon.props.ts
@@ -1,5 +1,5 @@
-import { ImageStyle, StyleProp, ViewStyle } from "react-native"
-import { IconTypes } from "./icons"
+import { ImageStyle, StyleProp, ViewStyle } from 'react-native'
+import { IconTypes } from './icons'
export interface IconProps {
/**
diff --git a/app/components/icon/icon.story.tsx b/app/components/icon/icon.story.tsx
index d119ed4..31c8499 100644
--- a/app/components/icon/icon.story.tsx
+++ b/app/components/icon/icon.story.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Icon } from "./icon"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Icon } from './icon'
declare let module
-storiesOf("Icon", module)
+storiesOf('Icon', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Names", () => (
+ .add('Names', () => (
<Story>
<UseCase text="back" usage="The icon for going back">
<Icon icon="back" />
diff --git a/app/components/icon/icon.tsx b/app/components/icon/icon.tsx
index 4735e13..f596bb2 100644
--- a/app/components/icon/icon.tsx
+++ b/app/components/icon/icon.tsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import { View, ImageStyle } from "react-native"
-import { AutoImage as Image } from "../auto-image/auto-image"
-import { IconProps } from "./icon.props"
-import { icons } from "./icons"
+import * as React from 'react'
+import { View, ImageStyle } from 'react-native'
+import { AutoImage as Image } from '../auto-image/auto-image'
+import { IconProps } from './icon.props'
+import { icons } from './icons'
const ROOT: ImageStyle = {
- resizeMode: "contain",
+ resizeMode: 'contain',
}
export function Icon(props: IconProps) {
diff --git a/app/components/icon/icons/index.ts b/app/components/icon/icons/index.ts
index 00e8a59..792e408 100644
--- a/app/components/icon/icons/index.ts
+++ b/app/components/icon/icons/index.ts
@@ -1,6 +1,6 @@
export const icons = {
- back: require("./arrow-left.png"),
- bullet: require("./bullet.png"),
+ back: require('./arrow-left.png'),
+ bullet: require('./bullet.png'),
}
export type IconTypes = keyof typeof icons
diff --git a/app/components/index.ts b/app/components/index.ts
index 8858b2f..d93e972 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -1,16 +1,16 @@
-export * from "./bullet-item/bullet-item"
-export * from "./button/button"
-export * from "./checkbox/checkbox"
-export * from "./form-row/form-row"
-export * from "./header/header"
-export * from "./icon/icon"
-export * from "./screen/screen"
-export * from "./switch/switch"
-export * from "./text/text"
-export * from "./text-field/text-field"
-export * from "./wallpaper/wallpaper"
-export * from "./auto-image/auto-image"
-export * from "./graph/graph"
-export * from "./tweaks/tweaks"
-export * from "./local-button/local-button"
-export * from "./graph-ui/graph-ui"
+export * from './bullet-item/bullet-item'
+export * from './button/button'
+export * from './checkbox/checkbox'
+export * from './form-row/form-row'
+export * from './header/header'
+export * from './icon/icon'
+export * from './screen/screen'
+export * from './switch/switch'
+export * from './text/text'
+export * from './text-field/text-field'
+export * from './wallpaper/wallpaper'
+export * from './auto-image/auto-image'
+export * from './graph/graph'
+export * from './tweaks/tweaks'
+export * from './local-button/local-button'
+export * from './graph-ui/graph-ui'
diff --git a/app/components/local-button/local-button.story.tsx b/app/components/local-button/local-button.story.tsx
index 22b2f0e..0d35ab2 100644
--- a/app/components/local-button/local-button.story.tsx
+++ b/app/components/local-button/local-button.story.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { LocalButton } from "./local-button"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { LocalButton } from './local-button'
-storiesOf("LocalButton", module)
+storiesOf('LocalButton', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Style Presets", () => (
+ .add('Style Presets', () => (
<Story>
<UseCase text="Primary" usage="The primary.">
<LocalButton style={{ backgroundColor: color.error }} />
diff --git a/app/components/local-button/local-button.tsx b/app/components/local-button/local-button.tsx
index 6507b76..27b514b 100644
--- a/app/components/local-button/local-button.tsx
+++ b/app/components/local-button/local-button.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
-import Icon from "react-native-vector-icons/MaterialCommunityIcons"
+import * as React from 'react'
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
const CONTAINER: ViewStyle = {
- justifyContent: "center",
+ justifyContent: 'center',
}
const TEXT: TextStyle = {
@@ -21,25 +21,32 @@ export interface LocalButtonProps {
* An optional style override useful for padding & margin.
*/
style?: StyleProp<ViewStyle>
- local
- setLocal
+ local
+ setLocal
}
/**
* Describe your component here
*/
-export const LocalButton = observer(function LocalButton(props: LocalButtonProps) {
+export const LocalButton = observer(function LocalButton(
+ props: LocalButtonProps,
+) {
const { style, local, setLocal } = props
const styles = flatten([CONTAINER, style])
return (
- <View style={[style, { height: 50, width: 150}]}>
- <Icon.Button name={!local ? "graph-outline": "graph"} backgroundColor="#a991f1"
- onPress={()=>{setLocal(!local)}}
- size={30}
- style={{textAlign: 'center'}}>
- {!local ? "Global Graph" : "Local Graph"}
- </Icon.Button>
+ <View style={[style, { height: 50, width: 150 }]}>
+ <Icon.Button
+ name={!local ? 'graph-outline' : 'graph'}
+ backgroundColor="#a991f1"
+ onPress={() => {
+ setLocal(!local)
+ }}
+ size={30}
+ style={{ textAlign: 'center' }}
+ >
+ {!local ? 'Global Graph' : 'Local Graph'}
+ </Icon.Button>
</View>
)
})
diff --git a/app/components/local/local.story.tsx b/app/components/local/local.story.tsx
index b161f0e..2bfa065 100644
--- a/app/components/local/local.story.tsx
+++ b/app/components/local/local.story.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { Local } from "./local"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { Local } from './local'
-storiesOf("Local", module)
+storiesOf('Local', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Style Presets", () => (
+ .add('Style Presets', () => (
<Story>
<UseCase text="Primary" usage="The primary.">
<Local style={{ backgroundColor: color.error }} />
diff --git a/app/components/local/local.tsx b/app/components/local/local.tsx
index e6984fc..200ec01 100644
--- a/app/components/local/local.tsx
+++ b/app/components/local/local.tsx
@@ -1,13 +1,19 @@
-import * as React from "react"
-import { StyleProp, TextStyle, TouchableOpacity, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
-import Icon from "react-native-vector-icons/MaterialCommunityIcons"
+import * as React from 'react'
+import {
+ StyleProp,
+ TextStyle,
+ TouchableOpacity,
+ View,
+ ViewStyle,
+} from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
const CONTAINER: ViewStyle = {
- justifyContent: "center",
+ justifyContent: 'center',
}
const TEXT: TextStyle = {
@@ -26,13 +32,17 @@ export interface LocalProps {
/**
* Describe your component here
*/
-export const LocalButton = observer(function LocalButton(props: LocalProps): boolean {
+export const LocalButton = observer(function LocalButton(
+ props: LocalProps,
+): boolean {
const { style } = props
const styles = flatten([CONTAINER, style])
return (
- <Icon color="#a99f1f" name="graph"
- style={{position:"absolute", zIndex: 100, width: 500}}
- />
+ <Icon
+ color="#a99f1f"
+ name="graph"
+ style={{ position: 'absolute', zIndex: 100, width: 500 }}
+ />
)
})
diff --git a/app/components/screen/screen.presets.ts b/app/components/screen/screen.presets.ts
index a016b77..aa8d8cf 100644
--- a/app/components/screen/screen.presets.ts
+++ b/app/components/screen/screen.presets.ts
@@ -1,5 +1,5 @@
-import { ViewStyle } from "react-native"
-import { color } from "../../theme"
+import { ViewStyle } from 'react-native'
+import { color } from '../../theme'
/**
* All screen keyboard offsets.
@@ -25,13 +25,13 @@ export const presets = {
outer: {
backgroundColor: color.background,
flex: 1,
- height: "100%",
+ height: '100%',
} as ViewStyle,
inner: {
- justifyContent: "flex-start",
- alignItems: "stretch",
- height: "100%",
- width: "100%",
+ justifyContent: 'flex-start',
+ alignItems: 'stretch',
+ height: '100%',
+ width: '100%',
} as ViewStyle,
},
@@ -44,9 +44,9 @@ export const presets = {
outer: {
backgroundColor: color.background,
flex: 1,
- height: "100%",
+ height: '100%',
} as ViewStyle,
- inner: { justifyContent: "flex-start", alignItems: "stretch" } as ViewStyle,
+ inner: { justifyContent: 'flex-start', alignItems: 'stretch' } as ViewStyle,
},
}
@@ -62,5 +62,5 @@ export type ScreenPresets = keyof typeof presets
*/
export function isNonScrolling(preset?: ScreenPresets) {
// any of these things will make you scroll
- return !preset || !presets[preset] || preset === "fixed"
+ return !preset || !presets[preset] || preset === 'fixed'
}
diff --git a/app/components/screen/screen.props.ts b/app/components/screen/screen.props.ts
index 0326fd7..1371c64 100644
--- a/app/components/screen/screen.props.ts
+++ b/app/components/screen/screen.props.ts
@@ -1,6 +1,6 @@
-import React from "react"
-import { StyleProp, ViewStyle } from "react-native"
-import { KeyboardOffsets, ScreenPresets } from "./screen.presets"
+import React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import { KeyboardOffsets, ScreenPresets } from './screen.presets'
export interface ScreenProps {
/**
@@ -26,7 +26,7 @@ export interface ScreenProps {
/**
* An optional status bar setting. Defaults to light-content.
*/
- statusBar?: "light-content" | "dark-content"
+ statusBar?: 'light-content' | 'dark-content'
/**
* Should we not wrap in SafeAreaView? Defaults to false.
@@ -42,5 +42,5 @@ export interface ScreenProps {
* Should keyboard persist on screen tap. Defaults to handled.
* Only applies to scroll preset.
*/
- keyboardShouldPersistTaps?: "handled" | "always" | "never"
+ keyboardShouldPersistTaps?: 'handled' | 'always' | 'never'
}
diff --git a/app/components/screen/screen.tsx b/app/components/screen/screen.tsx
index ba84547..e593dde 100644
--- a/app/components/screen/screen.tsx
+++ b/app/components/screen/screen.tsx
@@ -1,25 +1,33 @@
-import * as React from "react"
-import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from "react-native"
-import { useSafeAreaInsets } from "react-native-safe-area-context"
-import { ScreenProps } from "./screen.props"
-import { isNonScrolling, offsets, presets } from "./screen.presets"
+import * as React from 'react'
+import {
+ KeyboardAvoidingView,
+ Platform,
+ ScrollView,
+ StatusBar,
+ View,
+} from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ScreenProps } from './screen.props'
+import { isNonScrolling, offsets, presets } from './screen.presets'
-const isIos = Platform.OS === "ios"
+const isIos = Platform.OS === 'ios'
function ScreenWithoutScrolling(props: ScreenProps) {
const insets = useSafeAreaInsets()
const preset = presets.fixed
const style = props.style || {}
- const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {}
+ const backgroundStyle = props.backgroundColor
+ ? { backgroundColor: props.backgroundColor }
+ : {}
const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top }
return (
<KeyboardAvoidingView
style={[preset.outer, backgroundStyle]}
- behavior={isIos ? "padding" : undefined}
- keyboardVerticalOffset={offsets[props.keyboardOffset || "none"]}
+ behavior={isIos ? 'padding' : undefined}
+ keyboardVerticalOffset={offsets[props.keyboardOffset || 'none']}
>
- <StatusBar barStyle={props.statusBar || "light-content"} />
+ <StatusBar barStyle={props.statusBar || 'light-content'} />
<View style={[preset.inner, style, insetStyle]}>{props.children}</View>
</KeyboardAvoidingView>
)
@@ -29,21 +37,25 @@ function ScreenWithScrolling(props: ScreenProps) {
const insets = useSafeAreaInsets()
const preset = presets.scroll
const style = props.style || {}
- const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {}
+ const backgroundStyle = props.backgroundColor
+ ? { backgroundColor: props.backgroundColor }
+ : {}
const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top }
return (
<KeyboardAvoidingView
style={[preset.outer, backgroundStyle]}
- behavior={isIos ? "padding" : undefined}
- keyboardVerticalOffset={offsets[props.keyboardOffset || "none"]}
+ behavior={isIos ? 'padding' : undefined}
+ keyboardVerticalOffset={offsets[props.keyboardOffset || 'none']}
>
- <StatusBar barStyle={props.statusBar || "light-content"} />
+ <StatusBar barStyle={props.statusBar || 'light-content'} />
<View style={[preset.outer, backgroundStyle, insetStyle]}>
<ScrollView
style={[preset.outer, backgroundStyle]}
contentContainerStyle={[preset.inner, style]}
- keyboardShouldPersistTaps={props.keyboardShouldPersistTaps || "handled"}
+ keyboardShouldPersistTaps={
+ props.keyboardShouldPersistTaps || 'handled'
+ }
>
{props.children}
</ScrollView>
diff --git a/app/components/switch/switch.props.ts b/app/components/switch/switch.props.ts
index 8235457..2549a95 100644
--- a/app/components/switch/switch.props.ts
+++ b/app/components/switch/switch.props.ts
@@ -1,4 +1,4 @@
-import { StyleProp, ViewStyle } from "react-native"
+import { StyleProp, ViewStyle } from 'react-native'
export interface SwitchProps {
/**
diff --git a/app/components/switch/switch.story.tsx b/app/components/switch/switch.story.tsx
index 998d1df..bbd29ee 100644
--- a/app/components/switch/switch.story.tsx
+++ b/app/components/switch/switch.story.tsx
@@ -1,19 +1,19 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react-native/no-color-literals */
-import * as React from "react"
-import { View, ViewStyle } from "react-native"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Toggle } from "react-powerplug"
-import { Switch } from "./switch"
+import * as React from 'react'
+import { View, ViewStyle } from 'react-native'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Toggle } from 'react-powerplug'
+import { Switch } from './switch'
declare let module
-const styleArray: ViewStyle[] = [{ borderColor: "#686868" }]
+const styleArray: ViewStyle[] = [{ borderColor: '#686868' }]
const trackOffStyle: ViewStyle[] = [
- { backgroundColor: "#686868" },
+ { backgroundColor: '#686868' },
{
height: 80,
borderRadius: 0,
@@ -21,8 +21,8 @@ const trackOffStyle: ViewStyle[] = [
]
const trackOnStyle: ViewStyle[] = [
{
- backgroundColor: "#b1008e",
- borderColor: "#686868",
+ backgroundColor: '#b1008e',
+ borderColor: '#686868',
},
{
height: 80,
@@ -31,8 +31,8 @@ const trackOnStyle: ViewStyle[] = [
]
const thumbOffStyle: ViewStyle[] = [
{
- backgroundColor: "#b1008e",
- borderColor: "#686868",
+ backgroundColor: '#b1008e',
+ borderColor: '#686868',
},
{
height: 80,
@@ -40,19 +40,22 @@ const thumbOffStyle: ViewStyle[] = [
},
]
const thumbOnStyle: ViewStyle[] = [
- { backgroundColor: "#f0c" },
+ { backgroundColor: '#f0c' },
{
height: 80,
borderRadius: 0,
- borderColor: "#686868",
+ borderColor: '#686868',
},
]
-storiesOf("Switch", module)
+storiesOf('Switch', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Behaviour", () => (
+ .add('Behaviour', () => (
<Story>
- <UseCase text="The Toggle Switch" usage="Use the switch to represent on/off states.">
+ <UseCase
+ text="The Toggle Switch"
+ usage="Use the switch to represent on/off states."
+ >
<Toggle initial={false}>
{({ on, toggle }) => <Switch value={on} onToggle={toggle} />}
</Toggle>
@@ -65,17 +68,23 @@ storiesOf("Switch", module)
</UseCase>
</Story>
))
- .add("Styling", () => (
+ .add('Styling', () => (
<Story>
<UseCase text="Custom Styling" usage="Promise me this won't happen.">
<Toggle initial={false}>
{({ on, toggle }) => (
<View>
<Switch
- trackOnStyle={{ backgroundColor: "green", borderColor: "black" }}
- trackOffStyle={{ backgroundColor: "red", borderColor: "maroon" }}
- thumbOnStyle={{ backgroundColor: "cyan" }}
- thumbOffStyle={{ backgroundColor: "pink" }}
+ trackOnStyle={{
+ backgroundColor: 'green',
+ borderColor: 'black',
+ }}
+ trackOffStyle={{
+ backgroundColor: 'red',
+ borderColor: 'maroon',
+ }}
+ thumbOnStyle={{ backgroundColor: 'cyan' }}
+ thumbOffStyle={{ backgroundColor: 'pink' }}
value={on}
onToggle={toggle}
/>
diff --git a/app/components/switch/switch.tsx b/app/components/switch/switch.tsx
index 0813747..bad81fc 100644
--- a/app/components/switch/switch.tsx
+++ b/app/components/switch/switch.tsx
@@ -1,7 +1,12 @@
-import React from "react"
-import { ViewStyle, Animated, Easing, TouchableWithoutFeedback } from "react-native"
-import { color } from "../../theme"
-import { SwitchProps } from "./switch.props"
+import React from 'react'
+import {
+ ViewStyle,
+ Animated,
+ Easing,
+ TouchableWithoutFeedback,
+} from 'react-native'
+import { color } from '../../theme'
+import { SwitchProps } from './switch.props'
// dimensions
const THUMB_SIZE = 30
@@ -15,7 +20,7 @@ const BORDER_RADIUS = (THUMB_SIZE * 3) / 4
const ON_COLOR = color.primary
const OFF_COLOR = color.palette.offWhite
const BORDER_ON_COLOR = ON_COLOR
-const BORDER_OFF_COLOR = "rgba(0, 0, 0, 0.1)"
+const BORDER_OFF_COLOR = 'rgba(0, 0, 0, 0.1)'
// animation
const DURATION = 250
@@ -31,7 +36,7 @@ const TRACK = {
// the thumb always has these props
const THUMB: ViewStyle = {
- position: "absolute",
+ position: 'absolute',
width: THUMB_SIZE,
height: THUMB_SIZE,
borderColor: BORDER_OFF_COLOR,
@@ -71,10 +76,10 @@ export function Switch(props: SwitchProps) {
}
}, [props.value])
- const handlePress = React.useMemo(() => () => props.onToggle && props.onToggle(!props.value), [
- props.onToggle,
- props.value,
- ])
+ const handlePress = React.useMemo(
+ () => () => props.onToggle && props.onToggle(!props.value),
+ [props.onToggle, props.value],
+ )
if (!timer) {
return null
diff --git a/app/components/text-field/text-field.story.tsx b/app/components/text-field/text-field.story.tsx
index 74a4da0..20c73a4 100644
--- a/app/components/text-field/text-field.story.tsx
+++ b/app/components/text-field/text-field.story.tsx
@@ -1,12 +1,12 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react-native/no-color-literals */
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Text, TextField } from "../"
-import { State } from "react-powerplug"
-import { ViewStyle, TextStyle, Alert } from "react-native"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Text, TextField } from '../'
+import { State } from 'react-powerplug'
+import { ViewStyle, TextStyle, Alert } from 'react-native'
declare let module
@@ -14,24 +14,27 @@ const styleArray: ViewStyle[] = [{ paddingHorizontal: 30 }, { borderWidth: 30 }]
const inputStyleArray: TextStyle[] = [
{
- backgroundColor: "rebeccapurple",
- color: "white",
+ backgroundColor: 'rebeccapurple',
+ color: 'white',
padding: 40,
},
{
borderWidth: 10,
borderRadius: 4,
- borderColor: "#7fff00",
+ borderColor: '#7fff00',
},
]
let alertWhenFocused = true
-storiesOf("TextField", module)
+storiesOf('TextField', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Labelling", () => (
+ .add('Labelling', () => (
<Story>
- <UseCase text="Normal text" usage="Use placeholder and label to set the text.">
- <State initial={{ value: "" }}>
+ <UseCase
+ text="Normal text"
+ usage="Use placeholder and label to set the text."
+ >
+ <State initial={{ value: '' }}>
{({ state, setState }) => (
<TextField
onChangeText={(value) => setState({ value })}
@@ -43,8 +46,11 @@ storiesOf("TextField", module)
</State>
</UseCase>
- <UseCase text="i18n text" usage="Use placeholderTx and labelTx for i18n lookups">
- <State initial={{ value: "" }}>
+ <UseCase
+ text="i18n text"
+ usage="Use placeholderTx and labelTx for i18n lookups"
+ >
+ <State initial={{ value: '' }}>
{({ state, setState }) => (
<TextField
onChangeText={(value) => setState({ value })}
@@ -57,14 +63,14 @@ storiesOf("TextField", module)
</UseCase>
</Story>
))
- .add("Style Overrides", () => (
+ .add('Style Overrides', () => (
<Story>
<UseCase
noPad
text="Container Styles"
usage="Useful for applying margins when laying out a form to remove padding if the form brings its own."
>
- <State initial={{ value: "Inigo" }}>
+ <State initial={{ value: 'Inigo' }}>
{({ state, setState }) => (
<TextField
onChangeText={(value) => setState({ value })}
@@ -74,7 +80,7 @@ storiesOf("TextField", module)
/>
)}
</State>
- <State initial={{ value: "Montoya" }}>
+ <State initial={{ value: 'Montoya' }}>
{({ state, setState }) => (
<TextField
onChangeText={(value) => setState({ value })}
@@ -89,19 +95,19 @@ storiesOf("TextField", module)
text="Input Styles"
usage="Useful for 1-off exceptions. Try to steer towards presets for this kind of thing."
>
- <State initial={{ value: "fancy colour" }}>
+ <State initial={{ value: 'fancy colour' }}>
{({ state, setState }) => (
<TextField
onChangeText={(value) => setState({ value })}
value={state.value}
label="Name"
inputStyle={{
- backgroundColor: "rebeccapurple",
- color: "white",
+ backgroundColor: 'rebeccapurple',
+ color: 'white',
padding: 40,
borderWidth: 10,
borderRadius: 4,
- borderColor: "hotpink",
+ borderColor: 'hotpink',
}}
/>
)}
@@ -109,8 +115,11 @@ storiesOf("TextField", module)
<Text text="* attention designers: i am so sorry" preset="secondary" />
</UseCase>
- <UseCase text="Style array" usage="Useful for 1-off exceptions, but using style arrays.">
- <State initial={{ value: "fancy colour" }}>
+ <UseCase
+ text="Style array"
+ usage="Useful for 1-off exceptions, but using style arrays."
+ >
+ <State initial={{ value: 'fancy colour' }}>
{({ state, setState }) => (
<TextField
onChangeText={(value) => setState({ value })}
@@ -125,29 +134,29 @@ storiesOf("TextField", module)
</UseCase>
</Story>
))
- .add("Ref Forwarding", () => (
+ .add('Ref Forwarding', () => (
<Story>
<UseCase text="Ref Forwarding" usage="">
- <State initial={{ value: "fancy colour" }}>
+ <State initial={{ value: 'fancy colour' }}>
{({ state, setState }) => (
<TextField
onChangeText={(value) => setState({ value })}
value={state.value}
label="Name"
inputStyle={{
- backgroundColor: "rebeccapurple",
- color: "white",
+ backgroundColor: 'rebeccapurple',
+ color: 'white',
padding: 40,
borderWidth: 10,
borderRadius: 4,
- borderColor: "hotpink",
+ borderColor: 'hotpink',
}}
forwardedRef={(ref) => ref}
onFocus={() => {
if (alertWhenFocused) {
// Prevent text field focus from being repeatedly triggering alert
alertWhenFocused = false
- Alert.alert("Text field focuesed with forwarded ref!")
+ Alert.alert('Text field focuesed with forwarded ref!')
}
}}
/>
diff --git a/app/components/text-field/text-field.tsx b/app/components/text-field/text-field.tsx
index eea1a70..4da1591 100644
--- a/app/components/text-field/text-field.tsx
+++ b/app/components/text-field/text-field.tsx
@@ -1,8 +1,15 @@
-import React from "react"
-import { StyleProp, TextInput, TextInputProps, TextStyle, View, ViewStyle } from "react-native"
-import { color, spacing, typography } from "../../theme"
-import { translate, TxKeyPath } from "../../i18n"
-import { Text } from "../text/text"
+import React from 'react'
+import {
+ StyleProp,
+ TextInput,
+ TextInputProps,
+ TextStyle,
+ View,
+ ViewStyle,
+} from 'react-native'
+import { color, spacing, typography } from '../../theme'
+import { translate, TxKeyPath } from '../../i18n'
+import { Text } from '../text/text'
// the base styling for the container
const CONTAINER: ViewStyle = {
@@ -71,7 +78,7 @@ export function TextField(props: TextFieldProps) {
placeholder,
labelTx,
label,
- preset = "default",
+ preset = 'default',
style: styleOverride,
inputStyle: inputStyleOverride,
forwardedRef,
@@ -80,7 +87,9 @@ export function TextField(props: TextFieldProps) {
const containerStyles = [CONTAINER, PRESETS[preset], styleOverride]
const inputStyles = [INPUT, inputStyleOverride]
- const actualPlaceholder = placeholderTx ? translate(placeholderTx) : placeholder
+ const actualPlaceholder = placeholderTx
+ ? translate(placeholderTx)
+ : placeholder
return (
<View style={containerStyles}>
diff --git a/app/components/text/text.presets.ts b/app/components/text/text.presets.ts
index 9622268..4693417 100644
--- a/app/components/text/text.presets.ts
+++ b/app/components/text/text.presets.ts
@@ -1,5 +1,5 @@
-import { TextStyle } from "react-native"
-import { color, typography } from "../../theme"
+import { TextStyle } from 'react-native'
+import { color, typography } from '../../theme'
/**
* All text will start off looking like this.
@@ -24,12 +24,12 @@ export const presets = {
/**
* A bold version of the default text.
*/
- bold: { ...BASE, fontWeight: "bold" } as TextStyle,
+ bold: { ...BASE, fontWeight: 'bold' } as TextStyle,
/**
* Large headers.
*/
- header: { ...BASE, fontSize: 24, fontWeight: "bold" } as TextStyle,
+ header: { ...BASE, fontSize: 24, fontWeight: 'bold' } as TextStyle,
/**
* Field labels that appear on forms above the inputs.
diff --git a/app/components/text/text.props.ts b/app/components/text/text.props.ts
index d2c55dc..79ee12c 100644
--- a/app/components/text/text.props.ts
+++ b/app/components/text/text.props.ts
@@ -1,7 +1,7 @@
-import { StyleProp, TextProps as TextProperties, TextStyle } from "react-native"
-import i18n from "i18n-js"
-import { TextPresets } from "./text.presets"
-import { TxKeyPath } from "../../i18n"
+import { StyleProp, TextProps as TextProperties, TextStyle } from 'react-native'
+import i18n from 'i18n-js'
+import { TextPresets } from './text.presets'
+import { TxKeyPath } from '../../i18n'
export interface TextProps extends TextProperties {
/**
diff --git a/app/components/text/text.story.tsx b/app/components/text/text.story.tsx
index 5582c1b..4535194 100644
--- a/app/components/text/text.story.tsx
+++ b/app/components/text/text.story.tsx
@@ -1,12 +1,12 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react-native/no-color-literals */
-import * as React from "react"
-import { View, ViewStyle } from "react-native"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { Text } from "./text"
+import * as React from 'react'
+import { View, ViewStyle } from 'react-native'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { Text } from './text'
declare let module
@@ -14,21 +14,23 @@ const VIEWSTYLE = {
flex: 1,
backgroundColor: color.storybookDarkBg,
}
-const viewStyleArray: ViewStyle[] = [VIEWSTYLE, { backgroundColor: "#7fff00" }]
+const viewStyleArray: ViewStyle[] = [VIEWSTYLE, { backgroundColor: '#7fff00' }]
-storiesOf("Text", module)
+storiesOf('Text', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Style Presets", () => (
+ .add('Style Presets', () => (
<Story>
<UseCase text="default" usage="Used for normal body text.">
<View style={VIEWSTYLE}>
<Text>Hello!</Text>
<Text style={{ paddingTop: 10 }}>
- Check out{"\n"}
- my{"\n"}
+ Check out{'\n'}
+ my{'\n'}
line height
</Text>
- <Text style={{ paddingTop: 10 }}>The quick brown fox jumped over the slow lazy dog.</Text>
+ <Text style={{ paddingTop: 10 }}>
+ The quick brown fox jumped over the slow lazy dog.
+ </Text>
<Text>$123,456,789.00</Text>
</View>
</UseCase>
@@ -44,7 +46,7 @@ storiesOf("Text", module)
</UseCase>
</Story>
))
- .add("Passing Content", () => (
+ .add('Passing Content', () => (
<Story>
<UseCase
text="text"
@@ -68,22 +70,25 @@ storiesOf("Text", module)
<Text>Passing strings as children.</Text>
</View>
</UseCase>
- <UseCase text="nested children" usage="You can embed them and change styles too.">
+ <UseCase
+ text="nested children"
+ usage="You can embed them and change styles too."
+ >
<View style={VIEWSTYLE}>
<Text>
- {" "}
+ {' '}
Hello <Text preset="bold">bolded</Text> World.
</Text>
</View>
</UseCase>
</Story>
))
- .add("Styling", () => (
+ .add('Styling', () => (
<Story>
<UseCase text="Style array" usage="Text with style array">
<View style={viewStyleArray}>
<Text>
- {" "}
+ {' '}
Hello <Text preset="bold">bolded</Text> World.
</Text>
</View>
diff --git a/app/components/text/text.tsx b/app/components/text/text.tsx
index 3ea613b..b04b654 100644
--- a/app/components/text/text.tsx
+++ b/app/components/text/text.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Text as ReactNativeText } from "react-native"
-import { presets } from "./text.presets"
-import { TextProps } from "./text.props"
-import { translate } from "../../i18n"
+import * as React from 'react'
+import { Text as ReactNativeText } from 'react-native'
+import { presets } from './text.presets'
+import { TextProps } from './text.props'
+import { translate } from '../../i18n'
/**
* For your text displaying needs.
@@ -11,7 +11,15 @@ import { translate } from "../../i18n"
*/
export function Text(props: TextProps) {
// grab the props
- const { preset = "default", tx, txOptions, text, children, style: styleOverride, ...rest } = props
+ const {
+ preset = 'default',
+ tx,
+ txOptions,
+ text,
+ children,
+ style: styleOverride,
+ ...rest
+ } = props
// figure out which content to use
const i18nText = tx && translate(tx, txOptions)
diff --git a/app/components/tweaks/tweaks.story.tsx b/app/components/tweaks/tweaks.story.tsx
index 7ff70d6..770d50f 100644
--- a/app/components/tweaks/tweaks.story.tsx
+++ b/app/components/tweaks/tweaks.story.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { Tweaks } from "./tweaks"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { Tweaks } from './tweaks'
-storiesOf("Tweaks", module)
+storiesOf('Tweaks', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Style Presets", () => (
+ .add('Style Presets', () => (
<Story>
<UseCase text="Primary" usage="The primary.">
<Tweaks style={{ backgroundColor: color.error }} />
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index d6f4d8c..1985174 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from 'react'
import {
ScrollView,
StyleProp,
@@ -8,20 +8,20 @@ import {
ViewStyle,
StyleSheet,
Button,
-} from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
-import Slider from "@react-native-community/slider"
-import { useState } from "react"
-import Accordion from "react-native-collapsible/Accordion"
-import * as Animatable from "react-native-animatable"
-import Icon from "react-native-vector-icons/MaterialCommunityIcons"
-import {Switch} from "react-native-elements"
+} from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
+import Slider from '@react-native-community/slider'
+import { useState } from 'react'
+import Accordion from 'react-native-collapsible/Accordion'
+import * as Animatable from 'react-native-animatable'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { Switch } from 'react-native-elements'
const CONTAINER: ViewStyle = {
- justifyContent: "center",
+ justifyContent: 'center',
}
const TEXT: TextStyle = {
@@ -42,21 +42,23 @@ export interface TweaksProps {
/**
* Describe your component here
*/
-export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element {
+export const Tweaks = observer(function Tweaks(
+ props: TweaksProps,
+): JSX.Element {
const { style, physics, setPhysics } = props
// const styles = flatten([CONTAINER, style])
const content = [
{
- title: "Physics",
+ title: 'Physics',
content: (
<View>
<Text preset="fieldLabel" text="Gravity" />
<Switch
color="#a991f1"
trackColor={{
- false: "#62686E",
- true: "#a991f1"
+ false: '#62686E',
+ true: '#a991f1',
}}
style={styles.switch}
value={physics.gravityOn}
@@ -64,7 +66,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
setPhysics({ ...physics, gravityOn: !physics.gravityOn })
}}
/>
- <Text preset="fieldLabel" text={"Gravity: " + physics.gravity} />
+ <Text preset="fieldLabel" text={'Gravity: ' + physics.gravity} />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -78,7 +80,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.gravity}
step={0.01}
/>
- <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
+ <Text
+ preset="fieldLabel"
+ text={'Repulsive force: ' + physics.charge}
+ />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -92,7 +97,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.charge}
step={1}
/>
- <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
+ <Text
+ preset="fieldLabel"
+ text={'Link Force: ' + physics.linkStrength}
+ />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -106,7 +114,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.linkStrength}
step={0.01}
/>
- <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
+ <Text
+ preset="fieldLabel"
+ text={"'Link Iterations': " + physics.linkIts}
+ />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -121,11 +132,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
step={1}
/>
<Text preset="fieldLabel" text="Collision" />
- <Switch
+ <Switch
color="#a991f1"
trackColor={{
- false: "#62686E",
- true: "#a991f1"
+ false: '#62686E',
+ true: '#a991f1',
}}
style={styles.switch}
value={physics.collision}
@@ -133,7 +144,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
setPhysics({ ...physics, collision: !physics.collision })
}}
/>
- <Text preset="fieldLabel" text={"Alpha Decay: " + physics.alphaDecay} />
+ <Text
+ preset="fieldLabel"
+ text={'Alpha Decay: ' + physics.alphaDecay}
+ />
<Slider
style={styles.slider}
minimumTrackTintColor="#a991f1"
@@ -147,7 +161,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.alphaDecay}
step={0.01}
/>
- <Text preset="fieldLabel" text={"Alhpa Target: " + physics.alphaTarget} />
+ <Text
+ preset="fieldLabel"
+ text={'Alhpa Target: ' + physics.alphaTarget}
+ />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -161,7 +178,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.alphaTarget}
step={0.1}
/>
- <Text preset="fieldLabel" text={"Viscosity: " + physics.velocityDecay} />
+ <Text
+ preset="fieldLabel"
+ text={'Viscosity: ' + physics.velocityDecay}
+ />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -175,12 +195,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.velocityDecay}
step={0.01}
/>
- <Text preset="fieldLabel" text={"Galaxy Mode (3D-only)"} />
- <Switch
+ <Text preset="fieldLabel" text={'Galaxy Mode (3D-only)'} />
+ <Switch
color="#a991f1"
trackColor={{
- false: "#62686E",
- true: "#a991f1"
+ false: '#62686E',
+ true: '#a991f1',
}}
style={styles.switch}
value={physics.galaxy}
@@ -192,15 +212,15 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
),
},
{
- title: "Visual",
+ title: 'Visual',
content: (
<View>
<Text preset="fieldLabel" text="Colorful" />
- <Switch
+ <Switch
color="#a991f1"
trackColor={{
- false: "#62686E",
- true: "#a991f1"
+ false: '#62686E',
+ true: '#a991f1',
}}
style={styles.switch}
value={physics.colorful}
@@ -209,11 +229,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
}}
/>
<Text preset="fieldLabel" text="Hover highlight" />
- <Switch
+ <Switch
color="#a991f1"
trackColor={{
- false: "#62686E",
- true: "#a991f1"
+ false: '#62686E',
+ true: '#a991f1',
}}
style={styles.switch}
value={physics.hover}
@@ -221,7 +241,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
setPhysics({ ...physics, hover: !physics.hover })
}}
/>
- <Text preset="fieldLabel" text={"Line Opacity: " + physics.linkOpacity} />
+ <Text
+ preset="fieldLabel"
+ text={'Line Opacity: ' + physics.linkOpacity}
+ />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -235,7 +258,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.linkOpacity}
step={0.01}
/>
- <Text preset="fieldLabel" text={"Line width: " + physics.linkWidth} />
+ <Text preset="fieldLabel" text={'Line width: ' + physics.linkWidth} />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -249,7 +272,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.linkWidth}
step={0.1}
/>
- <Text preset="fieldLabel" text={"Node size: " + physics.nodeRel} />
+ <Text preset="fieldLabel" text={'Node size: ' + physics.nodeRel} />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -263,7 +286,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.nodeRel}
step={0.01}
/>
- <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
+ <Text preset="fieldLabel" text={'Particles: ' + physics.particles} />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -277,7 +300,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.particles}
step={1}
/>
- <Text preset="fieldLabel" text={"Particle Size: " + physics.particleWidth} />
+ <Text
+ preset="fieldLabel"
+ text={'Particle Size: ' + physics.particleWidth}
+ />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -292,11 +318,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
step={0.1}
/>
<Text preset="fieldLabel" text="Labels" />
- <Switch
+ <Switch
color="#a991f1"
trackColor={{
- false: "#62686E",
- true: "#a991f1"
+ false: '#62686E',
+ true: '#a991f1',
}}
style={styles.switch}
value={physics.labels}
@@ -306,7 +332,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
/>
<Text
preset="fieldLabel"
- text={"Scale when labels become visible: " + physics.labelScale}
+ text={'Scale when labels become visible: ' + physics.labelScale}
/>
<Slider
minimumTrackTintColor="#a991f1"
@@ -325,11 +351,8 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
),
},
{
- title: "Modes",
- content: (
- <View>
- </View>
- ),
+ title: 'Modes',
+ content: <View></View>,
},
]
@@ -367,13 +390,15 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
if (tweaks) {
return (
<View style={styles.container}>
- <View style={{ height: 30, width: "100%", backgroundColor: "#2a2e38" }}>
+ <View
+ style={{ height: 30, width: '100%', backgroundColor: '#2a2e38' }}
+ >
<TouchableOpacity
style={{
width: 30,
- color: "#a991f1",
- textAlign: "center",
- marginLeft: "auto",
+ color: '#a991f1',
+ textAlign: 'center',
+ marginLeft: 'auto',
padding: 5,
}}
onPress={() => {
@@ -405,11 +430,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
setTweaks(true)
}}
style={{
- position: "absolute",
+ position: 'absolute',
top: 50,
left: 50,
width: 30,
- color: "#ffffff",
+ color: '#ffffff',
zIndex: 100,
}}
>
@@ -421,17 +446,17 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
return (
<View
style={{
- position: "absolute",
- top: "5%",
- left: "5%",
+ position: 'absolute',
+ top: '5%',
+ left: '5%',
zIndex: 100,
width: 300,
- backgroundColor: "#000000",
+ backgroundColor: '#000000',
padding: 20,
}}
>
<Text preset="bold" text="Physics" />
- <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
+ <Text preset="fieldLabel" text={'Repulsive force: ' + physics.charge} />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -445,7 +470,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.charge}
step={1}
/>
- <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
+ <Text
+ preset="fieldLabel"
+ text={'Link Force: ' + physics.linkStrength}
+ />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -459,7 +487,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.linkStrength}
step={0.1}
/>
- <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
+ <Text
+ preset="fieldLabel"
+ text={"'Link Iterations': " + physics.linkIts}
+ />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -474,12 +505,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
step={1}
/>
<Text preset="fieldLabel" text="Collision" />
- <Switch
- color="#a991f1"
- trackColor={{
- false: "#62686E",
- true: "#a991f1"
- }}
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: '#62686E',
+ true: '#a991f1',
+ }}
style={styles.switch}
value={physics.collision}
onValueChange={() => {
@@ -487,7 +518,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
}}
/>
<Text preset="bold" text="Visual" />
- <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
+ <Text preset="fieldLabel" text={'Particles: ' + physics.particles} />
<Slider
minimumTrackTintColor="#a991f1"
maximumTrackTintColor="#242730"
@@ -503,12 +534,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
/>
<Text preset="bold" text="Modes" />
<Text preset="fieldLabel" text="Expandable Graph" />
- <Switch
- color="#a991f1"
- trackColor={{
- false: "#62686E",
- true: "#a991f1"
- }}
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: '#62686E',
+ true: '#a991f1',
+ }}
style={styles.switch}
value={physics.collapse}
onValueChange={() => {
@@ -516,12 +547,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
}}
/>
<Text preset="fieldLabel" text="3D" />
- <Switch
- color="#a991f1"
- trackColor={{
- false: "#62686E",
- true: "#a991f1"
- }}
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: '#62686E',
+ true: '#a991f1',
+ }}
style={styles.switch}
value={physics.threedim}
onValueChange={() => {
@@ -535,85 +566,85 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
const styles = StyleSheet.create({
container: {
- display: "flex",
- backgroundColor: "#2a2e38",
- position: "absolute",
+ display: 'flex',
+ backgroundColor: '#2a2e38',
+ position: 'absolute',
zIndex: 5,
- marginLeft: "2%",
- marginTop: "2%",
+ marginLeft: '2%',
+ marginTop: '2%',
maxWidth: 275,
borderRadius: 10,
- borderStyle: "solid",
+ borderStyle: 'solid',
borderWidth: 10,
- borderColor: "#2a2e38",
- maxHeight: "80%",
+ borderColor: '#2a2e38',
+ maxHeight: '80%',
paddingBottom: 20,
},
title: {
- textAlign: "left",
+ textAlign: 'left',
fontSize: 22,
- fontWeight: "300",
+ fontWeight: '300',
marginBottom: 20,
paddingLeft: 10,
},
header: {
- backgroundColor: "#2a2e38",
+ backgroundColor: '#2a2e38',
padding: 10,
paddingBottom: 20,
- textAlign: "left",
+ textAlign: 'left',
},
headerText: {
- textAlign: "left",
+ textAlign: 'left',
paddingLeft: 30,
fontSize: 16,
- fontWeight: "500",
+ fontWeight: '500',
},
content: {
padding: 20,
paddingLeft: 60,
- backgroundColor: "#000000",
+ backgroundColor: '#000000',
},
active: {
- backgroundColor: "#2a2e38",
+ backgroundColor: '#2a2e38',
},
inactive: {
- backgroundColor: "#2a2e38",
+ backgroundColor: '#2a2e38',
},
selectors: {
marginBottom: 10,
- flexDirection: "row",
- justifyContent: "center",
+ flexDirection: 'row',
+ justifyContent: 'center',
},
selector: {
- backgroundColor: "#2a2e38",
+ backgroundColor: '#2a2e38',
padding: 10,
},
activeSelector: {
- fontWeight: "bold",
+ fontWeight: 'bold',
},
selectTitle: {
fontSize: 14,
- fontWeight: "500",
+ fontWeight: '500',
padding: 10,
},
multipleToggle: {
- flexDirection: "row",
- justifyContent: "center",
+ flexDirection: 'row',
+ justifyContent: 'center',
marginVertical: 30,
- alignItems: "center",
+ alignItems: 'center',
},
multipleToggle__title: {
fontSize: 16,
marginRight: 8,
},
slider: {
- minimumTrackTintColor: "#a991f1",
- thumbTintColor: "#a991f1",
+ minimumTrackTintColor: '#a991f1',
+ thumbTintColor: '#a991f1',
height: 40,
- width: "90%",
+ width: '90%',
},
switch: {
- width: "5",
+ width: '5',
height: 20,
marginVertical: 10,
},
diff --git a/app/components/wallpaper/wallpaper.presets.ts b/app/components/wallpaper/wallpaper.presets.ts
index 3885b8f..148ad5c 100644
--- a/app/components/wallpaper/wallpaper.presets.ts
+++ b/app/components/wallpaper/wallpaper.presets.ts
@@ -1,10 +1,10 @@
-import { ImageStyle } from "react-native"
+import { ImageStyle } from 'react-native'
/**
* All wallpaper will start off looking like this.
*/
const BASE: ImageStyle = {
- position: "absolute",
+ position: 'absolute',
top: 0,
left: 0,
bottom: 0,
@@ -22,7 +22,7 @@ export const presets = {
*/
stretch: {
...BASE,
- resizeMode: "stretch",
+ resizeMode: 'stretch',
width: null, // Have to set these to null because android ¯\_(ツ)_/¯
height: null,
} as ImageStyle,
diff --git a/app/components/wallpaper/wallpaper.props.ts b/app/components/wallpaper/wallpaper.props.ts
index 592bac9..9d97f12 100644
--- a/app/components/wallpaper/wallpaper.props.ts
+++ b/app/components/wallpaper/wallpaper.props.ts
@@ -1,5 +1,5 @@
-import { ImageStyle, StyleProp } from "react-native"
-import { WallpaperPresets } from "./wallpaper.presets"
+import { ImageStyle, StyleProp } from 'react-native'
+import { WallpaperPresets } from './wallpaper.presets'
export interface WallpaperProps {
/**
diff --git a/app/components/wallpaper/wallpaper.story.tsx b/app/components/wallpaper/wallpaper.story.tsx
index 8f5488a..14a5f62 100644
--- a/app/components/wallpaper/wallpaper.story.tsx
+++ b/app/components/wallpaper/wallpaper.story.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Wallpaper } from "./wallpaper"
+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)
+storiesOf('Wallpaper', module)
.addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add("Style Presets", () => (
+ .add('Style Presets', () => (
<Story>
<UseCase text="default/stretch" usage="Full screen wallpaper image.">
<Wallpaper />
diff --git a/app/components/wallpaper/wallpaper.tsx b/app/components/wallpaper/wallpaper.tsx
index 7aaad37..f5e24f1 100644
--- a/app/components/wallpaper/wallpaper.tsx
+++ b/app/components/wallpaper/wallpaper.tsx
@@ -1,7 +1,7 @@
-import React from "react"
-import { AutoImage as Image } from "../auto-image/auto-image"
-import { presets } from "./wallpaper.presets"
-import { WallpaperProps } from "./wallpaper.props"
+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")
@@ -12,7 +12,7 @@ import { WallpaperProps } from "./wallpaper.props"
*/
export function Wallpaper(props: WallpaperProps) {
// grab the props
- const { preset = "stretch", style: styleOverride, backgroundImage } = props
+ const { preset = 'stretch', style: styleOverride, backgroundImage } = props
// assemble the style
const presetToUse = presets[preset] || presets.stretch
@@ -21,5 +21,5 @@ export function Wallpaper(props: WallpaperProps) {
// figure out which image to use
//const source = backgroundImage || defaultImage
- return null//<Image source={source} style={styles} />
+ return null //<Image source={source} style={styles} />
}