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 = PassThroughType; @@ -81,6 +81,11 @@ export interface InputTextProps extends Omit