@itcase/ui-web 1.9.83 → 1.9.85
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/cjs/components/InputNumber.js +1 -1
- package/dist/components/InputNumber.js +1 -1
- package/dist/css/styles/bundles.css +4 -0
- package/dist/types/components/InputNumber/InputNumber.interfaces.d.ts +7 -2
- package/dist/types/components/InputNumber/InputNumber.js +13 -14
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),o=require("@itcase/ui-core/hooks"),n=require("../../Button_cjs_CKSxHfMM.js"),s=require("../../default_cjs_lUT82fjL.js");require("@itcase/ui-core/utils"),require("../../primitives_cjs_C-jtJ9pL.js"),require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("../../Loader_cjs_BFLrUlMX.js"),require("@itcase/common");const
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),o=require("@itcase/ui-core/hooks"),n=require("../../Button_cjs_CKSxHfMM.js"),s=require("../../default_cjs_lUT82fjL.js");require("@itcase/ui-core/utils"),require("../../primitives_cjs_C-jtJ9pL.js"),require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("../../Loader_cjs_BFLrUlMX.js"),require("@itcase/common");const a={defaultPrimary:{fill:"surfaceSecondary",labelTextWeight:"400",borderColor:"surfaceBorderQuaternary",borderHover:"surfaceBorderHoverQuaternary",iconFill:"surfaceSecondary",iconFillHover:"surfaceHoverSecondary",iconFillIcon:"surfaceItemQuaternary",iconMinus:s.icons24.Form.Minus,iconPlus:s.icons24.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},u={errorPrimary:{fill:"errorTertiary",labelTextWeight:"400",borderColor:"errorBorderQuaternary",borderHover:"errorBorderHoverQuaternary",iconFill:"errorTertiary",iconFillHover:"errorHoverSecondary",iconFillIcon:"errorItemQuaternary",iconMinus:s.icons24.Form.Minus,iconPlus:s.icons24.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},t={requirePrimary:{fill:"warningTertiary",labelTextWeight:"400",borderColor:"warningBorderQuaternary",borderHover:"warningBorderHoverQuaternary",iconFill:"warningTertiary",iconFillHover:"warningHoverSecondary",iconFillIcon:"warningItemQuaternary",iconMinus:s.icons24.Form.Minus,iconPlus:s.icons24.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},l={...a,...u,...{successPrimary:{fill:"successTertiary",labelTextWeight:"400",borderColor:"successBorderQuaternary",borderHover:"successBorderHoverQuaternary",iconFill:"successTertiary",iconFillHover:"successHoverSecondary",iconFillIcon:"successItemQuaternary",iconMinus:s.icons24.Form.Minus,iconPlus:s.icons24.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"rounded"},roundedL:{shape:"rounded"},roundedM:{shape:"rounded"},roundedS:{shape:"rounded"},sizeXL:{size:"xl",iconSize:"24",inputNumberTextSize:"xl"},sizeL:{size:"l",iconSize:"24",inputNumberTextSize:"l"},sizeM:{size:"m",iconSize:"24",inputNumberTextSize:"m"},sizeS:{size:"s",iconSize:"24",inputNumberTextSize:"s"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{borderColor:"none"},ghost:{fill:"none",borderColor:"none"},...t},c={appearance:l,setAppearance:e=>{c.appearance=e}};exports.InputNumber=s=>{const{id:a,appearance:u,className:t,dataTestId:l,dataTour:d,type:m="custom",name:p,min:b=0,max:v=1/0,step:x=1,value:y=0,onChange:C}=s,[h,F]=r.useState(y),_=r.useCallback(e=>{const{event:r,mode:i="button",operation:o}=e;let n;if("input"===i)n=Number(r?.target.value);else{n=h+("minus"===o?-x:x)}if(n<b||n>v)return null;F(n),C?.(n)},[v,b,h,C,x]),T=o.useAppearanceConfig(u,c),f=o.useDevicePropsGenerator(s,T),{fillClass:S,fillHoverClass:z,borderColorClass:g,borderColorHoverClass:H,borderWidthClass:N,iconFill:Q,iconFillHover:j,iconFillIcon:q,iconMinus:P,iconPlus:I,iconShape:$,iconSize:B,inputNumberTextColorClass:M,inputNumberTextSizeClass:w,inputNumberTextWeightClass:W,shapeClass:L,sizeClass:k,widthClass:A}=f;return"native"===m?e.jsx("input",{id:String(a),type:"number",min:b,max:v,step:x,value:h,onChange:e=>_({event:e,mode:"input"})}):e.jsxs("div",{id:String(a),className:i(t,"input-number","input-number__custom",g&&`border-color_${g}`,H&&`border-color_hover_${H}`,N&&`border-width_${N}`,S&&`fill_${S}`,z&&`fill_hover_${z}`,L&&`shape_${L}`,k&&`input-number_size_${k}`,A&&`width_${A}`),"data-tour":d,"date-testid":l,children:[e.jsx(n.Button,{className:"input-number__icon",icon:P,iconFill:Q,iconFillHover:j,iconFillIcon:q,iconShape:$,iconSize:B,onClick:()=>_({operation:"minus"})}),e.jsx("input",{className:i(M&&`text-color_${M}`,w&&`text_size_${w}`,W&&`text-weight_${W}`),type:"number",min:b,max:v,"data-testid":l||(p?`${p}-input-number`:"input-number"),step:x,value:h,onChange:e=>_({event:e,mode:"input"})}),e.jsx(n.Button,{className:"input-number__icon",icon:I,iconFill:Q,iconFillHover:j,iconFillIcon:q,iconShape:$,iconSize:B,onClick:()=>_({operation:"plus"})})]})},exports.inputNumberAppearance=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as o,useCallback as i}from"react";import n from"clsx";import{useAppearanceConfig as t,useDevicePropsGenerator as a}from"@itcase/ui-core/hooks";import{B as l}from"../Button_es_byVASRY8.js";import{i as s}from"../default_es_l85QutMi.js";import"@itcase/ui-core/utils";import"../primitives_es_CJQjjxtH.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"../Loader_es_pnhZ5s_O.js";import"@itcase/common";const u={defaultPrimary:{fill:"surfaceSecondary",labelTextWeight:"400",borderColor:"surfaceBorderQuaternary",borderHover:"surfaceBorderHoverQuaternary",iconFill:"surfaceSecondary",iconFillHover:"surfaceHoverSecondary",iconFillIcon:"surfaceItemQuaternary",iconMinus:s.Form.Minus,iconPlus:s.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},c={errorPrimary:{fill:"errorTertiary",labelTextWeight:"400",borderColor:"errorBorderQuaternary",borderHover:"errorBorderHoverQuaternary",iconFill:"errorTertiary",iconFillHover:"errorHoverSecondary",iconFillIcon:"errorItemQuaternary",iconMinus:s.Form.Minus,iconPlus:s.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},m={requirePrimary:{fill:"warningTertiary",labelTextWeight:"400",borderColor:"warningBorderQuaternary",borderHover:"warningBorderHoverQuaternary",iconFill:"warningTertiary",iconFillHover:"warningHoverSecondary",iconFillIcon:"warningItemQuaternary",iconMinus:s.Form.Minus,iconPlus:s.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},d={...u,...c,...{successPrimary:{fill:"successTertiary",labelTextWeight:"400",borderColor:"successBorderQuaternary",borderHover:"successBorderHoverQuaternary",iconFill:"successTertiary",iconFillHover:"successHoverSecondary",iconFillIcon:"successItemQuaternary",iconMinus:s.Form.Minus,iconPlus:s.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"rounded"},roundedL:{shape:"rounded"},roundedM:{shape:"rounded"},roundedS:{shape:"rounded"},sizeXL:{size:"xl",iconSize:"24",inputNumberTextSize:"xl"},sizeL:{size:"l",iconSize:"24",inputNumberTextSize:"l"},sizeM:{size:"m",iconSize:"24",inputNumberTextSize:"m"},sizeS:{size:"s",iconSize:"24",inputNumberTextSize:"s"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{borderColor:"none"},ghost:{fill:"none",borderColor:"none"},...m},p={appearance:d,setAppearance:e=>{p.appearance=e}},b=s=>{const{id:u,appearance:c,className:m,dataTestId:d,dataTour:b,type:y="custom",name:v,min:f=0,max:h=1/0,step:x=1,value:C=0,onChange:F}=s,[_,T]=o(C),S=i(e=>{const{event:r,mode:o="button",operation:i}=e;let n;if("input"===o)n=Number(r?.target.value);else{n=_+("minus"===i?-x:x)}if(n<f||n>h)return null;T(n),F?.(n)},[h,f,_,F,x]),z=t(c,p),H=a(s,z),{fillClass:g,fillHoverClass:N,borderColorClass:Q,borderColorHoverClass:P,borderWidthClass:I,iconFill:$,iconFillHover:M,iconFillIcon:w,iconMinus:B,iconPlus:W,iconShape:j,iconSize:L,inputNumberTextColorClass:k,inputNumberTextSizeClass:X,inputNumberTextWeightClass:q,shapeClass:A,sizeClass:D,widthClass:E}=H;return"native"===y?e("input",{id:String(u),type:"number",min:f,max:h,step:x,value:_,onChange:e=>S({event:e,mode:"input"})}):r("div",{id:String(u),className:n(m,"input-number","input-number__custom",Q&&`border-color_${Q}`,P&&`border-color_hover_${P}`,I&&`border-width_${I}`,g&&`fill_${g}`,N&&`fill_hover_${N}`,A&&`shape_${A}`,D&&`input-number_size_${D}`,E&&`width_${E}`),"data-tour":b,"date-testid":d,children:[e(l,{className:"input-number__icon",icon:B,iconFill:$,iconFillHover:M,iconFillIcon:w,iconShape:j,iconSize:L,onClick:()=>S({operation:"minus"})}),e("input",{className:n(k&&`text-color_${k}`,X&&`text_size_${X}`,q&&`text-weight_${q}`),type:"number",min:f,max:h,"data-testid":d||(v?`${v}-input-number`:"input-number"),step:x,value:_,onChange:e=>S({event:e,mode:"input"})}),e(l,{className:"input-number__icon",icon:W,iconFill:$,iconFillHover:M,iconFillIcon:w,iconShape:j,iconSize:L,onClick:()=>S({operation:"plus"})})]})};export{b as InputNumber,d as inputNumberAppearance};
|
|
@@ -61483,6 +61483,7 @@ h2.react-datepicker__current-month {
|
|
|
61483
61483
|
transition: all;
|
|
61484
61484
|
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
|
|
61485
61485
|
}
|
|
61486
|
+
/* stylelint-disable selector-class-pattern */
|
|
61486
61487
|
.drawer {
|
|
61487
61488
|
overflow-y: scroll;
|
|
61488
61489
|
display: flex;
|
|
@@ -61513,6 +61514,9 @@ h2.react-datepicker__current-month {
|
|
|
61513
61514
|
z-index: 10;
|
|
61514
61515
|
}
|
|
61515
61516
|
}
|
|
61517
|
+
.EZDrawer {
|
|
61518
|
+
position: absolute;
|
|
61519
|
+
}
|
|
61516
61520
|
.drawer {
|
|
61517
61521
|
&_reset-padding {
|
|
61518
61522
|
^&__wrapper {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
1
|
+
import { ChangeEvent, CSSProperties } from 'react';
|
|
2
2
|
import { AppearanceConfig, AppearanceKeysState, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceStateDefault, FillHoverProps, FillProps, ShapeProps, SizeProps, SvgFillHoverProps, SvgFillProps } from '@itcase/types-ui';
|
|
3
3
|
import { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
4
4
|
import { ButtonProps } from 'src/components/Button/Button.interface';
|
|
@@ -44,4 +44,9 @@ type InputNumberProps = InputNumberAppearanceProps & StyleAttributes & {
|
|
|
44
44
|
};
|
|
45
45
|
type InputNumberConfig = AppearanceConfig<AppearanceKeysState, InputNumberAppearanceProps>;
|
|
46
46
|
type InputNumberAppearance = InputNumberConfig['appearance'];
|
|
47
|
-
|
|
47
|
+
type OnChangeValueParams = {
|
|
48
|
+
event?: ChangeEvent<HTMLInputElement>;
|
|
49
|
+
mode?: 'button' | 'input';
|
|
50
|
+
operation?: 'minus' | 'plus';
|
|
51
|
+
};
|
|
52
|
+
export type { InputNumberAppearance, InputNumberConfig, InputNumberProps, OnChangeValueParams, };
|
|
@@ -13,31 +13,30 @@ const inputNumberConfig = {
|
|
|
13
13
|
const InputNumber = (props) => {
|
|
14
14
|
const { id, appearance, className, dataTestId, dataTour, type = 'custom', name, min = 0, max = Infinity, step = 1, value = 0, onChange, } = props;
|
|
15
15
|
const [number, setNumber] = useState(value);
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
if (
|
|
20
|
-
|
|
16
|
+
const onChangeValue = useCallback((params) => {
|
|
17
|
+
const { event, mode = 'button', operation } = params;
|
|
18
|
+
let value;
|
|
19
|
+
if (mode === 'input') {
|
|
20
|
+
value = Number(event?.target.value);
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
const operationType = operation === 'minus' ? -step : step;
|
|
24
|
+
value = number + operationType;
|
|
21
25
|
}
|
|
22
|
-
setNumber(nextValue);
|
|
23
|
-
onChange?.(nextValue);
|
|
24
|
-
}, [max, min, number, onChange, step]);
|
|
25
|
-
const handleInputValue = (event) => {
|
|
26
|
-
const value = Number(event.target.value);
|
|
27
26
|
if (value < min || value > max) {
|
|
28
27
|
return null;
|
|
29
28
|
}
|
|
30
29
|
setNumber(value);
|
|
31
30
|
onChange?.(value);
|
|
32
|
-
};
|
|
31
|
+
}, [max, min, number, onChange, step]);
|
|
33
32
|
const appearanceConfig = useAppearanceConfig(appearance, inputNumberConfig);
|
|
34
33
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
35
34
|
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, iconFill, iconFillHover, iconFillIcon, iconMinus, iconPlus, iconShape, iconSize, inputNumberTextColorClass, inputNumberTextSizeClass, inputNumberTextWeightClass, shapeClass, sizeClass, widthClass, } = propsGenerator;
|
|
36
35
|
if (type === 'native') {
|
|
37
|
-
return (_jsx("input", { id: String(id), type: "number", min: min, max: max, step: step, value: number, onChange: (event) =>
|
|
36
|
+
return (_jsx("input", { id: String(id), type: "number", min: min, max: max, step: step, value: number, onChange: (event) => onChangeValue({ event: event, mode: 'input' }) }));
|
|
38
37
|
}
|
|
39
|
-
return (_jsxs("div", { id: String(id), className: clsx(className, 'input-number', 'input-number__custom', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `input-number_size_${sizeClass}`, widthClass && `width_${widthClass}`), "data-tour": dataTour, "date-testid": dataTestId, children: [_jsx(Button, { className: "input-number__icon", icon: iconMinus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () =>
|
|
38
|
+
return (_jsxs("div", { id: String(id), className: clsx(className, 'input-number', 'input-number__custom', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `input-number_size_${sizeClass}`, widthClass && `width_${widthClass}`), "data-tour": dataTour, "date-testid": dataTestId, children: [_jsx(Button, { className: "input-number__icon", icon: iconMinus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => onChangeValue({ operation: 'minus' }) }), _jsx("input", { className: clsx(inputNumberTextColorClass &&
|
|
40
39
|
`text-color_${inputNumberTextColorClass}`, inputNumberTextSizeClass && `text_size_${inputNumberTextSizeClass}`, inputNumberTextWeightClass &&
|
|
41
|
-
`text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, "data-testid": dataTestId || (name ? `${name}-input-number` : 'input-number'), step: step, value: number, onChange: (event) =>
|
|
40
|
+
`text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, "data-testid": dataTestId || (name ? `${name}-input-number` : 'input-number'), step: step, value: number, onChange: (event) => onChangeValue({ event: event, mode: 'input' }) }), _jsx(Button, { className: "input-number__icon", icon: iconPlus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => onChangeValue({ operation: 'plus' }) })] }));
|
|
42
41
|
};
|
|
43
42
|
export { InputNumber };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.85",
|
|
4
4
|
"description": "UI components",
|
|
5
5
|
"keywords": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@itcase/tokens-am": "^1.1.45",
|
|
51
51
|
"@itcase/tokens-baikal": "^1.1.41",
|
|
52
52
|
"@itcase/tokens-palette": "^1.1.41",
|
|
53
|
-
"@itcase/ui-core": "^1.9.
|
|
53
|
+
"@itcase/ui-core": "^1.9.85",
|
|
54
54
|
"@rc-component/tooltip": "^1.4.0",
|
|
55
55
|
"clsx": "^2.1.1",
|
|
56
56
|
"date-fns": "^4.1.0",
|
|
@@ -111,5 +111,5 @@
|
|
|
111
111
|
"storybook": "^10.3.0",
|
|
112
112
|
"typescript": "^5.9.3"
|
|
113
113
|
},
|
|
114
|
-
"gitHead": "
|
|
114
|
+
"gitHead": "519b52b44095aee5c86716f4fc2170c14412f9b3"
|
|
115
115
|
}
|