Skip to content

Commit 21afb19

Browse files
michielbdejongmichielbdejong
authored
Merge pull request SolidOS#256 from solid/fieldParams
fieldParams
2 parents 4604a4f + ae41622 commit 21afb19

5 files changed

Lines changed: 254 additions & 172 deletions

File tree

‎src/widgets/forms.js‎

Lines changed: 3 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55

66
/* global alert */
77

8+
import { fieldParams } from './forms/fieldParams'
9+
810
module.exports = {}
911

1012
var forms = {}
@@ -540,81 +542,7 @@ forms.field[ns.ui('Multiple').uri] = function (
540542
// or use HTML5: http://www.w3.org/TR/2011/WD-html-markup-20110113/input.date.html
541543
//
542544

543-
forms.fieldParams = {}
544-
545-
forms.fieldParams[ns.ui('ColorField').uri] = {
546-
size: 9,
547-
type: 'color',
548-
dt: 'color'
549-
} // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
550-
forms.fieldParams[
551-
ns.ui('ColorField').uri
552-
].pattern = /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/
553-
554-
forms.fieldParams[ns.ui('DateField').uri] = {
555-
size: 20,
556-
type: 'date',
557-
dt: 'date'
558-
}
559-
forms.fieldParams[
560-
ns.ui('DateField').uri
561-
].pattern = /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?Z?\s*$/
562-
563-
forms.fieldParams[ns.ui('DateTimeField').uri] = {
564-
size: 20,
565-
type: 'date',
566-
dt: 'dateTime'
567-
}
568-
forms.fieldParams[
569-
ns.ui('DateTimeField').uri
570-
].pattern = /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?(T[0-2][0-9]:[0-5][0-9](:[0-5][0-9])?)?Z?\s*$/
571-
572-
forms.fieldParams[ns.ui('TimeField').uri] = {
573-
size: 10,
574-
type: 'time',
575-
dt: 'time'
576-
}
577-
forms.fieldParams[
578-
ns.ui('TimeField').uri
579-
].pattern = /^\s*([0-2]?[0-9]:[0-5][0-9](:[0-5][0-9])?)\s*$/
580-
581-
forms.fieldParams[ns.ui('IntegerField').uri] = {
582-
size: 12,
583-
style: 'text-align: right',
584-
dt: 'integer'
585-
}
586-
forms.fieldParams[ns.ui('IntegerField').uri].pattern = /^\s*-?[0-9]+\s*$/
587-
588-
forms.fieldParams[ns.ui('DecimalField').uri] = {
589-
size: 12,
590-
style: 'text-align: right',
591-
dt: 'decimal'
592-
}
593-
forms.fieldParams[
594-
ns.ui('DecimalField').uri
595-
].pattern = /^\s*-?[0-9]*(\.[0-9]*)?\s*$/
596-
597-
forms.fieldParams[ns.ui('FloatField').uri] = {
598-
size: 12,
599-
style: 'text-align: right',
600-
dt: 'float'
601-
}
602-
forms.fieldParams[
603-
ns.ui('FloatField').uri
604-
].pattern = /^\s*-?[0-9]*(\.[0-9]*)?((e|E)-?[0-9]*)?\s*$/
605-
606-
forms.fieldParams[ns.ui('SingleLineTextField').uri] = {}
607-
forms.fieldParams[ns.ui('NamedNodeURIField').uri] = { namedNode: true }
608-
forms.fieldParams[ns.ui('TextField').uri] = {}
609-
610-
forms.fieldParams[ns.ui('PhoneField').uri] = { size: 20, uriPrefix: 'tel:' }
611-
forms.fieldParams[ns.ui('PhoneField').uri].pattern = /^\+?[\d-]+[\d]*$/
612-
613-
forms.fieldParams[ns.ui('EmailField').uri] = {
614-
size: 30,
615-
uriPrefix: 'mailto:'
616-
}
617-
forms.fieldParams[ns.ui('EmailField').uri].pattern = /^\s*.*@.*\..*\s*$/ // @@ Get the right regexp here
545+
forms.fieldParams = fieldParams
618546

619547
/** Render a basic form field
620548
*
@@ -1077,15 +1005,6 @@ forms.field[ns.ui('Choice').uri] = function (
10771005
// Documentation - non-interactive fields
10781006
//
10791007

1080-
forms.fieldParams[ns.ui('Comment').uri] = {
1081-
element: 'p',
1082-
style: `padding: 0.1em 1.5em; color: ${UI.style.formHeadingColor}; white-space: pre-wrap;`
1083-
}
1084-
forms.fieldParams[ns.ui('Heading').uri] = {
1085-
element: 'h3',
1086-
style: `font-size: 110%; color: ${UI.style.formHeadingColor};`
1087-
}
1088-
10891008
forms.field[ns.ui('Comment').uri] = forms.field[
10901009
ns.ui('Heading').uri
10911010
] = function (

‎src/widgets/forms/fieldParams.ts‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import ns from '../../ns'
2+
import { formHeadingColor } from '../../style'
3+
4+
export type FieldParamsObject = {
5+
size?: number, // input element size attribute
6+
type?: string, // input element type attribute. Default: 'text' (not for Comment and Heading)
7+
element?: string, // element type to use (Comment and Heading only)
8+
style?: string, // style to use
9+
dt?: string, // xsd data type for the RDF Literal corresponding to the field value. Default: xsd:string
10+
uriPrefix?: string, // e.g. 'mailto:', will be removed when displaying value to user. Overrides dt.
11+
namedNode?: boolean, // if true, field value corresponds to the URI of an RDF NamedNode. Overrides dt and uriPrefix.
12+
pattern?: RegExp // for client-side input validation; field will go red if violated, green if ok
13+
}
14+
15+
/**
16+
* The fieldParams object defines various constants
17+
* for use in various form fields. Depending on the
18+
* field in questions, different values may be read
19+
* from here.
20+
*/
21+
export const fieldParams: { [ fieldUri: string ]: FieldParamsObject } = {
22+
/**
23+
* Text field
24+
*
25+
* For possible date popups see e.g. http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm
26+
* or use HTML5: http://www.w3.org/TR/2011/WD-html-markup-20110113/input.date.html
27+
*/
28+
[ns.ui('ColorField').uri]: {
29+
size: 9,
30+
type: 'color',
31+
dt: 'color',
32+
pattern: /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/
33+
}, // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
34+
35+
[ns.ui('DateField').uri]: {
36+
size: 20,
37+
type: 'date',
38+
dt: 'date',
39+
pattern: /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?Z?\s*$/
40+
},
41+
42+
[ns.ui('DateTimeField').uri]: {
43+
size: 20,
44+
type: 'date',
45+
dt: 'dateTime',
46+
pattern: /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?(T[0-2][0-9]:[0-5][0-9](:[0-5][0-9])?)?Z?\s*$/
47+
},
48+
49+
[ns.ui('TimeField').uri]: {
50+
size: 10,
51+
type: 'time',
52+
dt: 'time',
53+
pattern: /^\s*([0-2]?[0-9]:[0-5][0-9](:[0-5][0-9])?)\s*$/
54+
},
55+
56+
[ns.ui('IntegerField').uri]: {
57+
size: 12,
58+
style: 'text-align: right',
59+
dt: 'integer',
60+
pattern: /^\s*-?[0-9]+\s*$/
61+
},
62+
63+
[ns.ui('DecimalField').uri]: {
64+
size: 12,
65+
style: 'text-align: right',
66+
dt: 'decimal',
67+
pattern: /^\s*-?[0-9]*(\.[0-9]*)?\s*$/
68+
},
69+
70+
[ns.ui('FloatField').uri]: {
71+
size: 12,
72+
style: 'text-align: right',
73+
dt: 'float',
74+
pattern: /^\s*-?[0-9]*(\.[0-9]*)?((e|E)-?[0-9]*)?\s*$/
75+
},
76+
77+
[ns.ui('SingleLineTextField').uri]: {
78+
79+
},
80+
[ns.ui('NamedNodeURIField').uri]: {
81+
namedNode: true
82+
},
83+
[ns.ui('TextField').uri]: {
84+
85+
},
86+
87+
[ns.ui('PhoneField').uri]: {
88+
size: 20,
89+
uriPrefix: 'tel:',
90+
pattern: /^\+?[\d-]+[\d]*$/
91+
},
92+
93+
[ns.ui('EmailField').uri]: {
94+
size: 30,
95+
uriPrefix: 'mailto:',
96+
pattern: /^\s*.*@.*\..*\s*$/ // @@ Get the right regexp here
97+
},
98+
99+
/**
100+
* Non-interactive fields
101+
*/
102+
[ns.ui('Comment').uri]: {
103+
element: 'p',
104+
style: `padding: 0.1em 1.5em; color: ${formHeadingColor}; white-space: pre-wrap;`
105+
},
106+
[ns.ui('Heading').uri]: {
107+
element: 'h3',
108+
style: `font-size: 110%; color: ${formHeadingColor};`
109+
}
110+
}

test/unit/widgets/__snapshots__/forms.test.ts.snap renamed to test/unit/widgets/forms/__snapshots__/index.test.ts.snap

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,32 @@ exports[`Comment runs 1`] = `
5555
</div>
5656
`;
5757

58+
exports[`DateField runs 1`] = `
59+
<tr>
60+
<td
61+
class="formFieldName"
62+
style=" vertical-align: middle;"
63+
>
64+
<a
65+
href="http://example.com/#bla"
66+
style="color: #3B5998; text-decoration: none;"
67+
>
68+
Bla
69+
</a>
70+
</td>
71+
<td
72+
class="formFieldValue"
73+
>
74+
<input
75+
maxlength="4096"
76+
size="20"
77+
style="background-color: #eef; padding: 0.5em; border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.2em; "
78+
type="text"
79+
/>
80+
</td>
81+
</tr>
82+
`;
83+
5884
exports[`DateTimeField runs 1`] = `
5985
<tr>
6086
<td

‎test/unit/widgets/forms/fieldParams.test.ts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import ns from '../../../../src/ns'
2+
import { fieldParams } from '../../../../src/widgets/forms/fieldParams'
3+
4+
describe('fieldParams', () => {
5+
it('exists', () => {
6+
expect(fieldParams).toBeTruthy()
7+
})
8+
})
9+
10+
describe('ColorField params', () => {
11+
it('exists', () => {
12+
console.log(fieldParams[ns.ui('ColorField').uri])
13+
expect(fieldParams[ns.ui('ColorField').uri]).toBeTruthy()
14+
})
15+
})
16+
17+
describe('DateField params', () => {
18+
it('exists', () => {
19+
expect(fieldParams[ns.ui('DateField').uri]).toBeTruthy()
20+
})
21+
})
22+
23+
describe('DateTimeField params', () => {
24+
it('exists', () => {
25+
expect(fieldParams[ns.ui('DateTimeField').uri]).toBeTruthy()
26+
})
27+
})
28+
29+
describe('TimeField params', () => {
30+
it('exists', () => {
31+
expect(fieldParams[ns.ui('TimeField').uri]).toBeTruthy()
32+
})
33+
})
34+
35+
describe('IntegerField params', () => {
36+
it('exists', () => {
37+
expect(fieldParams[ns.ui('IntegerField').uri]).toBeTruthy()
38+
})
39+
})
40+
41+
describe('DecimalField params', () => {
42+
it('exists', () => {
43+
expect(fieldParams[ns.ui('DecimalField').uri]).toBeTruthy()
44+
})
45+
})
46+
47+
describe('FloatField params', () => {
48+
it('exists', () => {
49+
expect(fieldParams[ns.ui('FloatField').uri]).toBeTruthy()
50+
})
51+
})
52+
53+
describe('SingleLineTextField params', () => {
54+
it('exists', () => {
55+
expect(fieldParams[ns.ui('SingleLineTextField').uri]).toBeTruthy()
56+
})
57+
})
58+
59+
describe('NamedNodeURIField params', () => {
60+
it('exists', () => {
61+
expect(fieldParams[ns.ui('NamedNodeURIField').uri]).toBeTruthy()
62+
})
63+
})
64+
65+
describe('TextField params', () => {
66+
it('exists', () => {
67+
expect(fieldParams[ns.ui('TextField').uri]).toBeTruthy()
68+
})
69+
})
70+
71+
describe('PhoneField params', () => {
72+
it('exists', () => {
73+
expect(fieldParams[ns.ui('PhoneField').uri]).toBeTruthy()
74+
})
75+
})
76+
77+
describe('EmailField params', () => {
78+
it('exists', () => {
79+
expect(fieldParams[ns.ui('EmailField').uri]).toBeTruthy()
80+
})
81+
})
82+
83+
describe('Comment params', () => {
84+
it('exists', () => {
85+
expect(fieldParams[ns.ui('Comment').uri]).toBeTruthy()
86+
})
87+
})

0 commit comments

Comments
 (0)