superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/styles/_sd-tag-input.scss +201 -296
- package/app/styles/components/_list-item.scss +13 -1
- package/app/styles/components/_sd-photo-preview.scss +1 -1
- package/app/styles/design-tokens/_new-colors.scss +1 -1
- package/app/styles/form-elements/_forms-general.scss +22 -7
- package/app/styles/form-elements/_inputs.scss +133 -54
- package/app-typescript/components/Badge.tsx +3 -2
- package/app-typescript/components/DatePicker.tsx +40 -52
- package/app-typescript/components/DurationInput.tsx +342 -0
- package/app-typescript/components/Form/InputBase.tsx +85 -0
- package/app-typescript/components/Form/InputNew.tsx +107 -0
- package/app-typescript/components/Form/InputWrapper.tsx +79 -0
- package/app-typescript/components/Form/index.tsx +3 -0
- package/app-typescript/components/Input.tsx +28 -45
- package/app-typescript/components/Label.tsx +49 -10
- package/app-typescript/components/Layouts/Layout.tsx +1 -1
- package/app-typescript/components/Lists/ContentList.tsx +4 -4
- package/app-typescript/components/MultiSelect.tsx +37 -50
- package/app-typescript/components/Navigation/BottomNav.tsx +3 -2
- package/app-typescript/components/Select.tsx +23 -41
- package/app-typescript/components/SelectWithTemplate.tsx +32 -7
- package/app-typescript/components/TimePicker.tsx +48 -16
- package/app-typescript/components/TreeSelect.tsx +423 -195
- package/app-typescript/index.ts +4 -1
- package/dist/examples.bundle.js +16733 -15633
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +64 -54
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +24 -16
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +76 -1
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
- package/dist/react/Badges.tsx +18 -0
- package/dist/react/ContentList.tsx +15 -9
- package/dist/react/DatePicker.tsx +21 -1
- package/dist/react/DurationInput.tsx +104 -0
- package/dist/react/Index.tsx +5 -0
- package/dist/react/Inputs.tsx +153 -2
- package/dist/react/Labels.tsx +51 -1
- package/dist/react/MultiSelect.tsx +4 -1
- package/dist/react/SelectWithTemplate.tsx +6 -1
- package/dist/react/TableList.tsx +22 -44
- package/dist/react/TimePicker.tsx +16 -8
- package/dist/react/TreeSelect.tsx +301 -48
- package/dist/react/tree-select/TreeSelect.tsx +273 -0
- package/dist/react/tree-select/example-1.tsx +71 -0
- package/dist/react/tree-select/example-2.tsx +59 -0
- package/dist/superdesk-ui.bundle.css +413 -370
- package/dist/superdesk-ui.bundle.js +15879 -14782
- package/dist/vendor.bundle.js +27 -27
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +64 -54
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +24 -16
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +76 -1
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
- package/examples/pages/react/Badges.tsx +18 -0
- package/examples/pages/react/ContentList.tsx +15 -9
- package/examples/pages/react/DatePicker.tsx +21 -1
- package/examples/pages/react/DurationInput.tsx +104 -0
- package/examples/pages/react/Index.tsx +5 -0
- package/examples/pages/react/Inputs.tsx +153 -2
- package/examples/pages/react/Labels.tsx +51 -1
- package/examples/pages/react/MultiSelect.tsx +4 -1
- package/examples/pages/react/SelectWithTemplate.tsx +6 -1
- package/examples/pages/react/TableList.tsx +22 -44
- package/examples/pages/react/TimePicker.tsx +16 -8
- package/examples/pages/react/TreeSelect.tsx +301 -48
- package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
- package/examples/pages/react/tree-select/example-1.tsx +71 -0
- package/examples/pages/react/tree-select/example-2.tsx +59 -0
- package/package.json +2 -1
- package/patches/@superdesk+primereact+5.0.2-4.patch +10 -1
- package/react/components/Badge.d.ts +1 -0
- package/react/components/Badge.js +2 -2
- package/react/components/DatePicker.d.ts +1 -0
- package/react/components/DatePicker.js +6 -22
- package/react/components/DurationInput.d.ts +41 -0
- package/react/components/DurationInput.js +303 -0
- package/react/components/Form/InputBase.d.ts +42 -0
- package/react/components/Form/InputBase.js +72 -0
- package/react/components/Form/InputNew.d.ts +45 -0
- package/react/components/Form/InputNew.js +75 -0
- package/react/components/Form/InputWrapper.d.ts +28 -0
- package/react/components/Form/InputWrapper.js +91 -0
- package/react/components/Form/index.d.ts +3 -0
- package/react/components/Form/index.js +7 -1
- package/react/components/Input.js +5 -34
- package/react/components/Label.d.ts +1 -0
- package/react/components/Label.js +18 -2
- package/react/components/Layouts/Layout.js +1 -1
- package/react/components/Lists/ContentList.d.ts +45 -0
- package/react/components/Lists/ContentList.js +85 -0
- package/react/components/Navigation/BottomNav.d.ts +1 -0
- package/react/components/Navigation/BottomNav.js +2 -2
- package/react/components/Select.d.ts +1 -1
- package/react/components/Select.js +4 -26
- package/react/components/SelectWithTemplate.d.ts +11 -1
- package/react/components/SelectWithTemplate.js +19 -10
- package/react/components/TimePicker.d.ts +15 -2
- package/react/components/TimePicker.js +15 -4
- package/react/components/TreeSelect.d.ts +75 -0
- package/react/components/TreeSelect.js +448 -0
- package/react/index.d.ts +4 -0
- package/react/index.js +10 -3
@@ -0,0 +1,273 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../../js/react';
|
3
|
+
import { PropsList, Prop } from '../../../../app-typescript';
|
4
|
+
import { MultiSelect } from '../../../../app-typescript/components/MultiSelect';
|
5
|
+
import { TreeSelect } from '../../../../app-typescript/components/TreeSelect';
|
6
|
+
import {Example1} from './example-1';
|
7
|
+
import {Example2} from './example-2';
|
8
|
+
|
9
|
+
interface IState {
|
10
|
+
value: any;
|
11
|
+
value2: any;
|
12
|
+
options: any;
|
13
|
+
options2: any;
|
14
|
+
inputValue: string;
|
15
|
+
}
|
16
|
+
|
17
|
+
let itemArr = [
|
18
|
+
{
|
19
|
+
value: 'Item1',
|
20
|
+
children: [
|
21
|
+
{
|
22
|
+
value: 'Item4',
|
23
|
+
children: [
|
24
|
+
{value: 'Item10'}
|
25
|
+
]
|
26
|
+
},
|
27
|
+
{
|
28
|
+
value: 'Item5',
|
29
|
+
children: [
|
30
|
+
{value: 'Item11'}
|
31
|
+
]
|
32
|
+
}
|
33
|
+
]
|
34
|
+
},
|
35
|
+
{
|
36
|
+
value: 'Item2',
|
37
|
+
children: [
|
38
|
+
{
|
39
|
+
value: 'Item6'
|
40
|
+
},
|
41
|
+
{
|
42
|
+
value: 'Item7'
|
43
|
+
}
|
44
|
+
]
|
45
|
+
},
|
46
|
+
{
|
47
|
+
value: 'Item3',
|
48
|
+
children: [
|
49
|
+
{
|
50
|
+
value: 'Item8'
|
51
|
+
},
|
52
|
+
{
|
53
|
+
value: 'Item9'
|
54
|
+
}
|
55
|
+
]
|
56
|
+
},
|
57
|
+
]
|
58
|
+
|
59
|
+
let itemArr2 = [
|
60
|
+
{
|
61
|
+
value: {name: 'name'},
|
62
|
+
children: [
|
63
|
+
{
|
64
|
+
value: {name: 'name'},
|
65
|
+
children: [
|
66
|
+
{value: { name: 'name' }
|
67
|
+
}
|
68
|
+
]
|
69
|
+
},
|
70
|
+
{
|
71
|
+
value: {name: 'name'},
|
72
|
+
children: [
|
73
|
+
{value: {name: 'name'}
|
74
|
+
}
|
75
|
+
]
|
76
|
+
}
|
77
|
+
]
|
78
|
+
}
|
79
|
+
]
|
80
|
+
|
81
|
+
|
82
|
+
export class TreeSelectDocs extends React.Component<{}, IState> {
|
83
|
+
constructor(props) {
|
84
|
+
super(props);
|
85
|
+
this.state = {
|
86
|
+
value: [],
|
87
|
+
value2: [],
|
88
|
+
options: itemArr,
|
89
|
+
options2: itemArr,
|
90
|
+
inputValue: ''
|
91
|
+
}
|
92
|
+
|
93
|
+
this.handleChange = this.handleChange.bind(this);
|
94
|
+
}
|
95
|
+
|
96
|
+
handleChange(e, option) {
|
97
|
+
|
98
|
+
if(option.item) {
|
99
|
+
e.stopPropagation();
|
100
|
+
e.preventDefault();
|
101
|
+
|
102
|
+
this.setState({
|
103
|
+
options: option.item
|
104
|
+
})
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
render() {
|
109
|
+
return (
|
110
|
+
<section className='docs-page__container'>
|
111
|
+
{/* <h2 className='docs-page__h2'>Example 1</h2>
|
112
|
+
|
113
|
+
<Example1 />
|
114
|
+
|
115
|
+
<h2 className='docs-page__h2'>Example 2</h2>
|
116
|
+
|
117
|
+
<Example2 /> */}
|
118
|
+
|
119
|
+
<h2 className='docs-page__h2'>TreeSelect</h2>
|
120
|
+
|
121
|
+
<Markup.ReactMarkupCodePreview>{`
|
122
|
+
<TreeSelect
|
123
|
+
options={this.state.options2}
|
124
|
+
getLabel={'label'}
|
125
|
+
getMultilevelArray={'items'}
|
126
|
+
selectBranchWithChildren={true}
|
127
|
+
onChange={() => false}
|
128
|
+
/>
|
129
|
+
`}
|
130
|
+
</Markup.ReactMarkupCodePreview>
|
131
|
+
|
132
|
+
<Markup.ReactMarkup>
|
133
|
+
<Markup.ReactMarkupPreview>
|
134
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
135
|
+
<div className='form__row'>
|
136
|
+
<TreeSelect
|
137
|
+
getOptions={() => {
|
138
|
+
return itemArr
|
139
|
+
}}
|
140
|
+
selectBranchWithChildren={true}
|
141
|
+
onChange={(e) => console.log(e)}
|
142
|
+
allowMultiple
|
143
|
+
kind={'synchronous'}
|
144
|
+
fullWidth
|
145
|
+
info={'Info Message'}
|
146
|
+
error={'Error Message'}
|
147
|
+
required
|
148
|
+
label={'TreeSelect Label'}
|
149
|
+
/>
|
150
|
+
</div>
|
151
|
+
</div>
|
152
|
+
</Markup.ReactMarkupPreview>
|
153
|
+
|
154
|
+
<Markup.ReactMarkupCode>{`
|
155
|
+
<TreeSelect
|
156
|
+
getOptions={() => {
|
157
|
+
return itemArr
|
158
|
+
}}
|
159
|
+
selectBranchWithChildren={true}
|
160
|
+
onChange={() => false}
|
161
|
+
allowMultiple
|
162
|
+
kind={'synchronous'}
|
163
|
+
/>
|
164
|
+
`}</Markup.ReactMarkupCode>
|
165
|
+
|
166
|
+
</Markup.ReactMarkup>
|
167
|
+
|
168
|
+
<p className='docs-page__paragraph'>Asynchronous mode in TreeSelect component.</p>
|
169
|
+
<Markup.ReactMarkup>
|
170
|
+
<Markup.ReactMarkupPreview>
|
171
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
172
|
+
<div className='form__row'>
|
173
|
+
<TreeSelect
|
174
|
+
getOptions={() => {
|
175
|
+
return itemArr
|
176
|
+
}}
|
177
|
+
selectBranchWithChildren={true}
|
178
|
+
onChange={() => false}
|
179
|
+
allowMultiple
|
180
|
+
kind={'asynchronous'}
|
181
|
+
searchOptions={(term, callback) => {
|
182
|
+
let newArr = itemArr.filter((item) => {
|
183
|
+
if (item.value
|
184
|
+
.toLowerCase().includes(term.toLowerCase())) {
|
185
|
+
return item;
|
186
|
+
}
|
187
|
+
})
|
188
|
+
return callback(newArr)
|
189
|
+
}}
|
190
|
+
|
191
|
+
/>
|
192
|
+
</div>
|
193
|
+
</div>
|
194
|
+
</Markup.ReactMarkupPreview>
|
195
|
+
|
196
|
+
<Markup.ReactMarkupCode>{`
|
197
|
+
<TreeSelect
|
198
|
+
getOptions={() => {
|
199
|
+
return itemArr
|
200
|
+
}}
|
201
|
+
selectBranchWithChildren={true}
|
202
|
+
onChange={() => false}
|
203
|
+
allowMultiple
|
204
|
+
kind={'asynchronous'}
|
205
|
+
searchOptions={(term, callback) => {
|
206
|
+
let newArr = itemArr.filter((item) => {
|
207
|
+
if (item.value
|
208
|
+
.toLowerCase().includes(term.toLowerCase())) {
|
209
|
+
return item;
|
210
|
+
}
|
211
|
+
})
|
212
|
+
return callback(newArr)
|
213
|
+
}}
|
214
|
+
/>
|
215
|
+
`}</Markup.ReactMarkupCode>
|
216
|
+
|
217
|
+
</Markup.ReactMarkup>
|
218
|
+
|
219
|
+
<p className='docs-page__paragraph'>TreeSelect with custom template.</p>
|
220
|
+
<Markup.ReactMarkup>
|
221
|
+
<Markup.ReactMarkupPreview>
|
222
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
223
|
+
<div className='form__row'>
|
224
|
+
<TreeSelect
|
225
|
+
getOptions={() => this.state.options}
|
226
|
+
kind={'synchronous'}
|
227
|
+
onChange={() => false}
|
228
|
+
optionTemplate={(item: any) => {
|
229
|
+
return <div>Label: {item}</div>
|
230
|
+
}}
|
231
|
+
valueTemplate={(item: any) => {
|
232
|
+
return <span>Label: {item}</span>
|
233
|
+
}}
|
234
|
+
/>
|
235
|
+
</div>
|
236
|
+
</div>
|
237
|
+
</Markup.ReactMarkupPreview>
|
238
|
+
|
239
|
+
<Markup.ReactMarkupCode>{`
|
240
|
+
<TreeSelect
|
241
|
+
getOptions={() => this.state.options}
|
242
|
+
kind={'synchronous'}
|
243
|
+
onChange={() => false}
|
244
|
+
optionTemplate={(item: any) => {
|
245
|
+
return <div>Label: {item}</div>
|
246
|
+
}}
|
247
|
+
valueTemplate={(item: any) => {
|
248
|
+
return <span>Label: {item}</span>
|
249
|
+
}}
|
250
|
+
/>
|
251
|
+
`}</Markup.ReactMarkupCode>
|
252
|
+
|
253
|
+
</Markup.ReactMarkup>
|
254
|
+
|
255
|
+
<h3 className="docs-page__h3">Props</h3>
|
256
|
+
<PropsList>
|
257
|
+
<Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
|
258
|
+
<Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
|
259
|
+
<Prop name='kind' isRequired={true} type='synchronous | asynchronous' default='/' description='Type of TreeSelect component.'/>
|
260
|
+
<Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
|
261
|
+
<Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
|
262
|
+
<Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
|
263
|
+
<Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
|
264
|
+
<Prop name='valueTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
|
265
|
+
<Prop name='optionTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
|
266
|
+
<Prop name='searchOptions' isRequired={false} type='function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
|
267
|
+
<Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
|
268
|
+
</PropsList>
|
269
|
+
|
270
|
+
</section>
|
271
|
+
)
|
272
|
+
}
|
273
|
+
}
|
@@ -0,0 +1,71 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import {TreeSelect} from 'superdesk-ui-framework/react';
|
3
|
+
import {ITreeNode} from 'superdesk-ui-framework/react/components/TreeSelect';
|
4
|
+
|
5
|
+
type IProps = {};
|
6
|
+
|
7
|
+
interface IVocabularyItem {
|
8
|
+
qcode: string;
|
9
|
+
name: string;
|
10
|
+
}
|
11
|
+
|
12
|
+
interface IState {
|
13
|
+
value: Array<IVocabularyItem>;
|
14
|
+
}
|
15
|
+
|
16
|
+
const source = [
|
17
|
+
{
|
18
|
+
'name': 'Article (news)',
|
19
|
+
'qcode': 'Article',
|
20
|
+
},
|
21
|
+
{
|
22
|
+
'name': 'Sidebar',
|
23
|
+
'qcode': 'Sidebar',
|
24
|
+
},
|
25
|
+
{
|
26
|
+
'name': 'Factbox',
|
27
|
+
'qcode': 'Factbox',
|
28
|
+
},
|
29
|
+
];
|
30
|
+
|
31
|
+
function searchOptions(
|
32
|
+
term: string,
|
33
|
+
callback: (res: Array<ITreeNode<{name: string; qcode: string;}>>) => void,
|
34
|
+
): void {
|
35
|
+
setTimeout(() => {
|
36
|
+
callback(
|
37
|
+
source
|
38
|
+
.filter((item) => item.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
|
39
|
+
.map((item) => ({value: item})),
|
40
|
+
);
|
41
|
+
}, 1000);
|
42
|
+
}
|
43
|
+
|
44
|
+
|
45
|
+
export class MultiSelectDemo extends React.PureComponent<IProps, IState> {
|
46
|
+
constructor(props: IProps) {
|
47
|
+
super(props);
|
48
|
+
|
49
|
+
this.state = {
|
50
|
+
value: [],
|
51
|
+
};
|
52
|
+
}
|
53
|
+
|
54
|
+
render() {
|
55
|
+
return (
|
56
|
+
<TreeSelect
|
57
|
+
kind="asynchronous"
|
58
|
+
searchOptions={searchOptions}
|
59
|
+
value={this.state.value}
|
60
|
+
onChange={(val) => {
|
61
|
+
this.setState({value: val});
|
62
|
+
}}
|
63
|
+
getLabel={({name}) => name}
|
64
|
+
getId={({qcode}) => qcode}
|
65
|
+
selectBranchWithChildren={false}
|
66
|
+
optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
|
67
|
+
allowMultiple={true}
|
68
|
+
/>
|
69
|
+
);
|
70
|
+
}
|
71
|
+
}
|
@@ -0,0 +1,59 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import {TreeSelect} from '../../../../app-typescript/components/TreeSelect';
|
3
|
+
|
4
|
+
interface IVocabularyItem {
|
5
|
+
name: string;
|
6
|
+
qcode: string;
|
7
|
+
}
|
8
|
+
|
9
|
+
const authorRoles: Array<IVocabularyItem> = [
|
10
|
+
{qcode: 'writer', name: 'Writer'},
|
11
|
+
{qcode: 'photographer', name: 'Photographer'},
|
12
|
+
{qcode: 'editor', name: 'Editor'},
|
13
|
+
];
|
14
|
+
|
15
|
+
type IProps = {};
|
16
|
+
|
17
|
+
interface IState {
|
18
|
+
selectedRoles: Array<IVocabularyItem>;
|
19
|
+
}
|
20
|
+
|
21
|
+
/**
|
22
|
+
* Same as example-1, only without option/value templates.
|
23
|
+
* Issues: initial value is shown as empty, crashes when opening dropdown
|
24
|
+
*/
|
25
|
+
export class Example2 extends React.PureComponent<IProps, IState> {
|
26
|
+
constructor(props: IProps) {
|
27
|
+
super(props);
|
28
|
+
|
29
|
+
this.state = {
|
30
|
+
selectedRoles: [
|
31
|
+
{qcode: 'writer', name: 'Writer'},
|
32
|
+
],
|
33
|
+
};
|
34
|
+
}
|
35
|
+
|
36
|
+
render() {
|
37
|
+
const {selectedRoles} = this.state;
|
38
|
+
|
39
|
+
return (
|
40
|
+
<div>
|
41
|
+
<TreeSelect
|
42
|
+
kind="synchronous"
|
43
|
+
getOptions={() => authorRoles.map((value) => ({value}))}
|
44
|
+
value={selectedRoles}
|
45
|
+
onChange={(val) => {
|
46
|
+
this.setState({selectedRoles: val.map((node) => node.value)});
|
47
|
+
|
48
|
+
// accessing qcodes should not cause TypeScript errors
|
49
|
+
val.forEach((node) => {
|
50
|
+
console.log(node.qcode);
|
51
|
+
})
|
52
|
+
}}
|
53
|
+
allowMultiple={true}
|
54
|
+
/>
|
55
|
+
</div>
|
56
|
+
);
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|