Skip to content

Commit b3d574f

Browse files
author
Joel
committed
Merge branch 'development'
2 parents 862135b + 9ab3e07 commit b3d574f

File tree

6 files changed

+1322
-830
lines changed

6 files changed

+1322
-830
lines changed

‎dist/component/CharacterMap.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ var CharacterMap = function (_React$Component) {
307307
{ className: 'charMap--filter' },
308308
_react2.default.createElement(
309309
'label',
310-
{ 'for': 'filter' },
310+
{ htmlFor: 'filter' },
311311
filterLabelText + ': '
312312
),
313313
_react2.default.createElement('input', {
@@ -316,7 +316,7 @@ var CharacterMap = function (_React$Component) {
316316
'aria-label': filterLabelText,
317317
value: search,
318318
onChange: this.handleSearchChange,
319-
autoComplete: false,
319+
autoComplete: 'false',
320320
ref: this.bindInputRef
321321
})
322322
),

‎package.json

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
11
{
22
"name": "react-character-map",
3-
"version": "0.4.4",
3+
"version": "0.4.5",
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",
77
"author": "Joel Day",
88
"license": "MIT",
9-
"peerDependencies": {
10-
"react": ">=15.0 <= 16"
11-
},
9+
"peerDependencies": {},
1210
"scripts": {
1311
"validate-json": "jsonlint src/component/*.json --quiet",
1412
"build": "npm run validate-json && babel src -d dist --copy-files"
1513
},
1614
"devDependencies": {
1715
"babel-cli": "^6.14.0",
18-
"babel-jest": "^19.0.0",
16+
"babel-jest": "28.1.1",
1917
"babel-plugin-async-to-promises": "^1.0.5",
2018
"babel-plugin-transform-object-rest-spread": "^6.8.0",
2119
"babel-preset-es2015": "^6.14.0",
2220
"babel-preset-react": "^6.11.1",
23-
"jsonlint": "^1.6.3",
24-
"react": "^15.4.2",
25-
"react-addons-test-utils": "^15.4.2",
26-
"react-dom": "^15.4.2"
21+
"jsonlint": "^1.6.3"
22+
},
23+
"dependencies": {
24+
"react": "16.4.0",
25+
"react-dom": "16.4.0"
2726
}
2827
}

‎src/component/CharacterMap.js

+98-2
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,24 @@ import './style.css';
1111
class CharacterMap extends React.Component {
1212
constructor(props) {
1313
super(props);
14+
15+
try {
16+
this.paletteCache = JSON.parse( localStorage.getItem('tenupISCcharPalette') );
17+
this.paletteCache = this.paletteCache.length ? this.paletteCache : [];
18+
} catch(error) {
19+
this.paletteCache = [];
20+
}
21+
22+
this.secondaryPaletteCache = [];
23+
this.leastUsedCharFromPalette = false;
24+
this.dirtyPalette = false;
1425
this.state = {
1526
active: 0,
1627
search: '',
1728
categoryList: '',
1829
charList: '',
1930
fullCharList: '',
31+
charPalette: this.paletteCache,
2032
};
2133
this.resultsCache=[];
2234
this.handleSearchChange = this.handleSearchChange.bind( this );
@@ -74,9 +86,83 @@ class CharacterMap extends React.Component {
7486
// Handle clicks to the characters, running the callback function.
7587
charClickHandler(e, char){
7688
e.preventDefault();
89+
this.setPalette(char);
7790
return this.props.onSelect(char, e.target);
7891
}
7992

93+
/**
94+
* Sets the charPalette state.
95+
*
96+
* @param {object} char The character object
97+
*/
98+
setPalette(char) {
99+
const paletteMaxSize = 5;
100+
const charAtIndex = this.paletteCache.findIndex(p => p.hex === char.hex);
101+
102+
/* If the primary palette cache is not fully filled OR if the character is already
103+
* present in primary, then add the character to it.
104+
*/
105+
if ( this.paletteCache.length < paletteMaxSize || -1 !== charAtIndex ) {
106+
this.paletteCache = this.addToPalette(char, this.paletteCache);
107+
/* Else add it to the secondary cache. */
108+
} else if ( -1 === charAtIndex ) {
109+
this.secondaryPaletteCache = this.addToPalette(char, this.secondaryPaletteCache);
110+
}
111+
112+
/* If the primary cache is fully filled, then save the least used
113+
* character from the cache for future reference.
114+
*/
115+
if ( this.paletteCache.length === paletteMaxSize ) {
116+
this.leastUsedCharFromPalette = this.paletteCache[ paletteMaxSize - 1 ];
117+
}
118+
119+
/*
120+
* Sort the palettes in descending order of the count.
121+
*/
122+
this.paletteCache.sort( ( a, b ) => b.count - a.count );
123+
this.secondaryPaletteCache.sort( ( a, b ) => b.count - a.count );
124+
125+
if (this.secondaryPaletteCache.length > 0) {
126+
/* If the count of the max used character in secondary is more than
127+
* the count of the least used character in the primary, then remove
128+
* that character from secondary and replace the least used character
129+
* from primary with it.
130+
*/
131+
if (this.secondaryPaletteCache[0].count > this.paletteCache[paletteMaxSize - 1].count) {
132+
const maxCountCharInSecondaryPalette = this.secondaryPaletteCache.shift();
133+
this.paletteCache[paletteMaxSize - 1] = maxCountCharInSecondaryPalette;
134+
}
135+
}
136+
137+
localStorage.setItem('tenupISCcharPalette', JSON.stringify(this.paletteCache));
138+
this.setState( { 'charPalette': this.paletteCache } );
139+
}
140+
141+
/**
142+
* Adds a character to the character palette.
143+
*
144+
* @param {object} char The character object.
145+
* @param {array} palette The char palette array.
146+
* @returns {array}
147+
*/
148+
addToPalette(char, palette) {
149+
const charAtIndex = palette.findIndex(p => p.hex === char.hex);
150+
151+
if ( charAtIndex !== -1 ) {
152+
++palette[ charAtIndex ].count;
153+
} else {
154+
palette.push( {
155+
'char': char.char,
156+
'entity': char.entity,
157+
'hex': char.hex,
158+
'name': char.name,
159+
'count': 1,
160+
} )
161+
}
162+
163+
return palette;
164+
}
165+
80166
/**
81167
* Perform the character search.
82168
*
@@ -215,21 +301,31 @@ class CharacterMap extends React.Component {
215301
const filterLabelText = this.props.filterLabelText || 'Filter';
216302
const categoriesLabelText = this.props.categoriesLabelText || 'Categories';
217303
const characterListLabelText = this.props.characterListLabelText || 'Character List';
304+
const mostUsedPaletteText = this.props.mostUsedPaletteText || 'Most used';
305+
const {charList: charPalette} = this.charListFromCharacters( { 'Palette': this.paletteCache }, 0);
218306

219307
return (
220308
<div className="charMap--container">
221309
<ul className="charMap--filter">
222-
<label for="filter">{`${filterLabelText}: `}</label>
310+
<label htmlFor="filter">{`${filterLabelText}: `}</label>
223311
<input
224312
type="text"
225313
name="filter"
226314
aria-label={filterLabelText}
227315
value={search}
228316
onChange={this.handleSearchChange}
229-
autoComplete={false}
317+
autoComplete="false"
230318
ref={this.bindInputRef}
231319
/>
232320
</ul>
321+
{ this.props.mostUsedPalette && this.paletteCache.length && (
322+
<div className="charMap--last-used-palette-wrapper">
323+
<label>{`${mostUsedPaletteText}: `}</label>
324+
<ul className="charMap--last-used-palette" aria-label={mostUsedPaletteText}>
325+
{ charPalette }
326+
</ul>
327+
</div>
328+
) }
233329
{ '' === search &&
234330
<ul className="charMap--category-menu" aria-label={categoriesLabelText}>
235331
{ categoryList}

‎src/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
import CharacterMap from './component/CharacterMap';
2-
export { CharacterMap };
2+
import deleteCharPaletteData from "./utilities";
3+
4+
export { CharacterMap, deleteCharPaletteData };

‎src/utilities.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/**
2+
* Utility function to programatically delete character palette
3+
* local storagee data.
4+
*/
5+
export default function deleteCharPaletteData() {
6+
localStorage.removeItem('tenupISCcharPalette');
7+
}

0 commit comments

Comments
 (0)