@pareto-engineering/design-system 2.0.0-alpha.52 → 2.0.0-alpha.55
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/cjs/a/AppContext/Context.js +16 -0
- package/dist/cjs/a/AppContext/ContextProvider.js +96 -0
- package/dist/cjs/a/AppContext/index.js +39 -0
- package/dist/cjs/a/AppContext/useApp.js +16 -0
- package/dist/cjs/a/AppContext/useTheme.js +45 -0
- package/dist/cjs/a/index.js +8 -8
- package/dist/cjs/b/Page/common/PageHelmet/PageHelmet.js +1 -1
- package/dist/cjs/b/SocialMediaButton/SocialMediaButton.js +4 -4
- package/dist/cjs/b/ThemeSelector/ThemeSelector.js +1 -1
- package/dist/cjs/f/FormInput/FormInput.js +1 -1
- package/dist/cjs/f/common/Description/Description.js +20 -14
- package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +0 -2
- package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +5 -9
- package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +5 -9
- package/dist/cjs/f/fields/SelectInput/SelectInput.js +16 -8
- package/dist/cjs/f/fields/TextInput/TextInput.js +18 -9
- package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +16 -8
- package/dist/es/a/AppContext/Context.js +2 -0
- package/dist/es/a/AppContext/ContextProvider.js +78 -0
- package/dist/es/a/AppContext/index.js +5 -0
- package/dist/es/a/AppContext/useApp.js +3 -0
- package/dist/es/a/AppContext/useTheme.js +34 -0
- package/dist/es/a/index.js +1 -1
- package/dist/es/b/Page/common/PageHelmet/PageHelmet.js +2 -2
- package/dist/es/b/SocialMediaButton/SocialMediaButton.js +5 -5
- package/dist/es/b/ThemeSelector/ThemeSelector.js +2 -2
- package/dist/es/f/FormInput/FormInput.js +1 -1
- package/dist/es/f/common/Description/Description.js +19 -14
- package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +0 -2
- package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +5 -9
- package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +5 -9
- package/dist/es/f/fields/SelectInput/SelectInput.js +16 -8
- package/dist/es/f/fields/TextInput/TextInput.js +18 -9
- package/dist/es/f/fields/TextareaInput/TextareaInput.js +16 -8
- package/package.json +1 -1
- package/src/__snapshots__/Storyshots.test.js.snap +1528 -1385
- package/src/stories/a/{SiteContext.stories.jsx → AppContext.stories.jsx} +8 -8
- package/src/stories/a/DotInfo.stories.jsx +12 -12
- package/src/stories/a/ProgressBar.stories.jsx +12 -6
- package/src/stories/a/Timestamp.stories.jsx +32 -38
- package/src/stories/b/Logo.stories.jsx +13 -13
- package/src/stories/b/QuestionDropdown.stories.jsx +17 -30
- package/src/stories/b/SocialMediaButton.stories.jsx +34 -52
- package/src/stories/b/ThemeSelector.stories.jsx +5 -5
- package/src/stories/b/Title.stories.jsx +11 -13
- package/src/stories/c/ContentSlides.stories.jsx +30 -300
- package/src/stories/f/ChoicesInput.stories.jsx +62 -129
- package/src/stories/f/Description.stories.jsx +12 -2
- package/src/stories/f/RatingsInput.stories.jsx +21 -22
- package/src/stories/f/SelectInput.stories.jsx +35 -75
- package/src/stories/f/TextInput.stories.jsx +55 -52
- package/src/stories/f/TextareaInput.stories.jsx +31 -46
- package/src/ui/a/{SiteContext → AppContext}/Context.js +0 -0
- package/src/ui/a/{SiteContext → AppContext}/ContextProvider.jsx +8 -7
- package/src/ui/a/AppContext/index.js +5 -0
- package/src/ui/a/{SiteContext/useSite.js → AppContext/useApp.js} +0 -0
- package/src/ui/a/{SiteContext → AppContext}/useTheme.js +0 -0
- package/src/ui/a/index.js +4 -4
- package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx +2 -2
- package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx +4 -4
- package/src/ui/b/ThemeSelector/ThemeSelector.jsx +2 -2
- package/src/ui/f/FormInput/FormInput.jsx +1 -0
- package/src/ui/f/common/Description/Description.jsx +34 -29
- package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +1 -2
- package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +1 -11
- package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx +1 -11
- package/src/ui/f/fields/SelectInput/SelectInput.jsx +16 -9
- package/src/ui/f/fields/TextInput/TextInput.jsx +13 -7
- package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +9 -8
- package/src/ui/a/SiteContext/index.js +0 -5
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var React = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
11
|
+
|
|
12
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
|
+
|
|
14
|
+
var _default = /*#__PURE__*/React.createContext({});
|
|
15
|
+
|
|
16
|
+
exports.default = _default;
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var React = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _useTheme = _interopRequireDefault(require("./useTheme"));
|
|
13
|
+
|
|
14
|
+
var _Context = _interopRequireDefault(require("./Context"));
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
+
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
23
|
+
|
|
24
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
25
|
+
|
|
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
|
+
|
|
28
|
+
// Component-level imports
|
|
29
|
+
// Helper Definitions
|
|
30
|
+
var reducer = (state, action) => {
|
|
31
|
+
switch (action.type) {
|
|
32
|
+
case 'UPDATE_STATE':
|
|
33
|
+
return _objectSpread(_objectSpread({}, state), action.payload);
|
|
34
|
+
|
|
35
|
+
default:
|
|
36
|
+
return state;
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
var AppContextProvider = _ref => {
|
|
41
|
+
var {
|
|
42
|
+
children,
|
|
43
|
+
initialTheme,
|
|
44
|
+
config,
|
|
45
|
+
initialState // ...otherProps
|
|
46
|
+
|
|
47
|
+
} = _ref;
|
|
48
|
+
var theme = (0, _useTheme.default)(initialTheme);
|
|
49
|
+
var [state, dispatch] = (0, React.useReducer)(reducer, initialState);
|
|
50
|
+
return /*#__PURE__*/React.createElement(_Context.default.Provider, {
|
|
51
|
+
value: _objectSpread(_objectSpread({
|
|
52
|
+
state,
|
|
53
|
+
dispatch
|
|
54
|
+
}, config), theme)
|
|
55
|
+
}, children);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
AppContextProvider.propTypes = {
|
|
59
|
+
/**
|
|
60
|
+
* The children JSX
|
|
61
|
+
*/
|
|
62
|
+
children: _propTypes.default.node,
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* The initial theme for the website. If undefined, fallbacks on system preference.
|
|
66
|
+
*/
|
|
67
|
+
initialTheme: _propTypes.default.string,
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* A dictionnary containing settings and preferences to be used application-wide
|
|
71
|
+
*/
|
|
72
|
+
config: _propTypes.default.shape({
|
|
73
|
+
APP: _propTypes.default.shape({
|
|
74
|
+
NAME: _propTypes.default.string.isRequired,
|
|
75
|
+
CANONICAL: _propTypes.default.string.isRequired,
|
|
76
|
+
SUPPORT_EMAIL: _propTypes.default.string,
|
|
77
|
+
TITLE_SUFFIX: _propTypes.default.string
|
|
78
|
+
}),
|
|
79
|
+
SOCIAL: _propTypes.default.shape({
|
|
80
|
+
FACEBOOK: _propTypes.default.string,
|
|
81
|
+
INSTAGRAM: _propTypes.default.string,
|
|
82
|
+
YOUTUBE: _propTypes.default.string
|
|
83
|
+
}),
|
|
84
|
+
CONSTANTS: _propTypes.default.shape({})
|
|
85
|
+
}).isRequired,
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Application context initial state
|
|
89
|
+
*/
|
|
90
|
+
initialState: _propTypes.default.objectOf(_propTypes.default.string)
|
|
91
|
+
};
|
|
92
|
+
AppContextProvider.defaultProps = {
|
|
93
|
+
initialState: {}
|
|
94
|
+
};
|
|
95
|
+
var _default = AppContextProvider;
|
|
96
|
+
exports.default = _default;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "AppContext", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _Context.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "AppContextProvider", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _ContextProvider.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "useApp", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _useApp.default;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "useTheme", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function get() {
|
|
27
|
+
return _useTheme.default;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
var _Context = _interopRequireDefault(require("./Context"));
|
|
32
|
+
|
|
33
|
+
var _ContextProvider = _interopRequireDefault(require("./ContextProvider"));
|
|
34
|
+
|
|
35
|
+
var _useApp = _interopRequireDefault(require("./useApp"));
|
|
36
|
+
|
|
37
|
+
var _useTheme = _interopRequireDefault(require("./useTheme"));
|
|
38
|
+
|
|
39
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _Context = _interopRequireDefault(require("./Context"));
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
14
|
+
var _default = () => (0, _react.useContext)(_Context.default);
|
|
15
|
+
|
|
16
|
+
exports.default = _default;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _default = function _default(initialTheme) {
|
|
11
|
+
var storageKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'theme';
|
|
12
|
+
var isClient = typeof window === 'object';
|
|
13
|
+
var [preferredTheme, setPreferredTheme] = (0, _react.useState)(initialTheme);
|
|
14
|
+
var [userTheme, setUserTheme] = (0, _react.useState)();
|
|
15
|
+
(0, _react.useEffect)(() => {
|
|
16
|
+
var storage = window.localStorage;
|
|
17
|
+
|
|
18
|
+
if (isClient) {
|
|
19
|
+
var storedTheme = window.localStorage.getItem(storageKey); // console.log(storedTheme, storedTheme != userTheme)
|
|
20
|
+
|
|
21
|
+
if (storedTheme && storedTheme !== userTheme) {
|
|
22
|
+
// console.warn('Theme load')
|
|
23
|
+
setPreferredTheme(storedTheme);
|
|
24
|
+
setUserTheme(storedTheme);
|
|
25
|
+
} else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
|
|
26
|
+
setUserTheme(preferredTheme);
|
|
27
|
+
storage.setItem(storageKey, preferredTheme); // console.warn('theme change', preferredTheme)
|
|
28
|
+
} else {
|
|
29
|
+
setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
|
|
30
|
+
storage.removeItem(storageKey); // console.warn('theme reset')
|
|
31
|
+
}
|
|
32
|
+
} else {
|
|
33
|
+
setUserTheme('light');
|
|
34
|
+
}
|
|
35
|
+
}, [preferredTheme, isClient]);
|
|
36
|
+
var isTheme = (0, _react.useCallback)(theme => userTheme === theme || undefined, [userTheme]);
|
|
37
|
+
return {
|
|
38
|
+
userTheme,
|
|
39
|
+
preferredTheme,
|
|
40
|
+
setPreferredTheme,
|
|
41
|
+
isTheme
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.default = _default;
|
package/dist/cjs/a/index.js
CHANGED
|
@@ -21,28 +21,28 @@ Object.defineProperty(exports, "IconList", {
|
|
|
21
21
|
return _IconList.IconList;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
Object.defineProperty(exports, "
|
|
24
|
+
Object.defineProperty(exports, "AppContext", {
|
|
25
25
|
enumerable: true,
|
|
26
26
|
get: function get() {
|
|
27
|
-
return
|
|
27
|
+
return _AppContext.AppContext;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
-
Object.defineProperty(exports, "
|
|
30
|
+
Object.defineProperty(exports, "AppContextProvider", {
|
|
31
31
|
enumerable: true,
|
|
32
32
|
get: function get() {
|
|
33
|
-
return
|
|
33
|
+
return _AppContext.AppContextProvider;
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
|
-
Object.defineProperty(exports, "
|
|
36
|
+
Object.defineProperty(exports, "useApp", {
|
|
37
37
|
enumerable: true,
|
|
38
38
|
get: function get() {
|
|
39
|
-
return
|
|
39
|
+
return _AppContext.useApp;
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
42
|
Object.defineProperty(exports, "useTheme", {
|
|
43
43
|
enumerable: true,
|
|
44
44
|
get: function get() {
|
|
45
|
-
return
|
|
45
|
+
return _AppContext.useTheme;
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
48
|
Object.defineProperty(exports, "ProgressBar", {
|
|
@@ -184,7 +184,7 @@ var _DashboardNavbar = require("./DashboardNavbar");
|
|
|
184
184
|
|
|
185
185
|
var _IconList = require("./IconList");
|
|
186
186
|
|
|
187
|
-
var
|
|
187
|
+
var _AppContext = require("./AppContext");
|
|
188
188
|
|
|
189
189
|
var _ProgressBar = require("./ProgressBar");
|
|
190
190
|
|
|
@@ -132,7 +132,7 @@ var PageHelmet = _ref => {
|
|
|
132
132
|
var props = _extends({}, _ref);
|
|
133
133
|
|
|
134
134
|
// const intl = useIntl()
|
|
135
|
-
var context = (0, _a.
|
|
135
|
+
var context = (0, _a.useApp)();
|
|
136
136
|
var HelmetContent = (0, React.useMemo)(() => helmetMap.reduce(
|
|
137
137
|
/* eslint-disable no-unused-vars -- TODO add test or ssr mode */
|
|
138
138
|
(a, _ref2) => {
|
|
@@ -51,11 +51,11 @@ var defaultsMap = {
|
|
|
51
51
|
/**
|
|
52
52
|
* This is the component description.
|
|
53
53
|
* This component takes `y` as the default color and `x` as the hover color.
|
|
54
|
-
* This components needs to be wrapped within a `
|
|
54
|
+
* This components needs to be wrapped within a `AppContextProvider`.
|
|
55
55
|
*/
|
|
56
56
|
|
|
57
57
|
var SocialMediaButton = _ref => {
|
|
58
|
-
var
|
|
58
|
+
var _applicationContext$S;
|
|
59
59
|
|
|
60
60
|
var {
|
|
61
61
|
id,
|
|
@@ -69,12 +69,12 @@ var SocialMediaButton = _ref => {
|
|
|
69
69
|
} = _ref,
|
|
70
70
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
71
71
|
|
|
72
|
-
var
|
|
72
|
+
var applicationContext = (0, _a.useApp)();
|
|
73
73
|
(0, React.useLayoutEffect)(() => {
|
|
74
74
|
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
75
75
|
}, []);
|
|
76
76
|
var content = type && defaultsMap[type];
|
|
77
|
-
var href = link || (
|
|
77
|
+
var href = link || (applicationContext === null || applicationContext === void 0 ? void 0 : (_applicationContext$S = applicationContext.SOCIAL) === null || _applicationContext$S === void 0 ? void 0 : _applicationContext$S[content.link]);
|
|
78
78
|
return /*#__PURE__*/React.createElement("a", {
|
|
79
79
|
href: href,
|
|
80
80
|
target: "_blank",
|
|
@@ -105,7 +105,7 @@ FormInput.propTypes = {
|
|
|
105
105
|
/**
|
|
106
106
|
* The HTML class names for this element
|
|
107
107
|
*/
|
|
108
|
-
type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', // to be removed
|
|
108
|
+
type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'url', // to be removed
|
|
109
109
|
'extendedTypeInput']),
|
|
110
110
|
|
|
111
111
|
/**
|
|
@@ -7,6 +7,8 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var React = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
|
+
var _formik = require("formik");
|
|
11
|
+
|
|
10
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
13
|
|
|
12
14
|
var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
|
|
@@ -29,20 +31,25 @@ var Description = _ref => {
|
|
|
29
31
|
id,
|
|
30
32
|
className: userClassName,
|
|
31
33
|
style,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
+
description,
|
|
35
|
+
name,
|
|
34
36
|
color // ...otherProps
|
|
35
37
|
|
|
36
38
|
} = _ref;
|
|
37
39
|
(0, React.useLayoutEffect)(() => {
|
|
38
40
|
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
39
41
|
}, []);
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
var [field, meta] = (0, _formik.useField)(name);
|
|
43
|
+
|
|
44
|
+
if (description || (meta.touched || field.value) && meta.error) {
|
|
45
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
46
|
+
id: id,
|
|
47
|
+
className: [baseClassName, componentClassName, userClassName, meta.error ? 'x-error' : "x-".concat(color)].filter(e => e).join(' '),
|
|
48
|
+
style: style
|
|
49
|
+
}, meta.error || description);
|
|
50
|
+
}
|
|
44
51
|
|
|
45
|
-
|
|
52
|
+
return null;
|
|
46
53
|
};
|
|
47
54
|
|
|
48
55
|
Description.propTypes = {
|
|
@@ -62,22 +69,21 @@ Description.propTypes = {
|
|
|
62
69
|
style: _propTypes.default.objectOf(_propTypes.default.string),
|
|
63
70
|
|
|
64
71
|
/**
|
|
65
|
-
*
|
|
72
|
+
* The base color for the description
|
|
66
73
|
*/
|
|
67
|
-
|
|
74
|
+
color: _propTypes.default.string,
|
|
68
75
|
|
|
69
76
|
/**
|
|
70
|
-
*
|
|
77
|
+
* Input description - extra description to guide a use in filling the input
|
|
71
78
|
*/
|
|
72
|
-
|
|
79
|
+
description: _propTypes.default.string,
|
|
73
80
|
|
|
74
81
|
/**
|
|
75
|
-
*
|
|
82
|
+
* The input name (html - and Formik state)
|
|
76
83
|
*/
|
|
77
|
-
|
|
84
|
+
name: _propTypes.default.string.isRequired
|
|
78
85
|
};
|
|
79
86
|
Description.defaultProps = {
|
|
80
|
-
isError: false,
|
|
81
87
|
color: 'metadata'
|
|
82
88
|
};
|
|
83
89
|
var _default = Description;
|
|
@@ -59,7 +59,6 @@ var QueryCombobox = _ref => {
|
|
|
59
59
|
setError
|
|
60
60
|
} = helpers;
|
|
61
61
|
var {
|
|
62
|
-
error,
|
|
63
62
|
value
|
|
64
63
|
} = meta;
|
|
65
64
|
var environment = (0, _reactRelay.useRelayEnvironment)();
|
|
@@ -116,7 +115,6 @@ var QueryCombobox = _ref => {
|
|
|
116
115
|
label,
|
|
117
116
|
description,
|
|
118
117
|
setValue,
|
|
119
|
-
error,
|
|
120
118
|
value,
|
|
121
119
|
color,
|
|
122
120
|
isFetching,
|
|
@@ -43,7 +43,6 @@ var Combobox = _ref => {
|
|
|
43
43
|
options: items,
|
|
44
44
|
getOptions,
|
|
45
45
|
setValue,
|
|
46
|
-
error,
|
|
47
46
|
description,
|
|
48
47
|
value,
|
|
49
48
|
color,
|
|
@@ -112,9 +111,11 @@ var Combobox = _ref => {
|
|
|
112
111
|
getItemProps: getItemProps,
|
|
113
112
|
highlightedIndex: highlightedIndex,
|
|
114
113
|
items: items
|
|
115
|
-
}, getMenuProps()))),
|
|
116
|
-
|
|
117
|
-
|
|
114
|
+
}, getMenuProps()))), /*#__PURE__*/React.createElement(_.FormDescription, {
|
|
115
|
+
className: "v50 mt-v s-1",
|
|
116
|
+
description: description,
|
|
117
|
+
name: name
|
|
118
|
+
}));
|
|
118
119
|
};
|
|
119
120
|
|
|
120
121
|
Combobox.propTypes = {
|
|
@@ -166,11 +167,6 @@ Combobox.propTypes = {
|
|
|
166
167
|
*/
|
|
167
168
|
description: _propTypes.default.string,
|
|
168
169
|
|
|
169
|
-
/**
|
|
170
|
-
* The error object
|
|
171
|
-
*/
|
|
172
|
-
error: _propTypes.default.objectOf(_propTypes.default.string),
|
|
173
|
-
|
|
174
170
|
/**
|
|
175
171
|
* The value of the custom select input
|
|
176
172
|
*/
|
|
@@ -60,7 +60,6 @@ var MultipleCombobox = _ref => {
|
|
|
60
60
|
options: items,
|
|
61
61
|
getOptions,
|
|
62
62
|
setValue,
|
|
63
|
-
error,
|
|
64
63
|
description,
|
|
65
64
|
value,
|
|
66
65
|
color,
|
|
@@ -211,9 +210,11 @@ var MultipleCombobox = _ref => {
|
|
|
211
210
|
getItemProps: getItemProps,
|
|
212
211
|
highlightedIndex: highlightedIndex,
|
|
213
212
|
items: getFilteredItems()
|
|
214
|
-
}, getMenuProps()))),
|
|
215
|
-
|
|
216
|
-
|
|
213
|
+
}, getMenuProps()))), /*#__PURE__*/React.createElement(_.FormDescription, {
|
|
214
|
+
className: "v50 mt-v s-1",
|
|
215
|
+
description: description,
|
|
216
|
+
name: name
|
|
217
|
+
}));
|
|
217
218
|
};
|
|
218
219
|
|
|
219
220
|
MultipleCombobox.propTypes = {
|
|
@@ -265,11 +266,6 @@ MultipleCombobox.propTypes = {
|
|
|
265
266
|
*/
|
|
266
267
|
description: _propTypes.default.string,
|
|
267
268
|
|
|
268
|
-
/**
|
|
269
|
-
* The error object
|
|
270
|
-
*/
|
|
271
|
-
error: _propTypes.default.objectOf(_propTypes.default.string),
|
|
272
|
-
|
|
273
269
|
/**
|
|
274
270
|
* The value of the custom select input
|
|
275
271
|
*/
|
|
@@ -44,13 +44,14 @@ var SelectInput = _ref => {
|
|
|
44
44
|
validate,
|
|
45
45
|
description,
|
|
46
46
|
disabled,
|
|
47
|
-
isLoading
|
|
47
|
+
isLoading,
|
|
48
|
+
autoComplete // ...otherProps
|
|
48
49
|
|
|
49
50
|
} = _ref;
|
|
50
51
|
(0, React.useLayoutEffect)(() => {
|
|
51
52
|
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
52
53
|
}, []);
|
|
53
|
-
var [field
|
|
54
|
+
var [field] = (0, _formik.useField)({
|
|
54
55
|
name,
|
|
55
56
|
validate
|
|
56
57
|
});
|
|
@@ -68,7 +69,8 @@ var SelectInput = _ref => {
|
|
|
68
69
|
}, field, {
|
|
69
70
|
value: field.value || '',
|
|
70
71
|
id: name,
|
|
71
|
-
disabled: disabled
|
|
72
|
+
disabled: disabled,
|
|
73
|
+
autoComplete: autoComplete
|
|
72
74
|
}), options.map(option => {
|
|
73
75
|
// i.e if option is a string like "blah", return { value: "blah", label: "blah" }
|
|
74
76
|
var newOption = typeof option === 'string' ? {
|
|
@@ -82,10 +84,11 @@ var SelectInput = _ref => {
|
|
|
82
84
|
}, newOption.label);
|
|
83
85
|
})), isLoading && /*#__PURE__*/React.createElement(_a.LoadingCircle, {
|
|
84
86
|
className: "x-main2"
|
|
85
|
-
})),
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
})), /*#__PURE__*/React.createElement(_common.FormDescription, {
|
|
88
|
+
className: "v50 mt-v s-1",
|
|
89
|
+
description: description,
|
|
90
|
+
name: name
|
|
91
|
+
}));
|
|
89
92
|
};
|
|
90
93
|
|
|
91
94
|
SelectInput.propTypes = {
|
|
@@ -146,7 +149,12 @@ SelectInput.propTypes = {
|
|
|
146
149
|
/*
|
|
147
150
|
* Whether the query that is fetching the select options is still in flight
|
|
148
151
|
*/
|
|
149
|
-
isLoading: _propTypes.default.bool
|
|
152
|
+
isLoading: _propTypes.default.bool,
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* The autoComplete value that the browser should watch for the input
|
|
156
|
+
*/
|
|
157
|
+
autoComplete: _propTypes.default.string
|
|
150
158
|
};
|
|
151
159
|
SelectInput.defaultProps = {
|
|
152
160
|
disabled: false,
|
|
@@ -45,13 +45,14 @@ var TextInput = _ref => {
|
|
|
45
45
|
description,
|
|
46
46
|
disabled,
|
|
47
47
|
placeholder,
|
|
48
|
-
optional
|
|
48
|
+
optional,
|
|
49
|
+
autoComplete // ...otherProps
|
|
49
50
|
|
|
50
51
|
} = _ref;
|
|
51
52
|
(0, React.useLayoutEffect)(() => {
|
|
52
53
|
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
53
54
|
}, []);
|
|
54
|
-
var [field
|
|
55
|
+
var [field] = (0, _formik.useField)({
|
|
55
56
|
name,
|
|
56
57
|
validate
|
|
57
58
|
});
|
|
@@ -70,11 +71,13 @@ var TextInput = _ref => {
|
|
|
70
71
|
className: "input",
|
|
71
72
|
type: type,
|
|
72
73
|
disabled: disabled,
|
|
73
|
-
placeholder: placeholder
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
className: "v50 mt-v s-1"
|
|
77
|
-
|
|
74
|
+
placeholder: placeholder,
|
|
75
|
+
autoComplete: autoComplete
|
|
76
|
+
}, field)), /*#__PURE__*/React.createElement(_common.FormDescription, {
|
|
77
|
+
className: "v50 mt-v s-1",
|
|
78
|
+
description: description,
|
|
79
|
+
name: name
|
|
80
|
+
}));
|
|
78
81
|
};
|
|
79
82
|
|
|
80
83
|
TextInput.propTypes = {
|
|
@@ -111,7 +114,7 @@ TextInput.propTypes = {
|
|
|
111
114
|
/**
|
|
112
115
|
* The type of the input (html)
|
|
113
116
|
*/
|
|
114
|
-
type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'time', 'datetime', 'month', 'tel', 'hidden']),
|
|
117
|
+
type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'time', 'datetime', 'month', 'tel', 'hidden', 'url']),
|
|
115
118
|
|
|
116
119
|
/**
|
|
117
120
|
* The input field validator function
|
|
@@ -146,7 +149,13 @@ TextInput.propTypes = {
|
|
|
146
149
|
/**
|
|
147
150
|
* Whether the input is optional or not
|
|
148
151
|
*/
|
|
149
|
-
optional: _propTypes.default.bool
|
|
152
|
+
optional: _propTypes.default.bool,
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* The autoComplete value that the browser should watch for the input
|
|
156
|
+
* `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
|
|
157
|
+
*/
|
|
158
|
+
autoComplete: _propTypes.default.string
|
|
150
159
|
};
|
|
151
160
|
TextInput.defaultProps = {
|
|
152
161
|
type: 'text',
|
|
@@ -44,13 +44,14 @@ var TextareaInput = _ref => {
|
|
|
44
44
|
labelColor,
|
|
45
45
|
description,
|
|
46
46
|
disabled,
|
|
47
|
-
placeholder
|
|
47
|
+
placeholder,
|
|
48
|
+
autoComplete // ...otherProps
|
|
48
49
|
|
|
49
50
|
} = _ref;
|
|
50
51
|
(0, React.useLayoutEffect)(() => {
|
|
51
52
|
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
52
53
|
}, []);
|
|
53
|
-
var [field
|
|
54
|
+
var [field] = (0, _formik.useField)({
|
|
54
55
|
name,
|
|
55
56
|
validate
|
|
56
57
|
});
|
|
@@ -69,11 +70,13 @@ var TextareaInput = _ref => {
|
|
|
69
70
|
}, field, {
|
|
70
71
|
placeholder: placeholder,
|
|
71
72
|
rows: rows,
|
|
72
|
-
disabled: disabled
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
className: "v50 mt-v s-1"
|
|
76
|
-
|
|
73
|
+
disabled: disabled,
|
|
74
|
+
autoComplete: autoComplete
|
|
75
|
+
})), /*#__PURE__*/React.createElement(_common.FormDescription, {
|
|
76
|
+
className: "v50 mt-v s-1",
|
|
77
|
+
description: description,
|
|
78
|
+
name: name
|
|
79
|
+
}));
|
|
77
80
|
};
|
|
78
81
|
|
|
79
82
|
TextareaInput.propTypes = {
|
|
@@ -145,7 +148,12 @@ TextareaInput.propTypes = {
|
|
|
145
148
|
/**
|
|
146
149
|
* The textarea placeholder text
|
|
147
150
|
*/
|
|
148
|
-
placeholder: _propTypes.default.string
|
|
151
|
+
placeholder: _propTypes.default.string,
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* The autoComplete value that the browser should watch for the input
|
|
155
|
+
*/
|
|
156
|
+
autoComplete: _propTypes.default.string
|
|
149
157
|
};
|
|
150
158
|
TextareaInput.defaultProps = {
|
|
151
159
|
rows: 3,
|