rn-css 1.8.13 → 1.9.0

package/dist/index.js

@@ -1,60 +1,170 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable react/prop-types */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const app_json_1 = require("./app.json");
+const src_1 = __importDefault(require("./src"));
+const value = 100;
+const View = src_1.default.View `
+  background: green;
+  border-radius: 50%;
+  width: 200px;
+  height: 200px;
+`;
+const Dot = (0, src_1.default)(react_native_1.Animated.View) `
+  width: 5em;
+  height: 5em;
+  margin: 2em;
+  border-radius: 50%;
+  z-index: 10;
+`;
+const StyledText = src_1.default.Text `
+  color: ${props => props.col || 'black'}
+  font-size: 1em;
+  @media (max-width: 40em) {
+    color: blue;
+    font-size: 2em;
+  }
+  @media (max-width: 20em) {
+    color: red;
+    font-size: 3em;
+  }
+`;
+const Box = src_1.default.View `
+  width: ${value}em;
+  max-width: 50vw;
+`;
+const Box2 = src_1.default.View `
+  width: 100vw;
+  height: 2em;
+  background: blue;
+`;
+const Popup = src_1.default.View `
+  z-index: 20;
+  position: absolute;
+  top: calc(100% + 2px);
+  background-color: black;
+`;
+const Hoverable = src_1.default.View `
+  width: 100px;
+  height: 100px;
+  background: red;
+  &:hover {
+    background: blue;
+  }
+`;
+const HoverableText = src_1.default.Text `
+  &:hover {
+    fontSize: 2em
+  }
+`;
+const Options = src_1.default.FlatList.attrs(props => ({ pressed: props.selected || props.pressed })) `
+  position: absolute;
+  top: 100%;
+  z-index: 1;
+`;
+const ColorCircle = src_1.default.TouchableOpacity `
+  background-color: ${props => props.color};
+  width: ${props => props.size || 2}em;
+  height: ${props => props.size || 2}em;
+  opacity: 1;
+  border-radius: 50%;
+  &:hover {
+    background-color: red;
+    opacity: 0.5;
+  }
+`;
+const FlatList = () => {
+    return react_1.default.createElement(Options, { data: ['teset'], selected: true, pressed: true, renderItem: ({ item }) => (react_1.default.createElement(StyledText, { col: 'blue' }, item)) });
+};
+const Comp = ({ style, text }) => {
+    return react_1.default.createElement(View, { style: style },
+        react_1.default.createElement(react_native_1.Text, null, text));
+};
+const ExtendedComp = (0, src_1.default)(Comp).attrs({ text: 'test' }) ``;
+// const ExtendedComp2 = styled(Comp)<{ small: boolean }>`
+//   ${props => props.small ? 'font-size: 0.8em' : ''}
+// `
+const CustomTouchable = src_1.default.TouchableOpacity.attrs({ activeOpacity: 1 }) ``;
+const Touchable = src_1.default.TouchableOpacity `
+  background-color: ${props => props.pressed ? 'blue' : 'red'};
+  &:active {
+    background-color: purple;
+  }
+`;
+// const CustomSelectContainer = styled.TouchableOpacity.attrs({ activeOpacity: 1 })`
+//   padding: 2px;
+//   margin: 0.2em;
+//   border-radius: 0.6em;
+//   width: 8em;
+//   height: 3.6em;
+//   flex-direction: row;
+//   background-color: white;
+//   border-width: 1px;
+//   border-style: solid;
+// `
+const Forward = react_1.default.forwardRef((props, ref) => {
+    return react_1.default.createElement(Touchable, { ref: ref, ...props, pressed: true });
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+Forward.displayName = 'Forward';
+const Button = ({ color, style }) => {
+    const [pressed, setPressed] = react_1.default.useState(false);
+    return react_1.default.createElement(Touchable, { pressed: pressed, onPress: () => setPressed(!pressed) },
+        react_1.default.createElement(StyledText, { style: style, col: color }, "Press Me!"));
 };
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+const StyledButton = (0, src_1.default)(Button).attrs(({ color: 'black' })) ``;
+const StyledButton2 = (0, src_1.default)(Button).attrs(({ color: 'black' })) ``;
+const App = () => {
+    const ref = react_1.default.useRef(null);
+    const ref2 = react_1.default.useRef(null);
+    react_1.default.useLayoutEffect(() => console.log(ref), []);
+    const dotLeft = react_1.default.useRef(new react_native_1.Animated.Value(0));
+    const dotStyle = react_1.default.useMemo(() => ({
+        left: dotLeft.current.interpolate({
+            inputRange: [0, 50],
+            outputRange: ['0%', '50%']
+        })
+    }), []);
+    // const LangDropdownItem = styled.View.attrs<{ label: string; value: number }>(
+    //   ({ label }) => ({
+    //     label: label + 2
+    //   })
+    // )`
+    //   z-index: ${props => props.value + ''};
+    // `
+    const touchableProps = { activeOpacity: 0 };
+    return (react_1.default.createElement(Box, { ref: ref2 },
+        react_1.default.createElement(View, { style: { flexDirection: 'column' } },
+            react_1.default.createElement(StyledText, { ref: ref, col: 'black', numberOfLines: 1, style: { flexGrow: 1, flexBasis: 'auto' } }, "Welcome to ReactNativeStyledComponents")),
+        react_1.default.createElement(Box, null,
+            react_1.default.createElement(Box, null,
+                react_1.default.createElement(Box, null,
+                    react_1.default.createElement(StyledText, { col: 'red' }, "Placeholder"),
+                    react_1.default.createElement(Popup, null,
+                        react_1.default.createElement(StyledText, { col: 'green' }, "Should be over")))),
+            react_1.default.createElement(Box, null,
+                react_1.default.createElement(StyledText, { col: 'red' }, "Placeholder"))),
+        react_1.default.createElement(Hoverable, null,
+            react_1.default.createElement(StyledText, { col: 'white' }, "Hover me !")),
+        react_1.default.createElement(HoverableText, null, "Hover me !"),
+        react_1.default.createElement(StyledButton, { fallbackColor: 'white' }),
+        react_1.default.createElement(StyledButton2, { color: 'white' }),
+        react_1.default.createElement(FlatList, null),
+        react_1.default.createElement(Box2, null),
+        react_1.default.createElement(ColorCircle, { color: "#236AFF", onLayout: (e) => { console.log(e.nativeEvent.layout); } }),
+        react_1.default.createElement(Dot, { style: dotStyle }),
+        react_1.default.createElement(CustomTouchable, { style: {}, ...touchableProps, activeOpacity: 0, extra: 'test' },
+            react_1.default.createElement(ExtendedComp, { style: {}, text: 'notest' }))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemContext = exports.FontSizeContext = exports.SharedValue = exports.cssToRNStyle = void 0;
-const RN = __importStar(require("react-native"));
-require("./polyfill");
-const styleComponent_1 = __importStar(require("./styleComponent"));
-var cssToRN_1 = require("./cssToRN");
-Object.defineProperty(exports, "cssToRNStyle", { enumerable: true, get: function () { return cssToRN_1.cssToRNStyle; } });
-var styleComponent_2 = require("./styleComponent");
-Object.defineProperty(exports, "SharedValue", { enumerable: true, get: function () { return styleComponent_2.SharedValue; } });
-Object.defineProperty(exports, "FontSizeContext", { enumerable: true, get: function () { return styleComponent_2.FontSizeContext; } });
-Object.defineProperty(exports, "RemContext", { enumerable: true, get: function () { return styleComponent_2.RemContext; } });
-__exportStar(require("./useTheme"), exports);
-const styled = (Component) => (0, styleComponent_1.default)(Component);
-styled.ActivityIndicator = styled(RN.ActivityIndicator);
-styled.DrawerLayoutAndroid = styled(RN.DrawerLayoutAndroid);
-styled.Image = styled(RN.Image);
-styled.ImageBackground = styled(RN.ImageBackground);
-styled.KeyboardAvoidingView = styled(RN.KeyboardAvoidingView);
-styled.Modal = styled(RN.Modal);
-styled.NavigatorIOS = styled(RN.NavigatorIOS);
-styled.ScrollView = styled(RN.ScrollView);
-styled.SnapshotViewIOS = styled(RN.SnapshotViewIOS);
-styled.Switch = styled(RN.Switch);
-styled.RecyclerViewBackedScrollView = styled(RN.RecyclerViewBackedScrollView);
-styled.RefreshControl = styled(RN.RefreshControl);
-styled.SafeAreaView = styled(RN.SafeAreaView);
-styled.Text = styled(RN.Text);
-styled.TextInput = styled(RN.TextInput);
-styled.TouchableHighlight = styled(RN.TouchableHighlight);
-styled.TouchableNativeFeedback = styled(RN.TouchableNativeFeedback);
-styled.TouchableOpacity = styled(RN.TouchableOpacity);
-styled.TouchableWithoutFeedback = styled(RN.TouchableWithoutFeedback);
-styled.View = styled(RN.View);
-styled.FlatList = styleComponent_1.styledFlatList;
-styled.SectionList = styleComponent_1.styledSectionList;
-styled.VirtualizedList = styleComponent_1.styledVirtualizedList;
-exports.default = styled;
+react_native_1.AppRegistry.registerComponent(app_json_1.name, () => App);
+if (react_native_1.Platform.OS === 'web') {
+    react_native_1.AppRegistry.runApplication(app_json_1.name, {
+        rootTag: document.getElementsByTagName('body')[0]
+    });
+}
+exports.default = App;

package/dist/src/convertStyle.d.ts

@@ -0,0 +1,5 @@
+import { /* StyleSheet, */ Animated, TextStyle } from 'react-native';
+import type { AnyStyle, PartialStyle, Units } from './types';
+/** Mix the calculated RN style within the object style */
+declare const convertStyle: <T extends AnyStyle | Animated.WithAnimatedObject<import("react-native").ViewStyle> | Animated.WithAnimatedObject<TextStyle> | Animated.WithAnimatedObject<import("react-native").ImageStyle> = AnyStyle>(rnStyle: PartialStyle, units: Units) => T;
+export default convertStyle;

package/dist/src/convertStyle.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const convertUnits_1 = require("./convertUnits");
+/** Mix the calculated RN style within the object style */
+const convertStyle = (rnStyle, units) => {
+    /** This is the result of the convertions from css style into RN style */
+    const convertedStyle = {};
+    // If width and height are specified, we can use those values for the first render
+    ['width', 'height'].forEach(key => {
+        if (!units[key] && rnStyle[key]) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const converted = (0, convertUnits_1.convertValue)(key, rnStyle[key], units);
+            if (!Number.isNaN(converted))
+                units[key] = converted;
+        }
+    });
+    Object.keys(rnStyle).forEach(key => {
+        const value = rnStyle[key] || '0';
+        // Handle object values
+        if (key === 'transform' && rnStyle.transform) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            convertedStyle.transform = rnStyle.transform.map(transformation => {
+                const result = {};
+                Object.keys(transformation).forEach(k => (result[k] = (0, convertUnits_1.convertValue)(k, transformation[k], units)));
+                return result;
+            });
+        }
+        else if (key === 'shadowOffset' && rnStyle.shadowOffset) {
+            convertedStyle.shadowOffset = {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                width: (0, convertUnits_1.convertValue)(key, rnStyle.shadowOffset.width || '0', units),
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                height: (0, convertUnits_1.convertValue)(key, rnStyle.shadowOffset.height || '0', units)
+            };
+        }
+        else if (key === 'textShadowOffset' && rnStyle.textShadowOffset) {
+            convertedStyle.textShadowOffset = {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                width: (0, convertUnits_1.convertValue)(key, rnStyle.textShadowOffset.width || '0', units),
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                height: (0, convertUnits_1.convertValue)(key, rnStyle.textShadowOffset.height || '0', units)
+            };
+        }
+        // Font family should not be transformed (same as cursor for web in case of base64 value)
+        else if (['cursor', 'fontFamily'].includes(key)) {
+            convertedStyle[key] = value;
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            convertedStyle[key] = (0, convertUnits_1.convertValue)(key, value, units);
+        }
+    });
+    return convertedStyle;
+};
+exports.default = convertStyle;

package/dist/src/convertUnits.d.ts

@@ -0,0 +1,5 @@
+import type { PartialStyle, Transform, Units } from './types';
+/** Take a css value like 12em and return [12, 'em'] */
+export declare function parseValue(value: string): [number, string | undefined];
+/** Convert a value using the provided unit transform table */
+export declare function convertValue(key: keyof PartialStyle | keyof Transform, value: string, units: Units): string | number;

package/dist/src/convertUnits.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertValue = exports.parseValue = void 0;
+const maths_1 = require("./cssToRN/maths");
+const react_native_1 = require("react-native");
+/** Take a css value like 12em and return [12, 'em'] */
+function parseValue(value) {
+    // Match a single unit
+    const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)?/i);
+    return [parseFloat(unit[1]), unit[3]];
+}
+exports.parseValue = parseValue;
+/** Convert a value using the provided unit transform table */
+function convertValue(key, value, units) {
+    if (typeof value !== 'string') {
+        console.error(`Failed to parse CSS instruction: ${key}=${value}. We expect a string, but ${value} was of type ${typeof value}.`);
+        return 0;
+    }
+    // colors should be left untouched
+    if (value.startsWith('#'))
+        return value;
+    // Percentage values need to rely on an other unit as reference
+    const finalUnits = { ...units };
+    if (value.includes('%')) {
+        if (react_native_1.Platform.OS === 'web')
+            return value;
+        if (['marginTop', 'marginBottom', 'translateY'].includes(key))
+            finalUnits['%'] = units.height / 100;
+        else if (['marginLeft', 'marginRight', 'translateX'].includes(key))
+            finalUnits['%'] = units.width / 100;
+        else if (key.startsWith('border') && key.endsWith('Radius'))
+            finalUnits['%'] = (units.width + units.height) / 200;
+        else if (['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'top', 'left', 'bottom', 'right', 'flexBasis', 'rotate3d'].includes(key)) {
+            if (value.startsWith('calc') || value.startsWith('max') || value.startsWith('min')) {
+                if (['height', 'minHeight', 'maxHeight', 'top', 'bottom'].includes(key))
+                    finalUnits['%'] = units.height / 100;
+                else
+                    finalUnits['%'] = units.width / 100;
+            }
+            // width: 100%, height: 100% are supported
+            else
+                return value;
+        }
+        else if (['lineHeight'].includes(key))
+            finalUnits['%'] = units.em / 100;
+        else
+            finalUnits['%'] = 0.01;
+    }
+    // We replace all units within the value
+    const convertedValue = value.replace(/(\b\d+(\.\d+)?)([a-z]+\b|%)/ig, occ => {
+        const [val, unit] = parseValue(occ);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (['deg', 'rad', 'turn', 's'].includes(unit))
+            return occ; // We don't want to convert deg, rad, turn, second units
+        return val * (finalUnits[unit || 'px']) + '';
+    });
+    // We handle extra calculations (calc, min, max, parsing...)
+    if (convertedValue.startsWith('calc('))
+        return (0, maths_1.calculate)(convertedValue.substring(4)); // remove calc. We can keep the parenthesis
+    else if (convertedValue.startsWith('max('))
+        return (0, maths_1.max)(convertedValue.substring(4, convertedValue.length - 1)); // Remove max()
+    else if (convertedValue.startsWith('min('))
+        return (0, maths_1.min)(convertedValue.substring(4, convertedValue.length - 1)); // remove min()
+    else if (key === 'fontWeight')
+        return convertedValue; // fontWeight must be a string even when it is an integer value.
+    else if (parseFloat(convertedValue) + '' === convertedValue)
+        return parseFloat(convertedValue);
+    else
+        return convertedValue;
+}
+exports.convertValue = convertValue;

package/dist/src/cssToRN/convert.d.ts

@@ -0,0 +1,55 @@
+import type { Style, Transform } from '../types';
+/** Parse a css value for border */
+export declare function border(value: string): {
+    [x: string]: string;
+};
+/** Parse a css value for border-like elements */
+export declare function borderLike(prefixKey: 'outline' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom', value: string): {
+    [x: string]: string;
+};
+export declare function shadow(prefix: 'textShadow' | 'shadow', value: string): {
+    [x: string]: string | {
+        width: string;
+        height: string;
+    };
+};
+export declare function flex(value: string): {
+    flexBasis: string;
+    flexGrow?: undefined;
+    flexShrink?: undefined;
+} | {
+    flexGrow: string;
+    flexBasis: string;
+    flexShrink?: undefined;
+} | {
+    flexGrow: string;
+    flexShrink: string;
+    flexBasis: string;
+};
+export declare function flexFlow(value: string): {
+    [prop: string]: string;
+};
+export declare function placeContent(value: string): {
+    alignContent: string;
+    justifyContent: string;
+};
+export declare function background(value: string): {
+    backgroundColor: string | undefined;
+};
+export declare function textDecoration(value: string): {
+    textDecorationLine: string;
+    textDecorationStyle: string;
+    textDecorationColor: string;
+};
+export declare function transform(value: string): {
+    transform: Transform[];
+};
+export declare function font(value: string): Style;
+/** Parses a css value for the side of an element (border-width, margin, padding) */
+export declare function sideValue<T extends 'padding' | 'margin' | 'border'>(prefixKey: T, value: string, postFix?: T extends 'border' ? 'Width' | 'Style' | 'Color' | '' : ''): {
+    [x: string]: string;
+};
+/** Parses a css value for the corner of an element (border-radius) */
+export declare function cornerValue(prefixKey: 'border', value: string, postFix: 'Radius'): {
+    [x: string]: string;
+};