@hero-design/rn 7.7.0 → 7.8.0

package/playground/src/ContentNavigator.tsx

@@ -1,58 +0,0 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { ContentNavigator, Typography, useTheme } from '@hero-design/rn';
-
-function addDays(date: Date, numDays: number) {
-  const milliseconds = numDays * 24 * 60 * 60 * 1000;
-  return new Date(date.valueOf() + milliseconds);
-}
-
-function getMondayAndSunday(date: Date) {
-  const daysFromMonday = (date.getDay() || 7) - 1;
-  const monday = addDays(date, -daysFromMonday);
-  const sunday = addDays(monday, 6);
-
-  return { monday, sunday };
-}
-
-function formatDate(date: Date) {
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  });
-}
-
-const ContentNavigatorPlayground = (): JSX.Element => {
-  const theme = useTheme();
-  const [age, setAge] = useState(20);
-  const [date, setDate] = useState(new Date());
-  const { monday, sunday } = getMondayAndSunday(date);
-
-  return (
-    <View style={{ margin: theme.space.medium }}>
-      <View style={{ flexDirection: 'row' }}>
-        <Typography.Text style={{ paddingRight: theme.space.medium }}>
-          Age (18 to 25):
-        </Typography.Text>
-        <ContentNavigator
-          value={age}
-          onPreviousPress={() => setAge(age - 1)}
-          onNextPress={() => setAge(age + 1)}
-          previousDisabled={age <= 18}
-          nextDisabled={age >= 25}
-        />
-      </View>
-      <Typography.Text>Week calendar:</Typography.Text>
-      <View style={{ flexDirection: 'row' }}>
-        <ContentNavigator
-          value={`${formatDate(monday)} - ${formatDate(sunday)}`}
-          onPreviousPress={() => setDate(addDays(date, -7))}
-          onNextPress={() => setDate(addDays(date, 7))}
-        />
-      </View>
-    </View>
-  );
-};
-
-export default ContentNavigatorPlayground;

package/playground/src/Divider.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { Divider } from '@hero-design/rn';
-
-const DividerPlayground = () => (
-  <View>
-    <Divider marginHorizontal="xlarge" marginVertical="medium" />
-    <Divider marginHorizontal="large" marginVertical="large" />
-    <Divider marginHorizontal="medium" marginVertical="xlarge" />
-  </View>
-);
-
-export default DividerPlayground;

package/playground/src/Drawer.tsx

@@ -1,32 +0,0 @@
-import { Button, SafeAreaView, Text, View } from 'react-native';
-import React, { useState } from 'react';
-
-import { Drawer } from '@hero-design/rn';
-
-const DrawerContent = () => (
-  <View style={{ padding: 30 }}>
-    <Text>Drawer Content</Text>
-    <Text>Drawer Content</Text>
-    <Text>Drawer Content</Text>
-    <Text>Drawer Content</Text>
-    <Text>Drawer Content</Text>
-    <Text>Drawer Content</Text>
-  </View>
-);
-
-const DrawerPlayground = () => {
-  const [visible, setVisibility] = useState(false);
-
-  return (
-    <SafeAreaView
-      style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
-    >
-      <Drawer visible={visible} onDismiss={() => setVisibility(false)}>
-        <DrawerContent />
-      </Drawer>
-      <Button title="Toggle Drawer" onPress={() => setVisibility(!visible)} />
-    </SafeAreaView>
-  );
-};
-
-export default DrawerPlayground;

package/playground/src/FAB.tsx

@@ -1,66 +0,0 @@
-import React, { useState } from 'react';
-import { TouchableHighlight } from 'react-native';
-/* eslint-disable import/no-extraneous-dependencies */
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
-import { FAB, Typography, useTheme } from '@hero-design/rn';
-
-const FABPlayground = (): JSX.Element => {
-  const [active, setActive] = useState(false);
-  const theme = useTheme();
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={{ flex: 1 }}>
-        <TouchableHighlight
-          onPress={() => {
-            alert('touched');
-          }}
-        >
-          <Typography.Text
-            style={{
-              backgroundColor: theme.colors.dangerBackground,
-              margin: theme.space.xxxlarge,
-            }}
-            fontSize="xlarge"
-            fontWeight="semi-bold"
-          >
-            Content View should be blured when menu list is shown
-          </Typography.Text>
-        </TouchableHighlight>
-        <FAB.ActionGroup
-          style={{
-            marginBottom: theme.space.large,
-          }}
-          items={[
-            { icon: 'speaker', title: 'Give shout out' },
-            { icon: 'target', title: 'Goal' },
-            { icon: 'plane', title: 'Leave request' },
-            { icon: 'health-bag', title: 'Safety incident' },
-            { icon: 'clock', title: 'Timesheets' },
-          ]}
-          headerTitle="What would you like to create?"
-          onPress={() => {
-            setActive(!active);
-          }}
-          active={active}
-        />
-
-        <FAB
-          style={{
-            position: 'absolute',
-            bottom: 0,
-            marginLeft: theme.space.large,
-            marginBottom: theme.space.large,
-          }}
-          onPress={() => {
-            alert('pressed shout out');
-          }}
-          title="Shout out"
-          icon="pencil"
-          animated
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-export default FABPlayground;

package/playground/src/Icon.tsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import { ScrollView, View } from 'react-native';
-import { Typography, Icon, useTheme } from '@hero-design/rn';
-
-const IconPlayground = () => {
-  const theme = useTheme();
-
-  return (
-    <ScrollView
-      contentContainerStyle={{
-        padding: theme.space.medium,
-      }}
-    >
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Bottom nav - active
-      </Typography.Text>
-      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
-        <Icon icon="home" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="speaker" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="bell" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="user" />
-      </View>
-
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Bottom nav - inactive
-      </Typography.Text>
-      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
-        <Icon icon="home-outlined" style={{ marginEnd: theme.space.medium }} />
-        <Icon
-          icon="speaker-outlined"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon icon="bell-outlined" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="user-outlined" />
-      </View>
-
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Dashboard - widgets
-      </Typography.Text>
-      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
-        <Icon icon="coin" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="calendar-clock" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="file-certified" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="file-secured" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="file-verified" />
-      </View>
-
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Top nav
-      </Typography.Text>
-      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
-        <Icon icon="suitcase" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="credit-card" />
-      </View>
-
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        FAB icons
-      </Typography.Text>
-      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
-        <Icon icon="plane" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="reply" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="health-bag" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="clock" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="target" style={{ marginEnd: theme.space.medium }} />
-        <Icon icon="speaker" />
-      </View>
-
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Icon with colors
-      </Typography.Text>
-      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
-        <Icon
-          icon="plane"
-          intent="text"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon
-          icon="reply"
-          intent="primary"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon
-          icon="health-bag"
-          intent="info"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon
-          icon="clock"
-          intent="danger"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon
-          icon="target"
-          intent="success"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon
-          icon="speaker"
-          intent="warning"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon icon="arrow-right" intent="disabled-text" />
-      </View>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Icon with different sizes
-      </Typography.Text>
-      <View
-        style={{
-          flexDirection: 'row',
-          marginBottom: theme.space.large,
-          alignItems: 'flex-end',
-        }}
-      >
-        <Icon
-          icon="activate"
-          intent="text"
-          size="xsmall"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon
-          icon="add-person"
-          intent="primary"
-          size="small"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon
-          icon="adjustment"
-          intent="info"
-          size="medium"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon
-          icon="alignment"
-          intent="danger"
-          size="large"
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Icon icon="bank" intent="success" size="xlarge" />
-      </View>
-    </ScrollView>
-  );
-};
-
-export default IconPlayground;

package/playground/src/IconButton.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { Button, Typography, useTheme } from '@hero-design/rn';
-
-const IconButtonPlayground = (): JSX.Element => {
-  const theme = useTheme();
-  return (
-    <View style={{ padding: theme.space.small }}>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Different Intents and Sizes from Icon
-      </Typography.Text>
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          marginBottom: theme.space.large,
-        }}
-      >
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="text"
-          size="xsmall"
-          onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="primary"
-          size="xsmall"
-          onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="success"
-          size="small"
-          onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="info"
-          size="medium"
-          onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="warning"
-          size="large"
-          onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="danger"
-          size="xlarge"
-          onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
-        />
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="disabled-text"
-          size="xlarge"
-          onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
-        />
-      </View>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Disabled state
-      </Typography.Text>
-      <Button.Icon icon="circle-add-outlined" disabled onPress={() => {}} />
-    </View>
-  );
-};
-
-export default IconButtonPlayground;

package/playground/src/MultipleThemes.tsx

@@ -1,34 +0,0 @@
-import { ThemeProvider, theme, Button } from '@hero-design/rn';
-
-import React from 'react';
-import { Alert } from 'react-native';
-
-const CustomizedTheme = {
-  ...theme,
-  __hd__: {
-    ...theme.__hd__,
-    button: {
-      ...theme.__hd__.button,
-      colors: {
-        ...theme.__hd__.button.colors,
-        primary: '#000000',
-      },
-    },
-  },
-};
-const MutipleThemesPlayground = () => (
-  <>
-    <Button
-      text="Button with Origin theme"
-      onPress={() => Alert.alert('Button')}
-    />
-    <ThemeProvider theme={CustomizedTheme}>
-      <Button
-        text="Button with Customized theme"
-        onPress={() => Alert.alert('Button')}
-      />
-    </ThemeProvider>
-  </>
-);
-
-export default MutipleThemesPlayground;

package/playground/src/Progress.tsx

@@ -1,95 +0,0 @@
-import React, { useState } from 'react';
-import { View, Button } from 'react-native';
-import { Progress, Typography, useTheme } from '@hero-design/rn';
-
-const ProgressPlayground = () => {
-  const [progress, setProgress] = useState(0);
-  const theme = useTheme();
-
-  return (
-    <View style={{ flex: 1 }}>
-      <View
-        style={{ alignItems: 'center', paddingVertical: theme.space.xlarge }}
-      >
-        <Typography.Text
-          fontSize="large"
-          style={{ marginBottom: theme.space.small }}
-        >
-          Progress Circle
-        </Typography.Text>
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}
-        >
-          <Progress.Circle value={progress} />
-          <Progress.Circle value={progress} intent="success" />
-          <Progress.Circle value={progress} intent="warning" />
-        </View>
-
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}
-        >
-          <Progress.Circle value={progress} intent="danger" />
-          <Progress.Circle value={progress} intent="info" />
-        </View>
-      </View>
-      <View
-        style={{ alignItems: 'center', paddingVertical: theme.space.small }}
-      >
-        <Typography.Text
-          fontSize="large"
-          style={{ marginBottom: theme.space.small }}
-        >
-          Progress Bar
-        </Typography.Text>
-        <Progress.Bar
-          value={progress}
-          style={{ marginBottom: theme.space.small }}
-        />
-        <Progress.Bar
-          value={progress}
-          intent="success"
-          style={{ marginBottom: theme.space.small }}
-        />
-        <Progress.Bar
-          value={progress}
-          intent="warning"
-          style={{ marginBottom: theme.space.small }}
-        />
-        <Progress.Bar
-          value={progress}
-          intent="danger"
-          style={{ marginBottom: theme.space.small }}
-        />
-        <Progress.Bar
-          value={progress}
-          intent="info"
-          style={{ marginBottom: theme.space.small }}
-        />
-      </View>
-      <View style={{ alignItems: 'center', padding: theme.space.xlarge }}>
-        <View
-          style={{
-            flexDirection: 'row',
-            width: '80%',
-            justifyContent: 'space-around',
-          }}
-        >
-          <Button
-            title="Random Value"
-            onPress={() => setProgress(Math.floor(Math.random() * 100))}
-          />
-          <Button title="Min" onPress={() => setProgress(0)} />
-          <Button title="Max" onPress={() => setProgress(100)} />
-        </View>
-      </View>
-    </View>
-  );
-};
-
-export default ProgressPlayground;

package/playground/src/Radio.tsx

@@ -1,25 +0,0 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { Radio, Typography, useTheme } from '@hero-design/rn';
-
-const RadioPlayground = () => {
-  const theme = useTheme();
-  const [value, setValue] = useState('everything');
-
-  return (
-    <View style={{ padding: theme.space.medium }}>
-      <Typography.Text fontSize="xlarge">Radio.Group</Typography.Text>
-      <Radio.Group
-        options={[
-          { text: 'Everything', value: 'everything' },
-          { text: 'Direct mentions only', value: 'direct_mentions' },
-          { text: 'Nothing', value: 'nothing' },
-        ]}
-        value={value}
-        onPress={setValue}
-      />
-    </View>
-  );
-};
-
-export default RadioPlayground;

package/playground/src/SectionHeading.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { SectionList, Text, TouchableOpacity, View } from 'react-native';
-
-import { SectionHeading, Typography, useTheme } from '@hero-design/rn';
-
-const SectionHeadingPlayground = () => {
-  const theme = useTheme();
-
-  const sampleSections = [
-    {
-      title: 'Main dishes',
-      data: ['Pizza', 'Burger', 'Risotto'],
-      cta: () => {},
-    },
-    {
-      title: 'Sides',
-      data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
-      haveIcon: true,
-    },
-  ];
-
-  return (
-    <View
-      style={{
-        margin: theme.space.medium,
-      }}
-    >
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Default section heading
-      </Typography.Text>
-      <SectionList
-        sections={sampleSections}
-        keyExtractor={(item, index) => item + index}
-        renderItem={({ item }) => (
-          <View
-            style={{
-              borderRadius: theme.radii.base,
-              borderWidth: theme.borderWidths.base,
-              borderColor: theme.colors.outline,
-              paddingVertical: theme.space.small,
-              paddingHorizontal: theme.space.medium,
-              marginBottom: theme.space.medium,
-            }}
-          >
-            <Text>{item}</Text>
-          </View>
-        )}
-        renderSectionHeader={({ section: { title, cta, haveIcon } }) => (
-          <SectionHeading
-            text={title}
-            icon={haveIcon ? 'document' : undefined}
-            rightChildren={
-              cta && (
-                <TouchableOpacity onPress={cta}>
-                  <Typography.Text intent="primary" fontWeight="semi-bold">
-                    Edit
-                  </Typography.Text>
-                </TouchableOpacity>
-              )
-            }
-          />
-        )}
-      />
-    </View>
-  );
-};
-
-export default SectionHeadingPlayground;

package/playground/src/Select.tsx

@@ -1,32 +0,0 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { Select, useTheme } from '@hero-design/rn';
-
-const SelectPlayground = (): JSX.Element => {
-  const theme = useTheme();
-  const options = [
-    { text: 'Monday', value: 'mon' },
-    { text: 'Tuesday', value: 'tue' },
-    { text: 'Wednesday', value: 'wed' },
-    { text: 'Thursday', value: 'thu' },
-    { text: 'Friday', value: 'fri' },
-    { text: 'Saturday', value: 'sat' },
-    { text: 'Sunday', value: 'sun' },
-  ];
-  const [value, setValue] = useState(['mon', 'tue']);
-
-  return (
-    <View style={{ margin: theme.space.medium }}>
-      <Select.Multi
-        label="Allow notifications"
-        footerLabel="Confirm"
-        options={options}
-        value={value}
-        onPress={setValue}
-        keyExtractor={opt => opt.value}
-      />
-    </View>
-  );
-};
-
-export default SelectPlayground;

package/playground/src/Spinner.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { Spinner, useTheme } from '@hero-design/rn';
-
-const SpinnerPlayground = (): JSX.Element => {
-  const theme = useTheme();
-  return (
-    <View
-      style={{
-        marginVertical: theme.space.medium,
-        marginHorizontal: theme.space.medium,
-      }}
-    >
-      <Spinner />
-    </View>
-  );
-};
-
-export default SpinnerPlayground;