@app-studio/web 0.3.57 → 0.3.59

package/dist/web.esm.js

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, useRef, useMemo, useCallback, Fragment } from 'react';
-import { View as View$1, Element, useTheme, Typography, Input, Image } from 'app-studio';
+import React, { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext, Fragment } from 'react';
+import { View as View$1, Element, useTheme, Typography, Input, Form, Image } from 'app-studio';
 import { Link as Link$1 } from 'react-router-dom';
 import format from 'date-fns/format';
+import { useFormikContext } from 'formik';
 import { create } from 'zustand';
 
 var useButtonState = function useButtonState() {
@@ -4110,7 +4111,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$s = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
+var _excluded$s = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "onChange", "setValue", "setIsHovered", "styles"];
 var SwitchContent = function SwitchContent(props) {
   return React.createElement(Input, Object.assign({
     type: "checkbox"
@@ -4127,8 +4128,8 @@ var SwitchView = function SwitchView(_ref) {
     size = _ref$size === void 0 ? 'sm' : _ref$size,
     _ref$colorScheme = _ref.colorScheme,
     colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
-    _ref$on = _ref.on,
-    on = _ref$on === void 0 ? false : _ref$on,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? false : _ref$value,
     _ref$isHovered = _ref.isHovered,
     isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
     _ref$isDisabled = _ref.isDisabled,
@@ -4136,9 +4137,8 @@ var SwitchView = function SwitchView(_ref) {
     _ref$isReadOnly = _ref.isReadOnly,
     isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
     onChange = _ref.onChange,
-    onValueChange = _ref.onValueChange,
-    _ref$setOn = _ref.setOn,
-    setOn = _ref$setOn === void 0 ? function () {} : _ref$setOn,
+    _ref$setValue = _ref.setValue,
+    setValue = _ref$setValue === void 0 ? function () {} : _ref$setValue,
     _ref$setIsHovered = _ref.setIsHovered,
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     _ref$styles = _ref.styles,
@@ -4149,7 +4149,7 @@ var SwitchView = function SwitchView(_ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
-      setOn(!on);
+      setValue(!value);
       if (onChange) onChange(event.target.checked);
     }
   };
@@ -4166,26 +4166,24 @@ var SwitchView = function SwitchView(_ref) {
     opacity: 0,
     width: 0,
     height: 0,
-    checked: on,
+    checked: value,
     onChange: handleToggle,
     disabled: isDisabled,
     readOnly: isReadOnly
-  }, onValueChange && {
-    onValueChange: handleToggle
   }, props)), React.createElement(View, Object.assign({
     display: "flex",
     cursor: "pointer",
     alignItems: "center",
     borderRadius: 24,
     marginBottom: 5,
-    filter: isHovered && on ? 'brightness(0.9)' : 'brightness(1)',
+    filter: isHovered && value ? 'brightness(0.9)' : 'brightness(1)',
     transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    backgroundColor: isDisabled ? 'disabled' : on ? colorScheme : 'lightgray',
-    justifyContent: activeChild ? 'space-between' : on ? 'flex-end' : 'flex-start'
-  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && React.createElement(View, null, activeChild), React.createElement(View, Object.assign({
+    backgroundColor: isDisabled ? 'disabled' : value ? colorScheme : 'lightgray',
+    justifyContent: activeChild ? 'space-between' : value ? 'flex-end' : 'flex-start'
+  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && value && React.createElement(View, null, activeChild), React.createElement(View, Object.assign({
     borderRadius: "50%",
     backgroundColor: "white"
-  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && React.createElement(View, null, inActiveChild)));
+  }, KnobSizes[size], styles['circle'])), inActiveChild && !value && React.createElement(View, null, inActiveChild)));
 };
 
 var SwitchComponent = function SwitchComponent(props) {
@@ -4385,6 +4383,254 @@ var TextFieldComponent = function TextFieldComponent(props) {
  */
 var TextField = TextFieldComponent;
 
+var FocusContext = /*#__PURE__*/createContext({
+  active: false,
+  focusNextInput: function focusNextInput() {},
+  setInputRef: function setInputRef() {},
+  handleSubmitEditing: function handleSubmitEditing() {},
+  getReturnKeyType: function getReturnKeyType() {
+    return 'next';
+  }
+});
+var useFormFocus = function useFormFocus() {
+  return useContext(FocusContext);
+};
+var FormikForm = function FormikForm(_ref) {
+  var children = _ref.children,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    initFocus = _ref.initFocus;
+  var formik = useFormikContext();
+  var inputRefs = useRef({});
+  var inputNames = useRef([]);
+  var setInputRef = function setInputRef(name, ref) {
+    inputRefs.current[name] = ref;
+    if (!inputNames.current.includes(name)) {
+      inputNames.current.push(name);
+    }
+  };
+  var focusNextInput = function focusNextInput(currentName) {
+    if (autoFocus) {
+      var currentIndex = inputNames.current.indexOf(currentName);
+      var nextIndex = currentIndex + 1;
+      if (nextIndex < inputNames.current.length) {
+        var _inputRefs$current$in;
+        (_inputRefs$current$in = inputRefs.current[inputNames.current[nextIndex]]) == null || _inputRefs$current$in.focus();
+      } else if (formik.onSubmit) {
+        formik.onSubmit(formik.values);
+      }
+    }
+  };
+  var contextValue = {
+    active: autoFocus,
+    focusNextInput: focusNextInput,
+    setInputRef: setInputRef,
+    handleSubmitEditing: focusNextInput,
+    getReturnKeyType: function getReturnKeyType(name) {
+      return inputNames.current.indexOf(name) === inputNames.current.length - 1 ? 'done' : 'next';
+    }
+  };
+  useEffect(function () {
+    if (autoFocus) {
+      if (initFocus && inputRefs.current[initFocus]) {
+        var _inputRefs$current$in2;
+        (_inputRefs$current$in2 = inputRefs.current[initFocus]) == null || _inputRefs$current$in2.focus();
+      } else if (inputNames.current[0]) {
+        var _inputRefs$current$in3;
+        (_inputRefs$current$in3 = inputRefs.current[inputNames.current[0]]) == null || _inputRefs$current$in3.focus();
+      }
+    }
+  }, [autoFocus, initFocus]);
+  return React.createElement(FocusContext.Provider, {
+    value: contextValue
+  }, React.createElement(Form, null, children));
+};
+
+var _excluded$u = ["name", "type"];
+var getInputTypeProps = function getInputTypeProps(type) {
+  switch (type) {
+    case 'email':
+      return {
+        autoCorrect: 'off',
+        keyboardType: 'email-address',
+        autoCapitalize: 'none'
+      };
+    case 'password':
+      return {
+        autoCorrect: 'off',
+        secureTextEntry: true,
+        autoCapitalize: 'none'
+      };
+    case 'digits':
+      return {
+        keyboardType: 'phone-pad'
+      };
+    case 'name':
+      return {
+        autoCorrect: 'off'
+      };
+    default:
+      return {};
+  }
+};
+var useFormikInput = function useFormikInput(_ref) {
+  var name = _ref.name,
+    type = _ref.type,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+  var focus = useFormFocus();
+  var _useFormikContext = useFormikContext(),
+    touched = _useFormikContext.touched,
+    errors = _useFormikContext.errors,
+    submitCount = _useFormikContext.submitCount,
+    values = _useFormikContext.values,
+    setFieldTouched = _useFormikContext.setFieldTouched,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var error = touched[name] || submitCount > 0 ? errors[name] : undefined;
+  var onChangeText = function onChangeText(text) {
+    setFieldValue(name, text);
+    props.onChangeText == null || props.onChangeText(text);
+  };
+  var onChange = function onChange(value) {
+    setFieldValue(name, value);
+    props.onChange == null || props.onChange(value);
+  };
+  var handleBlur = function handleBlur() {
+    setFieldTouched(name, true);
+    // if(props.onBlur)props.onBlur();
+  };
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      focus.focusNextInput(name);
+    }
+  };
+  var isText = ['text', 'password', 'email', 'digits'].includes(type);
+  return _extends({}, getInputTypeProps(type), props, {
+    value: values[name],
+    error: error,
+    onBlur: handleBlur,
+    onKeyPress: handleKeyPress
+  }, isText ? {
+    onChangeText: onChangeText
+  } : {
+    onChange: onChange
+  }, focus.active ? {
+    handleKeyPress: handleKeyPress
+  } : {});
+};
+// import FormPicker from 'src/Picker/Picker';
+// import FormRater from 'src/Rate/Rate';
+// import Upload from 'src/Upload/Upload';
+
+var _excluded$v = ["value"];
+var CheckboxComponent$1 = function CheckboxComponent(props) {
+  var _useFormikInput = useFormikInput(props),
+    value = _useFormikInput.value,
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$v);
+  formProps.isChecked = value;
+  var checkboxStates = useCheckboxState(props);
+  return React.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
+};
+/**
+ * Checkbox allows users to select one or more options from a list of choices.
+ */
+var FormikCheckbox = CheckboxComponent$1;
+
+var DatePickerComponent$1 = function DatePickerComponent(props) {
+  var formProps = useFormikInput(props);
+  var datePickerStates = useDatePickerState();
+  return React.createElement(DatePickerView, Object.assign({}, datePickerStates, formProps));
+};
+/**
+ * Date picker allows users to select a date from a calendar view.
+ */
+var FormikDatePicker = DatePickerComponent$1;
+
+var CountryPickerComponent$1 = function CountryPickerComponent(props) {
+  var formProps = useFormikInput(props);
+  var countryPickerStates = useCountryPickerState(props);
+  return React.createElement(CountryPickerView, Object.assign({}, countryPickerStates, formProps));
+};
+/**
+ * Country picker allows users to select a country from a dropdown list or search field.
+ */
+var FormikCountryPicker = CountryPickerComponent$1;
+
+var SelectComponent$1 = function SelectComponent(props) {
+  var formProps = useFormikInput(props);
+  formProps.selected = formProps.value;
+  var selectStates = useSelectState(props);
+  return React.createElement(SelectView, Object.assign({}, selectStates, formProps));
+};
+/**
+ * Select provides a dropdown list of options for the user to choose from.
+ */
+var FormikSelect = SelectComponent$1;
+
+var SwitchComponent$1 = function SwitchComponent(props) {
+  var formProps = useFormikInput(props);
+  var switchStates = useSwitchState(props);
+  return React.createElement(SwitchView, Object.assign({}, switchStates, formProps));
+};
+var FormikSwitch = SwitchComponent$1;
+
+var TextAreaComponent$1 = function TextAreaComponent(props) {
+  var formProps = useFormikInput(props);
+  var textAreaState = useTextAreaState(props);
+  return React.createElement(TextAreaView, Object.assign({}, textAreaState, formProps));
+};
+/**
+ * Text Area is an component used to create a multi-line input field.
+ */
+var FormikTextArea = TextAreaComponent$1;
+
+var _excluded$w = ["value"];
+var TextFieldComponent$1 = function TextFieldComponent(props) {
+  var formProps = useFormikInput(props);
+  var _useTextFieldState = useTextFieldState(props),
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$w);
+  return React.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
+};
+/**
+ * TextField is used to capture text data from users.
+ */
+var FormikTextField = TextFieldComponent$1;
+
+var _excluded$x = ["visibleIcon", "hiddenIcon"],
+  _excluded2$3 = ["isVisible", "setIsVisible"];
+var PasswordComponent$1 = function PasswordComponent(_ref) {
+  var _ref$visibleIcon = _ref.visibleIcon,
+    visibleIcon = _ref$visibleIcon === void 0 ? React.createElement(OpenEyeSvg, {
+      size: 14
+    }) : _ref$visibleIcon,
+    _ref$hiddenIcon = _ref.hiddenIcon,
+    hiddenIcon = _ref$hiddenIcon === void 0 ? React.createElement(CloseEyeSvg, {
+      size: 14
+    }) : _ref$hiddenIcon,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+  var formProps = useFormikInput(props);
+  var _usePasswordState = usePasswordState(formProps),
+    isVisible = _usePasswordState.isVisible,
+    setIsVisible = _usePasswordState.setIsVisible,
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$3);
+  return React.createElement(TextFieldView, Object.assign({}, passwordProps, {
+    type: isVisible ? 'text' : 'password',
+    isClearable: false,
+    rightChild: React.createElement(View$1, {
+      onClick: function onClick() {
+        if (!props.isDisabled) {
+          setIsVisible(!isVisible);
+        }
+      }
+    }, isVisible ? visibleIcon : hiddenIcon)
+  }));
+};
+/**
+ * To allow users to securely enter sensitive information
+ */
+var FormikPassword = PasswordComponent$1;
+
 var useModalStore = /*#__PURE__*/create(function (set) {
   return {
     modal: false,
@@ -4470,8 +4716,8 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$u = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
-  _excluded2$3 = ["children", "shadow", "isFullScreen", "shape"],
+var _excluded$y = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+  _excluded2$4 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
   _excluded5 = ["children"];
@@ -4486,7 +4732,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'center' : _ref$position,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4519,7 +4765,7 @@ var ModalContainer = function ModalContainer(_ref2) {
     isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen,
     _ref2$shape = _ref2.shape,
     shape = _ref2$shape === void 0 ? 'rounded' : _ref2$shape,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)'
   } : {
@@ -4642,12 +4888,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$v = ["src", "color"],
-  _excluded2$4 = ["path"];
+var _excluded$z = ["src", "color"],
+  _excluded2$5 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {
@@ -4662,11 +4908,11 @@ var FileSVG = function FileSVG(_ref) {
 };
 var FileImage = function FileImage(_ref2) {
   var path = _ref2.path,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
   return React.createElement(Image, Object.assign({
     src: path
   }, props));
 };
 
-export { Bottom, Button, Center, Checkbox, CountryPicker, DatePicker, FileImage, FileSVG, Horizontal, Inline, Left, Link, Loader, Modal, Password, Right, Select, Switch, Text, TextArea, TextField, Top, Vertical, View, hideModal, showModal, useModalStore };
+export { Bottom, Button, Center, Checkbox, CountryPicker, DatePicker, FileImage, FileSVG, FormikCheckbox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikPassword, FormikSelect, FormikSwitch, FormikTextArea, FormikTextField, Horizontal, Inline, Left, Link, Loader, Modal, Password, Right, Select, Switch, Text, TextArea, TextField, Top, Vertical, View, hideModal, showModal, useModalStore };
 //# sourceMappingURL=web.esm.js.map