x-ui-design 1.0.15 → 1.0.17
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 +6 -3
- package/dist/esm/types/index.d.ts +1 -1
- package/dist/esm/types/types/input.d.ts +2 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.esm.js +6 -9
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +6 -9
- package/dist/index.js.map +1 -1
- package/lib/components/Input/Input.tsx +9 -13
- package/lib/index.ts +1 -1
- package/lib/types/input.ts +2 -2
- package/package.json +1 -1
|
@@ -2,14 +2,17 @@ import React from 'react';
|
|
|
2
2
|
import { InputProps } from '../../types/input';
|
|
3
3
|
import Textarea from './Textarea/Textarea';
|
|
4
4
|
import './style.css';
|
|
5
|
-
interface
|
|
5
|
+
export interface MyInputHandle {
|
|
6
6
|
focus: () => void;
|
|
7
|
-
input: HTMLInputElement | null;
|
|
8
7
|
blur: () => void;
|
|
8
|
+
input: HTMLInputElement | null;
|
|
9
9
|
nativeElement: HTMLInputElement | null;
|
|
10
10
|
setSelectionRange: (start: number, end: number) => void;
|
|
11
11
|
}
|
|
12
|
-
declare const InputComponent:
|
|
12
|
+
declare const InputComponent: {
|
|
13
|
+
({ 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;
|
|
14
|
+
displayName: string;
|
|
15
|
+
};
|
|
13
16
|
declare const Input: typeof InputComponent & {
|
|
14
17
|
TextArea: typeof Textarea;
|
|
15
18
|
};
|
|
@@ -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:
|
|
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>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, ForwardedRef, InputHTMLAttributes, KeyboardEvent, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode, TextareaHTMLAttributes } from 'react';
|
|
2
|
-
import { DefaultProps, SizeType, SyntheticBaseEvent } from '.';
|
|
2
|
+
import { DefaultProps, RuleType, SizeType, SyntheticBaseEvent } from '.';
|
|
3
3
|
export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> & DefaultProps & {
|
|
4
4
|
addonBefore?: ReactNode;
|
|
5
5
|
addonAfter?: ReactNode;
|
|
@@ -23,7 +23,7 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'p
|
|
|
23
23
|
mask?: string;
|
|
24
24
|
maskChar?: string;
|
|
25
25
|
maskRegex?: RegExp;
|
|
26
|
-
ref?:
|
|
26
|
+
ref?: RuleType;
|
|
27
27
|
};
|
|
28
28
|
export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'> & DefaultProps & {
|
|
29
29
|
value?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -14,7 +14,6 @@ import * as __types_radio from '@/types/radio';
|
|
|
14
14
|
export { RadioButtonProps, RadioGroupProps, RadioProps } from '@/types/radio';
|
|
15
15
|
import * as __types_input from '@/types/input';
|
|
16
16
|
export { InputProps, TextareaProps } from '@/types/input';
|
|
17
|
-
import * as __components_Input_Input from '@/components/Input/Input';
|
|
18
17
|
import * as __types_form from '@/types/form';
|
|
19
18
|
export { FieldData, FieldError, FieldInstancesInputRef, FormInstance, FormItemChildComponentProps, FormProps, RuleObject, RuleRender } from '@/types/form';
|
|
20
19
|
import * as __types_datepicker from '@/types/datepicker';
|
|
@@ -123,7 +122,7 @@ declare const RangePicker: react.ComponentType<__types_datepicker.TRangePickerPr
|
|
|
123
122
|
declare const TimePicker: react.ComponentType<__types_datepicker.TimePickerProps>;
|
|
124
123
|
declare const Form: react.ComponentType<__types_form.FormProps>;
|
|
125
124
|
declare const FormItem: react.ComponentType<__types_form.FormItemProps>;
|
|
126
|
-
declare const Input:
|
|
125
|
+
declare const Input: react.ComponentType<__types_input.InputProps>;
|
|
127
126
|
declare const Textarea: react.ComponentType<__types_input.TextareaProps>;
|
|
128
127
|
declare const Radio: react.ComponentType<__types_radio.RadioProps>;
|
|
129
128
|
declare const RadioButton: react.ComponentType<__types_radio.RadioButtonProps>;
|
package/dist/index.esm.js
CHANGED
|
@@ -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__*/React.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,9 @@ const InputComponent = /*#__PURE__*/React.forwardRef(({
|
|
|
3885
3886
|
const [iconRenderVisible, setIconRenderVisible] = useState(false);
|
|
3886
3887
|
const animationRef = useRef(null);
|
|
3887
3888
|
useImperativeHandle(ref, () => ({
|
|
3888
|
-
focus: () =>
|
|
3889
|
-
inputRef.current?.focus();
|
|
3890
|
-
},
|
|
3889
|
+
focus: () => inputRef.current?.focus(),
|
|
3891
3890
|
input: inputRef.current,
|
|
3892
|
-
blur: () =>
|
|
3893
|
-
inputRef.current?.blur();
|
|
3894
|
-
},
|
|
3891
|
+
blur: () => inputRef.current?.blur(),
|
|
3895
3892
|
nativeElement: inputRef.current,
|
|
3896
3893
|
setSelectionRange: (start, end) => {
|
|
3897
3894
|
if (inputRef.current) {
|
|
@@ -3990,7 +3987,7 @@ const InputComponent = /*#__PURE__*/React.forwardRef(({
|
|
|
3990
3987
|
} : {}), suffix || iconRender?.(iconRenderVisible), error && feedbackIcons ? /*#__PURE__*/React.createElement(ErrorIcon, null) : null)), addonAfter ? /*#__PURE__*/React.createElement("span", {
|
|
3991
3988
|
className: `${prefixCls}-addon ${prefixCls}-after ${prefixClsV3}-addon ${prefixClsV3}-after`
|
|
3992
3989
|
}, addonAfter) : null);
|
|
3993
|
-
}
|
|
3990
|
+
};
|
|
3994
3991
|
InputComponent.displayName = 'Input';
|
|
3995
3992
|
const Input$1 = InputComponent;
|
|
3996
3993
|
Input$1.TextArea = Textarea;
|