superdesk-ui-framework 3.0.1-beta.6 → 3.0.1-beta.8
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/fonts/sd_icons.eot +0 -0
- package/app/fonts/sd_icons.svg +14 -7
- package/app/fonts/sd_icons.ttf +0 -0
- package/app/fonts/sd_icons.woff +0 -0
- package/app/styles/_icon-font.scss +7 -0
- package/app/styles/_sd-tag-input.scss +1 -0
- package/app/styles/components/_sd-grid-item.scss +30 -16
- package/app/styles/components/_sd-searchbar.scss +7 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +1 -1
- package/app/styles/form-elements/_forms-general.scss +64 -5
- package/app/styles/form-elements/_inputs.scss +10 -0
- package/app/styles/grids/_grid-layout.scss +25 -1
- package/app/styles/layout/_basic-layout.scss +2 -2
- package/app/styles/layout/_editor.scss +4 -4
- package/app/styles/primereact/_pr-dropdown.scss +17 -1
- package/app-typescript/components/DurationInput.tsx +37 -4
- package/app-typescript/components/EmptyState.tsx +2 -1
- package/app-typescript/components/Form/FormRowNew.tsx +41 -0
- package/app-typescript/components/Form/index.tsx +1 -0
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +2 -1
- package/app-typescript/components/LeftMenu.tsx +127 -122
- package/app-typescript/components/Lists/TableList.tsx +146 -142
- package/app-typescript/components/SearchBar.tsx +28 -9
- package/app-typescript/components/TimePicker.tsx +2 -0
- package/app-typescript/index.ts +1 -0
- package/dist/examples.bundle.css +273 -0
- package/dist/examples.bundle.js +28927 -28750
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +120 -14
- package/dist/react/LeftNavigations.tsx +71 -44
- package/dist/react/MultiSelect.tsx +1 -1
- package/dist/react/TableList.tsx +84 -82
- package/dist/react/TimePicker.tsx +6 -4
- package/dist/react/TreeSelect.tsx +1 -1
- package/dist/sd_icons.eot +0 -0
- package/dist/sd_icons.svg +14 -7
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +976 -29
- package/dist/superdesk-ui.bundle.js +13975 -2089
- package/dist/vendor.bundle.js +23 -23
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +120 -14
- package/examples/pages/react/LeftNavigations.tsx +71 -44
- package/examples/pages/react/MultiSelect.tsx +1 -1
- package/examples/pages/react/TableList.tsx +84 -82
- package/examples/pages/react/TimePicker.tsx +6 -4
- package/examples/pages/react/TreeSelect.tsx +1 -1
- package/package.json +2 -1
- package/react/components/DurationInput.d.ts +2 -1
- package/react/components/DurationInput.js +36 -4
- package/react/components/EmptyState.d.ts +1 -0
- package/react/components/EmptyState.js +1 -1
- package/react/components/Form/FormRowNew.d.ts +12 -0
- package/react/components/Form/FormRowNew.js +67 -0
- package/react/components/Form/index.d.ts +1 -0
- package/react/components/Form/index.js +3 -1
- package/react/components/Layouts/AuthoringContainer.d.ts +1 -0
- package/react/components/Layouts/AuthoringContainer.js +1 -1
- package/react/components/LeftMenu.d.ts +3 -1
- package/react/components/LeftMenu.js +8 -1
- package/react/components/Lists/TableList.d.ts +42 -0
- package/react/components/Lists/TableList.js +145 -0
- package/react/components/SearchBar.d.ts +2 -1
- package/react/components/SearchBar.js +18 -2
- package/react/components/TimePicker.d.ts +1 -0
- package/react/components/TimePicker.js +1 -1
- package/react/index.d.ts +1 -0
- package/react/index.js +4 -1
@@ -8,7 +8,7 @@ interface IProps {
|
|
8
8
|
placeholder: string;
|
9
9
|
focused?: boolean;
|
10
10
|
boxed?: boolean;
|
11
|
-
onSubmit?(): void;
|
11
|
+
onSubmit?(value: string | number): void;
|
12
12
|
}
|
13
13
|
|
14
14
|
interface IState {
|
@@ -16,6 +16,7 @@ interface IState {
|
|
16
16
|
type: string;
|
17
17
|
focused: boolean;
|
18
18
|
boxed?: boolean;
|
19
|
+
keyDown?: boolean;
|
19
20
|
}
|
20
21
|
|
21
22
|
export class SearchBar extends React.PureComponent<IProps, IState> {
|
@@ -27,6 +28,7 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
|
|
27
28
|
focused: this.props.focused ? this.props.focused : false,
|
28
29
|
type: this.props.type ? this.props.type : 'expanded',
|
29
30
|
boxed: this.props.boxed ? this.props.boxed : false,
|
31
|
+
keyDown: false,
|
30
32
|
};
|
31
33
|
this.inputRef = React.createRef();
|
32
34
|
}
|
@@ -57,20 +59,37 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
|
|
57
59
|
<label className="sd-searchbar__icon"></label>
|
58
60
|
<input id="search-input"
|
59
61
|
ref={(input: any) => (input && this.props.focused) && input.focus()}
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
62
|
+
className="sd-searchbar__input"
|
63
|
+
type="text"
|
64
|
+
placeholder={this.props.placeholder}
|
65
|
+
value={this.state.inputValue}
|
66
|
+
onKeyPress={(event) => {
|
67
|
+
if (event.key === 'Enter') {
|
68
|
+
if (this.props.onSubmit) {
|
69
|
+
this.props.onSubmit(this.state.inputValue);
|
70
|
+
}
|
71
|
+
this.setState({keyDown: true});
|
72
|
+
}
|
73
|
+
}}
|
74
|
+
onKeyUp={(event) => {
|
75
|
+
if (event.key === 'Enter') {
|
76
|
+
this.setState({keyDown: false});
|
77
|
+
}
|
78
|
+
}}
|
79
|
+
onChange={(event) => this.setState({inputValue: event.target.value})}
|
80
|
+
onFocus={() => this.setState({focused: true})} />
|
66
81
|
{this.state.inputValue &&
|
67
82
|
<button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
|
68
83
|
<Icon name='remove-sign' />
|
69
84
|
</button>}
|
70
85
|
<button
|
71
86
|
id="sd-searchbar__search-btn"
|
72
|
-
className=
|
73
|
-
|
87
|
+
className={`sd-searchbar__search-btn ${this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''}`}
|
88
|
+
onClick={() => {
|
89
|
+
if (this.props.onSubmit) {
|
90
|
+
this.props.onSubmit(this.state.inputValue);
|
91
|
+
}
|
92
|
+
}}>
|
74
93
|
<Icon name='chevron-right-thin' />
|
75
94
|
</button>
|
76
95
|
</div>
|
@@ -6,6 +6,7 @@ import { InputWrapper } from './Form';
|
|
6
6
|
interface IProps {
|
7
7
|
value: string; // will output time as ISO8601 time string(e.g. 16:55) or an empty string if there's no value
|
8
8
|
onChange(valueNext: string): void;
|
9
|
+
allowSeconds?: boolean;
|
9
10
|
disabled?: boolean;
|
10
11
|
inlineLabel?: boolean;
|
11
12
|
required?: boolean;
|
@@ -49,6 +50,7 @@ export class TimePicker extends React.PureComponent<IProps, IState> {
|
|
49
50
|
id={this.htmlId}
|
50
51
|
aria-labelledby={this.htmlId + 'label'}
|
51
52
|
type="time"
|
53
|
+
step={this.props.allowSeconds ? 1 : undefined}
|
52
54
|
className="sd-input__input"
|
53
55
|
value={this.props.value}
|
54
56
|
required={this.props.required}
|
package/app-typescript/index.ts
CHANGED
@@ -88,6 +88,7 @@ export { Time } from './components/Text/Time';
|
|
88
88
|
export { Heading } from './components/Text/Heading';
|
89
89
|
export { BottomNav } from './components/Navigation/BottomNav';
|
90
90
|
export { TreeSelect } from './components/TreeSelect';
|
91
|
+
export { TableList, TableListItem } from './components/Lists/TableList';
|
91
92
|
export { ContentListItem } from './components/Lists/ContentList';
|
92
93
|
|
93
94
|
// declare non-typescript exports to prevent errors
|
package/dist/examples.bundle.css
CHANGED
@@ -10832,6 +10832,279 @@ doc-react-playground {
|
|
10832
10832
|
--icon-base-size: 64px
|
10833
10833
|
; }
|
10834
10834
|
|
10835
|
+
.icon-photo-cancel:before {
|
10836
|
+
content: ""; }
|
10837
|
+
|
10838
|
+
.icon-photo-cancel.color--default {
|
10839
|
+
color: var(--color-icon-default); }
|
10840
|
+
|
10841
|
+
.icon-photo-cancel.color--primary {
|
10842
|
+
color: var(--sd-colour-primary) !important; }
|
10843
|
+
|
10844
|
+
.icon-photo-cancel.color--success {
|
10845
|
+
color: var(--sd-colour-success) !important; }
|
10846
|
+
|
10847
|
+
.icon-photo-cancel.color--warning {
|
10848
|
+
color: var(--sd-colour-warning) !important; }
|
10849
|
+
|
10850
|
+
.icon-photo-cancel.color--alert {
|
10851
|
+
color: var(--sd-colour-alert) !important; }
|
10852
|
+
|
10853
|
+
.icon-photo-cancel.color--highlight {
|
10854
|
+
color: var(--sd-colour-highlight) !important; }
|
10855
|
+
|
10856
|
+
.icon-photo-cancel.color--light {
|
10857
|
+
color: var(--color-text-lighter) !important; }
|
10858
|
+
|
10859
|
+
.icon-photo-cancel.color--white {
|
10860
|
+
color: #e2e5e9 !important; }
|
10861
|
+
|
10862
|
+
.icon-photo-cancel.scale--2x {
|
10863
|
+
--icon-base-size: 32px
|
10864
|
+
; }
|
10865
|
+
|
10866
|
+
.icon-photo-cancel.scale--3x {
|
10867
|
+
--icon-base-size: 48px
|
10868
|
+
; }
|
10869
|
+
|
10870
|
+
.icon-photo-cancel.scale--4x {
|
10871
|
+
--icon-base-size: 64px
|
10872
|
+
; }
|
10873
|
+
|
10874
|
+
.icon-video-cancel:before {
|
10875
|
+
content: ""; }
|
10876
|
+
|
10877
|
+
.icon-video-cancel.color--default {
|
10878
|
+
color: var(--color-icon-default); }
|
10879
|
+
|
10880
|
+
.icon-video-cancel.color--primary {
|
10881
|
+
color: var(--sd-colour-primary) !important; }
|
10882
|
+
|
10883
|
+
.icon-video-cancel.color--success {
|
10884
|
+
color: var(--sd-colour-success) !important; }
|
10885
|
+
|
10886
|
+
.icon-video-cancel.color--warning {
|
10887
|
+
color: var(--sd-colour-warning) !important; }
|
10888
|
+
|
10889
|
+
.icon-video-cancel.color--alert {
|
10890
|
+
color: var(--sd-colour-alert) !important; }
|
10891
|
+
|
10892
|
+
.icon-video-cancel.color--highlight {
|
10893
|
+
color: var(--sd-colour-highlight) !important; }
|
10894
|
+
|
10895
|
+
.icon-video-cancel.color--light {
|
10896
|
+
color: var(--color-text-lighter) !important; }
|
10897
|
+
|
10898
|
+
.icon-video-cancel.color--white {
|
10899
|
+
color: #e2e5e9 !important; }
|
10900
|
+
|
10901
|
+
.icon-video-cancel.scale--2x {
|
10902
|
+
--icon-base-size: 32px
|
10903
|
+
; }
|
10904
|
+
|
10905
|
+
.icon-video-cancel.scale--3x {
|
10906
|
+
--icon-base-size: 48px
|
10907
|
+
; }
|
10908
|
+
|
10909
|
+
.icon-video-cancel.scale--4x {
|
10910
|
+
--icon-base-size: 64px
|
10911
|
+
; }
|
10912
|
+
|
10913
|
+
.icon-text-cancel:before {
|
10914
|
+
content: ""; }
|
10915
|
+
|
10916
|
+
.icon-text-cancel.color--default {
|
10917
|
+
color: var(--color-icon-default); }
|
10918
|
+
|
10919
|
+
.icon-text-cancel.color--primary {
|
10920
|
+
color: var(--sd-colour-primary) !important; }
|
10921
|
+
|
10922
|
+
.icon-text-cancel.color--success {
|
10923
|
+
color: var(--sd-colour-success) !important; }
|
10924
|
+
|
10925
|
+
.icon-text-cancel.color--warning {
|
10926
|
+
color: var(--sd-colour-warning) !important; }
|
10927
|
+
|
10928
|
+
.icon-text-cancel.color--alert {
|
10929
|
+
color: var(--sd-colour-alert) !important; }
|
10930
|
+
|
10931
|
+
.icon-text-cancel.color--highlight {
|
10932
|
+
color: var(--sd-colour-highlight) !important; }
|
10933
|
+
|
10934
|
+
.icon-text-cancel.color--light {
|
10935
|
+
color: var(--color-text-lighter) !important; }
|
10936
|
+
|
10937
|
+
.icon-text-cancel.color--white {
|
10938
|
+
color: #e2e5e9 !important; }
|
10939
|
+
|
10940
|
+
.icon-text-cancel.scale--2x {
|
10941
|
+
--icon-base-size: 32px
|
10942
|
+
; }
|
10943
|
+
|
10944
|
+
.icon-text-cancel.scale--3x {
|
10945
|
+
--icon-base-size: 48px
|
10946
|
+
; }
|
10947
|
+
|
10948
|
+
.icon-text-cancel.scale--4x {
|
10949
|
+
--icon-base-size: 64px
|
10950
|
+
; }
|
10951
|
+
|
10952
|
+
.icon-file-cancel:before {
|
10953
|
+
content: ""; }
|
10954
|
+
|
10955
|
+
.icon-file-cancel.color--default {
|
10956
|
+
color: var(--color-icon-default); }
|
10957
|
+
|
10958
|
+
.icon-file-cancel.color--primary {
|
10959
|
+
color: var(--sd-colour-primary) !important; }
|
10960
|
+
|
10961
|
+
.icon-file-cancel.color--success {
|
10962
|
+
color: var(--sd-colour-success) !important; }
|
10963
|
+
|
10964
|
+
.icon-file-cancel.color--warning {
|
10965
|
+
color: var(--sd-colour-warning) !important; }
|
10966
|
+
|
10967
|
+
.icon-file-cancel.color--alert {
|
10968
|
+
color: var(--sd-colour-alert) !important; }
|
10969
|
+
|
10970
|
+
.icon-file-cancel.color--highlight {
|
10971
|
+
color: var(--sd-colour-highlight) !important; }
|
10972
|
+
|
10973
|
+
.icon-file-cancel.color--light {
|
10974
|
+
color: var(--color-text-lighter) !important; }
|
10975
|
+
|
10976
|
+
.icon-file-cancel.color--white {
|
10977
|
+
color: #e2e5e9 !important; }
|
10978
|
+
|
10979
|
+
.icon-file-cancel.scale--2x {
|
10980
|
+
--icon-base-size: 32px
|
10981
|
+
; }
|
10982
|
+
|
10983
|
+
.icon-file-cancel.scale--3x {
|
10984
|
+
--icon-base-size: 48px
|
10985
|
+
; }
|
10986
|
+
|
10987
|
+
.icon-file-cancel.scale--4x {
|
10988
|
+
--icon-base-size: 64px
|
10989
|
+
; }
|
10990
|
+
|
10991
|
+
.icon-audio-cancel:before {
|
10992
|
+
content: ""; }
|
10993
|
+
|
10994
|
+
.icon-audio-cancel.color--default {
|
10995
|
+
color: var(--color-icon-default); }
|
10996
|
+
|
10997
|
+
.icon-audio-cancel.color--primary {
|
10998
|
+
color: var(--sd-colour-primary) !important; }
|
10999
|
+
|
11000
|
+
.icon-audio-cancel.color--success {
|
11001
|
+
color: var(--sd-colour-success) !important; }
|
11002
|
+
|
11003
|
+
.icon-audio-cancel.color--warning {
|
11004
|
+
color: var(--sd-colour-warning) !important; }
|
11005
|
+
|
11006
|
+
.icon-audio-cancel.color--alert {
|
11007
|
+
color: var(--sd-colour-alert) !important; }
|
11008
|
+
|
11009
|
+
.icon-audio-cancel.color--highlight {
|
11010
|
+
color: var(--sd-colour-highlight) !important; }
|
11011
|
+
|
11012
|
+
.icon-audio-cancel.color--light {
|
11013
|
+
color: var(--color-text-lighter) !important; }
|
11014
|
+
|
11015
|
+
.icon-audio-cancel.color--white {
|
11016
|
+
color: #e2e5e9 !important; }
|
11017
|
+
|
11018
|
+
.icon-audio-cancel.scale--2x {
|
11019
|
+
--icon-base-size: 32px
|
11020
|
+
; }
|
11021
|
+
|
11022
|
+
.icon-audio-cancel.scale--3x {
|
11023
|
+
--icon-base-size: 48px
|
11024
|
+
; }
|
11025
|
+
|
11026
|
+
.icon-audio-cancel.scale--4x {
|
11027
|
+
--icon-base-size: 64px
|
11028
|
+
; }
|
11029
|
+
|
11030
|
+
.icon-list-alt-cancel:before {
|
11031
|
+
content: ""; }
|
11032
|
+
|
11033
|
+
.icon-list-alt-cancel.color--default {
|
11034
|
+
color: var(--color-icon-default); }
|
11035
|
+
|
11036
|
+
.icon-list-alt-cancel.color--primary {
|
11037
|
+
color: var(--sd-colour-primary) !important; }
|
11038
|
+
|
11039
|
+
.icon-list-alt-cancel.color--success {
|
11040
|
+
color: var(--sd-colour-success) !important; }
|
11041
|
+
|
11042
|
+
.icon-list-alt-cancel.color--warning {
|
11043
|
+
color: var(--sd-colour-warning) !important; }
|
11044
|
+
|
11045
|
+
.icon-list-alt-cancel.color--alert {
|
11046
|
+
color: var(--sd-colour-alert) !important; }
|
11047
|
+
|
11048
|
+
.icon-list-alt-cancel.color--highlight {
|
11049
|
+
color: var(--sd-colour-highlight) !important; }
|
11050
|
+
|
11051
|
+
.icon-list-alt-cancel.color--light {
|
11052
|
+
color: var(--color-text-lighter) !important; }
|
11053
|
+
|
11054
|
+
.icon-list-alt-cancel.color--white {
|
11055
|
+
color: #e2e5e9 !important; }
|
11056
|
+
|
11057
|
+
.icon-list-alt-cancel.scale--2x {
|
11058
|
+
--icon-base-size: 32px
|
11059
|
+
; }
|
11060
|
+
|
11061
|
+
.icon-list-alt-cancel.scale--3x {
|
11062
|
+
--icon-base-size: 48px
|
11063
|
+
; }
|
11064
|
+
|
11065
|
+
.icon-list-alt-cancel.scale--4x {
|
11066
|
+
--icon-base-size: 64px
|
11067
|
+
; }
|
11068
|
+
|
11069
|
+
.icon-post-cancel:before {
|
11070
|
+
content: ""; }
|
11071
|
+
|
11072
|
+
.icon-post-cancel.color--default {
|
11073
|
+
color: var(--color-icon-default); }
|
11074
|
+
|
11075
|
+
.icon-post-cancel.color--primary {
|
11076
|
+
color: var(--sd-colour-primary) !important; }
|
11077
|
+
|
11078
|
+
.icon-post-cancel.color--success {
|
11079
|
+
color: var(--sd-colour-success) !important; }
|
11080
|
+
|
11081
|
+
.icon-post-cancel.color--warning {
|
11082
|
+
color: var(--sd-colour-warning) !important; }
|
11083
|
+
|
11084
|
+
.icon-post-cancel.color--alert {
|
11085
|
+
color: var(--sd-colour-alert) !important; }
|
11086
|
+
|
11087
|
+
.icon-post-cancel.color--highlight {
|
11088
|
+
color: var(--sd-colour-highlight) !important; }
|
11089
|
+
|
11090
|
+
.icon-post-cancel.color--light {
|
11091
|
+
color: var(--color-text-lighter) !important; }
|
11092
|
+
|
11093
|
+
.icon-post-cancel.color--white {
|
11094
|
+
color: #e2e5e9 !important; }
|
11095
|
+
|
11096
|
+
.icon-post-cancel.scale--2x {
|
11097
|
+
--icon-base-size: 32px
|
11098
|
+
; }
|
11099
|
+
|
11100
|
+
.icon-post-cancel.scale--3x {
|
11101
|
+
--icon-base-size: 48px
|
11102
|
+
; }
|
11103
|
+
|
11104
|
+
.icon-post-cancel.scale--4x {
|
11105
|
+
--icon-base-size: 64px
|
11106
|
+
; }
|
11107
|
+
|
10835
11108
|
.icn-mix {
|
10836
11109
|
position: relative;
|
10837
11110
|
display: inline-block;
|