x-ui-design 1.0.23 → 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 -7
- package/dist/esm/types/index.d.ts +1 -7
- package/dist/index.d.ts +1 -7
- package/dist/index.esm.js +11 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +10 -5
- package/dist/index.js.map +1 -1
- package/lib/components/Input/Input.tsx +10 -6
- package/package.json +1 -1
|
@@ -2,13 +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:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
nativeElement: HTMLInputElement | null;
|
|
10
|
-
setSelectionRange: (start: number, end: number) => void;
|
|
11
|
-
}>>;
|
|
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
|
+
};
|
|
12
9
|
declare const Input: typeof InputComponent & {
|
|
13
10
|
TextArea: typeof Textarea;
|
|
14
11
|
};
|
|
@@ -9,13 +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<
|
|
13
|
-
focus: () => void;
|
|
14
|
-
blur: () => void;
|
|
15
|
-
input: HTMLInputElement | null;
|
|
16
|
-
nativeElement: HTMLInputElement | null;
|
|
17
|
-
setSelectionRange: (start: number, end: number) => void;
|
|
18
|
-
}>>;
|
|
12
|
+
declare const Input: import("react").ComponentType<import("@/types/input").InputProps>;
|
|
19
13
|
declare const Textarea: import("react").ComponentType<import("@/types/input").TextareaProps>;
|
|
20
14
|
declare const Radio: import("react").ComponentType<import("@/types/radio").RadioProps>;
|
|
21
15
|
declare const RadioButton: import("react").ComponentType<import("@/types/radio").RadioButtonProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -122,13 +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<
|
|
126
|
-
focus: () => void;
|
|
127
|
-
blur: () => void;
|
|
128
|
-
input: HTMLInputElement | null;
|
|
129
|
-
nativeElement: HTMLInputElement | null;
|
|
130
|
-
setSelectionRange: (start: number, end: number) => void;
|
|
131
|
-
}>>;
|
|
125
|
+
declare const Input: react.ComponentType<__types_input.InputProps>;
|
|
132
126
|
declare const Textarea: react.ComponentType<__types_input.TextareaProps>;
|
|
133
127
|
declare const Radio: react.ComponentType<__types_radio.RadioProps>;
|
|
134
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,
|
|
@@ -3872,10 +3872,13 @@ const InputComponent = /*#__PURE__*/forwardRef(({
|
|
|
3872
3872
|
// @ts-expect-error
|
|
3873
3873
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
3874
3874
|
__injected,
|
|
3875
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
3875
3876
|
defaultValue,
|
|
3877
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
3876
3878
|
child,
|
|
3879
|
+
ref,
|
|
3877
3880
|
...props
|
|
3878
|
-
}
|
|
3881
|
+
}) => {
|
|
3879
3882
|
const inputRef = useRef(null);
|
|
3880
3883
|
const lastKeyPressed = useRef(null);
|
|
3881
3884
|
const internalValue = mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '';
|
|
@@ -3888,9 +3891,11 @@ const InputComponent = /*#__PURE__*/forwardRef(({
|
|
|
3888
3891
|
input: inputRef.current,
|
|
3889
3892
|
nativeElement: inputRef.current,
|
|
3890
3893
|
setSelectionRange: (start, end) => {
|
|
3891
|
-
inputRef.current
|
|
3894
|
+
if (inputRef.current) {
|
|
3895
|
+
inputRef.current.setSelectionRange(start, end);
|
|
3896
|
+
}
|
|
3892
3897
|
}
|
|
3893
|
-
})
|
|
3898
|
+
}));
|
|
3894
3899
|
useEffect(() => {
|
|
3895
3900
|
setMaskValue(mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '');
|
|
3896
3901
|
}, [value, mask, maskChar]);
|
|
@@ -3982,7 +3987,7 @@ const InputComponent = /*#__PURE__*/forwardRef(({
|
|
|
3982
3987
|
} : {}), suffix || iconRender?.(iconRenderVisible), error && feedbackIcons ? /*#__PURE__*/React.createElement(ErrorIcon, null) : null)), addonAfter ? /*#__PURE__*/React.createElement("span", {
|
|
3983
3988
|
className: `${prefixCls}-addon ${prefixCls}-after ${prefixClsV3}-addon ${prefixClsV3}-after`
|
|
3984
3989
|
}, addonAfter) : null);
|
|
3985
|
-
}
|
|
3990
|
+
};
|
|
3986
3991
|
InputComponent.displayName = 'Input';
|
|
3987
3992
|
const Input$1 = InputComponent;
|
|
3988
3993
|
Input$1.TextArea = Textarea;
|