@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/promised-click-ng/promised-click-ng.js

@@ -1,118 +0,0 @@
-import angular from 'angular';
-
-import buttonStyles from '../button/button.css';
-import {applyMethodToClasses} from '../global/dom';
-
-import RingAngularComponent from '../global/ring-angular-component';
-import {LOADER_BACKGROUND_SELECTOR} from '../button-ng/button-ng';
-/**
- * @name Promised Click Ng
-*/
-
-
-const angularModule = angular.module('Ring.promised-click', []);
-
-const DEFAULT_MODE = 'active';
-
-class PromisedClickController extends RingAngularComponent {
-  constructor(...args) {
-    super(...args);
-
-    const {$scope, $element, $attrs, $parse} = this.$inject;
-    this.element = $element[0];
-    this.active = false;
-
-    if ($attrs.rgPromisedClick) {
-      this.onClick(e => $parse($attrs.rgPromisedClick)($scope, {event: e}));
-    }
-
-    let currentMode = null;
-
-    this.toggleActive = enable => {
-      if (currentMode === 'loader') {
-        applyMethodToClasses(enable ? 'add' : 'remove')(
-          this.element.classList,
-          buttonStyles.loader
-        );
-
-        const loaderNode = this.element.querySelector(LOADER_BACKGROUND_SELECTOR);
-        if (loaderNode) {
-          applyMethodToClasses(enable ? 'add' : 'remove')(
-            this.element.querySelector(LOADER_BACKGROUND_SELECTOR).classList,
-            buttonStyles.loaderBackground
-          );
-        }
-      } else if (currentMode === 'active') {
-        applyMethodToClasses(enable ? 'add' : 'remove')(
-          this.element.classList,
-          buttonStyles.active
-        );
-      }
-    };
-
-    const setModeParams = mode => {
-      currentMode = mode;
-    };
-
-    setModeParams($attrs.promisedMode || DEFAULT_MODE);
-
-    if ($attrs.promisedMode && $attrs.promisedMode.indexOf('{{') !== -1) {
-      $attrs.$observe('promisedMode', newMode => {
-        if (newMode !== currentMode) {
-          this.toggleActive(false);
-          setModeParams(newMode);
-        }
-      });
-    }
-  }
-
-  onClick(callback) {
-    this.element.addEventListener('click', e => {
-      if (this.active) {
-        e.preventDefault();
-      } else {
-        this.process(callback, e);
-      }
-    });
-  }
-
-  process(callback, e) {
-    const {$scope} = this.$inject;
-
-    this.promise = callback(e);
-
-    if (this.promise) {
-      this.activate();
-    }
-
-    // Do not use $evalAsync here. This code should be invoked in the same animation frame
-    // otherwise a button may be "pressed" twice – by click and with class change.
-    if (!$scope.$root.$$phase) { // eslint-disable-line angular/no-private-call
-      $scope.$apply();
-    }
-  }
-
-  activate() {
-    this.active = true;
-
-    this.toggleActive(true);
-
-    const done = () => {
-      this.active = false;
-      this.toggleActive(false);
-    };
-
-    this.promise.then(done, done);
-  }
-}
-PromisedClickController.$inject = ['$scope', '$element', '$attrs', '$parse'];
-
-function rgPromisedClickDirective() {
-  return {
-    controller: PromisedClickController
-  };
-}
-
-angularModule.directive('rgPromisedClick', rgPromisedClickDirective);
-
-export default angularModule.name;

package/components/promised-click-ng/promised-click-ng.stories.js

@@ -1,42 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import ButtonNG from '../button-ng/button-ng';
-
-import PromisedClickNG from './promised-click-ng';
-
-export default {
-  title: 'Legacy Angular/Promised Click Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Controls the active state of a button.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.
-    module(APP_NAME, [PromisedClickNG, ButtonNG]).
-    controller('testController', function controller($scope, $timeout) {
-      this.onClick = () => $timeout(angular.noop, 5000);
-    }).
-    directive('rgTestDirective', $timeout => ({
-      require: 'rgPromisedClick',
-      link: (scope, iElement, iAttrs, rgPromisedClick) => {
-        rgPromisedClick.onClick(() => $timeout(angular.noop, 1000));
-      }
-    }));
-
-  return `
-      <div class="button-example" ng-controller="testController as ctrl">
-        <rg-button rg-promised-click="ctrl.onClick()">Simple use</rg-button>
-        <rg-button rg-promised-click="ctrl.onClick()" promised-mode="loader">Simple use loader mode</rg-button>
-        <rg-button rg-promised-click rg-test-directive>Via controller</rg-button>
-        <rg-button rg-promised-click="ctrl.onClick()">Ring button</rg-button>
-      </div>
-    `;
-};
-
-basic.storyName = 'Promised Click Ng';

package/components/promised-click-ng/promised-click-ng.test.js

@@ -1,166 +0,0 @@
-/* global inject */
-import 'angular';
-import 'angular-mocks';
-
-import buttonStyles from '../button/button.css';
-
-import PromisedClick from './promised-click-ng';
-
-describe('Promised Click Ng', () => {
-  const click = new CustomEvent('click');
-  let $rootScope;
-  let $compile;
-  let $q;
-  function noop() {}
-
-  beforeEach(window.module(PromisedClick));
-
-  beforeEach(inject((_$rootScope_, _$compile_, _$q_) => {
-    $rootScope = _$rootScope_;
-    $compile = _$compile_;
-    $q = _$q_;
-  }));
-
-  afterEach(() => {
-    $rootScope.$destroy();
-  });
-
-  function buildPromisedClick(auto) {
-    const template = auto
-      ? '<button rg-promised-click="onClick()"/>'
-      : '<button rg-promised-click/>';
-    const scope = $rootScope.$new();
-    const $element = $compile(template)(scope);
-    const element = $element[0];
-    const ctrl = $element.controller('rgPromisedClick');
-    const promise = {};
-
-    scope.onClick = () => $q((resolve, reject) => {
-      promise.resolve = resolve;
-      promise.reject = reject;
-    });
-
-    scope.$digest();
-
-    return {element, scope, ctrl, promise};
-  }
-
-  describe('automatic mode', () => {
-    it('should not have the active class by default', () => {
-      const {element} = buildPromisedClick(true);
-
-      element.should.not.have.class(buttonStyles.active);
-    });
-
-    it('should add the active class by clicking', () => {
-      const {element} = buildPromisedClick(true);
-      element.dispatchEvent(click);
-
-      element.should.have.class(buttonStyles.active.split(' ')[0]);
-    });
-
-    it('should remove the active class by resolving Promise', () => {
-      const {element, promise, scope} = buildPromisedClick(true);
-      element.dispatchEvent(click);
-      promise.resolve();
-      scope.$digest();
-
-      element.should.not.have.class(buttonStyles.active);
-    });
-
-    it('should remove the active class by rejecting Promise', () => {
-      const {element, promise, scope} = buildPromisedClick(true);
-      element.dispatchEvent(click);
-      promise.reject();
-      scope.$digest();
-
-      element.should.not.have.class(buttonStyles.active);
-    });
-  });
-
-  describe('semi-automatic mode', () => {
-    it('should not have the "active" class by default', () => {
-      const {element} = buildPromisedClick();
-
-      element.should.not.have.class(buttonStyles.active);
-    });
-
-    it('should call the given callback by clicking', () => {
-      const {element, ctrl} = buildPromisedClick();
-      const callback = sandbox.stub();
-      ctrl.onClick(callback);
-      element.dispatchEvent(click);
-
-      callback.should.have.been.called;
-    });
-
-    it('should add the active class by clicking', () => {
-      const {element, ctrl} = buildPromisedClick();
-      ctrl.onClick(() => $q(noop));
-      element.dispatchEvent(click);
-
-      element.should.have.class(buttonStyles.active.split(' ')[0]);
-    });
-
-    it('should remove the active class by resolving Promise', () => {
-      const {element, ctrl} = buildPromisedClick();
-      ctrl.onClick(() => $q(resolve => {
-        resolve();
-      }));
-      element.dispatchEvent(click);
-
-      element.should.not.have.class(buttonStyles.active);
-    });
-
-    it('should remove the active class by rejecting Promise', () => {
-      const {element, ctrl} = buildPromisedClick();
-      ctrl.onClick(() => $q((resolve, reject) => {
-        reject();
-      }));
-      element.dispatchEvent(click);
-
-      element.should.not.have.class(buttonStyles.active);
-    });
-  });
-
-  describe('manual mode', () => {
-    it('should not have the active class by default', () => {
-      const {element} = buildPromisedClick();
-
-      element.should.not.have.class(buttonStyles.active);
-    });
-
-    it('should call the given callback', () => {
-      const {ctrl} = buildPromisedClick();
-      const callback = sandbox.stub();
-      ctrl.process(callback);
-
-      callback.should.have.been.called;
-    });
-
-    it('should add the active class', () => {
-      const {element, ctrl} = buildPromisedClick();
-      ctrl.process(() => $q(noop));
-
-      element.should.have.class(buttonStyles.active.split(' ')[0]);
-    });
-
-    it('should remove the active class by resolving Promise', () => {
-      const {element, ctrl} = buildPromisedClick();
-      ctrl.process(() => $q(resolve => {
-        resolve();
-      }));
-
-      element.should.not.have.class(buttonStyles.active);
-    });
-
-    it('should remove the active class by rejecting Promise', () => {
-      const {element, ctrl} = buildPromisedClick();
-      ctrl.process(() => $q((resolve, reject) => {
-        reject();
-      }));
-
-      element.should.not.have.class(buttonStyles.active);
-    });
-  });
-});

package/components/proxy-attrs/proxy-attrs.js

@@ -1,24 +0,0 @@
-function proxyAttrs(template, attrsWhitelist) {
-  return function copyAttrs(iElement, iAttrs) {
-    const PREFIX = 'data-proxy-';
-
-    const attrsList = attrsWhitelist || Object.keys(iAttrs.$attr);
-    let resultTemplate = template;
-
-    attrsList.forEach(attrName => {
-      if (iAttrs[attrName] !== undefined) {
-        const attrLower = iAttrs.$attr[attrName];
-        const attrValue = iAttrs[attrName];
-
-        const attrFind = `${PREFIX}${attrLower}`.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
-        const attrReplace = `${attrLower}="${attrValue}"`;
-
-        resultTemplate = resultTemplate.replace(RegExp(`${attrFind}(="")*`, 'g'), attrReplace);
-      }
-    });
-
-    return resultTemplate;
-  };
-}
-
-export default proxyAttrs;

package/components/proxy-attrs/proxy-attrs.test.js

@@ -1,102 +0,0 @@
-import 'angular';
-import 'angular-mocks';
-
-import proxyAttrs from './proxy-attrs';
-
-describe('Proxy attrs Ng', () => {
-  const ngModelValue = 'wow';
-  const ngDisabledValue = '!getDisabledState()';
-
-  it('should return untouched template if there in nothing to replace', () => {
-    const sourceTemplate = '<span><button data-proxy-ng-model>Some text</button><span>';
-    const replacedTemplate = proxyAttrs(sourceTemplate)({}, {$attr: {}});
-
-    replacedTemplate.should.be.equal(sourceTemplate);
-  });
-
-  it('should return template with replacement; last attribute', () => {
-    const sourceTemplate = '<span><button data-proxy-ng-model>Some text</button><span>';
-    const replacedTemplate = proxyAttrs(sourceTemplate)({}, {
-      ngModel: ngModelValue,
-      $attr: {ngModel: 'ng-model'}
-    });
-
-    replacedTemplate.should.
-      be.equal(sourceTemplate.replace('data-proxy-ng-model', `ng-model="${ngModelValue}"`));
-  });
-
-  it('should return template with replacement; middle attribute', () => {
-    const sourceTemplate = '<span><button data-proxy-ng-model class="">Some text</button><span>';
-    const replacedTemplate = proxyAttrs(sourceTemplate)({}, {
-      ngModel: ngModelValue,
-      $attr: {ngModel: 'ng-model'}
-    });
-
-    replacedTemplate.should.
-      be.equal(sourceTemplate.replace('data-proxy-ng-model', `ng-model="${ngModelValue}"`));
-  });
-
-  it('should return template with replacement; before new line', () => {
-    const sourceTemplate = '<span><button data-proxy-ng-model\n class="">Some text</button><span>';
-    const replacedTemplate = proxyAttrs(sourceTemplate)({}, {
-      ngModel: ngModelValue,
-      $attr: {ngModel: 'ng-model'}
-    });
-
-    replacedTemplate.should.
-      be.equal(sourceTemplate.replace('data-proxy-ng-model', `ng-model="${ngModelValue}"`));
-  });
-
-  it('should return template with replacement; with quotes', () => {
-    const sourceTemplate = '<span><button data-proxy-ng-model="">Some text</button><span>';
-    const replacedTemplate = proxyAttrs(sourceTemplate)({}, {
-      ngModel: ngModelValue,
-      $attr: {ngModel: 'ng-model'}
-    });
-
-    replacedTemplate.should.
-      be.equal(sourceTemplate.replace('data-proxy-ng-model=""', `ng-model="${ngModelValue}"`));
-  });
-
-  it('should respect whitelist instead if attrs', () => {
-    const sourceTemplate = '<span><button data-proxy-ng-model>Some text</button><span>';
-    const whitelist = [];
-    const replacedTemplate = proxyAttrs(sourceTemplate, whitelist)({}, {
-      ngModel: ngModelValue,
-      $attr: {ngModel: 'ng-model'}
-    });
-
-    replacedTemplate.should.be.equal(sourceTemplate);
-  });
-
-  it('should proxy multiple directives', () => {
-    const sourceTemplate = '<span><button data-proxy-ng-model>Some text</button><input type="text" data-proxy-ng-disabled></span>';
-
-    const replacedTemplate = proxyAttrs(sourceTemplate)({}, {
-      ngModel: ngModelValue,
-      ngDisabled: ngDisabledValue,
-      $attr: {ngModel: 'ng-model', ngDisabled: 'ng-disabled'}
-    });
-
-    const expectedTemplate = sourceTemplate.
-      replace('data-proxy-ng-model', `ng-model="${ngModelValue}"`).
-      replace('data-proxy-ng-disabled', `ng-disabled="${ngDisabledValue}"`);
-
-    replacedTemplate.should.be.equal(expectedTemplate);
-  });
-
-  it('should proxy one directive to multiple placeholders', () => {
-    const sourceTemplate = '<span><button data-proxy-ng-model>Some text</button><input type="text" data-proxy-ng-model></span>';
-
-    const replacedTemplate = proxyAttrs(sourceTemplate)({}, {
-      ngModel: ngModelValue,
-      ngDisabled: ngDisabledValue,
-      $attr: {ngModel: 'ng-model', ngDisabled: 'ng-disabled'}
-    });
-
-    const expectedTemplate = sourceTemplate.
-      replace(/data-proxy-ng-model/g, `ng-model="${ngModelValue}"`);
-
-    replacedTemplate.should.be.equal(expectedTemplate);
-  });
-});