@dhis2-ui/input 8.2.0 → 8.2.1
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/build/cjs/input/input.js +5 -5
- package/build/cjs/input/input.stories.js +10 -19
- package/build/cjs/input-field/input-field.stories.js +11 -18
- package/build/es/input/input.js +5 -5
- package/build/es/input/input.stories.js +9 -18
- package/build/es/input-field/input-field.stories.js +9 -16
- package/package.json +8 -8
package/build/cjs/input/input.js
CHANGED
|
@@ -25,12 +25,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
25
25
|
|
|
26
26
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
27
27
|
|
|
28
|
-
const styles = [
|
|
28
|
+
const styles = [".input.jsx-2422099811{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:".concat(_uiConstants.spacers.dp8, ";}"), "input.jsx-2422099811{box-sizing:border-box;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:".concat(_uiConstants.colors.grey900, ";background-color:white;padding:12px 11px 10px;outline:0;border:1px solid ").concat(_uiConstants.colors.grey500, ";border-radius:3px;box-shadow:inset 0 1px 2px 0 rgba(48,54,60,0.1);text-overflow:ellipsis;}"), "input.dense.jsx-2422099811{padding:8px 11px 6px;}", "input.jsx-2422099811:focus{outline:none;box-shadow:inset 0 0 0 2px ".concat(_uiConstants.theme.focus, ";border-color:").concat(_uiConstants.theme.focus, ";}"), "input[type='date'].jsx-2422099811::-webkit-inner-spin-button,input[type='date'].jsx-2422099811::-webkit-calendar-picker-indicator,input[type='time'].jsx-2422099811::-webkit-inner-spin-button,input[type='time'].jsx-2422099811::-webkit-calendar-picker-indicator,input[type='datetime-local'].jsx-2422099811::-webkit-inner-spin-button,input[type='datetime-local'].jsx-2422099811::-webkit-calendar-picker-indicator{height:14px;padding-top:1px;padding-bottom:1px;}", "input[type='date'].jsx-2422099811::-webkit-datetime-edit-fields-wrapper,input[type='datetime-local'].jsx-2422099811::-webkit-datetime-edit-fields-wrapper,input[type='time'].jsx-2422099811::-webkit-datetime-edit-fields-wrapper{padding:0;}", "input.warning.jsx-2422099811{border-color:".concat(_uiConstants.theme.warning, ";}"), "input.error.jsx-2422099811{border-color:".concat(_uiConstants.theme.error, ";}"), "input.read-only.jsx-2422099811{background-color:".concat(_uiConstants.colors.grey050, ";border-color:").concat(_uiConstants.colors.grey300, ";box-shadow:none;cursor:text;}"), "input.disabled.jsx-2422099811{background-color:".concat(_uiConstants.colors.grey100, ";border-color:").concat(_uiConstants.colors.grey500, ";color:").concat(_uiConstants.theme.disabled, ";cursor:not-allowed;}")];
|
|
29
29
|
styles.__hash = "2422099811";
|
|
30
30
|
|
|
31
31
|
class Input extends _react.Component {
|
|
32
|
-
constructor(
|
|
33
|
-
super(...
|
|
32
|
+
constructor() {
|
|
33
|
+
super(...arguments);
|
|
34
34
|
|
|
35
35
|
_defineProperty(this, "inputRef", /*#__PURE__*/_react.default.createRef());
|
|
36
36
|
|
|
@@ -90,7 +90,7 @@ class Input extends _react.Component {
|
|
|
90
90
|
} = this.props;
|
|
91
91
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
92
92
|
"data-test": dataTest,
|
|
93
|
-
className: "jsx-3353877153 " +
|
|
93
|
+
className: "jsx-3353877153 " + "jsx-".concat(styles.__hash) + " " + ((0, _classnames.default)('input', className) || "")
|
|
94
94
|
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
95
95
|
role: role,
|
|
96
96
|
id: name,
|
|
@@ -109,7 +109,7 @@ class Input extends _react.Component {
|
|
|
109
109
|
onFocus: this.handleFocus,
|
|
110
110
|
onBlur: this.handleBlur,
|
|
111
111
|
onChange: this.handleChange,
|
|
112
|
-
className: "jsx-3353877153 " +
|
|
112
|
+
className: "jsx-3353877153 " + "jsx-".concat(styles.__hash) + " " + ((0, _classnames.default)({
|
|
113
113
|
dense,
|
|
114
114
|
disabled,
|
|
115
115
|
error,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WithValue = exports.ValueTextOverflow = exports.StatusWarning = exports.StatusValid = exports.StatusLoading = exports.StatusError = exports.ReadOnly = exports.PlaceholderNoValue = exports.NumberMaxMinStep = exports.NoPlaceholderNoValue = exports.Focus = exports.Disabled = exports.Dense = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -13,19 +13,7 @@ var _index = require("./index.js");
|
|
|
13
13
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
16
|
-
const description = `
|
|
17
|
-
An input allows a user to enter data, usually text.
|
|
18
|
-
|
|
19
|
-
Inputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.
|
|
20
|
-
|
|
21
|
-
To use a label and validation text, consider the \`InputField\` component.
|
|
22
|
-
|
|
23
|
-
Read more about Inputs and InputFields at [Design System: Inputs](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md).
|
|
24
|
-
|
|
25
|
-
\`\`\`js
|
|
26
|
-
import { Input } from '@dhis/ui'
|
|
27
|
-
\`\`\`
|
|
28
|
-
`;
|
|
16
|
+
const description = "\nAn input allows a user to enter data, usually text.\n\nInputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.\n\nTo use a label and validation text, consider the `InputField` component.\n\nRead more about Inputs and InputFields at [Design System: Inputs](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md).\n\n```js\nimport { Input } from '@dhis/ui'\n```\n";
|
|
29
17
|
const inputTypeArgType = {
|
|
30
18
|
table: {
|
|
31
19
|
type: {
|
|
@@ -38,13 +26,16 @@ const inputTypeArgType = {
|
|
|
38
26
|
}
|
|
39
27
|
};
|
|
40
28
|
|
|
41
|
-
const logger =
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
29
|
+
const logger = _ref => {
|
|
30
|
+
let {
|
|
31
|
+
name,
|
|
32
|
+
value
|
|
33
|
+
} = _ref;
|
|
34
|
+
return console.log("Name: ".concat(name, ", value: ").concat(value));
|
|
35
|
+
};
|
|
45
36
|
|
|
46
37
|
var _default = {
|
|
47
|
-
title: '
|
|
38
|
+
title: 'Input',
|
|
48
39
|
component: _index.Input,
|
|
49
40
|
parameters: {
|
|
50
41
|
docs: {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WithValue = exports.WithHelpText = exports.ValueTextOverflow = exports.StatusWarning = exports.StatusValid = exports.StatusLoading = exports.StatusError = exports.Required = exports.ReadOnly = exports.PlaceholderNoValue = exports.NoPlaceholderNoValue = exports.LabelTextOverflow = exports.InputWidth = exports.Focus = exports.Disabled = exports.Dense = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -16,22 +16,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
16
16
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
17
|
|
|
18
18
|
const subtitle = 'Allows a user to enter data, usually text';
|
|
19
|
-
const description =
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
\`\`\`
|
|
29
|
-
`;
|
|
30
|
-
|
|
31
|
-
const logger = ({
|
|
32
|
-
name,
|
|
33
|
-
value
|
|
34
|
-
}) => console.log(`Name: ${name}, value: ${value}`);
|
|
19
|
+
const description = "\nInputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.\n\nInputField wraps an Input component with a label, help text, validation text, and some other features.\n\nPlease see more about options and features of inputs at [Design System: Input Field](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md#input).\n\n```js\nimport { InputField } from '@dhis2/ui'\n```\n";
|
|
20
|
+
|
|
21
|
+
const logger = _ref => {
|
|
22
|
+
let {
|
|
23
|
+
name,
|
|
24
|
+
value
|
|
25
|
+
} = _ref;
|
|
26
|
+
return console.log("Name: ".concat(name, ", value: ").concat(value));
|
|
27
|
+
};
|
|
35
28
|
|
|
36
29
|
const inputTypeArgType = {
|
|
37
30
|
table: {
|
|
@@ -45,7 +38,7 @@ const inputTypeArgType = {
|
|
|
45
38
|
}
|
|
46
39
|
};
|
|
47
40
|
var _default = {
|
|
48
|
-
title: '
|
|
41
|
+
title: 'Input Field',
|
|
49
42
|
component: _index.InputField,
|
|
50
43
|
parameters: {
|
|
51
44
|
componentSubtitle: subtitle,
|
package/build/es/input/input.js
CHANGED
|
@@ -7,11 +7,11 @@ import { theme, colors, spacers, sharedPropTypes } from '@dhis2/ui-constants';
|
|
|
7
7
|
import cx from 'classnames';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import React, { Component } from 'react';
|
|
10
|
-
const styles = [
|
|
10
|
+
const styles = [".input.jsx-2422099811{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:".concat(spacers.dp8, ";}"), "input.jsx-2422099811{box-sizing:border-box;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:".concat(colors.grey900, ";background-color:white;padding:12px 11px 10px;outline:0;border:1px solid ").concat(colors.grey500, ";border-radius:3px;box-shadow:inset 0 1px 2px 0 rgba(48,54,60,0.1);text-overflow:ellipsis;}"), "input.dense.jsx-2422099811{padding:8px 11px 6px;}", "input.jsx-2422099811:focus{outline:none;box-shadow:inset 0 0 0 2px ".concat(theme.focus, ";border-color:").concat(theme.focus, ";}"), "input[type='date'].jsx-2422099811::-webkit-inner-spin-button,input[type='date'].jsx-2422099811::-webkit-calendar-picker-indicator,input[type='time'].jsx-2422099811::-webkit-inner-spin-button,input[type='time'].jsx-2422099811::-webkit-calendar-picker-indicator,input[type='datetime-local'].jsx-2422099811::-webkit-inner-spin-button,input[type='datetime-local'].jsx-2422099811::-webkit-calendar-picker-indicator{height:14px;padding-top:1px;padding-bottom:1px;}", "input[type='date'].jsx-2422099811::-webkit-datetime-edit-fields-wrapper,input[type='datetime-local'].jsx-2422099811::-webkit-datetime-edit-fields-wrapper,input[type='time'].jsx-2422099811::-webkit-datetime-edit-fields-wrapper{padding:0;}", "input.warning.jsx-2422099811{border-color:".concat(theme.warning, ";}"), "input.error.jsx-2422099811{border-color:".concat(theme.error, ";}"), "input.read-only.jsx-2422099811{background-color:".concat(colors.grey050, ";border-color:").concat(colors.grey300, ";box-shadow:none;cursor:text;}"), "input.disabled.jsx-2422099811{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";color:").concat(theme.disabled, ";cursor:not-allowed;}")];
|
|
11
11
|
styles.__hash = "2422099811";
|
|
12
12
|
export class Input extends Component {
|
|
13
|
-
constructor(
|
|
14
|
-
super(...
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
15
|
|
|
16
16
|
_defineProperty(this, "inputRef", /*#__PURE__*/React.createRef());
|
|
17
17
|
|
|
@@ -71,7 +71,7 @@ export class Input extends Component {
|
|
|
71
71
|
} = this.props;
|
|
72
72
|
return /*#__PURE__*/React.createElement("div", {
|
|
73
73
|
"data-test": dataTest,
|
|
74
|
-
className: "jsx-3353877153 " +
|
|
74
|
+
className: "jsx-3353877153 " + "jsx-".concat(styles.__hash) + " " + (cx('input', className) || "")
|
|
75
75
|
}, /*#__PURE__*/React.createElement("input", {
|
|
76
76
|
role: role,
|
|
77
77
|
id: name,
|
|
@@ -90,7 +90,7 @@ export class Input extends Component {
|
|
|
90
90
|
onFocus: this.handleFocus,
|
|
91
91
|
onBlur: this.handleBlur,
|
|
92
92
|
onChange: this.handleChange,
|
|
93
|
-
className: "jsx-3353877153 " +
|
|
93
|
+
className: "jsx-3353877153 " + "jsx-".concat(styles.__hash) + " " + (cx({
|
|
94
94
|
dense,
|
|
95
95
|
disabled,
|
|
96
96
|
error,
|
|
@@ -1,19 +1,7 @@
|
|
|
1
1
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Input } from './index.js';
|
|
4
|
-
const description = `
|
|
5
|
-
An input allows a user to enter data, usually text.
|
|
6
|
-
|
|
7
|
-
Inputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.
|
|
8
|
-
|
|
9
|
-
To use a label and validation text, consider the \`InputField\` component.
|
|
10
|
-
|
|
11
|
-
Read more about Inputs and InputFields at [Design System: Inputs](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md).
|
|
12
|
-
|
|
13
|
-
\`\`\`js
|
|
14
|
-
import { Input } from '@dhis/ui'
|
|
15
|
-
\`\`\`
|
|
16
|
-
`;
|
|
4
|
+
const description = "\nAn input allows a user to enter data, usually text.\n\nInputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.\n\nTo use a label and validation text, consider the `InputField` component.\n\nRead more about Inputs and InputFields at [Design System: Inputs](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md).\n\n```js\nimport { Input } from '@dhis/ui'\n```\n";
|
|
17
5
|
const inputTypeArgType = {
|
|
18
6
|
table: {
|
|
19
7
|
type: {
|
|
@@ -26,13 +14,16 @@ const inputTypeArgType = {
|
|
|
26
14
|
}
|
|
27
15
|
};
|
|
28
16
|
|
|
29
|
-
const logger =
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
17
|
+
const logger = _ref => {
|
|
18
|
+
let {
|
|
19
|
+
name,
|
|
20
|
+
value
|
|
21
|
+
} = _ref;
|
|
22
|
+
return console.log("Name: ".concat(name, ", value: ").concat(value));
|
|
23
|
+
};
|
|
33
24
|
|
|
34
25
|
export default {
|
|
35
|
-
title: '
|
|
26
|
+
title: 'Input',
|
|
36
27
|
component: Input,
|
|
37
28
|
parameters: {
|
|
38
29
|
docs: {
|
|
@@ -4,22 +4,15 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { InputField } from './index.js';
|
|
6
6
|
const subtitle = 'Allows a user to enter data, usually text';
|
|
7
|
-
const description =
|
|
8
|
-
Inputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.
|
|
7
|
+
const description = "\nInputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.\n\nInputField wraps an Input component with a label, help text, validation text, and some other features.\n\nPlease see more about options and features of inputs at [Design System: Input Field](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md#input).\n\n```js\nimport { InputField } from '@dhis2/ui'\n```\n";
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
`;
|
|
18
|
-
|
|
19
|
-
const logger = ({
|
|
20
|
-
name,
|
|
21
|
-
value
|
|
22
|
-
}) => console.log(`Name: ${name}, value: ${value}`);
|
|
9
|
+
const logger = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
name,
|
|
12
|
+
value
|
|
13
|
+
} = _ref;
|
|
14
|
+
return console.log("Name: ".concat(name, ", value: ").concat(value));
|
|
15
|
+
};
|
|
23
16
|
|
|
24
17
|
const inputTypeArgType = {
|
|
25
18
|
table: {
|
|
@@ -33,7 +26,7 @@ const inputTypeArgType = {
|
|
|
33
26
|
}
|
|
34
27
|
};
|
|
35
28
|
export default {
|
|
36
|
-
title: '
|
|
29
|
+
title: 'Input Field',
|
|
37
30
|
component: InputField,
|
|
38
31
|
parameters: {
|
|
39
32
|
componentSubtitle: subtitle,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/input",
|
|
3
|
-
"version": "8.2.
|
|
3
|
+
"version": "8.2.1",
|
|
4
4
|
"description": "UI Input",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@dhis2/prop-types": "^3.0.0-beta.1",
|
|
35
|
-
"@dhis2-ui/box": "8.2.
|
|
36
|
-
"@dhis2-ui/field": "8.2.
|
|
37
|
-
"@dhis2-ui/input": "8.2.
|
|
38
|
-
"@dhis2-ui/loader": "8.2.
|
|
39
|
-
"@dhis2-ui/status-icon": "8.2.
|
|
40
|
-
"@dhis2/ui-constants": "8.2.
|
|
41
|
-
"@dhis2/ui-icons": "8.2.
|
|
35
|
+
"@dhis2-ui/box": "8.2.1",
|
|
36
|
+
"@dhis2-ui/field": "8.2.1",
|
|
37
|
+
"@dhis2-ui/input": "8.2.1",
|
|
38
|
+
"@dhis2-ui/loader": "8.2.1",
|
|
39
|
+
"@dhis2-ui/status-icon": "8.2.1",
|
|
40
|
+
"@dhis2/ui-constants": "8.2.1",
|
|
41
|
+
"@dhis2/ui-icons": "8.2.1",
|
|
42
42
|
"classnames": "^2.3.1",
|
|
43
43
|
"prop-types": "^15.7.2"
|
|
44
44
|
},
|