forked from kolplattformen/skolplattformen
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
57 changed files
with
1,088 additions
and
202 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,45 @@ | ||
| # name: Release | ||
|
|
||
| # on: | ||
| # push: | ||
| # branches: | ||
| # - main | ||
|
|
||
| # jobs: | ||
| # build: | ||
|
|
||
| # runs-on: ubuntu-latest | ||
|
|
||
| # steps: | ||
| # - name: Checkout code | ||
| # uses: actions/checkout@v2 | ||
|
|
||
| # - name: Setup Node | ||
| # uses: actions/setup-node@v1 | ||
| # with: | ||
| # node-version: '14.17.6' | ||
|
|
||
| # - name: Setup timezone | ||
| # uses: zcong1993/setup-timezone@master | ||
| # with: | ||
| # timezone: Europe/Stockholm | ||
|
|
||
| # - name: Install dependencies | ||
| # run: npx lerna bootstrap | ||
|
|
||
| # - name: Run linting and tests | ||
| # run: | | ||
| # yarn lint | ||
| # yarn test | ||
| # env: | ||
| # CI: true | ||
|
|
||
| # - name: Create release using semantic-release | ||
| # uses: cycjimmy/semantic-release-action@v2 | ||
| # with: | ||
| # semantic_version: 17.1.1 | ||
| # extra_plugins: | | ||
| # @semantic-release/changelog@5.0.1 | ||
| # @semantic-release/git@9.0 | ||
| # env: | ||
| # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | ||
| name: Release | ||
|
|
||
| on: | ||
| push: | ||
| branches: | ||
| - main | ||
|
|
||
| jobs: | ||
| build: | ||
|
|
||
| runs-on: ubuntu-latest | ||
|
|
||
| steps: | ||
| - name: Checkout code | ||
| uses: actions/checkout@v2 | ||
|
|
||
| - name: Setup Node | ||
| uses: actions/setup-node@v1 | ||
| with: | ||
| node-version: '14.17.6' | ||
|
|
||
| - name: Setup timezone | ||
| uses: zcong1993/setup-timezone@master | ||
| with: | ||
| timezone: Europe/Stockholm | ||
|
|
||
| - name: Install dependencies | ||
| run: yarn | ||
|
|
||
| - name: Run linting and tests | ||
| run: | | ||
| yarn lint | ||
| yarn test | ||
| env: | ||
| CI: true | ||
|
|
||
| - name: Create release using semantic-release | ||
| uses: cycjimmy/semantic-release-action@v2 | ||
| with: | ||
| semantic_version: 17.1.1 | ||
| extra_plugins: | | ||
| @semantic-release/changelog@5.0.1 | ||
| @semantic-release/git@9.0 | ||
| env: | ||
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 84 additions & 15 deletions
99
apps/skolplattformen-sthlm/components/image.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,108 @@ | ||
| import { useApi } from '@skolplattformen/hooks' | ||
| import React, { useEffect, useState } from 'react' | ||
| import { Image as ImageBase, ImageStyle, StyleProp } from 'react-native' | ||
| import React, { useCallback, useEffect, useState } from 'react' | ||
| import { | ||
| Image as ImageBase, | ||
| ImageResizeMode, | ||
| ImageStyle, | ||
| StyleProp, | ||
| useWindowDimensions, | ||
| View, | ||
| } from 'react-native' | ||
|
|
||
| interface ImageProps { | ||
| src: string | ||
| style: StyleProp<ImageStyle> | ||
| /** | ||
| * Width of component. Defaults to window width | ||
| * Used to automatically calculate width | ||
| */ | ||
| componentWidth?: number | ||
| accessibilityIgnoresInvertColors: boolean | ||
| resizeMode?: ImageResizeMode | ||
| width?: number | ||
| height?: number | ||
| } | ||
|
|
||
| export const Image = ({ | ||
| src, | ||
| style, | ||
| componentWidth = 0, | ||
| accessibilityIgnoresInvertColors, | ||
| resizeMode = 'contain', | ||
| }: ImageProps) => { | ||
| const { api } = useApi() | ||
| const [headers, setHeaders] = useState() | ||
| const { width: windowWidth } = useWindowDimensions() | ||
| const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) | ||
|
|
||
| const getHeaders = async (url: string) => { | ||
| const { headers: newHeaders } = await api.getSession(url) | ||
| setHeaders(newHeaders) | ||
| } | ||
| const debugImageName = getDebugImageName(src) | ||
|
|
||
| const prefetchImageInformation = useCallback( | ||
| async (url: string) => { | ||
| if (!url) return | ||
| const { headers: newHeaders } = await api.getSession(url) | ||
|
|
||
| console.log('[IMAGE] Getting image dimensions with headers', { | ||
| debugImageName, | ||
| newHeaders, | ||
| }) | ||
|
|
||
| ImageBase.getSizeWithHeaders( | ||
| url, | ||
| newHeaders, | ||
| (w, h) => { | ||
| console.log('[IMAGE] Received image dimensions', { | ||
| debugImageName, | ||
| w, | ||
| h, | ||
| }) | ||
| setDimensions({ width: w, height: h }) | ||
| setHeaders(newHeaders) | ||
| }, | ||
| (error) => { | ||
| console.error('[Image] Failed to get image dimensions', { | ||
| debugImageName, | ||
| error, | ||
| }) | ||
| } | ||
| ) | ||
| }, | ||
| [api, debugImageName] | ||
| ) | ||
|
|
||
| useEffect(() => { | ||
| getHeaders(src) | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [src]) | ||
| prefetchImageInformation(src) | ||
| }, [prefetchImageInformation, src]) | ||
|
|
||
| const compWidth = componentWidth || windowWidth | ||
|
|
||
| return headers ? ( | ||
| const scale = compWidth / dimensions.width | ||
| const scaledWidth = Math.round(dimensions.width * scale) | ||
| const scaledHeight = Math.round(dimensions.height * scale) | ||
|
|
||
| const imageSource = | ||
| resizeMode === 'cover' | ||
| ? { uri: src, headers } | ||
| : { uri: src, headers, height: scaledHeight, width: scaledWidth } | ||
|
|
||
| return headers && scaledWidth && scaledHeight ? ( | ||
| <ImageBase | ||
| accessibilityIgnoresInvertColors={accessibilityIgnoresInvertColors} | ||
| source={{ | ||
| uri: src, | ||
| headers, | ||
| }} | ||
| source={imageSource} | ||
| resizeMode={resizeMode} | ||
| style={style} | ||
| /> | ||
| ) : null | ||
| ) : ( | ||
| <View style={style} /> | ||
| ) | ||
| } | ||
|
|
||
| const getDebugImageName = (src: string) => { | ||
| try { | ||
| const split = src.split('/') | ||
| return split[split.length - 1] | ||
| } catch (e: any) { | ||
| console.log('FAILED', e.message) | ||
| return null | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.