unicorn-demo-app 7.46.2 → 7.46.3

package/package.json

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

package/src/index.js

@@ -263,6 +263,9 @@ module.exports = {
       get IncubatorCalendarScreen() {
         return require('./screens/incubatorScreens/IncubatorCalendarScreen').default;
       },
+      get IncubatorGradient() {
+        return require('./screens/incubatorScreens/IncubatorGradientScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

package/src/screens/ExampleScreenPresenter.tsx

@@ -16,12 +16,22 @@ import {
   View
 } from 'react-native-ui-lib';
 
-interface RadioGroupOptions {
+interface StateOptions {
+  state?: string;
+  setState?: React.Dispatch<React.SetStateAction<any /** no suitable solution for enum */>>;
+}
+
+interface RadioGroupBaseOptions {
   isRow?: boolean;
-  afterValueChanged?: () => void;
   useValueAsLabel?: boolean;
 }
 
+type RadioGroupOptions =
+  | (RadioGroupBaseOptions & {
+      afterValueChanged?: () => void;
+    })
+  | (RadioGroupBaseOptions & StateOptions);
+
 interface BooleanGroupOptions {
   spread?: boolean;
   afterValueChanged?: () => void;
@@ -29,11 +39,6 @@ interface BooleanGroupOptions {
   setState?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-interface SegmentsExtraOptions {
-  state?: string;
-  setState?: React.Dispatch<React.SetStateAction<any /** no suitable solution for enum */>>;
-}
-
 export function renderHeader(title: string, others?: TextProps) {
   return (
     <Text text30 $textDefault {...others}>
@@ -103,9 +108,10 @@ export function renderBooleanGroup(title: string, options: string[]) {
 export function renderRadioGroup(title: string,
   key: string,
   options: object,
-  {isRow, afterValueChanged, useValueAsLabel}: RadioGroupOptions = {}) {
   // @ts-ignore
-  const value = this.state[key];
+  {isRow, afterValueChanged, useValueAsLabel, state, setState}: RadioGroupOptions = {}) {
+  // @ts-ignore
+  const value = state ?? this.state[key];
   return (
     <View marginB-s2>
       {!_.isUndefined(title) && (
@@ -118,7 +124,18 @@ export function renderRadioGroup(title: string,
         style={isRow && styles.rowWrap}
         initialValue={value}
         // @ts-ignore
-        onValueChange={value => this.setState({[key]: value}, afterValueChanged)}
+        onValueChange={value => {
+          if (setState) {
+            setState(value);
+            if (afterValueChanged) {
+              // eslint-disable-next-line no-restricted-syntax
+              console.error('afterValueChanged is not supported together with the state option');
+            }
+          } else {
+            // @ts-ignore
+            this.setState({[key]: value}, afterValueChanged);
+          }
+        }}
       >
         {_.map(options, (value, key) => {
           return (
@@ -159,9 +176,25 @@ export function renderColorOption(title: string,
 
 export function renderSliderOption(title: string,
   key: string,
-  {min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
+  {
+    min = 0,
+    max = 10,
+    step = 1,
+    initial = 0,
+    sliderText = '',
+    state,
+    setState
+  }: {
+    min?: number;
+    max?: number;
+    step?: number;
+    initial?: number;
+    sliderText?: string;
+    state?: number;
+    setState?: React.Dispatch<React.SetStateAction<number>>;
+  }) {
   // @ts-ignore
-  const value = this.state[key] || initial;
+  const value = state ?? this.state[key] ?? initial;
   return (
     <View marginV-s2>
       <Text marginB-s1 text70M $textDefault>
@@ -177,7 +210,14 @@ export function renderSliderOption(title: string,
           maximumValue={max}
           step={step}
           // @ts-ignore
-          onValueChange={value => this.setState({[key]: value})}
+          onValueChange={value => {
+            if (setState) {
+              setState(value);
+            } else {
+              // @ts-ignore
+              this.setState({[key]: value});
+            }
+          }}
         />
         <Text marginL-s4 text70 $textDefault style={styles.text}>
           {sliderText}
@@ -191,7 +231,7 @@ export function renderSliderOption(title: string,
 export function renderMultipleSegmentOptions(title: string,
   key: string,
   options: (SegmentedControlItemProps & {value: any})[],
-  {state, setState}: SegmentsExtraOptions = {}) {
+  {state, setState}: StateOptions = {}) {
   // @ts-ignore
   const value = state ?? this.state[key];
   const index = _.findIndex(options, {value});

package/src/screens/MenuStructure.js

@@ -208,7 +208,8 @@ export const navigationData = {
         tags: 'text field expandable input picker',
         screen: 'unicorn.components.IncubatorExpandableOverlayScreen'
       },
-      {title: 'PanView', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'}
+      {title: 'PanView', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'},
+      {title: 'Gradient', tags: 'gradient', screen: 'unicorn.components.IncubatorGradientScreen'}
     ]
   },
   Inspirations: {

package/src/screens/componentScreens/ButtonsScreen.tsx

@@ -1,6 +1,17 @@
 import React, {Component} from 'react';
-import {ScrollView, StyleSheet, Alert, Image} from 'react-native';
-import {Text, View, Assets, Constants, Button, Colors, Typography, ButtonProps} from 'react-native-ui-lib';
+import {ScrollView, StyleSheet, Alert} from 'react-native';
+import {
+  Text,
+  View,
+  Assets,
+  Constants,
+  Button,
+  Colors,
+  Typography,
+  ButtonProps,
+  Incubator,
+  Image
+} from 'react-native-ui-lib';
 
 const ButtonSpace = 20;
 const plusIcon = Assets.getAssetByPath('icons.demo.plus');
@@ -267,6 +278,34 @@ export default class ButtonsScreen extends Component {
             <Button label="hyperlink button" hyperlink style={{marginBottom: ButtonSpace}}/>
 
             <Button label="Icon on right" iconSource={plusIcon} iconOnRight/>
+
+            <Text style={styles.header}>Custom Backgrounds</Text>
+            <Button
+              label="Gradient Background"
+              customBackground={
+                <Incubator.Gradient
+                  colors={[Colors.$backgroundPrimaryHeavy, Colors.$backgroundPrimaryMedium]}
+                  type="rectangle"
+                  width={200}
+                  height={50}
+                />
+              }
+              style={{marginBottom: ButtonSpace}}
+            />
+            <Button
+              label="Image Background"
+              customBackground={
+                <Image
+                  source={{
+                    uri: 'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
+                  }}
+                  style={{width: 200, height: 50}}
+                  resizeMode="cover"
+                />
+              }
+              style={{marginBottom: ButtonSpace}}
+              $textNeutralHeavy
+            />
           </View>
 
           <View marginT-20>

package/src/screens/incubatorScreens/IncubatorGradientScreen.tsx

@@ -0,0 +1,114 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {Assets, View, Text, Incubator, Icon, Colors} from 'react-native-ui-lib';
+import {renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
+
+const {Gradient} = Incubator;
+
+const COLORS = [Colors.$backgroundPrimaryHeavy, Colors.$backgroundPrimaryHeavy, Colors.$backgroundPrimaryMedium];
+
+const GradientScreen = () => {
+  const [type, setType] = useState('rectangle');
+  const [children, setChildren] = useState('none');
+  const [alignment, setAlignment] = useState('none');
+  const [size, setSize] = useState('fixed');
+  const [error, setError] = useState('');
+  const [angle, setAngle] = useState(0);
+
+  const gradientProps = useMemo(() => {
+    switch (type) {
+      case 'rectangle':
+        return size === 'fixed' ? {type: 'rectangle', width: 100, height: 100} : {type: 'rectangle'};
+      case 'circle':
+        return size === 'fixed' ? {type: 'circle', radius: 50} : {type: 'circle'};
+      case 'border':
+        return size === 'fixed' ? {type: 'border', width: 100, height: 100} : {type: 'border'};
+    }
+  }, [type, size]);
+
+  const childrenProps = useMemo(() => {
+    switch (children) {
+      case 'shortText':
+        return <Text>Lorem ipsum dolor sit amet.</Text>;
+      case 'text':
+        return (
+          <Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </Text>
+        );
+      case 'icon':
+        return <Icon source={Assets.icons.demo.search}/>;
+    }
+  }, [children]);
+
+  const alignmentProp = useMemo(() => {
+    switch (alignment) {
+      case 'none':
+        return undefined;
+      case 'center':
+        return {center: true};
+      case 'centerH':
+        return {centerH: true};
+      case 'centerV':
+        return {centerV: true};
+    }
+  }, [alignment]);
+
+  useEffect(() => {
+    if (children === 'none' && size === 'flex' && type !== 'border') {
+      setError('No children + flex gives no gradient');
+    } else if (size === 'flex' && type === 'circle') {
+      setError('flex size will result with an ellipse instead of a circle');
+    } else {
+      setError('');
+    }
+  }, [children, size, type]);
+
+  return (
+    <View padding-page>
+      {renderRadioGroup('Select type',
+        'type',
+        {Rectangle: 'rectangle', Circle: 'circle', Border: 'border'},
+        {isRow: true, state: type, setState: setType})}
+      {renderRadioGroup('Select children',
+        'children',
+        {No: 'none', 'Short text': 'shortText', Text: 'text', Icon: 'icon'},
+        {isRow: true, state: children, setState: setChildren})}
+      {renderRadioGroup('Select children`s alignment',
+        'alignment',
+        {None: 'none', Center: 'center', CenterH: 'centerH', CenterV: 'centerV'},
+        {isRow: true, state: alignment, setState: setAlignment})}
+      {renderRadioGroup('Select size',
+        'size',
+        {Fixed: 'fixed', Flex: 'flex'},
+        {isRow: true, state: size, setState: setSize})}
+      <View marginH-s10>
+        {renderSliderOption('Angle', 'angle', {
+          min: 0,
+          max: 360,
+          step: 1,
+          state: angle,
+          setState: setAngle
+        })}
+      </View>
+      <Gradient
+        colors={COLORS}
+        // @ts-expect-error
+        type={type}
+        {...gradientProps}
+        {...alignmentProp}
+        angle={angle}
+      >
+        {childrenProps}
+      </Gradient>
+      <Text marginT-s10 center $textDangerLight>
+        {error}
+      </Text>
+    </View>
+  );
+};
+
+export default GradientScreen;

package/src/screens/incubatorScreens/index.js

@@ -6,4 +6,5 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
   registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
   registrar('unicorn.components.IncubatorSliderScreen', () => require('./IncubatorSliderScreen').default);
+  registrar('unicorn.components.IncubatorGradientScreen', () => require('./IncubatorGradientScreen').default);
 }