x-ui-design 0.4.43 → 0.4.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { FormItemProps } from '../../../types/form';
3
3
  import './style.css';
4
4
  declare const FormItem: {
5
- ({ prefixCls, name, label, rules, children, className, layout, style, dependencies, initialValue, feedbackIcons, extra, ...props }: FormItemProps): React.JSX.Element;
5
+ ({ prefixCls, name, label, rules, children, className, layout, style, dependencies, initialValue, feedbackIcons, extra, removeErrorMessageHeight, ...props }: FormItemProps): React.JSX.Element;
6
6
  displayName: string;
7
7
  };
8
8
  export default FormItem;
@@ -67,6 +67,7 @@ export type FormItemProps = DefaultProps & {
67
67
  normalize?: (value: RuleType, prevValue: RuleType, allValues: RuleType) => RuleType;
68
68
  feedbackIcons?: boolean;
69
69
  extra?: ReactNode;
70
+ removeErrorMessageHeight?: boolean;
70
71
  };
71
72
  export interface FormItemChildComponentProps {
72
73
  child: ReactElement;
package/dist/index.esm.js CHANGED
@@ -942,7 +942,7 @@ function flattenChildren(children) {
942
942
  return result;
943
943
  }
944
944
 
945
- var css_248z$l = ".xUi-form-item{display:flex;position:relative}.xUi-form-item.noStyle{display:inline-flex;margin-bottom:0}.xUi-form-item-label{align-items:center;color:var(--xui-text-color);display:flex;font-size:var(--xui-font-size-md);font-weight:500;line-height:20px;margin-bottom:4px}.xUi-form-item-error{bottom:10px;color:var(--xui-error-color);display:block;font-size:var(--xui-font-size-xs);line-height:16px;min-height:16px;position:relative;right:0;text-align:end;user-select:none}.xUi-form-item-required{color:var(--xui-error-color);display:inline-block;font-size:var(--xui-font-size-md);line-height:1;margin-left:4px;margin-right:4px}.xUi-form-item.horizontal{align-items:center;flex-direction:row;gap:4px}.xUi-form-item.vertical{align-self:flex-start;flex-direction:column}.xUi-form-item .xUi-input-container{margin-bottom:12px!important;width:-webkit-fill-available}.xUi-form-item .xUi-datepicker-container{margin-bottom:10px}.xUi-form-item .xUi-select{margin-bottom:15px}.xUi-form-item-extra{left:0;margin-top:6px;position:absolute;right:0}";
945
+ var css_248z$l = ".xUi-form-item{display:flex;position:relative}.xUi-form-item.noStyle{display:inline-flex;margin-bottom:0}.xUi-form-item-label{align-items:center;color:var(--xui-text-color);display:flex;font-size:var(--xui-font-size-md);font-weight:500;line-height:20px;margin-bottom:4px}.xUi-form-item-error{color:var(--xui-error-color);display:block;font-size:var(--xui-font-size-xs);line-height:16px;margin-bottom:12px;min-height:16px;position:relative;right:0;text-align:end;user-select:none}.xUi-form-item-required{color:var(--xui-error-color);display:inline-block;font-size:var(--xui-font-size-md);line-height:1;margin-left:4px;margin-right:4px}.xUi-form-item.horizontal{align-items:center;flex-direction:row;gap:4px}.xUi-form-item.vertical{align-self:flex-start;flex-direction:column}.xUi-form-item .xUi-input-container{width:-webkit-fill-available}";
946
946
  styleInject(css_248z$l);
947
947
 
948
948
  // const REF_CLIENT_HEIGHT = 24;
@@ -959,6 +959,7 @@ const FormItem$1 = ({
959
959
  initialValue,
960
960
  feedbackIcons,
961
961
  extra,
962
+ removeErrorMessageHeight = false,
962
963
  ...props
963
964
  }) => {
964
965
  const formContext = useContext(FormContext);
@@ -1000,16 +1001,6 @@ const FormItem$1 = ({
1000
1001
  }
1001
1002
  // eslint-disable-next-line react-hooks/exhaustive-deps
1002
1003
  }, [dependencies, name]);
1003
- // useEffect(() => {
1004
- // if (
1005
- // errorRef.current &&
1006
- // errorRef.current?.clientHeight >= REF_CLIENT_HEIGHT
1007
- // ) {
1008
- // errorRef.current.style.position = 'relative';
1009
- // errorRef.current.style.marginTop = '-16px';
1010
- // }
1011
- // // eslint-disable-next-line react-hooks/exhaustive-deps
1012
- // }, [errorRef.current]);
1013
1004
  const isRequired = useMemo(() => rules.some(rule => rule.required), [rules]);
1014
1005
  const errorMessage = getFieldError(name)?.[0];
1015
1006
  return /*#__PURE__*/React.createElement("div", {
@@ -1054,7 +1045,12 @@ const FormItem$1 = ({
1054
1045
  className: `${prefixCls}-extra`
1055
1046
  }, extra) : null, !props.noStyle && /*#__PURE__*/React.createElement("span", {
1056
1047
  ref: errorRef,
1057
- className: `${prefixCls}-error`
1048
+ className: `${prefixCls}-error`,
1049
+ style: {
1050
+ ...(removeErrorMessageHeight ? {
1051
+ minHeight: 0
1052
+ } : {})
1053
+ }
1058
1054
  }, errorMessage || ''));
1059
1055
  }
1060
1056
  return child;