@holper/react-native-holper-storybook 0.6.101 → 0.7.0

package/lib/components/Footer/index.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, TouchableOpacity } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import { Colors } from '../../configs/constants';
-import Text from '../Text';
-import style from './style';
-
-const Footer = ({ inverted, tabs }) => {
-  const renderTab = () =>
-    tabs.map((tab, index) => (
-      <TouchableOpacity
-        key={`tab-${index}`}
-        style={style.tab}
-        onPress={tab.onPress}
-      >
-        <Ionicons
-          name={tab.icon}
-          size={20}
-          color={inverted ? Colors.white : Colors.darkblue}
-        />
-        <Text color={inverted ? 'white' : 'dark'} size='small'>
-          {tab.text}
-        </Text>
-        {tab.badge && tab.badge > 0 && (
-          <View style={style.badge}>
-            <Text color='white' size='tiny' weight='semiBold' align='center'>
-              {tab.badge > 9 ? '+9' : tab.badge}
-            </Text>
-          </View>
-        )}
-      </TouchableOpacity>
-    ));
-
-  return (
-    <View
-      style={[style.footerContainer, style[inverted ? 'inverted' : 'default']]}
-    >
-      {renderTab()}
-    </View>
-  );
-};
-
-Footer.defaultProps = {
-  inverted: false,
-  tabs: [],
-};
-
-Footer.propTypes = {
-  inverted: PropTypes.bool,
-  tabs: PropTypes.arrayOf(
-    PropTypes.shape({
-      onPress: PropTypes.func,
-      text: PropTypes.string,
-      icon: PropTypes.string,
-      badge: PropTypes.number,
-    })
-  ),
-};
-
-export default Footer;

package/lib/components/Header/index.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, TouchableOpacity, Image } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import { Colors } from '../../configs/constants';
-import style from './style';
-
-const Header = ({ inverted, logo, right, onMenuPress }) => (
-  <View
-    style={[style.headerContainer, style[inverted ? 'inverted' : 'default']]}
-  >
-    <TouchableOpacity onPress={onMenuPress}>
-      <Ionicons
-        name='menu-outline'
-        size={30}
-        color={inverted ? Colors.white : Colors.darkblue}
-      />
-    </TouchableOpacity>
-    <View style={style.imageContainer}>
-      <Image
-        style={style.imageResponsive}
-        source={logo}
-        progressiveRenderingEnabled
-        resizeMode='contain'
-      />
-    </View>
-    {right}
-  </View>
-);
-
-Header.defaultProps = {
-  inverted: false,
-  logo: null,
-  right: null,
-  onMenuPress: () => {},
-};
-
-Header.propTypes = {
-  inverted: PropTypes.bool,
-  logo: PropTypes.any.isRequired,
-  right: PropTypes.node,
-  onMenuPress: PropTypes.func,
-};
-
-export default Header;

package/lib/components/ImageResponsive/index.js

@@ -1,39 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Image, View } from 'react-native';
-import style from './style';
-
-const ImageResponsive = ({ source, style: customStyle, avatar, ...props }) => {
-  const [width, setWidth] = useState(100);
-
-  return (
-    <View
-      style={[
-        customStyle,
-        avatar ? { borderRadius: width / 2, overflow: 'hidden' } : {},
-      ]}
-    >
-      <Image
-        style={style.responsiveImage}
-        source={source}
-        resizeMode={avatar ? 'cover' : 'contain'}
-        onLayout={({ nativeEvent }) => setWidth(nativeEvent.layout.width)}
-        {...props}
-      />
-    </View>
-  );
-};
-
-ImageResponsive.defaultProps = {
-  style: {},
-  source: null,
-  avatar: false,
-};
-
-ImageResponsive.propTypes = {
-  style: PropTypes.any,
-  source: PropTypes.any.isRequired,
-  avatar: PropTypes.bool,
-};
-
-export default ImageResponsive;

package/lib/components/ImageResponsive/style.js

@@ -1,7 +0,0 @@
-export default {
-  responsiveImage: {
-    height: undefined,
-    width: undefined,
-    flex: 1
-  }
-};

package/lib/components/ImageViewer/index.js

@@ -1,62 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Modal,
-  TouchableOpacity,
-  ActivityIndicator,
-  Image,
-} from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import ImageResponsive from '../ImageResponsive';
-import { Colors } from '../../configs/constants';
-import style from './style';
-import PropTypes from 'prop-types';
-
-const ImageViewer = ({ source, style: imageStyle, ...props }) => {
-  const [loading, setLoading] = useState(true);
-  const [visible, setVisible] = useState(false);
-
-  return (
-    <>
-      <TouchableOpacity onPress={() => setVisible(true)}>
-        <ImageResponsive source={source} style={imageStyle} {...props} />
-      </TouchableOpacity>
-
-      <Modal
-        animationType='slide'
-        transparent={true}
-        visible={visible}
-        onRequestClose={() => {}}
-      >
-        <View style={style.container}>
-          <TouchableOpacity
-            onPress={() => setVisible(false)}
-            style={style.closeIcon}
-          >
-            <Ionicons name='close-outline' size={24} color={Colors.darkblue} />
-          </TouchableOpacity>
-
-          <ImageResponsive
-            source={source}
-            style={style.body}
-            onLoadEnd={() => setLoading(false)}
-          />
-
-          {loading && <ActivityIndicator style={style.activityIndicator} />}
-        </View>
-      </Modal>
-    </>
-  );
-};
-
-ImageViewer.defaultProps = {
-  source: null,
-  style: {},
-};
-
-ImageViewer.propTypes = {
-  source: PropTypes.any.isRequired,
-  style: PropTypes.any,
-};
-
-export default ImageViewer;

package/lib/components/MenuItem/index.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TouchableOpacity, View } from 'react-native';
-import Feather from 'react-native-vector-icons/Feather';
-import Text from '../Text';
-import { Colors } from '../../configs/constants';
-import style from './style';
-
-const MenuItem = ({icon, text, disabled, onPress, last}) => (
-  <TouchableOpacity
-    style={[
-      style.menuItem,
-      last ? style.last : {},
-      disabled ? style.disabled : {}
-    ]}
-    onPress={onPress}
-    disabled={disabled}
-  >
-    <View style={style.left}>
-      {icon}
-      <Text size='large' style={style.text}>{text}</Text>
-    </View>
-
-    <Feather name='chevron-right' size={15} color={Colors.darkblue} style={style.rightIcon} />
-  </TouchableOpacity>
-);
-
-MenuItem.defaultProps = {
-  icon: null,
-  text: '',
-  last: false,
-  disabled: false,
-  onPress: () => {}
-};
-
-MenuItem.propTypes = {
-  icon: PropTypes.node,
-  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  last: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onPress: PropTypes.func
-};
-
-export default MenuItem;

package/lib/components/Notification/index.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TouchableOpacity, View } from 'react-native';
-import Text from '../Text';
-import ImageResponsive from '../ImageResponsive';
-import { Colors } from '../../configs/constants';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import moment from 'moment';
-import style from './style';
-
-const Notification = ({
-  first,
-  active,
-  hideAvatar,
-  avatar,
-  title,
-  description,
-  date = moment().fromNow(),
-  onPress,
-}) => {
-  return (
-    <TouchableOpacity
-      style={[
-        style.container,
-        first ? style.first : {},
-        active ? style.active : {},
-      ]}
-      onPress={onPress}
-    >
-      {!hideAvatar && (
-        <ImageResponsive source={avatar} avatar style={style.avatar} />
-      )}
-      <View style={style.textContainer}>
-        <View style={style.text}>
-          <View style={style.textInner}>
-            <Text weight='semiBold'>{title}</Text>
-            {active && (
-              <Ionicons
-                name='ellipse'
-                color={Colors.green}
-                size={12}
-                style={style.icon}
-              />
-            )}
-          </View>
-          <Text color='light' size='tiny' style={style.time}>
-            {moment(date).fromNow()}
-          </Text>
-        </View>
-        <Text color='light' size='small' ellipsizeMode='tail' numberOfLines={3}>
-          {description}
-        </Text>
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-Notification.defaultProps = {
-  first: false,
-  active: false,
-  hideAvatar: false,
-  avatar: null,
-  title: '',
-  description: '',
-  date: moment().fromNow(),
-  onPress: () => {},
-};
-
-Notification.propTypes = {
-  first: PropTypes.bool,
-  active: PropTypes.bool,
-  hideAvatar: PropTypes.bool,
-  avatar: PropTypes.any,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  date: PropTypes.instanceOf(moment),
-  onPress: PropTypes.func,
-};
-
-export default Notification;

package/lib/components/PreventDoubleClick/index.js

@@ -1,21 +0,0 @@
-import React, { PureComponent } from 'react';
-import { debounce } from 'lodash';
-
-const withPreventDoubleClick = (WrappedComponent) => {
-  class PreventDoubleClick extends PureComponent {
-    debouncedOnPress = () => {
-      this.props.onPress && this.props.onPress();
-    }
-
-    onPress = debounce(this.debouncedOnPress, 300, { leading: true, trailing: false });
-
-    render() {
-      return <WrappedComponent {...this.props} onPress={this.onPress} />;
-    }
-  }
-
-  PreventDoubleClick.displayName = `withPreventDoubleClick(${WrappedComponent.displayName ||WrappedComponent.name})`
-  return PreventDoubleClick;
-}
-
-export default withPreventDoubleClick;

package/lib/components/Select/index.js

@@ -1,89 +0,0 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import PropTypes from 'prop-types';
-import DropDownPicker from 'react-native-dropdown-picker';
-import style, {
-  includesSelect,
-  placeholderStyle,
-  listItemLabelStyle,
-  listItemContainerStyle,
-  selectedItemLabelStyle,
-  textStyle,
-} from './style';
-import { useEffect } from 'react';
-
-const Select = ({
-  value,
-  onValueChange,
-  items = [],
-  variant = 'default',
-  disabled,
-  fitToContainer,
-  placeholder,
-}) => {
-  const [open, setOpen] = useState(false);
-  const [val, setVal] = useState(value);
-
-  useEffect(() => {
-    setVal(value);
-  }, [value]);
-
-  return (
-    <View
-      style={[
-        style.container,
-        disabled ? style.disabled : {},
-        fitToContainer ? style.fit : {},
-      ]}
-    >
-      <DropDownPicker
-        style={includesSelect[variant]}
-        open={open}
-        value={val}
-        items={items}
-        setOpen={setOpen}
-        setValue={setVal}
-        onSelectItem={(selected) => onValueChange(selected.value)}
-        disabled={disabled}
-        placeholder={placeholder}
-        placeholderStyle={placeholderStyle}
-        listItemLabelStyle={listItemLabelStyle}
-        listItemContainerStyle={listItemContainerStyle}
-        selectedItemLabelStyle={selectedItemLabelStyle}
-        listMode='MODAL'
-        textStyle={textStyle}
-        dropDownContainerStyle={{
-          ...includesSelect[variant],
-          height: 'auto',
-        }}
-      />
-    </View>
-  );
-};
-
-Select.defaultProps = {
-  variant: 'default',
-  placeholder: ' ',
-  disabled: false,
-  fitToContainer: false,
-  onValueChange: () => {},
-  value: null,
-  items: [],
-};
-
-Select.propTypes = {
-  variant: PropTypes.oneOf(['default', 'completed', 'error']),
-  placeholder: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  fitToContainer: PropTypes.bool,
-  onValueChange: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    })
-  ),
-};
-
-export default Select;

package/lib/components/Select/style.js

@@ -1,81 +0,0 @@
-import { Dimensions } from 'react-native';
-import { Colors, borderRadius } from '../../configs/constants';
-
-const { width } = Dimensions.get('window');
-
-export default {
-  container: {
-    width: width - 60,
-    position: 'relative',
-  },
-  fit: {
-    width: '100%',
-    position: 'relative',
-  },
-  selectIcon: {
-    marginTop: 20,
-    marginRight: 15,
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-};
-
-const fontStyle = {
-  color: Colors.darkblue,
-  fontFamily: 'poppins_regular',
-};
-
-const basicStyle = {
-  height: 50,
-  width: '100%',
-  borderRadius,
-  borderWidth: 1,
-  paddingHorizontal: 10,
-  backgroundColor: Colors.white,
-  marginVertical: 6,
-  ...fontStyle,
-};
-
-export const includesSelect = {
-  default: {
-    ...basicStyle,
-    borderColor: Colors.midblue,
-  },
-  completed: {
-    ...basicStyle,
-    borderColor: Colors.green,
-  },
-  error: {
-    ...basicStyle,
-    borderColor: Colors.red,
-    color: Colors.red,
-  },
-};
-
-export const placeholderStyle = {
-  fontSize: 16,
-  ...fontStyle,
-  color: Colors.midblue,
-};
-
-export const listItemLabelStyle = {
-  ...fontStyle,
-  fontSize: 18,
-  paddingHorizontal: 20,
-};
-
-export const listItemContainerStyle = {
-  height: 55,
-  borderBottomWidth: 1,
-  borderBottomColor: Colors.gray,
-};
-
-export const selectedItemLabelStyle = {
-  fontFamily: 'poppins_semiBold',
-};
-
-export const textStyle = {
-  ...fontStyle,
-  fontSize: 16,
-};

package/lib/components/Switch/index.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Switch as RNSwitch, Platform } from 'react-native';
-import { Colors } from '../../configs/constants';
-
-const Switch = ({ value, size = 'medium', ...props }) => (
-  <RNSwitch
-    trackColor={{
-      false: Colors.lightblue,
-      true: Colors.lightblue,
-    }}
-    thumbColor={value ? Colors.green : Colors.midblue}
-    ios_backgroundColor={Colors.white}
-    value={value}
-    style={{
-      transform: [
-        {
-          scaleX:
-            size === 'small'
-              ? Platform.OS === 'ios'
-                ? 0.5
-                : 0.7
-              : Platform.OS === 'ios'
-              ? 0.7
-              : 0.9,
-        },
-        {
-          scaleY:
-            size === 'small'
-              ? Platform.OS === 'ios'
-                ? 0.5
-                : 0.7
-              : Platform.OS === 'ios'
-              ? 0.7
-              : 0.9,
-        },
-      ],
-    }}
-    {...props}
-  />
-);
-
-Switch.defaultProps = {
-  onValueChange: () => {},
-  value: false,
-  disabled: false,
-  size: 'medium',
-};
-
-Switch.propTypes = {
-  onValueChange: PropTypes.func,
-  value: PropTypes.bool,
-  disabled: PropTypes.bool,
-  size: PropTypes.oneOf(['medium', 'small']),
-};
-
-export default Switch;

package/lib/components/TakePicture/confirmPictureModal.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, TouchableOpacity, View } from 'react-native';
-import Text from '../Text';
-import ImageResponsive from '../ImageResponsive';
-import style from './style';
-
-export const ConfirmPictureModal = ({
-  avatar,
-  visible,
-  onRepeatPhoto,
-  onUsePhoto,
-  image,
-  repeatPictureText,
-  usePictureText,
-}) => {
-  return (
-    <Modal
-      animationType='slide'
-      transparent={false}
-      visible={visible}
-      onRequestClose={() => {}}
-    >
-      <View style={style.cameraTakenImageContainer}>
-        <ImageResponsive
-          source={{
-            uri: image ? image.uri : null,
-            cache: 'only-if-cached',
-          }}
-          style={avatar ? style.cameraTakenImage : style.cameraContainer}
-        />
-
-        <View style={style.cameraRetakePhoto}>
-          <TouchableOpacity onPress={onRepeatPhoto}>
-            <Text style={style.cameraRetakePhotoText}>{repeatPictureText}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={onUsePhoto}>
-            <Text style={style.cameraRetakePhotoText}>{usePictureText}</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-ConfirmPictureModal.defaultProps = {
-  visible: false,
-  avatar: false,
-  repeatPictureText: ' ',
-  usePictureText: ' ',
-  image: null,
-  onRepeatPhoto: () => {},
-  onUsePhoto: () => {},
-};
-
-ConfirmPictureModal.propTypes = {
-  visible: PropTypes.bool.isRequired,
-  avatar: PropTypes.bool,
-  repeatPictureText: PropTypes.string.isRequired,
-  usePictureText: PropTypes.string.isRequired,
-  image: PropTypes.object,
-  onRepeatPhoto: PropTypes.func.isRequired,
-  onUsePhoto: PropTypes.func.isRequired,
-};