From ebefdaead0917e8975855d3168618b7883cef14b Mon Sep 17 00:00:00 2001 From: James Collins Date: Thu, 19 Jan 2023 14:59:28 +1300 Subject: [PATCH 1/6] feat: style typing --- package.json | 2 +- package/package.json | 6 +- package/src/components/GradientBorder.tsx | 201 +++++++++--------- package/src/components/GradientBorderView.tsx | 163 +++++++++----- yarn.lock | 8 +- 5 files changed, 219 insertions(+), 161 deletions(-) diff --git a/package.json b/package.json index 3a15a4d..fe2381c 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@react-native-community/eslint-config": "^2.0.0", "@tsconfig/react-native": "^2.0.2", "@types/jest": "^26.0.23", - "@types/lodash": "^4.14.184", + "@types/lodash": "^4.14.191", "@types/react-native": "^0.69.5", "@types/react-test-renderer": "^18.0.0", "@typescript-eslint/eslint-plugin": "^5.29.0", diff --git a/package/package.json b/package/package.json index 6490bf5..477fb89 100644 --- a/package/package.json +++ b/package/package.json @@ -2,8 +2,9 @@ "name": "@good-react-native/gradient-border", "version": "1.0.0", "description": "A universal gradient border solution for React Native", - "main": "index.ts", + "main": "index.ts", "scripts": { + "build": "tsc", "test": "echo \"Error: no test specified\" && exit 1", "p": "npm version patch --force && npm publish --access public" }, @@ -36,6 +37,7 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@types/react-native": "^0.69.5" + "@types/react-native": "^0.69.5", + "@types/loadash": "^4.14.191" } } diff --git a/package/src/components/GradientBorder.tsx b/package/src/components/GradientBorder.tsx index 845ad91..c2a3c1e 100644 --- a/package/src/components/GradientBorder.tsx +++ b/package/src/components/GradientBorder.tsx @@ -1,66 +1,70 @@ -import React, { useMemo } from "react" -import { StyleSheet, View, ViewStyle } from "react-native" -import MaskedView from "@react-native-masked-view/masked-view" -import LinearGradient, { LinearGradientProps } from "react-native-linear-gradient" +import React from 'react'; +import {StyleSheet, View} from 'react-native'; +import MaskedView from '@react-native-masked-view/masked-view'; +import LinearGradient, { + LinearGradientProps, +} from 'react-native-linear-gradient'; -export type GradientProps = Omit; +export type GradientProps = Omit< + LinearGradientProps, + 'style' | 'pointerEvents' +>; export type RequiredGradientBorderProps = { - /** - * Props to be passed to the gradient component. See `react-native-linear-gradient` for full list. Requires "colors" prop. - */ - gradientProps: GradientProps - -} + /** + * Props to be passed to the gradient component. See `react-native-linear-gradient` for full list. Requires "colors" prop. + */ + gradientProps: GradientProps; +}; type BorderProps = { - /** - * Width of border. - */ - borderWidth?: number, + /** + * Width of border. + */ + borderWidth?: number; - /** - * Border applied to top of view, overrides borderWidth. - */ - borderTopWidth?: number, - /** - * Border applied to left side of view, overrides borderWidth. - */ - borderLeftWidth?: number, + /** + * Border applied to top of view, overrides borderWidth. + */ + borderTopWidth?: number; + /** + * Border applied to left side of view, overrides borderWidth. + */ + borderLeftWidth?: number; - /** - * Border applied to bottom side of view, overrides borderWidth. - */ - borderBottomWidth?: number, + /** + * Border applied to bottom side of view, overrides borderWidth. + */ + borderBottomWidth?: number; - /** - * Border appled to right side of view, overrides borderWidth. - */ - borderRightWidth?: number, - /** - * Border radius applied to each corner. - */ - borderRadius?: number, - /** - * Border radius applied to top right corner, Overrides borderRadius. - */ - borderTopRightRadius?: number, - /** - * Border radius applied to top left corner. Overrides borderRadius - */ - borderTopLeftRadius?: number, - /** - * Border radius applied to bottom right corner. Overrides borderRadius - */ - borderBottomRightRadius?: number, - /** - * Border radius applied to bottom left corner. Overrides borderRadius - */ - borderBottomLeftRadius?: number, -} + /** + * Border appled to right side of view, overrides borderWidth. + */ + borderRightWidth?: number; + /** + * Border radius applied to each corner. + */ + borderRadius?: number; + /** + * Border radius applied to top right corner, Overrides borderRadius. + */ + borderTopRightRadius?: number; + /** + * Border radius applied to top left corner. Overrides borderRadius + */ + borderTopLeftRadius?: number; + /** + * Border radius applied to bottom right corner. Overrides borderRadius + */ + borderBottomRightRadius?: number; + /** + * Border radius applied to bottom left corner. Overrides borderRadius + */ + borderBottomLeftRadius?: number; +}; /** - * A component that applies a gradient border to the parent. + * A component that applies a gradient border to the parent. * Should be placed as the last child of the parent so that it isn't overlapped. * @example * ```tsx @@ -75,51 +79,48 @@ type BorderProps = { * ``` */ export default function GradientBorder({ - gradientProps, - borderWidth, - borderRadius, - borderTopRightRadius, - borderTopLeftRadius, - borderBottomLeftRadius, - borderBottomRightRadius, - borderTopWidth, - borderLeftWidth, - borderRightWidth, - borderBottomWidth, + gradientProps, + borderWidth, + borderRadius, + borderTopRightRadius, + borderTopLeftRadius, + borderBottomLeftRadius, + borderBottomRightRadius, + borderTopWidth, + borderLeftWidth, + borderRightWidth, + borderBottomWidth, }: RequiredGradientBorderProps & BorderProps) { - - return ( - - )} - style={[StyleSheet.absoluteFill]} - pointerEvents='none' - > - - - ) -} \ No newline at end of file + return ( + + } + style={[StyleSheet.absoluteFill]} + pointerEvents="none"> + + + ); +} diff --git a/package/src/components/GradientBorderView.tsx b/package/src/components/GradientBorderView.tsx index 3c680d6..5afcfc3 100644 --- a/package/src/components/GradientBorderView.tsx +++ b/package/src/components/GradientBorderView.tsx @@ -1,13 +1,35 @@ -import React from "react"; -import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from "react-native"; -import GradientBorder, { RequiredGradientBorderProps } from "./GradientBorder"; +import React from 'react'; +import {StyleProp, StyleSheet, View, ViewProps, ViewStyle} from 'react-native'; +import GradientBorder, {RequiredGradientBorderProps} from './GradientBorder'; import omit from 'lodash/omit'; -type GradientBorderViewProps = Omit; +type GradientBorderViewProps = Omit< + ViewStyle, + | 'paddingLeft' + | 'paddingRight' + | 'paddingTop' + | 'paddingBottom' + | 'padding' + | 'borderColor' + | 'borderLeftColor' + | 'borderRightColor' + | 'borderTopColor' + | 'borderBottomColor' +>; + +export type GradientBorderViewStyle = StyleProp< + GradientBorderViewProps & { + paddingLeft?: number; + paddingRight?: number; + paddingTop?: number; + paddingBottom?: number; + padding?: number; + } +>; /** * A view that applies a gradient border. `gradientProps` is required and can be used to control the gradient (react-native-linear-gradient props), - * and `borderWidth` is required. See + * and `borderWidth` is required. See * @example * */ export default function GradientBorderView({ - gradientProps, - ...props -}: Omit & - { - style?: StyleProp< - GradientBorderViewProps & - {paddingLeft?: number, paddingRight?: number, paddingTop?: number, paddingBottom?: number, padding?: number} - > - } & - RequiredGradientBorderProps -) { - const styles = StyleSheet.flatten(props.style) - const userAllPadding = styles.padding?styles.padding:0; - const compensationAllPadding = styles.borderWidth?styles.borderWidth:0; - function calcPaddingForSide(paddingName: 'paddingLeft' | 'paddingRight' | "paddingTop" | 'paddingBottom', borderWidthName: 'borderTopWidth' | 'borderBottomWidth' | 'borderLeftWidth' | 'borderRightWidth') { - const userPadding = typeof styles[paddingName] !== 'undefined' ? styles[paddingName]! : userAllPadding; - const compensationPadding = typeof styles[borderWidthName] !== 'undefined' ? styles[borderWidthName]! : compensationAllPadding - return compensationPadding + userPadding; - } - - if(__DEV__ && !(styles.borderWidth || styles.borderTopWidth || styles.borderLeftWidth || styles.borderRightWidth || styles.borderBottomWidth)) { - console.warn("No borderWidth was passed in the GradientBorderView style, no border will be shown.") - } + gradientProps, + ...props +}: Omit & { + style?: GradientBorderViewStyle; +} & RequiredGradientBorderProps) { + const styles = StyleSheet.flatten(props.style); + const userAllPadding = styles.padding ? styles.padding : 0; + const compensationAllPadding = styles.borderWidth ? styles.borderWidth : 0; + function calcPaddingForSide( + paddingName: + | 'paddingLeft' + | 'paddingRight' + | 'paddingTop' + | 'paddingBottom', + borderWidthName: + | 'borderTopWidth' + | 'borderBottomWidth' + | 'borderLeftWidth' + | 'borderRightWidth', + ) { + const userPadding = + typeof styles[paddingName] !== 'undefined' + ? styles[paddingName]! + : userAllPadding; + const compensationPadding = + typeof styles[borderWidthName] !== 'undefined' + ? styles[borderWidthName]! + : compensationAllPadding; + return compensationPadding + userPadding; + } - return ( - - {props.children} - - + if ( + __DEV__ && + !( + styles.borderWidth || + styles.borderTopWidth || + styles.borderLeftWidth || + styles.borderRightWidth || + styles.borderBottomWidth ) -} \ No newline at end of file + ) { + console.warn( + 'No borderWidth was passed in the GradientBorderView style, no border will be shown.', + ); + } + + return ( + + {props.children} + + + ); +} diff --git a/yarn.lock b/yarn.lock index 34fc32d..2b53197 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1411,10 +1411,10 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== -"@types/lodash@^4.14.184": - version "4.14.184" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.184.tgz#23f96cd2a21a28e106dc24d825d4aa966de7a9fe" - integrity sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q== +"@types/lodash@^4.14.191": + version "4.14.191" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa" + integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ== "@types/node@*": version "18.7.13" From 5a4ee92769271efc53363c8bb9ab0b3debae81d9 Mon Sep 17 00:00:00 2001 From: James Collins Date: Thu, 19 Jan 2023 15:04:36 +1300 Subject: [PATCH 2/6] feat: style typing --- .gitignore | 2 +- package.json | 2 +- package/package.json | 4 +--- yarn.lock | 2 +- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index 8593d3d..920579e 100644 --- a/.gitignore +++ b/.gitignore @@ -67,4 +67,4 @@ buck-out/ push .npmrc # @generated expo-cli sync-e7dcf75f4e856f7b6f3239b3f3a7dd614ee755a8 -# The following patterns were generated by expo-cli \ No newline at end of file +# The following patterns were generated by expo-cli diff --git a/package.json b/package.json index fe2381c..3a15a4d 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@react-native-community/eslint-config": "^2.0.0", "@tsconfig/react-native": "^2.0.2", "@types/jest": "^26.0.23", - "@types/lodash": "^4.14.191", + "@types/lodash": "^4.14.184", "@types/react-native": "^0.69.5", "@types/react-test-renderer": "^18.0.0", "@typescript-eslint/eslint-plugin": "^5.29.0", diff --git a/package/package.json b/package/package.json index 477fb89..1816927 100644 --- a/package/package.json +++ b/package/package.json @@ -4,7 +4,6 @@ "description": "A universal gradient border solution for React Native", "main": "index.ts", "scripts": { - "build": "tsc", "test": "echo \"Error: no test specified\" && exit 1", "p": "npm version patch --force && npm publish --access public" }, @@ -37,7 +36,6 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@types/react-native": "^0.69.5", - "@types/loadash": "^4.14.191" + "@types/react-native": "^0.69.5" } } diff --git a/yarn.lock b/yarn.lock index 2b53197..f850d5a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1411,7 +1411,7 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== -"@types/lodash@^4.14.191": +"@types/lodash@^4.14.184": version "4.14.191" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa" integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ== From c02d9d9f3450156da92f67f03c60146a01686ee9 Mon Sep 17 00:00:00 2001 From: James Collins Date: Thu, 19 Jan 2023 15:06:23 +1300 Subject: [PATCH 3/6] feat: style typing --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3a15a4d..fe2381c 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@react-native-community/eslint-config": "^2.0.0", "@tsconfig/react-native": "^2.0.2", "@types/jest": "^26.0.23", - "@types/lodash": "^4.14.184", + "@types/lodash": "^4.14.191", "@types/react-native": "^0.69.5", "@types/react-test-renderer": "^18.0.0", "@typescript-eslint/eslint-plugin": "^5.29.0", From 189858c38f59250edca491d36b24721e9fd7397e Mon Sep 17 00:00:00 2001 From: James Collins Date: Thu, 19 Jan 2023 15:09:33 +1300 Subject: [PATCH 4/6] feat: style typing --- package/index.ts | 10 +++++++--- package/src/components/GradientBorderView.tsx | 4 ++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/package/index.ts b/package/index.ts index c785a29..7263195 100644 --- a/package/index.ts +++ b/package/index.ts @@ -1,5 +1,9 @@ -import GradientBorderView from "./src/components/GradientBorderView"; -import { GradientProps as GP } from "./src/components/GradientBorder"; +import { + GradientBorderView, + GradientBorderViewStyle, +} from './src/components/GradientBorderView'; +import {GradientProps as GP} from './src/components/GradientBorder'; export {GradientBorderView}; -export type GradientProps = GP; \ No newline at end of file +export type {GradientBorderViewStyle}; +export type GradientProps = GP; diff --git a/package/src/components/GradientBorderView.tsx b/package/src/components/GradientBorderView.tsx index 5afcfc3..c524c0c 100644 --- a/package/src/components/GradientBorderView.tsx +++ b/package/src/components/GradientBorderView.tsx @@ -38,12 +38,12 @@ export type GradientBorderViewStyle = StyleProp< * }} * /> */ -export default function GradientBorderView({ +export const GradientBorderView = ({ gradientProps, ...props }: Omit & { style?: GradientBorderViewStyle; -} & RequiredGradientBorderProps) { +} & RequiredGradientBorderProps) => { const styles = StyleSheet.flatten(props.style); const userAllPadding = styles.padding ? styles.padding : 0; const compensationAllPadding = styles.borderWidth ? styles.borderWidth : 0; From ca9cb0a391385f8904aa92cf07fcf70580c6b311 Mon Sep 17 00:00:00 2001 From: James Collins Date: Thu, 19 Jan 2023 15:10:04 +1300 Subject: [PATCH 5/6] feat: style typing --- package/index.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/package/index.ts b/package/index.ts index 7263195..0679394 100644 --- a/package/index.ts +++ b/package/index.ts @@ -2,8 +2,7 @@ import { GradientBorderView, GradientBorderViewStyle, } from './src/components/GradientBorderView'; -import {GradientProps as GP} from './src/components/GradientBorder'; +import {GradientProps} from './src/components/GradientBorder'; export {GradientBorderView}; -export type {GradientBorderViewStyle}; -export type GradientProps = GP; +export type {GradientBorderViewStyle, GradientProps as GP}; From dea3c771c0a40474b5bd222c6c1fa012cf52bc9c Mon Sep 17 00:00:00 2001 From: James Collins Date: Thu, 19 Jan 2023 15:14:10 +1300 Subject: [PATCH 6/6] feat: style typing --- App.tsx | 124 +++++++++++++++++++++++-------------------- package/package.json | 3 +- yarn.lock | 2 +- 3 files changed, 68 insertions(+), 61 deletions(-) diff --git a/App.tsx b/App.tsx index c2e2b30..5eb65f2 100644 --- a/App.tsx +++ b/App.tsx @@ -1,44 +1,47 @@ -import MaskedView from "@react-native-masked-view/masked-view"; -import { LinearGradient } from "react-native-linear-gradient"; -import { range } from "lodash"; -import React, { useState } from "react"; -import { Image, ImageBackground, ScrollView, StyleSheet, Text, View, ViewProps } from "react-native"; -import { GradientBorderView } from "./package/index"; +import MaskedView from '@react-native-masked-view/masked-view'; +import {LinearGradient} from 'react-native-linear-gradient'; +import {range} from 'lodash'; +import React from 'react'; +import { + ImageBackground, + ScrollView, + StyleSheet, + Text, + View, + ViewProps, +} from 'react-native'; +import {GradientBorderView} from './package/index'; function Giraffe() { return ( - + style={{flex: 1}} + maskElement={ + - - )} - > + }> - - ) + ); } -export function FadeOutTopView({ fadeHeight = 100, ...props }: ViewProps & { fadeHeight?: number }) { +export function FadeOutTopView({ + fadeHeight = 100, + ...props +}: ViewProps & {fadeHeight?: number}) { return ( - + - )} + } {...props} /> - ) + ); } function FadeOut() { return ( - - + A Fade Effect - - - + + {range(10).map(e => ( - + Title - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. ))} - - - ) + ); } const App = () => { - return ( { backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', - }} - > + }}> {/* @@ -174,7 +182,7 @@ const App = () => { { }} /> */} - ) + ); }; - - -export default App; \ No newline at end of file +export default App; diff --git a/package/package.json b/package/package.json index 1816927..664672f 100644 --- a/package/package.json +++ b/package/package.json @@ -36,6 +36,7 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@types/react-native": "^0.69.5" + "@types/react-native": "^0.69.5", + "@types/lodash": "^4.14.191" } } diff --git a/yarn.lock b/yarn.lock index f850d5a..2b53197 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1411,7 +1411,7 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== -"@types/lodash@^4.14.184": +"@types/lodash@^4.14.191": version "4.14.191" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa" integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==