dibk-design 0.4.25 → 0.4.29
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/dist/components/DragAndDropFileInput.js +13 -4
- package/dist/components/DragAndDropFileInput.md +7 -1
- package/dist/components/DragAndDropFileInput.module.scss +10 -1
- package/dist/components/InputField.js +2 -0
- package/dist/components/InputField.module.scss +1 -0
- package/dist/components/Select.module.scss +1 -0
- package/dist/components/Textarea.module.scss +5 -1
- package/package.json +1 -1
|
@@ -95,6 +95,14 @@ class DragAndDropFileInput extends _react.default.Component {
|
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
render() {
|
|
98
|
+
let buttonContent;
|
|
99
|
+
|
|
100
|
+
if (this.props.selectedFileName) {
|
|
101
|
+
buttonContent = this.props.buttonContentWhenSelectedFile ? this.props.buttonContentWhenSelectedFile : this.props.buttonContent;
|
|
102
|
+
} else {
|
|
103
|
+
buttonContent = this.props.buttonContent;
|
|
104
|
+
}
|
|
105
|
+
|
|
98
106
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
99
107
|
className: _DragAndDropFileInputModule.default.dragAndDropFileInput
|
|
100
108
|
}, /*#__PURE__*/_react.default.createElement("label", {
|
|
@@ -102,16 +110,16 @@ class DragAndDropFileInput extends _react.default.Component {
|
|
|
102
110
|
}, this.props.label, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement("div", {
|
|
103
111
|
ref: this.setWrapperRef,
|
|
104
112
|
className: "".concat(_DragAndDropFileInputModule.default.dragAndDropContainer, " ").concat(this.state.highlight ? _DragAndDropFileInputModule.default.highlighted : '')
|
|
105
|
-
}, this.props.selectedFileName ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("b", null, "Valgt fil:"), " ", this.props.selectedFileName)) : /*#__PURE__*/_react.default.createElement(
|
|
113
|
+
}, this.props.selectedFileName ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("b", null, "Valgt fil:"), " ", this.props.selectedFileName)) : /*#__PURE__*/_react.default.createElement("div", null, "Slipp fil her"), /*#__PURE__*/_react.default.createElement("input", {
|
|
106
114
|
ref: this.setFileInputElementRef,
|
|
107
115
|
type: "file",
|
|
108
116
|
onChange: this.props.onSelectChange
|
|
109
|
-
}), this.props.buttonContent ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null,
|
|
117
|
+
}), this.props.buttonContent ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, this.props.selectedFileName ? '' : 'eller klikk på knappen for å velge fil'), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
110
118
|
size: "small",
|
|
111
119
|
color: this.props.buttonColor,
|
|
112
120
|
onClick: () => this.handleAddButtonOnClick(),
|
|
113
|
-
content:
|
|
114
|
-
})) : '')
|
|
121
|
+
content: buttonContent
|
|
122
|
+
})) : '') : ''), this.props.contentOnly ? /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.selectedFileName, this.props.defaultContent)) : '', /*#__PURE__*/_react.default.createElement("span", {
|
|
115
123
|
className: _DragAndDropFileInputModule.default.errorMessage
|
|
116
124
|
}, this.props.errorMessage ? this.props.errorMessage : ''));
|
|
117
125
|
}
|
|
@@ -127,6 +135,7 @@ DragAndDropFileInput.propTypes = {
|
|
|
127
135
|
contentOnly: _propTypes.default.bool,
|
|
128
136
|
buttonColor: _propTypes.default.string,
|
|
129
137
|
buttonContent: _propTypes.default.string,
|
|
138
|
+
buttonContentWhenSelectedFile: _propTypes.default.string,
|
|
130
139
|
selectedFileName: _propTypes.default.string,
|
|
131
140
|
defaultContent: _propTypes.default.string,
|
|
132
141
|
hasErrors: _propTypes.default.bool,
|
|
@@ -2,6 +2,12 @@ Drag and drop file input examples:
|
|
|
2
2
|
|
|
3
3
|
```js
|
|
4
4
|
<DragAndDropFileInput id="dragAndDropInput-1" label="Input without selected file" buttonContent="Velg fil" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} />
|
|
5
|
+
|
|
5
6
|
<DragAndDropFileInput id="dragAndDropInput-2" label="Input with selected file" buttonContent="Velg fil" selectedFileName="important-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} />
|
|
6
|
-
|
|
7
|
+
|
|
8
|
+
<DragAndDropFileInput id="dragAndDropInput-3" label="Input with selected file and buttonContentWhenSelectedFile" buttonContent="Velg fil" buttonContentWhenSelectedFile="Velg annen fil" selectedFileName="important-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} />
|
|
9
|
+
|
|
10
|
+
<DragAndDropFileInput id="dragAndDropInput-4" label="Input with selected file and error message" buttonContent="Velg fil" buttonContentWhenSelectedFile="Velg annen fil" selectedFileName="wrong-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} hasErrors errorMessage="Filen må være midre enn 15MB" />
|
|
11
|
+
|
|
12
|
+
<DragAndDropFileInput id="dragAndDropInput-5" label="Input with selected file and contentOnly" buttonContent="Velg fil" selectedFileName="important-file2.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} contentOnly={true} />
|
|
7
13
|
```
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
cursor: pointer;
|
|
6
6
|
font-size: 18px;
|
|
7
7
|
margin: 0 0 4px;
|
|
8
|
-
font-family: "Open Sans",arial,sans-serif;
|
|
8
|
+
font-family: "Open Sans", arial, sans-serif;
|
|
9
9
|
line-height: 1.3;
|
|
10
10
|
font-weight: bold;
|
|
11
11
|
font-style: normal;
|
|
@@ -33,4 +33,13 @@
|
|
|
33
33
|
border-color: $color-dark-blue;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
+
:local(.errorMessage) {
|
|
37
|
+
color: $color-error-text;
|
|
38
|
+
font-size: 19px;
|
|
39
|
+
font-weight: 400;
|
|
40
|
+
line-height: 1.6;
|
|
41
|
+
font-family: "Open Sans", sans-serif;
|
|
42
|
+
font-style: italic;
|
|
43
|
+
overflow-wrap: break-word;
|
|
44
|
+
}
|
|
36
45
|
}
|
|
@@ -79,6 +79,8 @@ class InputField extends _react.default.Component {
|
|
|
79
79
|
selectsEnd: this.props.selectsEnd,
|
|
80
80
|
startDate: this.props.startDate ? new Date(this.props.startDate) : null,
|
|
81
81
|
endDate: this.props.endDate ? new Date(this.props.endDate) : null,
|
|
82
|
+
minDate: this.props.minDate || null,
|
|
83
|
+
maxDate: this.props.maxDate || null,
|
|
82
84
|
onChange: this.props.onChange ? date => this.props.onChange(date) : console.log("Missing onChange handler for date picker with id: ".concat(this.props.id)),
|
|
83
85
|
onBlur: this.props.onBlur ? date => this.props.onBlur(date) : null,
|
|
84
86
|
selected: value ? new Date(value) : null,
|