Allow to getClass from RCSS
- 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