superdesk-ui-framework 3.0.1-beta.7 → 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.
Files changed (52) hide show
  1. package/app/fonts/sd_icons.eot +0 -0
  2. package/app/fonts/sd_icons.svg +14 -7
  3. package/app/fonts/sd_icons.ttf +0 -0
  4. package/app/fonts/sd_icons.woff +0 -0
  5. package/app/styles/_icon-font.scss +7 -0
  6. package/app/styles/_sd-tag-input.scss +1 -0
  7. package/app/styles/components/_sd-grid-item.scss +30 -16
  8. package/app/styles/design-tokens/_design-tokens-general.scss +1 -1
  9. package/app/styles/form-elements/_forms-general.scss +64 -5
  10. package/app/styles/grids/_grid-layout.scss +25 -1
  11. package/app/styles/layout/_basic-layout.scss +2 -2
  12. package/app/styles/layout/_editor.scss +4 -4
  13. package/app-typescript/components/EmptyState.tsx +2 -1
  14. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  15. package/app-typescript/components/Form/index.tsx +1 -0
  16. package/app-typescript/components/Layouts/AuthoringContainer.tsx +2 -1
  17. package/app-typescript/components/LeftMenu.tsx +127 -122
  18. package/app-typescript/components/TimePicker.tsx +2 -0
  19. package/dist/examples.bundle.css +273 -0
  20. package/dist/examples.bundle.js +997 -875
  21. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
  22. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
  23. package/dist/playgrounds/react-playgrounds/TestGround.tsx +120 -14
  24. package/dist/react/LeftNavigations.tsx +71 -44
  25. package/dist/react/TimePicker.tsx +6 -4
  26. package/dist/react/TreeSelect.tsx +1 -1
  27. package/dist/sd_icons.eot +0 -0
  28. package/dist/sd_icons.svg +14 -7
  29. package/dist/sd_icons.ttf +0 -0
  30. package/dist/sd_icons.woff +0 -0
  31. package/dist/superdesk-ui.bundle.css +928 -24
  32. package/dist/superdesk-ui.bundle.js +617 -534
  33. package/dist/vendor.bundle.js +14 -14
  34. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
  35. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
  36. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +120 -14
  37. package/examples/pages/react/LeftNavigations.tsx +71 -44
  38. package/examples/pages/react/TimePicker.tsx +6 -4
  39. package/examples/pages/react/TreeSelect.tsx +1 -1
  40. package/package.json +1 -1
  41. package/react/components/EmptyState.d.ts +1 -0
  42. package/react/components/EmptyState.js +1 -1
  43. package/react/components/Form/FormRowNew.d.ts +12 -0
  44. package/react/components/Form/FormRowNew.js +67 -0
  45. package/react/components/Form/index.d.ts +1 -0
  46. package/react/components/Form/index.js +3 -1
  47. package/react/components/Layouts/AuthoringContainer.d.ts +1 -0
  48. package/react/components/Layouts/AuthoringContainer.js +1 -1
  49. package/react/components/LeftMenu.d.ts +3 -1
  50. package/react/components/LeftMenu.js +8 -1
  51. package/react/components/TimePicker.d.ts +1 -0
  52. package/react/components/TimePicker.js +1 -1
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+ var __extends = (this && this.__extends) || (function () {
3
+ var extendStatics = function (d, b) {
4
+ extendStatics = Object.setPrototypeOf ||
5
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6
+ function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
7
+ return extendStatics(d, b);
8
+ };
9
+ return function (d, b) {
10
+ if (typeof b !== "function" && b !== null)
11
+ throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
12
+ extendStatics(d, b);
13
+ function __() { this.constructor = d; }
14
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
15
+ };
16
+ })();
17
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
+ if (k2 === undefined) k2 = k;
19
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || function (mod) {
30
+ if (mod && mod.__esModule) return mod;
31
+ var result = {};
32
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
+ __setModuleDefault(result, mod);
34
+ return result;
35
+ };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
39
+ Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.FormRowNew = void 0;
41
+ var React = __importStar(require("react"));
42
+ var classnames_1 = __importDefault(require("classnames"));
43
+ var FormRowNew = /** @class */ (function (_super) {
44
+ __extends(FormRowNew, _super);
45
+ function FormRowNew() {
46
+ return _super !== null && _super.apply(this, arguments) || this;
47
+ }
48
+ FormRowNew.prototype.render = function () {
49
+ var _a;
50
+ var classes = (0, classnames_1.default)('form__group-new', (_a = {},
51
+ _a["form__group-new--".concat(this.props.spaces)] = this.props.spaces,
52
+ _a["form__group-new--mb-".concat(this.props.marginBottom)] = this.props.marginBottom,
53
+ _a['form__group-new--inline-labels'] = this.props.inlineLabels,
54
+ _a['form__group-new--has_row-label'] = this.props.rowLabel,
55
+ _a));
56
+ if (this.props.rowLabel) {
57
+ return (React.createElement("div", { className: 'form__group-new__wrapper' },
58
+ React.createElement("label", { className: 'form__group-new__label', htmlFor: "form__group-new__label" }, this.props.rowLabel),
59
+ React.createElement("div", { className: classes }, this.props.children)));
60
+ }
61
+ else {
62
+ return (React.createElement("div", { className: classes }, this.props.children));
63
+ }
64
+ };
65
+ return FormRowNew;
66
+ }(React.PureComponent));
67
+ exports.FormRowNew = FormRowNew;
@@ -6,3 +6,4 @@ export { FormLabel } from './FormLabel';
6
6
  export { InputWrapper } from './InputWrapper';
7
7
  export { InputBase } from './InputBase';
8
8
  export { InputNew } from './InputNew';
9
+ export { FormRowNew } from './FormRowNew';
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
3
+ exports.FormRowNew = exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
4
4
  var FormRow_1 = require("./FormRow");
5
5
  Object.defineProperty(exports, "FormRow", { enumerable: true, get: function () { return FormRow_1.FormRow; } });
6
6
  var FormGroup_1 = require("./FormGroup");
@@ -17,3 +17,5 @@ var InputBase_1 = require("./InputBase");
17
17
  Object.defineProperty(exports, "InputBase", { enumerable: true, get: function () { return InputBase_1.InputBase; } });
18
18
  var InputNew_1 = require("./InputNew");
19
19
  Object.defineProperty(exports, "InputNew", { enumerable: true, get: function () { return InputNew_1.InputNew; } });
20
+ var FormRowNew_1 = require("./FormRowNew");
21
+ Object.defineProperty(exports, "FormRowNew", { enumerable: true, get: function () { return FormRowNew_1.FormRowNew; } });
@@ -4,6 +4,7 @@ interface IProps {
4
4
  side?: 'left' | 'right';
5
5
  background?: 'transparent' | 'light' | 'grey' | 'dark';
6
6
  open?: boolean;
7
+ large?: boolean;
7
8
  }
8
9
  export declare class AuthoringContainer extends React.PureComponent<IProps> {
9
10
  render(): JSX.Element;
@@ -53,7 +53,7 @@ var AuthoringContainer = /** @class */ (function (_super) {
53
53
  _a['open-editor'] = this.props.open,
54
54
  _a));
55
55
  return (React.createElement("div", { className: classes },
56
- React.createElement("div", { className: 'sd-editor__container' }, this.props.children)));
56
+ React.createElement("div", { className: "sd-editor__container ".concat(this.props.large ? 'sd-editor__container--large' : '') }, this.props.children)));
57
57
  };
58
58
  return AuthoringContainer;
59
59
  }(React.PureComponent));
@@ -13,7 +13,8 @@ interface IMenuGroup {
13
13
  interface IMenu {
14
14
  className?: string;
15
15
  groups: Array<IMenuGroup>;
16
- activeItemId: string;
16
+ activeItemId?: string;
17
+ scrollTo?: string;
17
18
  ariaLabel?: string;
18
19
  scrollSpy?: string;
19
20
  offset?: number;
@@ -28,6 +29,7 @@ interface IState {
28
29
  export declare class LeftMenu extends React.PureComponent<IMenu, IState> {
29
30
  constructor(props: IMenu);
30
31
  handleClick(item: IMenuItem, event?: React.MouseEvent): void;
32
+ componentDidMount(): void;
31
33
  render(): JSX.Element;
32
34
  }
33
35
  export {};
@@ -55,7 +55,7 @@ var LeftMenu = /** @class */ (function (_super) {
55
55
  function LeftMenu(props) {
56
56
  var _this = _super.call(this, props) || this;
57
57
  _this.state = {
58
- active: "",
58
+ active: _this.props.activeItemId ? _this.props.activeItemId : '',
59
59
  };
60
60
  return _this;
61
61
  }
@@ -74,6 +74,13 @@ var LeftMenu = /** @class */ (function (_super) {
74
74
  }
75
75
  this.props.onSelect(item.id, item.route ? item.route : "");
76
76
  };
77
+ LeftMenu.prototype.componentDidMount = function () {
78
+ var _a;
79
+ if (this.props.scrollTo) {
80
+ return (_a = document
81
+ .getElementById(this.props.scrollTo)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: "nearest", behavior: "smooth" });
82
+ }
83
+ };
77
84
  LeftMenu.prototype.render = function () {
78
85
  var _a;
79
86
  var _this = this;
@@ -2,6 +2,7 @@ import * as React from 'react';
2
2
  interface IProps {
3
3
  value: string;
4
4
  onChange(valueNext: string): void;
5
+ allowSeconds?: boolean;
5
6
  disabled?: boolean;
6
7
  inlineLabel?: boolean;
7
8
  required?: boolean;
@@ -55,7 +55,7 @@ var TimePicker = /** @class */ (function (_super) {
55
55
  TimePicker.prototype.render = function () {
56
56
  var _this = this;
57
57
  return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
58
- React.createElement("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
58
+ React.createElement("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", step: this.props.allowSeconds ? 1 : undefined, className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
59
59
  _this.props.onChange(event.target.value);
60
60
  } })));
61
61
  };