@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/form-ng/form-ng.js

@@ -0,0 +1,176 @@
+import angular from 'angular';
+
+import MessageBundle from '../message-bundle-ng/message-bundle-ng';
+import '../input/input-legacy.css';
+import '../error-bubble/error-bubble-legacy.css';
+
+/**
+ * @name Form Ng
+ */
+
+const angularModule = angular.module('Ring.form', [MessageBundle]);
+
+angularModule.factory('getFormErrorMessages',
+  function getFormErrorMessagesDirective(RingMessageBundle) {
+    function msg(id, formError) {
+      const messageBundleId = `form_${id}`;
+      if (RingMessageBundle.hasOwnProperty(messageBundleId)) {
+        return RingMessageBundle[messageBundleId]();
+      }
+
+      const formErrors = (formError && formError[id]) || [];
+      for (let j = 0; j < formErrors.length; ++j) {
+        if (formErrors[j] && formErrors[j].message) {
+          return formErrors[j].message;
+        }
+      }
+
+      return undefined;
+    }
+
+    return formErrors => {
+      const errorMessages = [];
+      for (const key in formErrors) {
+        if (formErrors.hasOwnProperty(key) && formErrors[key]) {
+          errorMessages.push(msg(key, formErrors));
+        }
+      }
+      return errorMessages;
+    };
+  });
+
+/**
+ * <div rg-error-bubble="form.name"></div>
+ * @param {object} error-bubble Ng-model for this control
+ *
+ * Where form.name is a reference to angularJS form input
+ */
+angularModule.directive('rgErrorBubble', function rgErrorBubbleDirective(getFormErrorMessages) {
+  return {
+    scope: {
+      errorBubble: '&rgErrorBubble'
+    },
+
+    replace: true,
+    template: `<div class="ring-error-bubble" ng-class="{ active: active, 'ring-error-bubble_material': material }" ng-style="style">
+  <div ng-repeat="errorMessage in getFormErrorMessages(errorBubble().$error)">{{ errorMessage }}</div>
+</div>`,
+
+    link: function link(scope, iElement, iAttrs) {
+      scope.style = {};
+
+      const siblings = Array.from(iElement[0].parentNode.children);
+      let element;
+      let tagName;
+
+      for (let i = 0; i < siblings.length; i++) {
+        tagName = siblings[i].tagName.toLowerCase();
+
+        if (tagName === 'input' || tagName === 'textarea') {
+          element = siblings[i];
+          break;
+        }
+      }
+
+      scope.material = iAttrs.material !== undefined;
+
+      scope.$watch(() => {
+        const result = scope.errorBubble();
+
+        return result.$invalid && result.$dirty;
+      }, active => {
+        scope.active = active;
+
+        if (active && element) {
+          scope.style.left = element.offsetWidth + 2;
+        }
+      });
+
+      scope.getFormErrorMessages = getFormErrorMessages;
+    }
+  };
+});
+/**
+ * <input name="confirm" type="password" rg-equal-value="data.password" ng-model="data.confirm">
+ * Constraint to be user for confirm password fields.
+ */
+angularModule.directive('rgEqualValue', function rgEqualValueDirective() {
+  return {
+    require: 'ngModel',
+
+    link: function link(scope, iElement, iAttrs, ngModelCtrl) {
+      const element = iElement[0];
+
+      function assertEqual(thisValue, thatValue) {
+        ngModelCtrl.$setValidity('equalvalue', thisValue === thatValue);
+      }
+
+      scope.$watch(iAttrs.rgEqualValue, value => {
+        assertEqual(element.value, value);
+      });
+
+      element.addEventListener('keyup', () => {
+        const thatValue = scope.$eval(iAttrs.rgEqualValue);
+        scope.$apply(() => {
+          assertEqual(element.value, thatValue);
+        });
+      });
+    }
+  };
+});
+/**
+ * <input name="name" required type="text" ng-class="form.name | rgInputClass:submitted" ng-model="name">
+ *
+ * Is intended to be used for the value of ng-class. Accepts a reference to an angularJS form input
+ */
+angularModule.filter('rgInputClass', () => (input, submitted) => ({
+  'ring-input': true,
+  'ring-input_error': input.$invalid && (input.$dirty || submitted),
+  'ring-input_correct': !input.$invalid && (input.$dirty || submitted)
+}));
+/**
+ * <form rg-form-autofill-fix ...>
+ *
+ * Fixes Chrome bug: https://github.com/angular/angular.js/issues/1460
+ */
+angularModule.directive('rgFormAutofillFix', $timeout => ({
+  require: '?form',
+  priority: 10,
+
+  link: function link($scope, element, attrs, form) {
+    if (form) {
+      const POLL_INTERVAL = 150;
+      const MAX_COUNT = 5;
+      let promise;
+      let count = 0;
+
+      (function poll() {
+        let filled;
+
+        angular.forEach(element.find('input'), elem => {
+          const $elem = angular.element(elem);
+          const controller = $elem.controller('ngModel');
+          const val = $elem.val();
+          const type = $elem.attr('type');
+
+          if (controller && val && type !== 'checkbox' && type !== 'radio') {
+            controller.$setViewValue(val);
+            filled = true;
+          }
+        });
+
+        if (!filled || count < MAX_COUNT) {
+          promise = $timeout(poll, POLL_INTERVAL);
+          count++;
+        }
+      }());
+
+      element.on('$destroy', () => {
+        $timeout.cancel(promise);
+      });
+
+    }
+  }
+}));
+
+export default angularModule.name;

package/components/form-ng/form-ng.stories.js

@@ -0,0 +1,73 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import '../form/form.css';
+
+import ButtonNG from '../button-ng/button-ng';
+import SelectNG from '../select-ng/select-ng';
+import CheckboxNG from '../checkbox-ng/checkbox-ng';
+
+import InputNG from '../input-ng/input-ng';
+
+import FormNG from './form-ng';
+
+export default {
+  title: 'Legacy Angular/Form Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Form.'
+  }
+};
+
+export const basic = () => {
+  angular.
+    module(APP_NAME, [FormNG, CheckboxNG, SelectNG, ButtonNG, InputNG]).
+    controller('FormExampleCtrl', function ctrl() {
+      this.checkedModel = true;
+      this.data = [{name: 'Ada'}, {name: 'Nik'}];
+    });
+
+  return `
+      <div style="width: 700px"
+        ng-controller="FormExampleCtrl as formExampleCtrl">
+
+        <form class="ring-form" name="ExampleForm" novalidate>
+          <span class="ring-form__title">Form Title</span>
+
+          <div class="ring-form__group">
+            <rg-input size="M" required ng-model="formExampleCtrl.inputValue" label="Medium Input" name="inputMD" type="text"></rg-input>
+            <div rg-error-bubble="ExampleForm.inputMD"></div>
+          </div>
+
+          <div class="ring-form__group">
+            <rg-select options="item.name for item in formExampleCtrl.data track by item.name"></rg-select>
+            <div class="ring-form__control__description">I am a simple description</div>
+          </div>
+
+          <div class="ring-form__group">
+            <div>
+              <rg-checkbox ng-model="formExampleCtrl.checkedModel">Checkbox 1</rg-checkbox>
+            </div>
+            <div>
+              <rg-checkbox ng-model="formExampleCtrl.checkedModel">Checkbox 2</rg-checkbox>
+            </div>
+            <div>
+              <rg-checkbox>Checkbox 3</rg-checkbox>
+            </div>
+            <div>
+              <rg-checkbox>Checkbox 4</rg-checkbox>
+            </div>
+          </div>
+
+          <div class="ring-form__footer">
+            <rg-button mode="primary">Save</rg-button>
+            <rg-button>Cancel</rg-button>
+          </div>
+        </form>
+      </div>
+    `;
+};
+
+basic.storyName = 'Form Ng';

package/components/global/angular-component-factory.js

@@ -0,0 +1,93 @@
+import angular from 'angular';
+
+import React from 'react';
+
+import {render, unmountComponentAtNode} from './react-render-adapter';
+import RingAngularComponent from './ring-angular-component';
+
+import DomRenderer from './react-dom-renderer';
+
+function getAngularComponentName(name) {
+  return `rg${name}`;
+}
+
+function createAngularComponent(Component) {
+  const propKeys = Object.keys(Component.propTypes);
+
+  const bindings = {};
+  propKeys.forEach(key => {
+    bindings[key] = '<';
+  });
+
+  class AngularComponent extends RingAngularComponent {
+
+    static bindings = bindings;
+    static transclude = true;
+
+    $postLink() {
+      const {$transclude} = this.$inject;
+
+
+      $transclude(clone => {
+        this.container = document.createElement('div');
+
+        for (let i = 0; i < clone.length; i++) {
+          this.container.appendChild(clone[i]);
+        }
+        this.render();
+      });
+    }
+
+    $onChanges() {
+      if (!this.container) {
+        return;
+      }
+      this.render();
+    }
+
+    $onDestroy() {
+      unmountComponentAtNode(this.$inject.$element[0]);
+    }
+
+    render() {
+      const {$scope, $element: {0: container}} = this.$inject;
+
+      const props = {};
+      propKeys.forEach(key => {
+        if (this[key] !== undefined) {
+          if (typeof this[key] === 'function') {
+            props[key] = (...rest) => {
+              const ret = this[key](...rest);
+              $scope.$applyAsync();
+              return ret;
+            };
+          } else {
+            props[key] = this[key];
+          }
+        }
+      });
+
+      const hasInnerContent = this.container.hasChildNodes();
+
+      render(
+        <Component {...props}>
+          {hasInnerContent ? <DomRenderer nodes={this.container.childNodes}/> : null}
+        </Component>,
+        container
+      );
+    }
+  }
+  AngularComponent.$inject = ['$scope', '$element', '$transclude'];
+  return AngularComponent;
+}
+
+function angularComponentFactory(Component, name) {
+  const angularModuleName = `Ring.${name[0].toLowerCase() + name.slice(1)}`;
+
+  return angular.
+    module(angularModuleName, []).
+    component(getAngularComponentName(name), createAngularComponent(Component));
+}
+
+export default angularComponentFactory;
+export {createAngularComponent};

package/components/global/angular-component-factory.test.js

@@ -0,0 +1,138 @@
+/* global inject: false */
+import angular from 'angular';
+
+import 'angular-mocks';
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {act, Simulate} from 'react-dom/test-utils';
+
+import angularComponentFactory from './angular-component-factory';
+
+class TestComponent extends PureComponent {
+  static propTypes = {
+    id: PropTypes.string,
+    someObj: PropTypes.object,
+    onClick: PropTypes.func,
+    className: PropTypes.string,
+    children: PropTypes.node
+  };
+
+  static defaultProps = {
+    someObj: {}
+  };
+
+  handleClick = () => this.props.onClick('payload');
+
+  render() {
+    const {id, someObj, className, children} = this.props;
+    return (
+      <>
+        <button
+          type="button"
+          id={id}
+          data-some-obj={someObj.foo}
+          onClick={this.handleClick}
+          className={className}
+        />
+        {children}
+      </>
+    );
+  }
+}
+
+const testModule = angularComponentFactory(TestComponent, 'TestComponent').name;
+
+describe('angularComponentFactory', () => {
+  let $componentController;
+  let $compile;
+  let $rootScope;
+
+  beforeEach(window.module(testModule));
+
+  beforeEach(inject((_$componentController_, _$compile_, _$rootScope_) => {
+    $componentController = _$componentController_;
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+  }));
+
+  it('should return an Angular module with the proper name', () => {
+    testModule.should.be.equal('Ring.testComponent');
+  });
+
+  it('should register an Angular component with the proper name', () => {
+    const $element = angular.element('<div></div>');
+    const $transclude = callback => callback();
+    const ctrl = $componentController('rgTestComponent', {
+      $scope: $rootScope,
+      $element,
+      $transclude
+    });
+    ctrl.should.not.be.undefined;
+  });
+
+  it('should use one-way binding for object props', () => {
+    $rootScope.testObj = {
+      foo: 'bar'
+    };
+    const $element = $compile(
+      '<rg-test-component some-obj="testObj"></rg-test-component>'
+    )($rootScope);
+    const component = $element[0].firstChild;
+    component.should.have.attribute('data-some-obj', 'bar');
+
+    $rootScope.testObj = {
+      foo: 'test value'
+    };
+    $rootScope.$digest();
+    component.should.have.attribute('data-some-obj', 'test value');
+  });
+
+  it('should use string binding for string props', () => {
+    $rootScope.id = '1';
+    const $element = $compile('<rg-test-component id="id"></rg-test-component>')($rootScope);
+    const component = $element[0].firstChild;
+    component.should.have.attribute('id', '1');
+
+    $rootScope.id = '2';
+    $rootScope.$digest();
+    component.should.have.attribute('id', '2');
+  });
+
+  it('should pass given css classes', () => {
+    const $element = $compile(
+      '<rg-test-component class-name="\'test-class1 test-class2\'"></rg-test-component>'
+    )($rootScope);
+    const component = $element[0].firstChild;
+    component.should.have.class('test-class1');
+    component.should.have.class('test-class2');
+  });
+
+  it('should use one-way binding for function props', () => {
+    $rootScope.callback = sandbox.spy();
+    const $element = $compile(
+      '<rg-test-component on-click="callback"></rg-test-component>'
+    )($rootScope);
+    const component = $element[0].firstChild;
+
+    Simulate.click(component);
+
+    $rootScope.callback.should.have.been.called;
+    $rootScope.callback.should.have.been.calledWith('payload');
+  });
+
+  it('should support ng-if in nested content', () => {
+    let $element = null;
+    act(() => {
+      $element = $compile(`
+<rg-test-component>
+  <span data-test="hello">HELLO</span>
+</rg-test-component>`
+      )($rootScope);
+    });
+
+    const component = $element[0].querySelector('[data-test~=hello]');
+    $rootScope.$digest();
+
+    should.exist(component);
+  });
+});

package/components/global/compose.d.ts

@@ -0,0 +1,7 @@
+declare function compose<A, R1, R2, R3, R4, R5, R6, R7>(f7: (a: R6) => R7, f6: (a: R5) => R6, f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R7;
+declare function compose<A, R1, R2, R3, R4, R5, R6>(f6: (a: R5) => R6, f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R6;
+declare function compose<A, R1, R2, R3, R4, R5>(f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R5;
+declare function compose<A, R1, R2, R3, R4>(f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R4;
+declare function compose<A, R1, R2, R3>(f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R3;
+declare function compose<A, R1, R2>(f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R2;
+export default compose;

package/components/global/compose.js

@@ -0,0 +1,4 @@
+function compose(...funcs) {
+    return funcs.reduce((acc, func) => arg => acc(func(arg)), arg => arg);
+}
+export default compose;

package/components/global/composeRefs.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'react';
+declare const _default: <T>(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void;
+export default _default;

package/components/global/composeRefs.js

@@ -0,0 +1,8 @@
+export default (...refs) => (value) => refs.forEach(ref => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        ref.current = value;
+    }
+});

package/components/global/controls-height.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare enum ControlsHeight {
+    S = "S",
+    M = "M",
+    L = "L"
+}
+export declare const ControlsHeightContext: import("react").Context<ControlsHeight>;
+export declare function configureGlobalControlsHeight(value: ControlsHeight): void;
+export declare function getGlobalControlsHeight(): ControlsHeight;

package/components/global/controls-height.js

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+export var ControlsHeight;
+(function (ControlsHeight) {
+    ControlsHeight["S"] = "S";
+    ControlsHeight["M"] = "M";
+    ControlsHeight["L"] = "L";
+})(ControlsHeight || (ControlsHeight = {}));
+export const ControlsHeightContext = createContext(ControlsHeight.M);
+let globalControlsHeight = ControlsHeight.M;
+// This can be used if React Context is not applicable, for example for alertService or Auth dialog
+export function configureGlobalControlsHeight(value) {
+    globalControlsHeight = value;
+}
+export function getGlobalControlsHeight() {
+    return globalControlsHeight;
+}

package/components/global/create-stateful-context.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+type Update<T> = (value: T) => void;
+export interface ProviderProps {
+    children: ReactNode;
+}
+export interface UpdaterProps<T> {
+    value: T;
+    skipUpdate?: boolean;
+}
+export default function createStatefulContext<T>(initialValue: T, name?: string): {
+    ValueContext: React.Context<T>;
+    UpdateContext: React.Context<Update<T>>;
+    Provider: {
+        ({ children }: ProviderProps): React.JSX.Element;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        };
+        displayName: string;
+    };
+    useUpdate: (value: T, skipUpdate?: boolean) => void;
+    Updater: React.MemoExoticComponent<{
+        ({ value, skipUpdate }: UpdaterProps<T>): null;
+        displayName: string;
+    }>;
+};
+export {};

package/components/global/create-stateful-context.js

@@ -0,0 +1,38 @@
+import React, { createContext, memo, useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+export default function createStatefulContext(initialValue, name = '') {
+    const ValueContext = createContext(initialValue);
+    const UpdateContext = createContext(() => { });
+    function Provider({ children }) {
+        const [value, update] = useState(initialValue);
+        return (<ValueContext.Provider value={value}>
+        <UpdateContext.Provider value={update}>
+          {children}
+        </UpdateContext.Provider>
+      </ValueContext.Provider>);
+    }
+    Provider.propTypes = {
+        children: PropTypes.node
+    };
+    Provider.displayName = `${name}Provider`;
+    function useUpdate(value, skipUpdate) {
+        const update = useContext(UpdateContext);
+        useEffect(() => {
+            if (!skipUpdate) {
+                update(value);
+            }
+        }, [update, value, skipUpdate]);
+    }
+    function Updater({ value, skipUpdate }) {
+        useUpdate(value, skipUpdate);
+        return null;
+    }
+    Updater.displayName = `${name}Updater`;
+    return {
+        ValueContext,
+        UpdateContext,
+        Provider,
+        useUpdate,
+        Updater: memo(Updater)
+    };
+}

package/components/global/data-tests.d.ts

@@ -0,0 +1,3 @@
+type AttrsMap = Record<string, boolean | null | undefined>;
+export default function joinDataTestAttributes(...attrs: Array<string | AttrsMap | null | undefined>): string;
+export {};

package/components/global/data-tests.js

@@ -0,0 +1,17 @@
+function expandMap(attrsMap) {
+    return Object.entries(attrsMap).
+        reduce((result, [key, value]) => (value ? [...result, key] : result), []);
+}
+export default function joinDataTestAttributes(...attrs) {
+    return attrs.
+        reduce((result, attr) => {
+        if (!attr) {
+            return result;
+        }
+        if (typeof attr === 'object') {
+            return [...result, ...expandMap(attr)];
+        }
+        return [...result, attr];
+    }, []).
+        join(' ');
+}

package/components/global/dom.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @name DOM
+ */
+import { SyntheticEvent } from 'react';
+import type { PropertiesHyphen } from 'csstype';
+export declare const getStyles: ((elt: Element, pseudoElt?: string | null | undefined) => CSSStyleDeclaration) & typeof getComputedStyle;
+export declare function isMounted(node: Node | Range | null | undefined): boolean;
+export interface Rect {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export declare function getRect(node: Element | Range | null | undefined): Rect;
+export declare function getPixelRatio(): number;
+export declare function getWindowHeight(): number;
+export declare function getWindowWidth(): number;
+export declare function isNodeInVisiblePartOfPage(node: Element | Range): boolean;
+export declare function getDocumentScrollTop(): number;
+export declare function getDocumentScrollLeft(): number;
+export declare const applyMethodToClasses: (method: 'add' | 'remove') => (classList: DOMTokenList, classes?: string) => void;
+export declare const addClasses: (classList: DOMTokenList, classes?: string) => void;
+export declare const removeClasses: (classList: DOMTokenList, classes?: string) => void;
+export declare const toggleClasses: (classList: DOMTokenList, classes: Record<string, boolean>) => void;
+export declare function setRootStyleProperties(properties?: PropertiesHyphen): void;
+export declare function resetRootStyleProperties(properties?: Partial<Record<keyof PropertiesHyphen, unknown>>): void;
+export declare class Listeners {
+    private _all;
+    add<K extends keyof HTMLElementEventMap>(el: HTMLElement, event: K, handler: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
+    add<K extends keyof WindowEventMap>(el: Window, event: K, handler: (this: Window, ev: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
+    add<K extends keyof DocumentEventMap>(el: Document, event: K, handler: (this: Window, ev: DocumentEventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
+    remove(fn: () => void): void;
+    removeAll(): void;
+}
+export declare function preventDefault(e: Event | SyntheticEvent): void;