unicorn-demo-app 6.25.0 → 6.26.0

package/package.json

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

package/src/screens/ExampleScreenPresenter.tsx

@@ -25,6 +25,13 @@ interface RadioGroupOptions {
 interface BooleanGroupOptions {
   spread?: boolean;
   afterValueChanged?: () => void;
+  state?: boolean;
+  setState?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+interface SegmentsExtraOptions {
+  state?: string;
+  setState?: React.Dispatch<React.SetStateAction<any /** no suitable solution for enum */>>;
 }
 
 export function renderHeader(title: string, others?: TextProps) {
@@ -35,19 +42,29 @@ export function renderHeader(title: string, others?: TextProps) {
   );
 }
 
-export function renderBooleanOption(title: string, key: string, {spread, afterValueChanged}: BooleanGroupOptions = {spread: true}) {
+export function renderBooleanOption(title: string,
+  key: string,
+  {spread, afterValueChanged, state, setState}: BooleanGroupOptions = {spread: true}) {
   // @ts-ignore
-  const value = this.state[key];
+  const value = state ?? this.state[key];
   return (
     <View row centerV spread={spread} marginB-s4 key={key}>
-      <Text $textDefault flex={spread} marginR-s4={!spread}>{title}</Text>
+      <Text $textDefault flex={spread} marginR-s4={!spread}>
+        {title}
+      </Text>
       <Switch
         useCustomTheme
         key={key}
         testID={key}
         value={value}
-        // @ts-ignore
-        onValueChange={value => this.setState({[key]: value}, afterValueChanged)}
+        onValueChange={value => {
+          if (setState) {
+            setState(value);
+          } else {
+            // @ts-ignore
+            this.setState({[key]: value}, afterValueChanged);
+          }
+        }}
       />
     </View>
   );
@@ -130,7 +147,9 @@ export function renderColorOption(title: string,
   const value = this.state[key];
   return (
     <View marginV-s2>
-      <Text text70M $textDefault>{title}</Text>
+      <Text text70M $textDefault>
+        {title}
+      </Text>
       <ColorPalette
         value={value}
         colors={colors}
@@ -171,19 +190,34 @@ export function renderSliderOption(title: string,
   );
 }
 
-export function renderMultipleSegmentOptions(title: string, key: string, options: (SegmentedControlItemProps & {value: any})[]) {
+export function renderMultipleSegmentOptions(title: string,
+  key: string,
+  options: (SegmentedControlItemProps & {value: any})[],
+  {state, setState}: SegmentsExtraOptions = {}) {
   // @ts-ignore
-  const value = this.state[key];
+  const value = state ?? this.state[key];
   const index = _.findIndex(options, {value});
 
   return (
     <View row centerV spread marginB-s4 key={key}>
-      {!!title && <Text $textDefault marginR-s2>{title}</Text>}
+      {!!title && (
+        <Text $textDefault marginR-s2>
+          {title}
+        </Text>
+      )}
       <SegmentedControl
         initialIndex={index}
         segments={options}
         // @ts-ignore
-        onChangeIndex={index => this.setState({[key]: options[index].value})}
+        onChangeIndex={index => {
+          const value = options[index].value;
+          if (setState) {
+            setState(value);
+          } else {
+            // @ts-ignore
+            this.setState({[key]: value});
+          }
+        }}
       />
     </View>
   );

package/src/screens/MenuStructure.js

@@ -54,6 +54,7 @@ export const navigationData = {
       {title: 'Color Picker', tags: 'color picker control', screen: 'unicorn.components.ColorPickerScreen'},
       {title: 'Color Swatch', tags: 'color swatch and palette', screen: 'unicorn.components.ColorSwatchScreen'},
       {title: 'TextField', tags: 'text input field form', screen: 'unicorn.components.TextFieldScreen'},
+      {title: 'NumberInput', tags: 'number input', screen: 'unicorn.components.NumberInputScreen'},
       {title: 'Picker', tags: 'picker form', screen: 'unicorn.components.PickerScreen'},
       {title: 'DateTimePicker', tags: 'date time picker form', screen: 'unicorn.components.DateTimePickerScreen'},
       {title: 'RadioButton', tags: 'radio button group controls', screen: 'unicorn.components.RadioButtonScreen'},

package/src/screens/componentScreens/NumberInputScreen.tsx

@@ -0,0 +1,230 @@
+import React, {useState, useCallback, useRef, useMemo} from 'react';
+import {StyleSheet, TouchableWithoutFeedback, Keyboard as RNKeyboard} from 'react-native';
+import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
+import {
+  Text,
+  Spacings,
+  NumberInput,
+  NumberInputData,
+  View,
+  Typography,
+  Constants,
+  Incubator
+} from 'react-native-ui-lib';
+import {renderBooleanOption, renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
+
+enum ExampleTypeEnum {
+  PRICE = 'price',
+  PERCENTAGE = 'percentage',
+  ANY_NUMBER = 'number'
+}
+
+type ExampleType = ExampleTypeEnum | `${ExampleTypeEnum}`;
+
+const VALIDATION_MESSAGE = 'Please enter a valid number';
+const MINIMUM_PRICE = 5000;
+const MINIMUM_PRICE_VALIDATION_MESSAGE = `Make sure your number is above ${MINIMUM_PRICE}`;
+const DISCOUNT_PERCENTAGE = {min: 1, max: 80};
+// eslint-disable-next-line max-len
+const DISCOUNT_PERCENTAGE_VALIDATION_MESSAGE = `Make sure your number is between ${DISCOUNT_PERCENTAGE.min} and ${DISCOUNT_PERCENTAGE.max}`;
+
+const NumberInputScreen = () => {
+  const currentData = useRef<NumberInputData>();
+  const [text, setText] = useState<string>('');
+  const [showLabel, setShowLabel] = useState<boolean>(true);
+  const [exampleType, setExampleType] = useState<ExampleType>('price');
+
+  const processInput = useCallback(() => {
+    let newText = '';
+    if (currentData.current) {
+      switch (currentData.current.type) {
+        case 'valid':
+          newText = currentData.current.formattedNumber;
+          break;
+        case 'empty':
+          newText = 'Empty';
+          break;
+        case 'error':
+          newText = `Error: value '${currentData.current.userInput}' is invalid`;
+          break;
+      }
+    }
+
+    setText(newText);
+  }, []);
+
+  const onChangeNumber = useCallback((data: NumberInputData) => {
+    currentData.current = data;
+    processInput();
+  },
+  [processInput]);
+
+  const label = useMemo(() => {
+    if (showLabel) {
+      switch (exampleType) {
+        case 'price':
+        default:
+          return 'Enter price';
+        case 'percentage':
+          return 'Enter discount percentage';
+        case 'number':
+          return 'Enter any number';
+      }
+    }
+  }, [showLabel, exampleType]);
+
+  const placeholder = useMemo(() => {
+    switch (exampleType) {
+      case 'price':
+      default:
+        return 'Price';
+      case 'percentage':
+        return 'Discount';
+      case 'number':
+        return 'Any number';
+    }
+  }, [exampleType]);
+
+  const fractionDigits = useMemo(() => {
+    switch (exampleType) {
+      case 'price':
+      case 'number':
+      default:
+        return undefined;
+      case 'percentage':
+        return 0;
+    }
+  }, [exampleType]);
+
+  const leadingText = useMemo(() => {
+    switch (exampleType) {
+      case 'price':
+        return '$';
+      case 'percentage':
+      case 'number':
+      default:
+        return undefined;
+    }
+  }, [exampleType]);
+
+  const trailingText = useMemo(() => {
+    switch (exampleType) {
+      case 'percentage':
+        return '%';
+      case 'price':
+      case 'number':
+      default:
+        return undefined;
+    }
+  }, [exampleType]);
+
+  const isValid = useCallback(() => {
+    return currentData.current?.type === 'valid';
+  }, []);
+
+  const isAboveMinimumPrice = useCallback(() => {
+    if (currentData.current?.type === 'valid') {
+      return currentData.current.number > MINIMUM_PRICE;
+    }
+  }, []);
+
+  const isWithinDiscountPercentage = useCallback(() => {
+    if (currentData.current?.type === 'valid') {
+      return (
+        currentData.current.number >= DISCOUNT_PERCENTAGE.min && currentData.current.number <= DISCOUNT_PERCENTAGE.max
+      );
+    }
+  }, []);
+
+  const validate = useMemo((): Incubator.TextFieldProps['validate'] => {
+    switch (exampleType) {
+      case 'price':
+        return [isValid, isAboveMinimumPrice];
+      case 'percentage':
+        return [isValid, isWithinDiscountPercentage];
+      default:
+        return isValid;
+    }
+  }, [exampleType, isValid, isAboveMinimumPrice, isWithinDiscountPercentage]);
+
+  const validationMessage = useMemo((): Incubator.TextFieldProps['validationMessage'] => {
+    switch (exampleType) {
+      case 'price':
+        return [VALIDATION_MESSAGE, MINIMUM_PRICE_VALIDATION_MESSAGE];
+      case 'percentage':
+        return [VALIDATION_MESSAGE, DISCOUNT_PERCENTAGE_VALIDATION_MESSAGE];
+      default:
+        return VALIDATION_MESSAGE;
+    }
+  }, [exampleType]);
+
+  return (
+    <TouchableWithoutFeedback onPress={RNKeyboard.dismiss}>
+      <View flex centerH>
+        <Text text40 margin-s10>
+          Number Input
+        </Text>
+        {renderBooleanOption('Show label', 'showLabel', {spread: false, state: showLabel, setState: setShowLabel})}
+        {renderMultipleSegmentOptions('',
+          'exampleType',
+          [
+            {label: 'Price', value: ExampleTypeEnum.PRICE},
+            {label: 'Percentage', value: ExampleTypeEnum.PERCENTAGE},
+            {label: 'Number', value: ExampleTypeEnum.ANY_NUMBER}
+          ],
+          {state: exampleType, setState: setExampleType})}
+
+        <View flex center>
+          <NumberInput
+            key={exampleType}
+            // initialNumber={100}
+            label={label}
+            labelStyle={styles.label}
+            placeholder={placeholder}
+            fractionDigits={fractionDigits}
+            onChangeNumber={onChangeNumber}
+            leadingText={leadingText}
+            leadingTextStyle={leadingText && [styles.infoText, {marginLeft: Spacings.s4}]}
+            trailingText={trailingText}
+            trailingTextStyle={trailingText && [styles.infoText, {marginRight: Spacings.s4}]}
+            style={[
+              styles.mainText,
+              !leadingText && {marginLeft: Spacings.s4},
+              !trailingText && {marginRight: Spacings.s4}
+            ]}
+            containerStyle={styles.containerStyle}
+            validate={validate}
+            validationMessage={validationMessage}
+            validationMessageStyle={Typography.text80M}
+            validateOnChange
+            centered
+          />
+          <Text marginT-s5>{text}</Text>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default gestureHandlerRootHOC(NumberInputScreen);
+
+const styles = StyleSheet.create({
+  containerStyle: {
+    marginBottom: 30,
+    marginLeft: Spacings.s5,
+    marginRight: Spacings.s5
+  },
+  mainText: {
+    height: 36,
+    marginVertical: Spacings.s1,
+    ...Typography.text30M
+  },
+  infoText: {
+    marginTop: Constants.isIOS ? Spacings.s2 : 0,
+    ...Typography.text50M
+  },
+  label: {
+    marginBottom: Spacings.s1,
+    ...Typography.text80M
+  }
+});

package/src/screens/componentScreens/SectionsWheelPickerScreen.tsx

@@ -1,37 +1,52 @@
 import _ from 'lodash';
-import React, {useState, useCallback} from 'react';
-import {Alert} from 'react-native';
-import {Text, View, SectionsWheelPicker, SegmentedControl, Button, Incubator} from 'react-native-ui-lib';
+import React, {useState, useCallback, useMemo} from 'react';
+import {Alert, StyleSheet} from 'react-native';
+import {
+  Text,
+  View,
+  SectionsWheelPicker,
+  SegmentedControl,
+  Button,
+  Incubator,
+  Constants,
+  Switch,
+  Colors
+} from 'react-native-ui-lib';
 
 const {WheelPicker} = Incubator;
+
+const DAYS = _.times(10, i => i);
+const HOURS = _.times(24, i => i);
+const MINUTES = _.times(60, i => i);
+
 const SectionsWheelPickerScreen = () => {
   const [numOfSections, setNumOfSections] = useState(1);
-
+  const [disableRTL, setDisableRTL] = useState(false);
   const [selectedDays, setSelectedDays] = useState(0);
   const [selectedHours, setSelectedHours] = useState(0);
   const [selectedMinutes, setSelectedMinutes] = useState(0);
 
-  const days = _.times(10, i => i);
-  const hours = _.times(24, i => i);
-  const minutes = _.times(60, i => i);
+  const shouldDisableRTL = useMemo(() => {
+    return Constants.isRTL && disableRTL;
+  }, [disableRTL]);
 
   const getItems = useCallback(values => {
     return _.map(values, item => ({label: '' + item, value: item}));
   }, []);
 
-  const onDaysChange = (item: number | string) => {
+  const onDaysChange = useCallback((item: number | string) => {
     setSelectedDays(item as number);
-  };
+  }, []);
 
-  const onHoursChange = (item: number | string) => {
+  const onHoursChange = useCallback((item: number | string) => {
     setSelectedHours(item as number);
-  };
+  }, []);
 
-  const onMinutesChange = (item: number | string) => {
+  const onMinutesChange = useCallback((item: number | string) => {
     setSelectedMinutes(item as number);
-  };
+  }, []);
 
-  const onSavePress = () => {
+  const onSavePress = useCallback(() => {
     const days = selectedDays === 1 ? 'day' : 'days';
     const hours = selectedHours === 1 ? 'hour' : 'hours';
     const minutes = selectedMinutes === 1 ? 'minute' : 'minutes';
@@ -52,67 +67,132 @@ const SectionsWheelPickerScreen = () => {
       : numOfSections === 2
         ? Alert.alert('Your chosen duration is:\n' + selectedDays + ' ' + days + ' and ' + selectedHours + ' ' + hours)
         : Alert.alert('Your chosen duration is:\n' + selectedDays + ' ' + days);
-  };
+  }, [numOfSections, selectedDays, selectedHours, selectedMinutes]);
 
-  const onResetPress = () => {
+  const onResetPress = useCallback(() => {
     setSelectedDays(0);
     setSelectedHours(0);
     setSelectedMinutes(0);
-  };
-
-  const sections: Incubator.WheelPickerProps[] = [
-    {
-      items: getItems(days),
-      onChange: onDaysChange,
-      initialValue: selectedDays,
-      label: 'Days',
-      align: numOfSections === 1 ? WheelPicker.alignments.CENTER : WheelPicker.alignments.RIGHT,
-      style: {flex: 1}
-    },
-    {
-      items: getItems(hours),
-      onChange: onHoursChange,
-      initialValue: selectedHours,
-      label: 'Hrs',
-      align: numOfSections === 2 ? WheelPicker.alignments.LEFT : WheelPicker.alignments.CENTER,
-      style: numOfSections === 2 ? {flex: 1} : undefined
-    },
-    {
-      items: getItems(minutes),
-      onChange: onMinutesChange,
-      initialValue: selectedMinutes,
-      label: 'Mins',
-      align: WheelPicker.alignments.LEFT,
-      style: {flex: 1}
-    }
-  ];
-
-  const sectionsToPresent = _.slice(sections, 0, numOfSections);
-
-  const onChangeIndex = (index: number) => {
+  }, []);
+
+  const sections: Incubator.WheelPickerProps[] = useMemo(() => {
+    return [
+      {
+        items: getItems(DAYS),
+        onChange: onDaysChange,
+        initialValue: selectedDays,
+        label: Constants.isRTL ? 'ימים' : 'Days',
+        align:
+          numOfSections === 1
+            ? WheelPicker.alignments.CENTER
+            : shouldDisableRTL
+              ? WheelPicker.alignments.LEFT
+              : WheelPicker.alignments.RIGHT,
+        style: {
+          flex: 1,
+          flexDirection: numOfSections !== 1 && Constants.isRTL && !disableRTL ? 'row-reverse' : undefined
+        }
+      },
+      {
+        items: getItems(HOURS),
+        onChange: onHoursChange,
+        initialValue: selectedHours,
+        label: Constants.isRTL ? 'שעות' : 'Hrs',
+        align:
+          numOfSections === 2
+            ? shouldDisableRTL
+              ? WheelPicker.alignments.RIGHT
+              : WheelPicker.alignments.LEFT
+            : WheelPicker.alignments.CENTER,
+        style: numOfSections === 2 ? {flex: 1, flexDirection: shouldDisableRTL ? 'row-reverse' : 'row'} : undefined
+      },
+      {
+        items: getItems(MINUTES),
+        onChange: onMinutesChange,
+        initialValue: selectedMinutes,
+        label: Constants.isRTL ? 'דקות' : 'Mins',
+        align: shouldDisableRTL ? WheelPicker.alignments.RIGHT : WheelPicker.alignments.LEFT,
+        style: {flex: 1, flexDirection: shouldDisableRTL ? 'row-reverse' : 'row'}
+      }
+    ];
+  }, [
+    getItems,
+    disableRTL,
+    selectedDays,
+    selectedHours,
+    selectedMinutes,
+    onDaysChange,
+    onHoursChange,
+    onMinutesChange,
+    numOfSections,
+    shouldDisableRTL
+  ]);
+
+  const sectionsToPresent = useMemo(() => _.slice(sections, 0, numOfSections), [numOfSections, sections]);
+
+  const timeSections = useMemo(() => {
+    return [
+      {
+        items: getItems(_.times(24, i => i + 1))
+      },
+      {
+        items: getItems(_.times(12, i => {
+          if (i < 2) {
+            return `0${i * 5}`;
+          }
+          return i * 5;
+        }))
+      }
+    ];
+  }, [getItems]);
+
+  const onChangeIndex = useCallback((index: number) => {
     return setNumOfSections(index + 1);
-  };
+  }, []);
+
+  const updateDisableRTLValue = useCallback((value: boolean) => {
+    setDisableRTL(value);
+  }, []);
 
   return (
     <View>
       <Text text40 marginL-10 marginT-20>
         Sections Wheel Picker
       </Text>
-      <View centerH marginT-40>
+      <View row center style={styles.bottomDivider}>
+        <Text margin-s5> Disable RTL</Text>
+        <Switch value={shouldDisableRTL} onValueChange={updateDisableRTLValue}/>
+      </View>
+      <View centerH marginT-20>
+        <Text text60 marginB-20>
+          Pick a duration
+        </Text>
         <SegmentedControl
           segments={[{label: '1 section'}, {label: '2 sections'}, {label: '3 sections'}]}
           onChangeIndex={onChangeIndex}
           throttleTime={400}
         />
-        <Text text50 marginV-20>
-          Pick a duration
+      </View>
+      <SectionsWheelPicker numberOfVisibleRows={4} disableRTL={disableRTL} sections={sectionsToPresent}/>
+      <View paddingB-20 center spread row style={styles.bottomDivider}>
+        <Button marginR-40 link label={'Save'} onPress={onSavePress}/>
+        <Button label={'Reset'} link onPress={onResetPress}/>
+      </View>
+      <View>
+        <Text center text60 marginV-20>
+          Pick a time
         </Text>
+        <SectionsWheelPicker disableRTL={disableRTL} sections={timeSections}/>
       </View>
-      <SectionsWheelPicker sections={sectionsToPresent}/>
-      <Button marginH-150 marginT-40 label={'Save'} onPress={onSavePress}/>
-      <Button marginH-150 marginT-15 label={'Reset'} onPress={onResetPress}/>
     </View>
   );
 };
 
 export default SectionsWheelPickerScreen;
+
+const styles = StyleSheet.create({
+  bottomDivider: {
+    borderBottomColor: Colors.$outlineDefault,
+    borderBottomWidth: 4
+  }
+});

package/src/screens/componentScreens/index.js

@@ -31,6 +31,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
   registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
   registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
+  registrar('unicorn.components.NumberInputScreen', () => require('./NumberInputScreen').default);
   registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
   registrar('unicorn.components.PageControlScreen', () => require('./PageControlScreen').default);
   registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);

package/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -277,12 +277,7 @@ export default class TextFieldScreen extends Component {
             Centered
           </Text>
 
-          <TextField
-            label="PIN"
-            placeholder="XXXX"
-            labelStyle={{alignSelf: 'center'}}
-            containerStyle={{alignSelf: 'center'}}
-          />
+          <TextField label="PIN" placeholder="XXXX" centered/>
         </View>
         <KeyboardAwareInsetsView/>
       </ScrollView>