From 03a298bd306d9e477e15ddb9d384b446ebd232a5 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Thu, 13 Jul 2023 15:37:21 +0200
Subject: [PATCH] Refactor #4602 - for InputText

---
 components/lib/inputtext/InputText.css    | 106 ------------------
 components/lib/inputtext/InputText.js     |  20 ++--
 components/lib/inputtext/InputTextBase.js | 127 ++++++++++++++++++++++
 components/lib/inputtext/inputtext.d.ts   |   7 +-
 styles/primereact.css                     |   1 -
 5 files changed, 141 insertions(+), 120 deletions(-)
 delete mode 100644 components/lib/inputtext/InputText.css

diff --git a/components/lib/inputtext/InputText.css b/components/lib/inputtext/InputText.css
deleted file mode 100644
index c2d3570ccb..0000000000
--- a/components/lib/inputtext/InputText.css
+++ /dev/null
@@ -1,106 +0,0 @@
-.p-inputtext {
-    margin: 0;
-}
-
-.p-fluid .p-inputtext {
-    width: 100%;
-}
-
-/* InputGroup */
-.p-inputgroup {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-}
-
-.p-inputgroup-addon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-inputgroup .p-float-label {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-}
-
-.p-inputgroup .p-inputtext,
-.p-fluid .p-inputgroup .p-inputtext,
-.p-inputgroup .p-inputwrapper,
-.p-fluid .p-inputgroup .p-input {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-/* Floating Label */
-.p-float-label {
-    display: block;
-    position: relative;
-}
-
-.p-float-label label {
-    position: absolute;
-    pointer-events: none;
-    top: 50%;
-    margin-top: -0.5rem;
-    transition-property: all;
-    transition-timing-function: ease;
-    line-height: 1;
-}
-
-.p-float-label textarea ~ label,
-.p-float-label .p-mention ~ label {
-    top: 1rem;
-}
-
-.p-float-label input:focus ~ label,
-.p-float-label input:-webkit-autofill ~ label,
-.p-float-label input.p-filled ~ label,
-.p-float-label textarea:focus ~ label,
-.p-float-label textarea.p-filled ~ label,
-.p-float-label .p-inputwrapper-focus ~ label,
-.p-float-label .p-inputwrapper-filled ~ label,
-.p-float-label .p-tooltip-target-wrapper ~ label {
-    top: -0.75rem;
-    font-size: 12px;
-}
-
-.p-float-label .p-placeholder,
-.p-float-label input::placeholder,
-.p-float-label .p-inputtext::placeholder {
-    opacity: 0;
-    transition-property: all;
-    transition-timing-function: ease;
-}
-
-.p-float-label .p-focus .p-placeholder,
-.p-float-label input:focus::placeholder,
-.p-float-label .p-inputtext:focus::placeholder {
-    opacity: 1;
-    transition-property: all;
-    transition-timing-function: ease;
-}
-
-.p-input-icon-left,
-.p-input-icon-right {
-    position: relative;
-    display: inline-block;
-}
-
-.p-input-icon-left > i,
-.p-input-icon-right > i,
-.p-input-icon-left > svg,
-.p-input-icon-right > svg,
-.p-input-icon-left > .p-input-prefix,
-.p-input-icon-right > .p-input-suffix {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-}
-
-.p-fluid .p-input-icon-left,
-.p-fluid .p-input-icon-right {
-    display: block;
-    width: 100%;
-}
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index d6a56896f7..895d7f69f0 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -1,15 +1,19 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useStyle } from '../hooks/Hooks';
 import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
+import { DomHandler, ObjectUtils, mergeProps } from '../utils/Utils';
 import { InputTextBase } from './InputTextBase';
-import { PrimeReactContext } from '../api/Api';
 
 export const InputText = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = InputTextBase.getProps(inProps, context);
-        const { ptm } = InputTextBase.setMetaData({
+
+        useStyle(InputTextBase.css.styles, { name: 'primereact_inputtext_style' });
+
+        const { ptm, cx } = InputTextBase.setMetaData({
             props
         });
         const elementRef = React.useRef(ref);
@@ -58,19 +62,11 @@ export const InputText = React.memo(
 
         const isFilled = React.useMemo(() => ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue), [props.value, props.defaultValue]);
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-        const className = classNames(
-            'p-inputtext p-component',
-            {
-                'p-disabled': props.disabled,
-                'p-filled': isFilled
-            },
-            props.className
-        );
 
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className,
+                className: cx('root', { isFilled }),
                 onBeforeInput: onBeforeInput,
                 onInput: onInput,
                 onKeyDown: onKeyDown,
diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
index 5daf0c5917..7268d76cc1 100644
--- a/components/lib/inputtext/InputTextBase.js
+++ b/components/lib/inputtext/InputTextBase.js
@@ -1,4 +1,126 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
+
+const styles = `
+.p-inputtext {
+    margin: 0;
+}
+
+.p-fluid .p-inputtext {
+    width: 100%;
+}
+
+/* InputGroup */
+.p-inputgroup {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup-addon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-inputgroup .p-float-label {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup .p-inputtext,
+.p-fluid .p-inputgroup .p-inputtext,
+.p-inputgroup .p-inputwrapper,
+.p-fluid .p-inputgroup .p-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+/* Floating Label */
+.p-float-label {
+    display: block;
+    position: relative;
+}
+
+.p-float-label label {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -0.5rem;
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1;
+}
+
+.p-float-label textarea ~ label,
+.p-float-label .p-mention ~ label {
+    top: 1rem;
+}
+
+.p-float-label input:focus ~ label,
+.p-float-label input:-webkit-autofill ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label,
+.p-float-label .p-tooltip-target-wrapper ~ label {
+    top: -0.75rem;
+    font-size: 12px;
+}
+
+.p-float-label .p-placeholder,
+.p-float-label input::placeholder,
+.p-float-label .p-inputtext::placeholder {
+    opacity: 0;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-float-label .p-focus .p-placeholder,
+.p-float-label input:focus::placeholder,
+.p-float-label .p-inputtext:focus::placeholder {
+    opacity: 1;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+    position: relative;
+    display: inline-block;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-right > i,
+.p-input-icon-left > svg,
+.p-input-icon-right > svg,
+.p-input-icon-left > .p-input-prefix,
+.p-input-icon-right > .p-input-suffix {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-fluid .p-input-icon-left,
+.p-fluid .p-input-icon-right {
+    display: block;
+    width: 100%;
+}        
+`;
+
+const classes = {
+    root: ({ props, isFilled }) =>
+        classNames(
+            'p-inputtext p-component',
+            {
+                'p-disabled': props.disabled,
+                'p-filled': isFilled
+            },
+            props.className
+        )
+};
 
 export const InputTextBase = ComponentBase.extend({
     defaultProps: {
@@ -12,5 +134,10 @@ export const InputTextBase = ComponentBase.extend({
         onKeyDown: null,
         onPaste: null,
         children: undefined
+    },
+
+    css: {
+        classes,
+        styles
     }
 });
diff --git a/components/lib/inputtext/inputtext.d.ts b/components/lib/inputtext/inputtext.d.ts
index 9e121f2b3a..60e98c7de5 100644
--- a/components/lib/inputtext/inputtext.d.ts
+++ b/components/lib/inputtext/inputtext.d.ts
@@ -9,9 +9,9 @@
  */
 import * as React from 'react';
 import { KeyFilterType } from '../keyfilter';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { PassThroughType } from '../utils/utils';
-import { TooltipPassThroughOptions } from '../tooltip/tooltip';
 
 export declare type InputTextPassThroughType<T> = PassThroughType<T, InputTextPassThroughMethodOptions>;
 
@@ -81,6 +81,11 @@ export interface InputTextProps extends Omit<React.DetailedHTMLProps<React.Input
      * @type {InputTextPassThroughOptions}
      */
     pt?: InputTextPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/styles/primereact.css b/styles/primereact.css
index 636b3de95f..0b388522fe 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -22,7 +22,6 @@
 @import "../components/lib/toast/Toast.css";
 @import "../components/lib/inputnumber/InputNumber.css";
 @import "../components/lib/inputswitch/InputSwitch.css";
-@import "../components/lib/inputtext/InputText.css";
 @import "../components/lib/inputtextarea/InputTextarea.css";
 @import "../components/lib/listbox/ListBox.css";
 @import "../components/lib/menu/Menu.css";