superdesk-ui-framework 3.0.11 → 3.0.12
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-typescript/components/Switch.tsx +37 -23
- package/dist/examples.bundle.js +40 -29
- package/dist/react/Switch.tsx +32 -15
- package/dist/superdesk-ui.bundle.js +13 -13
- package/examples/pages/react/Switch.tsx +32 -15
- package/package.json +1 -1
- package/react/components/Switch.d.ts +6 -5
- package/react/components/Switch.js +13 -13
|
@@ -3,12 +3,14 @@ import classNames from 'classnames';
|
|
|
3
3
|
import nextId from "react-id-generator";
|
|
4
4
|
import { Tooltip } from './Tooltip';
|
|
5
5
|
|
|
6
|
+
interface ILabel {
|
|
7
|
+
content: string | ((id: string) => React.ReactNode);
|
|
8
|
+
side?: 'left' | 'right'; // defaults to 'right'
|
|
9
|
+
hidden?: boolean;
|
|
10
|
+
}
|
|
11
|
+
|
|
6
12
|
interface IProps {
|
|
7
|
-
label:
|
|
8
|
-
text: string,
|
|
9
|
-
side?: 'left' | 'right', // defaults to 'right'
|
|
10
|
-
hidden?: boolean,
|
|
11
|
-
};
|
|
13
|
+
label: ILabel;
|
|
12
14
|
value: boolean;
|
|
13
15
|
disabled?: boolean;
|
|
14
16
|
toolTipFlow?: 'top' | 'left' | 'right' | 'down';
|
|
@@ -19,6 +21,7 @@ interface IProps {
|
|
|
19
21
|
export class Switch extends React.PureComponent<IProps> {
|
|
20
22
|
constructor(props: IProps) {
|
|
21
23
|
super(props);
|
|
24
|
+
|
|
22
25
|
this.onClick = this.onClick.bind(this);
|
|
23
26
|
}
|
|
24
27
|
|
|
@@ -38,33 +41,44 @@ export class Switch extends React.PureComponent<IProps> {
|
|
|
38
41
|
'disabled': this.props.disabled,
|
|
39
42
|
});
|
|
40
43
|
|
|
41
|
-
|
|
44
|
+
const checkboxInput = (
|
|
45
|
+
<span
|
|
46
|
+
role="checkbox"
|
|
47
|
+
id={this.htmlId}
|
|
48
|
+
className={classes}
|
|
49
|
+
aria-checked={this.props.value}
|
|
50
|
+
aria-disabled={this.props.disabled}
|
|
51
|
+
tabIndex={0}
|
|
52
|
+
onClick={this.onClick}
|
|
53
|
+
>
|
|
54
|
+
<span className="inner" />
|
|
55
|
+
</span>
|
|
56
|
+
);
|
|
57
|
+
|
|
58
|
+
// if external label is used it can't be hidden
|
|
59
|
+
if (this.props.label.hidden && typeof this.props.label.content === 'string') {
|
|
42
60
|
return (
|
|
43
|
-
<Tooltip
|
|
61
|
+
<Tooltip
|
|
62
|
+
text={this.props.label.content}
|
|
44
63
|
flow={this.props.toolTipFlow}
|
|
45
|
-
appendToBody={this.props.toolTipAppend}
|
|
64
|
+
appendToBody={this.props.toolTipAppend}
|
|
65
|
+
>
|
|
46
66
|
<span className="sd-switch__wrapper" tabIndex={-1}>
|
|
47
|
-
{
|
|
48
|
-
|
|
49
|
-
<span id={this.htmlId} role="checkbox" className={classes} aria-checked={this.props.value}
|
|
50
|
-
aria-disabled={this.props.disabled} onClick={this.onClick} tabIndex={0}>
|
|
51
|
-
<span className="inner" />
|
|
52
|
-
</span>
|
|
53
|
-
<label className='a11y-only' htmlFor={this.htmlId}>{this.props.label.text}</label>
|
|
67
|
+
{checkboxInput}
|
|
68
|
+
<label className='a11y-only' htmlFor={this.htmlId}>{this.props.label.content}</label>
|
|
54
69
|
</span>
|
|
55
70
|
</Tooltip>
|
|
56
71
|
);
|
|
57
72
|
} else {
|
|
73
|
+
const labelContent = typeof this.props.label.content === 'string'
|
|
74
|
+
? <label htmlFor={this.htmlId}>{this.props.label.content}</label>
|
|
75
|
+
: this.props.label.content(this.htmlId);
|
|
76
|
+
|
|
58
77
|
return (
|
|
59
78
|
<span className="sd-switch__wrapper" tabIndex={-1}>
|
|
60
|
-
{this.props.label
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
aria-disabled={this.props.disabled} onClick={this.onClick} tabIndex={0}>
|
|
64
|
-
<span className="inner" />
|
|
65
|
-
</span>
|
|
66
|
-
{this.props.label && this.props.label.side !== 'left' ?
|
|
67
|
-
<label htmlFor={this.htmlId}>{this.props.label.text}</label> : null}
|
|
79
|
+
{this.props.label.side === 'left' ? labelContent : null}
|
|
80
|
+
{checkboxInput}
|
|
81
|
+
{this.props.label.side !== 'left' ? labelContent : null}
|
|
68
82
|
</span>
|
|
69
83
|
);
|
|
70
84
|
}
|
package/dist/examples.bundle.js
CHANGED
|
@@ -75840,23 +75840,23 @@ var Switch = /** @class */ (function (_super) {
|
|
|
75840
75840
|
'checked': this.props.value,
|
|
75841
75841
|
'disabled': this.props.disabled,
|
|
75842
75842
|
});
|
|
75843
|
-
|
|
75844
|
-
|
|
75843
|
+
var checkboxInput = (React.createElement("span", { role: "checkbox", id: this.htmlId, className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, tabIndex: 0, onClick: this.onClick },
|
|
75844
|
+
React.createElement("span", { className: "inner" })));
|
|
75845
|
+
// if external label is used it can't be hidden
|
|
75846
|
+
if (this.props.label.hidden && typeof this.props.label.content === 'string') {
|
|
75847
|
+
return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.content, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
|
|
75845
75848
|
React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
|
|
75846
|
-
|
|
75847
|
-
|
|
75848
|
-
React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
|
|
75849
|
-
React.createElement("span", { className: "inner" })),
|
|
75850
|
-
React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.text))));
|
|
75849
|
+
checkboxInput,
|
|
75850
|
+
React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.content))));
|
|
75851
75851
|
}
|
|
75852
75852
|
else {
|
|
75853
|
+
var labelContent = typeof this.props.label.content === 'string'
|
|
75854
|
+
? React.createElement("label", { htmlFor: this.htmlId }, this.props.label.content)
|
|
75855
|
+
: this.props.label.content(this.htmlId);
|
|
75853
75856
|
return (React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
|
|
75854
|
-
this.props.label
|
|
75855
|
-
|
|
75856
|
-
|
|
75857
|
-
React.createElement("span", { className: "inner" })),
|
|
75858
|
-
this.props.label && this.props.label.side !== 'left' ?
|
|
75859
|
-
React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null));
|
|
75857
|
+
this.props.label.side === 'left' ? labelContent : null,
|
|
75858
|
+
checkboxInput,
|
|
75859
|
+
this.props.label.side !== 'left' ? labelContent : null));
|
|
75860
75860
|
}
|
|
75861
75861
|
};
|
|
75862
75862
|
return Switch;
|
|
@@ -130260,6 +130260,7 @@ var SwitchDoc = /** @class */ (function (_super) {
|
|
|
130260
130260
|
value9: false,
|
|
130261
130261
|
value10: true,
|
|
130262
130262
|
value11: false,
|
|
130263
|
+
value12: false,
|
|
130263
130264
|
};
|
|
130264
130265
|
return _this;
|
|
130265
130266
|
}
|
|
@@ -130273,15 +130274,18 @@ var SwitchDoc = /** @class */ (function (_super) {
|
|
|
130273
130274
|
React.createElement(Markup.ReactMarkupPreview, null,
|
|
130274
130275
|
React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// Label on the right (default)"),
|
|
130275
130276
|
React.createElement("div", { className: "form__row" },
|
|
130276
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130277
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Switch label right' }, value: this.state.value1, onChange: function (value) { return _this.setState(function () { return ({ value1: value }); }); } })),
|
|
130277
130278
|
React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// Labels on the left"),
|
|
130278
130279
|
React.createElement("p", { className: "docs-page__paragraph--small" }, "This option should be used only in cases when the switch is aligned to the right."),
|
|
130279
130280
|
React.createElement("div", { className: "form__row" },
|
|
130280
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130281
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Label on left', side: 'left' }, value: this.state.value2, onChange: function (value) { return _this.setState(function () { return ({ value2: value }); }); } })),
|
|
130281
130282
|
React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// Disabled"),
|
|
130282
130283
|
React.createElement("div", { className: "form__row" },
|
|
130283
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130284
|
-
|
|
130284
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Label on right with disabled state' }, value: this.state.value3, onChange: function (value) { return _this.setState(function () { return ({ value3: value }); }); }, disabled: true })),
|
|
130285
|
+
React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// External label"),
|
|
130286
|
+
React.createElement("div", { className: "form__row" },
|
|
130287
|
+
React.createElement(app_typescript_1.Switch, { label: { content: function () { return React.createElement("label", null, "External label"); } }, value: this.state.value12, onChange: function (value) { return _this.setState(function () { return ({ value12: value }); }); } }))),
|
|
130288
|
+
React.createElement(Markup.ReactMarkupCode, null, "\n // Label on the right (default)\n <Switch label={{text:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />\n \n // Labels on the left\n <Switch label={{text:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />\n\n // Disabled\n <Switch label={{text:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled={true} />\n\n // External label\n <Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />\n ")),
|
|
130285
130289
|
React.createElement("h3", { className: "docs-page__h3" }, "Switch groups"),
|
|
130286
130290
|
React.createElement("p", { className: "docs-page__paragraph" },
|
|
130287
130291
|
React.createElement("code", null, "SwitchGroup"),
|
|
@@ -130297,9 +130301,9 @@ var SwitchDoc = /** @class */ (function (_super) {
|
|
|
130297
130301
|
React.createElement("p", { className: "docs-page__paragraph" }, "// Vertical group (default)"),
|
|
130298
130302
|
React.createElement("div", { className: 'form__row' },
|
|
130299
130303
|
React.createElement(app_typescript_1.SwitchGroup, null,
|
|
130300
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130301
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130302
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130304
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 1' }, value: this.state.value6, onChange: function (value) { return _this.setState(function () { return ({ value6: value }); }); } }),
|
|
130305
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 2' }, value: this.state.value7, onChange: function (value) { return _this.setState(function () { return ({ value7: value }); }); } }),
|
|
130306
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 3' }, value: this.state.value8, onChange: function (value) { return _this.setState(function () { return ({ value8: value }); }); } }))),
|
|
130303
130307
|
React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// Vertical group with labels on the left"),
|
|
130304
130308
|
React.createElement("p", { className: "docs-page__paragraph--small" },
|
|
130305
130309
|
"This option should be used only in special cases and inside containers not wider than 400 pixels ",
|
|
@@ -130307,24 +130311,31 @@ var SwitchDoc = /** @class */ (function (_super) {
|
|
|
130307
130311
|
"(e.g. menus, narrow modals or dialouges etc.). It should be used only in the combination with the labels on th eleft."),
|
|
130308
130312
|
React.createElement("div", { className: 'form__row docs-page__test-helper-2', style: { width: '320px' } },
|
|
130309
130313
|
React.createElement(app_typescript_1.SwitchGroup, { align: 'right' },
|
|
130310
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130311
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130312
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130314
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 1', side: 'left' }, value: this.state.value9, onChange: function (value) { return _this.setState(function () { return ({ value9: value }); }); } }),
|
|
130315
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 2', side: 'left' }, value: this.state.value10, onChange: function (value) { return _this.setState(function () { return ({ value10: value }); }); } }),
|
|
130316
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 3', side: 'left' }, value: this.state.value11, onChange: function (value) { return _this.setState(function () { return ({ value11: value }); }); } }))),
|
|
130313
130317
|
React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// Horizontal group"),
|
|
130314
130318
|
React.createElement("p", { className: "docs-page__paragraph--small" }, "Use this option only if there are no more than two switches."),
|
|
130315
130319
|
React.createElement("div", { className: 'form__row' },
|
|
130316
130320
|
React.createElement(app_typescript_1.SwitchGroup, { orientation: 'horizontal' },
|
|
130317
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130318
|
-
React.createElement(app_typescript_1.Switch, { label: {
|
|
130321
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Horizontal Switch 1' }, value: this.state.value4, onChange: function (value) { return _this.setState(function () { return ({ value4: value }); }); } }),
|
|
130322
|
+
React.createElement(app_typescript_1.Switch, { label: { content: 'Horizontal Switch 2' }, value: this.state.value5, onChange: function (value) { return _this.setState(function () { return ({ value5: value }); }); } })))),
|
|
130319
130323
|
React.createElement(Markup.ReactMarkupCode, null, "\n // Vertical group (default)\n <SwitchGroup>\n <Switch label={{text:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />\n <Switch label={{text:'Vertical Switch 2'}} value={this.state.value7} onChange={(value) => this.setState(() => ({ value7: value }))} />\n <Switch label={{text:'Vertical Switch 3'}} value={this.state.value8} onChange={(value) => this.setState(() => ({ value8: value }))} />\n </SwitchGroup>\n\n // Vertical group with labels on the left\n <SwitchGroup align='right'>\n <Switch label={{text:'Vertical Switch 1', side: 'left'}} value={this.state.value9} onChange={(value) => this.setState(() => ({ value9: value }))} />\n <Switch label={{text:'Vertical Switch 2', side: 'left'}} value={this.state.value10} onChange={(value) => this.setState(() => ({ value10: value }))} />\n <Switch label={{text:'Vertical Switch 3', side: 'left'}} value={this.state.value11} onChange={(value) => this.setState(() => ({ value11: value }))} />\n </SwitchGroup>\n\n // Horizontal group\n <SwitchGroup orientation='horizontal'>\n <Switch label={{text:'Horizontal Switch 1'}} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />\n <Switch label={{text:'Horizontal Switch 2'}} value={this.state.value5} onChange={(value) => this.setState(() => ({ value5: value }))} />\n </SwitchGroup>\n ")),
|
|
130320
130324
|
React.createElement(Components.GraphicButtonsGroup, null,
|
|
130321
130325
|
React.createElement(Components.GraphicButton, { graphic: 'design', text: 'Switch usage guidelines', smallText: 'Design guidelines', link: '#/design/switch' })),
|
|
130322
130326
|
React.createElement("h3", { className: "docs-page__h3" }, "Props"),
|
|
130323
130327
|
React.createElement("p", { className: "docs-page__paragraph" }, "Switch"),
|
|
130324
130328
|
React.createElement(app_typescript_1.PropsList, null,
|
|
130325
|
-
React.createElement(app_typescript_1.Prop, { name: 'label
|
|
130326
|
-
React.createElement(app_typescript_1.Prop, { name: '
|
|
130327
|
-
React.createElement(app_typescript_1.Prop, { name: '
|
|
130329
|
+
React.createElement(app_typescript_1.Prop, { name: 'label', isRequired: true, type: 'object', default: '/', description: 'Label value.' }),
|
|
130330
|
+
React.createElement(app_typescript_1.Prop, { name: 'disabled', isRequired: false, type: 'boolean', default: 'false', description: 'If true field is disabled.' }),
|
|
130331
|
+
React.createElement(app_typescript_1.Prop, { name: 'toolTipFlow', isRequired: false, type: "top | left | right | down", default: 'false', description: 'Position of tooltip.' }),
|
|
130332
|
+
React.createElement(app_typescript_1.Prop, { name: 'toolTipAppend', isRequired: false, type: 'boolean', default: 'false', description: 'Tooltip append.' }),
|
|
130333
|
+
React.createElement(app_typescript_1.Prop, { name: 'onChange', isRequired: false, type: 'function', default: 'false', description: 'Function onChange' })),
|
|
130334
|
+
React.createElement("p", { className: "docs-page__paragraph" }, "Label props"),
|
|
130335
|
+
React.createElement(app_typescript_1.PropsList, null,
|
|
130336
|
+
React.createElement(app_typescript_1.Prop, { name: 'content', isRequired: true, type: 'string or function', default: '/', description: 'Label value.' }),
|
|
130337
|
+
React.createElement(app_typescript_1.Prop, { name: 'side', isRequired: false, type: 'left | right', default: 'right', description: 'Position of label relative to the button.' }),
|
|
130338
|
+
React.createElement(app_typescript_1.Prop, { name: 'hidden', isRequired: false, type: 'boolean', default: 'false', description: 'If true label is not shown on display.' })),
|
|
130328
130339
|
React.createElement("p", { className: "docs-page__paragraph" }, "SwitchGroup"),
|
|
130329
130340
|
React.createElement(app_typescript_1.PropsList, null,
|
|
130330
130341
|
React.createElement(app_typescript_1.Prop, { name: 'orientation', isRequired: false, type: 'vertical | horizontal', default: 'vertical', description: 'Orientation of Switch components inside the group.' }),
|
|
@@ -139318,7 +139329,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
|
|
|
139318
139329
|
/* 653 */
|
|
139319
139330
|
/***/ (function(module, exports) {
|
|
139320
139331
|
|
|
139321
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.
|
|
139332
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.12","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
139333
|
|
|
139323
139334
|
/***/ }),
|
|
139324
139335
|
/* 654 */
|
package/dist/react/Switch.tsx
CHANGED
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import * as Markup from '../../js/react';
|
|
3
3
|
import * as Components from '../playgrounds/react-playgrounds/components/Index';
|
|
4
4
|
|
|
5
|
-
import { Switch, SwitchGroup, Prop, PropsList } from '../../../app-typescript';
|
|
5
|
+
import { Switch, SwitchGroup, Prop, PropsList, Label } from '../../../app-typescript';
|
|
6
6
|
|
|
7
7
|
interface IState {
|
|
8
8
|
value1: boolean;
|
|
@@ -16,6 +16,7 @@ interface IState {
|
|
|
16
16
|
value9: boolean;
|
|
17
17
|
value10: boolean;
|
|
18
18
|
value11: boolean;
|
|
19
|
+
value12: boolean;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
export default class SwitchDoc extends React.Component<{}, IState> {
|
|
@@ -34,6 +35,7 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
34
35
|
value9: false,
|
|
35
36
|
value10: true,
|
|
36
37
|
value11: false,
|
|
38
|
+
value12: false,
|
|
37
39
|
};
|
|
38
40
|
}
|
|
39
41
|
|
|
@@ -50,16 +52,20 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
50
52
|
<Markup.ReactMarkupPreview>
|
|
51
53
|
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Label on the right (default)</p>
|
|
52
54
|
<div className="form__row">
|
|
53
|
-
<Switch label={{
|
|
55
|
+
<Switch label={{content:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
|
|
54
56
|
</div>
|
|
55
57
|
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Labels on the left</p>
|
|
56
58
|
<p className="docs-page__paragraph--small">This option should be used only in cases when the switch is aligned to the right.</p>
|
|
57
59
|
<div className="form__row">
|
|
58
|
-
<Switch label={{
|
|
60
|
+
<Switch label={{content:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
|
|
59
61
|
</div>
|
|
60
62
|
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Disabled</p>
|
|
61
63
|
<div className="form__row">
|
|
62
|
-
<Switch label={{
|
|
64
|
+
<Switch label={{content:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled />
|
|
65
|
+
</div>
|
|
66
|
+
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// External label</p>
|
|
67
|
+
<div className="form__row">
|
|
68
|
+
<Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />
|
|
63
69
|
</div>
|
|
64
70
|
</Markup.ReactMarkupPreview>
|
|
65
71
|
<Markup.ReactMarkupCode>{`
|
|
@@ -71,6 +77,9 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
71
77
|
|
|
72
78
|
// Disabled
|
|
73
79
|
<Switch label={{text:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled={true} />
|
|
80
|
+
|
|
81
|
+
// External label
|
|
82
|
+
<Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />
|
|
74
83
|
`}
|
|
75
84
|
</Markup.ReactMarkupCode>
|
|
76
85
|
</Markup.ReactMarkup>
|
|
@@ -85,9 +94,9 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
85
94
|
<p className="docs-page__paragraph">// Vertical group (default)</p>
|
|
86
95
|
<div className='form__row'>
|
|
87
96
|
<SwitchGroup>
|
|
88
|
-
<Switch label={{
|
|
89
|
-
<Switch label={{
|
|
90
|
-
<Switch label={{
|
|
97
|
+
<Switch label={{content:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />
|
|
98
|
+
<Switch label={{content:'Vertical Switch 2'}} value={this.state.value7} onChange={(value) => this.setState(() => ({ value7: value }))} />
|
|
99
|
+
<Switch label={{content:'Vertical Switch 3'}} value={this.state.value8} onChange={(value) => this.setState(() => ({ value8: value }))} />
|
|
91
100
|
</SwitchGroup>
|
|
92
101
|
</div>
|
|
93
102
|
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Vertical group with labels on the left</p>
|
|
@@ -95,17 +104,17 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
95
104
|
(e.g. menus, narrow modals or dialouges etc.). It should be used only in the combination with the labels on th eleft.</p>
|
|
96
105
|
<div className='form__row docs-page__test-helper-2' style={{width: '320px'}}>
|
|
97
106
|
<SwitchGroup align='right'>
|
|
98
|
-
<Switch label={{
|
|
99
|
-
<Switch label={{
|
|
100
|
-
<Switch label={{
|
|
107
|
+
<Switch label={{content:'Vertical Switch 1', side: 'left'}} value={this.state.value9} onChange={(value) => this.setState(() => ({ value9: value }))} />
|
|
108
|
+
<Switch label={{content:'Vertical Switch 2', side: 'left'}} value={this.state.value10} onChange={(value) => this.setState(() => ({ value10: value }))} />
|
|
109
|
+
<Switch label={{content:'Vertical Switch 3', side: 'left'}} value={this.state.value11} onChange={(value) => this.setState(() => ({ value11: value }))} />
|
|
101
110
|
</SwitchGroup>
|
|
102
111
|
</div>
|
|
103
112
|
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Horizontal group</p>
|
|
104
113
|
<p className="docs-page__paragraph--small">Use this option only if there are no more than two switches.</p>
|
|
105
114
|
<div className='form__row'>
|
|
106
115
|
<SwitchGroup orientation='horizontal'>
|
|
107
|
-
<Switch label={{
|
|
108
|
-
<Switch label={{
|
|
116
|
+
<Switch label={{content:'Horizontal Switch 1'}} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
|
|
117
|
+
<Switch label={{content:'Horizontal Switch 2'}} value={this.state.value5} onChange={(value) => this.setState(() => ({ value5: value }))} />
|
|
109
118
|
</SwitchGroup>
|
|
110
119
|
</div>
|
|
111
120
|
</Markup.ReactMarkupPreview>
|
|
@@ -140,9 +149,17 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
140
149
|
<h3 className="docs-page__h3">Props</h3>
|
|
141
150
|
<p className="docs-page__paragraph">Switch</p>
|
|
142
151
|
<PropsList>
|
|
143
|
-
<Prop name='label
|
|
144
|
-
<Prop name='
|
|
145
|
-
<Prop name='
|
|
152
|
+
<Prop name='label' isRequired={true} type='object' default='/' description='Label value.'/>
|
|
153
|
+
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='If true field is disabled.'/>
|
|
154
|
+
<Prop name='toolTipFlow' isRequired={false} type="top | left | right | down" default='false' description='Position of tooltip.'/>
|
|
155
|
+
<Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Tooltip append.'/>
|
|
156
|
+
<Prop name='onChange' isRequired={false} type='function' default='false' description='Function onChange'/>
|
|
157
|
+
</PropsList>
|
|
158
|
+
<p className="docs-page__paragraph">Label props</p>
|
|
159
|
+
<PropsList>
|
|
160
|
+
<Prop name='content' isRequired={true} type='string or function' default='/' description='Label value.'/>
|
|
161
|
+
<Prop name='side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
|
|
162
|
+
<Prop name='hidden' isRequired={false} type='boolean' default='false' description='If true label is not shown on display.'/>
|
|
146
163
|
</PropsList>
|
|
147
164
|
<p className="docs-page__paragraph">SwitchGroup</p>
|
|
148
165
|
<PropsList>
|
|
@@ -75101,23 +75101,23 @@ var Switch = /** @class */ (function (_super) {
|
|
|
75101
75101
|
'checked': this.props.value,
|
|
75102
75102
|
'disabled': this.props.disabled,
|
|
75103
75103
|
});
|
|
75104
|
-
|
|
75105
|
-
|
|
75104
|
+
var checkboxInput = (React.createElement("span", { role: "checkbox", id: this.htmlId, className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, tabIndex: 0, onClick: this.onClick },
|
|
75105
|
+
React.createElement("span", { className: "inner" })));
|
|
75106
|
+
// if external label is used it can't be hidden
|
|
75107
|
+
if (this.props.label.hidden && typeof this.props.label.content === 'string') {
|
|
75108
|
+
return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.content, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
|
|
75106
75109
|
React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
|
|
75107
|
-
|
|
75108
|
-
|
|
75109
|
-
React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
|
|
75110
|
-
React.createElement("span", { className: "inner" })),
|
|
75111
|
-
React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.text))));
|
|
75110
|
+
checkboxInput,
|
|
75111
|
+
React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.content))));
|
|
75112
75112
|
}
|
|
75113
75113
|
else {
|
|
75114
|
+
var labelContent = typeof this.props.label.content === 'string'
|
|
75115
|
+
? React.createElement("label", { htmlFor: this.htmlId }, this.props.label.content)
|
|
75116
|
+
: this.props.label.content(this.htmlId);
|
|
75114
75117
|
return (React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
|
|
75115
|
-
this.props.label
|
|
75116
|
-
|
|
75117
|
-
|
|
75118
|
-
React.createElement("span", { className: "inner" })),
|
|
75119
|
-
this.props.label && this.props.label.side !== 'left' ?
|
|
75120
|
-
React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null));
|
|
75118
|
+
this.props.label.side === 'left' ? labelContent : null,
|
|
75119
|
+
checkboxInput,
|
|
75120
|
+
this.props.label.side !== 'left' ? labelContent : null));
|
|
75121
75121
|
}
|
|
75122
75122
|
};
|
|
75123
75123
|
return Switch;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import * as Markup from '../../js/react';
|
|
3
3
|
import * as Components from '../playgrounds/react-playgrounds/components/Index';
|
|
4
4
|
|
|
5
|
-
import { Switch, SwitchGroup, Prop, PropsList } from '../../../app-typescript';
|
|
5
|
+
import { Switch, SwitchGroup, Prop, PropsList, Label } from '../../../app-typescript';
|
|
6
6
|
|
|
7
7
|
interface IState {
|
|
8
8
|
value1: boolean;
|
|
@@ -16,6 +16,7 @@ interface IState {
|
|
|
16
16
|
value9: boolean;
|
|
17
17
|
value10: boolean;
|
|
18
18
|
value11: boolean;
|
|
19
|
+
value12: boolean;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
export default class SwitchDoc extends React.Component<{}, IState> {
|
|
@@ -34,6 +35,7 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
34
35
|
value9: false,
|
|
35
36
|
value10: true,
|
|
36
37
|
value11: false,
|
|
38
|
+
value12: false,
|
|
37
39
|
};
|
|
38
40
|
}
|
|
39
41
|
|
|
@@ -50,16 +52,20 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
50
52
|
<Markup.ReactMarkupPreview>
|
|
51
53
|
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Label on the right (default)</p>
|
|
52
54
|
<div className="form__row">
|
|
53
|
-
<Switch label={{
|
|
55
|
+
<Switch label={{content:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
|
|
54
56
|
</div>
|
|
55
57
|
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Labels on the left</p>
|
|
56
58
|
<p className="docs-page__paragraph--small">This option should be used only in cases when the switch is aligned to the right.</p>
|
|
57
59
|
<div className="form__row">
|
|
58
|
-
<Switch label={{
|
|
60
|
+
<Switch label={{content:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
|
|
59
61
|
</div>
|
|
60
62
|
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Disabled</p>
|
|
61
63
|
<div className="form__row">
|
|
62
|
-
<Switch label={{
|
|
64
|
+
<Switch label={{content:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled />
|
|
65
|
+
</div>
|
|
66
|
+
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// External label</p>
|
|
67
|
+
<div className="form__row">
|
|
68
|
+
<Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />
|
|
63
69
|
</div>
|
|
64
70
|
</Markup.ReactMarkupPreview>
|
|
65
71
|
<Markup.ReactMarkupCode>{`
|
|
@@ -71,6 +77,9 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
71
77
|
|
|
72
78
|
// Disabled
|
|
73
79
|
<Switch label={{text:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled={true} />
|
|
80
|
+
|
|
81
|
+
// External label
|
|
82
|
+
<Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />
|
|
74
83
|
`}
|
|
75
84
|
</Markup.ReactMarkupCode>
|
|
76
85
|
</Markup.ReactMarkup>
|
|
@@ -85,9 +94,9 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
85
94
|
<p className="docs-page__paragraph">// Vertical group (default)</p>
|
|
86
95
|
<div className='form__row'>
|
|
87
96
|
<SwitchGroup>
|
|
88
|
-
<Switch label={{
|
|
89
|
-
<Switch label={{
|
|
90
|
-
<Switch label={{
|
|
97
|
+
<Switch label={{content:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />
|
|
98
|
+
<Switch label={{content:'Vertical Switch 2'}} value={this.state.value7} onChange={(value) => this.setState(() => ({ value7: value }))} />
|
|
99
|
+
<Switch label={{content:'Vertical Switch 3'}} value={this.state.value8} onChange={(value) => this.setState(() => ({ value8: value }))} />
|
|
91
100
|
</SwitchGroup>
|
|
92
101
|
</div>
|
|
93
102
|
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Vertical group with labels on the left</p>
|
|
@@ -95,17 +104,17 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
95
104
|
(e.g. menus, narrow modals or dialouges etc.). It should be used only in the combination with the labels on th eleft.</p>
|
|
96
105
|
<div className='form__row docs-page__test-helper-2' style={{width: '320px'}}>
|
|
97
106
|
<SwitchGroup align='right'>
|
|
98
|
-
<Switch label={{
|
|
99
|
-
<Switch label={{
|
|
100
|
-
<Switch label={{
|
|
107
|
+
<Switch label={{content:'Vertical Switch 1', side: 'left'}} value={this.state.value9} onChange={(value) => this.setState(() => ({ value9: value }))} />
|
|
108
|
+
<Switch label={{content:'Vertical Switch 2', side: 'left'}} value={this.state.value10} onChange={(value) => this.setState(() => ({ value10: value }))} />
|
|
109
|
+
<Switch label={{content:'Vertical Switch 3', side: 'left'}} value={this.state.value11} onChange={(value) => this.setState(() => ({ value11: value }))} />
|
|
101
110
|
</SwitchGroup>
|
|
102
111
|
</div>
|
|
103
112
|
<p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Horizontal group</p>
|
|
104
113
|
<p className="docs-page__paragraph--small">Use this option only if there are no more than two switches.</p>
|
|
105
114
|
<div className='form__row'>
|
|
106
115
|
<SwitchGroup orientation='horizontal'>
|
|
107
|
-
<Switch label={{
|
|
108
|
-
<Switch label={{
|
|
116
|
+
<Switch label={{content:'Horizontal Switch 1'}} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
|
|
117
|
+
<Switch label={{content:'Horizontal Switch 2'}} value={this.state.value5} onChange={(value) => this.setState(() => ({ value5: value }))} />
|
|
109
118
|
</SwitchGroup>
|
|
110
119
|
</div>
|
|
111
120
|
</Markup.ReactMarkupPreview>
|
|
@@ -140,9 +149,17 @@ export default class SwitchDoc extends React.Component<{}, IState> {
|
|
|
140
149
|
<h3 className="docs-page__h3">Props</h3>
|
|
141
150
|
<p className="docs-page__paragraph">Switch</p>
|
|
142
151
|
<PropsList>
|
|
143
|
-
<Prop name='label
|
|
144
|
-
<Prop name='
|
|
145
|
-
<Prop name='
|
|
152
|
+
<Prop name='label' isRequired={true} type='object' default='/' description='Label value.'/>
|
|
153
|
+
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='If true field is disabled.'/>
|
|
154
|
+
<Prop name='toolTipFlow' isRequired={false} type="top | left | right | down" default='false' description='Position of tooltip.'/>
|
|
155
|
+
<Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Tooltip append.'/>
|
|
156
|
+
<Prop name='onChange' isRequired={false} type='function' default='false' description='Function onChange'/>
|
|
157
|
+
</PropsList>
|
|
158
|
+
<p className="docs-page__paragraph">Label props</p>
|
|
159
|
+
<PropsList>
|
|
160
|
+
<Prop name='content' isRequired={true} type='string or function' default='/' description='Label value.'/>
|
|
161
|
+
<Prop name='side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
|
|
162
|
+
<Prop name='hidden' isRequired={false} type='boolean' default='false' description='If true label is not shown on display.'/>
|
|
146
163
|
</PropsList>
|
|
147
164
|
<p className="docs-page__paragraph">SwitchGroup</p>
|
|
148
165
|
<PropsList>
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
interface ILabel {
|
|
3
|
+
content: string | ((id: string) => React.ReactNode);
|
|
4
|
+
side?: 'left' | 'right';
|
|
5
|
+
hidden?: boolean;
|
|
6
|
+
}
|
|
2
7
|
interface IProps {
|
|
3
|
-
label:
|
|
4
|
-
text: string;
|
|
5
|
-
side?: 'left' | 'right';
|
|
6
|
-
hidden?: boolean;
|
|
7
|
-
};
|
|
8
|
+
label: ILabel;
|
|
8
9
|
value: boolean;
|
|
9
10
|
disabled?: boolean;
|
|
10
11
|
toolTipFlow?: 'top' | 'left' | 'right' | 'down';
|
|
@@ -61,23 +61,23 @@ var Switch = /** @class */ (function (_super) {
|
|
|
61
61
|
'checked': this.props.value,
|
|
62
62
|
'disabled': this.props.disabled,
|
|
63
63
|
});
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
var checkboxInput = (React.createElement("span", { role: "checkbox", id: this.htmlId, className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, tabIndex: 0, onClick: this.onClick },
|
|
65
|
+
React.createElement("span", { className: "inner" })));
|
|
66
|
+
// if external label is used it can't be hidden
|
|
67
|
+
if (this.props.label.hidden && typeof this.props.label.content === 'string') {
|
|
68
|
+
return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.content, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
|
|
66
69
|
React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
|
|
70
|
-
React.createElement("span", { className: "inner" })),
|
|
71
|
-
React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.text))));
|
|
70
|
+
checkboxInput,
|
|
71
|
+
React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.content))));
|
|
72
72
|
}
|
|
73
73
|
else {
|
|
74
|
+
var labelContent = typeof this.props.label.content === 'string'
|
|
75
|
+
? React.createElement("label", { htmlFor: this.htmlId }, this.props.label.content)
|
|
76
|
+
: this.props.label.content(this.htmlId);
|
|
74
77
|
return (React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
|
|
75
|
-
this.props.label
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
React.createElement("span", { className: "inner" })),
|
|
79
|
-
this.props.label && this.props.label.side !== 'left' ?
|
|
80
|
-
React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null));
|
|
78
|
+
this.props.label.side === 'left' ? labelContent : null,
|
|
79
|
+
checkboxInput,
|
|
80
|
+
this.props.label.side !== 'left' ? labelContent : null));
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
return Switch;
|