@wavemaker-ai/app-rn-runtime 1.0.0-next.27766

package/core/base.component.js

@@ -0,0 +1,665 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { assign, isUndefined, isNil, isObject, isArray, isString, isEqual } from 'lodash';
+import React from 'react';
+import { AccessibilityInfo, Dimensions, InteractionManager, Platform, StyleSheet, View } from 'react-native';
+import * as Animatable from 'react-native-animatable';
+import ThemeVariables from '@wavemaker-ai/app-rn-runtime/styles/theme.variables';
+import { CalcExpression } from '@wavemaker-ai/app-rn-runtime/styles/calc';
+import { StyleProps, getStyleName } from '@wavemaker-ai/app-rn-runtime/styles/style-props';
+import { BackgroundComponent } from '@wavemaker-ai/app-rn-runtime/styles/background.component';
+import injector from '@wavemaker-ai/app-rn-runtime/core/injector';
+import { ROOT_LOGGER } from '@wavemaker-ai/app-rn-runtime/core/logger';
+import { deepCopy, getPosition, setPosition } from '@wavemaker-ai/app-rn-runtime/core/utils';
+import BASE_THEME, { ThemeConsumer, ThemeEvent } from '../styles/theme';
+import EventNotifier from './event-notifier';
+import { PropsProvider } from './props.provider';
+import { assignIn } from 'lodash-es';
+import { HideMode } from './if.component';
+import { AssetConsumer } from './asset.provider';
+import { FixedView } from './fixed-view.component';
+import { TextIdPrefixConsumer } from './testid.provider';
+import { isScreenReaderEnabled } from './accessibility';
+import { TappableContext } from './tappable.component';
+import { WmComponentNode } from './wm-component-tree';
+import { getPositionValueStyle } from './auto-layout.utils';
+export const WIDGET_LOGGER = ROOT_LOGGER.extend('widget');
+export const ParentContext = /*#__PURE__*/React.createContext(null);
+export class BaseComponentState {
+  constructor() {
+    _defineProperty(this, "animationId", 0);
+    _defineProperty(this, "animatableProps", undefined);
+    _defineProperty(this, "props", {});
+    _defineProperty(this, "hide", false);
+    _defineProperty(this, "highlight", false);
+  }
+}
+export function defineStyles(styles) {
+  return deepCopy({
+    text: {
+      fontFamily: ThemeVariables.INSTANCE.baseFont,
+      userSelect: 'text'
+    }
+  }, styles);
+}
+export class BaseProps extends StyleProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "id", null);
+    _defineProperty(this, "name", null);
+    _defineProperty(this, "key", null);
+    _defineProperty(this, "disabled", false);
+    _defineProperty(this, "show", true);
+    _defineProperty(this, "styles", null);
+    _defineProperty(this, "classname", null);
+    _defineProperty(this, "listener", null);
+    _defineProperty(this, "showindevice", null);
+    _defineProperty(this, "showskeleton", undefined);
+    _defineProperty(this, "deferload", false);
+    _defineProperty(this, "showskeletonchildren", true);
+    _defineProperty(this, "disabletoucheffect", false);
+    _defineProperty(this, "isdefault", false);
+  }
+}
+export class BaseComponent extends React.Component {
+  constructor(markupProps, defaultClass, defaultProps, defaultState) {
+    super(markupProps);
+    this.defaultClass = defaultClass;
+    _defineProperty(this, "calcStyles", null);
+    _defineProperty(this, "styles", null);
+    _defineProperty(this, "hideMode", HideMode.ADD_TO_DOM);
+    _defineProperty(this, "propertyProvider", void 0);
+    _defineProperty(this, "proxy", void 0);
+    _defineProperty(this, "_INSTANCE", void 0);
+    _defineProperty(this, "initialized", false);
+    _defineProperty(this, "cleanup", []);
+    _defineProperty(this, "theme", BASE_THEME);
+    _defineProperty(this, "updateStateTimeouts", []);
+    _defineProperty(this, "parent", null);
+    _defineProperty(this, "destroyed", false);
+    _defineProperty(this, "_showSkeleton", false);
+    _defineProperty(this, "isFixed", false);
+    _defineProperty(this, "isSticky", false);
+    _defineProperty(this, "notifier", new EventNotifier());
+    _defineProperty(this, "parentListenerDestroyers", []);
+    _defineProperty(this, "_background", /*#__PURE__*/React.createElement(React.Fragment, null));
+    _defineProperty(this, "styleOverrides", {});
+    _defineProperty(this, "loadAsset", null);
+    _defineProperty(this, "i18nService", injector.I18nService.get());
+    _defineProperty(this, "testIdPrefix", '');
+    _defineProperty(this, "_showView", true);
+    _defineProperty(this, "closestTappable", void 0);
+    _defineProperty(this, "componentNode", void 0);
+    _defineProperty(this, "layout", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      px: 0,
+      py: 0
+    });
+    _defineProperty(this, "baseView", View);
+    _defineProperty(this, "vw", Dimensions.get('window').width);
+    _defineProperty(this, "vh", Dimensions.get('window').height);
+    _defineProperty(this, "hasStyleCalcExpression", false);
+    _defineProperty(this, "dimensions", {});
+    _defineProperty(this, "childComponentStyleKeys", []);
+    _defineProperty(this, "hideSkeletonInPageContentWhenDisabledInPage", () => {
+      var _this$parent$state;
+      const isPageContentWidget = this.defaultClass && this.defaultClass === 'app-page-content';
+      const isCurrentParentIsContent = this.parent && this.parent.defaultClass && this.parent.defaultClass === 'app-content';
+      const showSkeletonInPageContent = this.parent && ((_this$parent$state = this.parent.state) === null || _this$parent$state === void 0 || (_this$parent$state = _this$parent$state.props) === null || _this$parent$state === void 0 ? void 0 : _this$parent$state.showskeleton) === false;
+      if (isPageContentWidget && isCurrentParentIsContent && showSkeletonInPageContent) {
+        return false;
+      }
+      return undefined;
+    });
+    this.state = defaultState || {};
+    this.notifier.name = this.props.name || '';
+    this.componentNode = new WmComponentNode({
+      instance: this
+    });
+    this.propertyProvider = new PropsProvider(assign({
+      show: true
+    }, defaultProps), assign({}, markupProps), (name, $new, $old) => {
+      WIDGET_LOGGER.debug(() => `${this.props.name || this.constructor.name}: ${name} changed from ${$old} to ${$new}`);
+      if (this.initialized) {
+        const styleName = getStyleName(name);
+        if (styleName) {
+          if ($new === undefined) {
+            delete this.styleOverrides[styleName];
+          } else {
+            this.styleOverrides[styleName] = $new;
+          }
+        }
+      }
+      if (name === 'showskeleton' && this.initialized) {
+        setTimeout(() => this.cleanRefresh(), 100);
+      }
+      this.onPropertyChange(name, $new, $old);
+    });
+    //@ts-ignore
+    this.state.props = this.propertyProvider.get();
+    this._INSTANCE = this;
+    //@ts-ignore
+    this._showView = !this.props.deferload;
+    this.propertyProvider.check();
+    //@ts-ignore
+    this.proxy = new Proxy(this, {
+      get: (target, prop, receiver) => {
+        const propName = prop.toString();
+        if (this.propertyProvider.has(propName)) {
+          //@ts-ignore
+          return this.state.props[propName];
+        }
+        return Reflect.get(target, prop, receiver);
+      },
+      set: (target, prop, value) => {
+        const propName = prop.toString();
+        if (this.propertyProvider.has(propName)) {
+          // @ts-ignore
+          const props = {};
+          this.propertyProvider.overrideProp(propName, value);
+          props[propName] = value;
+          this.updateState({
+            props: props
+          });
+          return true;
+        } else {
+          return Reflect.set(target, prop, value);
+        }
+      }
+    });
+    this.cleanup.push(() => {
+      this.updateStateTimeouts.forEach(v => clearTimeout(v));
+    });
+    this.cleanup.push(this.theme.subscribe(ThemeEvent.CHANGE, () => {
+      this.vw = Dimensions.get('window').width;
+      this.vh = Dimensions.get('window').height;
+      if (this.reestimateDimensions) {
+        this.reestimateDimensions();
+      }
+      this.forceUpdate();
+    }));
+    this.cleanup.push(AccessibilityInfo.addEventListener('screenReaderChanged', () => {
+      setTimeout(() => {
+        this.forceUpdate();
+      }, 100);
+    }).remove);
+    this.cleanup.push(() => {
+      this.destroyParentListeners();
+    });
+  }
+  reestimateDimensions() {
+    var _this$parent, _this$parent2, _this$layout, _this$layout2;
+    const d = {
+      vw: this.vw,
+      vh: this.vh,
+      pw: (_this$parent = this.parent) === null || _this$parent === void 0 || (_this$parent = _this$parent.layout) === null || _this$parent === void 0 ? void 0 : _this$parent.width,
+      ph: (_this$parent2 = this.parent) === null || _this$parent2 === void 0 || (_this$parent2 = _this$parent2.layout) === null || _this$parent2 === void 0 ? void 0 : _this$parent2.height,
+      w: (_this$layout = this.layout) === null || _this$layout === void 0 ? void 0 : _this$layout.width,
+      h: (_this$layout2 = this.layout) === null || _this$layout2 === void 0 ? void 0 : _this$layout2.height
+    };
+    if (!isEqual(this.dimensions, d)) {
+      this.dimensions = d;
+      this.notify('layoutChange', []);
+      return true;
+    }
+    return false;
+  }
+  subscribe(event, fn) {
+    return this.notifier.subscribe(event, fn);
+  }
+  notify(event, args, emitToParent = false) {
+    return this.notifier.notify(event, args, emitToParent);
+  }
+  get isRTL() {
+    return this.i18nService.isRTLLocale();
+  }
+  animate(props) {
+    this.setState({
+      animationId: Date.now(),
+      animatableProps: props
+    });
+  }
+  setProp(propName, value) {
+    this.propertyProvider.set(propName, value);
+    this.updateState({
+      props: {}
+    });
+  }
+  setPropDefault(propName, value) {
+    this.propertyProvider.setDefault(propName, value);
+  }
+  onPropertyChange(name, $new, $old) {}
+  getDefaultStyles() {
+    return this.theme.getStyle(this.defaultClass);
+  }
+  reset() {}
+  updateState(newPartialState, callback) {
+    if (this.destroyed) {
+      return;
+    }
+    const stateFn = oldState => {
+      const oldProps = oldState.props;
+      const newState = this.initialized ? assignIn({}, oldState, newPartialState) : assignIn(oldState, newPartialState);
+      if (newPartialState.props) {
+        Object.keys(newPartialState.props).forEach(k => {
+          //@ts-ignore
+          oldProps[k] = newState.props[k];
+        });
+        newState.props = oldProps;
+      }
+      return newState;
+    };
+    const onUpdateState = () => {
+      var _this$props$listener, _this$props$listener2;
+      callback && callback();
+      ((_this$props$listener = this.props.listener) === null || _this$props$listener === void 0 ? void 0 : _this$props$listener.onComponentChange) && ((_this$props$listener2 = this.props.listener) === null || _this$props$listener2 === void 0 ? void 0 : _this$props$listener2.onComponentChange(this));
+    };
+    if (!this.initialized) {
+      this.state = stateFn(this.state);
+      onUpdateState();
+    } else {
+      const timeoutId = setTimeout(() => {
+        this.setState(stateFn, onUpdateState);
+        this.updateStateTimeouts.splice(this.updateStateTimeouts.indexOf(timeoutId), 1);
+      });
+      this.updateStateTimeouts.push(timeoutId);
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState, nextContext) {
+    if (this.propertyProvider.check(nextProps)) {
+      return true;
+    }
+    for (let key in nextState) {
+      if (key !== 'props' && (!(key in this.state) || nextState[key] !== this.state[key])) {
+        return true;
+      }
+    }
+    for (let key in this.state) {
+      if (key !== 'props' && (!(key in nextState) || this.state[key] !== nextState[key])) {
+        return true;
+      }
+    }
+    return false;
+  }
+  componentDidMount() {
+    if (this.props.listener && this.props.listener.onComponentInit) {
+      this.props.listener.onComponentInit(this.proxy);
+    }
+    this.initialized = true;
+  }
+  componentWillAttach() {
+    if (this.isFixed || this.isSticky) {
+      this.setState({
+        hide: false
+      });
+    }
+  }
+  componentWillDetach() {
+    if (this.isFixed || this.isSticky) {
+      this.setState({
+        hide: true
+      });
+    }
+  }
+  componentWillUnmount() {
+    var _this$parent3;
+    this.destroyed = true;
+    if (this.props.listener && this.props.listener.onComponentDestroy) {
+      this.props.listener.onComponentDestroy(this.proxy);
+    }
+    this.cleanup.forEach(f => f && f());
+    (_this$parent3 = this.parent) === null || _this$parent3 === void 0 || (_this$parent3 = _this$parent3.componentNode) === null || _this$parent3 === void 0 || _this$parent3.remove(this.componentNode);
+    this.notifier.destroy();
+    this.notifier.notify('destroy', []);
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.propertyProvider.check(this.props)) {
+      this.forceUpdate();
+    }
+  }
+  invokeEventCallback(eventName, args) {
+    //@ts-ignore
+    const callBack = this.props[eventName];
+    const appConfig = injector.get('APP_CONFIG');
+    args = args && args.map(a => a === this ? this.proxy : a);
+    if (callBack) {
+      try {
+        return callBack.apply(this.proxy, args);
+      } catch (e) {
+        var _appConfig$preference;
+        console.error(e);
+        if ((appConfig === null || appConfig === void 0 || (_appConfig$preference = appConfig.preferences) === null || _appConfig$preference === void 0 ? void 0 : _appConfig$preference.enableGlobalErrorHandler) === true) {
+          throw e; // Re-throwing error to let ErrorBoundary or Global Handler catch it
+        }
+      }
+    }
+  }
+  showView() {
+    return this.isVisible();
+  }
+  isVisible() {
+    const show = this.state.props.show;
+    return show !== false && show !== 'false' && show !== '0' && !isNil(show) && show !== "";
+  }
+  refresh() {
+    this.forceUpdate();
+  }
+  cleanRefresh() {
+    this.forceUpdate(() => this.notifier.notify('forceUpdate', []));
+  }
+  renderSkeleton(props) {
+    return null;
+  }
+  destroyParentListeners() {
+    this.parentListenerDestroyers.map(fn => fn());
+  }
+  setParent(parent) {
+    if (parent && this.parent !== parent) {
+      this.parent = parent;
+      this.parent.componentNode.add(this.componentNode);
+      this.notifier.setParent(parent.notifier);
+      this.destroyParentListeners();
+      this.parentListenerDestroyers = [this.parent.subscribe('forceUpdate', () => {
+        this.forceUpdate();
+      }), this.parent.subscribe('layoutChange', () => {
+        if (this.reestimateDimensions && this.reestimateDimensions() && this.hasStyleCalcExpression) {
+          this.forceUpdate();
+        }
+        return false;
+      }), this.parent.subscribe('destroy', () => {
+        this.destroyParentListeners();
+      })];
+    }
+  }
+  getName() {
+    return this.props.name;
+  }
+  handleLayout(event, ref = null) {
+    var _this$getName;
+    const key = this === null || this === void 0 || (_this$getName = this.getName) === null || _this$getName === void 0 ? void 0 : _this$getName.call(this);
+    if (key) {
+      const newLayoutPosition = {
+        [key]: {
+          y: event.nativeEvent.layout.y,
+          x: event.nativeEvent.layout.x
+        }
+      };
+      setPosition(newLayoutPosition);
+      const componentRef = ref !== null ? ref : this.baseView;
+      // Layout values by measure
+      if (componentRef !== null && componentRef !== void 0 && componentRef.measure) {
+        const updateLayout = () => {
+          componentRef.measure((x = 0, y = 0, width = 0, height = 0, px = 0, py = 0) => {
+            this.layout = {
+              x,
+              y,
+              width,
+              height,
+              px,
+              py
+            };
+            if (this.reestimateDimensions && this.reestimateDimensions() && this.hasStyleCalcExpression) {
+              this.forceUpdate();
+            }
+          });
+        };
+        updateLayout();
+        InteractionManager.runAfterInteractions(() => {
+          requestAnimationFrame(updateLayout);
+        });
+      }
+    } else {
+      var _event$nativeEvent;
+      this.layout = (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.layout;
+      if (this.reestimateDimensions && this.reestimateDimensions() && this.hasStyleCalcExpression) {
+        this.forceUpdate();
+      }
+    }
+  }
+  copyStyles(property, from, to) {
+    if (!isUndefined(from[property])) {
+      to[property] = from[property];
+    }
+  }
+  renderFixedContainer(props) {
+    const style = {};
+    this.copyStyles('left', this.styles.root, style);
+    this.copyStyles('top', this.styles.root, style);
+    this.copyStyles('right', this.styles.root, style);
+    this.copyStyles('bottom', this.styles.root, style);
+    this.copyStyles('width', this.styles.root, style);
+    this.copyStyles('height', this.styles.root, style);
+    if (style.width === 'fill') {
+      style.width = '100%';
+    } else if (style.width === 'hug') {
+      style.width = undefined;
+    }
+    if (style.height === 'fill') {
+      style.height = '100%';
+    } else if (style.height === 'hug') {
+      style.height = undefined;
+    }
+    const hasFixedWidth = !isUndefined(style.width);
+    const hasFixedHeight = !isUndefined(style.height);
+    this.styles = this.theme.mergeStyle(this.styles, {
+      root: {
+        left: undefined,
+        top: undefined,
+        right: undefined,
+        bottom: undefined,
+        width: hasFixedWidth ? "100%" : undefined,
+        height: hasFixedHeight ? "100%" : undefined
+      }
+    });
+    return /*#__PURE__*/React.createElement(FixedView, {
+      style: style,
+      theme: this.theme
+    }, this.addAnimation(this.renderWidget(props)));
+  }
+  addAnimation(n) {
+    if (!this.state.animatableProps) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, n);
+    }
+    return /*#__PURE__*/React.createElement(Animatable.View, _extends({
+      key: this.state.animationId
+    }, this.state.animatableProps), n);
+  }
+  setBackground() {
+    const bgStyle = this.styles.root;
+    this._background = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackgroundComponent, {
+      image: bgStyle.backgroundImage,
+      position: bgStyle.backgroundPosition,
+      size: bgStyle.backgroundSize,
+      repeat: bgStyle.backgroundRepeat,
+      resizeMode: bgStyle.backgroundResizeMode,
+      style: {
+        borderRadius: this.styles.root.borderRadius
+      }
+    }), this.state.highlight ? /*#__PURE__*/React.createElement(View, {
+      onTouchStart: () => {
+        this.setState({
+          highlight: false
+        });
+      },
+      style: [{
+        borderWidth: 2,
+        overflow: 'hidden',
+        backgroundColor: '#FFFF0033',
+        borderColor: 'orange',
+        borderStyle: 'dashed',
+        zIndex: 1000,
+        borderRadius: 0
+      }, StyleSheet.absoluteFill]
+    }) : null);
+    delete this.styles.root['backgroundImage'];
+    delete this.styles.root['backgroundPosition'];
+    delete this.styles.root['backgroundResizeMode'];
+    delete this.styles.root['backgroundSize'];
+    delete this.styles.root['backgroundRepeat'];
+  }
+  getTestId(suffix) {
+    let id = this.props.id || this.props.name;
+    if (this.testIdPrefix) {
+      id = this.testIdPrefix + '_' + id;
+    }
+    if (suffix) {
+      id = id + '_' + suffix;
+    }
+    return id;
+  }
+  getTestProps(suffix) {
+    let id = this.getTestId(suffix);
+    if (isScreenReaderEnabled()) {
+      return {};
+    }
+    if (Platform.OS === 'android' || Platform.OS === 'web') {
+      return {
+        accessibilityLabel: id,
+        testID: id
+      };
+    }
+    return {
+      accessible: false,
+      testID: id
+    };
+  }
+  getStyleClassName() {
+    return this.state.props.classname;
+  }
+  getTestPropsForInput(suffix) {
+    return this.getTestProps(suffix || 'i');
+  }
+  getTestPropsForAction(suffix) {
+    return this.getTestProps(suffix || 'a');
+  }
+  getTestPropsForLabel(suffix) {
+    return this.getTestProps(suffix || 'l');
+  }
+  getLayoutOfWidget(name) {
+    return getPosition(name);
+  }
+  getLayout() {
+    return this.layout;
+  }
+  scrollToTop() {
+    this.notify('scrollToPosition', [{
+      x: 0,
+      y: 0
+    }]);
+  }
+  scrollToEnd() {
+    this.notify('scrollToEnd', []);
+  }
+  scrollToPosition(widgetName) {
+    var _this$getLayoutOfWidg;
+    const positionY = (_this$getLayoutOfWidg = this.getLayoutOfWidget(widgetName)) === null || _this$getLayoutOfWidg === void 0 ? void 0 : _this$getLayoutOfWidg.y; // Safe access
+    this.notify('scrollToPosition', [{
+      x: 0,
+      y: positionY
+    }]);
+  }
+  evaluateCalcStyles(styles) {
+    const result = {};
+    Object.keys(styles).forEach(k => {
+      const value = styles[k];
+      if (isArray(value)) {
+        result[k] = value.map((v, i) => {
+          return this.evaluateCalcStyles(v);
+        });
+      } else if (isObject(value)) {
+        result[k] = this.evaluateCalcStyles(value);
+      } else if (isString(value) && value.startsWith('calc(')) {
+        result[k] = new CalcExpression(value, {
+          vw: this.dimensions.vw || 0,
+          vh: this.dimensions.vh || 0,
+          p: (k === 'height' ? this.dimensions.ph : this.dimensions.pw) || 0
+        }).evaluate();
+      } else {
+        result[k] = value;
+      }
+    });
+    return result;
+  }
+  getDependenciesFromContext(fn) {
+    return /*#__PURE__*/React.createElement(TappableContext.Consumer, null, tappable => {
+      this.closestTappable = tappable;
+      return /*#__PURE__*/React.createElement(TextIdPrefixConsumer, null, testIdPrefix => {
+        this.testIdPrefix = testIdPrefix || '';
+        return /*#__PURE__*/React.createElement(AssetConsumer, null, loadAsset => {
+          this.loadAsset = loadAsset;
+          return /*#__PURE__*/React.createElement(ParentContext.Consumer, null, parent => {
+            var _this$parent4;
+            this.setParent(parent);
+            this._showSkeleton = this.state.props.showskeleton !== false && (((_this$parent4 = this.parent) === null || _this$parent4 === void 0 ? void 0 : _this$parent4._showSkeleton) || this.state.props.showskeleton === true) && this.hideSkeletonInPageContentWhenDisabledInPage() === undefined;
+            return /*#__PURE__*/React.createElement(ParentContext.Provider, {
+              value: this
+            }, /*#__PURE__*/React.createElement(ThemeConsumer, null, theme => {
+              this.theme = theme || BASE_THEME;
+              return fn();
+            }));
+          });
+        });
+      });
+    });
+  }
+  render() {
+    const props = this.state.props;
+    const selectedLocale = this.i18nService.getSelectedLocale();
+    return this.getDependenciesFromContext(() => {
+      WIDGET_LOGGER.info(() => `${this.props.name || this.constructor.name} is rendering.`);
+      this._showView = this._showView || this.showView();
+      if (this.state.hide || !this.isVisible() && this.hideMode === HideMode.DONOT_ADD_TO_DOM || !this._showView) {
+        return null;
+      }
+      this.isFixed = false;
+      const classname = this.getStyleClassName();
+      this.calcStyles = this.theme.mergeStyle(this.getDefaultStyles(), {
+        text: this.theme.getStyle('app-' + selectedLocale)
+      }, {
+        text: this.theme.getStyle(this.defaultClass + '-' + selectedLocale)
+      }, props.disabled ? this.theme.getStyle(this.defaultClass + '-disabled') : null, this.isRTL ? this.theme.getStyle(this.defaultClass + '-rtl') : null, classname && this.theme.getStyle(classname), classname && props.disabled ? this.theme.getStyle(`${classname}.${this.defaultClass}-disabled`) : null, this.isRTL && classname ? this.theme.getStyle(classname + '-rtl') : null, props.showindevice && this.theme.getStyle('d-all-none ' + props.showindevice.map(d => `d-${d}-flex`).join(' ')), this.props.styles, {
+        root: this.styleOverrides,
+        text: this.styleOverrides
+      });
+      // Merge child component styles from custom classes
+      if (classname && this.childComponentStyleKeys.length > 0) {
+        const customStyles = this.theme.getStyle(classname);
+        this.childComponentStyleKeys.forEach(key => {
+          if (customStyles && this.calcStyles && this.calcStyles[key]) {
+            this.calcStyles[key] = this.theme.mergeStyle(this.calcStyles[key], customStyles);
+          }
+        });
+      }
+      this.hasStyleCalcExpression = false;
+      this.styles = this.evaluateCalcStyles(this.calcStyles);
+      if (this.styles.root.hasOwnProperty('_background')) {
+        delete this.styles.root.backgroundColor;
+      }
+      if (!this.isVisible()) {
+        assign(this.styles, this.theme.getStyle('hidden'));
+      }
+      let eleToRender = this._showSkeleton && this.renderSkeleton(props);
+      if (eleToRender) {
+        return eleToRender;
+      }
+      this.setBackground();
+      this.isFixed = this.styles.root.position === 'fixed' || props.position === 'fixed';
+      const positionStyle = getPositionValueStyle(props.positionvalue);
+      if (this.isFixed) {
+        this.styles.root.position = undefined;
+        this.styles.root.top = positionStyle.top;
+        this.styles.root.right = positionStyle.right;
+        this.styles.root.bottom = positionStyle.bottom;
+        this.styles.root.left = positionStyle.left;
+        return this.renderFixedContainer(props);
+      }
+      return this.addAnimation(this.renderWidget(this.state.props));
+    });
+  }
+}
+//# sourceMappingURL=base.component.js.map