Feat/segmentetControl new component (#1238)

* Feat/segmentetControl new component

* support many segments

* add onChangeIndex callback

* change alret to console.warn

* fix labels

* animation + refactor

* change to function component

* change to function component

* add some props

* add some props

* Fix animation + props naming

* add useCallback and useMemo

Co-authored-by: Ethan Sharabi <[email protected]>

Author: lidord-wix

demo/src/index.js

@@ -91,6 +91,9 @@ module.exports = {
       get RadioButtonScreen() {
         return require('./screens/componentScreens/RadioButtonScreen').default;
       },
+      get SegmentedControlScreen() {
+        return require('./screens/componentScreens/SegmentedControlScreen').default;
+      },
       get SharedTransitionScreen() {
         return require('./screens/componentScreens/SharedTransitionScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -56,6 +56,7 @@ export const navigationData = {
       {title: 'Picker', tags: 'picker form', screen: 'unicorn.components.PickerScreen'},
       {title: 'DateTimePicker', tags: 'date time picker form', screen: 'unicorn.components.DateTimePickerScreen'},
       {title: 'RadioButton', tags: 'radio button group controls', screen: 'unicorn.components.RadioButtonScreen'},
+      {title: 'SegmentedControl', tags: 'segmented control switch toggle', screen: 'unicorn.components.SegmentedControlScreen'},
       {title: 'Stepper', tags: 'stepper form', screen: 'unicorn.components.StepperScreen'},
       {title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},
       {title: 'Switch', tags: 'switch toggle', screen: 'unicorn.components.SwitchScreen'},

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses} from 'react-native-ui-lib';
+
+const segments = {
+  first: [{label: 'Left'}, {label: 'Right'}],
+  second: [{label: '1'}, {label: '2'}, {label: '3'}, {label: Assets.emojis.airplane}, {label: '5'}],
+  third: [
+    {
+      label: 'Very Long Label with icon',
+      iconSource: Assets.icons.search,
+      iconStyle: {marginLeft: Spacings.s1, width: 16, height: 16},
+      iconOnRight: true
+    },
+    {label: 'Short'}
+  ],
+  forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Colors'}]
+};
+
+const SegmentedControlScreen = () => {
+  const onChangeIndex = (segment: string, index: number) => {
+    console.warn('Index ' + index + ' of the ' + segment + ' segmentedControl was pressed');
+  };
+
+  return (
+    <View flex bottom padding-20>
+      <View flex center>
+        <SegmentedControl onChangeIndex={(index: number) => onChangeIndex('first', index)} segments={segments.first}/>
+        <SegmentedControl
+          onChangeIndex={(index: number) => onChangeIndex('second', index)}
+          containerStyle={styles.container}
+          segments={segments.second}
+          initialIndex={2}
+        />
+        <SegmentedControl
+          onChangeIndex={(index: number) => onChangeIndex('third', index)}
+          containerStyle={styles.container}
+          activeColor={Colors.red30}
+          segments={segments.third}
+        />
+        <SegmentedControl
+          onChangeIndex={(index: number) => onChangeIndex('forth', index)}
+          containerStyle={styles.container}
+          segments={segments.forth}
+          activeColor={Colors.grey10}
+          borderRadius={BorderRadiuses.br20}
+          backgroundColor={Colors.grey10}
+          activeBackgroundColor={Colors.grey40}
+          inactiveColor={Colors.grey70}
+        />
+      </View>
+      <Text text40 dark10>
+        Segmented Control
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 20
+  }
+});
+
+export default SegmentedControlScreen;

demo/src/screens/componentScreens/index.js

@@ -32,6 +32,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
   registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
   registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
+  registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
   registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);

generatedTypes/components/segmentedControl/index.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { SegmentItemProps } from './segment';
+export declare type SegmentedControlProps = {
+    /**
+     * Array on segments.
+     */
+    segments?: SegmentItemProps[];
+    /**
+     * The color of the active segment label.
+     */
+    activeColor?: string;
+    /**
+     * The color of the inactive segments (label).
+     */
+    inactiveColor?: string;
+    /**
+     * Callback for when index has change.
+     */
+    onChangeIndex?: (index: number) => void;
+    /**
+     * Initial index to be active.
+     */
+    initialIndex?: number;
+    /**
+     * The segmentedControl borderRadius
+     */
+    borderRadius?: number;
+    /**
+     * The background color of the inactive segments
+     */
+    backgroundColor?: string;
+    /**
+     * The background color of the active segment
+     */
+    activeBackgroundColor?: string;
+    /**
+     * The color of the active segment outline
+     */
+    outlineColor?: string;
+    /**
+     * The width of the active segment outline
+     */
+    outlineWidth?: number;
+    /**
+     * Should the icon be on right of the label
+     */
+    iconOnRight?: boolean;
+    /**
+     * Additional spacing styles for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+declare const _default: React.ComponentClass<SegmentedControlProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/segmentedControl/segment.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import { LayoutChangeEvent, ImageSourcePropType, ImageStyle, StyleProp } from 'react-native';
+export declare type SegmentItemProps = {
+    /**
+     * The label of the segment.
+     */
+    label?: string;
+    /**
+     * An icon for the segment.
+     */
+    iconSource?: ImageSourcePropType;
+    /**
+     * An icon for the segment.
+     */
+    iconStyle?: StyleProp<ImageStyle>;
+    /**
+     * Should the icon be on right of the label
+     */
+    iconOnRight?: boolean;
+};
+export declare type SegmentProps = SegmentItemProps & {
+    /**
+     * Is the item selected.
+     */
+    isSelected?: boolean;
+    /**
+     * The color of the active segment (label and outline).
+     */
+    activeColor?: string;
+    /**
+     * The color of the inactive segment (label).
+     */
+    inactiveColor?: string;
+    /**
+     * Callback for when segment has pressed.
+     */
+    onPress: (index: number) => void;
+    /**
+     * The index of the segment.
+     */
+    index: number;
+    /**
+     * onLayout function.
+     */
+    onLayout?: (index: number, event: LayoutChangeEvent) => void;
+};
+declare const _default: React.ComponentClass<SegmentItemProps & {
+    /**
+     * Is the item selected.
+     */
+    isSelected?: boolean | undefined;
+    /**
+     * The color of the active segment (label and outline).
+     */
+    activeColor?: string | undefined;
+    /**
+     * The color of the inactive segment (label).
+     */
+    inactiveColor?: string | undefined;
+    /**
+     * Callback for when segment has pressed.
+     */
+    onPress: (index: number) => void;
+    /**
+     * The index of the segment.
+     */
+    index: number;
+    /**
+     * onLayout function.
+     */
+    onLayout?: ((index: number, event: LayoutChangeEvent) => void) | undefined;
+} & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/index.d.ts

@@ -40,6 +40,7 @@ export {default as Image, ImageProps} from './components/image';
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonPropTypes, RadioButtonProps} from './components/radioButton/RadioButton';
 export {default as RadioGroup, RadioGroupPropTypes, RadioGroupProps} from './components/radioButton/RadioGroup';
+export {default as SegmentedControl, SegmentedControlProps} from './components/segmentedControl';
 export {default as Switch, SwitchProps} from './components/switch';
 export {default as TabController, TabControllerProps, TabControllerItemProps} from './components/tabController';
 export {default as TabBar, TabBarProps} from './components/TabBar';