default types added

Detaysoft · Jun 22, 2022 · 1f5e0f1 · 1f5e0f1
1 parent b3c2f50
commit 1f5e0f1
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 47 deletions.
diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
@@ -3,33 +3,50 @@ import './Input.css'
 import classNames from 'classnames'
 import { IInputProps } from '../type'
 
-const Input: React.FC<IInputProps> = props => {
+const Input: React.FC<IInputProps> = ({
+  type = "text",
+  placeholder = "",
+  defaultValue = "",
+  onChange = null,
+  rightButtons = null,
+  leftButtons = null,
+  multiline = false,
+  minHeight = 25,
+  maxHeight = 200,
+  autoHeight = true,
+  inputStyle = null,
+  referance = null,
+  maxlength = null,
+  onMaxLengthExceed = null,
+  autofocus = false,
+  ...props
+}) => {
   useEffect(() => {
-    if (props.autofocus === true) props.referance?.referance.current?.focus()
+    if (autofocus === true) referance?.referance.current?.focus()
 
     if (props.clear instanceof Function) {
       props.clear(clear)
     }
   }, [])
 
-  const onChange = (e: any) => {
-    if (props.maxlength && (e.target.value || '').length > props.maxlength) {
-      if (props.onMaxLengthExceed instanceof Function) props.onMaxLengthExceed()
+  const onChangeEvent = (e: any) => {
+    if (maxlength && (e.target.value || '').length > maxlength) {
+      if (onMaxLengthExceed instanceof Function) onMaxLengthExceed()
 
-      if (props.referance?.referance.current?.value == (e.target.value || '').substring(0, props.maxlength)) return
+      if (referance?.referance.current?.value == (e.target.value || '').substring(0, maxlength)) return
     }
 
-    if (props.onChange instanceof Function) props.onChange(e)
+    if (onChange instanceof Function) onChange(e)
 
-    if (props.multiline === true) {
-      if (props.autoHeight === true) {
-        if (e.target.style.height !== props.minHeight + 'px') {
-          e.target.style.height = props.minHeight + 'px'
+    if (multiline === true) {
+      if (autoHeight === true) {
+        if (e.target.style.height !== minHeight + 'px') {
+          e.target.style.height = minHeight + 'px'
         }
 
         let height
-        if (e.target.scrollHeight <= props.maxHeight) height = e.target.scrollHeight + 'px'
-        else height = props.maxHeight + 'px'
+        if (e.target.scrollHeight <= maxHeight) height = e.target.scrollHeight + 'px'
+        else height = maxHeight + 'px'
 
         if (e.target.style.height !== height) {
           e.target.style.height = height
@@ -41,28 +58,28 @@ const Input: React.FC<IInputProps> = props => {
   const clear = () => {
     var _event = {
       FAKE_EVENT: true,
-      target: props.referance?.current,
+      target: referance?.current,
     }
 
-    if (props.referance?.current?.value) {
-      props.referance.current.value = ''
+    if (referance?.current?.value) {
+      referance.current.value = ''
     }
 
-    onChange(_event)
+    onChangeEvent(_event)
   }
 
   return (
     <div className={classNames('rce-container-input', props.className)}>
-      {props.leftButtons && <div className='rce-input-buttons'>{props.leftButtons}</div>}
-      {props.multiline === false ? (
+      {leftButtons && <div className='rce-input-buttons'>{leftButtons}</div>}
+      {multiline === false ? (
         <input
-          ref={props.referance}
-          type={props.type}
+          ref={referance}
+          type={type}
           className={classNames('rce-input')}
-          placeholder={props.placeholder}
-          defaultValue={props.defaultValue}
-          style={props.inputStyle}
-          onChange={onChange}
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          style={inputStyle}
+          onChange={onChangeEvent}
           onCopy={props.onCopy}
           onCut={props.onCut}
           onPaste={props.onPaste}
@@ -77,12 +94,12 @@ const Input: React.FC<IInputProps> = props => {
         />
       ) : (
         <textarea
-          ref={props.referance}
+          ref={referance}
           className={classNames('rce-input', 'rce-input-textarea')}
-          placeholder={props.placeholder}
-          defaultValue={props.defaultValue}
-          style={props.inputStyle}
-          onChange={onChange}
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          style={inputStyle}
+          onChange={onChangeEvent}
           onCopy={props.onCopy}
           onCut={props.onCut}
           onPaste={props.onPaste}
@@ -96,7 +113,7 @@ const Input: React.FC<IInputProps> = props => {
           onKeyUp={props.onKeyUp}
         ></textarea>
       )}
-      {props.rightButtons && <div className='rce-input-buttons'>{props.rightButtons}</div>}
+      {rightButtons && <div className='rce-input-buttons'>{rightButtons}</div>}
     </div>
   )
 }

diff --git a/src/Navbar/Navbar.tsx b/src/Navbar/Navbar.tsx
@@ -3,12 +3,18 @@ import './Navbar.css'
 import classNames from 'classnames'
 import { INavbarProps } from '../type'
 
-const Navbar: React.FC<INavbarProps> = props => {
+const Navbar: React.FC<INavbarProps> = ({
+  type = "light",
+  left = null,
+  center = null,
+  right = null,
+  ...props
+}) => {
   return (
-    <div className={classNames('rce-navbar', props.type, props.className)}>
-      <div className='rce-navbar-item rce-navbar-item__left'>{props.left}</div>
-      <div className='rce-navbar-item rce-navbar-item__center'>{props.center}</div>
-      <div className='rce-navbar-item rce-navbar-item__right'>{props.right}</div>
+    <div className={classNames('rce-navbar', type, props.className)}>
+      <div className='rce-navbar-item rce-navbar-item__left'>{left}</div>
+      <div className='rce-navbar-item rce-navbar-item__center'>{center}</div>
+      <div className='rce-navbar-item rce-navbar-item__right'>{right}</div>
     </div>
   )
 }

diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx
@@ -6,26 +6,38 @@ import Button from '../Button/Button'
 import classNames from 'classnames'
 import { IPopupProps } from '../type'
 
-const Popup: React.FC<IPopupProps> = props => {
-  if (props.popup?.show === true)
+const Popup: React.FC<IPopupProps> = ({ 
+  popup={
+    show: false,
+    header: null,
+    text: null,
+    headerButtons: [],
+    footerButtons: [],
+    renderHeader: null,
+    renderContent: null,
+    renderFooter: null,
+    color: '#333'
+  }
+  , ...props}) => {
+  if (popup.show === true)
     return (
       <div className={classNames('rce-popup-wrapper', props.type, props.className)}>
         <div className='rce-popup'>
-          {props.popup.renderHeader ? (
-            <div className='rce-popup-header'>{props.popup.renderHeader()}</div>
+          {popup.renderHeader ? (
+            <div className='rce-popup-header'>{popup.renderHeader()}</div>
           ) : (
             <div className='rce-popup-header'>
-              <span>{props.popup.header}</span>
-              {props.popup.header && props.popup.headerButtons?.map((x, i) => <Button key={i} {...x} />)}
+              <span>{popup.header}</span>
+              {popup.header && popup.headerButtons?.map((x, i) => <Button key={i} {...x} />)}
             </div>
           )}
-          <div className='rce-popup-content' style={{ color: props.popup.color }}>
-            {props.popup.renderContent ? props.popup.renderContent() : props.popup.text}
+          <div className='rce-popup-content' style={{ color: popup.color }}>
+            {popup.renderContent ? popup.renderContent() : popup.text}
           </div>
           <div className='rce-popup-footer'>
-            {props.popup.renderFooter
-              ? props.popup.renderFooter()
-              : props.popup.footerButtons?.map((x, i) => <Button key={i} {...x} />)}
+            {popup.renderFooter
+              ? popup.renderFooter()
+              : popup.footerButtons?.map((x, i) => <Button key={i} {...x} />)}
           </div>
         </div>
       </div>