unicorn-demo-app 7.8.0 → 7.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.8.0",
+  "version": "7.9.0",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/index.js

@@ -164,6 +164,9 @@ module.exports = {
         return require('./screens/componentScreens/WizardScreen').default;
       },
       // nativeComponentScreens
+      get DynamicFontsScreen() {
+        return require('./screens/nativeComponentScreens/DynamicFontsScreen').default;
+      },
       get HighlightOverlayViewScreen() {
         return require('./screens/nativeComponentScreens/HighlightOverlayViewScreen').default;
       },

package/src/screens/MenuStructure.js

@@ -141,6 +141,11 @@ export const navigationData = {
         tags: 'KeyboardAwareScrollView',
         screen: 'unicorn.components.KeyboardAwareScrollViewScreen'
       },
+      {
+        title: 'Dynamic Fonts',
+        tags: 'dynamic fonts load download',
+        screen: 'unicorn.nativeComponents.DynamicFontsScreen'
+      },
       {
         title: 'Highlight Overlay',
         tags: 'native overlay',

package/src/screens/componentScreens/CheckboxScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Checkbox, Assets, Text, View, Colors} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, Colors, View, Text, Checkbox} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class CheckboxScreen extends Component {
   state = {
@@ -9,9 +9,10 @@ export default class CheckboxScreen extends Component {
     value3: true,
     value4: true,
     value5: false,
-    value6: false
+    value6: false,
+    value7: true
   };
-
+  
   render() {
     return (
       <View flex padding-page>
@@ -19,7 +20,8 @@ export default class CheckboxScreen extends Component {
           Checkbox
         </Text>
 
-        <Text marginB-s4>Customizable UI</Text>
+        <Text marginV-s4>Customizable UI</Text>
+
         <View row marginB-s5 centerV>
           <Checkbox value={this.state.value1} onValueChange={value1 => this.setState({value1})}/>
           <Checkbox
@@ -50,10 +52,18 @@ export default class CheckboxScreen extends Component {
           containerStyle={styles.checkbox}
         />
 
+        <Checkbox
+          value={this.state.value7}
+          onValueChange={value7 => this.setState({value7})}
+          indeterminate
+          label={'Indeterminate state'}
+          color={Colors.green20}
+          containerStyle={styles.checkbox}
+        />
+
         <View row style={styles.row}>
-          <Text $textDefault marginR-10>
-            Disabled States
-          </Text>
+          <Text $textDefault marginR-10>Disabled States</Text>
+
           <Checkbox
             disabled
             value={this.state.value5}

package/src/screens/componentScreens/ColorPickerScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo} from 'react-native-ui-lib';
+import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo, TouchableOpacity, ColorPickerDialog} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
 interface State {
@@ -10,6 +10,7 @@ interface State {
   customColors: string[];
   paletteChange: boolean;
   backgroundColor: string;
+  showPicker: boolean;
 }
 
 const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
@@ -31,7 +32,8 @@ export default class ColorPickerScreen extends Component<{}, State> {
     textColor: Colors.$textDefaultLight,
     customColors: [],
     paletteChange: false,
-    backgroundColor: Colors.$backgroundDefault
+    backgroundColor: Colors.$backgroundDefault,
+    showPicker: false
   };
 
   onDismiss = () => {
@@ -123,6 +125,25 @@ export default class ColorPickerScreen extends Component<{}, State> {
             </Text>
           </View>
         </View>
+
+        <Text center text60 marginT-10>Color Picker Dialog</Text>
+        <View center>
+          <TouchableOpacity
+            margin-10 
+            center
+            style={{width: 60, height: 60, borderWidth: 1, borderRadius: 30, backgroundColor: color}} 
+            onPress={() => this.setState({showPicker: true})}
+          >
+            <Text>Press</Text>
+          </TouchableOpacity>
+        </View>
+        <ColorPickerDialog
+          visible={this.state.showPicker}
+          initialColor={color}
+          key={color}
+          onDismiss={() => this.setState({showPicker: false})}
+          onSubmit={this.onSubmit}
+        />
       </ScrollView>
     );
   }

package/src/screens/nativeComponentScreens/DynamicFontsScreen.tsx

@@ -0,0 +1,120 @@
+import React, {Component, Fragment} from 'react';
+import {ScrollView} from 'react-native';
+import {View, Text, Button, DynamicFonts} from 'react-native-ui-lib';
+import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
+
+enum FontLoadingEnum {
+  SINGLE_FONT = 'singleFont',
+  FONT_FAMILY = 'fontFamily'
+}
+
+type State = {
+  fontLoadingType: FontLoadingEnum;
+  loadedFonts: string[];
+};
+
+export default class DynamicFontsScreen extends Component<{}, State> {
+  private fontDownloader: InstanceType<typeof DynamicFonts> = new DynamicFonts({debug: true});
+
+  state = {
+    fontLoadingType: FontLoadingEnum.SINGLE_FONT,
+    loadedFonts: []
+  };
+
+  renderSingleFont = () => {
+    const {loadedFonts} = this.state;
+    return (
+      <Fragment>
+        <Text style={{fontSize: 24, lineHeight: 28, fontFamily: 'System'}}>{`
+System:
+ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
+        `}</Text>
+        {loadedFonts.length > 0 && (
+          <Text marginT-20 style={{fontSize: 24, lineHeight: 28, fontFamily: loadedFonts[0]}}>{`
+${loadedFonts}:
+ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
+        `}</Text>
+        )}
+        <Button
+          marginV-20
+          label="Load a single font"
+          onPress={async () => {
+            try {
+              const loadedFonts = await this.fontDownloader.getFont({
+                fontUri:
+                  'https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/TypographyKits/fonts/Vollkorn/Vollkorn-Regular.ttf',
+                fontName: 'Vollkorn-Regular',
+                fontExtension: 'ttf'
+              });
+              this.setState({loadedFonts: [loadedFonts]});
+            } catch (error) {
+              console.log('Error!', error);
+            }
+          }}
+        />
+      </Fragment>
+    );
+  };
+
+  renderFontFamily = () => {
+    const {loadedFonts} = this.state;
+    return (
+      <Fragment>
+        <Text style={{fontSize: 16, lineHeight: 18, fontFamily: 'System'}}>{`
+System:
+ABCDEFGH abcdefgh
+        `}</Text>
+        <ScrollView>
+          {loadedFonts?.map(loadedFont => (
+            <Text key={loadedFont} style={{fontSize: 16, lineHeight: 18, fontFamily: loadedFont}}>{`
+${loadedFont}:
+ABCDEFGH abcdefgh
+        `}</Text>
+          ))}
+        </ScrollView>
+
+        <Button
+          marginV-20
+          label="Load a complete font family"
+          onPress={async () => {
+            try {
+              const loadedFonts = await this.fontDownloader.getFontFamily('https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/TypographyKits/fonts/Vollkorn/',
+                [
+                  'Bold',
+                  'BoldItalic',
+                  'ExtraBold',
+                  'ExtraBoldItalic',
+                  'Italic',
+                  'Medium',
+                  'MediumItalic',
+                  'Regular',
+                  'SemiBold'
+                ],
+                'ttf',
+                'Vollkorn-');
+              this.setState({loadedFonts});
+            } catch (error) {
+              console.log('Error!', error);
+            }
+          }}
+        />
+      </Fragment>
+    );
+  };
+
+  render() {
+    const {fontLoadingType, loadedFonts} = this.state;
+    return (
+      <View bg-grey80 flex padding-20>
+        {renderMultipleSegmentOptions.call(this, 'Font loading:', 'fontLoadingType', [
+          {label: 'Single', value: FontLoadingEnum.SINGLE_FONT},
+          {label: 'Family', value: FontLoadingEnum.FONT_FAMILY}
+        ])}
+        <View flex center key={`${loadedFonts}`}>
+          {fontLoadingType === FontLoadingEnum.SINGLE_FONT ? this.renderSingleFont() : this.renderFontFamily()}
+          {loadedFonts && <Text text80>Loaded fonts: {loadedFonts.map(loadedFont => `${loadedFont} `)}</Text>}
+        </View>
+      </View>
+    );
+  }
+}

package/src/screens/nativeComponentScreens/index.js

@@ -1,4 +1,5 @@
 export function registerScreens(registrar) {
+  registrar('unicorn.nativeComponents.DynamicFontsScreen', () => require('./DynamicFontsScreen').default);
   registrar('unicorn.nativeComponents.HighlightOverlayViewScreen', () => require('./HighlightOverlayViewScreen').default);
   registrar('unicorn.nativeComponents.SafeAreaSpacerViewScreen', () => require('./SafeAreaSpacerViewScreen').default);
   registrar('unicorn.nativeComponents.KeyboardTrackingViewScreen', () => require('./KeyboardTrackingViewScreen').default);