diff --git a/apps/fluent-tester/package.json b/apps/fluent-tester/package.json index aecd74ff49..2eab7c7d44 100644 --- a/apps/fluent-tester/package.json +++ b/apps/fluent-tester/package.json @@ -30,6 +30,7 @@ "@fluentui-react-native/experimental-avatar": ">=0.7.1 <1.0.0", "@fluentui-react-native/experimental-button": "0.5.1", "@fluentui-react-native/experimental-native-button": ">=0.5.3 <1.0.0", + "@fluentui-react-native/experimental-shimmer": "0.1.0", "@fluentui-react-native/experimental-text": ">=0.4.1 <1.0.0", "@fluentui-react-native/framework": ">=0.5.1 <1.0.0", "@fluentui-react-native/icon": "0.5.0", diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Shimmer/ShimmerTest.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Shimmer/ShimmerTest.tsx index 0fc29e8050..62dc0dbfd5 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/Shimmer/ShimmerTest.tsx +++ b/apps/fluent-tester/src/FluentTester/TestComponents/Shimmer/ShimmerTest.tsx @@ -1,50 +1,60 @@ import * as React from 'react'; -import { Shimmer } from '@fluentui/react-native'; -import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; +import { Shimmer, ShimmerElement } from '@fluentui-react-native/experimental-shimmer' import { SHIMMER_TESTPAGE } from './consts'; import { Test, TestSection, PlatformStatus } from '../Test'; -import { Text, View } from 'react-native'; +import { Stack } from '@fluentui-react-native/stack'; +import { ImageURISource } from 'react-native'; +import { stackStyle } from '../Common/styles'; -const shimmer: React.FunctionComponent<{}> = () => { - return ( - - - - - - {''} - {''} - - - - - ); +const icon: ImageURISource = { + uri: + 'data:image/png;base64,/9j/4AAQSkZJRgABAQABLAEsAAD/4QCARXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAAEsAAAAAQAAASwAAAABAAKgAgAEAAAAAQAAAMigAwAEAAAAAQAAAMgAAAAA/+EJ2Wh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphZjRmMjAyMy02MmIzLTQ5MDMtOTkyOS1kNTk1MDcyNzAwYjMiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnN0b2NrOjhhYzBiZjc1LTkzZTktNGUyOC05YzY5LTA2ZjFlNmNiYmIxOSIvPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw/eHBhY2tldCBlbmQ9InciPz4A/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iEXhJQ0NfUFJPRklMRQABAQAAEWhhcHBsAgAAAG1udHJHUkFZWFlaIAfcAAgAFwAPAC4AD2Fjc3BBUFBMAAAAAG5vbmUAAAAAAAAAAAAAAAAAAAAAAAD21gABAAAAANMtYXBwbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWRlc2MAAADAAAAAeWRzY20AAAE8AAAH6GNwcnQAAAkkAAAAI3d0cHQAAAlIAAAAFGtUUkMAAAlcAAAIDGRlc2MAAAAAAAAAH0dlbmVyaWMgR3JheSBHYW1tYSAyLjIgUHJvZmlsZQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtbHVjAAAAAAAAAB8AAAAMc2tTSwAAAC4AAAGEZGFESwAAADgAAAGyY2FFUwAAADgAAAHqdmlWTgAAAEAAAAIicHRCUgAAAEoAAAJidWtVQQAAACwAAAKsZnJGVQAAAD4AAALYaHVIVQAAADQAAAMWemhUVwAAAB4AAANKbmJOTwAAADoAAANoY3NDWgAAACgAAAOiaGVJTAAAACQAAAPKaXRJVAAAAE4AAAPucm9STwAAACoAAAQ8ZGVERQAAAE4AAARma29LUgAAACIAAAS0c3ZTRQAAADgAAAGyemhDTgAAAB4AAATWamFKUAAAACYAAAT0ZWxHUgAAACoAAAUacHRQTwAAAFIAAAVEbmxOTAAAAEAAAAWWZXNFUwAAAEwAAAXWdGhUSAAAADIAAAYidHJUUgAAACQAAAZUZmlGSQAAAEYAAAZ4aHJIUgAAAD4AAAa+cGxQTAAAAEoAAAb8cnVSVQAAADoAAAdGZW5VUwAAADwAAAeAYXJFRwAAACwAAAe8AFYBYQBlAG8AYgBlAGMAbgDhACAAcwBpAHYA4QAgAGcAYQBtAGEAIAAyACwAMgBHAGUAbgBlAHIAaQBzAGsAIABnAHIA5QAgADIALAAyACAAZwBhAG0AbQBhAHAAcgBvAGYAaQBsAEcAYQBtAG0AYQAgAGQAZQAgAGcAcgBpAHMAbwBzACAAZwBlAG4A6AByAGkAYwBhACAAMgAuADIAQx6lAHUAIABoAOwAbgBoACAATQDgAHUAIAB4AOEAbQAgAEMAaAB1AG4AZwAgAEcAYQBtAG0AYQAgADIALgAyAFAAZQByAGYAaQBsACAARwBlAG4A6QByAGkAYwBvACAAZABhACAARwBhAG0AYQAgAGQAZQAgAEMAaQBuAHoAYQBzACAAMgAsADIEFwQwBDMEMAQ7BEwEPQQwACAARwByAGEAeQAtBDMEMAQ8BDAAIAAyAC4AMgBQAHIAbwBmAGkAbAAgAGcA6QBuAOkAcgBpAHEAdQBlACAAZwByAGkAcwAgAGcAYQBtAG0AYQAgADIALAAyAMEAbAB0AGEAbADhAG4AbwBzACAAcwB6APwAcgBrAGUAIABnAGEAbQBtAGEAIAAyAC4AMpAadShwcJaOUUlepgAgADIALgAyACCCcl9pY8+P8ABHAGUAbgBlAHIAaQBzAGsAIABnAHIA5QAgAGcAYQBtAG0AYQAgADIALAAyAC0AcAByAG8AZgBpAGwATwBiAGUAYwBuAOEAIAFhAGUAZADhACAAZwBhAG0AYQAgADIALgAyBdIF0AXeBdQAIAXQBeQF1QXoACAF2wXcBdwF2QAgADIALgAyAFAAcgBvAGYAaQBsAG8AIABnAHIAaQBnAGkAbwAgAGcAZQBuAGUAcgBpAGMAbwAgAGQAZQBsAGwAYQAgAGcAYQBtAG0AYQAgADIALAAyAEcAYQBtAGEAIABnAHIAaQAgAGcAZQBuAGUAcgBpAGMBAwAgADIALAAyAEEAbABsAGcAZQBtAGUAaQBuAGUAcwAgAEcAcgBhAHUAcwB0AHUAZgBlAG4ALQBQAHIAbwBmAGkAbAAgAEcAYQBtAG0AYQAgADIALAAyx3y8GAAg1ozAyQAgrBC5yAAgADIALgAyACDVBLhc0wzHfGZukBpwcF6mfPtlcAAgADIALgAyACBjz4/wZYdO9k4AgiwwsDDsMKQwrDDzMN4AIAAyAC4AMgAgMNcw7TDVMKEwpDDrA5MDtQO9A7kDugPMACADkwO6A8EDuQAgA5MDrAO8A7wDsQAgADIALgAyAFAAZQByAGYAaQBsACAAZwBlAG4A6QByAGkAYwBvACAAZABlACAAYwBpAG4AegBlAG4AdABvAHMAIABkAGEAIABHAGEAbQBtAGEAIAAyACwAMgBBAGwAZwBlAG0AZQBlAG4AIABnAHIAaQBqAHMAIABnAGEAbQBtAGEAIAAyACwAMgAtAHAAcgBvAGYAaQBlAGwAUABlAHIAZgBpAGwAIABnAGUAbgDpAHIAaQBjAG8AIABkAGUAIABnAGEAbQBtAGEAIABkAGUAIABnAHIAaQBzAGUAcwAgADIALAAyDiMOMQ4HDioONQ5BDgEOIQ4hDjIOQA4BDiMOIg5MDhcOMQ5IDicORA4bACAAMgAuADIARwBlAG4AZQBsACAARwByAGkAIABHAGEAbQBhACAAMgAsADIAWQBsAGUAaQBuAGUAbgAgAGgAYQByAG0AYQBhAG4AIABnAGEAbQBtAGEAIAAyACwAMgAgAC0AcAByAG8AZgBpAGkAbABpAEcAZQBuAGUAcgBpAQ0AawBpACAARwByAGEAeQAgAEcAYQBtAG0AYQAgADIALgAyACAAcAByAG8AZgBpAGwAVQBuAGkAdwBlAHIAcwBhAGwAbgB5ACAAcAByAG8AZgBpAGwAIABzAHoAYQByAG8BWwBjAGkAIABnAGEAbQBtAGEAIAAyACwAMgQeBDEESQQwBE8AIARBBDUEQAQwBE8AIAQzBDAEPAQ8BDAAIAAyACwAMgAtBD8EQAQ+BEQEOAQ7BEwARwBlAG4AZQByAGkAYwAgAEcAcgBhAHkAIABHAGEAbQBtAGEAIAAyAC4AMgAgAFAAcgBvAGYAaQBsAGUGOgYnBkUGJwAgADIALgAyACAGRAZIBkYAIAYxBkUGJwYvBkoAIAY5BicGRXRleHQAAAAAQ29weXJpZ2h0IEFwcGxlIEluYy4sIDIwMTIAAFhZWiAAAAAAAADzUQABAAAAARbMY3VydgAAAAAAAAQAAAAABQAKAA8AFAAZAB4AIwAoAC0AMgA3ADsAQABFAEoATwBUAFkAXgBjAGgAbQByAHcAfACBAIYAiwCQAJUAmgCfAKQAqQCuALIAtwC8AMEAxgDLANAA1QDbAOAA5QDrAPAA9gD7AQEBBwENARMBGQEfASUBKwEyATgBPgFFAUwBUgFZAWABZwFuAXUBfAGDAYsBkgGaAaEBqQGxAbkBwQHJAdEB2QHhAekB8gH6AgMCDAIUAh0CJgIvAjgCQQJLAlQCXQJnAnECegKEAo4CmAKiAqwCtgLBAssC1QLgAusC9QMAAwsDFgMhAy0DOANDA08D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', }; -const stylizedShimmer: React.FunctionComponent<{}> = () => { +const shimmer: React.FunctionComponent<{}> = () => { + const lines: Array = [ + { + type: 'rect', + width: 100, + height: 20, + borderRadius: 3, + xPos: 90, + yPos: 70, + }, + { + type: 'rect', + width: 150, + height: 20, + borderRadius: 3, + xPos: 90, + yPos: 42, + }, + { + type: 'rect', + width: 200, + height: 20, + borderRadius: 3, + xPos: 90, + yPos: 15, + }, + ]; + const circle = lines.slice(); + circle.push({ type: 'circle', height: 70, xPos: 40, yPos: 55 }); + const rect = lines.slice(); + rect.push({ type: 'rect', height: 60, width: 60, xPos: 10, yPos: 25, borderRadius: 3 }); + const CustomizedShimmer = Shimmer.customize({ - shimmerAlpha: 0, - shimmerWidth: 180, - shimmerAngle: 0, - shimmerSpeed: 400, - shimmerDelay: 0.1, - viewTintColor: 'rgb(100, 100, 100)', - cornerRadius: 10, + gradientTintColor: 'pink', }); - return ( + - - - - - {''} - {''} - - - + + + + + ); }; @@ -54,10 +64,6 @@ const shimmerSections: TestSection[] = [ testID: SHIMMER_TESTPAGE, component: shimmer, }, - { - name: 'Stylized Shimmer', - component: stylizedShimmer, - }, ]; export const ShimmerTest: React.FunctionComponent<{}> = () => { diff --git a/apps/fluent-tester/src/FluentTester/testPages.android.ts b/apps/fluent-tester/src/FluentTester/testPages.android.ts index e8379f3f82..8763dff3a6 100644 --- a/apps/fluent-tester/src/FluentTester/testPages.android.ts +++ b/apps/fluent-tester/src/FluentTester/testPages.android.ts @@ -10,6 +10,7 @@ import { HOMEPAGE_PERSONACOIN_BUTTON, PersonaCoinTest } from './TestComponents/P import { HOMEPAGE_PRESSABLE_BUTTON, PressableTest } from './TestComponents/Pressable'; import { HOMEPAGE_RADIOGROUP_BUTTON, RadioGroupTest } from './TestComponents/RadioGroup'; import { HOMEPAGE_SEPARATOR_BUTTON, SeparatorTest } from './TestComponents/Separator'; +import { HOMEPAGE_SHIMMER_BUTTON, ShimmerTest } from './TestComponents/Shimmer'; import { HOMEPAGE_SVG_BUTTON, SvgTest } from './TestComponents/Svg'; import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text'; import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme'; @@ -51,6 +52,11 @@ export const tests: TestDescription[] = [ component: SeparatorTest, testPage: HOMEPAGE_SEPARATOR_BUTTON, }, + { + name: 'Shimmer Test', + component: ShimmerTest, + testPage: HOMEPAGE_SHIMMER_BUTTON, + }, { name: 'Text Test', component: TextTest, diff --git a/apps/fluent-tester/src/FluentTester/testPages.macos.ts b/apps/fluent-tester/src/FluentTester/testPages.macos.ts index e5b3276f43..207c45b142 100644 --- a/apps/fluent-tester/src/FluentTester/testPages.macos.ts +++ b/apps/fluent-tester/src/FluentTester/testPages.macos.ts @@ -12,6 +12,7 @@ import { NativeButtonTest, HOMEPAGE_NATIVEBUTTON_BUTTON } from './TestComponents import { HOMEPAGE_PERSONA_BUTTON, PersonaTest } from './TestComponents/Persona'; import { HOMEPAGE_PERSONACOIN_BUTTON, PersonaCoinTest } from './TestComponents/PersonaCoin'; import { HOMEPAGE_PRESSABLE_BUTTON, PressableTest } from './TestComponents/Pressable'; +import { HOMEPAGE_SHIMMER_BUTTON, ShimmerTest } from './TestComponents/Shimmer'; import { HOMEPAGE_RADIOGROUP_BUTTON, RadioGroupTest } from './TestComponents/RadioGroup'; import { HOMEPAGE_SEPARATOR_BUTTON, SeparatorTest } from './TestComponents/Separator'; import { HOMEPAGE_SVG_BUTTON, SvgTest } from './TestComponents/Svg'; @@ -74,6 +75,11 @@ export const tests: TestDescription[] = [ component: TextTest, testPage: HOMEPAGE_TEXT_BUTTON, }, + { + name: 'Shimmer Test', + component: ShimmerTest, + testPage: HOMEPAGE_SHIMMER_BUTTON, + }, { name: 'Theme Test', component: ThemeTest, diff --git a/apps/ios/src/Podfile b/apps/ios/src/Podfile index 078e56d91c..2c44810cec 100644 --- a/apps/ios/src/Podfile +++ b/apps/ios/src/Podfile @@ -26,7 +26,6 @@ use_test_app! do |target| pod 'FluentUI-React-Native-Apple-Theme', :path => '../../../packages/theming/apple-theme/FluentUIReactNativeAppleTheme.podspec' pod 'FluentUI-React-Native-Avatar', :path => '../../../packages/experimental/Avatar/FluentUIReactNativeAvatar.podspec' - pod 'FluentUI-React-Native-Shimmer', :path => '../../../packages/components/Shimmer/FluentUIReactNativeShimmer.podspec' pod 'FluentUI-React-Native-Button', :path => '../../../packages/experimental/NativeButton/FluentUIReactNativeButton.podspec' pod 'react-native-menu', :path => '../../../node_modules/@react-native-menu/menu' pod 'RNSVG', :path => '../../../node_modules/react-native-svg' diff --git a/apps/ios/src/Podfile.lock b/apps/ios/src/Podfile.lock index ab8dc3ffc5..69cc909f8c 100644 --- a/apps/ios/src/Podfile.lock +++ b/apps/ios/src/Podfile.lock @@ -12,15 +12,12 @@ PODS: - FluentUI-React-Native-Apple-Theme (0.4.2): - MicrosoftFluentUI (~> 0.2.2) - React - - FluentUI-React-Native-Avatar (0.6.3): + - FluentUI-React-Native-Avatar (0.7.1): - MicrosoftFluentUI (~> 0.2.2) - React - FluentUI-React-Native-Button (0.5.3): - MicrosoftFluentUI (~> 0.2.2) - React - - FluentUI-React-Native-Shimmer (0.6.3): - - MicrosoftFluentUI (~> 0.2.2) - - React - Folly (2020.01.13.00): - boost-for-react-native - DoubleConversion @@ -31,62 +28,147 @@ PODS: - DoubleConversion - glog - glog (0.3.5) - - MicrosoftFluentUI (0.2.2): - - MicrosoftFluentUI/AvatarView_mac (= 0.2.2) - - MicrosoftFluentUI/Button_mac (= 0.2.2) - - MicrosoftFluentUI/Calendar_ios (= 0.2.2) - - MicrosoftFluentUI/Card_ios (= 0.2.2) - - MicrosoftFluentUI/CommandBar_ios (= 0.2.2) - - MicrosoftFluentUI/Controls_ios (= 0.2.2) - - MicrosoftFluentUI/Core_ios (= 0.2.2) - - MicrosoftFluentUI/Core_mac (= 0.2.2) - - MicrosoftFluentUI/DatePicker_mac (= 0.2.2) - - MicrosoftFluentUI/Drawer_ios (= 0.2.2) - - MicrosoftFluentUI/HUD_ios (= 0.2.2) - - MicrosoftFluentUI/Link_mac (= 0.2.2) - - MicrosoftFluentUI/Notification_ios (= 0.2.2) - - MicrosoftFluentUI/PillButtonBar_ios (= 0.2.2) - - MicrosoftFluentUI/PopupMenu_ios (= 0.2.2) - - MicrosoftFluentUI/Presenters_ios (= 0.2.2) - - MicrosoftFluentUI/SegmentedControl_ios (= 0.2.2) - - MicrosoftFluentUI/Separator_mac (= 0.2.2) - - MicrosoftFluentUI/Shimmer_ios (= 0.2.2) - - MicrosoftFluentUI/TabBar_ios (= 0.2.2) - - MicrosoftFluentUI/Tooltip_ios (= 0.2.2) - - MicrosoftFluentUI/Utilities_ios (= 0.2.2) - - MicrosoftFluentUI/Calendar_ios (0.2.2): + - MicrosoftFluentUI (0.2.3): + - MicrosoftFluentUI/ActivityIndicator_ios (= 0.2.3) + - MicrosoftFluentUI/ActivityViewAnimating_ios (= 0.2.3) + - MicrosoftFluentUI/Appearance_mac (= 0.2.3) + - MicrosoftFluentUI/Avatar_ios (= 0.2.3) + - MicrosoftFluentUI/AvatarView_mac (= 0.2.3) + - MicrosoftFluentUI/BadgeField_ios (= 0.2.3) + - MicrosoftFluentUI/BarButtonItems_ios (= 0.2.3) + - MicrosoftFluentUI/Button_ios (= 0.2.3) + - MicrosoftFluentUI/Button_mac (= 0.2.3) + - MicrosoftFluentUI/Calendar_ios (= 0.2.3) + - MicrosoftFluentUI/Card_ios (= 0.2.3) + - MicrosoftFluentUI/CommandBar_ios (= 0.2.3) + - MicrosoftFluentUI/Core_ios (= 0.2.3) + - MicrosoftFluentUI/Core_mac (= 0.2.3) + - MicrosoftFluentUI/DatePicker_mac (= 0.2.3) + - MicrosoftFluentUI/DotView_ios (= 0.2.3) + - MicrosoftFluentUI/Drawer_ios (= 0.2.3) + - MicrosoftFluentUI/DynamicColor_mac (= 0.2.3) + - MicrosoftFluentUI/EasyTapButton_ios (= 0.2.3) + - MicrosoftFluentUI/HUD_ios (= 0.2.3) + - MicrosoftFluentUI/IndeterminateProgressBar_ios (= 0.2.3) + - MicrosoftFluentUI/Label_ios (= 0.2.3) + - MicrosoftFluentUI/Link_mac (= 0.2.3) + - MicrosoftFluentUI/Navigation_ios (= 0.2.3) + - MicrosoftFluentUI/Notification_ios (= 0.2.3) + - MicrosoftFluentUI/Obscurable_ios (= 0.2.3) + - MicrosoftFluentUI/OtherCells_ios (= 0.2.3) + - MicrosoftFluentUI/PeoplePicker_ios (= 0.2.3) + - MicrosoftFluentUI/PillButtonBar_ios (= 0.2.3) + - MicrosoftFluentUI/PopupMenu_ios (= 0.2.3) + - MicrosoftFluentUI/Presenters_ios (= 0.2.3) + - MicrosoftFluentUI/ResizingHandleView_ios (= 0.2.3) + - MicrosoftFluentUI/ScrollView_ios (= 0.2.3) + - MicrosoftFluentUI/SegmentedControl_ios (= 0.2.3) + - MicrosoftFluentUI/Separator_ios (= 0.2.3) + - MicrosoftFluentUI/Separator_mac (= 0.2.3) + - MicrosoftFluentUI/Shimmer_ios (= 0.2.3) + - MicrosoftFluentUI/TabBar_ios (= 0.2.3) + - MicrosoftFluentUI/TableView_ios (= 0.2.3) + - MicrosoftFluentUI/Tooltip_ios (= 0.2.3) + - MicrosoftFluentUI/TouchForwardingView_ios (= 0.2.3) + - MicrosoftFluentUI/TwoLineTitleView_ios (= 0.2.3) + - MicrosoftFluentUI/Utilities_ios (= 0.2.3) + - MicrosoftFluentUI/ActivityIndicator_ios (0.2.3): + - MicrosoftFluentUI/ActivityViewAnimating_ios + - MicrosoftFluentUI/ActivityViewAnimating_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/Avatar_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/BadgeField_ios (0.2.3): + - MicrosoftFluentUI/Label_ios + - MicrosoftFluentUI/BarButtonItems_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/Button_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/Calendar_ios (0.2.3): + - MicrosoftFluentUI/BarButtonItems_ios + - MicrosoftFluentUI/DotView_ios + - MicrosoftFluentUI/Label_ios - MicrosoftFluentUI/Presenters_ios - MicrosoftFluentUI/SegmentedControl_ios - - MicrosoftFluentUI/Card_ios (0.2.2): - - MicrosoftFluentUI/Controls_ios - - MicrosoftFluentUI/CommandBar_ios (0.2.2): + - MicrosoftFluentUI/Separator_ios + - MicrosoftFluentUI/TwoLineTitleView_ios + - MicrosoftFluentUI/Card_ios (0.2.3): + - MicrosoftFluentUI/Label_ios + - MicrosoftFluentUI/CommandBar_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/Core_ios (0.2.3) + - MicrosoftFluentUI/DotView_ios (0.2.3): - MicrosoftFluentUI/Core_ios - - MicrosoftFluentUI/Controls_ios (0.2.2): + - MicrosoftFluentUI/Drawer_ios (0.2.3): + - MicrosoftFluentUI/Obscurable_ios + - MicrosoftFluentUI/ResizingHandleView_ios + - MicrosoftFluentUI/Separator_ios + - MicrosoftFluentUI/TouchForwardingView_ios + - MicrosoftFluentUI/EasyTapButton_ios (0.2.3): - MicrosoftFluentUI/Core_ios - - MicrosoftFluentUI/Core_ios (0.2.2) - - MicrosoftFluentUI/Drawer_ios (0.2.2): - - MicrosoftFluentUI/Controls_ios - - MicrosoftFluentUI/HUD_ios (0.2.2): - - MicrosoftFluentUI/Controls_ios - - MicrosoftFluentUI/Notification_ios (0.2.2): - - MicrosoftFluentUI/Controls_ios - - MicrosoftFluentUI/PillButtonBar_ios (0.2.2): + - MicrosoftFluentUI/HUD_ios (0.2.3): + - MicrosoftFluentUI/ActivityIndicator_ios + - MicrosoftFluentUI/Label_ios + - MicrosoftFluentUI/TouchForwardingView_ios + - MicrosoftFluentUI/IndeterminateProgressBar_ios (0.2.3): + - MicrosoftFluentUI/ActivityViewAnimating_ios + - MicrosoftFluentUI/Label_ios (0.2.3): - MicrosoftFluentUI/Core_ios - - MicrosoftFluentUI/PopupMenu_ios (0.2.2): + - MicrosoftFluentUI/Navigation_ios (0.2.3): + - MicrosoftFluentUI/ActivityIndicator_ios + - MicrosoftFluentUI/Avatar_ios + - MicrosoftFluentUI/Separator_ios + - MicrosoftFluentUI/TwoLineTitleView_ios + - MicrosoftFluentUI/Notification_ios (0.2.3): + - MicrosoftFluentUI/Label_ios + - MicrosoftFluentUI/Obscurable_ios + - MicrosoftFluentUI/Separator_ios + - MicrosoftFluentUI/Obscurable_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/OtherCells_ios (0.2.3): + - MicrosoftFluentUI/ActivityIndicator_ios + - MicrosoftFluentUI/TableView_ios + - MicrosoftFluentUI/PeoplePicker_ios (0.2.3): + - MicrosoftFluentUI/Avatar_ios + - MicrosoftFluentUI/BadgeField_ios + - MicrosoftFluentUI/OtherCells_ios + - MicrosoftFluentUI/Separator_ios + - MicrosoftFluentUI/PillButtonBar_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/PopupMenu_ios (0.2.3): - MicrosoftFluentUI/Drawer_ios - - MicrosoftFluentUI/Presenters_ios (0.2.2): - - MicrosoftFluentUI/Controls_ios - - MicrosoftFluentUI/SegmentedControl_ios (0.2.2): - - MicrosoftFluentUI/Controls_ios - - MicrosoftFluentUI/PillButtonBar_ios - - MicrosoftFluentUI/Shimmer_ios (0.2.2): + - MicrosoftFluentUI/Label_ios + - MicrosoftFluentUI/Separator_ios + - MicrosoftFluentUI/TableView_ios + - MicrosoftFluentUI/Presenters_ios (0.2.3): + - MicrosoftFluentUI/Obscurable_ios + - MicrosoftFluentUI/ResizingHandleView_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/ScrollView_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/SegmentedControl_ios (0.2.3): + - MicrosoftFluentUI/Separator_ios + - MicrosoftFluentUI/Separator_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/Shimmer_ios (0.2.3): - MicrosoftFluentUI/Core_ios - MicrosoftFluentUI/Utilities_ios - - MicrosoftFluentUI/TabBar_ios (0.2.2): - - MicrosoftFluentUI/Controls_ios - - MicrosoftFluentUI/Tooltip_ios (0.2.2): - - MicrosoftFluentUI/Controls_ios - - MicrosoftFluentUI/Utilities_ios (0.2.2) + - MicrosoftFluentUI/TabBar_ios (0.2.3): + - MicrosoftFluentUI/Avatar_ios + - MicrosoftFluentUI/Label_ios + - MicrosoftFluentUI/Separator_ios + - MicrosoftFluentUI/TableView_ios (0.2.3): + - MicrosoftFluentUI/Label_ios + - MicrosoftFluentUI/Separator_ios + - MicrosoftFluentUI/Tooltip_ios (0.2.3): + - MicrosoftFluentUI/Label_ios + - MicrosoftFluentUI/TouchForwardingView_ios + - MicrosoftFluentUI/TouchForwardingView_ios (0.2.3): + - MicrosoftFluentUI/Core_ios + - MicrosoftFluentUI/TwoLineTitleView_ios (0.2.3): + - MicrosoftFluentUI/EasyTapButton_ios + - MicrosoftFluentUI/Label_ios + - MicrosoftFluentUI/Utilities_ios (0.2.3) - QRCodeReader.swift (10.1.0) - RCTRequired (0.63.4) - RCTTypeSafety (0.63.4): @@ -318,7 +400,7 @@ PODS: - React-jsi (= 0.63.4) - ReactTestApp-DevSupport (0.3.13) - ReactTestApp-Resources (1.0.0-dev) - - RNSVG (12.1.1-0): + - RNSVG (12.1.1): - React - SwiftLint (0.43.0) - Yoga (1.14.0) @@ -330,7 +412,6 @@ DEPENDENCIES: - FluentUI-React-Native-Apple-Theme (from `../../../packages/theming/apple-theme/FluentUIReactNativeAppleTheme.podspec`) - FluentUI-React-Native-Avatar (from `../../../packages/experimental/Avatar/FluentUIReactNativeAvatar.podspec`) - FluentUI-React-Native-Button (from `../../../packages/experimental/NativeButton/FluentUIReactNativeButton.podspec`) - - FluentUI-React-Native-Shimmer (from `../../../packages/components/Shimmer/FluentUIReactNativeShimmer.podspec`) - Folly (from `../../../node_modules/react-native/third-party-podspecs/Folly.podspec`) - glog (from `../../../node_modules/react-native/third-party-podspecs/glog.podspec`) - QRCodeReader.swift @@ -383,8 +464,6 @@ EXTERNAL SOURCES: :path: "../../../packages/experimental/Avatar/FluentUIReactNativeAvatar.podspec" FluentUI-React-Native-Button: :path: "../../../packages/experimental/NativeButton/FluentUIReactNativeButton.podspec" - FluentUI-React-Native-Shimmer: - :path: "../../../packages/components/Shimmer/FluentUIReactNativeShimmer.podspec" Folly: :podspec: "../../../node_modules/react-native/third-party-podspecs/Folly.podspec" glog: @@ -442,16 +521,15 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c - DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2 + DoubleConversion: cde416483dac037923206447da6e1454df403714 FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e FluentUI-React-Native-Apple-Theme: 5096ba1ccdce75cac6af8dfb6f43880828d6a8e1 - FluentUI-React-Native-Avatar: 1a463d15fe9cef99c18dcec0516ebd5459fe2e25 + FluentUI-React-Native-Avatar: 20e879a5477bf6a32510796d139d699dad5f7f5f FluentUI-React-Native-Button: b882911504fd4b8ad21b6391b6fb49d908276f5e - FluentUI-React-Native-Shimmer: 73e604318cff67e942b04ac6b7f3908ce4fa6b38 Folly: b73c3869541e86821df3c387eb0af5f65addfab4 - glog: 1f3da668190260b06b429bb211bfbee5cd790c28 - MicrosoftFluentUI: 8a1ef14a8479106c33822d05b774e04051bb33f2 + glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3 + MicrosoftFluentUI: 416cab05ebcf05dcaea0a1babc4de2ba69928026 QRCodeReader.swift: 373a389fe9a22d513c879a32a6f647c58f4ef572 RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e RCTTypeSafety: 8c9c544ecbf20337d069e4ae7fd9a377aadf504b @@ -476,10 +554,10 @@ SPEC CHECKSUMS: ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b ReactTestApp-DevSupport: 12d9f285a44ff0cb7962a213621f87d3e6de9288 ReactTestApp-Resources: 5950ae44720217c6778ff03fb1d906c8fb3ce483 - RNSVG: 1a8855adeb20c5beb0a808281608315fc1092d15 + RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f SwiftLint: 0c645fdc6feed3e390c1701ab3cc669f88b42752 Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6 -PODFILE CHECKSUM: ef19e12dd10aa6a43e8b448486be35e9c6396e28 +PODFILE CHECKSUM: 94ab61973ec6b63575edbb7ea6de57d5f0fb622c COCOAPODS: 1.10.1 diff --git a/apps/macos/src/Podfile.lock b/apps/macos/src/Podfile.lock index 0e606fa0d6..b54d5cc06a 100644 --- a/apps/macos/src/Podfile.lock +++ b/apps/macos/src/Podfile.lock @@ -19,39 +19,65 @@ PODS: - MicrosoftFluentUI (~> 0.2.2) - React - glog (0.3.5) - - MicrosoftFluentUI (0.2.2): - - MicrosoftFluentUI/AvatarView_mac (= 0.2.2) - - MicrosoftFluentUI/Button_mac (= 0.2.2) - - MicrosoftFluentUI/Calendar_ios (= 0.2.2) - - MicrosoftFluentUI/Card_ios (= 0.2.2) - - MicrosoftFluentUI/CommandBar_ios (= 0.2.2) - - MicrosoftFluentUI/Controls_ios (= 0.2.2) - - MicrosoftFluentUI/Core_ios (= 0.2.2) - - MicrosoftFluentUI/Core_mac (= 0.2.2) - - MicrosoftFluentUI/DatePicker_mac (= 0.2.2) - - MicrosoftFluentUI/Drawer_ios (= 0.2.2) - - MicrosoftFluentUI/HUD_ios (= 0.2.2) - - MicrosoftFluentUI/Link_mac (= 0.2.2) - - MicrosoftFluentUI/Notification_ios (= 0.2.2) - - MicrosoftFluentUI/PillButtonBar_ios (= 0.2.2) - - MicrosoftFluentUI/PopupMenu_ios (= 0.2.2) - - MicrosoftFluentUI/Presenters_ios (= 0.2.2) - - MicrosoftFluentUI/SegmentedControl_ios (= 0.2.2) - - MicrosoftFluentUI/Separator_mac (= 0.2.2) - - MicrosoftFluentUI/Shimmer_ios (= 0.2.2) - - MicrosoftFluentUI/TabBar_ios (= 0.2.2) - - MicrosoftFluentUI/Tooltip_ios (= 0.2.2) - - MicrosoftFluentUI/Utilities_ios (= 0.2.2) - - MicrosoftFluentUI/AvatarView_mac (0.2.2): + - MicrosoftFluentUI (0.2.3): + - MicrosoftFluentUI/ActivityIndicator_ios (= 0.2.3) + - MicrosoftFluentUI/ActivityViewAnimating_ios (= 0.2.3) + - MicrosoftFluentUI/Appearance_mac (= 0.2.3) + - MicrosoftFluentUI/Avatar_ios (= 0.2.3) + - MicrosoftFluentUI/AvatarView_mac (= 0.2.3) + - MicrosoftFluentUI/BadgeField_ios (= 0.2.3) + - MicrosoftFluentUI/BarButtonItems_ios (= 0.2.3) + - MicrosoftFluentUI/Button_ios (= 0.2.3) + - MicrosoftFluentUI/Button_mac (= 0.2.3) + - MicrosoftFluentUI/Calendar_ios (= 0.2.3) + - MicrosoftFluentUI/Card_ios (= 0.2.3) + - MicrosoftFluentUI/CommandBar_ios (= 0.2.3) + - MicrosoftFluentUI/Core_ios (= 0.2.3) + - MicrosoftFluentUI/Core_mac (= 0.2.3) + - MicrosoftFluentUI/DatePicker_mac (= 0.2.3) + - MicrosoftFluentUI/DotView_ios (= 0.2.3) + - MicrosoftFluentUI/Drawer_ios (= 0.2.3) + - MicrosoftFluentUI/DynamicColor_mac (= 0.2.3) + - MicrosoftFluentUI/EasyTapButton_ios (= 0.2.3) + - MicrosoftFluentUI/HUD_ios (= 0.2.3) + - MicrosoftFluentUI/IndeterminateProgressBar_ios (= 0.2.3) + - MicrosoftFluentUI/Label_ios (= 0.2.3) + - MicrosoftFluentUI/Link_mac (= 0.2.3) + - MicrosoftFluentUI/Navigation_ios (= 0.2.3) + - MicrosoftFluentUI/Notification_ios (= 0.2.3) + - MicrosoftFluentUI/Obscurable_ios (= 0.2.3) + - MicrosoftFluentUI/OtherCells_ios (= 0.2.3) + - MicrosoftFluentUI/PeoplePicker_ios (= 0.2.3) + - MicrosoftFluentUI/PillButtonBar_ios (= 0.2.3) + - MicrosoftFluentUI/PopupMenu_ios (= 0.2.3) + - MicrosoftFluentUI/Presenters_ios (= 0.2.3) + - MicrosoftFluentUI/ResizingHandleView_ios (= 0.2.3) + - MicrosoftFluentUI/ScrollView_ios (= 0.2.3) + - MicrosoftFluentUI/SegmentedControl_ios (= 0.2.3) + - MicrosoftFluentUI/Separator_ios (= 0.2.3) + - MicrosoftFluentUI/Separator_mac (= 0.2.3) + - MicrosoftFluentUI/Shimmer_ios (= 0.2.3) + - MicrosoftFluentUI/TabBar_ios (= 0.2.3) + - MicrosoftFluentUI/TableView_ios (= 0.2.3) + - MicrosoftFluentUI/Tooltip_ios (= 0.2.3) + - MicrosoftFluentUI/TouchForwardingView_ios (= 0.2.3) + - MicrosoftFluentUI/TwoLineTitleView_ios (= 0.2.3) + - MicrosoftFluentUI/Utilities_ios (= 0.2.3) + - MicrosoftFluentUI/Appearance_mac (0.2.3) + - MicrosoftFluentUI/AvatarView_mac (0.2.3): - MicrosoftFluentUI/Core_mac - - MicrosoftFluentUI/Button_mac (0.2.2): + - MicrosoftFluentUI/DynamicColor_mac + - MicrosoftFluentUI/Button_mac (0.2.3): - MicrosoftFluentUI/Core_mac - - MicrosoftFluentUI/Core_mac (0.2.2) - - MicrosoftFluentUI/DatePicker_mac (0.2.2): + - MicrosoftFluentUI/Core_mac (0.2.3) + - MicrosoftFluentUI/DatePicker_mac (0.2.3): + - MicrosoftFluentUI/Appearance_mac - MicrosoftFluentUI/Core_mac - - MicrosoftFluentUI/Link_mac (0.2.2): + - MicrosoftFluentUI/DynamicColor_mac (0.2.3): + - MicrosoftFluentUI/Appearance_mac + - MicrosoftFluentUI/Link_mac (0.2.3): - MicrosoftFluentUI/Core_mac - - MicrosoftFluentUI/Separator_mac (0.2.2): + - MicrosoftFluentUI/Separator_mac (0.2.3): - MicrosoftFluentUI/Core_mac - RCT-Folly (2020.01.13.00): - boost-for-react-native @@ -292,7 +318,7 @@ PODS: - ReactTestApp-Resources (1.0.0-dev) - RNCPicker (1.9.11): - React-Core - - RNSVG (12.1.1-0): + - RNSVG (12.1.1): - React - SwiftLint (0.43.0) - Yoga (1.14.0) @@ -420,7 +446,7 @@ SPEC CHECKSUMS: FluentUI-React-Native-Avatar: 20e879a5477bf6a32510796d139d699dad5f7f5f FluentUI-React-Native-Button: b882911504fd4b8ad21b6391b6fb49d908276f5e glog: 1cb7c408c781ae8f35bbababe459b45e3dee4ec1 - MicrosoftFluentUI: 8a1ef14a8479106c33822d05b774e04051bb33f2 + MicrosoftFluentUI: 416cab05ebcf05dcaea0a1babc4de2ba69928026 RCT-Folly: 1347093ffe75e152d846f7e45a3ef901b60021aa RCTRequired: f0ba811ba36bbe463b0151cbda362853106c13ac RCTTypeSafety: 10f774586f2956b7cf547cc97f2261eb22ee2a25 @@ -445,7 +471,7 @@ SPEC CHECKSUMS: ReactTestApp-DevSupport: 12d9f285a44ff0cb7962a213621f87d3e6de9288 ReactTestApp-Resources: 5950ae44720217c6778ff03fb1d906c8fb3ce483 RNCPicker: 6780c753e9e674065db90d9c965920516402579d - RNSVG: 1a8855adeb20c5beb0a808281608315fc1092d15 + RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f SwiftLint: 0c645fdc6feed3e390c1701ab3cc669f88b42752 Yoga: 6f6f412e10cf9acb93bb0e290613784603d2f0c9 diff --git a/change/@fluentui-react-native-2021-04-30-17-05-41-shimmer-js.json b/change/@fluentui-react-native-2021-04-30-17-05-41-shimmer-js.json new file mode 100644 index 0000000000..a03ae8c54f --- /dev/null +++ b/change/@fluentui-react-native-2021-04-30-17-05-41-shimmer-js.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "experimental shimmer", + "packageName": "@fluentui/react-native", + "email": "67026167+chiuam@users.noreply.github.com", + "dependentChangeType": "patch", + "date": "2021-04-30T21:05:41.394Z" +} diff --git a/change/@fluentui-react-native-experimental-shimmer-2021-04-30-17-05-41-shimmer-js.json b/change/@fluentui-react-native-experimental-shimmer-2021-04-30-17-05-41-shimmer-js.json new file mode 100644 index 0000000000..bab7e07bbd --- /dev/null +++ b/change/@fluentui-react-native-experimental-shimmer-2021-04-30-17-05-41-shimmer-js.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "experimental shimmer", + "packageName": "@fluentui-react-native/experimental-shimmer", + "email": "67026167+chiuam@users.noreply.github.com", + "dependentChangeType": "patch", + "date": "2021-04-30T21:05:30.890Z" +} diff --git a/change/@fluentui-react-native-tester-2021-04-30-17-05-41-shimmer-js.json b/change/@fluentui-react-native-tester-2021-04-30-17-05-41-shimmer-js.json new file mode 100644 index 0000000000..d6a3b00d1e --- /dev/null +++ b/change/@fluentui-react-native-tester-2021-04-30-17-05-41-shimmer-js.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "experimental shimmer", + "packageName": "@fluentui-react-native/tester", + "email": "67026167+chiuam@users.noreply.github.com", + "dependentChangeType": "patch", + "date": "2021-04-30T21:05:11.103Z" +} diff --git a/packages/components/Shimmer/.eslintrc.js b/packages/components/Shimmer/.eslintrc.js deleted file mode 100644 index 0ee1302dfd..0000000000 --- a/packages/components/Shimmer/.eslintrc.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - extends: [ - "@uifabricshared/eslint-config-rules" - ] -} diff --git a/packages/components/Shimmer/CHANGELOG.json b/packages/components/Shimmer/CHANGELOG.json deleted file mode 100644 index 588ee35c62..0000000000 --- a/packages/components/Shimmer/CHANGELOG.json +++ /dev/null @@ -1,298 +0,0 @@ -{ - "name": "@fluentui-react-native/shimmer", - "entries": [ - { - "date": "Thu, 15 Apr 2021 20:08:17 GMT", - "tag": "@fluentui-react-native/shimmer_v0.6.3", - "version": "0.6.3", - "comments": { - "none": [ - { - "comment": "Merge remote-tracking branch 'upstream/master' into amgleitman/icon-macos", - "author": "adam.gleitman@gmail.com", - "commit": "06834001f0f0238d2a7ad99a51a430b28eaa8daa", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Thu, 11 Mar 2021 19:48:16 GMT", - "tag": "@fluentui-react-native/shimmer_v0.6.2", - "version": "0.6.2", - "comments": { - "patch": [ - { - "comment": "Update FluentTester to be mobile friendly on iOS", - "author": "saadnajmi2@gmail.com", - "commit": "78158ad0818a26320974a12797d2b9fc757649f0", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Wed, 10 Mar 2021 04:33:26 GMT", - "tag": "@fluentui-react-native/shimmer_v0.6.1", - "version": "0.6.1", - "comments": { - "patch": [ - { - "comment": "Add a native theming module for iOS", - "author": "saadnajmi2@gmail.com", - "commit": "35117f9c9d72fc6ecd1ed74fc0facc07fab8d18f", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Mon, 08 Mar 2021 18:43:59 GMT", - "tag": "@fluentui-react-native/shimmer_v0.6.0", - "version": "0.6.0", - "comments": { - "minor": [ - { - "comment": "Update FluentUI Apple dependency to 0.2.2, set minimum iOS to 13", - "author": "saadnajmi2@gmail.com", - "commit": "b67f9fe5e0aaaf1c145a68ab1878655678715248", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Sat, 06 Mar 2021 00:20:05 GMT", - "tag": "@fluentui-react-native/shimmer_v0.5.0", - "version": "0.5.0", - "comments": { - "patch": [ - { - "comment": "Base theme on macOS changed to apple theme", - "author": "saadnajmi2@gmail.com", - "commit": "1b3d9f6ef10c1138b6f9701b5edf9ef52be623e6", - "package": "@fluentui-react-native/shimmer" - } - ], - "minor": [ - { - "comment": "Update to react-native 0.63", - "author": "30809111+acoates-ms@users.noreply.github.com", - "commit": "d35d3b45f12a670648edaa7143b210ed43360996", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Mon, 01 Mar 2021 22:53:12 GMT", - "tag": "@fluentui-react-native/shimmer_v0.4.3", - "version": "0.4.3", - "comments": { - "patch": [ - { - "comment": "Update deps", - "author": "warleu@microsoft.com", - "commit": "23cd3d437e63e105f5feee16a1b8ef8e769b61c1", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Fri, 12 Feb 2021 19:45:36 GMT", - "tag": "@fluentui-react-native/shimmer_v0.4.2", - "version": "0.4.2", - "comments": { - "patch": [ - { - "comment": "Update FluentUI Apple version", - "author": "saadnajmi2@gmail.com", - "commit": "73a55fb4635adc8be808fff2dc6312763011977d", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Wed, 13 Jan 2021 20:04:26 GMT", - "tag": "@fluentui-react-native/shimmer_v0.4.0", - "version": "0.4.0", - "comments": { - "minor": [ - { - "comment": "update FUA version for button", - "author": "67026167+chiuam@users.noreply.github.com", - "commit": "a0b6666ced16ccb8d06e7f91dc3136294d209de7", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Thu, 17 Dec 2020 00:09:27 GMT", - "tag": "@fluentui-react-native/shimmer_v0.3.3", - "version": "0.3.3", - "comments": { - "none": [ - { - "comment": "Add readme for svg", - "author": "warleu@microsoft.com", - "commit": "c2c28c356aabbd3e74a8d085015a3f4507fbdbe9", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Sat, 24 Oct 2020 06:35:04 GMT", - "tag": "@fluentui-react-native/shimmer_v0.3.1", - "version": "0.3.1", - "comments": { - "patch": [ - { - "comment": "Updated Shimmer metadata in podspec and package.json", - "author": "saadnajmi2@gmail.com", - "commit": "046031640c02dcd301c1c140131193e9c59d573f", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Fri, 23 Oct 2020 22:27:37 GMT", - "tag": "@fluentui-react-native/shimmer_v0.3.0", - "version": "0.3.0", - "comments": { - "minor": [ - { - "comment": "RNIcon feature", - "author": "warleu@microsoft.com", - "commit": "83a0f448bf9ee9dddece08e7c277304dcef96388", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Thu, 22 Oct 2020 21:21:59 GMT", - "tag": "@fluentui-react-native/shimmer_v0.2.11", - "version": "0.2.11", - "comments": { - "none": [ - { - "comment": "onDismiss not called when contextual menu is dismissed with item click", - "author": "lehon@microsoft.com", - "commit": "4f3ed9d5555e86a6017901aa2f010732d6d6fe5a", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Tue, 13 Oct 2020 01:39:45 GMT", - "tag": "@fluentui-react-native/shimmer_v0.2.10", - "version": "0.2.10", - "comments": { - "none": [ - { - "comment": "add focused state condition to onKeyUp callback", - "author": "lehon@microsoft.com", - "commit": "7a9cef9d56db7ad154e542b4ac5547458dfc604d", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Mon, 12 Oct 2020 04:09:31 GMT", - "tag": "@fluentui-react-native/shimmer_v0.2.10", - "version": "0.2.10", - "comments": { - "none": [ - { - "comment": "no change", - "author": "email not defined", - "commit": "d1c543f21301b22a84fb6968a2c2612bb487be39", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Mon, 28 Sep 2020 20:32:21 GMT", - "tag": "@fluentui-react-native/shimmer_v0.2.8", - "version": "0.2.8", - "comments": { - "none": [ - { - "comment": "move test pages", - "author": "aliciakds88@gmail.com", - "commit": "8338baf6918f763b3ba3b3a7169d1f390ad0557d", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Tue, 22 Sep 2020 21:42:19 GMT", - "tag": "@fluentui-react-native/shimmer_v0.2.3", - "version": "0.2.3", - "comments": { - "patch": [ - { - "comment": "Updated Shimmer to not have a module name", - "author": "saadnajmi2@gmail.com", - "commit": "901b3a534df10a1d471c815349651500d0237575", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Fri, 11 Sep 2020 20:25:42 GMT", - "tag": "@fluentui-react-native/shimmer_v0.2.1", - "version": "0.2.1", - "comments": { - "none": [ - { - "comment": "Add samples and some README text to use-slots and use-styling packages", - "author": "jasonmo@microsoft.com", - "commit": "2566347850eff4ed67bfad2a85134481e088cba6", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Wed, 09 Sep 2020 21:36:19 GMT", - "tag": "@fluentui-react-native/shimmer_v0.2.1", - "version": "0.2.1", - "comments": { - "patch": [ - { - "comment": "Disabled prop-types validation rule", - "author": "saadnajmi2@gmail.com", - "commit": "6042d1bbb538eb130b3fb4ecae360e467379e6ed", - "package": "@fluentui-react-native/shimmer" - } - ] - } - }, - { - "date": "Wed, 09 Sep 2020 08:18:37 GMT", - "tag": "@fluentui-react-native/shimmer_v0.2.0", - "version": "0.2.0", - "comments": { - "minor": [ - { - "comment": "Shimmer initial creation", - "author": "saadnajmi2@gmail.com", - "commit": "0c35ad1f0b2c9bfc0456f885c3e2f75645288de5", - "package": "@fluentui-react-native/shimmer" - } - ] - } - } - ] -} diff --git a/packages/components/Shimmer/CHANGELOG.md b/packages/components/Shimmer/CHANGELOG.md deleted file mode 100644 index bfbb09a007..0000000000 --- a/packages/components/Shimmer/CHANGELOG.md +++ /dev/null @@ -1,105 +0,0 @@ -# Change Log - @fluentui-react-native/shimmer - -This log was last generated on Thu, 11 Mar 2021 19:48:16 GMT and should not be manually modified. - - - -## 0.6.2 - -Thu, 11 Mar 2021 19:48:16 GMT - -### Patches - -- Update FluentTester to be mobile friendly on iOS (saadnajmi2@gmail.com) - -## 0.6.1 - -Wed, 10 Mar 2021 04:33:26 GMT - -### Patches - -- Add a native theming module for iOS (saadnajmi2@gmail.com) - -## 0.6.0 - -Mon, 08 Mar 2021 18:43:59 GMT - -### Minor changes - -- Update FluentUI Apple dependency to 0.2.2, set minimum iOS to 13 (saadnajmi2@gmail.com) - -## 0.5.0 - -Sat, 06 Mar 2021 00:20:05 GMT - -### Minor changes - -- Update to react-native 0.63 (30809111+acoates-ms@users.noreply.github.com) - -### Patches - -- Base theme on macOS changed to apple theme (saadnajmi2@gmail.com) - -## 0.4.3 - -Mon, 01 Mar 2021 22:53:12 GMT - -### Patches - -- Update deps (warleu@microsoft.com) - -## 0.4.2 - -Fri, 12 Feb 2021 19:45:36 GMT - -### Patches - -- Update FluentUI Apple version (saadnajmi2@gmail.com) - -## 0.4.0 - -Wed, 13 Jan 2021 20:04:26 GMT - -### Minor changes - -- update FUA version for button (67026167+chiuam@users.noreply.github.com) - -## 0.3.1 - -Sat, 24 Oct 2020 06:35:04 GMT - -### Patches - -- Updated Shimmer metadata in podspec and package.json (saadnajmi2@gmail.com) - -## 0.3.0 - -Fri, 23 Oct 2020 22:27:37 GMT - -### Minor changes - -- RNIcon feature (warleu@microsoft.com) - -## 0.2.3 - -Tue, 22 Sep 2020 21:42:19 GMT - -### Patches - -- Updated Shimmer to not have a module name (saadnajmi2@gmail.com) - -## 0.2.1 - -Wed, 09 Sep 2020 21:36:19 GMT - -### Patches - -- Disabled prop-types validation rule (saadnajmi2@gmail.com) - -## 0.2.0 - -Wed, 09 Sep 2020 08:18:37 GMT - -### Minor changes - -- Shimmer initial creation (saadnajmi2@gmail.com) diff --git a/packages/components/Shimmer/FluentUIReactNativeShimmer.podspec b/packages/components/Shimmer/FluentUIReactNativeShimmer.podspec deleted file mode 100644 index 6db156bf1c..0000000000 --- a/packages/components/Shimmer/FluentUIReactNativeShimmer.podspec +++ /dev/null @@ -1,22 +0,0 @@ -require 'json' - -package = JSON.parse(File.read(File.join(__dir__, 'package.json'))) - -Pod::Spec.new do |s| - s.name = 'FluentUI-React-Native-Shimmer' - s.version = package['version'] - s.summary = package['description'] - s.license = package['license'] - - s.authors = package['author'] - s.homepage = package['homepage'] - - s.source = { :git => "https://github.com/microsoft/fluentui-react-native.git", :tag => "#{s.version}" } - s.swift_version = "5" - - s.ios.deployment_target = "13.0" - s.ios.source_files = "ios/*.{swift,h,m}" - - s.dependency 'React' - s.dependency 'MicrosoftFluentUI', '~> 0.2.2' -end \ No newline at end of file diff --git a/packages/components/Shimmer/api-extractor.json b/packages/components/Shimmer/api-extractor.json deleted file mode 100644 index 2bee2032d6..0000000000 --- a/packages/components/Shimmer/api-extractor.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "@uifabricshared/build-native/api-extractor.json" -} diff --git a/packages/components/Shimmer/babel.config.js b/packages/components/Shimmer/babel.config.js deleted file mode 100644 index e7dd7c3c35..0000000000 --- a/packages/components/Shimmer/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@uifabricshared/build-native/babel.config'); diff --git a/packages/components/Shimmer/ios/MSFShimmerViewManager.m b/packages/components/Shimmer/ios/MSFShimmerViewManager.m deleted file mode 100644 index 4bb7ddd845..0000000000 --- a/packages/components/Shimmer/ios/MSFShimmerViewManager.m +++ /dev/null @@ -1,15 +0,0 @@ -#import - - -@interface RCT_EXTERN_MODULE(MSFShimmerViewManager, RCTViewManager) - -RCT_EXPORT_VIEW_PROPERTY(shimmerAlpha, CGFloat) -RCT_EXPORT_VIEW_PROPERTY(shimmerWidth, CGFloat) -RCT_EXPORT_VIEW_PROPERTY(shimmerAngle, CGFloat) -RCT_EXPORT_VIEW_PROPERTY(shimmerSpeed, CGFloat) -RCT_EXPORT_VIEW_PROPERTY(shimmerDelay, double) - -RCT_EXPORT_VIEW_PROPERTY(viewTintColor, UIColor) -RCT_EXPORT_VIEW_PROPERTY(cornerRadius, CGFloat) - -@end diff --git a/packages/components/Shimmer/ios/ShimmerView-Bridging-Header.h b/packages/components/Shimmer/ios/ShimmerView-Bridging-Header.h deleted file mode 100644 index 0e1e8d9e9f..0000000000 --- a/packages/components/Shimmer/ios/ShimmerView-Bridging-Header.h +++ /dev/null @@ -1,2 +0,0 @@ -#import - diff --git a/packages/components/Shimmer/ios/ShimmerViewManager.swift b/packages/components/Shimmer/ios/ShimmerViewManager.swift deleted file mode 100644 index 79449d1539..0000000000 --- a/packages/components/Shimmer/ios/ShimmerViewManager.swift +++ /dev/null @@ -1,16 +0,0 @@ -import Foundation -import FluentUI - -@objc(MSFShimmerViewManager) -class ShimmerViewManager: RCTViewManager { - - override func view() -> UIView! { - let shimmerView = ShimmerView() - shimmerView.shimmersLeafViews = true - return shimmerView - } - - override class func requiresMainQueueSetup() -> Bool { - return true - } -} diff --git a/packages/components/Shimmer/src/Shimmer.tsx b/packages/components/Shimmer/src/Shimmer.tsx deleted file mode 100644 index fb3fa2a238..0000000000 --- a/packages/components/Shimmer/src/Shimmer.tsx +++ /dev/null @@ -1,88 +0,0 @@ -/** @jsx withSlots */ -import { compose, UseSlots, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { ViewProps } from 'react-native'; -import * as React from 'react'; -import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; - -const shimmerName = 'Shimmer'; - -const NativeShimmerView = ensureNativeComponent('MSFShimmerView'); - -/** - * Shimmer Tokens are a 1:1 list of the native properties we can set on the native component - */ -export type ShimmerTokens = { - /** - * The alpha value of the center of the gradient in the animation - */ - shimmerAlpha?: number; - - /** - * The width of the gradient in the animation - */ - shimmerWidth?: number; - - /** - * Angle of the direction of the gradient, in radian. 0 means horizontal, Pi/2 means vertical. - */ - shimmerAngle?: number; - - /** - * Speed of the animation, in point/seconds. - */ - shimmerSpeed?: number; - - /** - * Delay between the end of a shimmering animation and the beginning of the next one, in seconds - */ - shimmerDelay?: number; - - /** - * Color to tint the shimmer boxes. Defaults to the Fabric default color. - */ - viewTintColor?: string; - - /** - * Corner radius on each view. - */ - cornerRadius?: number; -}; - -/** - * All of the base native view props, plus the props the native shimmer control needs to receive - */ -export type NativeShimmerViewProps = ViewProps & ShimmerTokens; - -export type ShimmerProps = ViewProps; - -interface ShimmerType { - props: ShimmerProps; - slotProps: { root: NativeShimmerViewProps }; - tokens: ShimmerTokens; -} - -export const Shimmer = compose({ - displayName: shimmerName, - tokens: [ - { - shimmerAlpha: 0.4, - shimmerWidth: 180, - shimmerAngle: -(Math.PI / 45.0), - shimmerSpeed: 350, - shimmerDelay: 0.4, - viewTintColor: 'rgb(241,241,241)', - cornerRadius: 4, - }, - shimmerName, - ], - slotProps: { - root: buildProps(tokens => ({ ...tokens }), []), - }, - slots: { root: NativeShimmerView }, - render: (props: NativeShimmerViewProps, useSlots: UseSlots) => { - const Root = useSlots(props).root; - return (rest: NativeShimmerViewProps, ...children: React.ReactNode[]) => {children}; - }, -}); - -export default Shimmer; diff --git a/packages/components/Shimmer/src/index.ts b/packages/components/Shimmer/src/index.ts deleted file mode 100644 index 6ba926f0f4..0000000000 --- a/packages/components/Shimmer/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Shimmer'; diff --git a/packages/experimental/Shimmer/CHANGELOG.json b/packages/experimental/Shimmer/CHANGELOG.json new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/packages/experimental/Shimmer/CHANGELOG.json @@ -0,0 +1 @@ + diff --git a/packages/experimental/Shimmer/CHANGELOG.md b/packages/experimental/Shimmer/CHANGELOG.md new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/packages/experimental/Shimmer/CHANGELOG.md @@ -0,0 +1 @@ + diff --git a/packages/components/Shimmer/just.config.js b/packages/experimental/Shimmer/just.config.js similarity index 100% rename from packages/components/Shimmer/just.config.js rename to packages/experimental/Shimmer/just.config.js diff --git a/packages/components/Shimmer/package.json b/packages/experimental/Shimmer/package.json similarity index 61% rename from packages/components/Shimmer/package.json rename to packages/experimental/Shimmer/package.json index 452cee4840..3e084fbb83 100644 --- a/packages/components/Shimmer/package.json +++ b/packages/experimental/Shimmer/package.json @@ -1,10 +1,7 @@ { - "name": "@fluentui-react-native/shimmer", - "version": "0.6.3", - "description": "A cross-platform Shimmer component using the Fluent Design System", - "license": "MIT", - "author": "Microsoft ", - "homepage": "https://github.com/microsoft/fluentui-react-native", + "name": "@fluentui-react-native/experimental-shimmer", + "version": "0.1.0", + "description": "A cross-platform Fluent Shimmer component", "main": "src/index.ts", "module": "src/index.ts", "typings": "lib/index.d.ts", @@ -16,16 +13,15 @@ "build": "fluentui-scripts build", "just": "fluentui-scripts", "clean": "fluentui-scripts clean", - "lint": "fluentui-scripts eslint", - "test": "fluentui-scripts jest", "update-snapshots": "fluentui-scripts jest -u", "verify-api": "fluentui-scripts verify-api-extractor", "update-api": "fluentui-scripts update-api-extractor" }, "dependencies": { "@fluentui-react-native/framework": "0.5.1", - "@fluentui-react-native/adapters": ">=0.6.0 <1.0.0", - "@fluentui-react-native/tokens": ">=0.8.0 <1.0.0" + "@fluentui-react-native/theme-types": ">=0.6.0 <1.0.0", + "@fluentui-react-native/tokens": ">=0.8.0 <1.0.0", + "react-native-svg": "^12.1.1" }, "devDependencies": { "@types/react-native": "^0.63.0", @@ -35,5 +31,7 @@ }, "peerDependencies": { "react-native": ">=0.63.4" - } + }, + "author": "", + "license": "MIT" } diff --git a/packages/experimental/Shimmer/src/Shimmer.styling.ts b/packages/experimental/Shimmer/src/Shimmer.styling.ts new file mode 100644 index 0000000000..64d941fa8d --- /dev/null +++ b/packages/experimental/Shimmer/src/Shimmer.styling.ts @@ -0,0 +1,40 @@ +import { UseStylingOptions, buildProps } from '@fluentui-react-native/framework'; +import { shimmerName, ShimmerProps, ShimmerSlotProps, ShimmerTokens } from './Shimmer.types'; +export const stylingSettings: UseStylingOptions = { + tokens: [ + (t) => ({ + toValue: 30, + duration: 7000, + delay: 0, + gradientTintColor: t.host?.appearance === 'light' ? 'white' : 'black', + shimmerTintColor: t.host?.appearance === 'light' ? "#E1E1E1" : '#404040', + width: 200, + height: 100, + angle: 0, + gradientOpacity: .7, + }), + shimmerName, + ], + slotProps: { + root: buildProps( + (tokens: ShimmerTokens) => ({ + gradientTintColor: tokens.gradientTintColor, + toValue: tokens.toValue, + duration: tokens.duration, + delay: tokens.delay, + shimmerTintColor: tokens.shimmerTintColor, + width: tokens.width, + height: tokens.height, + angle: tokens.angle, + gradientOpacity: tokens.gradientOpacity, + accessibilityRole: 'progressbar', + accessible: true, + }), + ['gradientTintColor', 'toValue', 'duration', 'delay', 'shimmerTintColor', 'width', 'height', 'angle', 'gradientOpacity'], + ), + image: buildProps((_tokens: ShimmerTokens) => ({ + href: null, + }), + ), + }, +}; diff --git a/packages/experimental/Shimmer/src/Shimmer.tsx b/packages/experimental/Shimmer/src/Shimmer.tsx new file mode 100644 index 0000000000..0e9d22c032 --- /dev/null +++ b/packages/experimental/Shimmer/src/Shimmer.tsx @@ -0,0 +1,93 @@ +/** @jsx withSlots */ +import { useRef, useEffect, useMemo } from "react"; +import { Circle, ClipPath, Defs, Image, LinearGradient, Rect, Stop, Svg } from 'react-native-svg'; +import { shimmerName, ShimmerProps, ShimmerType } from './Shimmer.types'; +import { compose, mergeProps, withSlots, UseSlots, buildUseStyling } from '@fluentui-react-native/framework'; +import { Animated } from 'react-native'; +import { stylingSettings } from './Shimmer.styling'; + +export function useShimmerAnimation(memoData: any) { + let startValue = useRef(new Animated.Value(0)).current + useEffect(() => { + Animated.loop( + Animated.sequence([ + Animated.timing(startValue, { + toValue: memoData.toValue, + duration: memoData.duration, + delay: memoData.delay, + useNativeDriver: false, + })]), + ).start() + }) + return startValue; +} + +const useStyling = buildUseStyling(stylingSettings); +export const Shimmer = compose({ + displayName: shimmerName, + ...stylingSettings, + slots: { + root: Svg, + image: Image, + }, + render: (props: ShimmerProps, useSlots: UseSlots) => { + const Slots = useSlots(props); + let AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient); + const tokens = useStyling(props).root; + + const memoizedShimmerData = useMemo( + () => ({ + gradientTintColor: props.gradientTintColor ? props.gradientTintColor : tokens['gradientTintColor'], + shimmerTintColor: props.shimmerTintColor ? props.shimmerTintColor : tokens['shimmerTintColor'], + containerWidth: props.width ? props.width : tokens['width'], + containerHeight: props.height ? props.height : tokens['height'], + toValue: props.toValue ? props.toValue : tokens['toValue'], + delay: props.delay ? props.delay : tokens['delay'], + duration: props.duration ? props.duration : tokens['duration'], + angle: props.angle ? props.angle : tokens['angle'], + gradientOpacity: tokens['gradientOpacity'], + }), + [props.gradientTintColor, props.shimmerTintColor, props.width, props.height, props.toValue, props.delay, props.duration, props.angle, props.gradientOpacity], + ); + + let startValue = useShimmerAnimation(memoizedShimmerData); + + return (rest: ShimmerProps) => { + const { uri, elements, ...mergedProps } = mergeProps(props, rest); + if (elements) { + var rows = []; + for (var i = 0; i < elements.length; i++) { + const element = elements[i]; + if (element.type == 'rect') { + rows.push(); + } else if (element.type == 'circle') { + rows.push(); + } + } + } + return ( + + + + + + + + + {uri && } + + {rows} + + + + ); + } + }, +}); \ No newline at end of file diff --git a/packages/experimental/Shimmer/src/Shimmer.types.ts b/packages/experimental/Shimmer/src/Shimmer.types.ts new file mode 100644 index 0000000000..dfd84fd019 --- /dev/null +++ b/packages/experimental/Shimmer/src/Shimmer.types.ts @@ -0,0 +1,120 @@ +import { SvgProps, ImageProps } from 'react-native-svg'; +import { ImageURISource } from 'react-native'; + +export const shimmerName = 'Shimmer'; +/** + * Specifies the possible type of the shimmer elements: Rect, Circle. + * Required when building more than one element at a time. + */ +export type ShimmerElementType = 'rect' | 'circle'; +/** + * Represents the shimmer element + */ +export interface ShimmerElement { + /** + * Type of the shimmer element + */ + type?: ShimmerElementType; + /** + * Specifies the element width, non-op for circle element + * @defaultValue '200' + */ + width?: number; + /** + * Specifies the shimmer view height. For circle element type, height is divided by 2 to get the radius for Svg + * @defaultValue '100' + */ + height?: number; + /** + * Specifies the rect shimmer border radius, non-op for circle element + * @defaultValue '0' + */ + borderRadius?: number; + /** + * x-coordinate + * @defaultValue '0' + */ + xPos?: number; + /** + * y-coordinate + * @defaultValue '0' + */ + yPos?: number; +} + +export interface ShimmerTokens { + /** + * Specifies the distance traveled from starting position. + * By default, the animation will animate from 0 to 30 over the course of 7000ms, since speed = distance / time, so + * speed ≈ 0.004 (higher the speed, faster it moves). + * @defaultValue '30' + */ + toValue?: number; + /** + * Specifies the time required to travel a given distance in milliseconds + * + * @defaultValue '7000' + */ + duration?: number; + /** + * Specifies the animation delay time in milliseconds + * @defaultValue '0' + */ + delay?: number; + /** + * Gradient tint color + * @defaultValue 'white' + */ + gradientTintColor?: string; + /** + * Shimmer element tint color, no-op for image based shimmer + * @defaultValue 'E1E1E1' for light mode, '404040' for dark mode + */ + shimmerTintColor?: string; + /** + * Width of the shimmer view + * @defaultValue '200' + */ + width?: number; + /** + * Height of the shimmer view + * @defaultValue '100' + */ + height?: number; + /** + * Specifies the gradient angle, value should be anywhere between -1 and 1 + * -1 to 1 maps to 90 degrees horizontally to ≈ 120 degrees + * @defaultValue '0' + */ + angle?: number; + /** + * Specifies the gradient opacity, value should be less than 1 + * @defaultValue '.7' + */ + gradientOpacity?: number; +} + +export interface ShimmerSlotProps extends ShimmerProps { + root: SvgProps; + image: ImageProps; +} + +export interface ShimmerProps extends ShimmerTokens { + /** + * Image to be used as a shimmer element + * @defaultValue 'null' + */ + uri?: ImageURISource; + /** + * Array of ShimmerElement in a single view + */ + elements?: Array; +} + +export interface ShimmerType { + props: ShimmerProps; + slotProps: ShimmerSlotProps + tokens: ShimmerTokens; +} + + diff --git a/packages/experimental/Shimmer/src/index.ts b/packages/experimental/Shimmer/src/index.ts new file mode 100644 index 0000000000..ff79f4663b --- /dev/null +++ b/packages/experimental/Shimmer/src/index.ts @@ -0,0 +1,2 @@ +export * from './Shimmer'; +export * from './Shimmer.types'; \ No newline at end of file diff --git a/packages/components/Shimmer/tsconfig.json b/packages/experimental/Shimmer/tsconfig.json similarity index 98% rename from packages/components/Shimmer/tsconfig.json rename to packages/experimental/Shimmer/tsconfig.json index fd8ecb574e..144387ea31 100644 --- a/packages/components/Shimmer/tsconfig.json +++ b/packages/experimental/Shimmer/tsconfig.json @@ -4,4 +4,4 @@ "outDir": "lib" }, "include": ["src"] -} +} \ No newline at end of file diff --git a/packages/libraries/core/package.json b/packages/libraries/core/package.json index ca7b816c06..3713658108 100644 --- a/packages/libraries/core/package.json +++ b/packages/libraries/core/package.json @@ -43,7 +43,6 @@ "@fluentui-react-native/pressable": ">=0.6.0 <1.0.0", "@fluentui-react-native/radio-group": ">=0.9.3 <1.0.0", "@fluentui-react-native/separator": ">=0.9.1 <1.0.0", - "@fluentui-react-native/shimmer": ">=0.6.3 <1.0.0", "@fluentui-react-native/text": ">=0.9.1 <1.0.0" }, "devDependencies": { diff --git a/packages/libraries/core/src/index.ts b/packages/libraries/core/src/index.ts index 345cd220bd..e74bb9122e 100644 --- a/packages/libraries/core/src/index.ts +++ b/packages/libraries/core/src/index.ts @@ -10,6 +10,5 @@ export * from '@fluentui-react-native/persona-coin'; export * from '@fluentui-react-native/pressable'; export * from '@fluentui-react-native/radio-group'; export * from '@fluentui-react-native/separator'; -export * from '@fluentui-react-native/shimmer'; export * from '@fluentui-react-native/text'; export * from '@fluentui-react-native/interactive-hooks'; diff --git a/yarn.lock b/yarn.lock index cb52503d16..2ebf195b81 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1137,6 +1137,15 @@ exec-sh "^0.3.2" minimist "^1.2.0" +"@fluentui-react-native/shimmer@>=0.6.3 <1.0.0": + version "0.6.3" + resolved "https://registry.yarnpkg.com/@fluentui-react-native/shimmer/-/shimmer-0.6.3.tgz#12458d360b6f8709a269fb4ea7ca5b28846e1b9b" + integrity sha512-/X3pBg6FKGEJuYpmeiCzvoXzbUEv+5UrIPazvhi5jLWfcbCpGef/Fry/RM5pSCGBOEeJb6QRSc5WChzuqyut5w== + dependencies: + "@fluentui-react-native/adapters" ">=0.6.0 <1.0.0" + "@fluentui-react-native/framework" "0.5.1" + "@fluentui-react-native/tokens" ">=0.8.0 <1.0.0" + "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" @@ -13981,14 +13990,6 @@ react-native-svg-transformer@^0.14.3: path-dirname "^1.0.2" semver "^5.6.0" -react-native-svg@^12.1.1-0: - version "12.1.1-0" - resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.1-0.tgz#e453d33d0d464d60a03cf44463557a75ce54915e" - integrity sha512-fj4R5yQWNgSLKO4umOLEeMYWE6QQ90OSzXPeh8kQIFDd2k6RDo8i9tbNNeGWMobQ83LexYgsE3j5B5cWIBx5Pg== - dependencies: - css-select "^2.1.0" - css-tree "^1.0.0-alpha.39" - react-native-svg@^12.1.1: version "12.1.1" resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.1.tgz#5f292410b8bcc07bbc52b2da7ceb22caf5bcaaee"