@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/components/save-field-ng/save-field-ng.examples.js

@@ -1,221 +0,0 @@
-/* eslint-disable angular/controller-as */
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import hubConfig from '../../.storybook/hub-config';
-
-import QueryAssistNG from '../query-assist-ng/query-assist-ng';
-
-import SaveFieldNG from './save-field-ng';
-
-export default {
-  title: 'Legacy Angular/Save Field Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Allows to create forms where some fields have their own Save buttons.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = ({onSave}) => {
-  angular.
-    module(APP_NAME, [SaveFieldNG, QueryAssistNG]).
-    config((shortcutsProvider, rgSaveFieldShortcutsMode) => {
-      shortcutsProvider.mode({
-        id: 'ring-shortcuts',
-        shortcuts: []
-      });
-      shortcutsProvider.mode(rgSaveFieldShortcutsMode);
-    }).
-    controller('SaveFieldDemoCtrl', function ctrl($scope, $q, $http) {
-      $scope.data = {
-        email: 'aa',
-        longText: null,
-        longTextList: ['one', 'two', 'three'],
-        num: 10,
-        someText: 'some text',
-        query: 'login: guest'
-      };
-
-      // eslint-disable-next-line angular/deferred
-      const defer = $q.defer();
-      defer.resolve();
-      $scope.save = () => {
-        onSave('data = ', $scope.data);
-        return defer.promise;
-      };
-
-      $scope.invalidSave = currentValue => {
-        if (currentValue.length < 7) {
-          return $q.reject(`Length of the string must be greater than 7! >> ${currentValue}`);
-        } else {
-          return true;
-        }
-      };
-
-      $scope.queryAssistSource = ({query, caret, omitSuggestions}) => {
-        const config = {
-          params: {
-            fields: `query,caret,styleRanges${omitSuggestions ? '' : ',suggestions'}`,
-            query,
-            caret
-          }
-        };
-
-        return $http.
-          get(`${hubConfig.serverUri}/api/rest/users/queryAssist`, config).
-          then(data => data.data);
-      };
-
-      $scope.updateQueryAssistValue = ({query}) => {
-        $scope.data.query = query;
-      };
-    });
-
-  return `
-      <div rg-shortcuts-app>
-        <div class="ring-form" ng-controller="SaveFieldDemoCtrl">
-
-          <div class="ring-form__group">
-            <label class="ring-form__label" for="input">
-              Input
-            </label>
-
-            <div class="ring-form__control">
-              <rg-save-field value="data.email"
-                on-save="save()">
-                <input type="text"
-                  id="input"
-                  class="ring-input ring-input-size_m"
-                  ng-required="true"
-                  ng-pattern="/^[a-zA-Z][a-zA-Z0-9-_\\.]*[@][a-zA-Z0-9-_\\.]+$/"
-                  ng-model="data.email">
-              </rg-save-field>
-              <div class="ring-form__control__description">Enter valid email</div>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label class="ring-form__label" for="email">
-              Input
-            </label>
-
-            <div class="ring-form__control">
-              <rg-save-field value="data.email" working-value="data.emailWorkingValue"
-                on-save="save()">
-                <input type="text"
-                  id="email"
-                  class="ring-input ring-input-size_m"
-                  ng-required="true"
-                  ng-pattern="/^[a-zA-Z][a-zA-Z0-9-_\\.]*[@][a-zA-Z0-9-_\\.]+$/"
-                  ng-model="data.emailWorkingValue">
-              </rg-save-field>
-              <div class="ring-form__control__description">value: {{data.email}}  working-value: {{data.emailWorkingValue}}</div>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label class="ring-form__label" for="textarea">
-              Textarea
-            </label>
-
-            <div class="ring-form__control">
-              <rg-save-field value="data.longText"
-                on-save="save()">
-                  <textarea type="text"
-                    id="textarea"
-                    class="ring-input ring-input-size_l"
-                    ng-required="true"
-                    ng-model="data.longText"></textarea>
-              </rg-save-field>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label class="ring-form__label" for="list-mode">
-              Textarea List Mode
-            </label>
-
-            <div class="ring-form__control">
-              <rg-save-field value="data.longTextList"
-                multiline="list"
-                on-save="save()">
-                  <textarea type="text"
-                    id="list-mode"
-                    name="myMultilineArea"
-                    class="ring-input ring-input-size_m"
-                    ng-model="data.longTextList"></textarea>
-              </rg-save-field>
-              <div class="ring-form__control__description">data.longTextList =
-                {{data.longTextList}}
-              </div>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label class="ring-form__label" for="number">
-              Number
-            </label>
-
-            <div class="ring-form__control">
-              <rg-save-field value="data.num"
-                on-save="save()">
-                <input type="number"
-                  id="number"
-                  max="10"
-                  class="ring-input ring-input-size_xs"
-                  ng-model="data.num">
-              </rg-save-field>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label class="ring-form__label" for="rejected">
-              Rejected Save
-            </label>
-
-            <div class="ring-form__control">
-              <rg-save-field value="data.someText"
-                on-save="invalidSave(value)">
-                <input type="text"
-                  id="rejected"
-                  class="ring-input ring-input-size_m"
-                  ng-model="data.someText">
-              </rg-save-field>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label class="ring-form__label" for="query-assist">
-              Query Assist
-            </label>
-
-            <div class="ring-form__control">
-              data.query={{data.query}}
-              <rg-save-field value="data.query"
-                on-save="save(value)">
-                <rg-query-assist
-                  id="query-assist"
-                  class="ring-input-size_l"
-                  x-data-source="queryAssistSource"
-                  query="data.query"
-                  on-apply="save"
-                  on-change="updateQueryAssistValue"
-                  placeholder="placeholder"
-                  hint="'Press ⇥ to complete first item'"
-                  hint-on-selection="'Press ↩ to complete selected item'"></rg-query-assist>
-              </rg-save-field>
-              <div class="ring-form__control__description">Currently there is a
-                bug with "escape" shortcut
-              </div>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    `;
-};
-
-basic.storyName = 'Save Field Ng';
-basic.argTypes = {onSave: {}};

package/components/save-field-ng/save-field-ng.js

@@ -1,358 +0,0 @@
-/**
- * @name Save Field Ng
- */
-import angular from 'angular';
-import '../form/form.css';
-import './save-field-ng.css';
-
-import '../loader-inline/loader-inline';
-import ButtonSet from '../button-set-ng/button-set-ng';
-import MessageBundle from '../message-bundle-ng/message-bundle-ng';
-import Form from '../form-ng/form-ng';
-import Shortcuts from '../shortcuts-ng/shortcuts-ng';
-import Button from '../button-ng/button-ng';
-import PromisedClick from '../promised-click-ng/promised-click-ng';
-
-import template from './save-field-ng__template';
-
-const angularModule = angular.module('Ring.save-field', [
-  MessageBundle,
-
-  /**
-   * for error-bubble
-   */
-  Form,
-  Shortcuts,
-  Button,
-  ButtonSet,
-  PromisedClick
-]);
-
-angularModule.constant('rgSaveFieldShortcutsMode', {
-  id: 'ring-save-field',
-  shortcuts: [
-    {
-      key: 'ctrl+enter',
-      action: 'comboSubmit'
-    },
-    {
-      key: 'enter',
-      action: 'submit'
-    },
-    {
-      key: 'esc',
-      action: 'cancel'
-    },
-    {
-      key: 'up',
-      action: 'noop'
-    },
-    {
-      key: 'down',
-      action: 'noop'
-    }
-  ]
-});
-
-angularModule.directive(
-  'rgSaveField',
-  function rgSaveFieldDirective(RingMessageBundle, $timeout, $q, $compile, $parse) {
-    const MULTI_LINE_SPLIT_PATTERN = /(\r\n|\n|\r)/gm;
-    const MULTI_LINE_LIST_MODE = 'list';
-    const CUSTOM_ERROR_ID = 'customError';
-    const ERROR_DESCRIPTION = 'error_description';
-    const ERROR_DEVELOPER_MSG = 'error_developer_message';
-
-    return {
-      require: 'rgSaveField',
-      transclude: true,
-      template,
-      scope: {
-        api: '=?',
-        value: '=',
-        workingValue: '=',
-        onSave: '&',
-        afterSave: '&?',
-        validate: '&?',
-        parseElement: '&?',
-        formatElement: '&?',
-        multiline: '@'
-      },
-      link: function link(scope, iElem, iAttrs, ctrl) {
-        const placeholder = angular.element(
-          iElem[0].querySelector('.ring-save-field__transclude-placeholder')
-        );
-        $compile(
-          angular.element('<div rg-error-bubble="saveFieldForm"></div>')
-        )(scope, errorBubble => {
-          placeholder.append(errorBubble);
-        });
-
-        const customError = {
-          message: ''
-        };
-
-        let blurTimeout = null;
-        let isTextarea = false;
-
-        const draftMode = iAttrs.workingValue;
-        const valueField = draftMode ? 'workingValue' : 'value';
-
-        function submitChanges() {
-          if (
-            !scope.saveFieldForm.$valid ||
-            scope.loading ||
-            angular.equals(scope.initial, scope[valueField])
-          ) {
-            return false;
-          }
-
-          function afterSaveCall() {
-            return $q.when(scope.afterSave({
-              value: scope[valueField]
-            }));
-          }
-
-          function success() {
-            scope.initial = angular.copy(scope[valueField]);
-            scope.saveFieldForm.$setPristine();
-
-            scope.done = true;
-
-            if (draftMode) {
-              scope.value = scope.workingValue;
-            }
-
-            $timeout(() => {
-              scope.done = false;
-            }, 1000); //eslint-disable-line no-magic-numbers
-
-            if (scope.afterSave) {
-              if (draftMode) {
-                return $timeout(afterSaveCall); // we need digest to sync value before calling after save
-              } else {
-                return afterSaveCall();
-              }
-            }
-
-            return undefined;
-          }
-
-          function error(err) {
-            let message;
-            if (typeof err === 'string') {
-              message = err;
-            } else if (typeof err === 'object') {
-              const errorData = err.data || err;
-              message = errorData[ERROR_DESCRIPTION] || errorData[ERROR_DEVELOPER_MSG];
-            }
-
-            customError.message = message;
-            scope.saveFieldForm.$setValidity(CUSTOM_ERROR_ID, false, customError);
-          }
-
-          scope.cancelBlur();
-
-          scope.loading = true;
-
-          let onsave = ctrl.getSave();
-          if (onsave) {
-            onsave = $q.when(onsave(scope[valueField]));
-          } else {
-            onsave = $q.when(scope.onSave({
-              value: scope[valueField]
-            }));
-          }
-
-          return onsave.
-            then(success, error).
-            then(() => {
-              scope.loading = false;
-            });
-        }
-
-        function resetValue() {
-          if (scope.loading) {
-            return;
-          }
-
-          scope.$evalAsync(() => {
-            scope[valueField] = scope.initial ? scope.initial : '';
-            scope.saveFieldForm.$setValidity(CUSTOM_ERROR_ID, true, customError);
-            scope.saveFieldForm.$setPristine();
-          });
-        }
-
-        function addMultilineProcessing(controlName) {
-          const stopWatch = scope.$watch(`saveFieldForm.${controlName}`, control => {
-            if (!control || !control.$formatters || !control.$parsers) {
-              return;
-            }
-
-            control.$formatters.push(value => {
-              if (!value) {
-                return value;
-              }
-
-              let formattedValue;
-              if (iAttrs.formatElement) {
-                formattedValue = value.map(element => scope.formatElement({element}));
-              } else {
-                formattedValue = value;
-              }
-
-              return formattedValue.join('\n');
-            });
-
-            control.$parsers.push(value => {
-              let array = value && value.split(MULTI_LINE_SPLIT_PATTERN) || [];
-
-              function notEmpty(val) {
-                return val && val.trim() && val !== '\n';
-              }
-
-              array = array.filter(notEmpty);
-
-              if (iAttrs.parseElement) {
-                array = array.map(element => scope.parseElement({element: element.trim()}));
-              }
-
-              return array;
-            });
-
-            stopWatch();
-          });
-        }
-
-        scope.cancelBlur = () => {
-          $timeout(() => {
-            if (blurTimeout) {
-              $timeout.cancel(blurTimeout);
-              blurTimeout = null;
-            }
-          // eslint-disable-next-line no-magic-numbers
-          }, 10);
-        };
-
-        if (draftMode) {
-          scope.$watch('value', value => {
-            scope.workingValue = angular.copy(value);
-            scope.initial = value;
-          });
-        }
-
-        scope.$watch(valueField, value => {
-          let promise = null;
-          if (scope.saveFieldForm.$pristine) {
-            scope.initial = value;
-          } else if (scope.initial && angular.equals(scope.initial, value)) {
-            resetValue();
-          } else if (scope.validate) {
-            promise = scope.validate({
-              value
-            });
-          }
-
-          $q.when(promise).
-            then(error => {
-              if (error) {
-                return $q.reject(error);
-              } else {
-                customError.message = '';
-                scope.saveFieldForm.$setValidity(CUSTOM_ERROR_ID, true, customError);
-
-                return undefined;
-              }
-            }).
-            catch(error => {
-              customError.message = error;
-              scope.saveFieldForm.$setValidity(CUSTOM_ERROR_ID, false, customError);
-            });
-        });
-
-        let inputNode = iElem[0].querySelector('input, .ring-save-field__input');
-
-        if (!inputNode) {
-          inputNode = iElem[0].querySelector('textarea');
-          isTextarea = !!inputNode;
-        }
-
-        if (inputNode) {
-          inputNode.classList.add('ring-js-shortcuts');
-
-          inputNode.addEventListener('focus', () => {
-            scope.$evalAsync(() => {
-              scope.focus = true;
-            });
-          });
-
-          inputNode.addEventListener('blur', () => {
-            scope.$evalAsync(() => {
-              scope.focus = false;
-            });
-          });
-
-          if (isTextarea && scope.multiline === MULTI_LINE_LIST_MODE) {
-            addMultilineProcessing(inputNode.name);
-          }
-        }
-
-        scope.wording = {
-          save: RingMessageBundle.form_save(),
-          saved: RingMessageBundle.form_saved(),
-          cancel: RingMessageBundle.form_cancel()
-        };
-
-        scope.keyMap = {
-          comboSubmit: e => {
-            if (isTextarea) {
-              e.preventDefault();
-              submitChanges();
-            }
-          },
-          submit: e => {
-            if (!isTextarea) {
-              e.preventDefault();
-              submitChanges();
-            }
-          },
-          cancel: resetValue,
-          noop: angular.noop
-        };
-
-        scope.api = {
-          save: submitChanges,
-          cancel: resetValue
-        };
-
-        scope.submitChanges = ctrl.submitChanges = submitChanges;
-
-        scope.cancelChanges = ctrl.cancelChanges = resetValue;
-
-        scope.focus = false;
-
-        scope.$on('$destroy', () => {
-          // 1) Bindings are already disabled by this time, so replacing scope.value = ... has no effect
-          // 2) We can't use scope.value.someField because we don't know anything about scope.value, it's passed from the outside
-          // 3) Probably we can use controllerAs to add one more object layer (ctrl.value) so the JS linking would work
-          // but errorBubble works with scope only, so a large refactoring of rgSaveField and other components is needed.
-          // This is the simplest solution:
-          if (iAttrs.value) {
-            $parse(iAttrs.value).assign(scope.$parent, scope.initial);
-          }
-        });
-      },
-      controller() {
-        let onSave = null;
-
-        this.setSave = cb => {
-          onSave = cb;
-        };
-
-        this.getSave = () => onSave;
-      }
-    };
-  }
-);
-
-export default angularModule.name;

package/components/save-field-ng/save-field-ng__template.js

@@ -1,32 +0,0 @@
-export default `<div class="ring-save-field" ng-form="saveFieldForm" rg-shortcuts="ring-save-field" shortcuts-map="keyMap" shortcuts-focus="focus">
-  <span class="ring-save-field__transclude-placeholder" ng-transclude=""></span>
-
-  <rg-button
-    ng-show="saveFieldForm.$dirty && saveFieldForm.$valid"
-    mode="primary"
-    class="ring-save-field__button ng-hide"
-    ng-mousedown="cancelBlur()"
-
-    rg-promised-click="submitChanges($event)"
-    promised-mode="loader"
-  >
-    {{wording.save}}
-  </rg-button>
-
-  <rg-button
-    ng-show="saveFieldForm.$dirty && !loading"
-    class="ring-save-field__button ng-hide"
-    ng-click="cancelChanges($event)"
-    ng-mousedown="cancelBlur()"
-  >
-    {{wording.cancel}}
-  </rg-button>
-
-  <rg-button
-    ng-show="done"
-    ng-disabled="true"
-    class="ring-save-field__button ng-hide"
-  >
-    {{wording.saved}}
-  </rg-button>
-</div>`;