Merge branch 'master' into release

Author: ethanshar

.gitignore

@@ -64,7 +64,6 @@ yarn-error.log
 # UILib
 dist
 dist-ts
-yarn.lock
 package-lock.json
 docs/**/*.md
 

Gemfile

@@ -1,6 +1,5 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby File.read(File.join(__dir__, '.ruby-version')).strip
-
-gem 'cocoapods', '~> 1.11', '>= 1.11.3'
+ruby '>= 2.6.10'
+gem 'cocoapods', '>= 1.11.3'

demo/src/index.js

@@ -66,6 +66,9 @@ module.exports = {
       get HintsScreen() {
         return require('./screens/componentScreens/HintsScreen').default;
       },
+      get HorizontalSortableListScreen() {
+        return require('./screens/componentScreens/HorizontalSortableListScreen').default;
+      },
       get IconScreen() {
         return require('./screens/componentScreens/IconScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -99,6 +99,7 @@ export const navigationData = {
       {title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'},
       {title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'},
       {title: 'SortableList', tags: 'sortable list drag', screen: 'unicorn.components.SortableListScreen'},
+      {title: 'HorizontalSortableList', tags: 'sortable horizontal list drag', screen: 'unicorn.components.HorizontalSortableListScreen'},
       {title: 'GridList', tags: 'grid list', screen: 'unicorn.components.GridListScreen'},
       {title: 'SortableGridList', tags: 'sort grid list drag', screen: 'unicorn.components.SortableGridListScreen'}
     ]

demo/src/screens/componentScreens/HorizontalSortableListScreen.tsx

@@ -0,0 +1,120 @@
+import React, {useCallback, useState, useRef} from 'react';
+import {StyleSheet} from 'react-native';
+import {SortableList, View, Text, Colors, Button, Card, BorderRadiuses} from 'react-native-ui-lib';
+import {renderHeader} from '../ExampleScreenPresenter';
+import products from '../../data/products';
+
+const data = products.map((product, index) => ({...product, locked: index === 3}));
+type Item = (typeof data)[0];
+
+const HorizontalSortableListScreen = () => {
+  const [items, setItems] = useState<Item[]>(data);
+  const [selectedItems, setSelectedItems] = useState<Item[]>([]);
+  const [removedItems, setRemovedItems] = useState<Item[]>([]);
+  const orderedItems = useRef<Item[]>(data);
+
+  const toggleItemSelection = useCallback((item: Item) => {
+    if (selectedItems.includes(item)) {
+      setSelectedItems(selectedItems.filter(selectedItem => ![item.id].includes(selectedItem.id)));
+    } else {
+      setSelectedItems(selectedItems.concat(item));
+    }
+  },
+  [selectedItems, setSelectedItems]);
+
+  const addItem = useCallback(() => {
+    if (removedItems.length > 0) {
+      orderedItems.current = orderedItems.current.concat(removedItems[0]);
+      setItems(orderedItems.current);
+      setRemovedItems(removedItems.slice(1));
+    }
+  }, [removedItems, setItems, setRemovedItems]);
+
+  const removeSelectedItems = useCallback(() => {
+    setRemovedItems(removedItems.concat(selectedItems));
+    setSelectedItems([]);
+    orderedItems.current = orderedItems.current.filter(item => !selectedItems.includes(item));
+    setItems(orderedItems.current);
+  }, [setRemovedItems, removedItems, selectedItems, setItems, setSelectedItems]);
+
+  const keyExtractor = useCallback((item: Item) => {
+    return `${item.id}`;
+  }, []);
+
+  const onOrderChange = useCallback((newData: Item[]) => {
+    console.log('New order:', newData);
+    orderedItems.current = newData;
+  }, []);
+
+  const renderItem = useCallback(({item, index: _index}: {item: Item; index: number}) => {
+    const selected = selectedItems.includes(item);
+    const {locked} = item;
+    const Container = locked ? View : Card;
+    return (
+      <Container
+        style={styles.itemContainer}
+        onPress={() => toggleItemSelection(item)}
+        customValue={item.id}
+        selected={selected}
+        margin-s1
+      >
+        <Card.Section
+          imageSource={{uri: item.mediaUrl}}
+          imageStyle={styles.itemImage}
+          imageProps={{
+            customOverlayContent: (
+              <Text margin-s1={!locked} h1={!locked} h4={locked} center={locked} orange30>
+                {locked ? 'Locked' : item.id}
+              </Text>
+            )
+          }}
+        />
+      </Container>
+    );
+  },
+  [selectedItems, toggleItemSelection]);
+
+  return (
+    <View flex bg-$backgroundDefault>
+      {renderHeader('Sortable List', {'margin-10': true})}
+      <View row center marginB-s2>
+        <Button label="Add Item" size={Button.sizes.xSmall} disabled={removedItems.length === 0} onPress={addItem}/>
+        <Button
+          label="Remove Items"
+          size={Button.sizes.xSmall}
+          disabled={selectedItems.length === 0}
+          marginL-s3
+          onPress={removeSelectedItems}
+        />
+      </View>
+      <View flex useSafeArea>
+        <SortableList
+          horizontal
+          data={items}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          onOrderChange={onOrderChange}
+          scale={1.02}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default HorizontalSortableListScreen;
+const styles = StyleSheet.create({
+  itemContainer: {
+    overflow: 'hidden',
+    borderColor: Colors.$outlineDefault,
+    borderBottomWidth: 1
+  },
+  selectedItemContainer: {
+    borderLeftColor: Colors.$outlinePrimary,
+    borderLeftWidth: 5
+  },
+  itemImage: {
+    width: 80,
+    height: 80,
+    borderRadius: BorderRadiuses.br10
+  }
+});

demo/src/screens/componentScreens/index.js

@@ -50,6 +50,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.SliderScreen', () => require('./SliderScreen').default);
   registrar('unicorn.components.SortableGridListScreen', () => require('./SortableGridListScreen').default);
   registrar('unicorn.components.SortableListScreen', () => require('./SortableListScreen').default);
+  registrar('unicorn.components.HorizontalSortableListScreen', () => require('./HorizontalSortableListScreen').default);
   registrar('unicorn.components.StackAggregatorScreen', () => require('./StackAggregatorScreen').default);
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);

demo/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -19,7 +19,6 @@ const TOAST_MESSAGES = {
   offline: 'Check Your Internet Connection'
 };
 
-// TODO: "ReactImageView: Image source "null" doesn't exist" (Android + preset "none")
 class ToastsScreen extends Component {
   showToast = false; // keep this state in class instance for immediate response
   state = {

package.json

@@ -76,8 +76,8 @@
     "@types/jest": "^29.2.1",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",
-    "@types/react": "^18.0.24",
-    "@types/react-native": "0.68.5",
+    "@types/react": "^18.2.15",
+    "@types/react-native": "0.71.2",
     "@types/tinycolor2": "^1.4.2",
     "@types/url-parse": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.3.1",
@@ -96,7 +96,7 @@
     "gh-pages": "^1.1.0",
     "jest": "^29.2.1",
     "light-date": "^1.2.0",
-    "metro-react-native-babel-preset": "0.73.7",
+    "metro-react-native-babel-preset": "0.73.10",
     "mocha": "^5.0.0",
     "moment": "^2.24.0",
     "object-hash": "^3.0.0",
@@ -106,14 +106,14 @@
     "react": "18.2.0",
     "react-autobind": "^1.0.6",
     "react-dom": "^18.2.0",
-    "react-native": "0.71.2",
+    "react-native": "0.71.12",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "2.9.0",
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-mmkv": "2.6.1",
     "react-native-navigation": "7.32.1",
-    "react-native-reanimated": "3.1.0",
+    "react-native-reanimated": "3.4.0",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "^13.7.0",
     "react-native-svg-transformer": "^0.14.3",

scripts/prReleaseNotes.js

@@ -1,7 +1,7 @@
 const GITHUB_TOKEN = 'xxxx';
-const LATEST_VERSION = '7.3.0';
-const NEW_VERSION = '7.4.0';
-const PREFIX = 'uilib';
+const LATEST_VERSION = '7.10.0';
+const NEW_VERSION = '7.11.0';
+const FILE_PREFIX = 'uilib';
 const REPO = 'wix/react-native-ui-lib';
 
-require('./prReleaseNotesCommon').generateReleaseNotes(LATEST_VERSION, NEW_VERSION, GITHUB_TOKEN, PREFIX, REPO);
+require('./prReleaseNotesCommon').generateReleaseNotes(LATEST_VERSION, NEW_VERSION, GITHUB_TOKEN, FILE_PREFIX, REPO);

scripts/prReleaseNotesCommon.js

@@ -4,8 +4,8 @@ const childProcess = require('child_process');
 const fetch = require('node-fetch');
 const readline = require('readline');
 
-function fetchLatestReleaseDate(version) {
-  const relesae = childProcess.execSync(`gh release view ${version}`).toString();
+function fetchLatestReleaseDate(tagPrefix, version) {
+  const relesae = childProcess.execSync(`gh release view ${tagPrefix}${version}`).toString();
   const releaseMetaData = relesae.split('--')[0];
   const createDate = _.flow(data => _.split(data, '\n'),
     linesData => _.find(linesData, l => l.startsWith('created')),
@@ -147,8 +147,8 @@ function getReleaseNotesForType(PRs, title) {
   return releaseNotes;
 }
 
-async function _generateReleaseNotes(latestVersion, newVersion, githubToken, prefix, repo, header) {
-  const latestReleaseDate = fetchLatestReleaseDate(latestVersion);
+async function _generateReleaseNotes(latestVersion, newVersion, githubToken, fileNamePrefix, repo, header, tagPrefix) {
+  const latestReleaseDate = fetchLatestReleaseDate(tagPrefix, latestVersion);
   const PRs = await fetchMergedPRs(latestReleaseDate, repo, githubToken);
   if (!PRs) {
     return;
@@ -175,14 +175,14 @@ async function _generateReleaseNotes(latestVersion, newVersion, githubToken, pre
   releaseNotes += getReleaseNotesForType(silentPRs,
     '// Silent - these PRs did not have a changelog or were left out for some other reason, is it on purpose?');
 
-  fs.writeFileSync(`${process.env.HOME}/Downloads/${prefix}-release-notes_${newVersion}.txt`, releaseNotes, {
+  fs.writeFileSync(`${process.env.HOME}/Downloads/${fileNamePrefix}-release-notes_${newVersion}.txt`, releaseNotes, {
     encoding: 'utf8'
   });
 
-  console.log(`\x1b[1m\x1b[32m✔\x1b[0m \x1b[32m${prefix}-release-notes.txt was successfully written to ${process.env.HOME}/Downloads\x1b[0m \x1b[1m\x1b[32m✔\x1b[0m`);
+  console.log(`\x1b[1m\x1b[32m✔\x1b[0m \x1b[32m${fileNamePrefix}-release-notes.txt was successfully written to ${process.env.HOME}/Downloads\x1b[0m \x1b[1m\x1b[32m✔\x1b[0m`);
 }
 
-async function generateReleaseNotes(latestVersion, newVersion, githubToken, prefix, repo, header = '') {
+async function generateReleaseNotes(latestVersion, newVersion, githubToken, fileNamePrefix, repo, header = '', tagPrefix = '') {
   let latestVer, newVer;
   const rl = readline.createInterface({
     input: process.stdin,
@@ -200,7 +200,7 @@ async function generateReleaseNotes(latestVersion, newVersion, githubToken, pref
   rl.on('close', () => {
     console.info(`Current latest version is v${latestVer}`);
     console.info(`Generating release notes out or PRs for v${newVer}`);
-    _generateReleaseNotes(latestVer, newVer, githubToken, prefix, repo, header);
+    _generateReleaseNotes(latestVer, newVer, githubToken, fileNamePrefix, repo, header, tagPrefix);
   });
 }