activator-oce-exporter/test/activator/shared/src/fusion/mixins/slide.js

Extract Activator binder and convert it to valid OCE mono pacakge

import { intersectMap } from '../utils';

export function SlideComponent(superClass) {
  return class extends superClass {
    static get properties() {
      return {
        top: {
          type: String,
          fieldType: 'Number',
          value: '10px',
        },
        left: {
          type: String,
          fieldType: 'Number',
          value: '10px',
        },
        opacity: {
          type: String,
          fieldType: 'Number',
          value: '100',
          min: '0',
          max: '100',
        },
        ...super.properties,
      };
    }

    /**
     * @description The array of property names for triggering sizes update
     * @return {string[]}
     */
    static get sizeTriggers() {
      return ['width', 'height'];
    }

    /**
     * @description The array of property names for triggering position update
     * @return {string[]}
     */
    static get positionTriggers() {
      return ['top', 'left'];
    }

    update(changedProps) {
      super.update(changedProps);
      if (this.isRendered) {
        this.checkSizes(changedProps);
        this.checkPositions(changedProps);
      }
    }

    checkSizes(changedProps) {
      const properties = intersectMap(changedProps, this.constructor.sizeTriggers);
      this.applyProps(properties);
    }

    checkPositions(changedProps) {
      const properties = intersectMap(changedProps, this.constructor.positionTriggers);
      this.applyProps(properties);
    }

    applyProps(changedProps) {
      const properties = Array.from(changedProps.keys());
      properties.forEach((property) => {
        this.setElementProp(property, this[property]);
        if (this.hasAttribute(property)) {
          this.setAttribute(property, this[property]);
        }
      });
    }

    static getZIndex() {
      return this.options.componentType === 'dynamic' ? 'var(--level)' : '1';
    }

    static setRequiredStyle() {
      const requiredProperties = [...this.sizeTriggers, ...this.positionTriggers];
      return requiredProperties.reduce((style, property) => {
        let requiredStyle = style;
        if (this.properties[property]) {
          requiredStyle = `${requiredStyle}${property}: var(--${property});`;
        }
        return requiredStyle;
      }, '');
    }

    static getStyle() {
      const styleRoot = super.getStyle();
      return `
        ${styleRoot}
        :host {
          ${this.setRequiredStyle()}
          position: absolute;
          z-index: ${this.getZIndex()}
        }
        :host > *:not([name="mo-system"]) {
          opacity: calc(var(--opacity) / 100);
        }
        `;
    }
  };
}