@payfit/unity-components
Version:
163 lines (162 loc) • 7.2 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { Spinner as t } from "../spinner/Spinner.js";
import { CircularIconButton as n } from "../icon-button/CircularIconButton.js";
import { forwardRef as r } from "react";
import { uyTv as i } from "@payfit/unity-themes";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
import { Group as s } from "react-aria-components/Group";
import { useIntl as c } from "react-intl";
import "@payfit/unity-icons";
import { Input as l } from "react-aria-components/Input";
import { NumberField as u } from "react-aria-components/NumberField";
//#region src/components/number-input/NumberInput.tsx
var d = i({
slots: {
base: [
"uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75",
"uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
"uy:active:border-border-form-active"
],
wrapper: ["uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between uy:items-center"],
input: ["uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:min-w-0 uy:max-w-full", "uy:placeholder:text-content-neutral-lowest"],
prefix: ["uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75", "uy:active:border-border-form-active"],
suffix: ["uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75", "uy:active:border-border-form-active"],
state: ["uy:flex uy:gap-50 uy:items-center uy:shrink-0 uy:text-content-neutral-disabled"],
controls: ["uy:flex uy:gap-50"]
},
variants: { isReadOnly: {
true: {
base: ["uy:border-border-form-disabled uy:bg-surface-form-disabled"],
prefix: ["uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-read-only"],
wrapper: ["uy:bg-surface-form-disabled uy:text-content-form-disabled", "uy:group-data-[invalid=true]:bg-surface-form-error"],
input: ["uy:bg-surface-form-disabled uy:text-content-form-read-only"],
suffix: ["uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-read-only"]
},
false: {
base: [
"uy:border-border-form-enabled uy:bg-surface-form-enabled",
"uy:data-[invalid=true]:border-border-form-error uy:data-[invalid=true]:bg-surface-form-error",
"uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
],
prefix: [
"uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
"uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
"uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
],
suffix: [
"uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
"uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
"uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
],
wrapper: [
"uy:border-border-form-enabled uy:bg-surface-form-enabled",
"uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
"uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
],
input: [
"uy:text-content-form-enabled uy:bg-surface-form-enabled",
"uy:group-data-[invalid=true]:bg-surface-form-error",
"uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
],
state: ["uy:group-data-[invalid=true]:text-content-form-error"],
button: "uy:data-[disabled=true]:cursor-not-allowed"
}
} }
}), f = r(({ withControls: r = !1, defaultValue: i, formatOptions: f, isDisabled: p, isInvalid: m, isLoading: h, isReadOnly: g, isRequired: _, maxValue: v, minValue: y, prefix: b, onBlur: x, onChange: S, onClearButtonPress: C, step: w, suffix: T, value: E, ...D }, O) => {
let { base: k, wrapper: A, input: j, prefix: M, suffix: N, state: P, controls: F } = d({ isReadOnly: g }), I = c(), L = (E !== void 0 && !isNaN(E) || i !== void 0 && !isNaN(i)) && !r && !h && !g && !p;
return /* @__PURE__ */ o(u, {
ref: O,
className: k(),
value: E,
defaultValue: i,
minValue: y,
maxValue: v,
step: w,
isDisabled: p,
isReadOnly: g,
isInvalid: m,
isRequired: _,
"aria-busy": h,
onChange: S,
formatOptions: f,
onBlur: x,
...D,
children: [
b ? /* @__PURE__ */ a("span", {
className: M(),
children: b
}) : null,
/* @__PURE__ */ o(s, {
className: A(),
children: [
/* @__PURE__ */ a(l, {
ref: O,
className: j()
}),
/* @__PURE__ */ o("div", {
className: P(),
children: [
h && /* @__PURE__ */ a(t, {
color: "inherit",
size: "small",
label: I.formatMessage({
id: "unity:component:common:loading:label",
defaultMessage: "Loading..."
})
}),
m && /* @__PURE__ */ a(e, {
src: "WarningCircleOutlined",
color: "content.form.invalid",
alt: I.formatMessage({
id: "unity:component:form-field:form-input:error:alt",
defaultMessage: "Error"
})
}),
L && /* @__PURE__ */ a(n, {
title: I.formatMessage({
id: "unity:component:common:clear:title",
defaultMessage: "Clear"
}),
icon: "CloseOutlined",
onPress: () => {
C?.();
}
})
]
}),
r && /* @__PURE__ */ o("div", {
className: F(),
children: [/* @__PURE__ */ a(n, {
asElement: "button",
icon: "MinusOutlined",
slot: "decrement",
color: "content.neutral",
isDisabled: y !== void 0 && E === y,
title: I.formatMessage({
id: "unity:component:form-field:number-input:decrement:title",
defaultMessage: "decrement"
})
}), /* @__PURE__ */ a(n, {
asElement: "button",
icon: "PlusOutlined",
slot: "increment",
color: "content.neutral",
isDisabled: v !== void 0 && E === v,
title: I.formatMessage({
id: "unity:component:form-field:number-input:increment:title",
defaultMessage: "increment"
})
})]
})
]
}),
T ? /* @__PURE__ */ a("span", {
className: N(),
children: T
}) : null
]
});
});
f.displayName = "NumberInput";
//#endregion
export { f as NumberInput, d as numberInput };