Incubator.Gradient - new component (#3795)

* Incubator.Gradient - new component

* Oops

* Revert LinearGradientPackage change

* Improve screen

Author: M-i-k-e-l

demo/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;

demo/src/screens/ExampleScreenPresenter.tsx

@@ -16,24 +16,29 @@ 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;
   state?: boolean;
   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});

demo/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: {

demo/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;

demo/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);
 }

src/incubator/gradient/BorderGradient.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {LinearGradientPackage} from 'optionalDeps';
+const LinearGradient = LinearGradientPackage?.default;
+import {BorderGradientProps} from './types';
+import View from '../../components/view';
+import Spacings from '../../style/spacings';
+import Colors from '../../style/colors';
+import useAngleTransform from './useAngleTransform';
+
+const BorderGradient = (props: BorderGradientProps) => {
+  const {colors, borderWidth = Spacings.s1, borderRadius, children, width, height, angle, ...others} = props;
+
+  const innerWidth = width ? width - borderWidth * 2 : undefined;
+  const innerHeight = height ? height - borderWidth * 2 : undefined;
+  const {start, end} = useAngleTransform({angle});
+
+  if (!LinearGradient) {
+    return null;
+  }
+
+  return (
+    <View width={width} height={height}>
+      <LinearGradient colors={colors} start={start} end={end} style={{borderRadius}}>
+        <View
+          bg-white
+          width={innerWidth}
+          height={innerHeight}
+          style={{margin: borderWidth, borderRadius, borderWidth: 0, borderColor: Colors.transparent}}
+          {...others}
+        >
+          {children}
+        </View>
+      </LinearGradient>
+    </View>
+  );
+};
+
+export default BorderGradient;

src/incubator/gradient/CircleGradient.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {LinearGradientPackage} from 'optionalDeps';
+const LinearGradient = LinearGradientPackage?.default;
+import {CircleGradientProps} from './types';
+import View from '../../components/view';
+import useAngleTransform from './useAngleTransform';
+
+const CircleGradient = (props: CircleGradientProps) => {
+  const {colors, radius, angle, children, ...others} = props;
+
+  const internalDiameter = radius ? radius * 2 : undefined;
+  const {start, end} = useAngleTransform({angle});
+
+  if (!LinearGradient) {
+    return null;
+  }
+
+  return (
+    <View width={internalDiameter} height={internalDiameter} style={{borderRadius: 999, overflow: 'hidden'}}>
+      <LinearGradient colors={colors} start={start} end={end}>
+        <View width={internalDiameter} height={internalDiameter} {...others}>
+          {children}
+        </View>
+      </LinearGradient>
+    </View>
+  );
+};
+
+export default CircleGradient;

src/incubator/gradient/RectangleGradient.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {LinearGradientPackage} from 'optionalDeps';
+const LinearGradient = LinearGradientPackage?.default;
+import {RectangleGradientProps} from './types';
+import View from '../../components/view';
+import useAngleTransform from './useAngleTransform';
+
+const RectangleGradient = (props: RectangleGradientProps) => {
+  const {colors, width, height, angle, children, ...others} = props;
+
+  const {start, end} = useAngleTransform({angle});
+
+  if (!LinearGradient) {
+    return null;
+  }
+
+  return (
+    <View width={width} height={height}>
+      <LinearGradient colors={colors} start={start} end={end}>
+        <View width={width} height={height} {...others}>
+          {children}
+        </View>
+      </LinearGradient>
+    </View>
+  );
+};
+
+export default RectangleGradient;