UNPKG

igniteui-react-inputs

Version:

Ignite UI React input components.

166 lines (163 loc) 4.74 kB
import * as React from 'react'; import { XPrefix } from "./XPrefix"; import { ensureBool, NamePatcher, isValidProp, getModifiedProps } from "igniteui-react-core"; import { ReactRenderer, PortalManager } from "igniteui-react-core"; import { IgrXInputGroupItem } from './igr-x-input-group-item'; export class IgrXPrefix extends IgrXInputGroupItem { _getMainRef(ref) { this._elRef = ref; } render() { let propChildren = this.props.children; let children = []; React.Children.forEach(propChildren, (ch) => { children.push(React.cloneElement(ch)); }); this._portalManager.onRender(children); let div = React.createElement("div", { className: "ig-x-prefix igr-x-prefix", ref: this._getMainRef, children: children }); return div; } requestRender() { if (this._initialized) { this.setState({}); } } constructor(props) { super(props); this._wrapper = null; if (this._styling) { NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this)); } this._implementation = this.createImplementation(); this._implementation.externalObject = this; this._getMainRef = this._getMainRef.bind(this); var container; if (document) { container = document.createElement("div"); } var root; root = container; if (container != null) { root = container; } this.requestRender = this.requestRender.bind(this); this._portalManager = new PortalManager("prefixContent", this.requestRender); var ren = new ReactRenderer(root, document, true, {}, this._portalManager); this._wrapper = ren; this._container = this._wrapper.rootWrapper; this._container.setStyleProperty("display", "inline-block"); this._container.setStyleProperty("vertical-align", "middle"); var prefix = this.i; this._prefix = prefix; prefix.provideContainer(ren); if (props) { this.initializeProperties(); } } //private _getLabelPortal(element: DomWrapper, portalCallback: (portal: DomPortal) => void): void { // this._portalManager.getPortal(element, "TemplateContent", portalCallback); //} shouldComponentUpdate(nextProps, nextState) { const mod = getModifiedProps(this.props, nextProps); for (const p of Object.keys(mod)) { if (isValidProp(this, p)) { this[p] = mod[p]; } } return true; } initializeProperties() { for (const p of Object.keys(this.props)) { if (isValidProp(this, p)) { this[p] = this.props[p]; } } } // supports angular themes or custom properties set in CSS updateStyle() { this._styling(this._elRef, this); } destroy() { this._prefix.destroy(); this._wrapper.destroy(); } componentWillUnmount() { } componentDidMount() { this._elRef.appendChild(this._container.getNativeElement()); this.initializeContent(); } initializeContent() { this._styling(this._container.getNativeElement(), this); this.updateStyle(); } createImplementation() { return new XPrefix(); } /** * @hidden */ get i() { return this._implementation; } /** * Gets or sets the id to use for the checkbox. */ get id() { return this.i.z; } set id(v) { this.i.z = v; } /** * Gets or sets the value of the aria-label attribute. */ get ariaLabel() { return this.i.w; } set ariaLabel(v) { this.i.w = v; } /** * Gets or sets whether the prefix is hovered. */ get isHover() { return this.i.q; } set isHover(v) { this.i.q = ensureBool(v); } /** * Gets or sets whether the checkbox is disabled. */ get disabled() { return this.i.disabled; } set disabled(v) { this.i.disabled = ensureBool(v); } onDetachedFromUI() { this.i.onDetachedFromUI(); } onAttachedToUI() { this.i.onAttachedToUI(); } /** * Exports visual information about the current state of the grid. */ exportVisualModel() { let iv = this.i.t(); return (iv); } /** * Returns a serialized copy of the exported visual model */ exportSerializedVisualModel() { let iv = this.i.y(); return (iv); } }