chenglou / chenglou/RCSS

Allow to getClass from RCSS

Open
#54 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
284
Forks
17
PR merge metrics
No merged PRs in 30d

Description

I think that doing this:

```
RCSS.registerClass('className', {});
var className = RCSS.getClass('className');
```

would be better than:

```
var myClass = RCSS.registerClass('className', {});
var className = myClass.className;
```

What do you think about this?

Of course, you should instance a RCSS somehow before each file use.

```
var RCSS = require('RCSS');
var _ = require('lodash');

var RCSSW = function(){
// By name
this.__classes = {};
}

RCSSW.prototype.getClass = function(what){
// Warn if class is missing and return '' by default.
if(this.__classes[what] === void 0){
console.warn('Class "' + what + '" not set.');
return '';
}
return this.__classes[what].className;
}

/**
* Returns multiple classes.
* @param {Object} whats Example {returnThisClass: true, dontReturnThisClass: false}
* @param {Boolean} [asArray=true] If true returns an array, if not returns a string.
* @type {String|[String]} depending on
*/
RCSSW.prototype.getClasses = function(whats, asArray){
var classesAsArray = [];
_.forEach(whats, function(include, what){
if(include){
classesAsArray.push(this.getClass(what));
}
}.bind(this))
if(asArray){
return classesAsArray;
}else{
return classesAsArray.join(' ');
}
}

RCSSW.prototype.setClass = function(name, def){
this.__classes[name] = RCSS.registerClass(def);
return this.__classes[name];
}

module.exports = RCSSW;
```

So here is a use:

```
_RCSSW.registerClass('className', {});
var className = _RCSSW.getClass('className');
```

Or another more interesting use:

```
className: _RCSSW.getClasses({
description : true,
descriptionHover : this.state.hover,
})
```

**Might change API, but** you can still allow the current API by checking for a string on the first argument.
# Example after refactoring in my app:
## From

```
var rootDef = {
position : 'relative',
width : '256px',
height : '100%',
}
var rootClass = RCSS.registerClass(rootDef).className;

var inputWrapperDef = {
position : 'absolute',
width : '100%',
height : '60px',
bottom : '0px',
}
var inputWrapperClass = RCSS.registerClass(inputWrapperDef).className;

var inputDef = {
bottom : '0px',
height : '60px',
left : '0px',
position : 'absolute',
right : '60px',
top : '0px',
// Why to set on input with calc: http://stackoverflow.com/questions/16284087
width : 'calc(100% - 60px)',
fontSize : '24px',
border : 'none',
padding : '10px',
}
var inputClass = RCSS.registerClass(inputDef).className;

var sendButtonDef = {
bottom : '0px',
height : '60px',
position : 'absolute',
right : '0px',
top : '0px',
width : '60px',
border : 'none',
fontSize : '20px',
cursor : 'pointer',
wordBreak : 'break-word', // Allows multiline
':hover': {
background : Colors.key,
color : Colors.textOverKey,
}
}
var sendButtonClass = RCSS.registerClass(sendButtonDef).className;

// ...
render: function(){
return React.DOM.div({
className: rootClass
},
new Viewport({
ref: 'viewport',
messages: this.props.data.stores.chat.messageStore.getMessages()
}),
React.DOM.form({
className : inputWrapperClass,
onSubmit : this.__onSubmit
},
React.DOM.input({
ref : 'textInput',
className : inputClass
}),
React.DOM.button({
className : sendButtonClass,
}, 'send')
)
)
}
```
## To

```
_RCSSW.setClass('root', {
position : 'relative',
width : '256px',
height : '100%',
})

_RCSSW.setClass('inputWrapper', {
position : 'absolute',
width : '100%',
height : '60px',
bottom : '0px',
})

_RCSSW.setClass('input', {
bottom : '0px',
height : '60px',
left : '0px',
position : 'absolute',
right : '60px',
top : '0px',
// Why to set on input with calc: http://stackoverflow.com/questions/16284087
width : 'calc(100% - 60px)',
fontSize : '24px',
border : 'none',
padding : '10px',
})

_RCSSW.setClass('sendButton', {
bottom : '0px',
height : '60px',
position : 'absolute',
right : '0px',
top : '0px',
width : '60px',
border : 'none',
fontSize : '20px',
cursor : 'pointer',
wordBreak : 'break-word', // Allows multiline
':hover': {
background : Colors.key,
color : Colors.textOverKey,
}
})

// ...
render: function(){
return React.DOM.div({
className: _RCSSW.getClass('root')
},
new Viewport({
ref: 'viewport',
messages: this.props.data.stores.chat.messageStore.getMessages()
}),
React.DOM.form({
className : _RCSSW.getClass('inputWrapper'),
onSubmit : this.__onSubmit
},
React.DOM.input({
ref : 'textInput',
className : _RCSSW.getClass('input')
}),
React.DOM.button({
className : _RCSSW.getClass('sendButton'),
}, 'send')
)
)
}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reviewing the existing RCSS registerClass API and the proposed getClass, getClasses, and setClass entry points shown in the issue. Clarify whether the current API remains compatible and define the expected lookup behavior; done means named classes can be retrieved as requested and the documented usage is consistent.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.