npm publish (0.0.195)

thebbodek · Mar 12, 2024 · fa8d468 · fa8d468
1 parent 66b79e8
commit fa8d468
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "bbodek-ui",
- "version": "0.0.192",
+ "version": "0.0.195",
  "type": "module",
  "author": "Bbodek",
  "license": "MIT",

diff --git a/src/core/components/Input/hooks/useInput.ts b/src/core/components/Input/hooks/useInput.ts
@@ -10,18 +10,29 @@ export interface UseInputProps {
 }
 
 export const useInput = ({ value, regCallback, onChange, name }: UseInputProps) => {
+ const [ inputType, setInputType ] = useState<HTMLInputElement["type"]>("text");
  const [ inputValue, setInputValue ] = useState<UseInputProps["value"]>(value ?? "");
 
  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
- e.target.value = regCallback
- ? regCallback(e.target.value)
- : e.target.value;
- setInputValue(e.target.value);
+ const { type, value: eventTargetValue } = e.target;
+ const eventType = type;
+ let eventValue = eventTargetValue;
+ const isDifferenceType = type !== inputType;
+
+ if(isDifferenceType) {
+ setInputType(eventType);
+ }
+
+ eventValue = regCallback
+ ? regCallback(eventValue)
+ : eventValue;
+ setInputValue(eventValue);
  onChange?.(e);
  };
 
  const onResetInputValue = () => {
- setInputValue("");
+ const isNumberType = inputType === "number";
+ setInputValue(!isNumberType ? "" : "0");
 
  const event = {
  target: { value: "", name },

diff --git a/src/styles/bbodek-theme.css b/src/styles/bbodek-theme.css
@@ -12,14 +12,25 @@
  }
 
  .bbodek-field {
- @apply flex-1 text-gray-08 placeholder:text-gray-05 disabled:text-gray-05 read-only:text-gray-05 bg-transparent outline-none;
+ @apply w-full flex-1 text-gray-08 placeholder:text-gray-05 disabled:text-gray-05 read-only:text-gray-05 bg-transparent outline-none;
  }
 }
 
 @layer base {
  html {
  font-family: "Pretendard", system-ui, sans-serif;
  }
+
+ input[type='number'] {
+ margin: 0;
+ appearance: textfield;
+ -moz-appearance: textfield;
+ }
+
+ input[type='number']::-webkit-outer-spin-button,
+ input[type='number']::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ }
 }
 
 @font-face {