unicorn-demo-app 7.46.2-snapshot.7306 → 7.46.2

package/package.json

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

package/src/index.js

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

package/src/screens/MenuStructure.js

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

package/src/screens/incubatorScreens/index.js

@@ -6,5 +6,4 @@ 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);
 }

package/src/screens/incubatorScreens/IncubatorGradientScreen.tsx

@@ -1,114 +0,0 @@
-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;