feat: className bug fix, version 1.0.4 🚀

Yefee8 · Sep 28, 2023 · 88fbef7 · 88fbef7
1 parent 4f31952
commit 88fbef7
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "yefee-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "yefee",
   "license": "ISC",
   "repository": {

diff --git a/src/lib/Alert/Alert.tsx b/src/lib/Alert/Alert.tsx
@@ -10,9 +10,9 @@ interface props {
   [key: string]: any
 }
 
-export default function Alert (props: props) {
-  function isItUsable () {
-    const { children, color, width, height, style, ...restProps } = props
+export default function Alert(props: props) {
+  function isItUsable() {
+    const { children, color, width, height, style, className, ...restProps } = props
     return restProps
   }
 
@@ -23,7 +23,7 @@ export default function Alert (props: props) {
         height: props.height ? props.height : '',
         ...props.style
       }}
-      className={`yefee-alert ${props.color ? props.color : 'primary'}-alert`} {...isItUsable()}
+      className={`${props.className} yefee-alert ${props.color ? props.color : 'primary'}-alert`} {...isItUsable()}
     >
       {props.children}
     </div>

diff --git a/src/lib/Button/Button.tsx b/src/lib/Button/Button.tsx
@@ -2,22 +2,22 @@ import React from 'react'
 import './button.css'
 
 interface props {
-  children: any
-  type?: 'rounded' | 'normal' | 'outlined' | 'rounded-outlined'
-  color?: 'primary' | 'success' | 'danger' | 'secondary' | 'white'
+  children: any;
+  type?: 'rounded' | 'normal' | 'outlined' | 'rounded-outlined';
+  color?: 'primary' | 'success' | 'danger' | 'secondary' | 'white';
   [key: string]: any
 }
 
-export default function Button (props: props) {
-  function isItUsable () {
-    const { children, type, color, ...restProps } = props
+export default function Button(props: props) {
+  function isItUsable() {
+    const { children, type, color, className, ...restProps } = props
     return restProps
   }
 
   return (
     <button
       className={`yefee-button ${props.color ? props.color : 'primary'}-button 
-        ${props.type ? props.type === 'rounded-outlined' && 'rounded-button outlined' || props.type : 'normal'}-button`} {...isItUsable()}
+        ${props.type ? props.type === 'rounded-outlined' && 'rounded-button outlined' || props.type : 'normal'}-button ${props.className}`} {...isItUsable()}
     >
       {props.children}
     </button>

diff --git a/src/lib/Dialog/Dialog.tsx b/src/lib/Dialog/Dialog.tsx
@@ -2,17 +2,17 @@ import React, { useEffect, useState } from 'react'
 import './dialog.css'
 
 interface props {
-  color?: 'dark' | 'white'
-  children?: any
-  show: boolean
+  color?: 'dark' | 'white';
+  children?: any;
+  show: boolean;
   [key: string]: any
 }
 
-export default function Dialog (props: props) {
+export default function Dialog(props: props) {
   const [firstTime, setFirstTime] = useState(0)
   const [animationClass, setAnimationClass] = useState('dialog-none')
 
-  function DialogAnimationClass () {
+  function DialogAnimationClass() {
     if (props.show) {
       setAnimationClass('dialog-visible')
       if (firstTime !== 2) {
@@ -35,14 +35,14 @@ export default function Dialog (props: props) {
     DialogAnimationClass()
   }, [props.show])
 
-  function isItUsable () {
-    const { color, children, ...restProps } = props
+  function isItUsable() {
+    const { color, children, className, ...restProps } = props
     return restProps
   }
 
   return (
     <div
-      className={`${props.color ? props.color : 'dark'}-dialog yefee-dialog-base ${animationClass}`}
+      className={`${props.className} ${props.color ? props.color : 'dark'}-dialog yefee-dialog-base ${animationClass}`}
       {...isItUsable()}
     >
       {props.children}

diff --git a/src/lib/Dropdown/Dropdown.tsx b/src/lib/Dropdown/Dropdown.tsx
@@ -10,16 +10,16 @@ interface props {
   }>
   setter: (change: any) => void
   close: () => void
-  id?: string
+  id?: string;
   [key: string]: any
 }
 
-export default function Dropdown (props: props) {
+export default function Dropdown(props: props) {
   const [showClass, setShowClass] = useState(props.show ? 'yefee-dropdown-visible' : 'yefee-dropdown-invisible')
   const [firstTime, setFirstTime] = useState(0)
 
-  function isItUsable () {
-    const { color, show, items, ...restProps } = props
+  function isItUsable() {
+    const { color, show, items, className, ...restProps } = props
     return restProps
   }
 
@@ -40,7 +40,7 @@ export default function Dropdown (props: props) {
   }, [props.show])
 
   return (
-    <div className={`yefee-dropdown-items ${props.color ? props.color : 'dark'}-dropdown ${showClass === 'yefee-dropdown-invisible' && firstTime === 1 ? 'yefee-dropdown-first' : showClass}`} {...isItUsable()}>
+    <div className={`yefee-dropdown-items ${props.className} ${props.color ? props.color : 'dark'}-dropdown ${showClass === 'yefee-dropdown-invisible' && firstTime === 1 ? 'yefee-dropdown-first' : showClass}`} {...isItUsable()}>
       {props.items.map((item) => {
         return (
           <div

diff --git a/src/lib/Input/Input.tsx b/src/lib/Input/Input.tsx
@@ -7,11 +7,11 @@ interface props {
 
 export default function Input (props: props) {
   function isItUsable () {
-    const { type, ...restProps } = props
+    const { type, className, ...restProps } = props
     return restProps
   }
 
   return (
-    <input className='yefee-input' type={props.type ? props.type : 'text'} {...isItUsable()} />
+    <input className={`${props.className} yefee-input`} type={props.type ? props.type : 'text'} {...isItUsable()} />
   )
 }
diff --git a/src/lib/Tooltip/Tooltip.tsx b/src/lib/Tooltip/Tooltip.tsx
@@ -10,12 +10,12 @@ interface props {
   [key: string]: any
 }
 
-export default function Tooltip (props: props) {
+export default function Tooltip(props: props) {
   const [showClass, setShowClass] = useState(props.show ? 'yefee-dropdown-visible' : 'yefee-dropdown-invisible')
   const [firstTime, setFirstTime] = useState(0)
 
-  function isItUsable () {
-    const { color, show, ...restProps } = props
+  function isItUsable() {
+    const { color, show, className, ...restProps } = props
     return restProps
   }
 
@@ -36,7 +36,7 @@ export default function Tooltip (props: props) {
   }, [props.show])
 
   return (
-    <div className={`yefee-tooltip tooltip-${props.position ? props.position : 'bottom'} ${props.color ? props.color : 'dark'}-tooltip ${showClass === 'yefee-dropdown-invisible' && firstTime === 1 ? 'yefee-tooltip-first' : showClass}`} {...isItUsable()}>
+    <div className={`${props.className} yefee-tooltip tooltip-${props.position ? props.position : 'bottom'} ${props.color ? props.color : 'dark'}-tooltip ${showClass === 'yefee-dropdown-invisible' && firstTime === 1 ? 'yefee-tooltip-first' : showClass}`} {...isItUsable()}>
       {props.children}
     </div>
   )