diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/my-view2.js | 72 | ||||
| -rw-r--r-- | src/components/my-view3.js | 111 |
2 files changed, 0 insertions, 183 deletions
diff --git a/src/components/my-view2.js b/src/components/my-view2.js deleted file mode 100644 index 0dee7ee..0000000 --- a/src/components/my-view2.js +++ /dev/null @@ -1,72 +0,0 @@ -/** -@license -Copyright (c) 2018 The Polymer Project Authors. All rights reserved. -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt -Code distributed by Google as part of the polymer project is also -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -*/ - -import { html } from '@polymer/lit-element'; -import { PageViewElement } from './page-view-element.js'; -import { connect } from 'pwa-helpers/connect-mixin.js'; - -// This element is connected to the Redux store. -import { store } from '../store.js'; - -// These are the actions needed by this element. -import { increment, decrement } from '../actions/counter.js'; - -// We are lazy loading its reducer. -import counter from '../reducers/counter.js'; -store.addReducers({ - counter -}); - -// These are the elements needed by this element. -import './counter-element.js'; - -// These are the shared styles needed by this element. -import { SharedStyles } from './shared-styles.js'; - -class MyView2 extends connect(store)(PageViewElement) { - _render(props) { - return html` - ${SharedStyles} - <section> - <h2>Redux example: simple counter</h2> - <div class="circle">${props._value}</div> - <p>This page contains a reusable <code><counter-element></code>. The - element is not built in a Redux-y way (you can think of it as being a - third-party element you got from someone else), but this page is connected to the - Redux store. When the element updates its counter, this page updates the values - in the Redux store, and you can see the current value of the counter reflected in - the bubble above.</p> - <br><br> - </section> - <section> - <p> - <counter-element value="${props._value}" clicks="${props._clicks}" - on-counter-incremented="${() => store.dispatch(increment())}" - on-counter-decremented="${() => store.dispatch(decrement())}"> - </counter-element> - </p> - </section> - `; - } - - static get properties() { return { - // This is the data from the store. - _clicks: Number, - _value: Number - }} - - // This is called every time something is updated in the store. - _stateChanged(state) { - this._clicks = state.counter.clicks; - this._value = state.counter.value; - } -} - -window.customElements.define('my-view2', MyView2); diff --git a/src/components/my-view3.js b/src/components/my-view3.js deleted file mode 100644 index e226eaa..0000000 --- a/src/components/my-view3.js +++ /dev/null @@ -1,111 +0,0 @@ -/** -@license -Copyright (c) 2018 The Polymer Project Authors. All rights reserved. -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt -Code distributed by Google as part of the polymer project is also -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -*/ - -import { html } from '@polymer/lit-element'; -import { PageViewElement } from './page-view-element.js'; -import { connect } from 'pwa-helpers/connect-mixin.js'; - -// This element is connected to the Redux store. -import { store } from '../store.js'; - -// These are the actions needed by this element. -import { checkout } from '../actions/shop.js'; - -// We are lazy loading its reducer. -import shop, { cartQuantitySelector } from '../reducers/shop.js'; -store.addReducers({ - shop -}); - -// These are the elements needed by this element. -import './shop-products.js'; -import './shop-cart.js'; - -// These are the shared styles needed by this element. -import { SharedStyles } from './shared-styles.js'; -import { ButtonSharedStyles } from './button-shared-styles.js'; -import { addToCartIcon } from './my-icons.js'; - -class MyView3 extends connect(store)(PageViewElement) { - _render({_quantity, _error}) { - return html` - ${SharedStyles} - ${ButtonSharedStyles} - <style> - /* Add more specificity (.checkout) to workaround an issue in lit-element: - https://github.com/PolymerLabs/lit-element/issues/34 */ - button.checkout { - border: 2px solid var(--app-dark-text-color); - border-radius: 3px; - padding: 8px 16px; - } - button.checkout:hover { - border-color: var(--app-primary-color); - color: var(--app-primary-color); - } - .cart, .cart svg { - fill: var(--app-primary-color); - width: 64px; - height: 64px; - } - .circle.small { - margin-top: -72px; - width: 28px; - height: 28px; - font-size: 16px; - font-weight: bold; - line-height: 30px; - } - </style> - - <section> - <h2>Redux example: shopping cart</h2> - <div class="cart">${addToCartIcon}<div class="circle small">${_quantity}</div></div> - <p>This is a slightly more advanced Redux example, that simulates a - shopping cart: getting the products, adding/removing items to the - cart, and a checkout action, that can sometimes randomly fail (to - simulate where you would add failure handling). </p> - <p>This view, as well as its 2 child elements, <code><shop-products></code> and - <code><shop-cart></code> are connected to the Redux store.</p> - </section> - <section> - <h3>Products</h3> - <shop-products></shop-products> - - <br> - <h3>Your Cart</h3> - <shop-cart></shop-cart> - - <div>${_error}</div> - <br> - <p> - <button class="checkout" hidden="${_quantity == 0}" - on-click="${() => store.dispatch(checkout())}"> - Checkout - </button> - </p> - </section> - `; - } - - static get properties() { return { - // This is the data from the store. - _quantity: Number, - _error: String - }} - - // This is called every time something is updated in the store. - _stateChanged(state) { - this._quantity = cartQuantitySelector(state); - this._error = state.shop.error; - } -} - -window.customElements.define('my-view3', MyView3); |