Skip to content

Commit 870c145

Browse files
tobiutobiu
committed
[DevIndex] Add Hireable and Website columns to Grid #9152 wip
1 parent c8a10ca commit 870c145

8 files changed

Lines changed: 317 additions & 6 deletions

File tree

‎apps/devindex/view/home/GridContainer.mjs‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -204,11 +204,26 @@ class GridContainer extends BaseGridContainer {
204204
text : 'Since', width: 80,
205205
cellAlign: 'center'
206206
}, {
207+
type : 'iconLink',
208+
dataField: 'website',
209+
defaults : {style: {fontSize: '16px'}},
210+
iconCls : 'fa fa-home',
211+
text : 'Website',
212+
width : 70
213+
}, {
214+
type : 'iconLink',
207215
dataField: 'linkedinUrl',
216+
defaults : {style: {color : '#0077b5', fontSize: '20px'}},
217+
iconCls : 'fa-brands fa-linkedin',
208218
text : 'LI',
209-
width : 50,
210-
cellAlign: 'center',
211-
renderer : ({value}) => value ? `<a href="${value}" target="_blank" class="fa-brands fa-linkedin" style="color: #0077b5; font-size: 20px;"></a>` : ''
219+
width : 40
220+
}, {
221+
type : 'icon',
222+
dataField: 'isHireable',
223+
defaults : {style: {color : '#28a745', fontSize: '16px'}},
224+
iconCls : 'fas fa-circle-check',
225+
text : 'Hireable',
226+
width : 75
212227
}, {
213228
type : 'githubOrgs',
214229
dataField: 'organizations',

‎src/component/Icon.mjs‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import Component from './Base.mjs';
2+
import NeoArray from '../util/Array.mjs';
3+
4+
/**
5+
* @class Neo.component.Icon
6+
* @extends Neo.component.Base
7+
*/
8+
class Icon extends Component {
9+
static config = {
10+
/**
11+
* @member {String} className='Neo.component.Icon'
12+
* @protected
13+
*/
14+
className: 'Neo.component.Icon',
15+
/**
16+
* @member {String} ntype='icon'
17+
* @protected
18+
*/
19+
ntype: 'icon',
20+
/**
21+
* @member {String[]} baseCls=['neo-icon']
22+
*/
23+
baseCls: ['neo-icon'],
24+
/**
25+
* @member {String|null} iconCls_=null
26+
* @reactive
27+
*/
28+
iconCls_: null,
29+
/**
30+
* @member {String} tag='i'
31+
*/
32+
tag: 'i'
33+
}
34+
35+
/**
36+
* Triggered after the iconCls config got changed
37+
* @param {String|String[]|null} value
38+
* @param {String|String[]|null} oldValue
39+
*/
40+
afterSetIconCls(value, oldValue) {
41+
let cls = this.cls;
42+
43+
NeoArray.removeAdd(cls, oldValue, value);
44+
45+
this.cls = cls
46+
}
47+
48+
/**
49+
* Triggered before the iconCls config gets changed. Converts the string into an array if needed.
50+
* @param {Array|String|null} value The new value of the iconCls config.
51+
* @param {Array|String|null} oldValue The old value of the iconCls config.
52+
* @returns {Array}
53+
* @protected
54+
*/
55+
beforeSetIconCls(value, oldValue) {
56+
if (value && !Array.isArray(value)) {
57+
value = value.split(' ').filter(Boolean)
58+
}
59+
60+
return value
61+
}
62+
}
63+
64+
export default Neo.setupClass(Icon);

‎src/component/IconLink.mjs‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import Component from './Base.mjs';
2+
import NeoArray from '../util/Array.mjs';
3+
4+
/**
5+
* @class Neo.component.IconLink
6+
* @extends Neo.component.Base
7+
*/
8+
class IconLink extends Component {
9+
static config = {
10+
/**
11+
* @member {String} className='Neo.component.IconLink'
12+
* @protected
13+
*/
14+
className: 'Neo.component.IconLink',
15+
/**
16+
* @member {String} ntype='icon-link'
17+
* @protected
18+
*/
19+
ntype: 'icon-link',
20+
/**
21+
* @member {String[]} baseCls=['neo-icon-link']
22+
*/
23+
baseCls: ['neo-icon-link'],
24+
/**
25+
* @member {String|null} iconCls_=null
26+
* @reactive
27+
*/
28+
iconCls_: null,
29+
/**
30+
* @member {String} tag='a'
31+
*/
32+
tag: 'a',
33+
/**
34+
* @member {String} target_='_blank'
35+
* @reactive
36+
*/
37+
target_: '_blank',
38+
/**
39+
* @member {String|null} url_=null
40+
* @reactive
41+
*/
42+
url_: null,
43+
/**
44+
* @member {Object} _vdom
45+
*/
46+
_vdom:
47+
{cn: [
48+
{tag: 'i', cls: []}
49+
]}
50+
}
51+
52+
/**
53+
* Triggered after the iconCls config got changed
54+
* @param {String|String[]|null} value
55+
* @param {String|String[]|null} oldValue
56+
*/
57+
afterSetIconCls(value, oldValue) {
58+
let me = this,
59+
node = me.vdom.cn[0],
60+
cls = node.cls || [];
61+
62+
NeoArray.removeAdd(cls, oldValue, value);
63+
64+
node.cls = cls;
65+
me.update()
66+
}
67+
68+
/**
69+
* Triggered after the target config got changed
70+
* @param {String} value
71+
* @param {String} oldValue
72+
*/
73+
afterSetTarget(value, oldValue) {
74+
this.changeVdomRootKey('target', value)
75+
}
76+
77+
/**
78+
* Triggered after the url config got changed
79+
* @param {String|null} value
80+
* @param {String|null} oldValue
81+
*/
82+
afterSetUrl(value, oldValue) {
83+
let me = this;
84+
85+
if (value) {
86+
me.vdom.href = value;
87+
me.hidden = false
88+
} else {
89+
delete me.vdom.href;
90+
me.hidden = true
91+
}
92+
93+
me.update()
94+
}
95+
96+
/**
97+
* Triggered before the iconCls config gets changed. Converts the string into an array if needed.
98+
* @param {Array|String|null} value The new value of the iconCls config.
99+
* @param {Array|String|null} oldValue The old value of the iconCls config.
100+
* @returns {Array}
101+
* @protected
102+
*/
103+
beforeSetIconCls(value, oldValue) {
104+
if (value && !Array.isArray(value)) {
105+
value = value.split(' ').filter(Boolean)
106+
}
107+
108+
return value
109+
}
110+
}
111+
112+
export default Neo.setupClass(IconLink);

‎src/grid/Container.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ class GridContainer extends BaseContainer {
4545
currency : column.Currency,
4646
githubOrgs : column.GitHubOrgs,
4747
githubUser : column.GitHubUser,
48+
icon : column.Icon,
49+
iconLink : column.IconLink,
4850
index : column.Index,
4951
progress : column.Progress,
5052
sparkline : column.Sparkline

‎src/grid/column/Component.mjs‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import Column from './Base.mjs';
1+
import {isDescriptor} from '../../core/ConfigSymbols.mjs';
2+
import Column from './Base.mjs';
23

34
/**
45
* @class Neo.grid.column.Component
@@ -16,10 +17,15 @@ class Component extends Column {
1617
*/
1718
component: null,
1819
/**
19-
* @member {Object} defaults
20+
* @member {Object} defaults_
2021
* @protected
22+
* @reactive
2123
*/
22-
defaults: null,
24+
defaults_: {
25+
[isDescriptor]: true,
26+
merge : 'deep',
27+
value : null
28+
},
2329
/**
2430
* Components can delegate event listeners (or button handlers) into methods somewhere inside
2531
* the view controller or component tree hierarchy.

‎src/grid/column/Icon.mjs‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import ComponentColumn from './Component.mjs';
2+
import IconComponent from '../../component/Icon.mjs';
3+
4+
/**
5+
* @class Neo.grid.column.Icon
6+
* @extends Neo.grid.column.Component
7+
*/
8+
class Icon extends ComponentColumn {
9+
static config = {
10+
/**
11+
* @member {String} className='Neo.grid.column.Icon'
12+
* @protected
13+
*/
14+
className: 'Neo.grid.column.Icon',
15+
/**
16+
* @member {Object} defaults
17+
* @protected
18+
*/
19+
defaults: {
20+
module: IconComponent
21+
},
22+
/**
23+
* @member {String|null} iconCls=null
24+
*/
25+
iconCls: null,
26+
/**
27+
* @member {String} type='icon'
28+
* @protected
29+
*/
30+
type: 'icon'
31+
}
32+
33+
/**
34+
* @param {Object} config
35+
* @param {Record} record
36+
* @returns {Object}
37+
*/
38+
applyRecordConfigs(config, record) {
39+
let me = this,
40+
value = record[me.dataField],
41+
iconCls = me.iconCls;
42+
43+
if (iconCls) {
44+
return {
45+
iconCls,
46+
hidden: !value,
47+
...config
48+
}
49+
}
50+
51+
return {
52+
iconCls: value,
53+
hidden : !value,
54+
...config
55+
}
56+
}
57+
}
58+
59+
export default Neo.setupClass(Icon);

‎src/grid/column/IconLink.mjs‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import ComponentColumn from './Component.mjs';
2+
import IconLinkComponent from '../../component/IconLink.mjs';
3+
4+
/**
5+
* @class Neo.grid.column.IconLink
6+
* @extends Neo.grid.column.Component
7+
*/
8+
class IconLink extends ComponentColumn {
9+
static config = {
10+
/**
11+
* @member {String} className='Neo.grid.column.IconLink'
12+
* @protected
13+
*/
14+
className: 'Neo.grid.column.IconLink',
15+
/**
16+
* @member {Object} defaults
17+
* @protected
18+
*/
19+
defaults: {
20+
module: IconLinkComponent
21+
},
22+
/**
23+
* @member {String|null} iconCls=null
24+
*/
25+
iconCls: null,
26+
/**
27+
* @member {String} type='iconLink'
28+
* @protected
29+
*/
30+
type: 'iconLink'
31+
}
32+
33+
/**
34+
* @param {Object} config
35+
* @param {Record} record
36+
* @returns {Object}
37+
*/
38+
applyRecordConfigs(config, record) {
39+
let me = this;
40+
41+
return {
42+
iconCls: me.iconCls,
43+
url : record[me.dataField],
44+
...config
45+
}
46+
}
47+
}
48+
49+
export default Neo.setupClass(IconLink);

‎src/grid/column/_export.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import CountryFlag from './CountryFlag.mjs';
66
import Currency from './Currency.mjs';
77
import GitHubOrgs from './GitHubOrgs.mjs';
88
import GitHubUser from './GitHubUser.mjs';
9+
import Icon from './Icon.mjs';
10+
import IconLink from './IconLink.mjs';
911
import Index from './Index.mjs';
1012
import Progress from './Progress.mjs';
1113
import Sparkline from './Sparkline.mjs';
@@ -19,6 +21,8 @@ export {
1921
Currency,
2022
GitHubOrgs,
2123
GitHubUser,
24+
Icon,
25+
IconLink,
2226
Index,
2327
Progress,
2428
Sparkline

0 commit comments

Comments
 (0)