unicorn-demo-app 7.35.1 → 7.36.0

package/package.json

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

package/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;
       },

package/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: [

package/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>

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

package/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);