@widergy/mobile-ui 1.6.0 → 1.8.0

package/lib/components/UTTracker/index.js

@@ -0,0 +1,120 @@
+import React, { Fragment, useState } from 'react';
+import { View } from 'react-native';
+import merge from 'lodash/merge';
+import { number, string } from 'prop-types';
+import Collapsible from 'react-native-collapsible';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import Icon from '../Icon';
+import Touchable from '../Touchable';
+import Label from '../Label';
+import { useTheme } from '../../theming';
+
+import ownStyles, { DETAILS_ICON_CARD_SIZE, DETAILS_ICON_FLAT_SIZE, ownModeStyles } from './styles';
+import Step from './components/Step';
+import Connectors from './components/Connectors';
+import SubStep from './components/SubStep';
+import { DetailsTabPropTypes, ModePropTypes, StepsPropTypes, VariantPropTypes } from './propTypes';
+import { CARD, FLAT, STANDARD } from './constants';
+
+const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title, variant = STANDARD }) => {
+  const theme = useTheme();
+  const themedStyles = merge({}, ownStyles, ownModeStyles[mode], theme.UTTracker, style);
+
+  const [stepperHeight, setStepperHeight] = useState(0);
+  const [lastStepPosition, setLastStepPosition] = useState(0);
+  const [firstStepPosition, setFirstStepPosition] = useState(0);
+
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  const isCompleted = stepNumber => stepNumber < currentStep;
+  const isActive = stepNumber => stepNumber === currentStep;
+
+  return (
+    <View style={themedStyles.outerContainer}>
+      <View style={[themedStyles.container, !detailsTab && ownStyles.roundedBorders]}>
+        {title && (
+          <Touchable
+            disabled={mode !== FLAT}
+            onPress={() => setIsCollapsed(!isCollapsed)}
+            style={themedStyles.titleTouchable}
+          >
+            <View style={themedStyles.titleContainer}>
+              <Label color={themedStyles.titleColor} style={themedStyles.title}>
+                {title}
+              </Label>
+              {detailsTab?.enabled && mode === FLAT && (
+                <Icon
+                  color={themedStyles.detailsIconColor || 'black'}
+                  height={DETAILS_ICON_FLAT_SIZE}
+                  name={isCollapsed ? 'chevron-down' : 'chevron-up'}
+                  size={DETAILS_ICON_FLAT_SIZE}
+                  type="feather"
+                  width={DETAILS_ICON_FLAT_SIZE}
+                />
+              )}
+            </View>
+          </Touchable>
+        )}
+        {steps && (
+          <View onLayout={e => setStepperHeight(e.nativeEvent.layout.height)}>
+            <Connectors
+              style={themedStyles.connectors}
+              {...{ firstStepPosition, lastStepPosition, stepperHeight }}
+            />
+            {steps.map((step, index) => (
+              <Fragment key={step.id}>
+                <Step
+                  first={index === 0}
+                  last={index === steps.length - 1}
+                  style={themedStyles.step}
+                  {...{
+                    isActive,
+                    isCompleted,
+                    setFirstStepPosition,
+                    setLastStepPosition,
+                    step,
+                    variant
+                  }}
+                />
+                <Collapsible collapsed={isCollapsed}>
+                  {step.subSteps &&
+                    step.subSteps.map(subStep => (
+                      <SubStep key={subStep.id} {...subStep} style={themedStyles.subStep} />
+                    ))}
+                </Collapsible>
+              </Fragment>
+            ))}
+          </View>
+        )}
+      </View>
+      {detailsTab?.enabled && mode === CARD && (
+        <Touchable onPress={() => setIsCollapsed(!isCollapsed)} style={themedStyles.detailsTab}>
+          <Fragment>
+            <Label>{detailsTab.title}</Label>
+            <Icon
+              color={themedStyles.detailsIconColor || 'black'}
+              height={DETAILS_ICON_CARD_SIZE}
+              name={isCollapsed ? 'chevron-down' : 'chevron-up'}
+              size={DETAILS_ICON_CARD_SIZE}
+              type="feather"
+              width={DETAILS_ICON_CARD_SIZE}
+            />
+          </Fragment>
+        </Touchable>
+      )}
+    </View>
+  );
+};
+
+UTTracker.propTypes = {
+  currentStep: number,
+  detailsTab: DetailsTabPropTypes,
+  mode: ModePropTypes,
+  steps: StepsPropTypes,
+  style: ViewPropTypes.style,
+  title: string,
+  variant: VariantPropTypes
+};
+
+export default UTTracker;

package/lib/components/UTTracker/propTypes.js

@@ -0,0 +1,19 @@
+import { arrayOf, bool, number, oneOf, shape, string } from 'prop-types';
+
+import { CARD, ERROR, FLAT, STANDARD } from './constants';
+
+export const SubStepsPropTypes = arrayOf(shape({ id: number, subtitle: string, title: string }));
+
+export const StepPropTypes = shape({
+  id: number,
+  subSteps: arrayOf(SubStepsPropTypes),
+  subtitle: string,
+  title: string
+});
+
+export const StepsPropTypes = arrayOf(StepPropTypes);
+
+export const DetailsTabPropTypes = shape({ enabled: bool, title: string });
+
+export const ModePropTypes = oneOf([CARD, FLAT]);
+export const VariantPropTypes = oneOf([STANDARD, ERROR]);

package/lib/components/UTTracker/styles.js

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+
+import { CARD, FLAT } from './constants';
+
+export const OVAL_SIZE = 20;
+export const DETAILS_ICON_CARD_SIZE = 20;
+export const DETAILS_ICON_FLAT_SIZE = 24;
+
+export const ownModeStyles = {
+  [CARD]: {
+    container: {
+      backgroundColor: 'white',
+      elevation: 2,
+      shadowColor: 'black',
+      shadowOffset: {
+        height: 3,
+        width: 0
+      },
+      shadowOpacity: 0.1
+    }
+  },
+  [FLAT]: {
+    container: {
+      backgroundColor: 'transparent'
+    }
+  }
+};
+
+export default StyleSheet.create({
+  container: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    padding: 16
+  },
+  detailsTab: {
+    backgroundColor: 'white',
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    borderColor: 'lightgray',
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  roundedBorders: {
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  titleTouchable: {
+    marginBottom: 24
+  }
+});

package/lib/index.js

@@ -16,6 +16,7 @@ export { default as RadioGroup } from './components/RadioGroup';
 export { default as Input } from './components/Input';
 export { default as ImagePicker } from './components/ImagePicker';
 export { default as FilePicker } from './components/FilePicker';
+export { default as MultipleFilePicker } from './components/MultipleFilePicker';
 export { default as Picker } from './components/Picker';
 export { default as ImageLabel } from './components/ImageLabel';
 export { default as CheckList } from './components/CheckList';
@@ -50,6 +51,7 @@ export { default as UTTextInput } from './components/UTTextInput';
 export { default as UTSelect } from './components/UTSelect';
 export { default as UTStepFeedback } from './components/UTStepFeedback';
 export { default as UTAutocomplete } from './components/UTAutocomplete';
+export { default as UTTracker } from './components/UTTracker';
 export { default as ImageRadio } from './components/ImageRadio';
 // Loading
 export { default as Loading } from './components/Loading';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -43,7 +43,8 @@
     "pdf-lib": "^1.17.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.1",
-    "react-native-pager-view": "^6.2.1"
+    "react-native-pager-view": "^6.2.1",
+    "react-native-collapsible": "^1.6.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",