From 599464e0a28b4508269a10cf262dea2493669ccc Mon Sep 17 00:00:00 2001 From: Lidor Dafna Date: Wed, 16 Mar 2022 17:38:23 +0200 Subject: [PATCH 1/5] support passing colors to skeletonView --- generatedTypes/src/components/skeletonView/index.d.ts | 4 ++++ src/components/skeletonView/index.tsx | 10 ++++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/generatedTypes/src/components/skeletonView/index.d.ts b/generatedTypes/src/components/skeletonView/index.d.ts index 06e49c1e0e..14a831dbee 100644 --- a/generatedTypes/src/components/skeletonView/index.d.ts +++ b/generatedTypes/src/components/skeletonView/index.d.ts @@ -112,6 +112,10 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers { * The width of the skeleton view */ width?: number; + /** + * The width of the skeleton view + */ + colors?: string[]; /** * The border radius of the skeleton view */ diff --git a/src/components/skeletonView/index.tsx b/src/components/skeletonView/index.tsx index 9890abc125..8edf8a795d 100644 --- a/src/components/skeletonView/index.tsx +++ b/src/components/skeletonView/index.tsx @@ -128,6 +128,10 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers { * The width of the skeleton view */ width?: number; + /** + * The width of the skeleton view + */ + colors?: string[] /** * The border radius of the skeleton view */ @@ -229,7 +233,7 @@ class SkeletonView extends Component { getDefaultSkeletonProps = (input?: {circleOverride: boolean; style: StyleProp}) => { const {circleOverride, style} = input || {}; - const {circle, width = 0, height = 0} = this.props; + const {circle, colors, width = 0, height = 0} = this.props; let {borderRadius} = this.props; let size; if (circle || circleOverride) { @@ -238,7 +242,7 @@ class SkeletonView extends Component { } return { - shimmerColors: [Colors.grey70, Colors.grey60, Colors.grey70], + shimmerColors: colors || [Colors.grey70, Colors.grey60, Colors.grey70], isReversed: Constants.isRTL, style: [{borderRadius}, style], width: size || width, @@ -425,6 +429,7 @@ class SkeletonView extends Component { showLastSeparator, height, width, + colors, borderRadius, circle, style, @@ -445,6 +450,7 @@ class SkeletonView extends Component { showLastSeparator, height, width, + colors, borderRadius, circle, style, From 0438f90c1b6f43c742d71e08d3f1d9d646c11104 Mon Sep 17 00:00:00 2001 From: Lidor Dafna Date: Wed, 16 Mar 2022 18:03:55 +0200 Subject: [PATCH 2/5] fix description --- generatedTypes/src/components/skeletonView/index.d.ts | 2 +- src/components/skeletonView/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/generatedTypes/src/components/skeletonView/index.d.ts b/generatedTypes/src/components/skeletonView/index.d.ts index 14a831dbee..701ee73b50 100644 --- a/generatedTypes/src/components/skeletonView/index.d.ts +++ b/generatedTypes/src/components/skeletonView/index.d.ts @@ -113,7 +113,7 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers { */ width?: number; /** - * The width of the skeleton view + * The colors of the skeleton view */ colors?: string[]; /** diff --git a/src/components/skeletonView/index.tsx b/src/components/skeletonView/index.tsx index 8edf8a795d..9fcae997b3 100644 --- a/src/components/skeletonView/index.tsx +++ b/src/components/skeletonView/index.tsx @@ -129,7 +129,7 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers { */ width?: number; /** - * The width of the skeleton view + * The colors of the skeleton view */ colors?: string[] /** From 6474968d09031db3703e619e43a56c1f138aa04d Mon Sep 17 00:00:00 2001 From: Lidor Dafna Date: Wed, 16 Mar 2022 18:15:06 +0200 Subject: [PATCH 3/5] add prop to api file --- src/components/skeletonView/skeletonView.api.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/skeletonView/skeletonView.api.json b/src/components/skeletonView/skeletonView.api.json index 482e8d1e0e..06c73f5943 100644 --- a/src/components/skeletonView/skeletonView.api.json +++ b/src/components/skeletonView/skeletonView.api.json @@ -37,6 +37,7 @@ {"name": "timesKey", "type": "string", "description": "A key prefix for the duplicated SkeletonViews"}, {"name": "height", "type": "number", "description": "The height of the skeleton view"}, {"name": "width", "type": "number", "description": "The width of the skeleton view"}, + {"name": "colors", "type": "string[]", "description": "The colors of the skeleton view"}, {"name": "borderRadius", "type": "number", "description": "The border radius of the skeleton view"}, { "name": "circle", From a473ac6f400980c1887b6cc73f3daa8b43526ee4 Mon Sep 17 00:00:00 2001 From: Lidor Dafna Date: Thu, 17 Mar 2022 11:05:34 +0200 Subject: [PATCH 4/5] update description --- generatedTypes/src/components/skeletonView/index.d.ts | 3 ++- src/components/skeletonView/index.tsx | 3 ++- src/components/skeletonView/skeletonView.api.json | 7 ++++++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/generatedTypes/src/components/skeletonView/index.d.ts b/generatedTypes/src/components/skeletonView/index.d.ts index 701ee73b50..cfe39b218e 100644 --- a/generatedTypes/src/components/skeletonView/index.d.ts +++ b/generatedTypes/src/components/skeletonView/index.d.ts @@ -113,7 +113,8 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers { */ width?: number; /** - * The colors of the skeleton view + * The colors of the skeleton view, have to be >=2 + * default: [Colors.grey70, Colors.grey60, Colors.grey70] */ colors?: string[]; /** diff --git a/src/components/skeletonView/index.tsx b/src/components/skeletonView/index.tsx index 9fcae997b3..82017e453f 100644 --- a/src/components/skeletonView/index.tsx +++ b/src/components/skeletonView/index.tsx @@ -129,7 +129,8 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers { */ width?: number; /** - * The colors of the skeleton view + * The colors of the skeleton view, have to be >=2 + * default: [Colors.grey70, Colors.grey60, Colors.grey70] */ colors?: string[] /** diff --git a/src/components/skeletonView/skeletonView.api.json b/src/components/skeletonView/skeletonView.api.json index 06c73f5943..82ad0b8534 100644 --- a/src/components/skeletonView/skeletonView.api.json +++ b/src/components/skeletonView/skeletonView.api.json @@ -37,7 +37,12 @@ {"name": "timesKey", "type": "string", "description": "A key prefix for the duplicated SkeletonViews"}, {"name": "height", "type": "number", "description": "The height of the skeleton view"}, {"name": "width", "type": "number", "description": "The width of the skeleton view"}, - {"name": "colors", "type": "string[]", "description": "The colors of the skeleton view"}, + { + "name": "colors", + "type": "string[]", + "description": "The colors of the skeleton view, have to be >=2", + "default": "[Colors.grey70, Colors.grey60, Colors.grey70]" + }, {"name": "borderRadius", "type": "number", "description": "The border radius of the skeleton view"}, { "name": "circle", From a9871d2339a4fa8c47b803f41717526f95a0b3f6 Mon Sep 17 00:00:00 2001 From: Lidor Dafna Date: Thu, 17 Mar 2022 11:11:50 +0200 Subject: [PATCH 5/5] description fix --- generatedTypes/src/components/skeletonView/index.d.ts | 2 +- src/components/skeletonView/index.tsx | 2 +- src/components/skeletonView/skeletonView.api.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/generatedTypes/src/components/skeletonView/index.d.ts b/generatedTypes/src/components/skeletonView/index.d.ts index cfe39b218e..4fc9b8726c 100644 --- a/generatedTypes/src/components/skeletonView/index.d.ts +++ b/generatedTypes/src/components/skeletonView/index.d.ts @@ -113,7 +113,7 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers { */ width?: number; /** - * The colors of the skeleton view, have to be >=2 + * The colors of the skeleton view, the array length has to be >=2 * default: [Colors.grey70, Colors.grey60, Colors.grey70] */ colors?: string[]; diff --git a/src/components/skeletonView/index.tsx b/src/components/skeletonView/index.tsx index 82017e453f..1bb071d72f 100644 --- a/src/components/skeletonView/index.tsx +++ b/src/components/skeletonView/index.tsx @@ -129,7 +129,7 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers { */ width?: number; /** - * The colors of the skeleton view, have to be >=2 + * The colors of the skeleton view, the array length has to be >=2 * default: [Colors.grey70, Colors.grey60, Colors.grey70] */ colors?: string[] diff --git a/src/components/skeletonView/skeletonView.api.json b/src/components/skeletonView/skeletonView.api.json index 82ad0b8534..199a1f1783 100644 --- a/src/components/skeletonView/skeletonView.api.json +++ b/src/components/skeletonView/skeletonView.api.json @@ -40,7 +40,7 @@ { "name": "colors", "type": "string[]", - "description": "The colors of the skeleton view, have to be >=2", + "description": "The colors of the skeleton view, the array length has to be >=2", "default": "[Colors.grey70, Colors.grey60, Colors.grey70]" }, {"name": "borderRadius", "type": "number", "description": "The border radius of the skeleton view"},