Skip to content

Commit b9d015f

Browse files
usulprousulpro
committed
Switch to svg images
1 parent cb0364c commit b9d015f

File tree

6 files changed

+81
-109
lines changed

6 files changed

+81
-109
lines changed

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.scripts
22
.storybook
33
src
4+
doc
45
.babelrc
56
*.log

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "react-material-color-picker",
3-
"version": "1.1.1",
2+
"name": "@usulpro/color-picker",
3+
"version": "1.1.3",
44
"description": "React Material Color Picker Component",
55
"repository": {
66
"type": "git",

‎src/MaterialColorPicker.jsx‎

Lines changed: 58 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import imageDoneBlk from './ic_done_black_64dp_1x.png';
4-
import imageDoneWht from './ic_done_white_64dp_1x.png';
3+
import { Done } from './done-black';
54
const _colors = require('./colors');
65

76
const propTypes = {
@@ -41,12 +40,8 @@ export default class MaterialColorPicker extends React.Component {
4140
this.makeToneSwatches = this.makeToneSwatches.bind(this);
4241
this.makeGradeSwatches = this.makeGradeSwatches.bind(this);
4342

44-
// this.toneSwatches = this.makeToneSwatches(this.toneNames);
45-
4643
this.initState = this.resetColor();
4744
this.state = {
48-
// selectedTone: initTone || this.toneNames[0],
49-
// selectedSat: initSat || '500',
5045
...this.initState,
5146
hoveredTone: '',
5247
hoveredSat: '',
@@ -71,7 +66,7 @@ export default class MaterialColorPicker extends React.Component {
7166
}
7267

7368
onSubmit() {
74-
return (e) => {
69+
return e => {
7570
const event = {
7671
type: 'submit',
7772
timeStamp: e.nativeEvent.timeStamp,
@@ -92,8 +87,7 @@ export default class MaterialColorPicker extends React.Component {
9287
}
9388

9489
onReset() {
95-
return (e) => {
96-
// e.persist();
90+
return e => {
9791
const timeStamp = e.nativeEvent.timeStamp;
9892
const nativeEvent = e.nativeEvent;
9993
this.setState(this.initState, () => {
@@ -126,19 +120,16 @@ export default class MaterialColorPicker extends React.Component {
126120

127121
findColorName(colObj, colString) {
128122
const nameList = Object.keys(colObj);
129-
const name = nameList.find((val) => {return (colObj[val] === colString);});
130-
/* if (!colObj[name]) {
131-
return 'white';
132-
}*/
123+
const name = nameList.find(val => {
124+
return colObj[val] === colString;
125+
});
133126
return name;
134127
}
135128

136129
resetColor() {
137130
const initName = this.findColorName(_colors, this.props.initColor) || '';
138131
const initTone = this.toneColorByName(initName);
139132
const initSat = this.satColorByName(initName);
140-
// console.info(initTone)
141-
// console.info(initSat)
142133
const state = {
143134
selectedTone: initTone || this.toneNames[0],
144135
selectedSat: initSat || '500',
@@ -183,23 +174,16 @@ export default class MaterialColorPicker extends React.Component {
183174
blueGrey: nameList.filter(val => /^blueGrey/.test(val)),
184175
grey: nameList.filter(val => /^grey/.test(val)),
185176
black: nameList.filter(val => /black|white|Black|White/.test(val)),
186-
187177
};
188178

189179
return toneList;
190-
/*
191-
const toneNames = Object.keys(toneList);
192-
const allNames = toneNames.join(' ');
193-
console.log(toneNames.length);
194-
console.log(allNames);*/
195180
}
196181

197182
makeToneSwatches(toneNames) {
198-
return (
199-
toneNames.map((val) => {
200-
let toneBaseName = this.baseToneByName(val);
201-
const baseColor = _colors[toneBaseName];
202-
return (
183+
return toneNames.map(val => {
184+
let toneBaseName = this.baseToneByName(val);
185+
const baseColor = _colors[toneBaseName];
186+
return (
203187
<div
204188
key={toneBaseName}
205189
title={val}
@@ -213,17 +197,14 @@ export default class MaterialColorPicker extends React.Component {
213197
cursor: 'pointer',
214198
...this.borderSelTone(val, this.state.selectedTone, this.state.hoveredTone),
215199
}}
216-
>
217-
218-
</div>
200+
/>
219201
);
220-
})
221-
);
202+
});
222203
}
223204

224205
makeGradeSwatches(toneName) {
225206
const gradeNameList = this.colorNames[toneName];
226-
const gradeSwatches = gradeNameList.map((val) => {
207+
const gradeSwatches = gradeNameList.map(val => {
227208
return (
228209
<div
229210
key={val}
@@ -232,16 +213,17 @@ export default class MaterialColorPicker extends React.Component {
232213
flexGrow: 1,
233214
width: '100%',
234215
cursor: 'pointer',
235-
...this.borderSelGrade(this.satColorByName(val),
236-
this.state.selectedSat, this.state.hoveredSat),
216+
...this.borderSelGrade(
217+
this.satColorByName(val),
218+
this.state.selectedSat,
219+
this.state.hoveredSat
220+
),
237221
}}
238222
onClick={this.selectSat(this.satColorByName(val))}
239223
onMouseEnter={this.hoverSat(this.satColorByName(val))}
240224
onMouseLeave={this.hoverReset()}
241225
>
242-
<div
243-
style={{ display: 'flex', alignItems: 'center', height: '100%' }}
244-
>
226+
<div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
245227
<div
246228
style={{
247229
width: 2,
@@ -250,18 +232,17 @@ export default class MaterialColorPicker extends React.Component {
250232
position: 'relative',
251233
margin: 'auto',
252234
transform: 'rotate(-90deg)',
253-
// backgroundColor: 'white',
254235
}}
255236
>
256-
<div style={{
257-
textAlign: 'center',
258-
display: 'inline-block',
259-
// width: 'auto',
260-
left: '-50%',
261-
top: -6,
262-
position: 'relative',
263-
color: this.bwColorByName(val),
264-
}}
237+
<div
238+
style={{
239+
textAlign: 'center',
240+
display: 'inline-block',
241+
left: '-50%',
242+
top: -6,
243+
position: 'relative',
244+
color: this.bwColorByName(val),
245+
}}
265246
>
266247
{this.blackShortName(this.satColorByName(val))}
267248
</div>
@@ -309,25 +290,21 @@ export default class MaterialColorPicker extends React.Component {
309290
}
310291

311292
selectTone(toneName) {
312-
return (e) => {
293+
return e => {
313294
const event = this.createEvent(e, 'select');
314-
this.setState({ selectedTone: toneName },
315-
this.props.onSelect(event)
316-
);
295+
this.setState({ selectedTone: toneName }, this.props.onSelect(event));
317296
};
318297
}
319298

320299
selectSat(satName) {
321-
return (e) => {
300+
return e => {
322301
const event = this.createEvent(e, 'select');
323-
this.setState({ selectedSat: satName },
324-
this.props.onSelect(event)
325-
);
302+
this.setState({ selectedSat: satName }, this.props.onSelect(event));
326303
};
327304
}
328305

329306
hoverTone(toneName) {
330-
return (e) => {
307+
return e => {
331308
const { nativeEvent, persist } = e;
332309
this.setState({ hoveredTone: toneName }, () => {
333310
const event = this.createEvent({ nativeEvent, persist }, 'hover');
@@ -337,7 +314,7 @@ export default class MaterialColorPicker extends React.Component {
337314
}
338315

339316
hoverSat(satName) {
340-
return (e) => {
317+
return e => {
341318
const { nativeEvent, persist } = e;
342319
this.setState({ hoveredSat: satName }, () => {
343320
const event = this.createEvent({ nativeEvent, persist }, 'hover');
@@ -347,7 +324,7 @@ export default class MaterialColorPicker extends React.Component {
347324
}
348325

349326
hoverReset() {
350-
return (e) => {
327+
return e => {
351328
const { nativeEvent, persist } = e;
352329
this.setState({ hoveredTone: '', hoveredSat: '' }, () => {
353330
const event = this.createEvent({ nativeEvent, persist }, 'hover');
@@ -366,8 +343,9 @@ export default class MaterialColorPicker extends React.Component {
366343

367344
toneColorByName(colorName) {
368345
const satName = this.satColorByName(colorName);
369-
const toneName = /black|white|Black|White/.test(satName) ? 'black' :
370-
colorName.replace(satName, '');
346+
const toneName = /black|white|Black|White/.test(satName)
347+
? 'black'
348+
: colorName.replace(satName, '');
371349
return toneName;
372350
}
373351

@@ -411,11 +389,8 @@ export default class MaterialColorPicker extends React.Component {
411389
const satString = this.state.hoveredSat || this.state.selectedSat;
412390
if (toneString === 'black') {
413391
toneString = '';
414-
// if(!/black|white/.test(satString)) {
415-
// satString = 'black';
416-
// }
417392
}
418-
return (`${toneString}${satString}`);
393+
return `${toneString}${satString}`;
419394
}
420395

421396
titleName(isBlack) {
@@ -425,25 +400,23 @@ export default class MaterialColorPicker extends React.Component {
425400
let satString = this.state.hoveredSat || this.state.selectedSat;
426401
if (toneString === 'black') {
427402
toneString = '';
428-
// if(!/black|white/.test(satString)) {
429-
// satString = 'black';
430-
// }
431403
}
432-
const isHovTone = !(this.state.hoveredTone === this.state.selectedTone)
433-
&& (this.state.hoveredTone);
434-
const isHovSat = !(this.state.hoveredSat === this.state.selectedSat)
435-
&& (this.state.hoveredSat);
404+
const isHovTone =
405+
!(this.state.hoveredTone === this.state.selectedTone) && this.state.hoveredTone;
406+
const isHovSat =
407+
!(this.state.hoveredSat === this.state.selectedSat) && this.state.hoveredSat;
436408
const toneColor = isHovTone ? greyColor : baseColor;
437409
const satColor = isHovSat ? greyColor : baseColor;
438410
return (
439411
<div>
440-
<span style={{ color: toneColor, fontWeight: isHovTone ? '' : 'bold' }} >
412+
<span style={{ color: toneColor, fontWeight: isHovTone ? '' : 'bold' }}>
441413
{toneString}
442414
</span>
443-
<span style={{ color: satColor, fontWeight: isHovSat ? '' : 'bold' }} >
415+
<span style={{ color: satColor, fontWeight: isHovSat ? '' : 'bold' }}>
444416
{satString}
445417
</span>
446-
</div>);
418+
</div>
419+
);
447420
}
448421

449422
createEvent(e, type) {
@@ -484,15 +457,12 @@ export default class MaterialColorPicker extends React.Component {
484457
<div
485458
className="material-color-picker-tone-swatches"
486459
style={{
487-
// padding: 5,
488-
// width: '100%',
489460
display: 'flex',
490-
flexDirection: 'row'/* 'column'*/,
461+
flexDirection: 'row',
491462
justifyContent: 'space-between',
492463
}}
493464
>
494465
{this.makeToneSwatches(this.toneNames)}
495-
496466
</div>
497467
<div
498468
className="material-color-picker-title"
@@ -506,20 +476,13 @@ export default class MaterialColorPicker extends React.Component {
506476
justifyContent: 'space-between',
507477
}}
508478
>
509-
{/* <span style={{color: 'white'}} >{this.state.selectedTone + 's'}</span>
510-
<span style={{color: 'black'}} >{this.state.selectedTone + 's'}</span>*/}
511479
{this.titleName(false)}
512480
{this.titleName(true)}
513481
</div>
514482
<div
515483
style={{
516484
marginTop: 5,
517-
// padding: 5,
518-
// paddingLeft: 0,
519-
// paddingRight: 25,
520-
// backgroundColor: _colors[this.baseToneByName(this.state.selectedTone)],
521485
display: 'flex',
522-
// justifyContent: 'space-between',
523486
}}
524487
>
525488
<div
@@ -530,22 +493,14 @@ export default class MaterialColorPicker extends React.Component {
530493
backgroundColor: _colors[this.fullNameString()],
531494
}}
532495
>
533-
{this.state.hoveredSubmit ?
534-
<img
535-
src={
536-
this.bwColorByName(this.fullNameString()) === 'black' ?
537-
imageDoneBlk : imageDoneWht}
538-
style={{ opacity: 0.4 }}
539-
alt="submit"
540-
/> : null
541-
}
542-
496+
{this.state.hoveredSubmit ? (
497+
<Done color={this.bwColorByName(this.fullNameString())} />
498+
) : null}
543499
</div>
544500

545501
<div
546502
className="material-color-picker-sat-swatches"
547503
style={{
548-
// height: 60,
549504
flexGrow: 1,
550505
width: 278,
551506
marginLeft: 5,
@@ -554,7 +509,6 @@ export default class MaterialColorPicker extends React.Component {
554509
>
555510
{this.makeGradeSwatches(this.state.selectedTone)}
556511
</div>
557-
558512
</div>
559513
<div
560514
style={{
@@ -570,13 +524,14 @@ export default class MaterialColorPicker extends React.Component {
570524
color: '#404040',
571525
}}
572526
>
573-
<div style={{
574-
width: 'auto',
575-
// display: 'flex',
576-
// flexWrap: 'wrap',
577-
}}
527+
<div
528+
style={{
529+
width: 'auto',
530+
}}
578531
>
579-
<b><nobr>{ _colors[this.fullNameString()] }</nobr></b>
532+
<b>
533+
<nobr>{_colors[this.fullNameString()]}</nobr>
534+
</b>
580535
</div>
581536
<div
582537
style={{
@@ -613,14 +568,10 @@ export default class MaterialColorPicker extends React.Component {
613568
{this.props.submitLabel}
614569
</div>
615570
</div>
616-
{/*
617-
<span style={{color: 'white'}} >{_colors[this.fullNameString()]}</span>
618-
<span style={{color: 'black'}} >{_colors[this.fullNameString()]}</span>*/}
619571
</div>
620572
</div>
621573
);
622574
}
623-
624575
}
625576

626577
MaterialColorPicker.propTypes = propTypes;

0 commit comments

Comments
 (0)