Merge branch 'v6' into release

Author: adids1221

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -14,6 +14,7 @@ export default class TextFieldScreen extends Component {
   state = {
     errorPosition: TextField.validationMessagePositions.TOP,
     shouldDisable: false,
+    isReadonly: false,
     value: 'Initial Value',
     searching: false,
     preset: 'withUnderline'
@@ -50,7 +51,7 @@ export default class TextFieldScreen extends Component {
   }
 
   render() {
-    const {errorPosition, shouldDisable, price, preset} = this.state;
+    const {errorPosition, shouldDisable, isReadonly, price, preset} = this.state;
     return (
       <ScrollView keyboardShouldPersistTaps="always">
         <View flex padding-page>
@@ -182,11 +183,19 @@ export default class TextFieldScreen extends Component {
             <Text h3 blue50 marginV-s4>
               Colors By State
             </Text>
-            <Button
-              label={shouldDisable ? 'Enable' : 'Disable'}
-              onPress={() => this.setState({shouldDisable: !shouldDisable})}
-              size={Button.sizes.xSmall}
-            />
+            <View row>
+              <Button
+                label={isReadonly ? 'Enable' : 'Readonly'}
+                onPress={() => this.setState({isReadonly: !isReadonly})}
+                size={Button.sizes.xSmall}
+                marginR-s4
+              />
+              <Button
+                label={shouldDisable ? 'Enable' : 'Disable'}
+                onPress={() => this.setState({shouldDisable: !shouldDisable})}
+                size={Button.sizes.xSmall}
+              />
+            </View>
           </View>
 
           <TextField
@@ -195,14 +204,16 @@ export default class TextFieldScreen extends Component {
               default: Colors.$textDefault,
               focus: Colors.$textGeneral,
               error: Colors.$textDangerLight,
-              disabled: Colors.$textDisabled
+              disabled: Colors.$textDisabled,
+              readonly: Colors.$textNeutral
             }}
             placeholder="Enter valid email"
             validationMessage="Email is invalid"
             validate={'email'}
             validateOnChange
             fieldStyle={styles.withFrame}
             editable={!shouldDisable}
+            readonly={isReadonly}
           />
 
           <View row spread centerV>
@@ -224,6 +235,7 @@ export default class TextFieldScreen extends Component {
               preset === 'withUnderline' ? styles.withUnderline : styles.withFrame
             }
             editable={!shouldDisable}
+            readonly={isReadonly}
           />
 
           <Text h3 blue50 marginV-s4>

scripts/buildPackages/buildComponentsPackages.js

@@ -0,0 +1,18 @@
+const fs = require('fs');
+const _ = require('lodash');
+
+/* Write all components as separate packages */
+const path = './src/components';
+fs.readdir(path, (err, files) => {
+  if (!err) {
+    files
+      .filter((f) => f !== 'index.js')
+      .forEach((file) => {
+        fs.writeFileSync(`${file}.js`,
+          `module.exports = require('${path}/${file}').default;\n`);
+        const componentName = _.upperFirst(file);
+        fs.writeFileSync(`${file}.d.ts`,
+          `import {${componentName}} from './src';\nexport default ${componentName};\n`);
+      });
+  }
+});

scripts/buildPackages.js renamed to scripts/buildPackages/buildCustomPackages.js

@@ -14,6 +14,10 @@ const packages = [
     filename: 'constants.js',
     content: `module.exports = require('./src/commons/Constants').default;\n`
   },
+  {
+    filename: 'textField.js',
+    content: `module.exports = require('./src/components/textField/TextFieldMigrator').default;\n`
+  },
   {
     filename: 'core.js',
     components: ['View', 'Text', 'Image', 'TouchableOpacity', 'Button'],
@@ -84,19 +88,3 @@ packages.forEach((package) => {
     fs.writeFileSync(filename, typings);
   }
 });
-
-/* Write all components as separate packages */
-const path = './src/components';
-fs.readdir(path, (err, files) => {
-  if (!err) {
-    files
-      .filter((f) => f !== 'index.js')
-      .forEach((file) => {
-        fs.writeFileSync(`${file}.js`,
-          `module.exports = require('${path}/${file}').default;\n`);
-        const componentName = _.upperFirst(file);
-        fs.writeFileSync(`${file}.d.ts`,
-          `import {${componentName}} from './src';\nexport default ${componentName};\n`);
-      });
-  }
-});

scripts/buildPackages/index.js

@@ -0,0 +1,6 @@
+const childProcess = require('child_process');
+
+const path = 'scripts/buildPackages';
+
+childProcess.execSync(`node ${path}/buildComponentsPackages`);
+childProcess.execSync(`node ${path}/buildCustomPackages`);

src/components/colorPalette/ColorPalette.api.json

@@ -38,7 +38,8 @@
     {"name": "containerWidth", "type": "number", "description": "The container margins"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
     {"name": "style", "type": "ViewStyle", "description": "Component's style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"},
+    {"name": "backgroundColor", "type": "string", "description": "The ColorPalette's background color"}
   ],
   "snippet": [
     "<ColorPalette",

src/components/colorPalette/index.tsx

@@ -54,7 +54,7 @@ interface Props {
   style?: StyleProp<ViewStyle>;
   testID?: string;
   /**
-   * Give the ColorPalette a background color
+   * The ColorPalette's background color
    */
   backgroundColor?: string;
 }

src/components/colorPicker/colorPicker.api.json

@@ -31,8 +31,8 @@
       "description": "Accessibility labels as an object of strings",
       "default": "{\n addButton: 'add custom color using hex code',\n dismissButton: 'dismiss',\n doneButton: 'done',\n input: 'custom hex color code'\n}"
     },
-    {"name": "style", "type": "ViewStyle", "description": "Component's style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"},
+    {"name": "backgroundColor", "type": "string", "description": "The ColorPicker's background color"}
   ],
   "snippet": [
     "<ColorPicker",

src/components/colorPicker/index.tsx

@@ -7,6 +7,7 @@ import Button from '../button';
 import ColorPalette from '../colorPalette';
 import {SWATCH_MARGIN, SWATCH_SIZE} from '../colorSwatch';
 import ColorPickerDialog, {ColorPickerDialogProps} from './ColorPickerDialog';
+import {LogService} from '../../services';
 
 interface Props extends ColorPickerDialogProps {
   /**
@@ -43,7 +44,7 @@ interface Props extends ColorPickerDialogProps {
   style?: StyleProp<ViewStyle>;
   testID?: string;
   /**
-   * Give the ColorPicker a background color
+   * The ColorPicker's background color
    */
   backgroundColor?: string;
 }
@@ -70,6 +71,14 @@ class ColorPicker extends PureComponent<Props> {
     backgroundColor: Colors.$backgroundDefault
   };
 
+  constructor(props: Props) {
+    super(props);
+
+    if (props.style) {
+      LogService.warn(`UILib ColorPicker's 'style' prop is deprecated. You can use the 'backgroundColor' prop instead`);
+    }
+  }
+
   state = {
     show: false
   };

src/components/drawer/index.tsx

@@ -133,7 +133,7 @@ interface DrawerProps {
  * @description: Drawer Component
  * @important: If your app works with RNN, your screen must be wrapped
  * with gestureHandlerRootHOC from 'react-native-gesture-handler'. see
- * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
+ * @importantLink: https://docs.swmansion.com/react-native-gesture-handler/docs/installation/
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true
  */
 class Drawer extends PureComponent<DrawerProps> {

src/components/picker/PickerItemsList.tsx

@@ -87,7 +87,12 @@ const PickerItemsList = (props: PickerItemsListProps) => {
             {topBarProps.doneLabel ?? 'Select'}
           </Text>
         </View>
-        <WheelPicker initialValue={context.value as PickerSingleValue} items={items} onChange={setWheelPickerValue}/>
+        <WheelPicker
+          flatListProps={listProps}
+          initialValue={context.value as PickerSingleValue}
+          items={items}
+          onChange={setWheelPickerValue}
+        />
       </View>
     );
   };