superdesk-ui-framework 3.0.9 → 3.0.10

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 (8) hide show
  1. package/app-typescript/components/Select.tsx +22 -27
  2. package/dist/examples.bundle.js +24 -24
  3. package/dist/react/Selects.tsx +54 -64
  4. package/dist/superdesk-ui.bundle.js +3 -6
  5. package/examples/pages/react/Selects.tsx +54 -64
  6. package/package.json +1 -1
  7. package/react/components/Select.d.ts +0 -5
  8. package/react/components/Select.js +3 -6
package/app-typescript/components/Select.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- // import classNames from 'classnames';
3
2
  import nextId from "react-id-generator";
4
3
  import { InputWrapper } from './Form';
5
4
 
@@ -16,14 +15,9 @@ interface ISelect {
16
15
  tabindex?: number;
17
16
  fullWidth?: boolean;
18
17
  onChange(newValue: string): void;
19
- boxedStyle?: boolean;
20
- boxedLable?: boolean;
21
- placeholder?: string;
22
- size?: 'medium' | 'large' | 'x-large';
23
18
  }
24
19
 
25
20
  interface IState {
26
- value: string;
27
21
  invalid: boolean;
28
22
  }
29
23
 
@@ -33,7 +27,6 @@ class Select extends React.Component<ISelect, IState> {
33
27
  super(props);
34
28
 
35
29
  this.state = {
36
- value: this.props.value ?? '',
37
30
  invalid: this.props.invalid ?? false,
38
31
  };
39
32
 
@@ -41,32 +34,34 @@ class Select extends React.Component<ISelect, IState> {
41
34
  }
42
35
 
43
36
  handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
44
- this.setState({ value: event.target.value });
45
37
  this.props.onChange(event.target.value);
46
38
  }
47
39
 
48
40
  render() {
49
41
  return (
50
42
  <InputWrapper
51
- label={this.props.label}
52
- error={this.props.error}
53
- required={this.props.required}
54
- disabled={this.props.disabled}
55
- invalid={this.state.invalid}
56
- info={this.props.info}
57
- inlineLabel={this.props.inlineLabel}
58
- labelHidden={this.props.labelHidden}
59
- fullWidth={this.props.fullWidth}
60
- htmlId={this.htmlId}
61
- tabindex={this.props.tabindex}>
62
- <select className='sd-input__select'
63
- id={this.htmlId}
64
- value={this.state.value}
65
- aria-describedby={this.htmlId}
66
- tabIndex={this.props.tabindex}
67
- onChange={this.handleChange}
68
- disabled={this.props.disabled}>
69
- {this.props.children}
43
+ label={this.props.label}
44
+ error={this.props.error}
45
+ required={this.props.required}
46
+ disabled={this.props.disabled}
47
+ invalid={this.state.invalid}
48
+ info={this.props.info}
49
+ inlineLabel={this.props.inlineLabel}
50
+ labelHidden={this.props.labelHidden}
51
+ fullWidth={this.props.fullWidth}
52
+ htmlId={this.htmlId}
53
+ tabindex={this.props.tabindex}
54
+ >
55
+ <select
56
+ className='sd-input__select'
57
+ id={this.htmlId}
58
+ value={this.props.value}
59
+ aria-describedby={this.htmlId}
60
+ tabIndex={this.props.tabindex}
61
+ onChange={this.handleChange}
62
+ disabled={this.props.disabled}
63
+ >
64
+ {this.props.children}
70
65
  </select>
71
66
  </InputWrapper>
72
67
  );
package/dist/examples.bundle.js CHANGED
@@ -66440,29 +66440,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
66440
66440
  Object.defineProperty(exports, "__esModule", { value: true });
66441
66441
  exports.Option = exports.Select = void 0;
66442
66442
  var React = __importStar(__webpack_require__(0));
66443
- // import classNames from 'classnames';
66444
66443
  var react_id_generator_1 = __importDefault(__webpack_require__(7));
66445
66444
  var Form_1 = __webpack_require__(12);
66446
66445
  var Select = /** @class */ (function (_super) {
66447
66446
  __extends(Select, _super);
66448
66447
  function Select(props) {
66449
- var _a, _b;
66448
+ var _a;
66450
66449
  var _this = _super.call(this, props) || this;
66451
66450
  _this.htmlId = (0, react_id_generator_1.default)();
66452
66451
  _this.state = {
66453
- value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
66454
- invalid: (_b = _this.props.invalid) !== null && _b !== void 0 ? _b : false,
66452
+ invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
66455
66453
  };
66456
66454
  _this.handleChange = _this.handleChange.bind(_this);
66457
66455
  return _this;
66458
66456
  }
66459
66457
  Select.prototype.handleChange = function (event) {
66460
- this.setState({ value: event.target.value });
66461
66458
  this.props.onChange(event.target.value);
66462
66459
  };
66463
66460
  Select.prototype.render = function () {
66464
66461
  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 },
66465
- React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
66462
+ React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
66466
66463
  };
66467
66464
  return Select;
66468
66465
  }(React.Component));
@@ -127344,7 +127341,9 @@ var InputsDoc = /** @class */ (function (_super) {
127344
127341
  inlineLabel: false,
127345
127342
  required: true,
127346
127343
  disabled: false,
127347
- invalid: false
127344
+ invalid: false,
127345
+ value: '',
127346
+ value2: '',
127348
127347
  };
127349
127348
  return _this;
127350
127349
  }
@@ -127352,7 +127351,7 @@ var InputsDoc = /** @class */ (function (_super) {
127352
127351
  var _this = this;
127353
127352
  return (React.createElement("section", { className: 'docs-page__container' },
127354
127353
  React.createElement("h2", { className: 'docs-page__h2' }, "Select"),
127355
- React.createElement(Markup.ReactMarkupCodePreview, null, "\n <Select value={value} required={true}>\n <Option>Option 1</Option>\n <Option>Option 2</Option>\n </Select>\n "),
127354
+ React.createElement(Markup.ReactMarkupCodePreview, null, "\n <Select\n value={this.state.value}\n onChange={(value) => {\n this.setState({\n value: value,\n })\n }}\n >\n <Option>Option 1</Option>\n <Option>Option 2</Option>\n </Select>\n "),
127356
127355
  React.createElement("p", { className: 'docs-page__paragraph' }),
127357
127356
  React.createElement(Markup.ReactMarkup, null,
127358
127357
  React.createElement(Markup.ReactMarkupPreview, null,
@@ -127364,34 +127363,35 @@ var InputsDoc = /** @class */ (function (_super) {
127364
127363
  React.createElement(app_typescript_1.Checkbox, { checked: this.state.invalid, label: { text: 'Invalid input' }, onChange: function (value) { _this.setState({ invalid: value }); } }),
127365
127364
  React.createElement(app_typescript_1.Checkbox, { checked: this.state.inlineLabel, label: { text: 'Label positioned inline' }, onChange: function (value) { _this.setState({ inlineLabel: value }); } }))),
127366
127365
  React.createElement("div", { className: 'form__row' },
127367
- React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
127366
+ React.createElement(app_typescript_1.Select, { value: this.state.value, label: 'Select label', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) {
127367
+ _this.setState({
127368
+ value: value,
127369
+ });
127370
+ } },
127368
127371
  React.createElement(app_typescript_1.Option, null, "Option 1"),
127369
127372
  React.createElement(app_typescript_1.Option, null, "Option 2"))),
127370
127373
  React.createElement("p", { className: "docs-page__paragraph" }, "// Boxed with hidden label"),
127371
127374
  React.createElement("div", { className: 'form__row' },
127372
- React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', boxedStyle: true, labelHidden: true, error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
127373
- React.createElement(app_typescript_1.Option, null, "Option 1"),
127374
- React.createElement(app_typescript_1.Option, null, "Option 2"))),
127375
- React.createElement("div", { className: 'form__row' },
127376
- React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', boxedStyle: true, labelHidden: true, size: 'large', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
127377
- React.createElement(app_typescript_1.Option, null, "Option 1"),
127378
- React.createElement(app_typescript_1.Option, null, "Option 2"))),
127379
- React.createElement("div", { className: 'form__row' },
127380
- React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', boxedStyle: true, labelHidden: true, size: 'x-large', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
127375
+ React.createElement(app_typescript_1.Select, { value: this.state.value2, label: 'Select label', labelHidden: true, error: 'This is error message', info: 'This is some hint message', tabindex: 0, onChange: function (value) {
127376
+ _this.setState({
127377
+ value2: value,
127378
+ });
127379
+ } },
127381
127380
  React.createElement(app_typescript_1.Option, null, "Option 1"),
127382
127381
  React.createElement(app_typescript_1.Option, null, "Option 2"))))),
127383
- React.createElement(Markup.ReactMarkupCode, null, "\n <Select label='Select label'\n value='Option 2'\n error='This is error message'\n info='This is some hint message'\n inlineLabel={false}\n required={true}\n disabled={false}\n invalid={false}\n onChange={(value) => {}}>\n <Option value=\"option-1\">Option 1</option>\n <Option value=\"option-2\">Option 2</option>\n </Select>\n ")),
127382
+ React.createElement(Markup.ReactMarkupCode, null, "\n <Select\n value={this.state.value}\n label='Select label'\n error='This is error message'\n info='This is some hint message'\n inlineLabel={this.state.inlineLabel}\n required={this.state.required}\n disabled={this.state.disabled}\n invalid={this.state.invalid}\n tabindex={0}\n onChange={(value) => {\n this.setState({\n value: value,\n })\n }}\n >\n <Option>Option 1</Option>\n <Option>Option 2</Option>\n </Select>\n ")),
127384
127383
  React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
127385
127384
  React.createElement(app_typescript_1.PropsList, null,
127386
127385
  React.createElement(app_typescript_1.Prop, { name: 'value', isRequired: false, type: 'string', default: '/', description: 'Item value' }),
127387
- React.createElement(app_typescript_1.Prop, { name: 'label', isRequired: false, type: 'string', default: '/', description: 'Input label' }),
127388
- React.createElement(app_typescript_1.Prop, { name: 'info', isRequired: false, type: 'string', default: '/', description: 'Hint text' }),
127389
- React.createElement(app_typescript_1.Prop, { name: 'error', isRequired: false, type: 'string', default: '/', description: 'Error text' }),
127386
+ React.createElement(app_typescript_1.Prop, { name: 'label', isRequired: false, type: 'string', default: '/', description: 'Label of component' }),
127387
+ React.createElement(app_typescript_1.Prop, { name: 'info', isRequired: false, type: 'string', default: '/', description: 'Info message of component' }),
127388
+ React.createElement(app_typescript_1.Prop, { name: 'error', isRequired: false, type: 'string', default: '/', description: 'Error message of component' }),
127390
127389
  React.createElement(app_typescript_1.Prop, { name: 'inlineLabel', isRequired: false, type: 'boolean', default: 'false', description: 'Position labels as inline' }),
127391
127390
  React.createElement(app_typescript_1.Prop, { name: 'required', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as required' }),
127392
127391
  React.createElement(app_typescript_1.Prop, { name: 'disabled', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as disabled' }),
127393
127392
  React.createElement(app_typescript_1.Prop, { name: 'invalid', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as invalid' }),
127394
- React.createElement(app_typescript_1.Prop, { name: 'tabindex', isRequired: false, type: 'number', default: '/', description: 'Indicates an element can be focused on, and determines how that focus is handled.' }))));
127393
+ React.createElement(app_typescript_1.Prop, { name: 'tabindex', isRequired: false, type: 'number', default: '/', description: 'Indicates an element can be focused on, and determines how that focus is handled.' }),
127394
+ React.createElement(app_typescript_1.Prop, { name: 'onChange', isRequired: true, type: 'Function', default: '/', description: 'Callback to invoke when value changes.' }))));
127395
127395
  };
127396
127396
  return InputsDoc;
127397
127397
  }(React.Component));
@@ -139318,7 +139318,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
139318
139318
  /* 653 */
139319
139319
  /***/ (function(module, exports) {
139320
139320
 
139321
- module.exports = {"name":"superdesk-ui-framework","version":"3.0.9","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
139321
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.10","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
139322
139322
 
139323
139323
  /***/ }),
139324
139324
  /* 654 */
package/dist/react/Selects.tsx CHANGED
@@ -9,6 +9,8 @@ interface IState {
9
9
  required: boolean;
10
10
  disabled: boolean;
11
11
  invalid: boolean;
12
+ value: string;
13
+ value2: string;
12
14
  }
13
15
 
14
16
  export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +20,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
18
20
  inlineLabel: false,
19
21
  required: true,
20
22
  disabled: false,
21
- invalid: false
23
+ invalid: false,
24
+ value: '',
25
+ value2: '',
22
26
  }
23
27
  }
24
28
 
@@ -28,7 +32,14 @@ export default class InputsDoc extends React.Component<{}, IState> {
28
32
 
29
33
  <h2 className='docs-page__h2'>Select</h2>
30
34
  <Markup.ReactMarkupCodePreview>{`
31
- <Select value={value} required={true}>
35
+ <Select
36
+ value={this.state.value}
37
+ onChange={(value) => {
38
+ this.setState({
39
+ value: value,
40
+ })
41
+ }}
42
+ >
32
43
  <Option>Option 1</Option>
33
44
  <Option>Option 2</Option>
34
45
  </Select>
@@ -48,8 +59,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
48
59
  </div>
49
60
 
50
61
  <div className='form__row'>
51
- <Select label='Select label'
52
- value='Option 2'
62
+ <Select
63
+ value={this.state.value}
64
+ label='Select label'
53
65
  error='This is error message'
54
66
  info='This is some hint message'
55
67
  inlineLabel={this.state.inlineLabel}
@@ -57,7 +69,12 @@ export default class InputsDoc extends React.Component<{}, IState> {
57
69
  disabled={this.state.disabled}
58
70
  invalid={this.state.invalid}
59
71
  tabindex={0}
60
- onChange={(value) => { console.log(value) }}>
72
+ onChange={(value) => {
73
+ this.setState({
74
+ value: value,
75
+ })
76
+ }}
77
+ >
61
78
  <Option>Option 1</Option>
62
79
  <Option>Option 2</Option>
63
80
  </Select>
@@ -65,73 +82,45 @@ export default class InputsDoc extends React.Component<{}, IState> {
65
82
 
66
83
  <p className="docs-page__paragraph">// Boxed with hidden label</p>
67
84
  <div className='form__row'>
68
- <Select label='Select label'
69
- value='Option 2'
70
- boxedStyle
85
+ <Select
86
+ value={this.state.value2}
87
+ label='Select label'
71
88
  labelHidden
72
89
  error='This is error message'
73
90
  info='This is some hint message'
74
- inlineLabel={this.state.inlineLabel}
75
- required={this.state.required}
76
- disabled={this.state.disabled}
77
- invalid={this.state.invalid}
78
91
  tabindex={0}
79
- onChange={(value) => { console.log(value) }}>
80
- <Option>Option 1</Option>
81
- <Option>Option 2</Option>
92
+ onChange={(value) => {
93
+ this.setState({
94
+ value2: value,
95
+ })
96
+ }}
97
+ >
98
+ <Option>Option 1</Option>
99
+ <Option>Option 2</Option>
82
100
  </Select>
83
- </div>
84
- <div className='form__row'>
85
- <Select label='Select label'
86
- value='Option 2'
87
- boxedStyle
88
- labelHidden
89
- size='large'
90
- error='This is error message'
91
- info='This is some hint message'
92
- inlineLabel={this.state.inlineLabel}
93
- required={this.state.required}
94
- disabled={this.state.disabled}
95
- invalid={this.state.invalid}
96
- tabindex={0}
97
- onChange={(value) => { console.log(value) }}>
98
- <Option>Option 1</Option>
99
- <Option>Option 2</Option>
100
- </Select>
101
- </div>
102
- <div className='form__row'>
103
- <Select label='Select label'
104
- value='Option 2'
105
- boxedStyle
106
- labelHidden
107
- size='x-large'
108
- error='This is error message'
109
- info='This is some hint message'
110
- inlineLabel={this.state.inlineLabel}
111
- required={this.state.required}
112
- disabled={this.state.disabled}
113
- invalid={this.state.invalid}
114
- tabindex={0}
115
- onChange={(value) => { console.log(value) }}>
116
- <Option>Option 1</Option>
117
- <Option>Option 2</Option>
118
- </Select>
119
- </div>
101
+ </div>
120
102
  </div>
121
103
 
122
104
  </Markup.ReactMarkupPreview>
123
105
  <Markup.ReactMarkupCode>{`
124
- <Select label='Select label'
125
- value='Option 2'
106
+ <Select
107
+ value={this.state.value}
108
+ label='Select label'
126
109
  error='This is error message'
127
110
  info='This is some hint message'
128
- inlineLabel={false}
129
- required={true}
130
- disabled={false}
131
- invalid={false}
132
- onChange={(value) => {}}>
133
- <Option value="option-1">Option 1</option>
134
- <Option value="option-2">Option 2</option>
111
+ inlineLabel={this.state.inlineLabel}
112
+ required={this.state.required}
113
+ disabled={this.state.disabled}
114
+ invalid={this.state.invalid}
115
+ tabindex={0}
116
+ onChange={(value) => {
117
+ this.setState({
118
+ value: value,
119
+ })
120
+ }}
121
+ >
122
+ <Option>Option 1</Option>
123
+ <Option>Option 2</Option>
135
124
  </Select>
136
125
  `}</Markup.ReactMarkupCode>
137
126
  </Markup.ReactMarkup>
@@ -139,14 +128,15 @@ export default class InputsDoc extends React.Component<{}, IState> {
139
128
  <h3 className='docs-page__h3'>Props</h3>
140
129
  <PropsList>
141
130
  <Prop name='value' isRequired={false} type='string' default='/' description='Item value' />
142
- <Prop name='label' isRequired={false} type='string' default='/' description='Input label' />
143
- <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
144
- <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
131
+ <Prop name='label' isRequired={false} type='string' default='/' description='Label of component' />
132
+ <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component' />
133
+ <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component' />
145
134
  <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
146
135
  <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
147
136
  <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
148
137
  <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
149
138
  <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
139
+ <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
150
140
  </PropsList>
151
141
  </section>
152
142
  )
package/dist/superdesk-ui.bundle.js CHANGED
@@ -65701,29 +65701,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
65701
65701
  Object.defineProperty(exports, "__esModule", { value: true });
65702
65702
  exports.Option = exports.Select = void 0;
65703
65703
  var React = __importStar(__webpack_require__(0));
65704
- // import classNames from 'classnames';
65705
65704
  var react_id_generator_1 = __importDefault(__webpack_require__(7));
65706
65705
  var Form_1 = __webpack_require__(12);
65707
65706
  var Select = /** @class */ (function (_super) {
65708
65707
  __extends(Select, _super);
65709
65708
  function Select(props) {
65710
- var _a, _b;
65709
+ var _a;
65711
65710
  var _this = _super.call(this, props) || this;
65712
65711
  _this.htmlId = (0, react_id_generator_1.default)();
65713
65712
  _this.state = {
65714
- value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
65715
- invalid: (_b = _this.props.invalid) !== null && _b !== void 0 ? _b : false,
65713
+ invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
65716
65714
  };
65717
65715
  _this.handleChange = _this.handleChange.bind(_this);
65718
65716
  return _this;
65719
65717
  }
65720
65718
  Select.prototype.handleChange = function (event) {
65721
- this.setState({ value: event.target.value });
65722
65719
  this.props.onChange(event.target.value);
65723
65720
  };
65724
65721
  Select.prototype.render = function () {
65725
65722
  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 },
65726
- React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
65723
+ React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
65727
65724
  };
65728
65725
  return Select;
65729
65726
  }(React.Component));
package/examples/pages/react/Selects.tsx CHANGED
@@ -9,6 +9,8 @@ interface IState {
9
9
  required: boolean;
10
10
  disabled: boolean;
11
11
  invalid: boolean;
12
+ value: string;
13
+ value2: string;
12
14
  }
13
15
 
14
16
  export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +20,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
18
20
  inlineLabel: false,
19
21
  required: true,
20
22
  disabled: false,
21
- invalid: false
23
+ invalid: false,
24
+ value: '',
25
+ value2: '',
22
26
  }
23
27
  }
24
28
 
@@ -28,7 +32,14 @@ export default class InputsDoc extends React.Component<{}, IState> {
28
32
 
29
33
  <h2 className='docs-page__h2'>Select</h2>
30
34
  <Markup.ReactMarkupCodePreview>{`
31
- <Select value={value} required={true}>
35
+ <Select
36
+ value={this.state.value}
37
+ onChange={(value) => {
38
+ this.setState({
39
+ value: value,
40
+ })
41
+ }}
42
+ >
32
43
  <Option>Option 1</Option>
33
44
  <Option>Option 2</Option>
34
45
  </Select>
@@ -48,8 +59,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
48
59
  </div>
49
60
 
50
61
  <div className='form__row'>
51
- <Select label='Select label'
52
- value='Option 2'
62
+ <Select
63
+ value={this.state.value}
64
+ label='Select label'
53
65
  error='This is error message'
54
66
  info='This is some hint message'
55
67
  inlineLabel={this.state.inlineLabel}
@@ -57,7 +69,12 @@ export default class InputsDoc extends React.Component<{}, IState> {
57
69
  disabled={this.state.disabled}
58
70
  invalid={this.state.invalid}
59
71
  tabindex={0}
60
- onChange={(value) => { console.log(value) }}>
72
+ onChange={(value) => {
73
+ this.setState({
74
+ value: value,
75
+ })
76
+ }}
77
+ >
61
78
  <Option>Option 1</Option>
62
79
  <Option>Option 2</Option>
63
80
  </Select>
@@ -65,73 +82,45 @@ export default class InputsDoc extends React.Component<{}, IState> {
65
82
 
66
83
  <p className="docs-page__paragraph">// Boxed with hidden label</p>
67
84
  <div className='form__row'>
68
- <Select label='Select label'
69
- value='Option 2'
70
- boxedStyle
85
+ <Select
86
+ value={this.state.value2}
87
+ label='Select label'
71
88
  labelHidden
72
89
  error='This is error message'
73
90
  info='This is some hint message'
74
- inlineLabel={this.state.inlineLabel}
75
- required={this.state.required}
76
- disabled={this.state.disabled}
77
- invalid={this.state.invalid}
78
91
  tabindex={0}
79
- onChange={(value) => { console.log(value) }}>
80
- <Option>Option 1</Option>
81
- <Option>Option 2</Option>
92
+ onChange={(value) => {
93
+ this.setState({
94
+ value2: value,
95
+ })
96
+ }}
97
+ >
98
+ <Option>Option 1</Option>
99
+ <Option>Option 2</Option>
82
100
  </Select>
83
- </div>
84
- <div className='form__row'>
85
- <Select label='Select label'
86
- value='Option 2'
87
- boxedStyle
88
- labelHidden
89
- size='large'
90
- error='This is error message'
91
- info='This is some hint message'
92
- inlineLabel={this.state.inlineLabel}
93
- required={this.state.required}
94
- disabled={this.state.disabled}
95
- invalid={this.state.invalid}
96
- tabindex={0}
97
- onChange={(value) => { console.log(value) }}>
98
- <Option>Option 1</Option>
99
- <Option>Option 2</Option>
100
- </Select>
101
- </div>
102
- <div className='form__row'>
103
- <Select label='Select label'
104
- value='Option 2'
105
- boxedStyle
106
- labelHidden
107
- size='x-large'
108
- error='This is error message'
109
- info='This is some hint message'
110
- inlineLabel={this.state.inlineLabel}
111
- required={this.state.required}
112
- disabled={this.state.disabled}
113
- invalid={this.state.invalid}
114
- tabindex={0}
115
- onChange={(value) => { console.log(value) }}>
116
- <Option>Option 1</Option>
117
- <Option>Option 2</Option>
118
- </Select>
119
- </div>
101
+ </div>
120
102
  </div>
121
103
 
122
104
  </Markup.ReactMarkupPreview>
123
105
  <Markup.ReactMarkupCode>{`
124
- <Select label='Select label'
125
- value='Option 2'
106
+ <Select
107
+ value={this.state.value}
108
+ label='Select label'
126
109
  error='This is error message'
127
110
  info='This is some hint message'
128
- inlineLabel={false}
129
- required={true}
130
- disabled={false}
131
- invalid={false}
132
- onChange={(value) => {}}>
133
- <Option value="option-1">Option 1</option>
134
- <Option value="option-2">Option 2</option>
111
+ inlineLabel={this.state.inlineLabel}
112
+ required={this.state.required}
113
+ disabled={this.state.disabled}
114
+ invalid={this.state.invalid}
115
+ tabindex={0}
116
+ onChange={(value) => {
117
+ this.setState({
118
+ value: value,
119
+ })
120
+ }}
121
+ >
122
+ <Option>Option 1</Option>
123
+ <Option>Option 2</Option>
135
124
  </Select>
136
125
  `}</Markup.ReactMarkupCode>
137
126
  </Markup.ReactMarkup>
@@ -139,14 +128,15 @@ export default class InputsDoc extends React.Component<{}, IState> {
139
128
  <h3 className='docs-page__h3'>Props</h3>
140
129
  <PropsList>
141
130
  <Prop name='value' isRequired={false} type='string' default='/' description='Item value' />
142
- <Prop name='label' isRequired={false} type='string' default='/' description='Input label' />
143
- <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
144
- <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
131
+ <Prop name='label' isRequired={false} type='string' default='/' description='Label of component' />
132
+ <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component' />
133
+ <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component' />
145
134
  <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
146
135
  <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
147
136
  <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
148
137
  <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
149
138
  <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
139
+ <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
150
140
  </PropsList>
151
141
  </section>
152
142
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.9",
3
+ "version": "3.0.10",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/Select.d.ts CHANGED
@@ -12,13 +12,8 @@ interface ISelect {
12
12
  tabindex?: number;
13
13
  fullWidth?: boolean;
14
14
  onChange(newValue: string): void;
15
- boxedStyle?: boolean;
16
- boxedLable?: boolean;
17
- placeholder?: string;
18
- size?: 'medium' | 'large' | 'x-large';
19
15
  }
20
16
  interface IState {
21
- value: string;
22
17
  invalid: boolean;
23
18
  }
24
19
  declare class Select extends React.Component<ISelect, IState> {
package/react/components/Select.js CHANGED
@@ -39,29 +39,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
40
  exports.Option = exports.Select = void 0;
41
41
  var React = __importStar(require("react"));
42
- // import classNames from 'classnames';
43
42
  var react_id_generator_1 = __importDefault(require("react-id-generator"));
44
43
  var Form_1 = require("./Form");
45
44
  var Select = /** @class */ (function (_super) {
46
45
  __extends(Select, _super);
47
46
  function Select(props) {
48
- var _a, _b;
47
+ var _a;
49
48
  var _this = _super.call(this, props) || this;
50
49
  _this.htmlId = (0, react_id_generator_1.default)();
51
50
  _this.state = {
52
- value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
53
- invalid: (_b = _this.props.invalid) !== null && _b !== void 0 ? _b : false,
51
+ invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
54
52
  };
55
53
  _this.handleChange = _this.handleChange.bind(_this);
56
54
  return _this;
57
55
  }
58
56
  Select.prototype.handleChange = function (event) {
59
- this.setState({ value: event.target.value });
60
57
  this.props.onChange(event.target.value);
61
58
  };
62
59
  Select.prototype.render = function () {
63
60
  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 },
64
- React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
61
+ React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
65
62
  };
66
63
  return Select;
67
64
  }(React.Component));