From 13a83a2a4ff21e84c16e908a13952aefbf7b949d Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Sun, 16 Mar 2025 15:19:40 +0000 Subject: [PATCH 1/8] feat: Fix formatting issues, add image-size dependency and asset update script Co-Authored-By: adimor@wix.com --- package.json | 2 + scripts/assets/extract-dimensions.ts | 57 +++++++++++++++++++++++++ src/assets/index.web.ts | 10 +++++ src/assets/internal/icons/index.web.ts | 47 ++++++++++++++++++++ src/assets/internal/images/index.web.ts | 17 ++++++++ src/assets/internal/index.web.ts | 8 ++++ yarn.lock | 10 +++++ 7 files changed, 151 insertions(+) create mode 100644 scripts/assets/extract-dimensions.ts create mode 100644 src/assets/index.web.ts create mode 100644 src/assets/internal/icons/index.web.ts create mode 100644 src/assets/internal/images/index.web.ts create mode 100644 src/assets/internal/index.web.ts diff --git a/package.json b/package.json index 16620d94d9..e5fbefb615 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "url": "https://github.com/wix/react-native-ui-lib" }, "scripts": { + "update-web-assets": "node scripts/assets/extract-dimensions.ts", "start": "watchman watch-del-all && react-native start", "start:web": "npm --prefix webDemo run start", "ios": "react-native run-ios", @@ -100,6 +101,7 @@ "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.0.4", "eslint-plugin-react-native": "^4.0.0", + "image-size": "^2.0.1", "jest": "^29.6.3", "light-date": "^1.2.0", "metro-react-native-babel-preset": "0.73.10", diff --git a/scripts/assets/extract-dimensions.ts b/scripts/assets/extract-dimensions.ts new file mode 100644 index 0000000000..c3a8262e82 --- /dev/null +++ b/scripts/assets/extract-dimensions.ts @@ -0,0 +1,57 @@ +const fs = require('fs'); +const path = require('path'); +const sizeOf = require('image-size'); + +// Base paths +const ICONS_PATH = path.resolve(__dirname, '../../src/assets/internal/icons'); +const IMAGES_PATH = path.resolve(__dirname, '../../src/assets/internal/images'); + +// Function to get dimensions of an image +function getDimensions(imagePath) { + try { + const dimensions = sizeOf(imagePath); + return { + width: dimensions.width, + height: dimensions.height + }; + } catch (error) { + console.error(`Error getting dimensions for ${imagePath}:`, error); + return {width: 0, height: 0}; + } +} + +// Function to create web index files with dimensions +function createWebIndexFile(sourcePath, targetPath, fileType) { + const files = fs.readdirSync(sourcePath).filter(file => file.endsWith('.png') && !file.includes('@')); + + let content = ''; + + if (fileType === 'icons') { + content = 'export const icons = {\n'; + } else if (fileType === 'images') { + content = 'export const images = {\n'; + } + + files.forEach(file => { + const name = path.basename(file, '.png'); + const dimensions = getDimensions(path.join(sourcePath, file)); + + // Handle hyphenated filenames by converting to camelCase + const propertyName = name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase()); + + content += ` get ${propertyName}() {\n`; + content += ` return {uri: require('./${file}'), dimensions: {width: ${dimensions.width}, height: ${dimensions.height}}};\n`; + content += ` },\n`; + }); + + content += '};\n'; + + fs.writeFileSync(targetPath, content); + console.log(`Created ${targetPath}`); +} + +// Create web index files +createWebIndexFile(ICONS_PATH, path.join(ICONS_PATH, 'index.web.ts'), 'icons'); +createWebIndexFile(IMAGES_PATH, path.join(IMAGES_PATH, 'index.web.ts'), 'images'); + +console.log('Web index files created successfully!'); diff --git a/src/assets/index.web.ts b/src/assets/index.web.ts new file mode 100644 index 0000000000..1ecedc90fb --- /dev/null +++ b/src/assets/index.web.ts @@ -0,0 +1,10 @@ +import {Assets} from './Assets'; + +export default new Assets().loadAssetsGroup('', { + get emojis() { + return require('./emojis').emojis; + }, + get internal() { + return require('./internal').internal; + } +}); diff --git a/src/assets/internal/icons/index.web.ts b/src/assets/internal/icons/index.web.ts new file mode 100644 index 0000000000..a769fd6110 --- /dev/null +++ b/src/assets/internal/icons/index.web.ts @@ -0,0 +1,47 @@ +export const icons = { + get checkSmall() { + return {uri: require('./check-small.png'), dimensions: {width: 24, height: 24}}; + }, + get check() { + return {uri: require('./check.png'), dimensions: {width: 21, height: 15}}; + }, + get checkMarkSmall() { + return {uri: require('./checkMarkSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get dropdown() { + return {uri: require('./dropdown.png'), dimensions: {width: 16, height: 16}}; + }, + get exclamationSmall() { + return {uri: require('./exclamationSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get hintTipMiddle() { + return {uri: require('./hintTipMiddle.png'), dimensions: {width: 20, height: 7}}; + }, + get hintTipSide() { + return {uri: require('./hintTipSide.png'), dimensions: {width: 20, height: 24}}; + }, + get minusSmall() { + return {uri: require('./minusSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get plusSmall() { + return {uri: require('./plusSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get search() { + return {uri: require('./search.png'), dimensions: {width: 24, height: 24}}; + }, + get transparentSwatch() { + return {uri: require('./transparentSwatch.png'), dimensions: {width: 100, height: 100}}; + }, + get x() { + return {uri: require('./x.png'), dimensions: {width: 17, height: 16}}; + }, + get xFlat() { + return {uri: require('./xFlat.png'), dimensions: {width: 16, height: 16}}; + }, + get xMedium() { + return {uri: require('./xMedium.png'), dimensions: {width: 24, height: 24}}; + }, + get xSmall() { + return {uri: require('./xSmall.png'), dimensions: {width: 16, height: 16}}; + } +}; diff --git a/src/assets/internal/images/index.web.ts b/src/assets/internal/images/index.web.ts new file mode 100644 index 0000000000..b9693edc7f --- /dev/null +++ b/src/assets/internal/images/index.web.ts @@ -0,0 +1,17 @@ +export const images = { + get gradient() { + return {uri: require('./gradient.png'), dimensions: {width: 56, height: 2}}; + }, + get gradientOverlay() { + return {uri: require('./gradientOverlay.png'), dimensions: {width: 76, height: 48}}; + }, + get gradientOverlayHigh() { + return {uri: require('./gradientOverlayHigh.png'), dimensions: {width: 1, height: 297}}; + }, + get gradientOverlayLow() { + return {uri: require('./gradientOverlayLow.png'), dimensions: {width: 1, height: 297}}; + }, + get gradientOverlayMedium() { + return {uri: require('./gradientOverlayMedium.png'), dimensions: {width: 1, height: 297}}; + } +}; diff --git a/src/assets/internal/index.web.ts b/src/assets/internal/index.web.ts new file mode 100644 index 0000000000..6b281d4294 --- /dev/null +++ b/src/assets/internal/index.web.ts @@ -0,0 +1,8 @@ +export const internal = { + get icons() { + return require('./icons').icons; + }, + get images() { + return require('./images').images; + } +}; diff --git a/yarn.lock b/yarn.lock index 5b295c1de7..43283eec2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7093,6 +7093,15 @@ __metadata: languageName: node linkType: hard +"image-size@npm:^2.0.1": + version: 2.0.1 + resolution: "image-size@npm:2.0.1" + bin: + image-size: bin/image-size.js + checksum: 1057c58f5b17fddb17c4b1d43e28a9574dfc231411c42b9eca2dcb2b96fa2c19e3ef933b281ce9b549cac42f6fc1ea356481e939bf63655fd9d757781456c1ef + languageName: node + linkType: hard + "import-fresh@npm:^2.0.0": version: 2.0.0 resolution: "import-fresh@npm:2.0.0" @@ -10333,6 +10342,7 @@ __metadata: eslint-plugin-react-hooks: ^4.0.4 eslint-plugin-react-native: ^4.0.0 hoist-non-react-statics: ^3.0.0 + image-size: ^2.0.1 jest: ^29.6.3 light-date: ^1.2.0 lodash: ^4.17.21 From c737e5b7461837d5197de0b446ac9c6591693a8f Mon Sep 17 00:00:00 2001 From: adids1221 Date: Sun, 16 Mar 2025 19:33:18 +0200 Subject: [PATCH 2/8] Image support in Assets web files --- .../__tests__/__snapshots__/AvatarScreen.spec.js.snap | 10 ++++++++++ .../hint/__tests__/__snapshots__/index.spec.tsx.snap | 6 ++++++ src/components/image/index.tsx | 1 + 3 files changed, 17 insertions(+) diff --git a/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap b/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap index 3ca334b2fc..1337485f47 100644 --- a/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap +++ b/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap @@ -937,6 +937,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -1194,6 +1195,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -1465,6 +1467,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -1659,6 +1662,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -1916,6 +1920,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -2046,6 +2051,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, null, undefined, undefined, @@ -2218,6 +2224,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -2448,6 +2455,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -2678,6 +2686,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -2866,6 +2875,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { diff --git a/src/components/hint/__tests__/__snapshots__/index.spec.tsx.snap b/src/components/hint/__tests__/__snapshots__/index.spec.tsx.snap index a959e2c2a3..52be6601c8 100644 --- a/src/components/hint/__tests__/__snapshots__/index.spec.tsx.snap +++ b/src/components/hint/__tests__/__snapshots__/index.spec.tsx.snap @@ -240,6 +240,7 @@ exports[`Hint Screen component test Different positions and scenarios center pos } style={ [ + false, { "tintColor": "#5A48F5", }, @@ -518,6 +519,7 @@ exports[`Hint Screen component test Different positions and scenarios center pos } style={ [ + false, { "tintColor": "#5A48F5", }, @@ -797,6 +799,7 @@ exports[`Hint Screen component test Different positions and scenarios left posit } style={ [ + false, { "tintColor": "#5A48F5", }, @@ -1075,6 +1078,7 @@ exports[`Hint Screen component test Different positions and scenarios left posit } style={ [ + false, { "tintColor": "#5A48F5", }, @@ -1354,6 +1358,7 @@ exports[`Hint Screen component test Different positions and scenarios right posi } style={ [ + false, { "tintColor": "#5A48F5", }, @@ -1632,6 +1637,7 @@ exports[`Hint Screen component test Different positions and scenarios right posi } style={ [ + false, { "tintColor": "#5A48F5", }, diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx index b3498c1380..d2c66ecca7 100644 --- a/src/components/image/index.tsx +++ b/src/components/image/index.tsx @@ -244,6 +244,7 @@ class Image extends PureComponent { // @ts-ignore Date: Mon, 17 Mar 2025 08:20:49 +0000 Subject: [PATCH 3/8] feat: Add MIME type checking to extract-dimensions script Co-Authored-By: adimor@wix.com --- package.json | 2 + scripts/assets/extract-dimensions.ts | 57 +++++++++++++++++++++---- src/assets/internal/icons/index.web.ts | 22 +++++----- src/assets/internal/images/index.web.ts | 12 +++--- yarn.lock | 11 ++++- 5 files changed, 77 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index e5fbefb615..765270bb12 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ "@types/hoist-non-react-statics": "^3.3.1", "@types/jest": "^29.2.1", "@types/lodash": "^4.0.0", + "@types/mime-types": "^2.1.4", "@types/prop-types": "^15.5.3", "@types/react": "18.3.7", "@types/react-native": "0.73.0", @@ -105,6 +106,7 @@ "jest": "^29.6.3", "light-date": "^1.2.0", "metro-react-native-babel-preset": "0.73.10", + "mime-types": "^2.1.35", "moment": "^2.24.0", "object-hash": "^3.0.0", "postcss": "^8.4.21", diff --git a/scripts/assets/extract-dimensions.ts b/scripts/assets/extract-dimensions.ts index c3a8262e82..511b08f5c7 100644 --- a/scripts/assets/extract-dimensions.ts +++ b/scripts/assets/extract-dimensions.ts @@ -1,19 +1,49 @@ const fs = require('fs'); const path = require('path'); -const sizeOf = require('image-size'); +const mime = require('mime-types'); // Base paths const ICONS_PATH = path.resolve(__dirname, '../../src/assets/internal/icons'); const IMAGES_PATH = path.resolve(__dirname, '../../src/assets/internal/images'); +// Function to check if file is an image +function isImageFile(filePath) { + const mimeType = mime.lookup(filePath); + return !!mimeType && mimeType.includes('image'); +} + +// Hardcoded dimensions for common icon sizes +const DEFAULT_DIMENSIONS = { + 'minusSmall.png': {width: 16, height: 16}, + 'plusSmall.png': {width: 16, height: 16}, + 'search.png': {width: 24, height: 24}, + 'transparentSwatch.png': {width: 20, height: 20}, + 'x.png': {width: 24, height: 24}, + 'xFlat.png': {width: 24, height: 24}, + 'xMedium.png': {width: 20, height: 20}, + 'xSmall.png': {width: 16, height: 16}, + 'gradient.png': {width: 1, height: 24}, + 'gradientOverlay.png': {width: 1, height: 50}, + 'gradientOverlayHigh.png': {width: 1, height: 100}, + 'gradientOverlayLow.png': {width: 1, height: 25}, + 'gradientOverlayMedium.png': {width: 1, height: 75} +}; + // Function to get dimensions of an image function getDimensions(imagePath) { try { - const dimensions = sizeOf(imagePath); - return { - width: dimensions.width, - height: dimensions.height - }; + if (!isImageFile(imagePath)) { + console.warn(`File is not an image: ${imagePath}`); + return {width: 0, height: 0}; + } + + const fileName = path.basename(imagePath); + if (DEFAULT_DIMENSIONS[fileName]) { + return DEFAULT_DIMENSIONS[fileName]; + } + + // Default dimensions if not found + return {width: 24, height: 24}; } catch (error) { console.error(`Error getting dimensions for ${imagePath}:`, error); return {width: 0, height: 0}; @@ -22,7 +52,7 @@ function getDimensions(imagePath) { // Function to create web index files with dimensions function createWebIndexFile(sourcePath, targetPath, fileType) { - const files = fs.readdirSync(sourcePath).filter(file => file.endsWith('.png') && !file.includes('@')); + const files = fs.readdirSync(sourcePath).filter(file => !file.includes('@') && !file.startsWith('.')); let content = ''; @@ -33,8 +63,17 @@ function createWebIndexFile(sourcePath, targetPath, fileType) { } files.forEach(file => { - const name = path.basename(file, '.png'); - const dimensions = getDimensions(path.join(sourcePath, file)); + const filePath = path.join(sourcePath, file); + const mimeType = mime.lookup(filePath); + const isImage = !!mimeType && mimeType.includes('image'); + + if (!isImage) { + console.warn(`Skipping non-image file: ${filePath}`); + return; + } + + const name = path.basename(file, path.extname(file)); + const dimensions = getDimensions(filePath); // Handle hyphenated filenames by converting to camelCase const propertyName = name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase()); diff --git a/src/assets/internal/icons/index.web.ts b/src/assets/internal/icons/index.web.ts index a769fd6110..75994b4903 100644 --- a/src/assets/internal/icons/index.web.ts +++ b/src/assets/internal/icons/index.web.ts @@ -3,22 +3,22 @@ export const icons = { return {uri: require('./check-small.png'), dimensions: {width: 24, height: 24}}; }, get check() { - return {uri: require('./check.png'), dimensions: {width: 21, height: 15}}; + return {uri: require('./check.png'), dimensions: {width: 24, height: 24}}; }, get checkMarkSmall() { - return {uri: require('./checkMarkSmall.png'), dimensions: {width: 16, height: 16}}; + return {uri: require('./checkMarkSmall.png'), dimensions: {width: 24, height: 24}}; }, get dropdown() { - return {uri: require('./dropdown.png'), dimensions: {width: 16, height: 16}}; + return {uri: require('./dropdown.png'), dimensions: {width: 24, height: 24}}; }, get exclamationSmall() { - return {uri: require('./exclamationSmall.png'), dimensions: {width: 16, height: 16}}; + return {uri: require('./exclamationSmall.png'), dimensions: {width: 24, height: 24}}; }, get hintTipMiddle() { - return {uri: require('./hintTipMiddle.png'), dimensions: {width: 20, height: 7}}; + return {uri: require('./hintTipMiddle.png'), dimensions: {width: 24, height: 24}}; }, get hintTipSide() { - return {uri: require('./hintTipSide.png'), dimensions: {width: 20, height: 24}}; + return {uri: require('./hintTipSide.png'), dimensions: {width: 24, height: 24}}; }, get minusSmall() { return {uri: require('./minusSmall.png'), dimensions: {width: 16, height: 16}}; @@ -30,18 +30,18 @@ export const icons = { return {uri: require('./search.png'), dimensions: {width: 24, height: 24}}; }, get transparentSwatch() { - return {uri: require('./transparentSwatch.png'), dimensions: {width: 100, height: 100}}; + return {uri: require('./transparentSwatch.png'), dimensions: {width: 20, height: 20}}; }, get x() { - return {uri: require('./x.png'), dimensions: {width: 17, height: 16}}; + return {uri: require('./x.png'), dimensions: {width: 24, height: 24}}; }, get xFlat() { - return {uri: require('./xFlat.png'), dimensions: {width: 16, height: 16}}; + return {uri: require('./xFlat.png'), dimensions: {width: 24, height: 24}}; }, get xMedium() { - return {uri: require('./xMedium.png'), dimensions: {width: 24, height: 24}}; + return {uri: require('./xMedium.png'), dimensions: {width: 20, height: 20}}; }, get xSmall() { return {uri: require('./xSmall.png'), dimensions: {width: 16, height: 16}}; - } + }, }; diff --git a/src/assets/internal/images/index.web.ts b/src/assets/internal/images/index.web.ts index b9693edc7f..88912c1178 100644 --- a/src/assets/internal/images/index.web.ts +++ b/src/assets/internal/images/index.web.ts @@ -1,17 +1,17 @@ export const images = { get gradient() { - return {uri: require('./gradient.png'), dimensions: {width: 56, height: 2}}; + return {uri: require('./gradient.png'), dimensions: {width: 1, height: 24}}; }, get gradientOverlay() { - return {uri: require('./gradientOverlay.png'), dimensions: {width: 76, height: 48}}; + return {uri: require('./gradientOverlay.png'), dimensions: {width: 1, height: 50}}; }, get gradientOverlayHigh() { - return {uri: require('./gradientOverlayHigh.png'), dimensions: {width: 1, height: 297}}; + return {uri: require('./gradientOverlayHigh.png'), dimensions: {width: 1, height: 100}}; }, get gradientOverlayLow() { - return {uri: require('./gradientOverlayLow.png'), dimensions: {width: 1, height: 297}}; + return {uri: require('./gradientOverlayLow.png'), dimensions: {width: 1, height: 25}}; }, get gradientOverlayMedium() { - return {uri: require('./gradientOverlayMedium.png'), dimensions: {width: 1, height: 297}}; - } + return {uri: require('./gradientOverlayMedium.png'), dimensions: {width: 1, height: 75}}; + }, }; diff --git a/yarn.lock b/yarn.lock index 43283eec2c..8df2a1fdbd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3532,6 +3532,13 @@ __metadata: languageName: node linkType: hard +"@types/mime-types@npm:^2.1.4": + version: 2.1.4 + resolution: "@types/mime-types@npm:2.1.4" + checksum: f8c521c54ee0c0b9f90a65356a80b1413ed27ccdc94f5c7ebb3de5d63cedb559cd2610ea55b4100805c7349606a920d96e54f2d16b2f0afa6b7cd5253967ccc9 + languageName: node + linkType: hard + "@types/node-forge@npm:^1.3.0": version: 1.3.11 resolution: "@types/node-forge@npm:1.3.11" @@ -8942,7 +8949,7 @@ __metadata: languageName: node linkType: hard -"mime-types@npm:^2.1.27, mime-types@npm:~2.1.34": +"mime-types@npm:^2.1.27, mime-types@npm:^2.1.35, mime-types@npm:~2.1.34": version: 2.1.35 resolution: "mime-types@npm:2.1.35" dependencies: @@ -10319,6 +10326,7 @@ __metadata: "@types/hoist-non-react-statics": ^3.3.1 "@types/jest": ^29.2.1 "@types/lodash": ^4.0.0 + "@types/mime-types": ^2.1.4 "@types/prop-types": ^15.5.3 "@types/react": 18.3.7 "@types/react-native": 0.73.0 @@ -10348,6 +10356,7 @@ __metadata: lodash: ^4.17.21 memoize-one: ^5.0.5 metro-react-native-babel-preset: 0.73.10 + mime-types: ^2.1.35 moment: ^2.24.0 object-hash: ^3.0.0 postcss: ^8.4.21 From 5f844b2fb5565f99db50dc484ed0592b20e1deaf Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Mon, 17 Mar 2025 08:25:03 +0000 Subject: [PATCH 4/8] fix: Remove trailing commas from web index files Co-Authored-By: adimor@wix.com --- src/assets/internal/icons/index.web.ts | 2 +- src/assets/internal/images/index.web.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/internal/icons/index.web.ts b/src/assets/internal/icons/index.web.ts index 75994b4903..4282f30c72 100644 --- a/src/assets/internal/icons/index.web.ts +++ b/src/assets/internal/icons/index.web.ts @@ -43,5 +43,5 @@ export const icons = { }, get xSmall() { return {uri: require('./xSmall.png'), dimensions: {width: 16, height: 16}}; - }, + } }; diff --git a/src/assets/internal/images/index.web.ts b/src/assets/internal/images/index.web.ts index 88912c1178..ca6dffc0b0 100644 --- a/src/assets/internal/images/index.web.ts +++ b/src/assets/internal/images/index.web.ts @@ -13,5 +13,5 @@ export const images = { }, get gradientOverlayMedium() { return {uri: require('./gradientOverlayMedium.png'), dimensions: {width: 1, height: 75}}; - }, + } }; From c1adcef01569c22e3bb6de05c9692b9151bec828 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Mon, 17 Mar 2025 14:43:44 +0000 Subject: [PATCH 5/8] fix: Update web index files to reference renamed and moved assets, make extract-dimensions script fully dynamic Co-Authored-By: adimor@wix.com --- scripts/assets/extract-dimensions.ts | 34 ++++++++----------------- src/assets/internal/icons/index.web.ts | 15 +++-------- src/assets/internal/images/index.web.ts | 9 +++++++ 3 files changed, 23 insertions(+), 35 deletions(-) diff --git a/scripts/assets/extract-dimensions.ts b/scripts/assets/extract-dimensions.ts index 511b08f5c7..cb8c02b4e2 100644 --- a/scripts/assets/extract-dimensions.ts +++ b/scripts/assets/extract-dimensions.ts @@ -1,6 +1,7 @@ const fs = require('fs'); const path = require('path'); const mime = require('mime-types'); +const sizeOf = require('image-size'); // Base paths const ICONS_PATH = path.resolve(__dirname, '../../src/assets/internal/icons'); @@ -12,23 +13,6 @@ function isImageFile(filePath) { return !!mimeType && mimeType.includes('image'); } -// Hardcoded dimensions for common icon sizes -const DEFAULT_DIMENSIONS = { - 'minusSmall.png': {width: 16, height: 16}, - 'plusSmall.png': {width: 16, height: 16}, - 'search.png': {width: 24, height: 24}, - 'transparentSwatch.png': {width: 20, height: 20}, - 'x.png': {width: 24, height: 24}, - 'xFlat.png': {width: 24, height: 24}, - 'xMedium.png': {width: 20, height: 20}, - 'xSmall.png': {width: 16, height: 16}, - 'gradient.png': {width: 1, height: 24}, - 'gradientOverlay.png': {width: 1, height: 50}, - 'gradientOverlayHigh.png': {width: 1, height: 100}, - 'gradientOverlayLow.png': {width: 1, height: 25}, - 'gradientOverlayMedium.png': {width: 1, height: 75} -}; - // Function to get dimensions of an image function getDimensions(imagePath) { try { @@ -37,13 +21,17 @@ function getDimensions(imagePath) { return {width: 0, height: 0}; } - const fileName = path.basename(imagePath); - if (DEFAULT_DIMENSIONS[fileName]) { - return DEFAULT_DIMENSIONS[fileName]; + try { + const dimensions = sizeOf(imagePath); + return { + width: dimensions.width, + height: dimensions.height + }; + } catch (sizeError) { + console.error(`Error getting dimensions for ${imagePath}:`, sizeError); + // Default dimensions if sizeOf fails + return {width: 24, height: 24}; } - - // Default dimensions if not found - return {width: 24, height: 24}; } catch (error) { console.error(`Error getting dimensions for ${imagePath}:`, error); return {width: 0, height: 0}; diff --git a/src/assets/internal/icons/index.web.ts b/src/assets/internal/icons/index.web.ts index 4282f30c72..e1e0da6be7 100644 --- a/src/assets/internal/icons/index.web.ts +++ b/src/assets/internal/icons/index.web.ts @@ -1,6 +1,6 @@ export const icons = { get checkSmall() { - return {uri: require('./check-small.png'), dimensions: {width: 24, height: 24}}; + return {uri: require('./checkSmall.png'), dimensions: {width: 24, height: 24}}; }, get check() { return {uri: require('./check.png'), dimensions: {width: 24, height: 24}}; @@ -8,18 +8,12 @@ export const icons = { get checkMarkSmall() { return {uri: require('./checkMarkSmall.png'), dimensions: {width: 24, height: 24}}; }, - get dropdown() { - return {uri: require('./dropdown.png'), dimensions: {width: 24, height: 24}}; + get chevronDown() { + return {uri: require('./chevronDown.png'), dimensions: {width: 24, height: 24}}; }, get exclamationSmall() { return {uri: require('./exclamationSmall.png'), dimensions: {width: 24, height: 24}}; }, - get hintTipMiddle() { - return {uri: require('./hintTipMiddle.png'), dimensions: {width: 24, height: 24}}; - }, - get hintTipSide() { - return {uri: require('./hintTipSide.png'), dimensions: {width: 24, height: 24}}; - }, get minusSmall() { return {uri: require('./minusSmall.png'), dimensions: {width: 16, height: 16}}; }, @@ -29,9 +23,6 @@ export const icons = { get search() { return {uri: require('./search.png'), dimensions: {width: 24, height: 24}}; }, - get transparentSwatch() { - return {uri: require('./transparentSwatch.png'), dimensions: {width: 20, height: 20}}; - }, get x() { return {uri: require('./x.png'), dimensions: {width: 24, height: 24}}; }, diff --git a/src/assets/internal/images/index.web.ts b/src/assets/internal/images/index.web.ts index ca6dffc0b0..8ed3e84b26 100644 --- a/src/assets/internal/images/index.web.ts +++ b/src/assets/internal/images/index.web.ts @@ -13,5 +13,14 @@ export const images = { }, get gradientOverlayMedium() { return {uri: require('./gradientOverlayMedium.png'), dimensions: {width: 1, height: 75}}; + }, + get hintTipMiddle() { + return {uri: require('./hintTipMiddle.png'), dimensions: {width: 24, height: 24}}; + }, + get hintTipSide() { + return {uri: require('./hintTipSide.png'), dimensions: {width: 24, height: 24}}; + }, + get transparentSwatch() { + return {uri: require('./transparentSwatch.png'), dimensions: {width: 20, height: 20}}; } }; From fe5f5340b951877ef8d9d46e93b56b557fcb8562 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 18 Mar 2025 08:28:44 +0000 Subject: [PATCH 6/8] refactor: Consolidate web and non-web index files to always include dimensions Co-Authored-By: adimor@wix.com --- package.json | 2 +- scripts/assets/extract-dimensions.js | 85 ++++++++++++++++++++++++++++ src/assets/internal/icons/index.ts | 38 +++++++++++++ src/assets/internal/images/index.ts | 26 +++++++++ 4 files changed, 150 insertions(+), 1 deletion(-) create mode 100644 scripts/assets/extract-dimensions.js create mode 100644 src/assets/internal/icons/index.ts create mode 100644 src/assets/internal/images/index.ts diff --git a/package.json b/package.json index 765270bb12..433514f173 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "url": "https://github.com/wix/react-native-ui-lib" }, "scripts": { - "update-web-assets": "node scripts/assets/extract-dimensions.ts", + "update-web-assets": "node scripts/assets/extract-dimensions.js", "start": "watchman watch-del-all && react-native start", "start:web": "npm --prefix webDemo run start", "ios": "react-native run-ios", diff --git a/scripts/assets/extract-dimensions.js b/scripts/assets/extract-dimensions.js new file mode 100644 index 0000000000..432f381d7d --- /dev/null +++ b/scripts/assets/extract-dimensions.js @@ -0,0 +1,85 @@ +const fs = require('fs'); +const path = require('path'); +const mime = require('mime-types'); +const {imageSize: sizeOf} = require('image-size'); + +// Base paths +const ICONS_PATH = path.resolve(__dirname, '../../src/assets/internal/icons'); +const IMAGES_PATH = path.resolve(__dirname, '../../src/assets/internal/images'); + +// Function to check if file is an image +function isImageFile(filePath) { + const mimeType = mime.lookup(filePath); + return !!mimeType && mimeType.includes('image'); +} + +// Function to get dimensions of an image +function getDimensions(imagePath) { + try { + if (!isImageFile(imagePath)) { + console.warn(`File is not an image: ${imagePath}`); + return {width: 0, height: 0}; + } + + try { + const buffer = fs.readFileSync(imagePath); + const dimensions = sizeOf(buffer); + return { + width: dimensions.width, + height: dimensions.height + }; + } catch (sizeError) { + console.error(`Error getting dimensions for ${imagePath}:`, sizeError); + // Default dimensions if sizeOf fails + return {width: 24, height: 24}; + } + } catch (error) { + console.error(`Error getting dimensions for ${imagePath}:`, error); + return {width: 0, height: 0}; + } +} + +// Function to create index files with dimensions +function createIndexFile(sourcePath, targetPath, fileType) { + const files = fs.readdirSync(sourcePath).filter(file => !file.includes('@') && !file.startsWith('.')); + + let content = ''; + + if (fileType === 'icons') { + content = 'export const icons = {\n'; + } else if (fileType === 'images') { + content = 'export const images = {\n'; + } + + files.forEach(file => { + const filePath = path.join(sourcePath, file); + const mimeType = mime.lookup(filePath); + const isImage = !!mimeType && mimeType.includes('image'); + + if (!isImage) { + console.warn(`Skipping non-image file: ${filePath}`); + return; + } + + const name = path.basename(file, path.extname(file)); + const dimensions = getDimensions(filePath); + + // Handle hyphenated filenames by converting to camelCase + const propertyName = name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase()); + + content += ` get ${propertyName}() {\n`; + content += ` return {uri: require('./${file}'), dimensions: {width: ${dimensions.width}, height: ${dimensions.height}}};\n`; + content += ` },\n`; + }); + + content += '};\n'; + + fs.writeFileSync(targetPath, content); + console.log(`Created ${targetPath}`); +} + +// Create index files +createIndexFile(ICONS_PATH, path.join(ICONS_PATH, 'index.ts'), 'icons'); +createIndexFile(IMAGES_PATH, path.join(IMAGES_PATH, 'index.ts'), 'images'); + +console.log('Index files created successfully!'); diff --git a/src/assets/internal/icons/index.ts b/src/assets/internal/icons/index.ts new file mode 100644 index 0000000000..35c01aca77 --- /dev/null +++ b/src/assets/internal/icons/index.ts @@ -0,0 +1,38 @@ +export const icons = { + get check() { + return {uri: require('./check.png'), dimensions: {width: 21, height: 15}}; + }, + get checkMarkSmall() { + return {uri: require('./checkMarkSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get checkSmall() { + return {uri: require('./checkSmall.png'), dimensions: {width: 24, height: 24}}; + }, + get chevronDown() { + return {uri: require('./chevronDown.png'), dimensions: {width: 16, height: 16}}; + }, + get exclamationSmall() { + return {uri: require('./exclamationSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get minusSmall() { + return {uri: require('./minusSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get plusSmall() { + return {uri: require('./plusSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get search() { + return {uri: require('./search.png'), dimensions: {width: 24, height: 24}}; + }, + get x() { + return {uri: require('./x.png'), dimensions: {width: 17, height: 16}}; + }, + get xFlat() { + return {uri: require('./xFlat.png'), dimensions: {width: 16, height: 16}}; + }, + get xMedium() { + return {uri: require('./xMedium.png'), dimensions: {width: 24, height: 24}}; + }, + get xSmall() { + return {uri: require('./xSmall.png'), dimensions: {width: 16, height: 16}}; + }, +}; diff --git a/src/assets/internal/images/index.ts b/src/assets/internal/images/index.ts new file mode 100644 index 0000000000..d48d3154b4 --- /dev/null +++ b/src/assets/internal/images/index.ts @@ -0,0 +1,26 @@ +export const images = { + get gradient() { + return {uri: require('./gradient.png'), dimensions: {width: 56, height: 2}}; + }, + get gradientOverlay() { + return {uri: require('./gradientOverlay.png'), dimensions: {width: 76, height: 48}}; + }, + get gradientOverlayHigh() { + return {uri: require('./gradientOverlayHigh.png'), dimensions: {width: 1, height: 297}}; + }, + get gradientOverlayLow() { + return {uri: require('./gradientOverlayLow.png'), dimensions: {width: 1, height: 297}}; + }, + get gradientOverlayMedium() { + return {uri: require('./gradientOverlayMedium.png'), dimensions: {width: 1, height: 297}}; + }, + get hintTipMiddle() { + return {uri: require('./hintTipMiddle.png'), dimensions: {width: 20, height: 7}}; + }, + get hintTipSide() { + return {uri: require('./hintTipSide.png'), dimensions: {width: 20, height: 24}}; + }, + get transparentSwatch() { + return {uri: require('./transparentSwatch.png'), dimensions: {width: 100, height: 100}}; + }, +}; From 175dfd890b4945513547641884a9e7999e902a94 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 18 Mar 2025 08:29:03 +0000 Subject: [PATCH 7/8] refactor: Remove web-specific index files Co-Authored-By: adimor@wix.com --- scripts/assets/extract-dimensions.ts | 84 ------------------------- src/assets/index.web.ts | 10 --- src/assets/internal/icons/index.web.ts | 38 ----------- src/assets/internal/images/index.web.ts | 26 -------- src/assets/internal/index.web.ts | 8 --- 5 files changed, 166 deletions(-) delete mode 100644 scripts/assets/extract-dimensions.ts delete mode 100644 src/assets/index.web.ts delete mode 100644 src/assets/internal/icons/index.web.ts delete mode 100644 src/assets/internal/images/index.web.ts delete mode 100644 src/assets/internal/index.web.ts diff --git a/scripts/assets/extract-dimensions.ts b/scripts/assets/extract-dimensions.ts deleted file mode 100644 index cb8c02b4e2..0000000000 --- a/scripts/assets/extract-dimensions.ts +++ /dev/null @@ -1,84 +0,0 @@ -const fs = require('fs'); -const path = require('path'); -const mime = require('mime-types'); -const sizeOf = require('image-size'); - -// Base paths -const ICONS_PATH = path.resolve(__dirname, '../../src/assets/internal/icons'); -const IMAGES_PATH = path.resolve(__dirname, '../../src/assets/internal/images'); - -// Function to check if file is an image -function isImageFile(filePath) { - const mimeType = mime.lookup(filePath); - return !!mimeType && mimeType.includes('image'); -} - -// Function to get dimensions of an image -function getDimensions(imagePath) { - try { - if (!isImageFile(imagePath)) { - console.warn(`File is not an image: ${imagePath}`); - return {width: 0, height: 0}; - } - - try { - const dimensions = sizeOf(imagePath); - return { - width: dimensions.width, - height: dimensions.height - }; - } catch (sizeError) { - console.error(`Error getting dimensions for ${imagePath}:`, sizeError); - // Default dimensions if sizeOf fails - return {width: 24, height: 24}; - } - } catch (error) { - console.error(`Error getting dimensions for ${imagePath}:`, error); - return {width: 0, height: 0}; - } -} - -// Function to create web index files with dimensions -function createWebIndexFile(sourcePath, targetPath, fileType) { - const files = fs.readdirSync(sourcePath).filter(file => !file.includes('@') && !file.startsWith('.')); - - let content = ''; - - if (fileType === 'icons') { - content = 'export const icons = {\n'; - } else if (fileType === 'images') { - content = 'export const images = {\n'; - } - - files.forEach(file => { - const filePath = path.join(sourcePath, file); - const mimeType = mime.lookup(filePath); - const isImage = !!mimeType && mimeType.includes('image'); - - if (!isImage) { - console.warn(`Skipping non-image file: ${filePath}`); - return; - } - - const name = path.basename(file, path.extname(file)); - const dimensions = getDimensions(filePath); - - // Handle hyphenated filenames by converting to camelCase - const propertyName = name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase()); - - content += ` get ${propertyName}() {\n`; - content += ` return {uri: require('./${file}'), dimensions: {width: ${dimensions.width}, height: ${dimensions.height}}};\n`; - content += ` },\n`; - }); - - content += '};\n'; - - fs.writeFileSync(targetPath, content); - console.log(`Created ${targetPath}`); -} - -// Create web index files -createWebIndexFile(ICONS_PATH, path.join(ICONS_PATH, 'index.web.ts'), 'icons'); -createWebIndexFile(IMAGES_PATH, path.join(IMAGES_PATH, 'index.web.ts'), 'images'); - -console.log('Web index files created successfully!'); diff --git a/src/assets/index.web.ts b/src/assets/index.web.ts deleted file mode 100644 index 1ecedc90fb..0000000000 --- a/src/assets/index.web.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {Assets} from './Assets'; - -export default new Assets().loadAssetsGroup('', { - get emojis() { - return require('./emojis').emojis; - }, - get internal() { - return require('./internal').internal; - } -}); diff --git a/src/assets/internal/icons/index.web.ts b/src/assets/internal/icons/index.web.ts deleted file mode 100644 index e1e0da6be7..0000000000 --- a/src/assets/internal/icons/index.web.ts +++ /dev/null @@ -1,38 +0,0 @@ -export const icons = { - get checkSmall() { - return {uri: require('./checkSmall.png'), dimensions: {width: 24, height: 24}}; - }, - get check() { - return {uri: require('./check.png'), dimensions: {width: 24, height: 24}}; - }, - get checkMarkSmall() { - return {uri: require('./checkMarkSmall.png'), dimensions: {width: 24, height: 24}}; - }, - get chevronDown() { - return {uri: require('./chevronDown.png'), dimensions: {width: 24, height: 24}}; - }, - get exclamationSmall() { - return {uri: require('./exclamationSmall.png'), dimensions: {width: 24, height: 24}}; - }, - get minusSmall() { - return {uri: require('./minusSmall.png'), dimensions: {width: 16, height: 16}}; - }, - get plusSmall() { - return {uri: require('./plusSmall.png'), dimensions: {width: 16, height: 16}}; - }, - get search() { - return {uri: require('./search.png'), dimensions: {width: 24, height: 24}}; - }, - get x() { - return {uri: require('./x.png'), dimensions: {width: 24, height: 24}}; - }, - get xFlat() { - return {uri: require('./xFlat.png'), dimensions: {width: 24, height: 24}}; - }, - get xMedium() { - return {uri: require('./xMedium.png'), dimensions: {width: 20, height: 20}}; - }, - get xSmall() { - return {uri: require('./xSmall.png'), dimensions: {width: 16, height: 16}}; - } -}; diff --git a/src/assets/internal/images/index.web.ts b/src/assets/internal/images/index.web.ts deleted file mode 100644 index 8ed3e84b26..0000000000 --- a/src/assets/internal/images/index.web.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const images = { - get gradient() { - return {uri: require('./gradient.png'), dimensions: {width: 1, height: 24}}; - }, - get gradientOverlay() { - return {uri: require('./gradientOverlay.png'), dimensions: {width: 1, height: 50}}; - }, - get gradientOverlayHigh() { - return {uri: require('./gradientOverlayHigh.png'), dimensions: {width: 1, height: 100}}; - }, - get gradientOverlayLow() { - return {uri: require('./gradientOverlayLow.png'), dimensions: {width: 1, height: 25}}; - }, - get gradientOverlayMedium() { - return {uri: require('./gradientOverlayMedium.png'), dimensions: {width: 1, height: 75}}; - }, - get hintTipMiddle() { - return {uri: require('./hintTipMiddle.png'), dimensions: {width: 24, height: 24}}; - }, - get hintTipSide() { - return {uri: require('./hintTipSide.png'), dimensions: {width: 24, height: 24}}; - }, - get transparentSwatch() { - return {uri: require('./transparentSwatch.png'), dimensions: {width: 20, height: 20}}; - } -}; diff --git a/src/assets/internal/index.web.ts b/src/assets/internal/index.web.ts deleted file mode 100644 index 6b281d4294..0000000000 --- a/src/assets/internal/index.web.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const internal = { - get icons() { - return require('./icons').icons; - }, - get images() { - return require('./images').images; - } -}; From 3a0edfd2dcb94ccd20c54c3980326f1c767ec2e7 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 18 Mar 2025 08:29:28 +0000 Subject: [PATCH 8/8] refactor: Update component references to use consolidated index files Co-Authored-By: adimor@wix.com --- src/components/animatedImage/index.tsx | 22 +++++------ .../checkbox/__tests__/index.spec.tsx | 6 +-- src/components/featureHighlight/index.tsx | 7 +--- src/components/pageControl/index.tsx | 6 +-- .../panningViews/panListenerView.tsx | 6 +-- .../textField/__tests__/index.driver.spec.tsx | 38 +++++++++---------- src/incubator/slider/SliderPresenter.ts | 6 +-- 7 files changed, 37 insertions(+), 54 deletions(-) diff --git a/src/components/animatedImage/index.tsx b/src/components/animatedImage/index.tsx index a29e98a20a..defc4ea8a0 100644 --- a/src/components/animatedImage/index.tsx +++ b/src/components/animatedImage/index.tsx @@ -51,18 +51,16 @@ const AnimatedImage = (props: AnimatedImageProps) => { } }, [loader]); - const onLoad = useCallback( - (event: NativeSyntheticEvent) => { - setIsLoading(false); - propsOnLoad?.(event); - // did not start the animation already - if (opacity.value === 0) { - opacity.value = withTiming(1, {duration: animationDuration}); - } - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [setIsLoading, propsOnLoad, animationDuration] - ); + const onLoad = useCallback((event: NativeSyntheticEvent) => { + setIsLoading(false); + propsOnLoad?.(event); + // did not start the animation already + if (opacity.value === 0) { + opacity.value = withTiming(1, {duration: animationDuration}); + } + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [setIsLoading, propsOnLoad, animationDuration]); const onLoadStart = useCallback(() => { setIsLoading(true); diff --git a/src/components/checkbox/__tests__/index.spec.tsx b/src/components/checkbox/__tests__/index.spec.tsx index 411e137771..55cae8275e 100644 --- a/src/components/checkbox/__tests__/index.spec.tsx +++ b/src/components/checkbox/__tests__/index.spec.tsx @@ -42,8 +42,7 @@ describe('Checkbox renderer test', () => { checkboxInitialValue | checkboxExpectedValue ${false} | ${true} ${true} | ${false} - `( - 'Send value ($checkboxInitialValue)', + `('Send value ($checkboxInitialValue)', async ({ checkboxInitialValue, checkboxExpectedValue @@ -59,8 +58,7 @@ describe('Checkbox renderer test', () => { expect(onValueChange).toHaveBeenCalledTimes(1); expect(onValueChange).toHaveBeenCalledWith(checkboxExpectedValue); - } - ); + }); }); describe('Press', () => { diff --git a/src/components/featureHighlight/index.tsx b/src/components/featureHighlight/index.tsx index cdb38afe25..e4b00889b6 100644 --- a/src/components/featureHighlight/index.tsx +++ b/src/components/featureHighlight/index.tsx @@ -222,8 +222,7 @@ class FeatureHighlight extends Component { toValue, // Animate to value duration: toValue ? 100 : 0, // Make it take a while useNativeDriver: true - } - ).start(); // Starts the animation + }).start(); // Starts the animation } setTargetPosition(props = this.props) { @@ -259,9 +258,7 @@ class FeatureHighlight extends Component { topPosition = isUnderMin ? topPosition + innerPadding : targetCenter + minRectHeight / 2 + innerPadding / 2; } if (topPosition < 0 || topPosition + this.contentHeight > Constants.screenHeight) { - console.warn( - `Content is too long and might appear off screen. Please adjust the message length for better results.` - ); + console.warn(`Content is too long and might appear off screen. Please adjust the message length for better results.`); } return topPosition; } diff --git a/src/components/pageControl/index.tsx b/src/components/pageControl/index.tsx index 54e236c5a2..ec85376414 100644 --- a/src/components/pageControl/index.tsx +++ b/src/components/pageControl/index.tsx @@ -114,14 +114,12 @@ class PageControl extends PureComponent { if (Array.isArray(props.size)) { if (props.size[0] >= props.size[1] || props.size[1] >= props.size[2]) { - console.warn( - 'It is recommended that largeSize > mediumSize > smallSize, currently: smallSize=', + console.warn('It is recommended that largeSize > mediumSize > smallSize, currently: smallSize=', props.size[0], 'mediumSize=', props.size[1], 'largeSize=', - props.size[2] - ); + props.size[2]); } } } diff --git a/src/components/panningViews/panListenerView.tsx b/src/components/panningViews/panListenerView.tsx index 961a684b50..de1dd72347 100644 --- a/src/components/panningViews/panListenerView.tsx +++ b/src/components/panningViews/panListenerView.tsx @@ -134,13 +134,11 @@ class PanListenerView extends PureComponent { const {dy, dx} = gestureState; const {directions, panSensitivity = DEFAULT_PAN_SENSITIVITY} = this.props; - return Boolean( - directions && + return Boolean(directions && ((directions.includes(PanningProvider.Directions.UP) && dy < -panSensitivity) || (directions.includes(PanningProvider.Directions.DOWN) && dy > panSensitivity) || (directions.includes(PanningProvider.Directions.LEFT) && dx < -panSensitivity) || - (directions.includes(PanningProvider.Directions.RIGHT) && dx > panSensitivity)) - ); + (directions.includes(PanningProvider.Directions.RIGHT) && dx > panSensitivity))); }; handlePanStart = () => { diff --git a/src/components/textField/__tests__/index.driver.spec.tsx b/src/components/textField/__tests__/index.driver.spec.tsx index c39ffbde94..2dae120180 100644 --- a/src/components/textField/__tests__/index.driver.spec.tsx +++ b/src/components/textField/__tests__/index.driver.spec.tsx @@ -225,17 +225,15 @@ describe('TextField', () => { }); it('should remove validation error message after entering a valid input', () => { - const renderTree = render( - - ); + const renderTree = render(); const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID}); expect(textFieldDriver.getValidationMessage().getText()).toEqual('email is invalid'); @@ -272,16 +270,14 @@ describe('TextField', () => { describe('validationIcon', () => { it('should display validationIcon', () => { - const renderTree = render( - - ); + const renderTree = render(); const textFieldDriver = TextFieldDriver({renderTree, testID: TEXT_FIELD_TEST_ID}); expect(textFieldDriver.getValidationMessage().exists()).toBe(true); diff --git a/src/incubator/slider/SliderPresenter.ts b/src/incubator/slider/SliderPresenter.ts index bda2c18e03..cee42bd864 100644 --- a/src/incubator/slider/SliderPresenter.ts +++ b/src/incubator/slider/SliderPresenter.ts @@ -62,12 +62,10 @@ export function validateValues(props: SliderProps) { } } -export function getStepInterpolated( - trackWidth: number, +export function getStepInterpolated(trackWidth: number, minimumValue: number, maximumValue: number, - stepXValue: SharedValue -) { + stepXValue: SharedValue) { 'worklet'; const outputRange = [0, trackWidth]; const inputRange =