react-native-boxes 1.2.11 → 1.2.13

package/src/demo.tsx

@@ -1,14 +1,14 @@
 import { useContext, useEffect, useReducer, useState } from 'react';
 import * as React from 'react'
-import { LayoutAnimation, SafeAreaView } from 'react-native';
-import { BottomNavBar, ButtonView, Caption, Center, CompositeTextInputView, Expand, HBox, LoadingButton, PressableView, RightIconButton, SimpleToolbar, Subtitle, TextInputView, TextView, Theme, ThemeContext, Title, VBox } from '.';
+import { Alert, LayoutAnimation, SafeAreaView, Switch } from 'react-native';
+import { BottomNavBar, ButtonView, Caption, Center, CompositeTextInputView, SimpleDatatlistViewItem, Expand, HBox, LoadingButton, PressableView, RightIconButton, SimpleToolbar, Subtitle, TextInputView, TextView, Theme, ThemeContext, Title, VBox, SimpleDatalistView } from '.';
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { AlertMessage } from './Message';
-import { BottomSheet } from './Modal';
+import { BottomSheet, DropDownView } from './Modal';
 import { Avatar, Icon } from './Image';
 import { ReactWrapper } from './utils';
-import KeyboardAvoidingScrollView from './Box';
+import KeyboardAvoidingScrollView, { Box } from './Box';
 import { DarkColors, LightColors } from './Styles';
 
 export interface DemoScreenProps {
@@ -42,6 +42,32 @@ export function DemoScreen({ navigation }: DemoScreenProps) {
   }, [selectedTheme])
   const [, forceUpdate] = useReducer(x => x + 1, 0);
 
+
+
+  const dataList = [
+    {
+      country: 'India',
+      captialSlogan: 'Ye delhi hai mere yaar!',
+      about: 'India is a promise land in the heart of asia. Soon there will be akhand bharat!',
+    },
+    {
+      country: 'Japan',
+      captialSlogan: 'Land of the Rising Sun',
+      about: 'Japan is an island nation in East Asia. It is known for its advanced technology, rich history, and unique culture.',
+    },
+    {
+      country: 'Italy',
+      captialSlogan: 'The Boot-Shaped Beauty',
+      about: 'Italy is a country located in Southern Europe. It is known for its historical landmarks, delicious food, and beautiful scenery.',
+    },
+    {
+      country: 'Brazil',
+      captialSlogan: 'Land of Samba and Carnival',
+      about: 'Brazil is the largest country in South America. It is known for its vibrant culture, stunning beaches, and diverse rainforest.',
+    },
+  ];
+  const [selCountry, setSelCountry] = useState(dataList[0].country)
+
   return (
     <SafeAreaProvider>
       <VBox
@@ -139,6 +165,76 @@ export function DemoScreen({ navigation }: DemoScreenProps) {
               }}
               iconText='SN' />
           </Center>
+
+          <Expand title='Datalist' initialExpand={false}>
+            <SimpleDatalistView
+              items={dataList}
+              itemAdapter={(item) => {
+                const [isEnabled, setisEnabled] = useState(true)
+                return {
+                  onPress: () => {
+                    console.log('presssss')
+                  },
+                  action: (
+                    <PressableView
+                      onPress={(e) => {
+                        e.stopPropagation()
+                      }}>
+                      <Switch
+                        trackColor={{ false: '#767577', true: '#81b0ff' }}
+                        thumbColor={'#f4f3f4'}
+                        ios_backgroundColor="#3e3e3e"
+                        value={isEnabled}
+                        onValueChange={(enab) => {
+                          setisEnabled(enab)
+                        }}
+                      />
+                    </PressableView>
+
+                  ),
+                  icon: (
+                    <Avatar iconText={item.country.substr(0, 2).toUpperCase()} />
+                  ),
+                  flexRatio: [2, 7, 1],
+                  title: item.country,
+                  subtitle: item.captialSlogan,
+                  body: item.about
+                }
+              }}
+            />
+            <Box style={{
+              height: 0.1,
+              width: '100%',
+              margin: theme.dimens.space.md,
+              backgroundColor: theme.colors.caption
+            }} />
+            <SimpleDatatlistViewItem
+              icon={(
+                <Avatar iconText='GH' />
+              )}
+              flexRatio={[2.5, 6.5, 1]}
+              title='Go home'
+              subtitle="Go big or Go home !"
+              body="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available."
+              action={(<Icon name="arrow-right" onPress={() => {
+                console.log('pressed')
+              }} />)}
+            />
+
+            <SimpleDatatlistViewItem
+              icon="home"
+              title='Go home'
+              subtitle="In publishing and graphic design"
+              action={(<Icon name="arrow-right" />)} />
+
+            <SimpleDatatlistViewItem
+              icon="home"
+              title='Go home'
+              subtitle="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available."
+              action={(<Icon name="arrow-right" />)}
+            />
+          </Expand>
+
           <Expand title='Message Alert' initialExpand={false}
             style={{
               backgroundColor: theme.colors.forground
@@ -156,6 +252,39 @@ export function DemoScreen({ navigation }: DemoScreenProps) {
             </VBox>
 
           </Expand>
+          <Expand title='Dropdowns'
+            initialExpand={false}
+          >
+            <DropDownView
+              title={"Select Country"}
+              forceDialogSelectOnWeb={true}
+              onSelect={(id) => {
+                setSelCountry(id)
+              }}
+              selectedId={selCountry}
+              options={dataList.map((d) => {
+                return {
+                  id: d.country,
+                  value: d.captialSlogan,
+                  title: d.captialSlogan
+                }
+              })} />
+            <DropDownView
+              displayType='button'
+              title={"Select Country"}
+              forceDialogSelectOnWeb={true}
+              onSelect={(id) => {
+                setSelCountry(id)
+              }}
+              selectedId={selCountry}
+              options={dataList.map((d) => {
+                return {
+                  id: d.country,
+                  value: d.captialSlogan,
+                  title: d.captialSlogan
+                }
+              })} />
+          </Expand>
           <Expand
             style={{
               padding: 0,

package/src/index.d.ts

@@ -10,3 +10,4 @@ export * from './Styles';
 export * from './demo';
 export * from './ThemeContext';
 export * from './I18n';
+export * from './List';

package/src/index.js

@@ -26,4 +26,5 @@ __exportStar(require("./Styles"), exports);
 __exportStar(require("./demo"), exports);
 __exportStar(require("./ThemeContext"), exports);
 __exportStar(require("./I18n"), exports);
+__exportStar(require("./List"), exports);
 //# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAuB;AACvB,wCAAsB;AACtB,2CAAyB;AACzB,0CAAwB;AACxB,0CAAwB;AACxB,0CAAwB;AACxB,wCAAsB;AACtB,0CAAwB;AACxB,2CAAyB;AACzB,yCAAuB;AACvB,iDAA+B;AAC/B,yCAAsB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAuB;AACvB,wCAAsB;AACtB,2CAAyB;AACzB,0CAAwB;AACxB,0CAAwB;AACxB,0CAAwB;AACxB,wCAAsB;AACtB,0CAAwB;AACxB,2CAAyB;AACzB,yCAAuB;AACvB,iDAA+B;AAC/B,yCAAsB;AACtB,yCAAsB"}

package/src/index.tsx

@@ -9,4 +9,5 @@ export * from './utils';
 export * from './Styles';
 export * from './demo';
 export * from './ThemeContext';
-export * from './I18n'
+export * from './I18n'
+export * from './List'