Merge branch 'master' of github.com:wix/react-native-ui-lib into release

demo/src/index.js

@@ -267,6 +267,9 @@ module.exports = {
       get Pinterest() {
         return require('./screens/realExamples/Pinterest').default;
       },
+      get PieChartScreen() {
+        return require('./screens/componentScreens/PieChartScreen.tsx').default;
+      },
       get ListActionsScreen() {
         return require('./screens/realExamples/ListActions/ListActionsScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -104,6 +104,12 @@ export const navigationData = {
       {title: 'SortableGridList', tags: 'sort grid list drag', screen: 'unicorn.components.SortableGridListScreen'}
     ]
   },
+  Charts: {
+    title: 'Charts',
+    screens: [
+      {title: 'PieChart', tags: 'pie chart data', screen: 'unicorn.components.PieChartScreen'}
+    ]
+  },
   LayoutsAndTemplates: {
     title: 'Layouts & Templates',
     screens: [

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -83,6 +83,15 @@ const dialogOptions = [
   {label: 'Option 8', value: 6}
 ];
 
+const statusOptions = [
+  {label: 'Overview', value: 'overview'},
+  {label: 'In Progress', value: 'inProgress'},
+  {label: 'Completed', value: 'completed'},
+  {label: 'Pending Review', value: 'pendingReview'},
+  {label: 'Approved', value: 'approved'},
+  {label: 'Rejected', value: 'rejected'}
+];
+
 export default class PickerScreen extends Component {
   picker = React.createRef<PickerMethods>();
   state = {
@@ -96,6 +105,7 @@ export default class PickerScreen extends Component {
     dialogPickerValue: 'java',
     customModalValues: [],
     filter: undefined,
+    statOption: [],
     scheme: undefined,
     contact: 0
   };
@@ -122,6 +132,15 @@ export default class PickerScreen extends Component {
     );
   };
 
+  onTopElementPress = (allOptionsSelected: boolean) => {
+    if (allOptionsSelected) {
+      this.setState({statOption: []});
+    } else {
+      const allValues = statusOptions.map(option => option.value);
+      this.setState({statOption: allValues});
+    }
+  };
+
   render() {
     return (
       <ScrollView keyboardShouldPersistTaps="always">
@@ -195,7 +214,32 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             items={dialogOptions}
           />
-
+
+          <Text text70 $textDefault>
+            Custom Top Element:
+          </Text>
+          <Picker
+            placeholder="Status"
+            floatingPlaceholder
+            value={this.state.statOption}
+            onChange={items => this.setState({statOption: items})}
+            topBarProps={{title: 'Status'}}
+            mode={Picker.modes.MULTI}
+            items={statusOptions}
+            renderCustomTopElement={value => {
+              const allOptionsSelected = Array.isArray(value) && value.length === statusOptions.length;
+              return (
+                <View margin-s3>
+                  <Button
+                    label={allOptionsSelected ? 'Unselect All' : 'Select All'}
+                    onPress={() => this.onTopElementPress(allOptionsSelected)}
+                    size="small"
+                  />
+                </View>
+              );
+            }}
+          />
+
           <Text marginB-10 text70 $textDefault>
             Custom Picker:
           </Text>

demo/src/screens/componentScreens/PieChartScreen.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import {ScrollView} from 'react-native';
+import {View, PieChart, Card, Text, Badge, PieChartSegmentProps, Colors} from 'react-native-ui-lib';
+
+const SEGMENTS: PieChartSegmentProps[] = [
+  {
+    percentage: 40,
+    color: Colors.blue30
+  },
+  {
+    percentage: 30,
+    color: Colors.red30
+  },
+  {
+    percentage: 20,
+    color: Colors.green30
+  },
+  {
+    percentage: 10,
+    color: Colors.purple30
+  }
+];
+
+const MONOCHROME_SEGMENTS: PieChartSegmentProps[] = [
+  {
+    percentage: 40,
+    color: Colors.blue70
+  },
+  {
+    percentage: 30,
+    color: Colors.blue50
+  },
+  {
+    percentage: 20,
+    color: Colors.blue30
+  },
+  {
+    percentage: 10,
+    color: Colors.blue10
+  }
+];
+
+const NOT_FULL_PIECHART: PieChartSegmentProps[] = [
+  {
+    percentage: 30,
+    color: Colors.blue30
+  },
+  {
+    percentage: 40,
+    color: Colors.red30
+  }
+];
+
+const PieChartScreen = () => {
+  const renderSegmentLabel = (segment: PieChartSegmentProps, text: string) => {
+    const {percentage, color} = segment;
+    return (
+      <View row gap-s1 marginB-s1 key={text}>
+        <Badge size={10} containerStyle={{justifyContent: 'center'}} backgroundColor={color}/>
+        <View>
+          <Text>{text}</Text>
+          <Text marginL-s1>{percentage}%</Text>
+        </View>
+      </View>
+    );
+  };
+
+  const renderPieChartCard = (segments: PieChartSegmentProps[]) => {
+    return (
+      <Card row spread paddingL-s2 paddingR-s10 paddingV-s2>
+        <View centerV>
+          <PieChart segments={segments} diameter={150}/>
+        </View>
+        <View height={'100%'} gap-s1>
+          {segments.map((segment, index) => renderSegmentLabel(segment, `Value ${index + 1}`))}
+        </View>
+      </Card>
+    );
+  };
+
+  return (
+    <ScrollView>
+      <View padding-page gap-s2>
+        <Text text50L marginB-s2>
+          PieChart
+        </Text>
+        {renderPieChartCard(SEGMENTS)}
+        <Text text50L marginV-s2>
+          Monochrome colors
+        </Text>
+        {renderPieChartCard(MONOCHROME_SEGMENTS)}
+        <Text text50L marginV-s2>
+          Not Full PieChart
+        </Text>
+        {renderPieChartCard(NOT_FULL_PIECHART)}
+      </View>
+    </ScrollView>
+  );
+};
+
+export default PieChartScreen;

demo/src/screens/componentScreens/index.js

@@ -1,5 +1,6 @@
 export function registerScreens(registrar) {
   registrar('unicorn.components.ActionSheetScreen', () => require('./ActionSheetScreen').default);
+  registrar('unicorn.components.PieChartScreen', () => require('./PieChartScreen').default);
   registrar('unicorn.components.ActionBarScreen', () => require('./ActionBarScreen').default);
   registrar('unicorn.components.AvatarsScreen', () => require('./AvatarsScreen').default);
   registrar('unicorn.components.AnimatedImageScreen', () => require('./AnimatedImageScreen').default);

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index",
@@ -10,14 +10,14 @@
   "author": "Ethan Sharabi <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "lodash": "^4.0.0",
+    "lodash": "^4.17.21",
     "prop-types": "^15.5.10"
   },
   "devDependencies": {
     "shell-utils": "^1.0.10"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-native": "^0.51.0"
+    "react": ">=17.0.1",
+    "react-native": ">=0.64.1"
   }
 }

src/components/button/types.ts

@@ -10,6 +10,7 @@ import {
 import {TouchableOpacityProps} from '../touchableOpacity';
 import {TextProps} from '../text';
 import {ImageProps} from '../image';
+import type {IconProps} from '../icon';
 
 export enum ButtonSize {
   xSmall = 'xSmall',
@@ -53,7 +54,7 @@ export type ButtonProps = TouchableOpacityProps &
     /**
      * Other image props that will be passed to the image
      */
-    iconProps?: Partial<ImageProps>;
+    iconProps?: Partial<IconProps>;
     /**
      * Should the icon be right to the label
      */

src/components/picker/PickerItemsList.tsx

@@ -34,7 +34,8 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     mode,
     testID,
     showLoader,
-    customLoaderElement
+    customLoaderElement,
+    renderCustomTopElement
   } = props;
   const context = useContext(PickerContext);
 
@@ -167,6 +168,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     ) : (
       <>
         {renderSearchInput()}
+        {renderCustomTopElement?.(context.value)}
         {renderList()}
       </>
     );

src/components/picker/api/picker.api.json

@@ -47,6 +47,11 @@
       "type": "(value, {{...props, isSelected}}, itemLabel) => void",
       "description": "Render custom picker item"
     },
+    {
+      "name": "renderCustomTopElement",
+      "type": "(value?: PickerValue) => React.ReactElement",
+      "description": "Render custom top element"
+    },
     {
       "name": "renderCustomModal",
       "type": "({visible, children, toggleModal}) => void)",

src/components/picker/index.tsx

@@ -78,6 +78,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     items: propItems,
     showLoader,
     customLoaderElement,
+    renderCustomTopElement,
     ...others
   } = themeProps;
   const {preset, placeholder, style, trailingAccessory, label: propsLabel} = others;
@@ -245,6 +246,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         useSafeArea={useSafeArea}
         showLoader={showLoader}
         customLoaderElement={customLoaderElement}
+        renderCustomTopElement={renderCustomTopElement}
       >
         {filteredItems}
       </PickerItemsList>

src/components/picker/types.ts

@@ -206,6 +206,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
       itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean},
       label?: string
     ) => React.ReactElement;
+    /**
+     * Render custom top element
+     */
+    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -315,6 +319,7 @@ export type PickerItemsListProps = Pick<
   | 'useSafeArea'
   | 'showLoader'
   | 'customLoaderElement'
+  | 'renderCustomTopElement'
   | 'showSearch'
   | 'searchStyle'
   | 'searchPlaceholder'

src/components/pieChart/PieChart.api.json

@@ -0,0 +1,15 @@
+{
+  "name": "PieChart",
+  "category": "charts",
+  "description": "Pie Chart",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PieChartScreen.tsx",
+  "props": [
+    {"name": "segments", "type": "PieChartSegmentProps[]", "description": "Pie chart segments array"},
+    {"name": "diameter", "type": "number", "description": "Pie chart diameter"},
+    {"name": "dividerWidth", "type": "number", "description": "The width of the divider between the segments"},
+    {"name": "dividerColor", "type": "ColorValue", "description": "The color of the divider between the segments"}
+  ],
+  "snippet": [
+    "<PieChart segments={[{percentage: 50, color: Colors.blue30}, {percentage: 30, color: Colors.red30}, {percentage: 20, color: Colors.green30}]} diameter={144}/>"
+  ]
+}