@coorpacademy/components 11.14.23 → 11.14.24-alpha.7
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/es/atom/autocomplete/index.d.ts +3 -1
- package/es/atom/autocomplete/index.d.ts.map +1 -1
- package/es/atom/autocomplete/index.js +45 -17
- package/es/atom/autocomplete/index.js.map +1 -1
- package/es/atom/autocomplete/style.css +150 -1
- package/es/molecule/brand-form-group/index.d.ts +3 -1
- package/es/molecule/select-multiple/style.css +1 -1
- package/es/organism/brand-form/index.d.ts +4 -1
- package/es/organism/brand-form/index.d.ts.map +1 -1
- package/es/organism/brand-form/index.js +17 -7
- package/es/organism/brand-form/index.js.map +1 -1
- package/es/organism/wizard-contents/index.d.ts +4 -1
- package/es/template/back-office/brand-update/index.d.ts +4 -1
- package/lib/atom/autocomplete/index.d.ts +3 -1
- package/lib/atom/autocomplete/index.d.ts.map +1 -1
- package/lib/atom/autocomplete/index.js +48 -16
- package/lib/atom/autocomplete/index.js.map +1 -1
- package/lib/atom/autocomplete/style.css +150 -1
- package/lib/molecule/brand-form-group/index.d.ts +3 -1
- package/lib/molecule/select-multiple/style.css +1 -1
- package/lib/organism/brand-form/index.d.ts +4 -1
- package/lib/organism/brand-form/index.d.ts.map +1 -1
- package/lib/organism/brand-form/index.js +18 -7
- package/lib/organism/brand-form/index.js.map +1 -1
- package/lib/organism/wizard-contents/index.d.ts +4 -1
- package/lib/template/back-office/brand-update/index.d.ts +4 -1
- package/locales/.mtslconfig.json +1 -0
- package/package.json +2 -2
|
@@ -9,11 +9,13 @@ declare namespace Autocomplete {
|
|
|
9
9
|
const required: PropTypes.Requireable<boolean>;
|
|
10
10
|
const modified: PropTypes.Requireable<boolean>;
|
|
11
11
|
const error: PropTypes.Requireable<boolean>;
|
|
12
|
+
const errorMessage: PropTypes.Requireable<string>;
|
|
12
13
|
const suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
13
14
|
name: PropTypes.Requireable<string>;
|
|
14
15
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
15
16
|
}> | null | undefined)[]>;
|
|
16
|
-
const
|
|
17
|
+
const theme: PropTypes.Requireable<string>;
|
|
18
|
+
const onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
17
19
|
const onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
18
20
|
const onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
19
21
|
const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";AAgBA,uDA8FC"}
|
|
@@ -1,11 +1,18 @@
|
|
|
1
|
+
import _keys from "lodash/fp/keys";
|
|
2
|
+
import _isEmpty from "lodash/fp/isEmpty";
|
|
1
3
|
import _isNil from "lodash/fp/isNil";
|
|
2
4
|
import _noop from "lodash/fp/noop";
|
|
3
|
-
import React, { useMemo } from 'react';
|
|
5
|
+
import React, { useCallback, useMemo } from 'react';
|
|
4
6
|
import Autosuggest from 'react-autosuggest';
|
|
5
7
|
import PropTypes from 'prop-types';
|
|
6
8
|
import classnames from 'classnames';
|
|
9
|
+
import { NovaSolidStatusClose as ErrorIcon } from '@coorpacademy/nova-icons';
|
|
7
10
|
import getClassState from '../../util/get-class-state';
|
|
8
11
|
import style from './style.css';
|
|
12
|
+
const THEME_STYLE = {
|
|
13
|
+
coorpmanager: style.coorpmanager,
|
|
14
|
+
default: style.default
|
|
15
|
+
};
|
|
9
16
|
|
|
10
17
|
const renderSuggestion = suggestion => /*#__PURE__*/React.createElement("span", null, suggestion.name);
|
|
11
18
|
|
|
@@ -17,32 +24,51 @@ const Autocomplete = props => {
|
|
|
17
24
|
required,
|
|
18
25
|
modified = false,
|
|
19
26
|
error = false,
|
|
27
|
+
errorMessage,
|
|
20
28
|
suggestions = [],
|
|
21
|
-
|
|
29
|
+
onInput = _noop,
|
|
22
30
|
onFetch = _noop,
|
|
23
31
|
onClear = _noop,
|
|
24
32
|
onBlur = _noop,
|
|
25
33
|
onSuggestionSelected = _noop,
|
|
26
|
-
title: propsTitle
|
|
34
|
+
title: propsTitle,
|
|
35
|
+
theme = 'default'
|
|
27
36
|
} = props;
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const
|
|
37
|
+
const mainClass = THEME_STYLE[theme];
|
|
38
|
+
const title = useMemo(() => `${propsTitle}${required ? '*' : ''}`, [propsTitle, required]);
|
|
39
|
+
const className = useMemo(() => getClassState(style.default, style.modified, style.error, modified, error), [modified, error]);
|
|
40
|
+
const handleInput = useCallback(e => {
|
|
41
|
+
onInput(e);
|
|
42
|
+
}, [onInput]);
|
|
43
|
+
const handleBlur = useCallback((e, selectedSuggestion) => onBlur(e, selectedSuggestion), [onBlur]);
|
|
44
|
+
const handleSuggestionsFetchRequested = useCallback(e => onFetch(e), [onFetch]);
|
|
45
|
+
const handleSuggestionsClearRequested = useCallback(e => onClear(e), [onClear]);
|
|
46
|
+
const handleSuggestionsSelected = useCallback((e, data) => onSuggestionSelected(data), [onSuggestionSelected]);
|
|
35
47
|
const inputProps = {
|
|
36
48
|
placeholder,
|
|
37
49
|
value,
|
|
38
|
-
onChange:
|
|
39
|
-
onBlur: handleBlur
|
|
50
|
+
onChange: _noop,
|
|
51
|
+
onBlur: handleBlur,
|
|
52
|
+
onInput: handleInput,
|
|
53
|
+
'data-testid': 'autocomplete-input'
|
|
40
54
|
};
|
|
55
|
+
const errorIconView = theme === 'coorpmanager' && error ? /*#__PURE__*/React.createElement(ErrorIcon, {
|
|
56
|
+
className: style.leftIcon
|
|
57
|
+
}) : null;
|
|
58
|
+
const errorText = theme === 'coorpmanager' && error ? /*#__PURE__*/React.createElement("div", {
|
|
59
|
+
className: style.errorText // eslint-disable-next-line react/no-danger
|
|
60
|
+
,
|
|
61
|
+
dangerouslySetInnerHTML: {
|
|
62
|
+
__html: errorMessage
|
|
63
|
+
}
|
|
64
|
+
}) : null;
|
|
41
65
|
return /*#__PURE__*/React.createElement("div", {
|
|
42
|
-
className: classnames(className, _isNil(
|
|
66
|
+
className: classnames(mainClass, className, _isNil(propsTitle) && style.isNoTitle)
|
|
43
67
|
}, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("span", {
|
|
44
|
-
className: style.title
|
|
45
|
-
}, title), /*#__PURE__*/React.createElement("div",
|
|
68
|
+
className: classnames(style.title, _isEmpty(value) && style.noValue)
|
|
69
|
+
}, title), /*#__PURE__*/React.createElement("div", {
|
|
70
|
+
className: style.inputContainer
|
|
71
|
+
}, /*#__PURE__*/React.createElement(Autosuggest, {
|
|
46
72
|
theme: {
|
|
47
73
|
container: style.container,
|
|
48
74
|
input: style.input,
|
|
@@ -60,7 +86,7 @@ const Autocomplete = props => {
|
|
|
60
86
|
inputProps: inputProps,
|
|
61
87
|
focusInputOnSuggestionClick: false,
|
|
62
88
|
onSuggestionSelected: handleSuggestionsSelected
|
|
63
|
-
}))), /*#__PURE__*/React.createElement("div", {
|
|
89
|
+
}), errorIconView, errorText)), /*#__PURE__*/React.createElement("div", {
|
|
64
90
|
className: style.description
|
|
65
91
|
}, description));
|
|
66
92
|
};
|
|
@@ -73,11 +99,13 @@ Autocomplete.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
73
99
|
required: PropTypes.bool,
|
|
74
100
|
modified: PropTypes.bool,
|
|
75
101
|
error: PropTypes.bool,
|
|
102
|
+
errorMessage: PropTypes.string,
|
|
76
103
|
suggestions: PropTypes.arrayOf(PropTypes.shape({
|
|
77
104
|
name: PropTypes.string,
|
|
78
105
|
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
79
106
|
})),
|
|
80
|
-
|
|
107
|
+
theme: PropTypes.oneOf(_keys(THEME_STYLE)),
|
|
108
|
+
onInput: PropTypes.func,
|
|
81
109
|
onFetch: PropTypes.func,
|
|
82
110
|
onClear: PropTypes.func,
|
|
83
111
|
onBlur: PropTypes.func,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","Autosuggest","PropTypes","classnames","getClassState","style","renderSuggestion","suggestion","name","Autocomplete","props","placeholder","value","description","required","modified","error","suggestions","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useMemo","Autosuggest","PropTypes","classnames","NovaSolidStatusClose","ErrorIcon","getClassState","style","THEME_STYLE","coorpmanager","default","renderSuggestion","suggestion","name","Autocomplete","props","placeholder","value","description","required","modified","error","errorMessage","suggestions","onInput","onFetch","onClear","onBlur","onSuggestionSelected","title","propsTitle","theme","mainClass","className","handleInput","e","handleBlur","selectedSuggestion","handleSuggestionsFetchRequested","handleSuggestionsClearRequested","handleSuggestionsSelected","data","inputProps","onChange","errorIconView","leftIcon","errorText","__html","isNoTitle","noValue","inputContainer","container","input","suggestionsContainer","suggestionsContainerOpen","suggestionsList","suggestionHighlighted","propTypes","string","bool","arrayOf","shape","oneOfType","number","oneOf","func"],"sources":["../../../src/atom/autocomplete/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport Autosuggest from 'react-autosuggest';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {noop, isNil, isEmpty, keys} from 'lodash/fp';\nimport {NovaSolidStatusClose as ErrorIcon} from '@coorpacademy/nova-icons';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst THEME_STYLE = {\n coorpmanager: style.coorpmanager,\n default: style.default\n};\n\nconst renderSuggestion = suggestion => <span>{suggestion.name}</span>;\n\nconst Autocomplete = props => {\n const {\n placeholder = '',\n value,\n description,\n required,\n modified = false,\n error = false,\n errorMessage,\n suggestions = [],\n onInput = noop,\n onFetch = noop,\n onClear = noop,\n onBlur = noop,\n onSuggestionSelected = noop,\n title: propsTitle,\n theme = 'default'\n } = props;\n\n const mainClass = THEME_STYLE[theme];\n const title = useMemo(() => `${propsTitle}${required ? '*' : ''}`, [propsTitle, required]);\n const className = useMemo(\n () => getClassState(style.default, style.modified, style.error, modified, error),\n [modified, error]\n );\n\n const handleInput = useCallback(\n e => {\n onInput(e);\n },\n [onInput]\n );\n const handleBlur = useCallback(\n (e, selectedSuggestion) => onBlur(e, selectedSuggestion),\n [onBlur]\n );\n const handleSuggestionsFetchRequested = useCallback(e => onFetch(e), [onFetch]);\n const handleSuggestionsClearRequested = useCallback(e => onClear(e), [onClear]);\n const handleSuggestionsSelected = useCallback(\n (e, data) => onSuggestionSelected(data),\n [onSuggestionSelected]\n );\n\n const inputProps = {\n placeholder,\n value,\n onChange: noop,\n onBlur: handleBlur,\n onInput: handleInput,\n 'data-testid': 'autocomplete-input'\n };\n\n const errorIconView =\n theme === 'coorpmanager' && error ? <ErrorIcon className={style.leftIcon} /> : null;\n\n const errorText =\n theme === 'coorpmanager' && error ? (\n <div\n className={style.errorText}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: errorMessage}}\n />\n ) : null;\n return (\n <div className={classnames(mainClass, className, isNil(propsTitle) && style.isNoTitle)}>\n <label>\n <span className={classnames(style.title, isEmpty(value) && style.noValue)}>{title}</span>\n <div className={style.inputContainer}>\n <Autosuggest\n theme={{\n container: style.container,\n input: style.input,\n suggestionsContainer: style.suggestionsContainer,\n suggestionsContainerOpen: style.suggestionsContainerOpen,\n suggestionsList: style.suggestionsList,\n suggestion: style.suggestion,\n suggestionHighlighted: style.suggestionHighlighted\n }}\n suggestions={suggestions}\n onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n onSuggestionsClearRequested={handleSuggestionsClearRequested}\n getSuggestionValue={noop}\n renderSuggestion={renderSuggestion}\n inputProps={inputProps}\n focusInputOnSuggestionClick={false}\n onSuggestionSelected={handleSuggestionsSelected}\n />\n {errorIconView}\n {errorText}\n </div>\n </label>\n <div className={style.description}>{description}</div>\n </div>\n );\n};\n\nAutocomplete.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n value: PropTypes.string,\n description: PropTypes.string,\n required: PropTypes.bool,\n modified: PropTypes.bool,\n error: PropTypes.bool,\n errorMessage: PropTypes.string,\n suggestions: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n })\n ),\n theme: PropTypes.oneOf(keys(THEME_STYLE)),\n onInput: PropTypes.func,\n onFetch: PropTypes.func,\n onClear: PropTypes.func,\n onBlur: PropTypes.func,\n onSuggestionSelected: PropTypes.func\n};\n\nexport default Autocomplete;\n"],"mappings":"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"}
|
|
@@ -5,6 +5,12 @@
|
|
|
5
5
|
@value dark from colors;
|
|
6
6
|
@value medium from colors;
|
|
7
7
|
@value white from colors;
|
|
8
|
+
@value cm_positive_100 from colors;
|
|
9
|
+
@value cm_negative_100 from colors;
|
|
10
|
+
@value cm_grey_100 from colors;
|
|
11
|
+
@value cm_grey_150 from colors;
|
|
12
|
+
@value cm_grey_400 from colors;
|
|
13
|
+
@value cm_grey_700 from colors;
|
|
8
14
|
|
|
9
15
|
.default {
|
|
10
16
|
display: flex;
|
|
@@ -127,4 +133,147 @@
|
|
|
127
133
|
|
|
128
134
|
.suggestionHighlighted {
|
|
129
135
|
background-color: #ddd;
|
|
130
|
-
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/******************************* coorpmanager theme ***************************************/
|
|
139
|
+
|
|
140
|
+
.coorpmanager {
|
|
141
|
+
width: 100%;
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: flex-start;
|
|
144
|
+
flex-direction: column;
|
|
145
|
+
flex-wrap: nowrap;
|
|
146
|
+
position: relative;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.coorpmanager label {
|
|
150
|
+
width: 100%;
|
|
151
|
+
height: 100%;
|
|
152
|
+
margin-right: 0;
|
|
153
|
+
display: flex;
|
|
154
|
+
align-items: flex-start;
|
|
155
|
+
flex-direction: column;
|
|
156
|
+
position: relative;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.coorpmanager .title {
|
|
160
|
+
flex-grow: 0;
|
|
161
|
+
font-family: Gilroy;
|
|
162
|
+
font-size: 10px;
|
|
163
|
+
font-weight: bold;
|
|
164
|
+
font-stretch: normal;
|
|
165
|
+
font-style: normal;
|
|
166
|
+
line-height: 1.2;
|
|
167
|
+
letter-spacing: normal;
|
|
168
|
+
text-align: left;
|
|
169
|
+
z-index: 1;
|
|
170
|
+
color: cm_grey_400;
|
|
171
|
+
width: auto;
|
|
172
|
+
transition: all 0.25s linear;
|
|
173
|
+
pointer-events: none;
|
|
174
|
+
display: flex;
|
|
175
|
+
flex-direction: row;
|
|
176
|
+
flex-wrap: nowrap;
|
|
177
|
+
position: absolute;
|
|
178
|
+
top: 7px;
|
|
179
|
+
left: 16px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.coorpmanager .title.noValue{
|
|
183
|
+
font-size: 14px;
|
|
184
|
+
font-weight: 500;
|
|
185
|
+
color: cm_grey_700;
|
|
186
|
+
top: 14px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.coorpmanager:focus-within .title.noValue {
|
|
190
|
+
font-size: 10px;
|
|
191
|
+
font-weight: bold;
|
|
192
|
+
color: cm_grey_400;
|
|
193
|
+
top: 7px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.coorpmanager .inputContainer {
|
|
197
|
+
width: 100%
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.coorpmanager input {
|
|
201
|
+
width: 100%;
|
|
202
|
+
height: 44px;
|
|
203
|
+
margin: 0px;
|
|
204
|
+
display: flex;
|
|
205
|
+
align-items: flex-start;
|
|
206
|
+
flex-direction: column;
|
|
207
|
+
flex-grow: 0;
|
|
208
|
+
justify-content: center;
|
|
209
|
+
background-color: cm_grey_100;
|
|
210
|
+
box-sizing: border-box;
|
|
211
|
+
border: none;
|
|
212
|
+
border-radius: 7px;
|
|
213
|
+
color: cm_grey_700;
|
|
214
|
+
font-family: Gilroy;
|
|
215
|
+
font-size: 14px;
|
|
216
|
+
font-weight: 500;
|
|
217
|
+
font-stretch: normal;
|
|
218
|
+
font-style: normal;
|
|
219
|
+
line-height: 44px;
|
|
220
|
+
letter-spacing: normal;
|
|
221
|
+
outline: none;
|
|
222
|
+
padding: 19px 30px 5px 16px;
|
|
223
|
+
text-align: left;
|
|
224
|
+
transition: all 0.25s linear;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.coorpmanager .suggestionsContainerOpen {
|
|
228
|
+
width: 100%;
|
|
229
|
+
margin-left: 0;
|
|
230
|
+
border-radius: 7px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.coorpmanager:focus-within input::placeholder {
|
|
234
|
+
color: cm_grey_400;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.coorpmanager .suggestionsList {
|
|
238
|
+
border-radius: 7px;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.coorpmanager .suggestionHighlighted {
|
|
242
|
+
border-radius: 5px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.coorpmanager input::placeholder {
|
|
246
|
+
color: transparent;
|
|
247
|
+
transition: color 0.25s linear;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.coorpmanager input:hover {
|
|
251
|
+
background-color: cm_grey_150;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.coorpmanager.error .leftIcon {
|
|
255
|
+
background-color: cm_negative_100;
|
|
256
|
+
color: white;
|
|
257
|
+
border-radius: 50%;
|
|
258
|
+
padding: 2px;
|
|
259
|
+
width: 10px;
|
|
260
|
+
height: 10px;
|
|
261
|
+
position: absolute;
|
|
262
|
+
right: 17px;
|
|
263
|
+
top: 14px;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.coorpmanager .errorText {
|
|
267
|
+
flex-grow: 0;
|
|
268
|
+
opacity: 0.5;
|
|
269
|
+
font-family: Gilroy;
|
|
270
|
+
font-size: 10px;
|
|
271
|
+
font-weight: 500;
|
|
272
|
+
font-stretch: normal;
|
|
273
|
+
font-style: normal;
|
|
274
|
+
line-height: 1.2;
|
|
275
|
+
letter-spacing: normal;
|
|
276
|
+
text-align: left;
|
|
277
|
+
padding-top: 8px;
|
|
278
|
+
color: cm_negative_100;
|
|
279
|
+
}
|
|
@@ -33,11 +33,13 @@ declare namespace BrandFormGroup {
|
|
|
33
33
|
required: PropTypes.Requireable<boolean>;
|
|
34
34
|
modified: PropTypes.Requireable<boolean>;
|
|
35
35
|
error: PropTypes.Requireable<boolean>;
|
|
36
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
36
37
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
37
38
|
name: PropTypes.Requireable<string>;
|
|
38
39
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
39
40
|
}> | null | undefined)[]>;
|
|
40
|
-
|
|
41
|
+
theme: PropTypes.Requireable<string>;
|
|
42
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
41
43
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
42
44
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
43
45
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -63,11 +63,13 @@ declare namespace BrandForm {
|
|
|
63
63
|
required: PropTypes.Requireable<boolean>;
|
|
64
64
|
modified: PropTypes.Requireable<boolean>;
|
|
65
65
|
error: PropTypes.Requireable<boolean>;
|
|
66
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
66
67
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
67
68
|
name: PropTypes.Requireable<string>;
|
|
68
69
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
69
70
|
}> | null | undefined)[]>;
|
|
70
|
-
|
|
71
|
+
theme: PropTypes.Requireable<string>;
|
|
72
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
71
73
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
72
74
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
73
75
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -510,6 +512,7 @@ declare namespace BrandForm {
|
|
|
510
512
|
}>>;
|
|
511
513
|
export { tooltip_1 as tooltip };
|
|
512
514
|
export const isLoading: PropTypes.Requireable<boolean>;
|
|
515
|
+
export const theme: PropTypes.Requireable<string>;
|
|
513
516
|
}
|
|
514
517
|
}
|
|
515
518
|
import PropTypes from "prop-types";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/brand-form/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/brand-form/index.js"],"names":[],"mappings":";AA6DA,kEA+EC"}
|
|
@@ -5,11 +5,12 @@ import { NovaCompositionNavigationArrowLeft as ArrowLeft } from '@coorpacademy/n
|
|
|
5
5
|
import BrandFormGroup from '../../molecule/brand-form-group';
|
|
6
6
|
import Provider from '../../atom/provider';
|
|
7
7
|
import Button from '../../atom/button';
|
|
8
|
+
import ButtonLink from '../../atom/button-link';
|
|
8
9
|
import Link from '../../atom/link';
|
|
9
10
|
import Loader from '../../atom/loader';
|
|
10
11
|
import style from './style.css';
|
|
11
12
|
|
|
12
|
-
const buildButtonSection = (onSubmit, submitValue, onReset, resetValue, tooltip, disabled, isModified, isPending, darkColor) => {
|
|
13
|
+
const buildButtonSection = (onSubmit, submitValue, onReset, resetValue, tooltip, disabled, isModified, isPending, darkColor, theme) => {
|
|
13
14
|
if (!onSubmit && !onReset) {
|
|
14
15
|
return null;
|
|
15
16
|
}
|
|
@@ -19,7 +20,14 @@ const buildButtonSection = (onSubmit, submitValue, onReset, resetValue, tooltip,
|
|
|
19
20
|
"data-tip": tooltip.title,
|
|
20
21
|
"data-for": "submitButton",
|
|
21
22
|
className: style.saveButton
|
|
22
|
-
}, /*#__PURE__*/React.createElement(
|
|
23
|
+
}, theme === 'cm' ? /*#__PURE__*/React.createElement(ButtonLink, {
|
|
24
|
+
type: "primary",
|
|
25
|
+
label: submitValue,
|
|
26
|
+
disabled: disabledSubmit,
|
|
27
|
+
"data-testid": "submit-button",
|
|
28
|
+
buttonType: "submit",
|
|
29
|
+
onClick: onSubmit
|
|
30
|
+
}) : /*#__PURE__*/React.createElement(Button, {
|
|
23
31
|
type: "submit",
|
|
24
32
|
disabled: disabledSubmit,
|
|
25
33
|
submitValue: submitValue
|
|
@@ -39,7 +47,7 @@ const buildButtonSection = (onSubmit, submitValue, onReset, resetValue, tooltip,
|
|
|
39
47
|
}, submitButton, resetButton);
|
|
40
48
|
};
|
|
41
49
|
|
|
42
|
-
|
|
50
|
+
const BrandForm = (props, context) => {
|
|
43
51
|
const {
|
|
44
52
|
groups,
|
|
45
53
|
disabled,
|
|
@@ -51,7 +59,8 @@ function BrandForm(props, context) {
|
|
|
51
59
|
resetValue,
|
|
52
60
|
back,
|
|
53
61
|
tooltip,
|
|
54
|
-
isLoading
|
|
62
|
+
isLoading,
|
|
63
|
+
theme
|
|
55
64
|
} = props;
|
|
56
65
|
const {
|
|
57
66
|
skin
|
|
@@ -76,7 +85,7 @@ function BrandForm(props, context) {
|
|
|
76
85
|
key: index
|
|
77
86
|
}, /*#__PURE__*/React.createElement(BrandFormGroup, group));
|
|
78
87
|
});
|
|
79
|
-
const buttonSection = buildButtonSection(onSubmit, submitValue, onReset, resetValue, tooltip, disabled, isModified, isPending, darkColor);
|
|
88
|
+
const buttonSection = buildButtonSection(onSubmit, submitValue, onReset, resetValue, tooltip, disabled, isModified, isPending, darkColor, theme);
|
|
80
89
|
const handleSubmit = useMemo(() => e => {
|
|
81
90
|
e.preventDefault();
|
|
82
91
|
return onSubmit(e);
|
|
@@ -95,7 +104,7 @@ function BrandForm(props, context) {
|
|
|
95
104
|
onReset: handleReset,
|
|
96
105
|
className: style.form
|
|
97
106
|
}, brandGroups, buttonSection));
|
|
98
|
-
}
|
|
107
|
+
};
|
|
99
108
|
|
|
100
109
|
BrandForm.contextTypes = {
|
|
101
110
|
skin: Provider.childContextTypes.skin
|
|
@@ -123,7 +132,8 @@ BrandForm.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
123
132
|
title: PropTypes.string,
|
|
124
133
|
place: PropTypes.string
|
|
125
134
|
}),
|
|
126
|
-
isLoading: PropTypes.bool
|
|
135
|
+
isLoading: PropTypes.bool,
|
|
136
|
+
theme: PropTypes.string
|
|
127
137
|
} : {};
|
|
128
138
|
export default BrandForm;
|
|
129
139
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","NovaCompositionNavigationArrowLeft","ArrowLeft","BrandFormGroup","Provider","Button","Link","Loader","style","buildButtonSection","onSubmit","submitValue","onReset","resetValue","tooltip","disabled","isModified","isPending","darkColor","disabledSubmit","submitButton","title","saveButton","cancelBackground","backgroundColor","resetButton","buttons","BrandForm","props","context","groups","back","isLoading","skin","backView","color","arrowBack","link","backDesc","desc","brandGroups","map","group","index","buttonSection","handleSubmit","e","preventDefault","handleReset","loaderContainer","loader","form","contextTypes","childContextTypes","defaultProps","place","propTypes","arrayOf","shape","isRequired","bool","func","children","href","string"],"sources":["../../../src/organism/brand-form/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowLeft as ArrowLeft} from '@coorpacademy/nova-icons';\nimport BrandFormGroup from '../../molecule/brand-form-group';\nimport Provider from '../../atom/provider';\nimport Button from '../../atom/button';\nimport Link from '../../atom/link';\nimport Loader from '../../atom/loader';\nimport style from './style.css';\n\nconst buildButtonSection = (\n onSubmit,\n submitValue,\n onReset,\n resetValue,\n tooltip,\n disabled,\n isModified,\n isPending,\n darkColor\n) => {\n if (!onSubmit && !onReset) {\n return null;\n }\n\n const disabledSubmit = disabled || isPending || !isModified;\n const submitButton = onSubmit ? (\n <div data-tip={tooltip.title} data-for=\"submitButton\" className={style.saveButton}>\n <Button type=\"submit\" disabled={disabledSubmit} submitValue={submitValue} />\n </div>\n ) : null;\n\n const cancelBackground = {backgroundColor: darkColor};\n\n const resetButton = onReset ? (\n <div className={style.resetButton}>\n <Button type=\"reset\" submitValue={resetValue} style={cancelBackground} />\n </div>\n ) : null;\n\n return (\n <div className={style.buttons}>\n {submitButton}\n {resetButton}\n </div>\n );\n};\
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","NovaCompositionNavigationArrowLeft","ArrowLeft","BrandFormGroup","Provider","Button","ButtonLink","Link","Loader","style","buildButtonSection","onSubmit","submitValue","onReset","resetValue","tooltip","disabled","isModified","isPending","darkColor","theme","disabledSubmit","submitButton","title","saveButton","cancelBackground","backgroundColor","resetButton","buttons","BrandForm","props","context","groups","back","isLoading","skin","backView","color","arrowBack","link","backDesc","desc","brandGroups","map","group","index","buttonSection","handleSubmit","e","preventDefault","handleReset","loaderContainer","loader","form","contextTypes","childContextTypes","defaultProps","place","propTypes","arrayOf","shape","isRequired","bool","func","children","href","string"],"sources":["../../../src/organism/brand-form/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowLeft as ArrowLeft} from '@coorpacademy/nova-icons';\nimport BrandFormGroup from '../../molecule/brand-form-group';\nimport Provider from '../../atom/provider';\nimport Button from '../../atom/button';\nimport ButtonLink from '../../atom/button-link';\nimport Link from '../../atom/link';\nimport Loader from '../../atom/loader';\nimport style from './style.css';\n\nconst buildButtonSection = (\n onSubmit,\n submitValue,\n onReset,\n resetValue,\n tooltip,\n disabled,\n isModified,\n isPending,\n darkColor,\n theme\n) => {\n if (!onSubmit && !onReset) {\n return null;\n }\n\n const disabledSubmit = disabled || isPending || !isModified;\n const submitButton = onSubmit ? (\n <div data-tip={tooltip.title} data-for=\"submitButton\" className={style.saveButton}>\n {theme === 'cm' ? (\n <ButtonLink\n type=\"primary\"\n label={submitValue}\n disabled={disabledSubmit}\n data-testid=\"submit-button\"\n buttonType=\"submit\"\n onClick={onSubmit}\n />\n ) : (\n <Button type=\"submit\" disabled={disabledSubmit} submitValue={submitValue} />\n )}\n </div>\n ) : null;\n\n const cancelBackground = {backgroundColor: darkColor};\n\n const resetButton = onReset ? (\n <div className={style.resetButton}>\n <Button type=\"reset\" submitValue={resetValue} style={cancelBackground} />\n </div>\n ) : null;\n\n return (\n <div className={style.buttons}>\n {submitButton}\n {resetButton}\n </div>\n );\n};\nconst BrandForm = (props, context) => {\n const {\n groups,\n disabled,\n isModified,\n isPending,\n onSubmit,\n submitValue,\n onReset,\n resetValue,\n back,\n tooltip,\n isLoading,\n theme\n } = props;\n const {skin} = context;\n const darkColor = get('common.dark', skin);\n\n const backView = back ? (\n <p className={style.back}>\n <ArrowLeft style={{color: darkColor}} className={style.arrowBack} />\n <Link href={back.link} className={style.backDesc}>\n {back.desc}\n </Link>\n </p>\n ) : null;\n\n const brandGroups = groups.map((group, index) => {\n return (\n <div className={style.group} key={index}>\n <BrandFormGroup {...group} />\n </div>\n );\n });\n\n const buttonSection = buildButtonSection(\n onSubmit,\n submitValue,\n onReset,\n resetValue,\n tooltip,\n disabled,\n isModified,\n isPending,\n darkColor,\n theme\n );\n\n const handleSubmit = useMemo(\n () => e => {\n e.preventDefault();\n return onSubmit(e);\n },\n [onSubmit]\n );\n\n const handleReset = useMemo(\n () => e => {\n e.preventDefault();\n return onReset(e);\n },\n [onReset]\n );\n\n return (\n <div>\n {backView}\n {isLoading ? (\n <div className={style.loaderContainer}>\n <Loader className={style.loader} theme=\"coorpmanager\" />\n </div>\n ) : (\n <form onSubmit={handleSubmit} onReset={handleReset} className={style.form}>\n {brandGroups}\n {buttonSection}\n </form>\n )}\n </div>\n );\n};\n\nBrandForm.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nBrandForm.defaultProps = {\n tooltip: {\n title: '',\n place: 'top'\n }\n};\n\nBrandForm.propTypes = {\n groups: PropTypes.arrayOf(PropTypes.shape(BrandFormGroup.propTypes)).isRequired,\n disabled: PropTypes.bool,\n isModified: PropTypes.bool,\n isPending: PropTypes.bool,\n onSubmit: PropTypes.func,\n submitValue: Button.propTypes.submitValue,\n onReset: PropTypes.func,\n resetValue: Button.propTypes.submitValue,\n back: PropTypes.shape({\n desc: Link.propTypes.children,\n link: Link.propTypes.href\n }),\n tooltip: PropTypes.shape({\n title: PropTypes.string,\n place: PropTypes.string\n }),\n isLoading: PropTypes.bool,\n theme: PropTypes.string\n};\n\nexport default BrandForm;\n"],"mappings":"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"}
|
|
@@ -80,11 +80,13 @@ declare namespace WizardContents {
|
|
|
80
80
|
required: PropTypes.Requireable<boolean>;
|
|
81
81
|
modified: PropTypes.Requireable<boolean>;
|
|
82
82
|
error: PropTypes.Requireable<boolean>;
|
|
83
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
83
84
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
84
85
|
name: PropTypes.Requireable<string>;
|
|
85
86
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
86
87
|
}> | null | undefined)[]>;
|
|
87
|
-
|
|
88
|
+
theme: PropTypes.Requireable<string>;
|
|
89
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
88
90
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
89
91
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
90
92
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -526,6 +528,7 @@ declare namespace WizardContents {
|
|
|
526
528
|
place: PropTypes.Requireable<string>;
|
|
527
529
|
}>>;
|
|
528
530
|
isLoading: PropTypes.Requireable<boolean>;
|
|
531
|
+
theme: PropTypes.Requireable<string>;
|
|
529
532
|
}> | PropTypes.InferProps<{
|
|
530
533
|
type: PropTypes.Requireable<string>;
|
|
531
534
|
languageTabs: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
@@ -165,11 +165,13 @@ declare namespace BrandUpdate {
|
|
|
165
165
|
required: PropTypes.Requireable<boolean>;
|
|
166
166
|
modified: PropTypes.Requireable<boolean>;
|
|
167
167
|
error: PropTypes.Requireable<boolean>;
|
|
168
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
168
169
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
169
170
|
name: PropTypes.Requireable<string>;
|
|
170
171
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
171
172
|
}> | null | undefined)[]>;
|
|
172
|
-
|
|
173
|
+
theme: PropTypes.Requireable<string>;
|
|
174
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
173
175
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
174
176
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
175
177
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -611,6 +613,7 @@ declare namespace BrandUpdate {
|
|
|
611
613
|
place: PropTypes.Requireable<string>;
|
|
612
614
|
}>>;
|
|
613
615
|
isLoading: PropTypes.Requireable<boolean>;
|
|
616
|
+
theme: PropTypes.Requireable<string>;
|
|
614
617
|
}> | PropTypes.InferProps<{
|
|
615
618
|
key: PropTypes.Requireable<string>;
|
|
616
619
|
type: PropTypes.Requireable<string>;
|
|
@@ -9,11 +9,13 @@ declare namespace Autocomplete {
|
|
|
9
9
|
const required: PropTypes.Requireable<boolean>;
|
|
10
10
|
const modified: PropTypes.Requireable<boolean>;
|
|
11
11
|
const error: PropTypes.Requireable<boolean>;
|
|
12
|
+
const errorMessage: PropTypes.Requireable<string>;
|
|
12
13
|
const suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
13
14
|
name: PropTypes.Requireable<string>;
|
|
14
15
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
15
16
|
}> | null | undefined)[]>;
|
|
16
|
-
const
|
|
17
|
+
const theme: PropTypes.Requireable<string>;
|
|
18
|
+
const onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
17
19
|
const onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
18
20
|
const onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
19
21
|
const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";AAgBA,uDA8FC"}
|
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
5
|
|
|
6
|
+
var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
|
|
7
|
+
|
|
8
|
+
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
|
|
9
|
+
|
|
6
10
|
var _isNil2 = _interopRequireDefault(require("lodash/fp/isNil"));
|
|
7
11
|
|
|
8
12
|
var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
|
|
@@ -15,6 +19,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
15
19
|
|
|
16
20
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
21
|
|
|
22
|
+
var _novaIcons = require("@coorpacademy/nova-icons");
|
|
23
|
+
|
|
18
24
|
var _getClassState = _interopRequireDefault(require("../../util/get-class-state"));
|
|
19
25
|
|
|
20
26
|
var _style = _interopRequireDefault(require("./style.css"));
|
|
@@ -25,6 +31,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
25
31
|
|
|
26
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
33
|
|
|
34
|
+
const THEME_STYLE = {
|
|
35
|
+
coorpmanager: _style.default.coorpmanager,
|
|
36
|
+
default: _style.default.default
|
|
37
|
+
};
|
|
38
|
+
|
|
28
39
|
const renderSuggestion = suggestion => /*#__PURE__*/_react.default.createElement("span", null, suggestion.name);
|
|
29
40
|
|
|
30
41
|
const Autocomplete = props => {
|
|
@@ -35,32 +46,51 @@ const Autocomplete = props => {
|
|
|
35
46
|
required,
|
|
36
47
|
modified = false,
|
|
37
48
|
error = false,
|
|
49
|
+
errorMessage,
|
|
38
50
|
suggestions = [],
|
|
39
|
-
|
|
51
|
+
onInput = _noop2.default,
|
|
40
52
|
onFetch = _noop2.default,
|
|
41
53
|
onClear = _noop2.default,
|
|
42
54
|
onBlur = _noop2.default,
|
|
43
55
|
onSuggestionSelected = _noop2.default,
|
|
44
|
-
title: propsTitle
|
|
56
|
+
title: propsTitle,
|
|
57
|
+
theme = 'default'
|
|
45
58
|
} = props;
|
|
46
|
-
const
|
|
47
|
-
const
|
|
48
|
-
const
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
const
|
|
59
|
+
const mainClass = THEME_STYLE[theme];
|
|
60
|
+
const title = (0, _react.useMemo)(() => `${propsTitle}${required ? '*' : ''}`, [propsTitle, required]);
|
|
61
|
+
const className = (0, _react.useMemo)(() => (0, _getClassState.default)(_style.default.default, _style.default.modified, _style.default.error, modified, error), [modified, error]);
|
|
62
|
+
const handleInput = (0, _react.useCallback)(e => {
|
|
63
|
+
onInput(e);
|
|
64
|
+
}, [onInput]);
|
|
65
|
+
const handleBlur = (0, _react.useCallback)((e, selectedSuggestion) => onBlur(e, selectedSuggestion), [onBlur]);
|
|
66
|
+
const handleSuggestionsFetchRequested = (0, _react.useCallback)(e => onFetch(e), [onFetch]);
|
|
67
|
+
const handleSuggestionsClearRequested = (0, _react.useCallback)(e => onClear(e), [onClear]);
|
|
68
|
+
const handleSuggestionsSelected = (0, _react.useCallback)((e, data) => onSuggestionSelected(data), [onSuggestionSelected]);
|
|
53
69
|
const inputProps = {
|
|
54
70
|
placeholder,
|
|
55
71
|
value,
|
|
56
|
-
onChange:
|
|
57
|
-
onBlur: handleBlur
|
|
72
|
+
onChange: _noop2.default,
|
|
73
|
+
onBlur: handleBlur,
|
|
74
|
+
onInput: handleInput,
|
|
75
|
+
'data-testid': 'autocomplete-input'
|
|
58
76
|
};
|
|
77
|
+
const errorIconView = theme === 'coorpmanager' && error ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
|
|
78
|
+
className: _style.default.leftIcon
|
|
79
|
+
}) : null;
|
|
80
|
+
const errorText = theme === 'coorpmanager' && error ? /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
+
className: _style.default.errorText // eslint-disable-next-line react/no-danger
|
|
82
|
+
,
|
|
83
|
+
dangerouslySetInnerHTML: {
|
|
84
|
+
__html: errorMessage
|
|
85
|
+
}
|
|
86
|
+
}) : null;
|
|
59
87
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
60
|
-
className: (0, _classnames.default)(className, (0, _isNil2.default)(
|
|
88
|
+
className: (0, _classnames.default)(mainClass, className, (0, _isNil2.default)(propsTitle) && _style.default.isNoTitle)
|
|
61
89
|
}, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement("span", {
|
|
62
|
-
className: _style.default.title
|
|
63
|
-
}, title), /*#__PURE__*/_react.default.createElement("div",
|
|
90
|
+
className: (0, _classnames.default)(_style.default.title, (0, _isEmpty2.default)(value) && _style.default.noValue)
|
|
91
|
+
}, title), /*#__PURE__*/_react.default.createElement("div", {
|
|
92
|
+
className: _style.default.inputContainer
|
|
93
|
+
}, /*#__PURE__*/_react.default.createElement(_reactAutosuggest.default, {
|
|
64
94
|
theme: {
|
|
65
95
|
container: _style.default.container,
|
|
66
96
|
input: _style.default.input,
|
|
@@ -78,7 +108,7 @@ const Autocomplete = props => {
|
|
|
78
108
|
inputProps: inputProps,
|
|
79
109
|
focusInputOnSuggestionClick: false,
|
|
80
110
|
onSuggestionSelected: handleSuggestionsSelected
|
|
81
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
111
|
+
}), errorIconView, errorText)), /*#__PURE__*/_react.default.createElement("div", {
|
|
82
112
|
className: _style.default.description
|
|
83
113
|
}, description));
|
|
84
114
|
};
|
|
@@ -91,11 +121,13 @@ Autocomplete.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
91
121
|
required: _propTypes.default.bool,
|
|
92
122
|
modified: _propTypes.default.bool,
|
|
93
123
|
error: _propTypes.default.bool,
|
|
124
|
+
errorMessage: _propTypes.default.string,
|
|
94
125
|
suggestions: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
95
126
|
name: _propTypes.default.string,
|
|
96
127
|
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
97
128
|
})),
|
|
98
|
-
|
|
129
|
+
theme: _propTypes.default.oneOf((0, _keys2.default)(THEME_STYLE)),
|
|
130
|
+
onInput: _propTypes.default.func,
|
|
99
131
|
onFetch: _propTypes.default.func,
|
|
100
132
|
onClear: _propTypes.default.func,
|
|
101
133
|
onBlur: _propTypes.default.func,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["renderSuggestion","suggestion","name","Autocomplete","props","placeholder","value","description","required","modified","error","suggestions","
|
|
1
|
+
{"version":3,"file":"index.js","names":["THEME_STYLE","coorpmanager","style","default","renderSuggestion","suggestion","name","Autocomplete","props","placeholder","value","description","required","modified","error","errorMessage","suggestions","onInput","onFetch","onClear","onBlur","onSuggestionSelected","title","propsTitle","theme","mainClass","useMemo","className","getClassState","handleInput","useCallback","e","handleBlur","selectedSuggestion","handleSuggestionsFetchRequested","handleSuggestionsClearRequested","handleSuggestionsSelected","data","inputProps","onChange","errorIconView","leftIcon","errorText","__html","classnames","isNoTitle","noValue","inputContainer","container","input","suggestionsContainer","suggestionsContainerOpen","suggestionsList","suggestionHighlighted","propTypes","PropTypes","string","bool","arrayOf","shape","oneOfType","number","oneOf","func"],"sources":["../../../src/atom/autocomplete/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport Autosuggest from 'react-autosuggest';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {noop, isNil, isEmpty, keys} from 'lodash/fp';\nimport {NovaSolidStatusClose as ErrorIcon} from '@coorpacademy/nova-icons';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst THEME_STYLE = {\n coorpmanager: style.coorpmanager,\n default: style.default\n};\n\nconst renderSuggestion = suggestion => <span>{suggestion.name}</span>;\n\nconst Autocomplete = props => {\n const {\n placeholder = '',\n value,\n description,\n required,\n modified = false,\n error = false,\n errorMessage,\n suggestions = [],\n onInput = noop,\n onFetch = noop,\n onClear = noop,\n onBlur = noop,\n onSuggestionSelected = noop,\n title: propsTitle,\n theme = 'default'\n } = props;\n\n const mainClass = THEME_STYLE[theme];\n const title = useMemo(() => `${propsTitle}${required ? '*' : ''}`, [propsTitle, required]);\n const className = useMemo(\n () => getClassState(style.default, style.modified, style.error, modified, error),\n [modified, error]\n );\n\n const handleInput = useCallback(\n e => {\n onInput(e);\n },\n [onInput]\n );\n const handleBlur = useCallback(\n (e, selectedSuggestion) => onBlur(e, selectedSuggestion),\n [onBlur]\n );\n const handleSuggestionsFetchRequested = useCallback(e => onFetch(e), [onFetch]);\n const handleSuggestionsClearRequested = useCallback(e => onClear(e), [onClear]);\n const handleSuggestionsSelected = useCallback(\n (e, data) => onSuggestionSelected(data),\n [onSuggestionSelected]\n );\n\n const inputProps = {\n placeholder,\n value,\n onChange: noop,\n onBlur: handleBlur,\n onInput: handleInput,\n 'data-testid': 'autocomplete-input'\n };\n\n const errorIconView =\n theme === 'coorpmanager' && error ? <ErrorIcon className={style.leftIcon} /> : null;\n\n const errorText =\n theme === 'coorpmanager' && error ? (\n <div\n className={style.errorText}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: errorMessage}}\n />\n ) : null;\n return (\n <div className={classnames(mainClass, className, isNil(propsTitle) && style.isNoTitle)}>\n <label>\n <span className={classnames(style.title, isEmpty(value) && style.noValue)}>{title}</span>\n <div className={style.inputContainer}>\n <Autosuggest\n theme={{\n container: style.container,\n input: style.input,\n suggestionsContainer: style.suggestionsContainer,\n suggestionsContainerOpen: style.suggestionsContainerOpen,\n suggestionsList: style.suggestionsList,\n suggestion: style.suggestion,\n suggestionHighlighted: style.suggestionHighlighted\n }}\n suggestions={suggestions}\n onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n onSuggestionsClearRequested={handleSuggestionsClearRequested}\n getSuggestionValue={noop}\n renderSuggestion={renderSuggestion}\n inputProps={inputProps}\n focusInputOnSuggestionClick={false}\n onSuggestionSelected={handleSuggestionsSelected}\n />\n {errorIconView}\n {errorText}\n </div>\n </label>\n <div className={style.description}>{description}</div>\n </div>\n );\n};\n\nAutocomplete.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n value: PropTypes.string,\n description: PropTypes.string,\n required: PropTypes.bool,\n modified: PropTypes.bool,\n error: PropTypes.bool,\n errorMessage: PropTypes.string,\n suggestions: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n })\n ),\n theme: PropTypes.oneOf(keys(THEME_STYLE)),\n onInput: PropTypes.func,\n onFetch: PropTypes.func,\n onClear: PropTypes.func,\n onBlur: PropTypes.func,\n onSuggestionSelected: PropTypes.func\n};\n\nexport default Autocomplete;\n"],"mappings":"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"}
|
|
@@ -5,6 +5,12 @@
|
|
|
5
5
|
@value dark from colors;
|
|
6
6
|
@value medium from colors;
|
|
7
7
|
@value white from colors;
|
|
8
|
+
@value cm_positive_100 from colors;
|
|
9
|
+
@value cm_negative_100 from colors;
|
|
10
|
+
@value cm_grey_100 from colors;
|
|
11
|
+
@value cm_grey_150 from colors;
|
|
12
|
+
@value cm_grey_400 from colors;
|
|
13
|
+
@value cm_grey_700 from colors;
|
|
8
14
|
|
|
9
15
|
.default {
|
|
10
16
|
display: flex;
|
|
@@ -127,4 +133,147 @@
|
|
|
127
133
|
|
|
128
134
|
.suggestionHighlighted {
|
|
129
135
|
background-color: #ddd;
|
|
130
|
-
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/******************************* coorpmanager theme ***************************************/
|
|
139
|
+
|
|
140
|
+
.coorpmanager {
|
|
141
|
+
width: 100%;
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: flex-start;
|
|
144
|
+
flex-direction: column;
|
|
145
|
+
flex-wrap: nowrap;
|
|
146
|
+
position: relative;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.coorpmanager label {
|
|
150
|
+
width: 100%;
|
|
151
|
+
height: 100%;
|
|
152
|
+
margin-right: 0;
|
|
153
|
+
display: flex;
|
|
154
|
+
align-items: flex-start;
|
|
155
|
+
flex-direction: column;
|
|
156
|
+
position: relative;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.coorpmanager .title {
|
|
160
|
+
flex-grow: 0;
|
|
161
|
+
font-family: Gilroy;
|
|
162
|
+
font-size: 10px;
|
|
163
|
+
font-weight: bold;
|
|
164
|
+
font-stretch: normal;
|
|
165
|
+
font-style: normal;
|
|
166
|
+
line-height: 1.2;
|
|
167
|
+
letter-spacing: normal;
|
|
168
|
+
text-align: left;
|
|
169
|
+
z-index: 1;
|
|
170
|
+
color: cm_grey_400;
|
|
171
|
+
width: auto;
|
|
172
|
+
transition: all 0.25s linear;
|
|
173
|
+
pointer-events: none;
|
|
174
|
+
display: flex;
|
|
175
|
+
flex-direction: row;
|
|
176
|
+
flex-wrap: nowrap;
|
|
177
|
+
position: absolute;
|
|
178
|
+
top: 7px;
|
|
179
|
+
left: 16px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.coorpmanager .title.noValue{
|
|
183
|
+
font-size: 14px;
|
|
184
|
+
font-weight: 500;
|
|
185
|
+
color: cm_grey_700;
|
|
186
|
+
top: 14px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.coorpmanager:focus-within .title.noValue {
|
|
190
|
+
font-size: 10px;
|
|
191
|
+
font-weight: bold;
|
|
192
|
+
color: cm_grey_400;
|
|
193
|
+
top: 7px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.coorpmanager .inputContainer {
|
|
197
|
+
width: 100%
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.coorpmanager input {
|
|
201
|
+
width: 100%;
|
|
202
|
+
height: 44px;
|
|
203
|
+
margin: 0px;
|
|
204
|
+
display: flex;
|
|
205
|
+
align-items: flex-start;
|
|
206
|
+
flex-direction: column;
|
|
207
|
+
flex-grow: 0;
|
|
208
|
+
justify-content: center;
|
|
209
|
+
background-color: cm_grey_100;
|
|
210
|
+
box-sizing: border-box;
|
|
211
|
+
border: none;
|
|
212
|
+
border-radius: 7px;
|
|
213
|
+
color: cm_grey_700;
|
|
214
|
+
font-family: Gilroy;
|
|
215
|
+
font-size: 14px;
|
|
216
|
+
font-weight: 500;
|
|
217
|
+
font-stretch: normal;
|
|
218
|
+
font-style: normal;
|
|
219
|
+
line-height: 44px;
|
|
220
|
+
letter-spacing: normal;
|
|
221
|
+
outline: none;
|
|
222
|
+
padding: 19px 30px 5px 16px;
|
|
223
|
+
text-align: left;
|
|
224
|
+
transition: all 0.25s linear;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.coorpmanager .suggestionsContainerOpen {
|
|
228
|
+
width: 100%;
|
|
229
|
+
margin-left: 0;
|
|
230
|
+
border-radius: 7px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.coorpmanager:focus-within input::placeholder {
|
|
234
|
+
color: cm_grey_400;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.coorpmanager .suggestionsList {
|
|
238
|
+
border-radius: 7px;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.coorpmanager .suggestionHighlighted {
|
|
242
|
+
border-radius: 5px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.coorpmanager input::placeholder {
|
|
246
|
+
color: transparent;
|
|
247
|
+
transition: color 0.25s linear;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.coorpmanager input:hover {
|
|
251
|
+
background-color: cm_grey_150;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.coorpmanager.error .leftIcon {
|
|
255
|
+
background-color: cm_negative_100;
|
|
256
|
+
color: white;
|
|
257
|
+
border-radius: 50%;
|
|
258
|
+
padding: 2px;
|
|
259
|
+
width: 10px;
|
|
260
|
+
height: 10px;
|
|
261
|
+
position: absolute;
|
|
262
|
+
right: 17px;
|
|
263
|
+
top: 14px;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.coorpmanager .errorText {
|
|
267
|
+
flex-grow: 0;
|
|
268
|
+
opacity: 0.5;
|
|
269
|
+
font-family: Gilroy;
|
|
270
|
+
font-size: 10px;
|
|
271
|
+
font-weight: 500;
|
|
272
|
+
font-stretch: normal;
|
|
273
|
+
font-style: normal;
|
|
274
|
+
line-height: 1.2;
|
|
275
|
+
letter-spacing: normal;
|
|
276
|
+
text-align: left;
|
|
277
|
+
padding-top: 8px;
|
|
278
|
+
color: cm_negative_100;
|
|
279
|
+
}
|
|
@@ -33,11 +33,13 @@ declare namespace BrandFormGroup {
|
|
|
33
33
|
required: PropTypes.Requireable<boolean>;
|
|
34
34
|
modified: PropTypes.Requireable<boolean>;
|
|
35
35
|
error: PropTypes.Requireable<boolean>;
|
|
36
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
36
37
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
37
38
|
name: PropTypes.Requireable<string>;
|
|
38
39
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
39
40
|
}> | null | undefined)[]>;
|
|
40
|
-
|
|
41
|
+
theme: PropTypes.Requireable<string>;
|
|
42
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
41
43
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
42
44
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
43
45
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -63,11 +63,13 @@ declare namespace BrandForm {
|
|
|
63
63
|
required: PropTypes.Requireable<boolean>;
|
|
64
64
|
modified: PropTypes.Requireable<boolean>;
|
|
65
65
|
error: PropTypes.Requireable<boolean>;
|
|
66
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
66
67
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
67
68
|
name: PropTypes.Requireable<string>;
|
|
68
69
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
69
70
|
}> | null | undefined)[]>;
|
|
70
|
-
|
|
71
|
+
theme: PropTypes.Requireable<string>;
|
|
72
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
71
73
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
72
74
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
73
75
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -510,6 +512,7 @@ declare namespace BrandForm {
|
|
|
510
512
|
}>>;
|
|
511
513
|
export { tooltip_1 as tooltip };
|
|
512
514
|
export const isLoading: PropTypes.Requireable<boolean>;
|
|
515
|
+
export const theme: PropTypes.Requireable<string>;
|
|
513
516
|
}
|
|
514
517
|
}
|
|
515
518
|
import PropTypes from "prop-types";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/brand-form/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/brand-form/index.js"],"names":[],"mappings":";AA6DA,kEA+EC"}
|
|
@@ -17,6 +17,8 @@ var _provider = _interopRequireDefault(require("../../atom/provider"));
|
|
|
17
17
|
|
|
18
18
|
var _button = _interopRequireDefault(require("../../atom/button"));
|
|
19
19
|
|
|
20
|
+
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
|
|
21
|
+
|
|
20
22
|
var _link = _interopRequireDefault(require("../../atom/link"));
|
|
21
23
|
|
|
22
24
|
var _loader = _interopRequireDefault(require("../../atom/loader"));
|
|
@@ -29,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
29
31
|
|
|
30
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
33
|
|
|
32
|
-
const buildButtonSection = (onSubmit, submitValue, onReset, resetValue, tooltip, disabled, isModified, isPending, darkColor) => {
|
|
34
|
+
const buildButtonSection = (onSubmit, submitValue, onReset, resetValue, tooltip, disabled, isModified, isPending, darkColor, theme) => {
|
|
33
35
|
if (!onSubmit && !onReset) {
|
|
34
36
|
return null;
|
|
35
37
|
}
|
|
@@ -39,7 +41,14 @@ const buildButtonSection = (onSubmit, submitValue, onReset, resetValue, tooltip,
|
|
|
39
41
|
"data-tip": tooltip.title,
|
|
40
42
|
"data-for": "submitButton",
|
|
41
43
|
className: _style.default.saveButton
|
|
42
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
44
|
+
}, theme === 'cm' ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
|
|
45
|
+
type: "primary",
|
|
46
|
+
label: submitValue,
|
|
47
|
+
disabled: disabledSubmit,
|
|
48
|
+
"data-testid": "submit-button",
|
|
49
|
+
buttonType: "submit",
|
|
50
|
+
onClick: onSubmit
|
|
51
|
+
}) : /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
43
52
|
type: "submit",
|
|
44
53
|
disabled: disabledSubmit,
|
|
45
54
|
submitValue: submitValue
|
|
@@ -59,7 +68,7 @@ const buildButtonSection = (onSubmit, submitValue, onReset, resetValue, tooltip,
|
|
|
59
68
|
}, submitButton, resetButton);
|
|
60
69
|
};
|
|
61
70
|
|
|
62
|
-
|
|
71
|
+
const BrandForm = (props, context) => {
|
|
63
72
|
const {
|
|
64
73
|
groups,
|
|
65
74
|
disabled,
|
|
@@ -71,7 +80,8 @@ function BrandForm(props, context) {
|
|
|
71
80
|
resetValue,
|
|
72
81
|
back,
|
|
73
82
|
tooltip,
|
|
74
|
-
isLoading
|
|
83
|
+
isLoading,
|
|
84
|
+
theme
|
|
75
85
|
} = props;
|
|
76
86
|
const {
|
|
77
87
|
skin
|
|
@@ -94,7 +104,7 @@ function BrandForm(props, context) {
|
|
|
94
104
|
key: index
|
|
95
105
|
}, /*#__PURE__*/_react.default.createElement(_brandFormGroup.default, group));
|
|
96
106
|
});
|
|
97
|
-
const buttonSection = buildButtonSection(onSubmit, submitValue, onReset, resetValue, tooltip, disabled, isModified, isPending, darkColor);
|
|
107
|
+
const buttonSection = buildButtonSection(onSubmit, submitValue, onReset, resetValue, tooltip, disabled, isModified, isPending, darkColor, theme);
|
|
98
108
|
const handleSubmit = (0, _react.useMemo)(() => e => {
|
|
99
109
|
e.preventDefault();
|
|
100
110
|
return onSubmit(e);
|
|
@@ -113,7 +123,7 @@ function BrandForm(props, context) {
|
|
|
113
123
|
onReset: handleReset,
|
|
114
124
|
className: _style.default.form
|
|
115
125
|
}, brandGroups, buttonSection));
|
|
116
|
-
}
|
|
126
|
+
};
|
|
117
127
|
|
|
118
128
|
BrandForm.contextTypes = {
|
|
119
129
|
skin: _provider.default.childContextTypes.skin
|
|
@@ -141,7 +151,8 @@ BrandForm.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
141
151
|
title: _propTypes.default.string,
|
|
142
152
|
place: _propTypes.default.string
|
|
143
153
|
}),
|
|
144
|
-
isLoading: _propTypes.default.bool
|
|
154
|
+
isLoading: _propTypes.default.bool,
|
|
155
|
+
theme: _propTypes.default.string
|
|
145
156
|
} : {};
|
|
146
157
|
var _default = BrandForm;
|
|
147
158
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["buildButtonSection","onSubmit","submitValue","onReset","resetValue","tooltip","disabled","isModified","isPending","darkColor","disabledSubmit","submitButton","title","style","saveButton","cancelBackground","backgroundColor","resetButton","buttons","BrandForm","props","context","groups","back","isLoading","skin","backView","color","arrowBack","link","backDesc","desc","brandGroups","map","group","index","buttonSection","handleSubmit","useMemo","e","preventDefault","handleReset","loaderContainer","loader","form","contextTypes","Provider","childContextTypes","defaultProps","place","propTypes","PropTypes","arrayOf","shape","BrandFormGroup","isRequired","bool","func","Button","Link","children","href","string"],"sources":["../../../src/organism/brand-form/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowLeft as ArrowLeft} from '@coorpacademy/nova-icons';\nimport BrandFormGroup from '../../molecule/brand-form-group';\nimport Provider from '../../atom/provider';\nimport Button from '../../atom/button';\nimport Link from '../../atom/link';\nimport Loader from '../../atom/loader';\nimport style from './style.css';\n\nconst buildButtonSection = (\n onSubmit,\n submitValue,\n onReset,\n resetValue,\n tooltip,\n disabled,\n isModified,\n isPending,\n darkColor\n) => {\n if (!onSubmit && !onReset) {\n return null;\n }\n\n const disabledSubmit = disabled || isPending || !isModified;\n const submitButton = onSubmit ? (\n <div data-tip={tooltip.title} data-for=\"submitButton\" className={style.saveButton}>\n <Button type=\"submit\" disabled={disabledSubmit} submitValue={submitValue} />\n </div>\n ) : null;\n\n const cancelBackground = {backgroundColor: darkColor};\n\n const resetButton = onReset ? (\n <div className={style.resetButton}>\n <Button type=\"reset\" submitValue={resetValue} style={cancelBackground} />\n </div>\n ) : null;\n\n return (\n <div className={style.buttons}>\n {submitButton}\n {resetButton}\n </div>\n );\n};\
|
|
1
|
+
{"version":3,"file":"index.js","names":["buildButtonSection","onSubmit","submitValue","onReset","resetValue","tooltip","disabled","isModified","isPending","darkColor","theme","disabledSubmit","submitButton","title","style","saveButton","cancelBackground","backgroundColor","resetButton","buttons","BrandForm","props","context","groups","back","isLoading","skin","backView","color","arrowBack","link","backDesc","desc","brandGroups","map","group","index","buttonSection","handleSubmit","useMemo","e","preventDefault","handleReset","loaderContainer","loader","form","contextTypes","Provider","childContextTypes","defaultProps","place","propTypes","PropTypes","arrayOf","shape","BrandFormGroup","isRequired","bool","func","Button","Link","children","href","string"],"sources":["../../../src/organism/brand-form/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowLeft as ArrowLeft} from '@coorpacademy/nova-icons';\nimport BrandFormGroup from '../../molecule/brand-form-group';\nimport Provider from '../../atom/provider';\nimport Button from '../../atom/button';\nimport ButtonLink from '../../atom/button-link';\nimport Link from '../../atom/link';\nimport Loader from '../../atom/loader';\nimport style from './style.css';\n\nconst buildButtonSection = (\n onSubmit,\n submitValue,\n onReset,\n resetValue,\n tooltip,\n disabled,\n isModified,\n isPending,\n darkColor,\n theme\n) => {\n if (!onSubmit && !onReset) {\n return null;\n }\n\n const disabledSubmit = disabled || isPending || !isModified;\n const submitButton = onSubmit ? (\n <div data-tip={tooltip.title} data-for=\"submitButton\" className={style.saveButton}>\n {theme === 'cm' ? (\n <ButtonLink\n type=\"primary\"\n label={submitValue}\n disabled={disabledSubmit}\n data-testid=\"submit-button\"\n buttonType=\"submit\"\n onClick={onSubmit}\n />\n ) : (\n <Button type=\"submit\" disabled={disabledSubmit} submitValue={submitValue} />\n )}\n </div>\n ) : null;\n\n const cancelBackground = {backgroundColor: darkColor};\n\n const resetButton = onReset ? (\n <div className={style.resetButton}>\n <Button type=\"reset\" submitValue={resetValue} style={cancelBackground} />\n </div>\n ) : null;\n\n return (\n <div className={style.buttons}>\n {submitButton}\n {resetButton}\n </div>\n );\n};\nconst BrandForm = (props, context) => {\n const {\n groups,\n disabled,\n isModified,\n isPending,\n onSubmit,\n submitValue,\n onReset,\n resetValue,\n back,\n tooltip,\n isLoading,\n theme\n } = props;\n const {skin} = context;\n const darkColor = get('common.dark', skin);\n\n const backView = back ? (\n <p className={style.back}>\n <ArrowLeft style={{color: darkColor}} className={style.arrowBack} />\n <Link href={back.link} className={style.backDesc}>\n {back.desc}\n </Link>\n </p>\n ) : null;\n\n const brandGroups = groups.map((group, index) => {\n return (\n <div className={style.group} key={index}>\n <BrandFormGroup {...group} />\n </div>\n );\n });\n\n const buttonSection = buildButtonSection(\n onSubmit,\n submitValue,\n onReset,\n resetValue,\n tooltip,\n disabled,\n isModified,\n isPending,\n darkColor,\n theme\n );\n\n const handleSubmit = useMemo(\n () => e => {\n e.preventDefault();\n return onSubmit(e);\n },\n [onSubmit]\n );\n\n const handleReset = useMemo(\n () => e => {\n e.preventDefault();\n return onReset(e);\n },\n [onReset]\n );\n\n return (\n <div>\n {backView}\n {isLoading ? (\n <div className={style.loaderContainer}>\n <Loader className={style.loader} theme=\"coorpmanager\" />\n </div>\n ) : (\n <form onSubmit={handleSubmit} onReset={handleReset} className={style.form}>\n {brandGroups}\n {buttonSection}\n </form>\n )}\n </div>\n );\n};\n\nBrandForm.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nBrandForm.defaultProps = {\n tooltip: {\n title: '',\n place: 'top'\n }\n};\n\nBrandForm.propTypes = {\n groups: PropTypes.arrayOf(PropTypes.shape(BrandFormGroup.propTypes)).isRequired,\n disabled: PropTypes.bool,\n isModified: PropTypes.bool,\n isPending: PropTypes.bool,\n onSubmit: PropTypes.func,\n submitValue: Button.propTypes.submitValue,\n onReset: PropTypes.func,\n resetValue: Button.propTypes.submitValue,\n back: PropTypes.shape({\n desc: Link.propTypes.children,\n link: Link.propTypes.href\n }),\n tooltip: PropTypes.shape({\n title: PropTypes.string,\n place: PropTypes.string\n }),\n isLoading: PropTypes.bool,\n theme: PropTypes.string\n};\n\nexport default BrandForm;\n"],"mappings":"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"}
|
|
@@ -80,11 +80,13 @@ declare namespace WizardContents {
|
|
|
80
80
|
required: PropTypes.Requireable<boolean>;
|
|
81
81
|
modified: PropTypes.Requireable<boolean>;
|
|
82
82
|
error: PropTypes.Requireable<boolean>;
|
|
83
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
83
84
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
84
85
|
name: PropTypes.Requireable<string>;
|
|
85
86
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
86
87
|
}> | null | undefined)[]>;
|
|
87
|
-
|
|
88
|
+
theme: PropTypes.Requireable<string>;
|
|
89
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
88
90
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
89
91
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
90
92
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -526,6 +528,7 @@ declare namespace WizardContents {
|
|
|
526
528
|
place: PropTypes.Requireable<string>;
|
|
527
529
|
}>>;
|
|
528
530
|
isLoading: PropTypes.Requireable<boolean>;
|
|
531
|
+
theme: PropTypes.Requireable<string>;
|
|
529
532
|
}> | PropTypes.InferProps<{
|
|
530
533
|
type: PropTypes.Requireable<string>;
|
|
531
534
|
languageTabs: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
@@ -165,11 +165,13 @@ declare namespace BrandUpdate {
|
|
|
165
165
|
required: PropTypes.Requireable<boolean>;
|
|
166
166
|
modified: PropTypes.Requireable<boolean>;
|
|
167
167
|
error: PropTypes.Requireable<boolean>;
|
|
168
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
168
169
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
169
170
|
name: PropTypes.Requireable<string>;
|
|
170
171
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
171
172
|
}> | null | undefined)[]>;
|
|
172
|
-
|
|
173
|
+
theme: PropTypes.Requireable<string>;
|
|
174
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
173
175
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
174
176
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
175
177
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -611,6 +613,7 @@ declare namespace BrandUpdate {
|
|
|
611
613
|
place: PropTypes.Requireable<string>;
|
|
612
614
|
}>>;
|
|
613
615
|
isLoading: PropTypes.Requireable<boolean>;
|
|
616
|
+
theme: PropTypes.Requireable<string>;
|
|
614
617
|
}> | PropTypes.InferProps<{
|
|
615
618
|
key: PropTypes.Requireable<string>;
|
|
616
619
|
type: PropTypes.Requireable<string>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"ignore_dirs":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.14.
|
|
3
|
+
"version": "11.14.24-alpha.7+25dc0f51d",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -168,5 +168,5 @@
|
|
|
168
168
|
"last 2 versions",
|
|
169
169
|
"IE 11"
|
|
170
170
|
],
|
|
171
|
-
"gitHead": "
|
|
171
|
+
"gitHead": "25dc0f51d715a5df592047df3c9d43b52e2a9bfb"
|
|
172
172
|
}
|