@dhis2-ui/file-input 9.1.2 → 9.3.0-alpha.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/file-input/file-input.stories.js +11 -2
- package/build/cjs/file-input-field-with-list/file-input-field-with-list.stories.js +11 -2
- package/build/cjs/file-list/file-list-item.js +8 -8
- package/build/es/file-input/file-input.stories.js +6 -0
- package/build/es/file-input-field-with-list/file-input-field-with-list.stories.js +7 -1
- package/build/es/file-list/file-list-item.js +8 -8
- package/package.json +8 -8
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.Statuses = exports.Sizes = exports.Multiple = exports.Disabled = exports.Default = void 0;
|
|
6
|
+
exports.default = exports.Statuses = exports.Sizes = exports.RTL = exports.Multiple = exports.Disabled = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -112,4 +112,13 @@ const Statuses = args => /*#__PURE__*/_react.default.createElement(_react.defaul
|
|
|
112
112
|
error: true
|
|
113
113
|
})));
|
|
114
114
|
|
|
115
|
-
exports.Statuses = Statuses;
|
|
115
|
+
exports.Statuses = Statuses;
|
|
116
|
+
|
|
117
|
+
const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
118
|
+
dir: "rtl"
|
|
119
|
+
}, /*#__PURE__*/_react.default.createElement(_index.FileInput, _extends({}, args, {
|
|
120
|
+
buttonLabel: "Default",
|
|
121
|
+
name: "default"
|
|
122
|
+
})));
|
|
123
|
+
|
|
124
|
+
exports.RTL = RTL;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.DefaultPlaceholder = exports.DefaultButtonLabelAndRemoveText = exports.Default = void 0;
|
|
6
|
+
exports.default = exports.RTL = exports.DefaultPlaceholder = exports.DefaultButtonLabelAndRemoveText = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -71,4 +71,13 @@ DefaultButtonLabelAndRemoveText.args = {
|
|
|
71
71
|
DefaultButtonLabelAndRemoveText.storyName = 'Default: buttonLabel and removeText';
|
|
72
72
|
const DefaultPlaceholder = Template.bind({});
|
|
73
73
|
exports.DefaultPlaceholder = DefaultPlaceholder;
|
|
74
|
-
DefaultPlaceholder.storyName = 'Default: placeholder';
|
|
74
|
+
DefaultPlaceholder.storyName = 'Default: placeholder';
|
|
75
|
+
|
|
76
|
+
const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
77
|
+
dir: "rtl"
|
|
78
|
+
}, /*#__PURE__*/_react.default.createElement(Template, args));
|
|
79
|
+
|
|
80
|
+
exports.RTL = RTL;
|
|
81
|
+
RTL.args = {
|
|
82
|
+
files: files
|
|
83
|
+
};
|
|
@@ -34,29 +34,29 @@ const FileListItem = _ref => {
|
|
|
34
34
|
} = _ref;
|
|
35
35
|
return /*#__PURE__*/_react.default.createElement("p", {
|
|
36
36
|
"data-test": dataTest,
|
|
37
|
-
className: _style.default.dynamic([["
|
|
37
|
+
className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + ((0, _classnames.default)('selected-file', className) || "")
|
|
38
38
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
39
|
-
className: _style.default.dynamic([["
|
|
39
|
+
className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "icon"
|
|
40
40
|
}, loading ? /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
|
|
41
41
|
extrasmall: true
|
|
42
42
|
}) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconAttachment16, {
|
|
43
43
|
color: _uiConstants.colors.grey700
|
|
44
44
|
})), /*#__PURE__*/_react.default.createElement("span", {
|
|
45
|
-
className: _style.default.dynamic([["
|
|
45
|
+
className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "text"
|
|
46
46
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
47
|
-
className: _style.default.dynamic([["
|
|
47
|
+
className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "label"
|
|
48
48
|
}, label), loading && onCancel && cancelText && /*#__PURE__*/_react.default.createElement("span", {
|
|
49
49
|
onClick: event => onCancel({}, event),
|
|
50
50
|
"data-test": "".concat(dataTest, "-cancel"),
|
|
51
|
-
className: _style.default.dynamic([["
|
|
51
|
+
className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
|
|
52
52
|
}, cancelText), !loading && /*#__PURE__*/_react.default.createElement("span", {
|
|
53
53
|
onClick: event => onRemove({}, event),
|
|
54
54
|
"data-test": "".concat(dataTest, "-remove"),
|
|
55
|
-
className: _style.default.dynamic([["
|
|
55
|
+
className: _style.default.dynamic([["3865269319", [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]]]) + " " + "action"
|
|
56
56
|
}, removeText)), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
57
|
-
id: "
|
|
57
|
+
id: "3865269319",
|
|
58
58
|
dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey900, _uiConstants.colors.grey700, _uiConstants.colors.red700, _uiConstants.colors.red800, _uiConstants.theme.focus]
|
|
59
|
-
}, ["p.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding-top:".concat(_uiConstants.spacers.dp4, ";}"), ".icon.__jsx-style-dynamic-selector{margin-
|
|
59
|
+
}, ["p.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding-top:".concat(_uiConstants.spacers.dp4, ";}"), "span.__jsx-style-dynamic-selector{display:inline-block;}", ".icon.__jsx-style-dynamic-selector{margin-inline-end:4px;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:1px;}", ".text.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".label.__jsx-style-dynamic-selector{font-size:14px;color:".concat(_uiConstants.colors.grey900, ";word-break:break-all;}"), ".label.__jsx-style-dynamic-selector::after{content:' ';display:inline-block;width:12px;}", ".action.__jsx-style-dynamic-selector{font-size:12px;line-height:12px;margin-top:0;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;color:".concat(_uiConstants.colors.grey700, ";}"), ".action.__jsx-style-dynamic-selector:hover{color:".concat(_uiConstants.colors.red700, ";}"), ".action.__jsx-style-dynamic-selector:active{color:".concat(_uiConstants.colors.red800, ";}"), ".action.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:2px;}")]));
|
|
60
60
|
};
|
|
61
61
|
|
|
62
62
|
exports.FileListItem = FileListItem;
|
|
@@ -90,4 +90,10 @@ export const Statuses = args => /*#__PURE__*/React.createElement(React.Fragment,
|
|
|
90
90
|
buttonLabel: "Error",
|
|
91
91
|
name: "error",
|
|
92
92
|
error: true
|
|
93
|
+
})));
|
|
94
|
+
export const RTL = args => /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
dir: "rtl"
|
|
96
|
+
}, /*#__PURE__*/React.createElement(FileInput, _extends({}, args, {
|
|
97
|
+
buttonLabel: "Default",
|
|
98
|
+
name: "default"
|
|
93
99
|
})));
|
|
@@ -55,4 +55,10 @@ DefaultButtonLabelAndRemoveText.args = {
|
|
|
55
55
|
};
|
|
56
56
|
DefaultButtonLabelAndRemoveText.storyName = 'Default: buttonLabel and removeText';
|
|
57
57
|
export const DefaultPlaceholder = Template.bind({});
|
|
58
|
-
DefaultPlaceholder.storyName = 'Default: placeholder';
|
|
58
|
+
DefaultPlaceholder.storyName = 'Default: placeholder';
|
|
59
|
+
export const RTL = args => /*#__PURE__*/React.createElement("div", {
|
|
60
|
+
dir: "rtl"
|
|
61
|
+
}, /*#__PURE__*/React.createElement(Template, args));
|
|
62
|
+
RTL.args = {
|
|
63
|
+
files: files
|
|
64
|
+
};
|
|
@@ -19,29 +19,29 @@ const FileListItem = _ref => {
|
|
|
19
19
|
} = _ref;
|
|
20
20
|
return /*#__PURE__*/React.createElement("p", {
|
|
21
21
|
"data-test": dataTest,
|
|
22
|
-
className: _JSXStyle.dynamic([["
|
|
22
|
+
className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + (cx('selected-file', className) || "")
|
|
23
23
|
}, /*#__PURE__*/React.createElement("span", {
|
|
24
|
-
className: _JSXStyle.dynamic([["
|
|
24
|
+
className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "icon"
|
|
25
25
|
}, loading ? /*#__PURE__*/React.createElement(CircularLoader, {
|
|
26
26
|
extrasmall: true
|
|
27
27
|
}) : /*#__PURE__*/React.createElement(IconAttachment16, {
|
|
28
28
|
color: colors.grey700
|
|
29
29
|
})), /*#__PURE__*/React.createElement("span", {
|
|
30
|
-
className: _JSXStyle.dynamic([["
|
|
30
|
+
className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "text"
|
|
31
31
|
}, /*#__PURE__*/React.createElement("span", {
|
|
32
|
-
className: _JSXStyle.dynamic([["
|
|
32
|
+
className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "label"
|
|
33
33
|
}, label), loading && onCancel && cancelText && /*#__PURE__*/React.createElement("span", {
|
|
34
34
|
onClick: event => onCancel({}, event),
|
|
35
35
|
"data-test": "".concat(dataTest, "-cancel"),
|
|
36
|
-
className: _JSXStyle.dynamic([["
|
|
36
|
+
className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
|
|
37
37
|
}, cancelText), !loading && /*#__PURE__*/React.createElement("span", {
|
|
38
38
|
onClick: event => onRemove({}, event),
|
|
39
39
|
"data-test": "".concat(dataTest, "-remove"),
|
|
40
|
-
className: _JSXStyle.dynamic([["
|
|
40
|
+
className: _JSXStyle.dynamic([["3865269319", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
|
|
41
41
|
}, removeText)), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
42
|
-
id: "
|
|
42
|
+
id: "3865269319",
|
|
43
43
|
dynamic: [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]
|
|
44
|
-
}, ["p.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding-top:".concat(spacers.dp4, ";}"), ".icon.__jsx-style-dynamic-selector{margin-
|
|
44
|
+
}, ["p.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding-top:".concat(spacers.dp4, ";}"), "span.__jsx-style-dynamic-selector{display:inline-block;}", ".icon.__jsx-style-dynamic-selector{margin-inline-end:4px;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:1px;}", ".text.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".label.__jsx-style-dynamic-selector{font-size:14px;color:".concat(colors.grey900, ";word-break:break-all;}"), ".label.__jsx-style-dynamic-selector::after{content:' ';display:inline-block;width:12px;}", ".action.__jsx-style-dynamic-selector{font-size:12px;line-height:12px;margin-top:0;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;color:".concat(colors.grey700, ";}"), ".action.__jsx-style-dynamic-selector:hover{color:".concat(colors.red700, ";}"), ".action.__jsx-style-dynamic-selector:active{color:".concat(colors.red800, ";}"), ".action.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:2px;}")]));
|
|
45
45
|
};
|
|
46
46
|
|
|
47
47
|
FileListItem.defaultProps = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/file-input",
|
|
3
|
-
"version": "9.1
|
|
3
|
+
"version": "9.3.0-alpha.1",
|
|
4
4
|
"description": "UI FileInput",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -34,13 +34,13 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@dhis2/prop-types": "^3.1.2",
|
|
37
|
-
"@dhis2-ui/button": "9.1
|
|
38
|
-
"@dhis2-ui/field": "9.1
|
|
39
|
-
"@dhis2-ui/label": "9.1
|
|
40
|
-
"@dhis2-ui/loader": "9.1
|
|
41
|
-
"@dhis2-ui/status-icon": "9.1
|
|
42
|
-
"@dhis2/ui-constants": "9.1
|
|
43
|
-
"@dhis2/ui-icons": "9.1
|
|
37
|
+
"@dhis2-ui/button": "9.3.0-alpha.1",
|
|
38
|
+
"@dhis2-ui/field": "9.3.0-alpha.1",
|
|
39
|
+
"@dhis2-ui/label": "9.3.0-alpha.1",
|
|
40
|
+
"@dhis2-ui/loader": "9.3.0-alpha.1",
|
|
41
|
+
"@dhis2-ui/status-icon": "9.3.0-alpha.1",
|
|
42
|
+
"@dhis2/ui-constants": "9.3.0-alpha.1",
|
|
43
|
+
"@dhis2/ui-icons": "9.3.0-alpha.1",
|
|
44
44
|
"classnames": "^2.3.1",
|
|
45
45
|
"prop-types": "^15.7.2"
|
|
46
46
|
},
|