Adds bs-modal, list-controls, fetch-more

README.md

@@ -18,27 +18,26 @@ Usage
 Contributing
 ------------------------------------------------------------------------------
 
+This project uses docker-compose to ensure a consistant testing environment. See alternative instructions below for local testing.
+
 ### Installation
 
 * `git clone https://github.com/limit-zero/ember-common-uikit`
 * `cd ember-common-uikit`
-* `yarn install`
+* `yarn build`
 
 ### Linting
 
-* `yarn lint:js`
-* `yarn lint:js --fix`
+* `yarn lint`
 
 ### Running tests
 
-* `ember test` – Runs the test suite on the current Ember version
-* `ember test --server` – Runs the test suite in "watch mode"
-* `ember try:each` – Runs the test suite against multiple Ember versions
+* `yarn test` – Runs the test suite on the current Ember version
 
 ### Running the dummy application
 
-* `ember serve`
-* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
+* `yarn start`
+* Visit the dummy application at [http://localhost:9905](http://localhost:9905).
 
 For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
 

addon/components/bs-modal.js

@@ -0,0 +1,15 @@
+import Component from '@ember/component';
+import layout from '../templates/components/bs-modal';
+
+export default Component.extend({
+  layout,
+  to: 'bootstrap-modals',
+  backdrop: true,
+  fade: true,
+  show: false,
+  keyboard: true,
+  focus: true,
+  size: null,
+  contentClass: null,
+  dislogClass: null,
+});

addon/components/bs-modal/body.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/bs-modal/body';
+
+export default Component.extend({
+  layout,
+  classNames: ['modal-body'],
+});

addon/components/bs-modal/dialog.js

@@ -0,0 +1,24 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/bs-modal/dialog';
+
+export default Component.extend({
+  layout,
+  classNames: ['modal-dialog'],
+  classNameBindings: ['_sizeClass'],
+  attributeBindings: ['role'],
+
+  role: 'document',
+
+  size: null,
+
+  _sizeClass: computed('size', function() {
+    switch (this.get('size')) {
+      case 'small':
+        return 'modal-sm';
+      case 'large':
+        return 'modal-lg';
+      default:
+        return null;
+    }
+  }),
+});

addon/components/bs-modal/footer.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/bs-modal/footer';
+
+export default Component.extend({
+  layout,
+  classNames: ['modal-footer'],
+});

addon/components/bs-modal/header.js

@@ -0,0 +1,12 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/bs-modal/header';
+
+export default Component.extend({
+  layout,
+  classNames: ['modal-header'],
+  title: null,
+  showClose: true,
+
+  titleComponent: 'bs-modal/title',
+  closeComponent: 'bs-modal/close-icon'
+});

addon/components/bs-modal/wrapper.js

@@ -0,0 +1,137 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/bs-modal/wrapper';
+
+export default Component.extend({
+  layout,
+  classNames: ['modal'],
+  classNameBindings: ['fade'],
+  attributeBindings: ['role'],
+
+  fade: true,
+  show: false,
+  role: 'dialog',
+  size: null,
+
+  isShowing: false,
+  isShown: false,
+  isHiding: false,
+  isHidden: true,
+  isTransitioning: false,
+
+  didInsertElement() {
+    const $obj = this.$();
+    // Set the modal options.
+    this.setModalOptions($obj);
+    // Replace Bootstraps native dismiss with the internal action.
+    this.replaceDismiss($obj);
+    // Set modal event hooks
+    this.setModalHooks($obj);
+    // Show the modal, if directed to.
+    if (this.get('show')) this.send('show');
+  },
+
+  willDestroyElement() {
+    const $obj = this.$();
+    if (this.get('isShown')) {
+      // The modal was closed by sending `show=false` and it's still open.
+      // Remove internal events and then natively hide the modal and disposed once hidden.
+      $obj.off('hidden.bs.modal')
+      $obj.on('hidden.bs.modal', () => {
+        this.sendEvent('onHidden');
+        $obj.modal('dispose');
+      });
+      $obj.modal('hide');
+    } else {
+      $obj.modal('dispose');
+    }
+  },
+
+  actions: {
+    show() {
+      if (this.get('isTransitioning')) return;
+      this.$().modal('show');
+    },
+
+    hide() {
+      if (this.get('isTransitioning')) return;
+      this.$().modal('hide');
+    },
+  },
+
+  setModalOptions($obj) {
+    const keys = ['backdrop', 'keyboard', 'focus'];
+    const options = keys.reduce((opts, key) => {
+      const value = this.get(key);
+      if (isPresent(value)) opts[key] = value;
+      return opts;
+    }, { show: false });
+    $obj.modal(options);
+  },
+
+  replaceDismiss($obj) {
+    // Turn off Bootstrap's native dismissing of the modal (via a click from a`[data-dismiss="modal"]` element or by clicking the backdrop)
+    $obj.off('click.dismiss.bs.modal');
+    // Replace with the Ember hide() action.
+    $obj.on('click.dismiss.bs.modal', (event) => {
+      if ($(event.currentTarget).is(event.target) && true === this.get('backdrop')) {
+        this.send('hide');
+      }
+    });
+  },
+
+  resetShowing() {
+    this.set('isShowing', false);
+    this.set('isShown', false);
+  },
+
+  resetHiding() {
+    this.set('isHiding', false);
+    this.set('isHidden', false);
+  },
+
+  setModalHooks($obj) {
+    // This event fires immediately when the show instance method is called.
+    // If caused by a click, the clicked element is available as the relatedTarget property of the event.
+    $obj.on('show.bs.modal', () => {
+      this.resetHiding();
+      this.set('isTransitioning', true);
+      this.set('isShowing', true);
+      this.set('isShown', false);
+      this.sendEvent('onShow');
+
+    });
+
+    // This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
+    // If caused by a click, the clicked element is available as the relatedTarget property of the event.
+    $obj.on('shown.bs.modal', () => {
+      this.set('isShown', true);
+      this.set('isShowing', false);
+      this.set('isTransitioning', false);
+      this.sendEvent('onShown');
+    });
+
+    // This event is fired immediately when the hide instance method has been called.
+    $obj.on('hide.bs.modal', () => {
+      this.resetShowing();
+      this.set('isTransitioning', true);
+      this.set('isHiding', true);
+      this.set('isHidden', false);
+      this.sendEvent('onHide');
+    });
+
+    // This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
+    $obj.on('hidden.bs.modal', () => {
+      this.set('isHidden', true);
+      this.set('isHiding', false);
+      this.set('isTransitioning', false);
+      this.sendEvent('onHidden');
+      if (!this.get('isDestroyed')) this.set('show', false);
+    });
+  },
+
+  sendEvent(name) {
+    const fn = this.get(name);
+    if (fn && typeof fn === 'function') return fn();
+  },
+
+});

addon/components/confirm-button.js

@@ -0,0 +1,31 @@
+import Component from '@ember/component';
+import layout from '../templates/components/confirm-button';
+
+export default Component.extend({
+  layout,
+  tagName: 'button',
+  classNames: ['btn', 'clickable'],
+  attributeBindings: ['disabled', 'type'],
+
+  disabled: false,
+  type: 'button',
+
+  icon: '',
+  label: 'Action',
+  confirmLabel: 'You Sure?',
+  onConfirm: null,
+
+  hasConfirmed: false,
+
+  click() {
+    if (this.get('hasConfirmed')) {
+      this.get('onConfirm')();
+    } else {
+      this.set('hasConfirmed', true);
+    }
+  },
+
+  focusOut() {
+    this.set('hasConfirmed', false);
+  },
+});

addon/components/fetch-more.js

@@ -0,0 +1,82 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { assign } from '@ember/polyfills';
+import { isArray } from '@ember/array';
+import layout from '../templates/components/fetch-more';
+
+export default Component.extend({
+  layout,
+
+  /**
+   * The Apollo client query observable.
+   * @type {Observable}
+   */
+  query: null,
+
+  hasNextPage: false,
+  endCursor: null,
+  resultKey: null,
+
+  isFetching: false,
+
+  nodes: computed('[email protected]', function() {
+    const edges = this.get('edges');
+    if (!isArray(edges)) return [];
+    return edges.map(edge => edge.node);
+  }),
+
+  hasEvent(name) {
+    const fn = this.get(name);
+    return fn && typeof fn === 'function';
+  },
+
+  sendEvent(name, ...args) {
+    if (this.hasEvent(name)) this.get(name)(...args, this);
+  },
+
+  actions: {
+    /**
+     * Fetches more results using the observable from the original query.
+     * @see https://www.apollographql.com/docs/react/features/pagination.html
+     */
+    async fetchMore() {
+      this.set('isFetching', true);
+      this.sendEvent('on-fetch-start');
+      const observable = this.get('query');
+      const endCursor = this.get('endCursor');
+      const resultKey = this.get('resultKey');
+
+      const updateQuery = (previous, { fetchMoreResult }) => {
+        const { edges, pageInfo, totalCount } = fetchMoreResult[resultKey];
+        if (edges.length) {
+          return {
+            [resultKey]: {
+              __typename: previous[resultKey].__typename,
+              totalCount,
+              edges: [...previous[resultKey].edges, ...edges],
+              pageInfo,
+            },
+          };
+        }
+        return previous;
+      };
+      const pagination = assign({}, observable.variables.pagination, { after: endCursor });
+      const variables = { pagination };
+      try {
+        const result = await observable.fetchMore({ updateQuery, variables });
+        this.sendEvent('on-fetch-success', result);
+        return result;
+      } catch (e) {
+        const evt = 'on-fetch-error';
+        if (this.hasEvent(evt)) {
+          this.sendEvent(evt, e);
+        } else {
+          throw e;
+        }
+      } finally {
+        this.set('isFetching', false);
+        this.sendEvent('on-fetch-end');
+      }
+    },
+  },
+});

addon/components/list-controls/button.js

@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/list-controls/button';
+
+export default Component.extend({
+  layout,
+
+  tagName: 'button',
+  classNames: ['btn'],
+  attributeBindings: ['type', 'disabled', 'data-toggle', 'aria-haspopup', 'aria-expanded'],
+
+  type: 'button',
+  disabled: false,
+});