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
package/dist/index.js
CHANGED
|
@@ -3850,7 +3850,7 @@ function applyMask(raw, mask, maskChar = MASK_CHAR) {
|
|
|
3850
3850
|
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)}";
|
|
3851
3851
|
styleInject(css_248z$f);
|
|
3852
3852
|
|
|
3853
|
-
const InputComponent =
|
|
3853
|
+
const InputComponent = ({
|
|
3854
3854
|
size = 'large',
|
|
3855
3855
|
error,
|
|
3856
3856
|
suffix,
|
|
@@ -3878,8 +3878,9 @@ const InputComponent = /*#__PURE__*/React.forwardRef(({
|
|
|
3878
3878
|
defaultValue,
|
|
3879
3879
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
3880
3880
|
child,
|
|
3881
|
+
ref,
|
|
3881
3882
|
...props
|
|
3882
|
-
}
|
|
3883
|
+
}) => {
|
|
3883
3884
|
const inputRef = React.useRef(null);
|
|
3884
3885
|
const lastKeyPressed = React.useRef(null);
|
|
3885
3886
|
const internalValue = mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '';
|
|
@@ -3887,13 +3888,8 @@ const InputComponent = /*#__PURE__*/React.forwardRef(({
|
|
|
3887
3888
|
const [iconRenderVisible, setIconRenderVisible] = React.useState(false);
|
|
3888
3889
|
const animationRef = React.useRef(null);
|
|
3889
3890
|
React.useImperativeHandle(ref, () => ({
|
|
3890
|
-
focus: () =>
|
|
3891
|
-
|
|
3892
|
-
inputRef.current?.focus();
|
|
3893
|
-
},
|
|
3894
|
-
blur: () => {
|
|
3895
|
-
inputRef.current?.blur();
|
|
3896
|
-
},
|
|
3891
|
+
focus: () => inputRef.current?.focus(),
|
|
3892
|
+
blur: () => inputRef.current?.blur(),
|
|
3897
3893
|
input: inputRef.current,
|
|
3898
3894
|
nativeElement: inputRef.current,
|
|
3899
3895
|
setSelectionRange: (start, end) => {
|
|
@@ -3901,7 +3897,7 @@ const InputComponent = /*#__PURE__*/React.forwardRef(({
|
|
|
3901
3897
|
inputRef.current.setSelectionRange(start, end);
|
|
3902
3898
|
}
|
|
3903
3899
|
}
|
|
3904
|
-
})
|
|
3900
|
+
}));
|
|
3905
3901
|
React.useEffect(() => {
|
|
3906
3902
|
setMaskValue(mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '');
|
|
3907
3903
|
}, [value, mask, maskChar]);
|
|
@@ -3993,7 +3989,7 @@ const InputComponent = /*#__PURE__*/React.forwardRef(({
|
|
|
3993
3989
|
} : {}), suffix || iconRender?.(iconRenderVisible), error && feedbackIcons ? /*#__PURE__*/React.createElement(ErrorIcon, null) : null)), addonAfter ? /*#__PURE__*/React.createElement("span", {
|
|
3994
3990
|
className: `${prefixCls}-addon ${prefixCls}-after ${prefixClsV3}-addon ${prefixClsV3}-after`
|
|
3995
3991
|
}, addonAfter) : null);
|
|
3996
|
-
}
|
|
3992
|
+
};
|
|
3997
3993
|
InputComponent.displayName = 'Input';
|
|
3998
3994
|
const Input$1 = InputComponent;
|
|
3999
3995
|
Input$1.TextArea = Textarea;
|