Skip to content

Commit d8c0198

Browse files
DayjoDayjo
authored
Merge pull request #51 from Dayjo/development
v0.4.6
2 parents b3d574f + d19b806 commit d8c0198

File tree

6 files changed

+160
-17
lines changed

6 files changed

+160
-17
lines changed

‎dist/component/CharacterMap.js

+123-1
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,24 @@ var CharacterMap = function (_React$Component) {
4040

4141
var _this = _possibleConstructorReturn(this, (CharacterMap.__proto__ || Object.getPrototypeOf(CharacterMap)).call(this, props));
4242

43+
try {
44+
_this.paletteCache = JSON.parse(localStorage.getItem('dayjoReactCharPalette'));
45+
_this.paletteCache = Array.isArray(_this.paletteCache) ? _this.paletteCache : [];
46+
} catch (error) {
47+
_this.paletteCache = [];
48+
}
49+
50+
_this.secondaryPaletteCache = JSON.parse(sessionStorage.getItem('dayjoReactCharSecondaryPalette'));
51+
_this.secondaryPaletteCache = Array.isArray(_this.secondaryPaletteCache) ? _this.secondaryPaletteCache : [];
52+
_this.leastUsedCharFromPalette = false;
53+
_this.dirtyPalette = false;
4354
_this.state = {
4455
active: 0,
4556
search: '',
4657
categoryList: '',
4758
charList: '',
48-
fullCharList: ''
59+
fullCharList: '',
60+
charPalette: _this.paletteCache
4961
};
5062
_this.resultsCache = [];
5163
_this.handleSearchChange = _this.handleSearchChange.bind(_this);
@@ -125,9 +137,101 @@ var CharacterMap = function (_React$Component) {
125137
key: 'charClickHandler',
126138
value: function charClickHandler(e, char) {
127139
e.preventDefault();
140+
this.setPalette(char);
128141
return this.props.onSelect(char, e.target);
129142
}
130143

144+
/**
145+
* Sets the charPalette state.
146+
*
147+
* @param {object} char The character object
148+
*/
149+
150+
}, {
151+
key: 'setPalette',
152+
value: function setPalette(char) {
153+
var paletteMaxSize = 5;
154+
var charAtIndex = this.paletteCache.findIndex(function (p) {
155+
return p.hex === char.hex;
156+
});
157+
158+
/* If the primary palette cache is not fully filled OR if the character is already
159+
* present in primary, then add the character to it.
160+
*/
161+
if (this.paletteCache.length < paletteMaxSize || -1 !== charAtIndex) {
162+
this.paletteCache = this.addToPalette(char, this.paletteCache);
163+
/* Else add it to the secondary cache. */
164+
} else if (-1 === charAtIndex) {
165+
this.secondaryPaletteCache = this.addToPalette(char, this.secondaryPaletteCache);
166+
}
167+
168+
/* If the primary cache is fully filled, then save the least used
169+
* character from the cache for future reference.
170+
*/
171+
if (this.paletteCache.length === paletteMaxSize) {
172+
this.leastUsedCharFromPalette = this.paletteCache[paletteMaxSize - 1];
173+
}
174+
175+
/*
176+
* Sort the palettes in descending order of the count.
177+
*/
178+
this.paletteCache.sort(function (a, b) {
179+
return b.count - a.count;
180+
});
181+
this.secondaryPaletteCache.sort(function (a, b) {
182+
return b.count - a.count;
183+
});
184+
185+
if (this.secondaryPaletteCache.length > 0) {
186+
/* If the count of the max used character in secondary is more than
187+
* the count of the least used character in the primary, then remove
188+
* that character from secondary and replace the least used character
189+
* from primary with it.
190+
*/
191+
if (this.secondaryPaletteCache[0].count > this.paletteCache[paletteMaxSize - 1].count) {
192+
var maxCountCharInSecondaryPalette = this.secondaryPaletteCache.shift();
193+
this.paletteCache[paletteMaxSize - 1] = maxCountCharInSecondaryPalette;
194+
this.paletteCache.sort(function (a, b) {
195+
return b.count - a.count;
196+
});
197+
}
198+
}
199+
200+
localStorage.setItem('dayjoReactCharPalette', JSON.stringify(this.paletteCache));
201+
sessionStorage.setItem('dayjoReactCharSecondaryPalette', JSON.stringify(this.secondaryPaletteCache));
202+
this.setState({ 'charPalette': this.paletteCache });
203+
}
204+
205+
/**
206+
* Adds a character to the character palette.
207+
*
208+
* @param {object} char The character object.
209+
* @param {array} palette The char palette array.
210+
* @returns {array}
211+
*/
212+
213+
}, {
214+
key: 'addToPalette',
215+
value: function addToPalette(char, palette) {
216+
var charAtIndex = palette.findIndex(function (p) {
217+
return p.hex === char.hex;
218+
});
219+
220+
if (charAtIndex !== -1) {
221+
++palette[charAtIndex].count;
222+
} else {
223+
palette.push({
224+
'char': char.char,
225+
'entity': char.entity,
226+
'hex': char.hex,
227+
'name': char.name,
228+
'count': 1
229+
});
230+
}
231+
232+
return palette;
233+
}
234+
131235
/**
132236
* Perform the character search.
133237
*
@@ -298,6 +402,10 @@ var CharacterMap = function (_React$Component) {
298402
var filterLabelText = this.props.filterLabelText || 'Filter';
299403
var categoriesLabelText = this.props.categoriesLabelText || 'Categories';
300404
var characterListLabelText = this.props.characterListLabelText || 'Character List';
405+
var mostUsedPaletteText = this.props.mostUsedPaletteText || 'Most used';
406+
407+
var _charListFromCharacte3 = this.charListFromCharacters({ 'Palette': this.paletteCache }, 0),
408+
charPalette = _charListFromCharacte3.charList;
301409

302410
return _react2.default.createElement(
303411
'div',
@@ -320,6 +428,20 @@ var CharacterMap = function (_React$Component) {
320428
ref: this.bindInputRef
321429
})
322430
),
431+
this.props.mostUsedPalette && this.paletteCache.length ? _react2.default.createElement(
432+
'div',
433+
{ className: 'charMap--last-used-palette-wrapper' },
434+
_react2.default.createElement(
435+
'label',
436+
null,
437+
mostUsedPaletteText + ': '
438+
),
439+
_react2.default.createElement(
440+
'ul',
441+
{ className: 'charMap--last-used-palette', 'aria-label': mostUsedPaletteText },
442+
charPalette
443+
)
444+
) : '',
323445
'' === search && _react2.default.createElement(
324446
'ul',
325447
{ className: 'charMap--category-menu', 'aria-label': categoriesLabelText },

‎dist/index.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
'use strict';
1+
"use strict";
22

33
Object.defineProperty(exports, "__esModule", {
44
value: true
55
});
6-
exports.CharacterMap = undefined;
6+
exports.deleteCharPaletteData = exports.CharacterMap = undefined;
77

8-
var _CharacterMap = require('./component/CharacterMap');
8+
var _CharacterMap = require("./component/CharacterMap");
99

1010
var _CharacterMap2 = _interopRequireDefault(_CharacterMap);
1111

12+
var _utilities = require("./utilities");
13+
14+
var _utilities2 = _interopRequireDefault(_utilities);
15+
1216
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1317

14-
exports.CharacterMap = _CharacterMap2.default;
18+
exports.CharacterMap = _CharacterMap2.default;
19+
exports.deleteCharPaletteData = _utilities2.default;

‎dist/utilities.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = deleteCharPaletteData;
7+
/**
8+
* Utility function to programatically delete character palette
9+
* local storagee data.
10+
*/
11+
function deleteCharPaletteData() {
12+
localStorage.removeItem('tenupISCcharPalette');
13+
}

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-character-map",
3-
"version": "0.4.5",
3+
"version": "0.4.6",
44
"description": "A react component for selecting ascii characters from a categorised character map",
55
"main": "dist/index.js",
66
"repository": "[email protected]:Dayjo/react-character-map.git",
@@ -22,6 +22,6 @@
2222
},
2323
"dependencies": {
2424
"react": "16.4.0",
25-
"react-dom": "16.4.0"
25+
"react-dom": "16.4.2"
2626
}
2727
}

‎src/component/CharacterMap.js

+9-6
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@ class CharacterMap extends React.Component {
1313
super(props);
1414

1515
try {
16-
this.paletteCache = JSON.parse( localStorage.getItem('tenupISCcharPalette') );
17-
this.paletteCache = this.paletteCache.length ? this.paletteCache : [];
16+
this.paletteCache = JSON.parse( localStorage.getItem('dayjoReactCharPalette') );
17+
this.paletteCache = Array.isArray( this.paletteCache ) ? this.paletteCache : [];
1818
} catch(error) {
1919
this.paletteCache = [];
2020
}
2121

22-
this.secondaryPaletteCache = [];
22+
this.secondaryPaletteCache = JSON.parse( sessionStorage.getItem('dayjoReactCharSecondaryPalette') );
23+
this.secondaryPaletteCache = Array.isArray( this.secondaryPaletteCache ) ? this.secondaryPaletteCache : [];
2324
this.leastUsedCharFromPalette = false;
2425
this.dirtyPalette = false;
2526
this.state = {
@@ -131,10 +132,12 @@ class CharacterMap extends React.Component {
131132
if (this.secondaryPaletteCache[0].count > this.paletteCache[paletteMaxSize - 1].count) {
132133
const maxCountCharInSecondaryPalette = this.secondaryPaletteCache.shift();
133134
this.paletteCache[paletteMaxSize - 1] = maxCountCharInSecondaryPalette;
135+
this.paletteCache.sort( ( a, b ) => b.count - a.count );
134136
}
135137
}
136138

137-
localStorage.setItem('tenupISCcharPalette', JSON.stringify(this.paletteCache));
139+
localStorage.setItem('dayjoReactCharPalette', JSON.stringify(this.paletteCache));
140+
sessionStorage.setItem('dayjoReactCharSecondaryPalette', JSON.stringify(this.secondaryPaletteCache));
138141
this.setState( { 'charPalette': this.paletteCache } );
139142
}
140143

@@ -318,14 +321,14 @@ class CharacterMap extends React.Component {
318321
ref={this.bindInputRef}
319322
/>
320323
</ul>
321-
{ this.props.mostUsedPalette && this.paletteCache.length && (
324+
{ ( this.props.mostUsedPalette && this.paletteCache.length ) ? (
322325
<div className="charMap--last-used-palette-wrapper">
323326
<label>{`${mostUsedPaletteText}: `}</label>
324327
<ul className="charMap--last-used-palette" aria-label={mostUsedPaletteText}>
325328
{ charPalette }
326329
</ul>
327330
</div>
328-
) }
331+
) : '' }
329332
{ '' === search &&
330333
<ul className="charMap--category-menu" aria-label={categoriesLabelText}>
331334
{ categoryList}

‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -2527,10 +2527,10 @@ randomatic@^3.0.0:
25272527
kind-of "^6.0.0"
25282528
math-random "^1.0.1"
25292529

2530-
[email protected].0:
2531-
version "16.4.0"
2532-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
2533-
integrity sha512-bbLd+HYpBEnYoNyxDe9XpSG2t9wypMohwQPvKw8Hov3nF7SJiJIgK56b46zHpBUpHb06a1iEuw7G3rbrsnNL6w==
2530+
[email protected].2:
2531+
version "16.4.2"
2532+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4"
2533+
integrity sha512-Usl73nQqzvmJN+89r97zmeUpQDKDlh58eX6Hbs/ERdDHzeBzWy+ENk7fsGQ+5KxArV1iOFPT46/VneklK9zoWw==
25342534
dependencies:
25352535
fbjs "^0.8.16"
25362536
loose-envify "^1.1.0"

0 commit comments

Comments
 (0)