x-ui-design 1.0.24 → 1.0.25
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.
- package/dist/esm/types/components/Input/Input.d.ts +4 -1
- package/dist/esm/types/index.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +8 -12
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +7 -11
- package/dist/index.js.map +1 -1
- package/lib/components/Input/Input.tsx +7 -12
- package/package.json +1 -1
|
@@ -2,7 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { InputProps } from '../../types/input';
|
|
3
3
|
import Textarea from './Textarea/Textarea';
|
|
4
4
|
import './style.css';
|
|
5
|
-
declare const InputComponent:
|
|
5
|
+
declare const InputComponent: {
|
|
6
|
+
({ size, error, suffix, prefix, addonAfter, addonBefore, onPressEnter, disabled, allowClear, prefixCls, prefixClsV3, className, value, iconRender, noStyle, feedbackIcons, mask, maskChar, maskRegex, __injected, defaultValue, child, ref, ...props }: InputProps): React.JSX.Element;
|
|
7
|
+
displayName: string;
|
|
8
|
+
};
|
|
6
9
|
declare const Input: typeof InputComponent & {
|
|
7
10
|
TextArea: typeof Textarea;
|
|
8
11
|
};
|
|
@@ -9,7 +9,7 @@ declare const RangePicker: import("react").ComponentType<import("@/types/datepic
|
|
|
9
9
|
declare const TimePicker: import("react").ComponentType<import("@/types/datepicker").TimePickerProps>;
|
|
10
10
|
declare const Form: import("react").ComponentType<import("@/types/form").FormProps>;
|
|
11
11
|
declare const FormItem: import("react").ComponentType<import("@/types/form").FormItemProps>;
|
|
12
|
-
declare const Input: import("react").ComponentType<
|
|
12
|
+
declare const Input: import("react").ComponentType<import("@/types/input").InputProps>;
|
|
13
13
|
declare const Textarea: import("react").ComponentType<import("@/types/input").TextareaProps>;
|
|
14
14
|
declare const Radio: import("react").ComponentType<import("@/types/radio").RadioProps>;
|
|
15
15
|
declare const RadioButton: import("react").ComponentType<import("@/types/radio").RadioButtonProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -122,7 +122,7 @@ declare const RangePicker: react.ComponentType<__types_datepicker.TRangePickerPr
|
|
|
122
122
|
declare const TimePicker: react.ComponentType<__types_datepicker.TimePickerProps>;
|
|
123
123
|
declare const Form: react.ComponentType<__types_form.FormProps>;
|
|
124
124
|
declare const FormItem: react.ComponentType<__types_form.FormItemProps>;
|
|
125
|
-
declare const Input: react.ComponentType<
|
|
125
|
+
declare const Input: react.ComponentType<__types_input.InputProps>;
|
|
126
126
|
declare const Textarea: react.ComponentType<__types_input.TextareaProps>;
|
|
127
127
|
declare const Radio: react.ComponentType<__types_radio.RadioProps>;
|
|
128
128
|
declare const RadioButton: react.ComponentType<__types_radio.RadioButtonProps>;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import require$$1 from 'react/jsx-runtime';
|
|
2
|
-
import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useEffect, useContext, useMemo, useCallback, createContext,
|
|
2
|
+
import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useEffect, useContext, useMemo, useCallback, createContext, useImperativeHandle, useLayoutEffect, cloneElement } from 'react';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
4
|
import ReactDOMServer from 'react-dom/server';
|
|
5
5
|
|
|
@@ -3848,7 +3848,7 @@ function applyMask(raw, mask, maskChar = MASK_CHAR) {
|
|
|
3848
3848
|
var css_248z$f = ".xUi-input-container{align-items:center;background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);display:flex;overflow:hidden}.xUi-input-container:not(.xUi-input-error):not(.xUi-input-disabled):has(.xUi-input):hover,.xUi-input-container:not(.xUi-input-error):not(.xUi-input-disabled):has(.xUi-input:focus){border:1px solid var(--xui-primary-color)}.xUi-input-container.xUi-input-error{border-color:var(--xui-error-color)}.xUi-input-container.xUi-input-error .error-svg-icon,.xUi-input-suffix .error-svg-icon{color:var(--xui-error-color)}.xUi-input-wrapper{align-items:center;display:flex;flex-grow:1;position:relative;transition:border .3s}.xUi-input,.xUi-input-wrapper{background-color:transparent;height:-webkit-fill-available}.xUi-input{border:none;color:var(--xui-text-color);flex:1;outline:none;padding:.1px 7px;width:100%}.xUi-input:placeholder-shown{text-overflow:ellipsis}.xUi-input::placeholder{color:var(--xui-text-color);opacity:.6}.xUi-input-prefix,.xUi-input-suffix{background-color:transparent;gap:4px}.xUi-input-addon,.xUi-input-prefix,.xUi-input-suffix{align-items:center;color:var(--xui-text-color);display:flex;height:-webkit-fill-available;padding:0 7px}.xUi-input-addon.xUi-input-after{border-left:1px solid var(--xui-border-color)}.xUi-input-addon.xUi-input-before{border-right:1px solid var(--xui-border-color)}.xUi-input-large .xUi-input-addon{padding:0 10px}.xUi-input-clear{align-items:center;cursor:pointer;display:flex;margin:0 5px;position:relative;width:16px}.xUi-input-clear svg{color:var(--xui-text-color)}.xUi-input-disabled,.xUi-input-disabled .xUi-input,.xUi-input-disabled .xUi-input-suffix{background-color:var(--xui-color-disabled);cursor:not-allowed}.xUi-input-small{height:22px}.xUi-input-large .xUi-input-clear,.xUi-input-small .xUi-input,.xUi-input-small .xUi-input::placeholder{font-size:var(--xui-font-size-md)}.xUi-input-middle{border-radius:var(--xui-border-radius-md);height:30px}.xUi-input-large .xUi-input-clear,.xUi-input-middle .xUi-input,.xUi-input-middle .xUi-input::placeholder{font-size:var(--xui-font-size-md)}.xUi-input-large{border-radius:var(--xui-border-radius-lg);height:44px}.xUi-input-large .xUi-input,.xUi-input-large .xUi-input-clear,.xUi-input-large .xUi-input::placeholder{font-size:var(--xui-font-size-lg)}";
|
|
3849
3849
|
styleInject(css_248z$f);
|
|
3850
3850
|
|
|
3851
|
-
const InputComponent =
|
|
3851
|
+
const InputComponent = ({
|
|
3852
3852
|
size = 'large',
|
|
3853
3853
|
error,
|
|
3854
3854
|
suffix,
|
|
@@ -3876,8 +3876,9 @@ const InputComponent = /*#__PURE__*/forwardRef(({
|
|
|
3876
3876
|
defaultValue,
|
|
3877
3877
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
3878
3878
|
child,
|
|
3879
|
+
ref,
|
|
3879
3880
|
...props
|
|
3880
|
-
}
|
|
3881
|
+
}) => {
|
|
3881
3882
|
const inputRef = useRef(null);
|
|
3882
3883
|
const lastKeyPressed = useRef(null);
|
|
3883
3884
|
const internalValue = mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '';
|
|
@@ -3885,13 +3886,8 @@ const InputComponent = /*#__PURE__*/forwardRef(({
|
|
|
3885
3886
|
const [iconRenderVisible, setIconRenderVisible] = useState(false);
|
|
3886
3887
|
const animationRef = useRef(null);
|
|
3887
3888
|
useImperativeHandle(ref, () => ({
|
|
3888
|
-
focus: () =>
|
|
3889
|
-
|
|
3890
|
-
inputRef.current?.focus();
|
|
3891
|
-
},
|
|
3892
|
-
blur: () => {
|
|
3893
|
-
inputRef.current?.blur();
|
|
3894
|
-
},
|
|
3889
|
+
focus: () => inputRef.current?.focus(),
|
|
3890
|
+
blur: () => inputRef.current?.blur(),
|
|
3895
3891
|
input: inputRef.current,
|
|
3896
3892
|
nativeElement: inputRef.current,
|
|
3897
3893
|
setSelectionRange: (start, end) => {
|
|
@@ -3899,7 +3895,7 @@ const InputComponent = /*#__PURE__*/forwardRef(({
|
|
|
3899
3895
|
inputRef.current.setSelectionRange(start, end);
|
|
3900
3896
|
}
|
|
3901
3897
|
}
|
|
3902
|
-
})
|
|
3898
|
+
}));
|
|
3903
3899
|
useEffect(() => {
|
|
3904
3900
|
setMaskValue(mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '');
|
|
3905
3901
|
}, [value, mask, maskChar]);
|
|
@@ -3991,7 +3987,7 @@ const InputComponent = /*#__PURE__*/forwardRef(({
|
|
|
3991
3987
|
} : {}), suffix || iconRender?.(iconRenderVisible), error && feedbackIcons ? /*#__PURE__*/React.createElement(ErrorIcon, null) : null)), addonAfter ? /*#__PURE__*/React.createElement("span", {
|
|
3992
3988
|
className: `${prefixCls}-addon ${prefixCls}-after ${prefixClsV3}-addon ${prefixClsV3}-after`
|
|
3993
3989
|
}, addonAfter) : null);
|
|
3994
|
-
}
|
|
3990
|
+
};
|
|
3995
3991
|
InputComponent.displayName = 'Input';
|
|
3996
3992
|
const Input$1 = InputComponent;
|
|
3997
3993
|
Input$1.TextArea = Textarea;
|