rn-custom-style-sheet/lib/module/Core/Components/StyleComponent/CustomStyleComponent.js

React Native component to select a specific value from a range of values.

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useMemo } from 'react';
import { FlatList, Image, SafeAreaView, ScrollView, SectionList, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { useGuideLineBreakpoint, useGuideLineLayout, useScreenResolution, useCurrentBreakpointIndex, useGeneralScreenResolution } from '../..';
import { useDevice } from '../../../MediaQuery';
import { styleProcess, scaleFunc } from '../../../Scaling';
import { useCurrentThemeMode, useCurrentThemeName } from '../../../Theming';
export const styled = Component => (style, options) => {
  const {
    attrs,
    children
  } = options || {};
  return props => {
    const {
      device,
      isDisableScaling,
      style: inlineStyles,
      ...restProps
    } = props;
    const localIsDisableScaling = isDisableScaling ?? false;
    const localAppThemeName = useCurrentThemeName();
    const localThemeMode = useCurrentThemeMode();
    const localDevice = useDevice(device);
    const localScreenResolution = useScreenResolution();
    const localGeneralScreenResolution = useGeneralScreenResolution();
    const localGuideLineLayout = useGuideLineLayout();
    const localGuideLineBreakpoint = useGuideLineBreakpoint();
    const localCurrentBreakpointIndex = useCurrentBreakpointIndex();
    const isDark = localThemeMode === 'dark';
    const StyledProps = {
      ...restProps,
      styleOption: {
        themeMode: localThemeMode,
        themeName: localAppThemeName,
        isDark
      }
    };
    const computedStyles = style instanceof Function ? style(StyledProps) : style;
    const styles = useMemo(() => {
      const newStyles = Array.isArray(computedStyles) ? [...computedStyles, inlineStyles] : [computedStyles, inlineStyles];
      return styleProcess({
        // @ts-ignore
        styles: StyleSheet.flatten(newStyles),
        device: localDevice,
        guideLineBreakpoint: localGuideLineBreakpoint,
        scaleFunc: localIsDisableScaling ? undefined : scaleFunc(localScreenResolution, localGuideLineLayout, localGuideLineBreakpoint, localGeneralScreenResolution, localCurrentBreakpointIndex)
      });
    }, [inlineStyles, computedStyles, localDevice, localGuideLineBreakpoint, localIsDisableScaling, localScreenResolution, localGuideLineLayout, localCurrentBreakpointIndex, localGeneralScreenResolution]);
    const computedProps = {
      ...props,
      ...(attrs || {})
    };
    Component.displayName = Component.displayName || Component.name;
    if (children) {
      return /*#__PURE__*/React.createElement(Component, _extends({}, computedProps, {
        style: styles
      }), children);
    } else {
      return /*#__PURE__*/React.createElement(Component, _extends({}, computedProps, {
        style: styles
      }));
    }
  };
};
styled.SafeAreaView = styled(SafeAreaView);
styled.View = styled(View);
styled.Text = styled(Text);
styled.TextInput = styled(TextInput);
styled.Image = styled(Image);
styled.FlatList = styled(FlatList);
styled.ScrollView = styled(ScrollView);
styled.SectionList = styled(SectionList);
styled.TouchableOpacity = styled(TouchableOpacity);
//# sourceMappingURL=CustomStyleComponent.js.map