Get rid of lodash in Grid
This commit is contained in:
parent
1add19319d
commit
1ec6af4833
|
|
@ -10,11 +10,14 @@ See `README.md` for instructions on how to build. Build is done with
|
|||
## Useful scripts
|
||||
|
||||
A few `npm` scripts are provided:
|
||||
* `npm run build` to trigger a dev build.
|
||||
* `npm run watch` to trigger a dev build and rebuild on changes.
|
||||
* `npm run prod` to trigger a production build.
|
||||
* `npm run build:dev` to trigger a dev build.
|
||||
* `npm run build:prod` to trigger a production build.
|
||||
* `npm run watch:dev` to trigger a dev build and rebuild on changes.
|
||||
* `npm run watch:prod` to trigger a production build and rebuild on changes.
|
||||
* `npm run clean` to clean the `app/dist` folder.
|
||||
* `npm run extractTranslations` to generate a translation file (see below).
|
||||
* `npm run lint:scss` and `npm run lint:js` for linting utilities.
|
||||
* `npm run test` which calls all the lint stuff.
|
||||
|
||||
|
||||
## Translating
|
||||
|
|
@ -31,3 +34,10 @@ a folder `./app/locales/$LOCALE`, put inside the generated file from `npm run
|
|||
--silent extractTranslations`, called `index.js`. Copy the lines in
|
||||
`./app/locales/index.js` to include your new translation and translate all the
|
||||
strings in the `./app/locales/$LOCALE/index.js` file you have just created.
|
||||
|
||||
|
||||
## Coding style
|
||||
|
||||
No strict coding style is used in this repo. ESLint and Stylelint, ran with
|
||||
`npm run test` ensures a certain coding style. Try to keep the coding style
|
||||
homogeneous.
|
||||
|
|
|
|||
2
TODO
2
TODO
|
|
@ -12,7 +12,7 @@
|
|||
* https://github.com/peterpme/redux-crud-api-middleware/blob/master/README.md
|
||||
* https://github.com/madou/armory-front/tree/master/src/app/reducers
|
||||
* https://github.com/erikras/multireducer
|
||||
* Immutable.js (?) + get rid of lodash
|
||||
* Immutable.js (?)
|
||||
|
||||
|
||||
## Global UI
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import CSSModules from "react-css-modules";
|
|||
import imagesLoaded from "imagesloaded";
|
||||
import Isotope from "isotope-layout";
|
||||
import Fuse from "fuse.js";
|
||||
import _ from "lodash";
|
||||
import shallowCompare from "react-addons-shallow-compare";
|
||||
|
||||
import FilterBar from "./FilterBar";
|
||||
import Pagination from "./Pagination";
|
||||
|
|
@ -121,11 +121,11 @@ export class Grid extends Component {
|
|||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
|
||||
return shallowCompare(this, nextProps, nextState);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!_.isEqual(nextProps.filterText, this.props.filterText)) {
|
||||
if (nextProps.filterText !== this.props.filterText) {
|
||||
this.handleFiltering(nextProps);
|
||||
}
|
||||
}
|
||||
|
|
@ -134,34 +134,34 @@ export class Grid extends Component {
|
|||
// Setup grid
|
||||
this.createIsotopeContainer();
|
||||
// Only arrange if there are elements to arrange
|
||||
if (_.get(this, "props.items.length", 0) > 0) {
|
||||
const length = this.props.items.length || 0;
|
||||
if (length > 0) {
|
||||
this.iso.arrange();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
// The list of keys seen in the previous render
|
||||
let currentKeys = _.map(
|
||||
prevProps.items,
|
||||
let currentKeys = prevProps.items.map(
|
||||
(n) => "grid-item-" + n.type + "/" + n.id);
|
||||
|
||||
// The latest list of keys that have been rendered
|
||||
let newKeys = _.map(
|
||||
this.props.items,
|
||||
let newKeys = this.props.items.map(
|
||||
(n) => "grid-item-" + n.type + "/" + n.id);
|
||||
|
||||
// Find which keys are new between the current set of keys and any new children passed to this component
|
||||
let addKeys = _.difference(newKeys, currentKeys);
|
||||
let addKeys = newKeys.diff(currentKeys);
|
||||
|
||||
// Find which keys have been removed between the current set of keys and any new children passed to this component
|
||||
let removeKeys = _.difference(currentKeys, newKeys);
|
||||
let removeKeys = currentKeys.diff(newKeys);
|
||||
|
||||
if (removeKeys.length > 0) {
|
||||
_.each(removeKeys, removeKey => this.iso.remove(document.getElementById(removeKey)));
|
||||
removeKeys.forEach(removeKey => this.iso.remove(document.getElementById(removeKey)));
|
||||
this.iso.arrange();
|
||||
}
|
||||
if (addKeys.length > 0) {
|
||||
this.iso.addItems(_.map(addKeys, (addKey) => document.getElementById(addKey)));
|
||||
const itemsToAdd = addKeys.map((addKey) => document.getElementById(addKey));
|
||||
this.iso.addItems(itemsToAdd);
|
||||
this.iso.arrange();
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="./",t(0)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(586);Object.keys(r).forEach(function(e){"default"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return r[e]}})})},586:function(e,t){!function(t,n){function r(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function a(){var e=b.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=b.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),b.elements=n+" "+e,s(t)}function c(e){var t=E[e[v]];return t||(t={},y++,e[v]=y,E[y]=t),t}function i(e,t,r){if(t||(t=n),f)return t.createElement(e);r||(r=c(t));var a;return a=r.cache[e]?r.cache[e].cloneNode():g.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function l(e,t){if(e||(e=n),f)return e.createDocumentFragment();t=t||c(e);for(var r=t.frag.cloneNode(),o=0,i=a(),l=i.length;o<l;o++)r.createElement(i[o]);return r}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return b.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+a().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(b,t.frag)}function s(e){e||(e=n);var t=c(e);return!b.shivCSS||d||t.hasCSS||(t.hasCSS=!!r(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||u(e,t),e}var d,f,m="3.7.3-pre",h=t.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,g=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",y=0,E={};!function(){try{var e=n.createElement("a");e.innerHTML="<xyz></xyz>",d="hidden"in e,f=1==e.childNodes.length||function(){n.createElement("a");var e=n.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(t){d=!0,f=!0}}();var b={elements:h.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:h.shivCSS!==!1,supportsUnknownElements:f,shivMethods:h.shivMethods!==!1,type:"default",shivDocument:s,createElement:i,createDocumentFragment:l,addElements:o};t.html5=b,s(n),"object"==typeof e&&e.exports&&(e.exports=b)}("undefined"!=typeof window?window:this,document)}});
|
||||
!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="./",t(0)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(590);Object.keys(r).forEach(function(e){"default"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return r[e]}})})},590:function(e,t){!function(t,n){function r(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function a(){var e=b.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=b.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),b.elements=n+" "+e,s(t)}function c(e){var t=E[e[v]];return t||(t={},y++,e[v]=y,E[y]=t),t}function i(e,t,r){if(t||(t=n),f)return t.createElement(e);r||(r=c(t));var a;return a=r.cache[e]?r.cache[e].cloneNode():g.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function l(e,t){if(e||(e=n),f)return e.createDocumentFragment();t=t||c(e);for(var r=t.frag.cloneNode(),o=0,i=a(),l=i.length;o<l;o++)r.createElement(i[o]);return r}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return b.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+a().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(b,t.frag)}function s(e){e||(e=n);var t=c(e);return!b.shivCSS||d||t.hasCSS||(t.hasCSS=!!r(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||u(e,t),e}var d,f,m="3.7.3-pre",h=t.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,g=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",y=0,E={};!function(){try{var e=n.createElement("a");e.innerHTML="<xyz></xyz>",d="hidden"in e,f=1==e.childNodes.length||function(){n.createElement("a");var e=n.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(t){d=!0,f=!0}}();var b={elements:h.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:h.shivCSS!==!1,supportsUnknownElements:f,shivMethods:h.shivMethods!==!1,type:"default",shivDocument:s,createElement:i,createDocumentFragment:l,addElements:o};t.html5=b,s(n),"object"==typeof e&&e.exports&&(e.exports=b)}("undefined"!=typeof window?window:this,document)}});
|
||||
//# sourceMappingURL=fix.ie9.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,3 @@
|
|||
Array.prototype.diff = function (a) {
|
||||
return this.filter(function (i) {return a.indexOf(i) < 0;});
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export * from "./array";
|
||||
export * from "./jquery";
|
||||
export * from "./string";
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* Capitalize function on strings.
|
||||
*/
|
||||
String.prototype.capitalize = function() {
|
||||
String.prototype.capitalize = function () {
|
||||
return this.charAt(0).toUpperCase() + this.slice(1);
|
||||
};
|
||||
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
export * from "./jquery";
|
||||
export * from "./locale";
|
||||
export * from "./misc";
|
||||
export * from "./reducers";
|
||||
export * from "./string";
|
||||
export * from "./url";
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import rawMessages from "./app/locales";
|
|||
const store = configureStore();
|
||||
const history = syncHistoryWithStore(hashHistory, store);
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
export const rootElement = document.getElementById("root");
|
||||
|
||||
// i18n
|
||||
export const onWindowIntl = () => {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ if (process.env.NODE_ENV !== "production" && module.hot) {
|
|||
// and display an overlay for runtime errors
|
||||
const renderApp = render;
|
||||
const renderError = (error) => {
|
||||
const RedBox = require("redbox-react");
|
||||
const RedBox = require("redbox-react").default;
|
||||
ReactDOM.render(
|
||||
<RedBox error={error} />,
|
||||
index.rootElement
|
||||
|
|
|
|||
21
package.json
21
package.json
|
|
@ -12,12 +12,9 @@
|
|||
"build:prod": "NODE_ENV=production webpack --progress",
|
||||
"watch:dev": "webpack --progress --watch",
|
||||
"watch:prod": "NODE_ENV=production webpack --progress --watch",
|
||||
|
||||
"extractTranslations": "babel-node scripts/extractTranslations.js",
|
||||
|
||||
"lint:scss": "stylelint './app/**/*.scss' --syntax scss",
|
||||
"lint:js": "eslint './app/**/*.js' './app/**/*.jsx'",
|
||||
|
||||
"test": "npm run lint:scss && npm run lint:js"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -35,13 +32,13 @@
|
|||
"jquery": "^3.1.0",
|
||||
"js-cookie": "^2.1.2",
|
||||
"jssha": "^2.1.0",
|
||||
"lodash": "^4.13.1",
|
||||
"react": "^15.2.0",
|
||||
"react": "^15.3.0",
|
||||
"react-addons-shallow-compare": "^15.3.0",
|
||||
"react-css-modules": "^3.7.9",
|
||||
"react-dom": "^15.2.0",
|
||||
"react-dom": "^15.3.0",
|
||||
"react-intl": "^2.1.3",
|
||||
"react-redux": "^4.4.5",
|
||||
"react-router": "^2.5.2",
|
||||
"react-router": "^2.6.1",
|
||||
"react-router-redux": "^4.0.5",
|
||||
"redux": "^3.5.2",
|
||||
"redux-thunk": "^2.1.0",
|
||||
|
|
@ -52,23 +49,21 @@
|
|||
"babel-cli": "^6.11.4",
|
||||
"babel-core": "^6.10.4",
|
||||
"babel-loader": "^6.2.4",
|
||||
"babel-plugin-react-intl": "^2.1.3",
|
||||
"babel-preset-react": "^6.11.1",
|
||||
"css-loader": "^0.23.1",
|
||||
"doiuse": "^2.4.1",
|
||||
"eslint": "^3.1.1",
|
||||
"eslint-loader": "^1.4.1",
|
||||
"eslint": "^3.2.0",
|
||||
"eslint-loader": "^1.5.0",
|
||||
"eslint-plugin-react": "^5.2.2",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"file-loader": "^0.9.0",
|
||||
"glob": "^7.0.5",
|
||||
"node-sass": "^3.8.0",
|
||||
"postcss": "^5.1.0",
|
||||
"postcss": "^5.1.1",
|
||||
"postcss-loader": "^0.9.1",
|
||||
"postcss-reporter": "^1.4.1",
|
||||
"react-a11y": "^0.3.3",
|
||||
"react-intl-webpack-plugin": "0.0.3",
|
||||
"redbox-react": "^1.2.10",
|
||||
"redux-logger": "^2.6.1",
|
||||
"resolve-url-loader": "^1.6.0",
|
||||
|
|
@ -80,6 +75,6 @@
|
|||
"url-loader": "^0.5.7",
|
||||
"webpack": "^1.13.1",
|
||||
"webpack-dev-server": "^1.14.1",
|
||||
"webpack-hot-middleware": "^2.12.1"
|
||||
"webpack-hot-middleware": "^2.12.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,12 @@ var browsers = ["ie >= 9", "> 1%", "last 3 versions", "not op_mini all"];
|
|||
|
||||
module.exports = {
|
||||
entry: {
|
||||
"index": ["babel-polyfill", "bootstrap-loader", "./app/styles/common/index.js", "./index.js"],
|
||||
"index": [
|
||||
"babel-polyfill",
|
||||
"bootstrap-loader",
|
||||
"./app/styles/common/index.js",
|
||||
"./app/utils/common/index.js",
|
||||
"./index.js"],
|
||||
"fix.ie9": "./fix.ie9.js"
|
||||
},
|
||||
|
||||
|
|
@ -19,13 +24,6 @@ module.exports = {
|
|||
},
|
||||
|
||||
module: {
|
||||
preLoaders: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
loader: "eslint-loader?{failOnError: true}",
|
||||
exclude: /node_modules/
|
||||
}
|
||||
],
|
||||
loaders: [
|
||||
// Handle JS/JSX files
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue