wix-style-react
Version:
wix-style-react
51 lines • 2.66 kB
JavaScript
import React from 'react';
import Input from './Input';
import { classes, st } from './Input.st.css';
import DATA_ATTR from './DataAttr';
import { filterObject } from '../utils/filterObject';
import { WixStyleReactDefaultsOverrideContext } from '../WixStyleReactDefaultsOverrideProvider';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
import { StatusContext, getStatusFromContext, } from '../FormField/StatusContext';
class ThemedInput extends Input {
constructor() {
super(...arguments);
// For testing purposes only
this._getDataAttr = ({ statusContext }) => {
const { input: inputPropsDefaults } = this.context;
const { size = inputPropsDefaults.size, status, prefix, disabled, forceHover, forceFocus, noLeftBorderRadius, noRightBorderRadius, } = this.props;
return filterObject({
[DATA_ATTR.SIZE]: size,
[DATA_ATTR.STATUS]: getStatusFromContext(statusContext, status),
[DATA_ATTR.PREFIX]: !!prefix,
[DATA_ATTR.DISABLED]: !!disabled,
[DATA_ATTR.HOVER]: !!forceHover,
[DATA_ATTR.FOCUS]: !!(forceFocus || this.state.focus),
[DATA_ATTR.LEFTBORDERRADIUS]: !!noLeftBorderRadius,
[DATA_ATTR.RIGHTBORDERRADIUS]: !!noRightBorderRadius,
}, (key, value) => !!value);
};
}
render() {
const { input: inputPropsDefaults } = this.context;
const { size = inputPropsDefaults.size, dataHook, rtl, status, disabled, forceHover, forceFocus, border, className, noLeftBorderRadius, noRightBorderRadius, readOnly, } = this.props;
const placeholder = this.props.placeholder;
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement(StatusContext.Consumer, null, statusContext => (React.createElement("div", { className: st(classes.root, {
size,
hasFocus: forceFocus || this.state.focus,
status: getStatusFromContext(statusContext, status),
forceHover,
readOnly,
disabled,
border,
noRightBorderRadius,
noLeftBorderRadius,
newColorsBranding,
}, className), dir: rtl ? 'rtl' : null, "data-hook": dataHook, ...this._getDataAttr({ statusContext }) }, super.render({ placeholder })))))));
}
}
ThemedInput.contextType = WixStyleReactDefaultsOverrideContext;
ThemedInput.propTypes = {
...Input.propTypes,
};
export default ThemedInput;
//# sourceMappingURL=ThemedInput.js.map