Refactor #4602 - for InputText

primefaces · Jul 13, 2023 · 03a298b · 03a298b
1 parent c9f111e
commit 03a298b
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 120 deletions.
diff --git a/components/lib/inputtext/InputText.css b/components/lib/inputtext/InputText.css
diff --git 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
@@ -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
@@ -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
@@ -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";