expo-snowui 1.0.0

package/src/component/snow-range-slider.js

@@ -0,0 +1,263 @@
+import React from "react";
+import {
+    PanResponder,
+    Pressable,
+    View,
+    findNodeHandle
+} from "react-native";
+import { useDebouncedCallback } from 'use-debounce'
+import { useFocusContext } from '../context/snow-focus-context'
+import { useStyleContext } from '../context/snow-style-context'
+
+const min = 0.0
+const max = 1.0
+const step = 0.01
+
+/* spread props
+nextFocusLeft
+nextFocusRight
+nextFocusUp
+nextFocusDown
+*/
+
+// This is a tricky component because props.value can be debounced
+// The numerical value the component provides is `percent`
+// This is a float between 0.0 and 1.0, to ease multiplication
+
+// The slider has two primary components, the thumb and the track.
+// The thumb's position within the track determines the `percent` used throughout the component
+// However, that position can also be decided by the parent by passing in a percent
+// When the component is being manually updated, then parent updates should be ignored
+// Otherwise the parent should take priority
+
+// I first tried @react-native-community/slider
+// It did not offer enough customization of the track and thumb
+
+// I then tried @react-native-assets/slider
+// It completely breaks in Android or Web, depending on the version of react I override it to use
+
+// After a handful of other libraries still had problems, I rolled my own
+export function SnowRangeSlider(props) {
+    const { SnowStyle, SnowConfig } = useStyleContext(props)
+    const { allowFocusing, setLockedElement, lockedElement } = useFocusContext()
+
+    const isDraggingRef = React.useRef(false)
+    const [percent, setPercent] = React.useState(0)
+    const percentRef = React.useRef(percent)
+    const [thumbFocus, setThumbFocus] = React.useState(false)
+    const elementRef = React.useRef(null)
+    const [applyStepInterval, setApplyStepInterval] = React.useState(null)
+
+    let sliderWidth = SnowStyle.component.rangeSlider.trackWrapper.width
+    if (props.width) {
+        sliderWidth = props.width
+    }
+
+    const layoutsRef = React.useRef({
+        slider: sliderWidth,
+        track: 0,
+        thumb: 0,
+        leftTrack: 0,
+        rightTrack: sliderWidth
+    })
+
+    let onValueChange = props.onValueChange
+    if (props.debounce) {
+        onValueChange = useDebouncedCallback(props.onValueChange, SnowConfig.inputDebounceMilliseconds)
+    }
+
+    const thumbPositionToPercent = (positionX) => {
+        let actionPositionX = positionX - layoutsRef.current.track.x - (layoutsRef.current.thumb.width / 2)
+        if (actionPositionX < 0) {
+            actionPositionX = 0
+        }
+        if (actionPositionX > sliderWidth) {
+            actionPositionX = sliderWidth
+        }
+        let newPercent = actionPositionX / sliderWidth
+        if (newPercent < 0) {
+            newPercent = 0
+        }
+        if (newPercent > 1) {
+            newPercent = 1
+        }
+        setPercent(newPercent)
+        percentRef.current = newPercent
+    }
+
+    const panRef = React.useRef(
+        PanResponder.create({
+            onStartShouldSetPanResponder: () => true,
+            onMoveShouldSetPanResponder: () => true,
+            onPanResponderEnd: () => {
+                isDraggingRef.current = false
+                onValueChange(percentRef.current)
+            },
+            onPanResponderRelease: () => {
+                isDraggingRef.current = false
+                onValueChange(percentRef.current)
+            },
+            onPanResponderMove: (pressEvent, gestureState) => {
+                isDraggingRef.current = true
+                let positionX = gestureState.moveX
+                if (!positionX) {
+                    positionX = gestureState.x0
+                }
+                thumbPositionToPercent(positionX)
+            },
+            onPanResponderGrant: (pressEvent, gestureState) => {
+                isDraggingRef.current = true
+                let positionX = gestureState.moveX
+                if (!positionX) {
+                    positionX = gestureState.x0
+                }
+                thumbPositionToPercent(positionX)
+            }
+        })
+    );
+
+    React.useEffect(() => {
+        if (!isDraggingRef.current) {
+            setPercent(props.percent)
+        }
+    }, [props.percent])
+
+    React.useEffect(() => {
+        percentRef.current = percent
+    }, [percent])
+
+    React.useEffect(() => {
+        if (props.setRemoteCallbacks) {
+            props.setRemoteCallbacks((callbacks) => {
+                callbacks['slider'] = sliderHandleRemote
+                return callbacks
+            })
+            return () => {
+                props.setRemoteCallbacks((callbacks) => {
+                    callbacks['slider'] = null
+                    return callbacks
+                })
+            }
+        }
+
+    })
+
+    const applyStep = (amount) => {
+        let result = percentRef.current + amount
+        if (result < min) {
+            result = min
+        }
+        if (result > max) {
+            result = max
+        }
+        percentRef.current = result
+        setPercent(result)
+        onValueChange(result)
+    }
+
+    const longPress = (amount, action) => {
+        if (action === 0) {
+            applyStep(amount)
+            setApplyStepInterval(setInterval(() => { applyStep(amount) }, 100))
+        }
+        if (action === 1) {
+            clearInterval(applyStepInterval)
+        }
+    }
+
+    const sliderHandleRemote = (kind, action) => {
+        if (lockedElement) {
+            if (kind === 'right') {
+                applyStep(step)
+                clearInterval(applyStepInterval)
+            }
+            else if (kind === 'longRight') {
+                longPress(step * 2, action)
+            }
+            else if (kind === 'left') {
+                applyStep(-step)
+                clearInterval(applyStepInterval)
+            }
+            else if (kind === 'longLeft') {
+                longPress(-step * 2, action)
+            }
+            else if (kind === 'down') {
+                focusThumb(false)
+            }
+        }
+    }
+
+    const focusThumb = (focus) => {
+        if (allowFocusing) {
+            if (focus !== thumbFocus) {
+                if (focus) {
+                    setLockedElement(findNodeHandle(elementRef.current))
+                } else {
+                    setLockedElement(null)
+                }
+                setThumbFocus(focus)
+            }
+        }
+    }
+
+    const trackWrapperStyle = [
+        SnowStyle.component.rangeSlider.trackWrapper,
+        {
+            width: sliderWidth
+        }
+    ]
+
+    let thumbX = 0
+    if (isDraggingRef.current) {
+        thumbX = percent * sliderWidth
+    }
+    else {
+        thumbX = percentRef.current * sliderWidth
+    }
+
+    const leftTrackStyle = [
+        SnowStyle.component.rangeSlider.leftTrack,
+        {
+            width: thumbX
+        }
+    ]
+
+    let thumbStyle = [
+        SnowStyle.component.rangeSlider.thumb,
+        {
+            left: thumbX - SnowStyle.component.rangeSlider.thumb.width / 2
+        }
+    ]
+    if (thumbFocus) {
+        thumbStyle.push({
+            backgroundColor: 'white'
+        })
+    }
+
+    const handleLayout = (kind) => {
+        return (event) => {
+            let widths = { ...layoutsRef.current }
+            widths[kind] = event.nativeEvent.layout
+            layoutsRef.current = widths
+        };
+    }
+
+    return (
+        <View onLayout={handleLayout('slider')} style={SnowStyle.component.rangeSlider.wrapper}>
+            <View {...panRef.current.panHandlers} onLayout={handleLayout('track')} style={trackWrapperStyle}>
+                <View onLayout={handleLayout('leftTrack')} style={leftTrackStyle} />
+                <View onLayout={handleLayout('rightTrack')} style={SnowStyle.component.rangeSlider.rightTrack} />
+                <Pressable
+                    {...props}
+                    onLayout={handleLayout('thumb')}
+                    ref={elementRef}
+                    onPress={() => { focusThumb(true) }}
+                    onFocus={() => { focusThumb(true) }}
+                    focusable={true}
+                    style={thumbStyle} />
+            </View>
+        </View>
+    );
+}
+
+export default SnowRangeSlider

package/src/component/snow-safe-area.js

@@ -0,0 +1,17 @@
+import { View, TVFocusGuideView } from 'react-native'
+import { useStyleContext } from '../context/snow-style-context'
+
+export function SnowSafeArea(props) {
+    const { SnowStyle } = useStyleContext(props)
+    let Wrapper = View
+    if (SnowStyle.isTV) {
+        Wrapper = TVFocusGuideView
+    }
+    return (
+        <Wrapper autoFocus snowStyle={SnowStyle} style={SnowStyle.component.safeArea}>
+            {props.children}
+        </Wrapper>
+    )
+}
+
+export default SnowSafeArea

package/src/component/snow-tabs.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import { View } from 'react-native';
+
+import SnowDropdown from './snow-dropdown'
+import { useStyleContext } from '../context/snow-style-context'
+
+export function SnowTabs(props) {
+    const { SnowStyle } = useStyleContext(props)
+    if (!props.headers) {
+        return null
+    }
+    if (!props.children) {
+        return null
+    }
+
+    const [tabIndex, setTabIndex] = React.useState(0)
+    const tabStyle = {
+        color: {
+            fade: SnowStyle.color.panel
+        },
+        component: {
+            textButton: {
+                fade: {
+                    backgroundColor: SnowStyle.color.panel
+                },
+                fadeText: {
+                    color: SnowStyle.color.text
+                }
+            },
+            imageButton: {
+                wrapper: {
+                    borderColor: SnowStyle.color.panel
+                }
+            }
+        }
+    }
+
+    const tabs = React.Children.toArray(props.children).map(child => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { snowStyle: tabStyle });
+        }
+        return child;
+    }).filter(child => child !== null);
+
+    return (
+        <View>
+            <SnowDropdown
+                snowStyle={tabStyle}
+                fade
+                options={props.headers}
+                onValueChange={setTabIndex}
+                valueIndex={tabIndex}
+                itemsPerRow={props.headers.length} />
+            <View style={SnowStyle.component.tabs.panel}>
+                {tabs[tabIndex]}
+            </View>
+        </View>
+    )
+
+}
+
+export default SnowTabs

package/src/component/snow-text-button.js

@@ -0,0 +1,106 @@
+import React from 'react'
+import { Pressable, Keyboard } from 'react-native';
+import { useFocusContext } from '../context/snow-focus-context'
+import { useStyleContext } from '../context/snow-style-context'
+import SnowText from './snow-text'
+
+/* spread props
+nextFocusLeft
+nextFocusRight
+nextFocusUp
+nextFocusDown
+*/
+
+
+export function SnowTextButton(props) {
+    const { SnowStyle } = useStyleContext(props)
+    const { focusIsLocked } = useFocusContext()
+    const [focused, setFocused] = React.useState(false)
+    const touchRef = React.useRef(null)
+
+    React.useEffect(() => {
+        if (props.shouldFocus && !Keyboard.isVisible()) {
+            touchRef.current.focus()
+        }
+    })
+
+    const wrapperStyle = [SnowStyle.component.textButton.wrapper]
+    if (props.disabled) {
+        wrapperStyle.push(SnowStyle.component.textButton.disabled)
+    }
+    else {
+        if (props.selected) {
+            wrapperStyle.push(SnowStyle.component.textButton.selected)
+        }
+        if (focused) {
+            wrapperStyle.push(SnowStyle.component.textButton.focused)
+        }
+    }
+
+    if (props.fade) {
+        wrapperStyle.push(SnowStyle.component.textButton.fade)
+    }
+
+    if (props.tall && SnowStyle.isWeb) {
+        wrapperStyle.push(SnowStyle.component.textButton.tallWrapper)
+    }
+
+    if (props.style) {
+        wrapperStyle.push(props.style)
+    }
+
+    let textStyle = [SnowStyle.component.textButton.text]
+    if (props.title.length > 18) {
+        textStyle.push(SnowStyle.component.textButton.smallText)
+    }
+
+    if (props.fade) {
+        textStyle.push(SnowStyle.component.textButton.fadeText)
+    }
+
+    if (props.short) {
+        wrapperStyle.push(SnowStyle.component.textButton.shortWrapper)
+        textStyle.push(SnowStyle.component.textButton.smallText)
+    }
+
+    const onPressUnlessTyping = () => {
+        if (props.onPress && !Keyboard.isVisible()) {
+            return props.onPress()
+        }
+    }
+
+    const onLongPressUnlessTyping = () => {
+        if (props.onLongPress && !Keyboard.isVisible()) {
+            return props.onLongPress()
+        }
+    }
+
+    let allowFocus = !focusIsLocked && !Keyboard.isVisible()
+
+    const changeFocus = (focus) => {
+        if (!focusIsLocked) {
+            setFocused(focus)
+        }
+        else {
+            setFocused(false)
+        }
+    }
+
+    return (
+        <Pressable
+            {...props}
+            ref={touchRef}
+            style={wrapperStyle}
+            onPress={onPressUnlessTyping}
+            onLongPress={onLongPressUnlessTyping}
+            focusable={allowFocus || focused}
+            onFocus={() => { changeFocus(true) }}
+            onBlur={() => { changeFocus(false) }}
+            hasTVPreferredFocus={props.shouldFocus && !Keyboard.isVisible}
+            disabled={props.disabled}>
+            <SnowText noSelect style={textStyle}>{props.title}</SnowText>
+        </Pressable >
+    )
+}
+
+export default SnowTextButton

package/src/component/snow-text.js

@@ -0,0 +1,31 @@
+import { View, Text } from 'react-native'
+import { useStyleContext } from '../context/snow-style-context'
+
+export function SnowText(props) {
+    const { SnowStyle } = useStyleContext(props)
+
+    let style = [SnowStyle.component.text.text]
+    if (!props.shrink && !props.skipDefault) {
+        style.push(SnowStyle.component.text.normal)
+    }
+    if (props.noSelect) {
+        style.push(SnowStyle.component.text.noSelect)
+    }
+    if (props.style) {
+        style.push(props.style)
+    }
+    let wrapperStyle = null
+    if (props.center) {
+        wrapperStyle = SnowStyle.component.text.center
+    }
+    return (
+        <View style={wrapperStyle}>
+            <Text
+                style={style}
+                selectable={!props.noSelect}
+                children={props.children} />
+        </View>
+    )
+}
+
+export default SnowText

package/src/component/snow-toggle.js

@@ -0,0 +1,32 @@
+import { Switch, Pressable } from 'react-native'
+import { useStyleContext } from '../context/snow-style-context'
+import { SnowLabel } from './snow-label'
+
+/* spread props
+nextFocusLeft
+nextFocusRight
+nextFocusUp
+nextFocusDown
+*/
+
+export function SnowToggle(props) {
+    const { SnowStyle } = useStyleContext(props)
+
+    const toggleValue = () => {
+        props.onValueChange(!props.value)
+    }
+    return (
+        <Pressable
+            {...props}
+            onPress={toggleValue}
+            style={SnowStyle.component.toggle.center}>
+            <SnowLabel>{props.title}</SnowLabel>
+            <Switch
+                style={{ marginLeft: 'auto', marginRight: 'auto' }}
+                value={props.value}
+                onValueChange={toggleValue} />
+        </Pressable>
+    )
+}
+
+export default SnowToggle

package/src/context/snow-focus-context.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Platform } from 'react-native'
+import { SnowSafeArea } from '../component/snow-safe-area'
+
+const FocusContext = React.createContext({});
+
+export function useFocusContext() {
+    const value = React.useContext(FocusContext);
+    if (!value) {
+        throw new Error('useFocusContext must be wrapped in a <FocusContextProvider />');
+    }
+    return value;
+}
+
+export function FocusContextProvider(props) {
+    const [lockedElement, setLockedElement] = React.useState(null)
+    const focusIsLocked = !!lockedElement
+    const allowFocusing = Platform.isTV
+
+    const focusContext = {
+        allowFocusing,
+        lockedElement,
+        setLockedElement,
+        focusIsLocked
+    }
+    return (
+        <FocusContext.Provider
+            style={{ flex: 1 }}
+            value={focusContext}>
+            <SnowSafeArea style={{ flex: 1 }} >
+                {props.children}
+            </SnowSafeArea>
+        </FocusContext.Provider>
+    );
+}
+
+export default FocusContextProvider

package/src/context/snow-style-context.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import _ from 'lodash'
+import { createStyle, getWindowHeight, getWindowWidth } from '../snow-style'
+
+const StyleContext = React.createContext({});
+
+export function useStyleContext(componentProps) {
+    let value = React.useContext(StyleContext);
+    if (!value) {
+        throw new Error('useStyleContext must be wrapped in a <StyleContextProvider />');
+    }
+    if (componentProps && componentProps.snowStyle) {
+        value = { ...value }
+        value.SnowStyle = _.merge({}, value.SnowStyle, componentProps.snowStyle)
+    }
+    if (componentProps && componentProps.snowConfig) {
+        value = { ...value }
+        value.SnowConfig = _.merge({}, value.SnowConfig, componentProps.snowConfig)
+    }
+    return value;
+}
+
+const AppConfig = {
+    inputDebounceMilliseconds: 700
+}
+
+export function StyleContextProvider(props) {
+    let style = createStyle(props.snowStyle)
+    let config = AppConfig
+    if (props.snowConfig) {
+        config = { ...config, ...props.snowConfig }
+    }
+    const context = {
+        SnowStyle: style,
+        SnowConfig: config,
+        getWindowHeight,
+        getWindowWidth,
+    }
+    return (
+        <StyleContext.Provider style={{ flex: 1 }} value={context}>
+            {props.children}
+        </StyleContext.Provider>
+    )
+}
+
+export default StyleContextProvider

package/src/index.tsx

@@ -0,0 +1,63 @@
+// @ts-nocheck
+export { SnowApp } from './snow-app'
+import { SnowApp } from './snow-app'
+
+export { useFocusContext } from './context/snow-focus-context'
+import { useFocusContext } from './context/snow-focus-context'
+export { useStyleContext } from './context/snow-style-context'
+import { useStyleContext } from './context/snow-style-context'
+
+export { SnowBreak } from './component/snow-break'
+import { SnowBreak } from './component/snow-break'
+export { SnowDropdown } from './component/snow-dropdown'
+import { SnowDropdown } from './component/snow-dropdown'
+export { SnowFillView } from './component/snow-fill-view'
+import { SnowFillView } from './component/snow-fill-view'
+export { SnowGrid } from './component/snow-grid'
+import { SnowGrid } from './component/snow-grid'
+export { SnowHeader } from './component/snow-header'
+import { SnowHeader } from './component/snow-header'
+export { SnowImageButton } from './component/snow-image-button'
+import { SnowImageButton } from './component/snow-image-button'
+export { SnowImageGrid } from './component/snow-image-grid'
+import { SnowImageGrid } from './component/snow-image-grid'
+export { SnowInput } from './component/snow-input'
+import { SnowInput } from './component/snow-input'
+export { SnowLabel } from './component/snow-label'
+import { SnowLabel } from './component/snow-label'
+export { SnowModal } from './component/snow-modal'
+import { SnowModal } from './component/snow-modal'
+export { SnowRangeSlider } from './component/snow-range-slider'
+import { SnowRangeSlider } from './component/snow-range-slider'
+export { SnowSafeArea } from './component/snow-safe-area'
+import { SnowSafeArea } from './component/snow-safe-area'
+export { SnowTabs } from './component/snow-tabs'
+import { SnowTabs } from './component/snow-tabs'
+export { SnowTextButton } from './component/snow-text-button'
+import { SnowTextButton } from './component/snow-text-button'
+export { SnowText } from './component/snow-text'
+import { SnowText } from './component/snow-text'
+export { SnowToggle } from './component/snow-toggle'
+import { SnowToggle } from './component/snow-toggle'
+
+export default {
+  useFocusContext,
+  useStyleContext,
+  App: SnowApp,
+  Break: SnowBreak,
+  Dropdown: SnowDropdown,
+  FillView: SnowFillView,
+  Grid: SnowGrid,
+  Header: SnowHeader,
+  ImageButton: SnowImageButton,
+  ImageGrid: SnowImageGrid,
+  Input: SnowInput,
+  Label: SnowLabel,
+  Modal: SnowModal,
+  RangeSlider: SnowRangeSlider,
+  SafeArea: SnowSafeArea,
+  Tabs: SnowTabs,
+  TextButton: SnowTextButton,
+  Text: SnowText,
+  Toggle: SnowToggle,
+}

package/src/snow-app.js

@@ -0,0 +1,27 @@
+import { View, ScrollView, Platform, Dimensions } from 'react-native'
+import { StyleContextProvider, useStyleContext } from './context/snow-style-context'
+import { FocusContextProvider } from './context/snow-focus-context'
+
+export function SnowApp(props) {
+    const { SnowStyle } = useStyleContext(props)
+    let rootInnerStyle = []
+    if (Platform.OS === 'web') {
+        rootInnerStyle.push({
+            height: Dimensions.get('window').height,
+            backgroundColor: 'black'
+        })
+    }
+    return (
+        <ScrollView style={{ flex: 1, backgroundColor: 'black' }} contentContainerStyle={rootInnerStyle}>
+            <StyleContextProvider snowStyle={props.snowStyle} snowConfig={props.snowConfig}>
+                <FocusContextProvider>
+                    <View style={{ flex: 1, marginBottom: 50 }}>
+                        {props.children}
+                    </View>
+                </FocusContextProvider>
+            </StyleContextProvider>
+        </ScrollView>
+    )
+}
+
+export default SnowApp