@jetbrains/ring-ui 5.1.23 → 5.1.24

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

@@ -0,0 +1,358 @@
+/**
+ * @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.stories.js

@@ -0,0 +1,221 @@
+/* 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__template.js

@@ -0,0 +1,32 @@
+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>`;

package/components/select/select-popup.css

@@ -0,0 +1,105 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+.filterWithTags {
+  overflow: hidden;
+
+  margin: calc(unit * 2) unit 0;
+  padding: 3px;
+
+  text-align: left;
+
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+
+  & .filterWrapper {
+    padding-right: 0;
+    padding-left: 0;
+
+    border-bottom: none;
+  }
+
+  &:hover {
+    border-color: var(--ring-border-hover-color);
+  }
+}
+
+.filterWithTagsFocused,
+.filterWithTagsFocused.filterWithTagsFocused:hover {
+  border-color: var(--ring-main-color);
+}
+
+.filterWithTagsInput {
+  padding: 0;
+
+  border: none;
+}
+
+.filter {
+  flex-grow: 1;
+
+  width: 0;
+}
+
+.popup {
+  overscroll-behavior: contain;
+}
+
+.filterWrapper {
+  position: relative;
+
+  display: flex;
+
+  margin: 0;
+  padding-right: unit;
+  padding-left: calc(unit * 5.5);
+
+  border-bottom: 1px solid var(--ring-borders-color);
+
+  [dir="rtl"] & {
+    padding-right: calc(unit * 5.5);
+    padding-left: unit;
+  }
+}
+
+.filterIcon {
+  position: absolute;
+  top: 7px;
+  left: calc(unit * 2);
+
+  color: var(--ring-icon-color);
+
+  [dir="rtl"] & {
+    right: calc(unit * 2);
+    left: auto;
+  }
+}
+
+.bottomLine {
+  text-align: center;
+
+  &.bottomLineOverItem {
+    position: relative;
+
+    z-index: var(--ring-fixed-z-index);
+
+    margin-top: -36px;
+
+    background-color: var(--ring-content-background-color);
+  }
+}
+
+.message {
+  display: inline-block;
+
+  margin: unit 0;
+  padding: 0 calc(2 * unit);
+}
+
+.selectAll {
+  display: flex;
+  justify-content: space-between;
+
+  padding: 8px 16px 0;
+}