🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

styled-native-kit

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

styled-native-kit - npm Package Compare versions

Comparing version
1.0.22
 to
1.1.0
+2
-0
dist/mixins.d.ts

@@ -0,1 +1,2 @@

import { CircleViewProps } from './types';
export declare const centered: import("styled-components").FlattenSimpleInterpolation;

@@ -8,1 +9,2 @@ export declare const screenHeight: import("styled-components").FlattenSimpleInterpolation;

export declare const overlay: import("styled-components").FlattenSimpleInterpolation;
export declare const circle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<CircleViewProps, any>>;
+2
-1
dist/mixins.js

@@ -16,2 +16,3 @@ "use strict";

exports.overlay = styled_components_1.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
exports.circle = styled_components_1.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n"])), function (props) { return props.size || 0; }, function (props) { return props.size || 0; }, function (props) { return props.size / 2 || 0; });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+3
-2
dist/styled.d.ts

@@ -1,2 +0,2 @@

import { TextKitProps, FlexRowProps, WhitespaceProps, CircleViewProps, ViewKitProps, SpacingProps } from './types';
import { TextKitProps, FlexRowProps, WhitespaceProps, ViewKitProps, SpacingProps } from './types';
export declare const Text: import("styled-components").StyledComponent<typeof import("react-native").Text, import("styled-components").DefaultTheme, TextKitProps, never>;

@@ -11,3 +11,4 @@ export declare const View: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, ViewKitProps, never>;

export declare const Spacing: import("styled-components").StyledComponent<typeof import("react-native").View, any, ViewKitProps & SpacingProps, never>;
export declare const CircleView: import("styled-components").StyledComponent<typeof import("react-native").View, any, ViewKitProps & CircleViewProps, never>;
export declare const CircleView: import("styled-components").StyledComponent<typeof import("react-native").View, any, ViewKitProps & import("./types").CircleViewProps, never>;
export declare const CircleMask: import("styled-components").StyledComponent<typeof import("react-native").View, any, ViewKitProps & import("./types").CircleViewProps, never>;
export declare const BottomAbsoluteView: import("styled-components").StyledComponent<typeof import("react-native").View, any, ViewKitProps, never>;

@@ -14,0 +15,0 @@ export declare const TopAbsoluteView: import("styled-components").StyledComponent<typeof import("react-native").View, any, ViewKitProps, never>;

+11
-10
dist/styled.js

@@ -25,3 +25,3 @@ "use strict";

}, function (props) { return props.fontSize && "font-size: " + props.fontSize; }, function (props) { return props.color && "color: " + props.color; }, function (props) { return props.zIndex && "z-index: " + props.zIndex; });
exports.View = native_1.default.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ",
exports.View = native_1.default.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ",
"\n ",

@@ -32,3 +32,3 @@ "\n ",

"\n ",
"\n ", "\n"])), function (props) { return props.height && "height: " + props.height; }, function (props) { return props.width && "width: " + props.width; }, function (props) { return props.color && "background-color: " + props.color; }, function (props) { return props.margin && "margin: " + props.margin + "px"; }, function (props) { return props.padding && "padding: " + props.padding + "px"; }, function (props) { return props.relative && "position: relative"; }, function (props) { return props.absolute && "position: absolute"; }, function (props) {
"\n ", "\n ", "\n"])), function (props) { return props.height && "height: " + props.height; }, function (props) { return props.width && "width: " + props.width; }, function (props) { return props.color && "background-color: " + props.color; }, function (props) { return props.margin && "margin: " + props.margin + "px"; }, function (props) { return props.padding && "padding: " + props.padding + "px"; }, function (props) { return props.relative && "position: relative"; }, function (props) { return props.absolute && "position: absolute"; }, function (props) {
return props.verticalMargin && "margin: " + props.verticalMargin + "px 0";

@@ -45,3 +45,3 @@ }, function (props) {

return props.marginRight && "margin-right: " + props.marginRight;
}, function (props) { return props.zIndex && "z-index: " + props.zIndex; });
}, function (props) { return props.zIndex && "z-index: " + props.zIndex; }, function (props) { return props.overflowHidden && 'overflow: hidden'; });
exports.SafeAreaView = native_1.default.SafeAreaView(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ",

@@ -86,8 +86,9 @@ "\n ",

});
exports.CircleView = native_1.default(exports.View)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n\n ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n\n ", ";\n"])), function (props) { return props.size || 0; }, function (props) { return props.size || 0; }, function (props) { return props.size / 2 || 0; }, mixins.centered);
exports.BottomAbsoluteView = native_1.default(exports.View)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins.bottomAbsolute);
exports.TopAbsoluteView = native_1.default(exports.View)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins.topAbsolute);
exports.FillView = native_1.default(exports.View)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
exports.FullScreenView = native_1.default(exports.View)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins.screenSize);
exports.OverlayView = native_1.default(exports.View)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins.overlay);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
exports.CircleView = native_1.default(exports.View)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", ";\n"], ["\n ", "\n ", ";\n"])), mixins.circle, mixins.centered);
exports.CircleMask = native_1.default(exports.CircleView)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n overflow: hidden;\n"], ["\n overflow: hidden;\n"])));
exports.BottomAbsoluteView = native_1.default(exports.View)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins.bottomAbsolute);
exports.TopAbsoluteView = native_1.default(exports.View)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins.topAbsolute);
exports.FillView = native_1.default(exports.View)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
exports.FullScreenView = native_1.default(exports.View)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins.screenSize);
exports.OverlayView = native_1.default(exports.View)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins.overlay);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+1
-1
dist/types.d.ts

@@ -29,2 +29,3 @@ import { TextProps, ViewProps } from 'react-native';

absolute?: boolean;
overflowHidden?: boolean;
}

@@ -39,3 +40,2 @@ export interface FlexRowProps extends ViewKitProps {

size: number;
color: string;
}

@@ -42,0 +42,0 @@ export interface WhitespaceProps extends ViewKitProps {

+1
-1
package.json
{
"name": "styled-native-kit",
"version": "1.0.22",
"version": "1.1.0",
"description": "Add functionality to styled-components",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

+42
-25
README.md

@@ -67,2 +67,15 @@ # styled-native-kit

```css
${cssKit.circle}
${cssKit.centered}
```
`<CircleMask />`
```css
${cssKit.circle}
${cssKit.centered}
overflow: hidden;
```
**SEE PROPS**

@@ -125,12 +138,12 @@

type BaseProps = {
marginTop?: number // null
marginBottom?: number // null
zIndex?: number // null
color?: string // null
verticalMargin?: number // null
horizontalMargin?: number // null
interface BaseProps {
marginTop?: number
marginBottom?: number
zIndex?: number
color?: string
verticalMargin?: number
horizontalMargin?: number
}
type TextKitProps = {
interface TextKitProps extends BaseProps, TextProps {
centered?: boolean

@@ -144,6 +157,5 @@ capitalize?: boolean

fontSize?: number
} & BaseProps &
TextProps
}
type ViewKitProps = {
interface ViewKitProps extends BaseProps, ViewProps {
width?: number

@@ -157,6 +169,6 @@ height?: number

absolute?: boolean
} & BaseProps &
ViewProps
overflowHidden?: boolean
}
type FlexRowProps = {
interface FlexRowProps extends ViewKitProps {
spaceBetween?: boolean

@@ -166,18 +178,17 @@ spaceAround?: boolean

centered?: boolean
} & ViewKitProps
}
type CircleViewProps = {
interface CircleViewProps extends ViewKitProps {
size: number
color: string
} & ViewKitProps
}
type WhitespaceProps = {
interface WhitespaceProps extends ViewKitProps {
space: number
} & ViewKitProps
}
type SpacingProps = {
multiplier?: number // default: 1
base?: number // default: 8
horizontal?: boolean // default: false
} & ViewKitProps
interface SpacingProps extends ViewKitProps {
multiplier?: number
base?: number
horizontal?: boolean
}
```

@@ -227,2 +238,8 @@

`
const circle = css`
height: ${(props: CircleViewProps) => props.size || 0};
width: ${(props: CircleViewProps) => props.size || 0};
border-radius: ${(props: CircleViewProps) => props.size / 2 || 0};
`
```