@app-studio/web 0.3.56 → 0.3.58

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() {
@@ -3342,7 +3343,8 @@ var DatePicker = DatePickerComponent;
 
 var useTextFieldState = function useTextFieldState(_ref) {
   var label = _ref.label,
-    placeholder = _ref.placeholder;
+    placeholder = _ref.placeholder,
+    defaultValue = _ref.value;
   var _useState = useState(label != null ? label : placeholder),
     hint = _useState[0],
     setHint = _useState[1];
@@ -3352,7 +3354,7 @@ var useTextFieldState = function useTextFieldState(_ref) {
   var _useState3 = useState(false),
     isHovered = _useState3[0],
     setIsHovered = _useState3[1];
-  var _useState4 = useState(''),
+  var _useState4 = useState(defaultValue),
     value = _useState4[0],
     setValue = _useState4[1];
   useMemo(function () {
@@ -4384,6 +4386,258 @@ 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 _excluded$w = ["value"];
+var SwitchComponent$1 = function SwitchComponent(props) {
+  var _useFormikInput = useFormikInput(props),
+    value = _useFormikInput.value,
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$w);
+  formProps.isChecked = value;
+  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$x = ["value"];
+var TextFieldComponent$1 = function TextFieldComponent(props) {
+  var formProps = useFormikInput(props);
+  var _useTextFieldState = useTextFieldState(props),
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$x);
+  return React.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
+};
+/**
+ * TextField is used to capture text data from users.
+ */
+var FormikTextField = TextFieldComponent$1;
+
+var _excluded$y = ["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$y);
+  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,
@@ -4469,8 +4723,8 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$u = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
-  _excluded2$3 = ["children", "shadow", "isFullScreen", "shape"],
+var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+  _excluded2$4 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
   _excluded5 = ["children"];
@@ -4485,7 +4739,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$z);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4518,7 +4772,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)'
   } : {
@@ -4641,12 +4895,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$v = ["src", "color"],
-  _excluded2$4 = ["path"];
+var _excluded$A = ["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$A);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {
@@ -4661,11 +4915,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