Skip to content
Snippets Groups Projects
Commit 84837407 authored by Glenn Vorhes's avatar Glenn Vorhes
Browse files

add class selector to radio components

parent 1d5022d3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
dist/reactComponents/Radio.d.ts
+ 2
− 0
View file @ 84837407
...@@ -19,6 +19,7 @@ export declare class Radio extends React.Component<{ ...@@ -19,6 +19,7 @@ export declare class Radio extends React.Component<{
callback: (val: string) => any; callback: (val: string) => any;
inline?: boolean; inline?: boolean;
defaultValue: string; defaultValue: string;
classes?: string[];
}, null> { }, null> {
render(): JSX.Element; render(): JSX.Element;
} }
...@@ -28,6 +29,7 @@ export declare class RadioConnected extends React.Component<{ ...@@ -28,6 +29,7 @@ export declare class RadioConnected extends React.Component<{
callback: (val: string) => any; callback: (val: string) => any;
inline?: boolean; inline?: boolean;
selectedIndex: number; selectedIndex: number;
classes?: string[];
}, null> { }, null> {
render(): JSX.Element; render(): JSX.Element;
} }
dist/reactComponents/Radio.jsx
+ 7
− 10
View file @ 84837407
...@@ -67,13 +67,6 @@ var RadioBase = (function (_super) { ...@@ -67,13 +67,6 @@ var RadioBase = (function (_super) {
} }
RadioBase.prototype.render = function () { RadioBase.prototype.render = function () {
var _this = this; var _this = this;
var style = {};
if (this.inline) {
style = {
display: 'inline-block',
padding: '0 5px'
};
}
var arr = []; var arr = [];
for (var i = 0; i < this.props.items.length; i++) { for (var i = 0; i < this.props.items.length; i++) {
var itemProps = { var itemProps = {
...@@ -95,7 +88,11 @@ var RadioBase = (function (_super) { ...@@ -95,7 +88,11 @@ var RadioBase = (function (_super) {
} }
arr.push(<RadioItem {...itemProps}/>); arr.push(<RadioItem {...itemProps}/>);
} }
return <div className="radio-list"> var classes = ['radio-list'];
if (this.props.classes) {
classes = classes.concat(this.props.classes);
}
return <div className={classes.join(' ')}>
<h4>{this.props.title}</h4> <h4>{this.props.title}</h4>
<ul style={{ listStyle: 'none' }}> <ul style={{ listStyle: 'none' }}>
{arr} {arr}
...@@ -110,7 +107,7 @@ var Radio = (function (_super) { ...@@ -110,7 +107,7 @@ var Radio = (function (_super) {
return _super !== null && _super.apply(this, arguments) || this; return _super !== null && _super.apply(this, arguments) || this;
} }
Radio.prototype.render = function () { Radio.prototype.render = function () {
return <RadioBase title={this.props.title} items={this.props.items} callback={this.props.callback} inline={this.props.inline} selectedValueOrIndex={this.props.defaultValue} connected={false}/>; return <RadioBase title={this.props.title} items={this.props.items} callback={this.props.callback} inline={this.props.inline} selectedValueOrIndex={this.props.defaultValue} connected={false} classes={this.props.classes}/>;
}; };
return Radio; return Radio;
}(reactAndRedux_1.React.Component)); }(reactAndRedux_1.React.Component));
...@@ -121,7 +118,7 @@ var RadioConnected = (function (_super) { ...@@ -121,7 +118,7 @@ var RadioConnected = (function (_super) {
return _super !== null && _super.apply(this, arguments) || this; return _super !== null && _super.apply(this, arguments) || this;
} }
RadioConnected.prototype.render = function () { RadioConnected.prototype.render = function () {
return <RadioBase title={this.props.title} items={this.props.items} callback={this.props.callback} inline={this.props.inline} selectedValueOrIndex={this.props.selectedIndex} connected={true}/>; return <RadioBase title={this.props.title} items={this.props.items} callback={this.props.callback} inline={this.props.inline} selectedValueOrIndex={this.props.selectedIndex} connected={true} classes={this.props.classes}/>;
}; };
return RadioConnected; return RadioConnected;
}(reactAndRedux_1.React.Component)); }(reactAndRedux_1.React.Component));
......
dist/reactComponents/Radio.jsx.map
+ 1
− 1
View file @ 84837407
{"version":3,"file":"Radio.jsx","sourceRoot":"","sources":["../../src/reactComponents/Radio.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 6/12/2017.\r\n */\r\n\r\n\r\nimport {React} from './reactAndRedux';\r\nimport $ = require('jquery');\r\nimport 'jquery-ui';\r\nimport makeGuid from '../util/makeGuid';\r\nimport {ChangeEvent} from \"react\";\r\n\r\nexport interface iRadioItem{\r\n groupId: string;\r\n text: string;\r\n checked: boolean;\r\n inline: boolean;\r\n change: (s: string) => any;\r\n connected?: boolean;\r\n index?: number\r\n}\r\n\r\nclass RadioItem extends React.Component<iRadioItem, null> {\r\n guid: string;\r\n\r\n constructor(props: iRadioItem, context: Object){\r\n super(props, context);\r\n this.guid = makeGuid()\r\n }\r\n\r\n\r\n render() {\r\n let style = {};\r\n if (this.props.inline) {\r\n style = {\r\n display: 'inline-block',\r\n padding: '0 5px'\r\n };\r\n }\r\n\r\n let props = {\r\n id: this.guid,\r\n type: \"radio\",\r\n name: this.props.groupId,\r\n value: typeof this.props.index == 'undefined' ? this.props.text : this.props.index.toFixed(),\r\n onChange: (evt: ChangeEvent<HTMLInputElement>) => {\r\n this.props.change(evt.target.value);\r\n evt.target.checked = true;\r\n },\r\n checked: this.props.checked,\r\n defaultChecked: this.props.checked\r\n };\r\n\r\n if (this.props.connected) {\r\n delete props.defaultChecked;\r\n } else {\r\n delete props.checked\r\n }\r\n\r\n return <li style={style}>\r\n <input {...props}/>\r\n <label htmlFor={this.guid}>{this.props.text}</label>\r\n </li>;\r\n }\r\n}\r\n\r\ninterface iRadioBase {\r\n title: string;\r\n items: string[];\r\n callback: (val: string) => any;\r\n inline?: boolean;\r\n selectedValueOrIndex: string|number;\r\n connected: boolean;\r\n}\r\n\r\nclass RadioBase extends React.Component<iRadioBase, null> {\r\n inline: boolean;\r\n groupId: string;\r\n\r\n constructor(props: iRadioBase, context: Object) {\r\n super(props, context);\r\n this.inline = this.props.inline || false;\r\n this.groupId = this.props.title.toLowerCase().replace(/ /g, '');\r\n }\r\n\r\n render() {\r\n let style = {};\r\n if (this.inline) {\r\n style = {\r\n display: 'inline-block',\r\n padding: '0 5px'\r\n }\r\n }\r\n\r\n let arr = [];\r\n\r\n for (let i = 0; i < this.props.items.length; i++) {\r\n\r\n let itemProps = {\r\n groupId: this.groupId,\r\n text: this.props.items[i],\r\n inline: this.props.inline,\r\n change: (s: string) => (this.props.callback(s)),\r\n key: this.props.items[i],\r\n connected: this.props.connected || false,\r\n checked: false,\r\n index: i\r\n };\r\n\r\n if (typeof this.props.selectedValueOrIndex == 'number'){\r\n itemProps.checked = i == this.props.selectedValueOrIndex;\r\n } else {\r\n itemProps.checked = this.props.items[i] == this.props.selectedValueOrIndex;\r\n delete itemProps.index\r\n }\r\n\r\n arr.push(<RadioItem {...itemProps}/>)\r\n }\r\n\r\n return <div className=\"radio-list\">\r\n <h4>{this.props.title}</h4>\r\n <ul style={{listStyle: 'none'}}>\r\n {arr}\r\n </ul>\r\n </div>\r\n }\r\n}\r\n\r\n\r\nexport class Radio extends React.Component<{ title: string, items: string[], callback: (val: string) => any, inline?: boolean, defaultValue: string }, null> {\r\n\r\n render() {\r\n return <RadioBase\r\n title={this.props.title}\r\n items={this.props.items}\r\n callback={this.props.callback}\r\n inline={this.props.inline}\r\n selectedValueOrIndex={this.props.defaultValue}\r\n connected={false}\r\n />\r\n }\r\n}\r\n\r\nexport class RadioConnected extends React.Component<{ title: string, items: string[], callback: (val: string) => any, inline?: boolean, selectedIndex: number }, null> {\r\n\r\n render() {\r\n return <RadioBase\r\n title={this.props.title}\r\n items={this.props.items}\r\n callback={this.props.callback}\r\n inline={this.props.inline}\r\n selectedValueOrIndex={this.props.selectedIndex}\r\n connected={true}\r\n />\r\n }\r\n}"]} {"version":3,"file":"Radio.jsx","sourceRoot":"","sources":["../../src/reactComponents/Radio.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 6/12/2017.\r\n */\r\n\r\n\r\nimport {React} from './reactAndRedux';\r\nimport $ = require('jquery');\r\nimport 'jquery-ui';\r\nimport makeGuid from '../util/makeGuid';\r\nimport {ChangeEvent} from \"react\";\r\n\r\nexport interface iRadioItem{\r\n groupId: string;\r\n text: string;\r\n checked: boolean;\r\n inline: boolean;\r\n change: (s: string) => any;\r\n connected?: boolean;\r\n index?: number\r\n}\r\n\r\nclass RadioItem extends React.Component<iRadioItem, null> {\r\n guid: string;\r\n\r\n constructor(props: iRadioItem, context: Object){\r\n super(props, context);\r\n this.guid = makeGuid()\r\n }\r\n\r\n\r\n render() {\r\n let style = {};\r\n if (this.props.inline) {\r\n style = {\r\n display: 'inline-block',\r\n padding: '0 5px'\r\n };\r\n }\r\n\r\n let props = {\r\n id: this.guid,\r\n type: \"radio\",\r\n name: this.props.groupId,\r\n value: typeof this.props.index == 'undefined' ? this.props.text : this.props.index.toFixed(),\r\n onChange: (evt: ChangeEvent<HTMLInputElement>) => {\r\n this.props.change(evt.target.value);\r\n evt.target.checked = true;\r\n },\r\n checked: this.props.checked,\r\n defaultChecked: this.props.checked\r\n };\r\n\r\n if (this.props.connected) {\r\n delete props.defaultChecked;\r\n } else {\r\n delete props.checked\r\n }\r\n\r\n return <li style={style}>\r\n <input {...props}/>\r\n <label htmlFor={this.guid}>{this.props.text}</label>\r\n </li>;\r\n }\r\n}\r\n\r\ninterface iRadioBase {\r\n title: string;\r\n items: string[];\r\n callback: (val: string) => any;\r\n inline?: boolean;\r\n selectedValueOrIndex: string|number;\r\n connected: boolean;\r\n classes?: string[]\r\n}\r\n\r\nclass RadioBase extends React.Component<iRadioBase, null> {\r\n inline: boolean;\r\n groupId: string;\r\n\r\n constructor(props: iRadioBase, context: Object) {\r\n super(props, context);\r\n this.inline = this.props.inline || false;\r\n this.groupId = this.props.title.toLowerCase().replace(/ /g, '');\r\n }\r\n\r\n render() {\r\n\r\n let arr = [];\r\n\r\n for (let i = 0; i < this.props.items.length; i++) {\r\n\r\n let itemProps = {\r\n groupId: this.groupId,\r\n text: this.props.items[i],\r\n inline: this.props.inline,\r\n change: (s: string) => (this.props.callback(s)),\r\n key: this.props.items[i],\r\n connected: this.props.connected || false,\r\n checked: false,\r\n index: i\r\n };\r\n\r\n if (typeof this.props.selectedValueOrIndex == 'number'){\r\n itemProps.checked = i == this.props.selectedValueOrIndex;\r\n } else {\r\n itemProps.checked = this.props.items[i] == this.props.selectedValueOrIndex;\r\n delete itemProps.index\r\n }\r\n\r\n arr.push(<RadioItem {...itemProps}/>)\r\n }\r\n\r\n let classes = ['radio-list'];\r\n\r\n if (this.props.classes){\r\n classes = classes.concat(this.props.classes);\r\n }\r\n\r\n return <div className={classes.join(' ')}>\r\n <h4>{this.props.title}</h4>\r\n <ul style={{listStyle: 'none'}}>\r\n {arr}\r\n </ul>\r\n </div>\r\n }\r\n}\r\n\r\n\r\nexport class Radio extends React.Component<{\r\n title: string, items: string[], callback: (val: string) => any, inline?: boolean,\r\n defaultValue: string, classes?: string[] }, null> {\r\n\r\n render() {\r\n\r\n return <RadioBase\r\n title={this.props.title}\r\n items={this.props.items}\r\n callback={this.props.callback}\r\n inline={this.props.inline}\r\n selectedValueOrIndex={this.props.defaultValue}\r\n connected={false}\r\n classes={this.props.classes}\r\n />\r\n }\r\n}\r\n\r\nexport class RadioConnected extends React.Component<{\r\n title: string, items: string[], callback: (val: string) => any, inline?: boolean,\r\n selectedIndex: number, classes?: string[] }, null> {\r\n\r\n render() {\r\n return <RadioBase\r\n title={this.props.title}\r\n items={this.props.items}\r\n callback={this.props.callback}\r\n inline={this.props.inline}\r\n selectedValueOrIndex={this.props.selectedIndex}\r\n connected={true}\r\n classes={this.props.classes}\r\n />\r\n }\r\n}"]}
\ No newline at end of file \ No newline at end of file
src/reactComponents/Radio.tsx
+ 17
− 10
View file @ 84837407
...@@ -70,6 +70,7 @@ interface iRadioBase { ...@@ -70,6 +70,7 @@ interface iRadioBase {
inline?: boolean; inline?: boolean;
selectedValueOrIndex: string|number; selectedValueOrIndex: string|number;
connected: boolean; connected: boolean;
classes?: string[]
} }
class RadioBase extends React.Component<iRadioBase, null> { class RadioBase extends React.Component<iRadioBase, null> {
...@@ -83,13 +84,6 @@ class RadioBase extends React.Component<iRadioBase, null> { ...@@ -83,13 +84,6 @@ class RadioBase extends React.Component<iRadioBase, null> {
} }
render() { render() {
let style = {};
if (this.inline) {
style = {
display: 'inline-block',
padding: '0 5px'
}
}
let arr = []; let arr = [];
...@@ -116,7 +110,13 @@ class RadioBase extends React.Component<iRadioBase, null> { ...@@ -116,7 +110,13 @@ class RadioBase extends React.Component<iRadioBase, null> {
arr.push(<RadioItem {...itemProps}/>) arr.push(<RadioItem {...itemProps}/>)
} }
return <div className="radio-list"> let classes = ['radio-list'];
if (this.props.classes){
classes = classes.concat(this.props.classes);
}
return <div className={classes.join(' ')}>
<h4>{this.props.title}</h4> <h4>{this.props.title}</h4>
<ul style={{listStyle: 'none'}}> <ul style={{listStyle: 'none'}}>
{arr} {arr}
...@@ -126,9 +126,12 @@ class RadioBase extends React.Component<iRadioBase, null> { ...@@ -126,9 +126,12 @@ class RadioBase extends React.Component<iRadioBase, null> {
} }
export class Radio extends React.Component<{ title: string, items: string[], callback: (val: string) => any, inline?: boolean, defaultValue: string }, null> { export class Radio extends React.Component<{
title: string, items: string[], callback: (val: string) => any, inline?: boolean,
defaultValue: string, classes?: string[] }, null> {
render() { render() {
return <RadioBase return <RadioBase
title={this.props.title} title={this.props.title}
items={this.props.items} items={this.props.items}
...@@ -136,11 +139,14 @@ export class Radio extends React.Component<{ title: string, items: string[], cal ...@@ -136,11 +139,14 @@ export class Radio extends React.Component<{ title: string, items: string[], cal
inline={this.props.inline} inline={this.props.inline}
selectedValueOrIndex={this.props.defaultValue} selectedValueOrIndex={this.props.defaultValue}
connected={false} connected={false}
classes={this.props.classes}
/> />
} }
} }
export class RadioConnected extends React.Component<{ title: string, items: string[], callback: (val: string) => any, inline?: boolean, selectedIndex: number }, null> { export class RadioConnected extends React.Component<{
title: string, items: string[], callback: (val: string) => any, inline?: boolean,
selectedIndex: number, classes?: string[] }, null> {
render() { render() {
return <RadioBase return <RadioBase
...@@ -150,6 +156,7 @@ export class RadioConnected extends React.Component<{ title: string, items: stri ...@@ -150,6 +156,7 @@ export class RadioConnected extends React.Component<{ title: string, items: stri
inline={this.props.inline} inline={this.props.inline}
selectedValueOrIndex={this.props.selectedIndex} selectedValueOrIndex={this.props.selectedIndex}
connected={true} connected={true}
classes={this.props.classes}
/> />
} }
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment