react-native-system-ui 1.0.2 → 1.0.4

package/dist/cjs/components/field/Field.js

@@ -1,565 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Field = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNativeSystemIcon() {
-  const data = require("react-native-system-icon");
-  _reactNativeSystemIcon = function () {
-    return data;
-  };
-  return data;
-}
-var _cell = _interopRequireDefault(require("../cell"));
-var _dialog = _interopRequireDefault(require("../dialog"));
-var _string = require("../../utils/string");
-var _validate = require("../../utils/validate");
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const alignMap = {
-  left: 'flex-start',
-  center: 'center',
-  right: 'flex-end'
-};
-const mapKeyboardType = type => {
-  switch (type) {
-    case 'number':
-      return 'decimal-pad';
-    case 'digit':
-      return 'number-pad';
-    case 'tel':
-      return 'phone-pad';
-    default:
-      return undefined;
-  }
-};
-const FieldSlot = ({
-  onPress,
-  style,
-  children,
-  accessibilityRole = 'button'
-}) => {
-  if (!children) return null;
-  return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-    onPress: onPress,
-    accessibilityRole: accessibilityRole,
-    style: style
-  }, children) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: style
-  }, children);
-};
-const FieldClearButton = ({
-  show,
-  tokens,
-  clearIcon,
-  onPressIn,
-  onPressOut,
-  onPress
-}) => {
-  if (!show) return null;
-  const webMDProps = _reactNative().Platform.OS === 'web' ? {
-    onMouseDown: e => {
-      e.preventDefault?.();
-      e.stopPropagation?.();
-    }
-  } : undefined;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    style: [tokens.layout.clearIcon, {
-      paddingHorizontal: tokens.spacing.rightIconGap
-    }]
-  }, webMDProps, {
-    onPressIn: onPressIn,
-    onPressOut: onPressOut,
-    onPress: onPress,
-    accessibilityRole: "button"
-  }), /*#__PURE__*/_react().default.isValidElement(clearIcon) ? clearIcon : /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Clear, {
-    size: tokens.sizes.clearIcon,
-    fill: tokens.colors.clear,
-    color: tokens.colors.clear
-  }));
-};
-const FieldInput = ({
-  inputRef,
-  tokens,
-  isTextarea,
-  disabled,
-  error,
-  finalTextAlign,
-  lineHeight,
-  textareaHeight,
-  minHeight,
-  inputStyle,
-  value,
-  onChangeText,
-  onFocus,
-  onBlur,
-  onPressIn,
-  rows,
-  placeholderTextColor,
-  keyboardType,
-  onContentSizeChange,
-  describedBy,
-  secureTextEntry,
-  editable,
-  restInputProps
-}) => {
-  const inputStyleArray = [isTextarea ? tokens.layout.textarea : tokens.layout.input, {
-    color: disabled ? tokens.colors.disabled : error ? tokens.colors.error : tokens.colors.input,
-    fontSize: tokens.typography.inputSize,
-    textAlign: finalTextAlign,
-    ...(isTextarea ? {
-      lineHeight,
-      height: textareaHeight,
-      minHeight
-    } : {
-      minHeight: tokens.sizes.controlMinHeight
-    })
-  }, inputStyle];
-  return /*#__PURE__*/_react().default.createElement(_reactNative().TextInput, _extends({
-    ref: inputRef,
-    style: inputStyleArray,
-    value: value,
-    onChangeText: onChangeText,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onPressIn: onPressIn,
-    editable: editable,
-    secureTextEntry: secureTextEntry,
-    multiline: isTextarea,
-    numberOfLines: isTextarea ? rows : undefined,
-    keyboardType: keyboardType,
-    placeholderTextColor: placeholderTextColor,
-    onContentSizeChange: isTextarea ? onContentSizeChange : undefined
-  }, describedBy ? {
-    accessibilityDescribedBy: describedBy
-  } : null, {
-    clearButtonMode: "never"
-  }, restInputProps));
-};
-const FieldControlRow = ({
-  tokens,
-  prefixNode,
-  leftIconNode,
-  controlNode,
-  clearNode,
-  rightIconNode,
-  suffixNode
-}) => {
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.body
-  }, prefixNode, leftIconNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.controlWrapper, {
-      minHeight: tokens.sizes.controlMinHeight
-    }]
-  }, controlNode, clearNode), rightIconNode, suffixNode);
-};
-const FieldImpl = (props, ref) => {
-  const {
-    tokensOverride,
-    label,
-    labelWidth: labelWidthProp,
-    labelAlign: labelAlignProp,
-    inputAlign: inputAlignProp,
-    controlAlign: controlAlignProp,
-    required = false,
-    colon = false,
-    intro,
-    description,
-    tooltip,
-    error = false,
-    errorMessage,
-    errorMessageAlign = 'left',
-    disabled = false,
-    readOnly = false,
-    clearable = false,
-    clearTrigger: clearTriggerProp,
-    clearIcon,
-    leftIcon,
-    rightIcon,
-    prefix,
-    suffix: suffixProp,
-    button,
-    extra,
-    value: valueProp,
-    defaultValue = '',
-    type = 'text',
-    rows: rowsProp,
-    autoSize = false,
-    formatter,
-    formatTrigger: formatTriggerProp,
-    showWordLimit = false,
-    onOverlimit,
-    onClear,
-    onClick,
-    onClickInput,
-    onClickLeftIcon,
-    onClickRightIcon,
-    border,
-    center,
-    clickable,
-    isLink,
-    arrowDirection,
-    size,
-    titleStyle,
-    contentStyle,
-    inputStyle,
-    labelStyle,
-    introStyle,
-    errorMessageStyle,
-    style,
-    androidRipple,
-    children,
-    placeholderTextColor,
-    onFocus,
-    onBlur,
-    onPressIn,
-    onChangeText,
-    maxLength,
-    ...restInputProps
-  } = props;
-  const tokens = (0, _tokens.useFieldTokens)(tokensOverride);
-  const labelWidth = labelWidthProp ?? tokens.defaults.labelWidth;
-  const labelAlign = labelAlignProp ?? tokens.defaults.labelAlign;
-  const inputAlign = inputAlignProp ?? tokens.defaults.inputAlign;
-  const controlAlign = controlAlignProp ?? tokens.defaults.controlAlign;
-  const clearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
-  const rows = rowsProp ?? tokens.defaults.rows;
-  const formatTrigger = formatTriggerProp ?? tokens.defaults.formatTrigger;
-  const titleS = [{
-    width: labelWidth,
-    minWidth: labelWidth,
-    maxWidth: labelWidth,
-    flexBasis: labelWidth,
-    marginRight: tokens.spacing.labelGap,
-    flexShrink: 0,
-    flexGrow: 0
-  }, titleStyle];
-  const suffix = suffixProp ?? button;
-  const descriptionText = intro ?? description;
-  const placeholderColor = placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder);
-  const isTextarea = type === 'textarea';
-  const isControlled = valueProp !== undefined;
-  const [internalValue, setInternalValue] = (0, _react().useState)(defaultValue);
-  const value = isControlled ? valueProp ?? '' : internalValue;
-  const [focused, setFocused] = (0, _react().useState)(false);
-  const [pressingClear, setPressingClear] = (0, _react().useState)(false);
-  const clearHandledRef = (0, _react().useRef)(false);
-  const inputRef = (0, _react().useRef)(null);
-  const introId = (0, _react().useId)();
-  const errorId = (0, _react().useId)();
-  const describedBy = (0, _react().useMemo)(() => {
-    const ids = [(0, _validate.isRenderable)(errorMessage) ? errorId : null, (0, _validate.isRenderable)(descriptionText) ? introId : null].filter(Boolean);
-    return ids.length ? ids : undefined;
-  }, [errorId, errorMessage, introId, descriptionText]);
-  const lineHeight = tokens.defaults.textareaLineHeight;
-  const autoSizeConfig = autoSize && (0, _validate.isObject)(autoSize) ? autoSize : undefined;
-  const minRows = !isTextarea ? 1 : autoSizeConfig && (0, _validate.isDef)(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows);
-  const maxRows = !isTextarea ? undefined : autoSizeConfig && (0, _validate.isDef)(autoSizeConfig.maxRows) ? Math.max(1, autoSizeConfig.maxRows) : undefined;
-  const minHeight = (0, _react().useMemo)(() => isTextarea ? Math.max(tokens.sizes.textareaMinHeight, minRows * lineHeight) : undefined, [isTextarea, lineHeight, minRows, tokens.sizes.textareaMinHeight]);
-  const maxHeight = (0, _react().useMemo)(() => isTextarea && maxRows ? Math.max(tokens.sizes.textareaMinHeight, maxRows * lineHeight) : undefined, [isTextarea, lineHeight, maxRows, tokens.sizes.textareaMinHeight]);
-  const [textareaHeight, setTextareaHeight] = (0, _react().useState)(minHeight);
-  const onChangeTextRef = (0, _react().useRef)(onChangeText);
-  onChangeTextRef.current = onChangeText;
-  const onOverlimitRef = (0, _react().useRef)(onOverlimit);
-  onOverlimitRef.current = onOverlimit;
-  const onFocusRef = (0, _react().useRef)(onFocus);
-  onFocusRef.current = onFocus;
-  const onBlurRef = (0, _react().useRef)(onBlur);
-  onBlurRef.current = onBlur;
-  const onPressInRef = (0, _react().useRef)(onPressIn);
-  onPressInRef.current = onPressIn;
-  const onClickInputRef = (0, _react().useRef)(onClickInput);
-  onClickInputRef.current = onClickInput;
-  const onClearRef = (0, _react().useRef)(onClear);
-  onClearRef.current = onClear;
-  const formatValue = (0, _react().useCallback)((inputValue, trigger = 'onChange') => formatter && trigger === formatTrigger ? formatter(inputValue) : inputValue, [formatTrigger, formatter]);
-  const updateValue = (0, _react().useCallback)((newValue, trigger = 'onChange') => {
-    const formatted = formatValue(newValue, trigger);
-    if (!isControlled) setInternalValue(formatted);
-    onChangeTextRef.current?.(formatted);
-  }, [formatValue, isControlled]);
-  (0, _react().useImperativeHandle)(ref, () => ({
-    focus: () => inputRef.current?.focus(),
-    blur: () => inputRef.current?.blur(),
-    clear: () => updateValue(''),
-    get nativeElement() {
-      return inputRef.current;
-    }
-  }));
-  const textAlign = controlAlign !== 'left' ? controlAlign : inputAlign;
-  const showClear = clearable && !readOnly && (value ?? '') !== '' && (clearTrigger === 'always' || clearTrigger === 'focus' && (focused || pressingClear));
-  const handleChangeText = (0, _react().useCallback)(text => {
-    let newValue = text ?? '';
-    if (type === 'number' || type === 'digit') {
-      const allowDecimal = type === 'number';
-      newValue = (0, _string.formatNumberInput)(newValue, allowDecimal, allowDecimal);
-    }
-    ;
-    if ((0, _validate.isFiniteNumber)(maxLength) && maxLength >= 0 && newValue.length > maxLength) {
-      onOverlimitRef.current?.(newValue);
-      newValue = newValue.slice(0, maxLength);
-    }
-    ;
-    updateValue(newValue, 'onChange');
-  }, [maxLength, type, updateValue]);
-  const handleFocus = (0, _react().useCallback)(e => {
-    setFocused(true);
-    onFocusRef.current?.(e);
-    if (readOnly) inputRef.current?.blur();
-  }, [readOnly]);
-  const handleBlur = (0, _react().useCallback)(e => {
-    if (_reactNative().Platform.OS !== 'web' && clearHandledRef.current) {
-      clearHandledRef.current = false;
-      setFocused(false);
-      onBlurRef.current?.(e);
-      return;
-    }
-    ;
-    updateValue(value ?? '', 'onBlur');
-    setFocused(false);
-    onBlurRef.current?.(e);
-  }, [updateValue, value]);
-  const handlePressIn = (0, _react().useCallback)(e => {
-    onPressInRef.current?.(e);
-    onClickInputRef.current?.();
-  }, []);
-  const handleContentSizeChange = (0, _react().useCallback)(e => {
-    if (!isTextarea) return;
-    const contentHeight = e.nativeEvent.contentSize?.height ?? 0;
-    if (!contentHeight) return;
-    let nextHeight = contentHeight;
-    if (autoSize) {
-      nextHeight = Math.max(minHeight ?? contentHeight, contentHeight);
-      if (maxHeight) nextHeight = Math.min(nextHeight, maxHeight);
-    } else if (minHeight) nextHeight = Math.max(minHeight, contentHeight);
-    setTextareaHeight(nextHeight);
-  }, [autoSize, isTextarea, maxHeight, minHeight]);
-  const handleClear = (0, _react().useCallback)(() => {
-    if (_reactNative().Platform.OS !== 'web') clearHandledRef.current = true;
-    updateValue('');
-    inputRef.current?.clear?.();
-    inputRef.current?.focus?.();
-    onClearRef.current?.();
-  }, [updateValue]);
-  const handleClearPressIn = (0, _react().useCallback)(() => {
-    setPressingClear(true);
-    if (_reactNative().Platform.OS !== 'web') handleClear();
-  }, [handleClear]);
-  const handleClearPressOut = (0, _react().useCallback)(() => {
-    setPressingClear(false);
-    clearHandledRef.current = false;
-  }, []);
-  const controlNode = (0, _validate.isRenderable)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.children, {
-      minHeight: tokens.sizes.controlMinHeight
-    }]
-  }, children) : /*#__PURE__*/_react().default.createElement(FieldInput, {
-    inputRef: inputRef,
-    tokens: tokens,
-    isTextarea: isTextarea,
-    disabled: disabled,
-    error: error,
-    finalTextAlign: textAlign,
-    lineHeight: lineHeight,
-    textareaHeight: textareaHeight,
-    minHeight: minHeight,
-    inputStyle: inputStyle,
-    value: value ?? '',
-    onChangeText: handleChangeText,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onPressIn: handlePressIn,
-    rows: rows,
-    keyboardType: restInputProps.keyboardType ?? mapKeyboardType(type),
-    placeholderTextColor: placeholderColor,
-    onContentSizeChange: handleContentSizeChange,
-    describedBy: describedBy,
-    secureTextEntry: type === 'password',
-    editable: !disabled && !readOnly,
-    restInputProps: restInputProps
-  });
-  const contentWrapStyle = [{
-    width: '100%',
-    justifyContent: alignMap[controlAlign]
-  }, contentStyle];
-  const renderAffix = node => {
-    if ((0, _validate.isText)(node)) return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [tokens.layout.affixText, {
-        color: tokens.colors.input,
-        fontSize: tokens.typography.inputSize
-      }],
-      numberOfLines: 1
-    }, node);
-    return node;
-  };
-  const tooltipNode = (0, _validate.isRenderable)(tooltip) ? (() => {
-    const defaultIcon = /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().QuestionO, {
-      size: tokens.sizes.icon,
-      fill: tokens.colors.tooltip,
-      color: tokens.colors.tooltip
-    });
-    let icon = defaultIcon;
-    let dialogProps = {
-      message: tooltip
-    };
-    if (! /*#__PURE__*/_react().default.isValidElement(tooltip) && !(0, _validate.isText)(tooltip)) {
-      const {
-        icon: customIcon,
-        ...rest
-      } = tooltip;
-      icon = customIcon ?? defaultIcon;
-      dialogProps = rest;
-    }
-    ;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-      style: [tokens.layout.tooltip, {
-        marginLeft: tokens.spacing.rightIconGap
-      }],
-      onPress: () => _dialog.default.show(dialogProps),
-      accessibilityRole: "button"
-    }, icon);
-  })() : null;
-  const labelNode = (0, _validate.isRenderable)(label) ? (() => {
-    const isPlainText = (0, _validate.isText)(label);
-    const content = isPlainText ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [{
-        color: disabled ? tokens.colors.disabled : tokens.colors.label,
-        fontSize: tokens.typography.labelSize,
-        textAlign: labelAlign
-      }, labelStyle],
-      numberOfLines: 1
-    }, label, colon ? ':' : '') : label;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: tokens.layout.labelRow
-    }, content, tooltipNode);
-  })() : null;
-  const wordLimitNode = showWordLimit && maxLength != null ? (() => {
-    const currentCount = (value ?? '').length;
-    const content = (0, _validate.isFunction)(showWordLimit) ? showWordLimit({
-      currentCount,
-      maxLength
-    }) : `${currentCount}/${maxLength}`;
-    if (!(0, _validate.isRenderable)(content)) return null;
-    return (0, _validate.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [tokens.layout.wordLimit, {
-        color: tokens.colors.wordLimit,
-        fontSize: tokens.typography.wordLimitSize ?? 12,
-        textAlign: 'right',
-        alignSelf: 'flex-end',
-        marginTop: tokens.spacing.wordLimitMarginTop
-      }]
-    }, content) : content;
-  })() : null;
-  const messageNode = (0, _validate.isRenderable)(errorMessage) ? (0, _validate.isText)(errorMessage) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    nativeID: errorId,
-    style: [tokens.layout.message, {
-      color: tokens.colors.error,
-      fontSize: tokens.typography.messageSize,
-      textAlign: errorMessageAlign,
-      marginTop: tokens.spacing.messageMarginTop
-    }, errorMessageStyle],
-    accessibilityLiveRegion: "polite"
-  }, errorMessage) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    nativeID: errorId,
-    style: [tokens.layout.message, {
-      alignSelf: alignMap[errorMessageAlign],
-      marginTop: tokens.spacing.messageMarginTop
-    }],
-    accessibilityLiveRegion: "polite"
-  }, errorMessage) : null;
-  const introNode = (0, _validate.isRenderable)(descriptionText) ? (0, _validate.isText)(descriptionText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    nativeID: introId,
-    style: [tokens.layout.message, {
-      color: tokens.colors.intro,
-      fontSize: tokens.typography.introSize,
-      textAlign: controlAlign,
-      marginTop: tokens.spacing.introMarginTop
-    }, introStyle]
-  }, descriptionText) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    nativeID: introId,
-    style: {
-      marginTop: tokens.spacing.introMarginTop
-    }
-  }, descriptionText) : null;
-  const prefixNode = prefix ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.prefix, {
-      paddingRight: tokens.spacing.prefixGap
-    }]
-  }, renderAffix(prefix)) : null;
-  const suffixNode = suffix ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.suffix, {
-      paddingLeft: tokens.spacing.suffixGap
-    }]
-  }, renderAffix(suffix)) : null;
-  const leftIconNode = leftIcon ? /*#__PURE__*/_react().default.createElement(FieldSlot, {
-    onPress: onClickLeftIcon,
-    style: [tokens.layout.leftIcon, {
-      marginRight: tokens.spacing.leftIconGap,
-      minWidth: tokens.sizes.icon
-    }]
-  }, leftIcon) : null;
-  const rightIconNode = rightIcon ? /*#__PURE__*/_react().default.createElement(FieldSlot, {
-    onPress: onClickRightIcon,
-    style: [tokens.layout.rightIcon, {
-      paddingHorizontal: tokens.spacing.rightIconGap
-    }]
-  }, rightIcon) : null;
-  const clearNode = showClear ? /*#__PURE__*/_react().default.createElement(FieldClearButton, {
-    show: showClear,
-    tokens: tokens,
-    clearIcon: clearIcon,
-    onPressIn: handleClearPressIn,
-    onPressOut: _reactNative().Platform.OS === 'web' ? handleClearPressOut : undefined,
-    onPress: _reactNative().Platform.OS === 'web' ? handleClear : undefined
-  }) : null;
-  return /*#__PURE__*/_react().default.createElement(_cell.default, {
-    title: labelNode,
-    icon: undefined,
-    required: required,
-    border: border,
-    center: center,
-    size: size,
-    clickable: clickable,
-    isLink: isLink,
-    arrowDirection: arrowDirection,
-    extra: extra,
-    titleStyle: titleS,
-    style: style,
-    contentStyle: contentWrapStyle,
-    accessibilityState: error ? {
-      invalid: true
-    } : undefined,
-    accessibilityLabel: (0, _validate.isText)(label) ? String(label) : undefined,
-    onPress: onClick,
-    android_ripple: androidRipple
-  }, /*#__PURE__*/_react().default.createElement(FieldControlRow, {
-    tokens: tokens,
-    prefixNode: prefixNode,
-    leftIconNode: leftIconNode,
-    controlNode: controlNode,
-    clearNode: clearNode,
-    rightIconNode: rightIconNode,
-    suffixNode: suffixNode
-  }), wordLimitNode, messageNode, introNode);
-};
-const FieldForwardRef = /*#__PURE__*/_react().default.forwardRef(FieldImpl);
-FieldForwardRef.displayName = 'Field';
-const Field = exports.Field = /*#__PURE__*/_react().default.memo(FieldForwardRef);
-var _default = exports.default = Field;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}function _reactNativeSystemIcon(){const e=require("react-native-system-icon");return _reactNativeSystemIcon=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Field=void 0;var _cell=_interopRequireDefault(require("../cell")),_dialog=_interopRequireDefault(require("../dialog")),_string=require("../../utils/string"),_validate=require("../../utils/validate"),_tokens=require("./tokens");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,l,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(i=t?a:r){if(i.has(e))return i.get(e);i.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(l.get||l.set)?i(n,t,l):n[t]=e[t]);return n})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}const alignMap={left:"flex-start",center:"center",right:"flex-end"},mapKeyboardType=e=>{switch(e){case"number":return"decimal-pad";case"digit":return"number-pad";case"tel":return"phone-pad";default:return}},FieldSlot=({onPress:e,style:t,children:r,accessibilityRole:a="button"})=>r?e?_react().default.createElement(_reactNative().Pressable,{onPress:e,accessibilityRole:a,style:t},r):_react().default.createElement(_reactNative().View,{style:t},r):null,FieldClearButton=({show:e,tokens:t,clearIcon:r,onPressIn:a,onPressOut:i,onPress:l})=>{if(!e)return null;const n="web"===_reactNative().Platform.OS?{onMouseDown:e=>{e.preventDefault?.(),e.stopPropagation?.()}}:void 0;return _react().default.createElement(_reactNative().Pressable,_extends({style:[t.layout.clearIcon,{paddingHorizontal:t.spacing.rightIconGap}]},n,{onPressIn:a,onPressOut:i,onPress:l,accessibilityRole:"button"}),_react().default.isValidElement(r)?r:_react().default.createElement(_reactNativeSystemIcon().Clear,{size:t.sizes.clearIcon,fill:t.colors.clear,color:t.colors.clear}))},FieldInput=({inputRef:e,tokens:t,isTextarea:r,disabled:a,error:i,finalTextAlign:l,lineHeight:n,textareaHeight:o,minHeight:c,inputStyle:s,value:u,onChangeText:d,onFocus:f,onBlur:_,onPressIn:g,rows:p,placeholderTextColor:m,keyboardType:y,onContentSizeChange:v,describedBy:b,secureTextEntry:h,editable:x,restInputProps:w})=>{const T=[r?t.layout.textarea:t.layout.input,{color:a?t.colors.disabled:i?t.colors.error:t.colors.input,fontSize:t.typography.inputSize,textAlign:l,...r?{lineHeight:n,height:o,minHeight:c}:{minHeight:t.sizes.controlMinHeight}},s];return _react().default.createElement(_reactNative().TextInput,_extends({ref:e,style:T,value:u,onChangeText:d,onFocus:f,onBlur:_,onPressIn:g,editable:x,secureTextEntry:h,multiline:r,numberOfLines:r?p:void 0,keyboardType:y,placeholderTextColor:m,onContentSizeChange:r?v:void 0},b?{accessibilityDescribedBy:b}:null,{clearButtonMode:"never"},w))},FieldControlRow=({tokens:e,prefixNode:t,leftIconNode:r,controlNode:a,clearNode:i,rightIconNode:l,suffixNode:n})=>_react().default.createElement(_reactNative().View,{style:e.layout.body},t,r,_react().default.createElement(_reactNative().View,{style:[e.layout.controlWrapper,{minHeight:e.sizes.controlMinHeight}]},a,i),l,n),FieldImpl=(e,t)=>{const{tokensOverride:r,label:a,labelWidth:i,labelAlign:l,inputAlign:n,controlAlign:o,required:c=!1,colon:s=!1,intro:u,description:d,tooltip:f,error:_=!1,errorMessage:g,errorMessageAlign:p="left",disabled:m=!1,readOnly:y=!1,clearable:v=!1,clearTrigger:b,clearIcon:h,leftIcon:x,rightIcon:w,prefix:T,suffix:S,button:R,extra:I,value:N,defaultValue:C="",type:k="text",rows:M,autoSize:P=!1,formatter:z,formatTrigger:E,showWordLimit:F=!1,onOverlimit:O,onClear:H,onClick:L,onClickInput:q,onClickLeftIcon:D,onClickRightIcon:A,border:B,center:W,clickable:V,isLink:j,arrowDirection:G,size:K,titleStyle:$,contentStyle:Q,inputStyle:J,labelStyle:U,introStyle:X,errorMessageStyle:Y,style:Z,androidRipple:ee,children:te,placeholderTextColor:re,onFocus:ae,onBlur:ie,onPressIn:le,onChangeText:ne,maxLength:oe,...ce}=e,se=(0,_tokens.useFieldTokens)(r),ue=i??se.defaults.labelWidth,de=l??se.defaults.labelAlign,fe=n??se.defaults.inputAlign,_e=o??se.defaults.controlAlign,ge=b??se.defaults.clearTrigger,pe=M??se.defaults.rows,me=E??se.defaults.formatTrigger,ye=[{width:ue,minWidth:ue,maxWidth:ue,flexBasis:ue,marginRight:se.spacing.labelGap,flexShrink:0,flexGrow:0},$],ve=S??R,be=u??d,he=re??(m?se.colors.disabled:se.colors.placeholder),xe="textarea"===k,we=void 0!==N,[Te,Se]=(0,_react().useState)(C),Re=we?N??"":Te,[Ie,Ne]=(0,_react().useState)(!1),[Ce,ke]=(0,_react().useState)(!1),Me=(0,_react().useRef)(!1),Pe=(0,_react().useRef)(null),ze=(0,_react().useId)(),Ee=(0,_react().useId)(),Fe=(0,_react().useMemo)(()=>{const e=[(0,_validate.isRenderable)(g)?Ee:null,(0,_validate.isRenderable)(be)?ze:null].filter(Boolean);return e.length?e:void 0},[Ee,g,ze,be]),Oe=se.defaults.textareaLineHeight,He=P&&(0,_validate.isObject)(P)?P:void 0,Le=xe?He&&(0,_validate.isDef)(He.minRows)?Math.max(1,He.minRows):Math.max(1,pe):1,qe=xe&&He&&(0,_validate.isDef)(He.maxRows)?Math.max(1,He.maxRows):void 0,De=(0,_react().useMemo)(()=>xe?Math.max(se.sizes.textareaMinHeight,Le*Oe):void 0,[xe,Oe,Le,se.sizes.textareaMinHeight]),Ae=(0,_react().useMemo)(()=>xe&&qe?Math.max(se.sizes.textareaMinHeight,qe*Oe):void 0,[xe,Oe,qe,se.sizes.textareaMinHeight]),[Be,We]=(0,_react().useState)(De),Ve=(0,_react().useRef)(ne);Ve.current=ne;const je=(0,_react().useRef)(O);je.current=O;const Ge=(0,_react().useRef)(ae);Ge.current=ae;const Ke=(0,_react().useRef)(ie);Ke.current=ie;const $e=(0,_react().useRef)(le);$e.current=le;const Qe=(0,_react().useRef)(q);Qe.current=q;const Je=(0,_react().useRef)(H);Je.current=H;const Ue=(0,_react().useCallback)((e,t="onChange")=>z&&t===me?z(e):e,[me,z]),Xe=(0,_react().useCallback)((e,t="onChange")=>{const r=Ue(e,t);we||Se(r),Ve.current?.(r)},[Ue,we]);(0,_react().useImperativeHandle)(t,()=>({focus:()=>Pe.current?.focus(),blur:()=>Pe.current?.blur(),clear:()=>Xe(""),get nativeElement(){return Pe.current}}));const Ye="left"!==_e?_e:fe,Ze=v&&!y&&""!==(Re??"")&&("always"===ge||"focus"===ge&&(Ie||Ce)),et=(0,_react().useCallback)(e=>{let t=e??"";if("number"===k||"digit"===k){const e="number"===k;t=(0,_string.formatNumberInput)(t,e,e)}(0,_validate.isFiniteNumber)(oe)&&oe>=0&&t.length>oe&&(je.current?.(t),t=t.slice(0,oe)),Xe(t,"onChange")},[oe,k,Xe]),tt=(0,_react().useCallback)(e=>{Ne(!0),Ge.current?.(e),y&&Pe.current?.blur()},[y]),rt=(0,_react().useCallback)(e=>{if("web"!==_reactNative().Platform.OS&&Me.current)return Me.current=!1,Ne(!1),void Ke.current?.(e);Xe(Re??"","onBlur"),Ne(!1),Ke.current?.(e)},[Xe,Re]),at=(0,_react().useCallback)(e=>{$e.current?.(e),Qe.current?.()},[]),it=(0,_react().useCallback)(e=>{if(!xe)return;const t=e.nativeEvent.contentSize?.height??0;if(!t)return;let r=t;P?(r=Math.max(De??t,t),Ae&&(r=Math.min(r,Ae))):De&&(r=Math.max(De,t)),We(r)},[P,xe,Ae,De]),lt=(0,_react().useCallback)(()=>{"web"!==_reactNative().Platform.OS&&(Me.current=!0),Xe(""),Pe.current?.clear?.(),Pe.current?.focus?.(),Je.current?.()},[Xe]),nt=(0,_react().useCallback)(()=>{ke(!0),"web"!==_reactNative().Platform.OS&&lt()},[lt]),ot=(0,_react().useCallback)(()=>{ke(!1),Me.current=!1},[]),ct=(0,_validate.isRenderable)(te)?_react().default.createElement(_reactNative().View,{style:[se.layout.children,{minHeight:se.sizes.controlMinHeight}]},te):_react().default.createElement(FieldInput,{inputRef:Pe,tokens:se,isTextarea:xe,disabled:m,error:_,finalTextAlign:Ye,lineHeight:Oe,textareaHeight:Be,minHeight:De,inputStyle:J,value:Re??"",onChangeText:et,onFocus:tt,onBlur:rt,onPressIn:at,rows:pe,keyboardType:ce.keyboardType??mapKeyboardType(k),placeholderTextColor:he,onContentSizeChange:it,describedBy:Fe,secureTextEntry:"password"===k,editable:!m&&!y,restInputProps:ce}),st=[{width:"100%",justifyContent:alignMap[_e]},Q],ut=e=>(0,_validate.isText)(e)?_react().default.createElement(_reactNative().Text,{style:[se.layout.affixText,{color:se.colors.input,fontSize:se.typography.inputSize}],numberOfLines:1},e):e,dt=(0,_validate.isRenderable)(f)?(()=>{const e=_react().default.createElement(_reactNativeSystemIcon().QuestionO,{size:se.sizes.icon,fill:se.colors.tooltip,color:se.colors.tooltip});let t=e,r={message:f};if(!_react().default.isValidElement(f)&&!(0,_validate.isText)(f)){const{icon:a,...i}=f;t=a??e,r=i}return _react().default.createElement(_reactNative().Pressable,{style:[se.layout.tooltip,{marginLeft:se.spacing.rightIconGap}],onPress:()=>_dialog.default.show(r),accessibilityRole:"button"},t)})():null,ft=(0,_validate.isRenderable)(a)?(()=>{const e=(0,_validate.isText)(a)?_react().default.createElement(_reactNative().Text,{style:[{color:m?se.colors.disabled:se.colors.label,fontSize:se.typography.labelSize,textAlign:de},U],numberOfLines:1},a,s?":":""):a;return _react().default.createElement(_reactNative().View,{style:se.layout.labelRow},e,dt)})():null,_t=F&&null!=oe?(()=>{const e=(Re??"").length,t=(0,_validate.isFunction)(F)?F({currentCount:e,maxLength:oe}):`${e}/${oe}`;return(0,_validate.isRenderable)(t)?(0,_validate.isText)(t)?_react().default.createElement(_reactNative().Text,{style:[se.layout.wordLimit,{color:se.colors.wordLimit,fontSize:se.typography.wordLimitSize??12,textAlign:"right",alignSelf:"flex-end",marginTop:se.spacing.wordLimitMarginTop}]},t):t:null})():null,gt=(0,_validate.isRenderable)(g)?(0,_validate.isText)(g)?_react().default.createElement(_reactNative().Text,{nativeID:Ee,style:[se.layout.message,{color:se.colors.error,fontSize:se.typography.messageSize,textAlign:p,marginTop:se.spacing.messageMarginTop},Y],accessibilityLiveRegion:"polite"},g):_react().default.createElement(_reactNative().View,{nativeID:Ee,style:[se.layout.message,{alignSelf:alignMap[p],marginTop:se.spacing.messageMarginTop}],accessibilityLiveRegion:"polite"},g):null,pt=(0,_validate.isRenderable)(be)?(0,_validate.isText)(be)?_react().default.createElement(_reactNative().Text,{nativeID:ze,style:[se.layout.message,{color:se.colors.intro,fontSize:se.typography.introSize,textAlign:_e,marginTop:se.spacing.introMarginTop},X]},be):_react().default.createElement(_reactNative().View,{nativeID:ze,style:{marginTop:se.spacing.introMarginTop}},be):null,mt=T?_react().default.createElement(_reactNative().View,{style:[se.layout.prefix,{paddingRight:se.spacing.prefixGap}]},ut(T)):null,yt=ve?_react().default.createElement(_reactNative().View,{style:[se.layout.suffix,{paddingLeft:se.spacing.suffixGap}]},ut(ve)):null,vt=x?_react().default.createElement(FieldSlot,{onPress:D,style:[se.layout.leftIcon,{marginRight:se.spacing.leftIconGap,minWidth:se.sizes.icon}]},x):null,bt=w?_react().default.createElement(FieldSlot,{onPress:A,style:[se.layout.rightIcon,{paddingHorizontal:se.spacing.rightIconGap}]},w):null,ht=Ze?_react().default.createElement(FieldClearButton,{show:Ze,tokens:se,clearIcon:h,onPressIn:nt,onPressOut:"web"===_reactNative().Platform.OS?ot:void 0,onPress:"web"===_reactNative().Platform.OS?lt:void 0}):null;return _react().default.createElement(_cell.default,{title:ft,icon:void 0,required:c,border:B,center:W,size:K,clickable:V,isLink:j,arrowDirection:G,extra:I,titleStyle:ye,style:Z,contentStyle:st,accessibilityState:_?{invalid:!0}:void 0,accessibilityLabel:(0,_validate.isText)(a)?String(a):void 0,onPress:L,android_ripple:ee},_react().default.createElement(FieldControlRow,{tokens:se,prefixNode:mt,leftIconNode:vt,controlNode:ct,clearNode:ht,rightIconNode:bt,suffixNode:yt}),_t,gt,pt)},FieldForwardRef=_react().default.forwardRef(FieldImpl);FieldForwardRef.displayName="Field";const Field=exports.Field=_react().default.memo(FieldForwardRef);var _default=exports.default=Field;

package/dist/cjs/components/field/index.js

@@ -1,29 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Field", {
-  enumerable: true,
-  get: function () {
-    return _Field.default;
-  }
-});
-Object.defineProperty(exports, "FieldGroup", {
-  enumerable: true,
-  get: function () {
-    return _cell.CellGroup;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "useFieldTokens", {
-  enumerable: true,
-  get: function () {
-    return _tokens.useFieldTokens;
-  }
-});
-var _Field = _interopRequireDefault(require("./Field"));
-var _cell = require("../cell");
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _Field.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Field",{enumerable:!0,get:function(){return _Field.default}}),Object.defineProperty(exports,"FieldGroup",{enumerable:!0,get:function(){return _cell.CellGroup}}),exports.default=void 0,Object.defineProperty(exports,"useFieldTokens",{enumerable:!0,get:function(){return _tokens.useFieldTokens}});var _Field=_interopRequireDefault(require("./Field")),_cell=require("../cell"),_tokens=require("./tokens");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=_Field.default;