@semcore/feedback-form 3.4.0 → 3.5.0
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/CHANGELOG.md +6 -0
- package/lib/cjs/FeedbackForm.js +14 -9
- package/lib/cjs/FeedbackForm.js.map +1 -1
- package/lib/es6/FeedbackForm.js +15 -9
- package/lib/es6/FeedbackForm.js.map +1 -1
- package/package.json +1 -1
- package/src/FeedbackForm.js +24 -2
package/CHANGELOG.md
CHANGED
package/lib/cjs/FeedbackForm.js
CHANGED
|
@@ -45,6 +45,8 @@ var _notice = require("@semcore/notice");
|
|
|
45
45
|
|
|
46
46
|
var _flexBox = require("@semcore/flex-box");
|
|
47
47
|
|
|
48
|
+
var _pick = _interopRequireDefault(require("@semcore/utils/lib/pick"));
|
|
49
|
+
|
|
48
50
|
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; }
|
|
49
51
|
|
|
50
52
|
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) { (0, _defineProperty2["default"])(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; }
|
|
@@ -154,26 +156,29 @@ var FeedbackForm = /*#__PURE__*/function (_Component) {
|
|
|
154
156
|
};
|
|
155
157
|
}
|
|
156
158
|
});
|
|
159
|
+
var TooltipProps = ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate'];
|
|
157
160
|
|
|
158
|
-
function Item(
|
|
161
|
+
function Item(_ref12) {
|
|
159
162
|
var _ref = this ? this.asProps : arguments[0],
|
|
160
163
|
_this2 = this;
|
|
161
164
|
|
|
162
|
-
var Children =
|
|
163
|
-
tag =
|
|
164
|
-
|
|
165
|
+
var Children = _ref12.Children,
|
|
166
|
+
tag = _ref12.tag,
|
|
167
|
+
props = (0, _objectWithoutProperties2["default"])(_ref12, ["Children", "tag"]);
|
|
168
|
+
var tooltipProps = (0, _pick["default"])(props, TooltipProps);
|
|
169
|
+
return /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Field, (0, _core.assignProps)({}, _ref), function (_ref13) {
|
|
165
170
|
var _ref2 = _this2 ? _this2.asProps : arguments[0];
|
|
166
171
|
|
|
167
|
-
var input =
|
|
168
|
-
meta =
|
|
169
|
-
other = (0, _objectWithoutProperties2["default"])(
|
|
172
|
+
var input = _ref13.input,
|
|
173
|
+
meta = _ref13.meta,
|
|
174
|
+
other = (0, _objectWithoutProperties2["default"])(_ref13, ["input", "meta"]);
|
|
170
175
|
var invalid = meta.invalid && meta.touched;
|
|
171
176
|
|
|
172
177
|
var inputProps = _objectSpread(_objectSpread({}, input), {}, {
|
|
173
178
|
state: invalid ? 'invalid' : 'normal'
|
|
174
179
|
});
|
|
175
180
|
|
|
176
|
-
return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
|
|
181
|
+
return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], (0, _extends2["default"])({
|
|
177
182
|
title: meta.error,
|
|
178
183
|
visible: invalid && meta.active,
|
|
179
184
|
inline: false,
|
|
@@ -182,7 +187,7 @@ function Item(props) {
|
|
|
182
187
|
flip: {
|
|
183
188
|
fallbackPlacements: ['right', 'bottom']
|
|
184
189
|
}
|
|
185
|
-
}, tag && /*#__PURE__*/_react["default"].createElement("tag", (0, _core.assignProps)(_objectSpread({}, inputProps), _ref2)), typeof Children.origin === 'function' && Children.origin(_objectSpread({
|
|
190
|
+
}, tooltipProps), tag && /*#__PURE__*/_react["default"].createElement("tag", (0, _core.assignProps)(_objectSpread({}, inputProps), _ref2)), typeof Children.origin === 'function' && Children.origin(_objectSpread({
|
|
186
191
|
input: inputProps,
|
|
187
192
|
meta: meta
|
|
188
193
|
}, other)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/FeedbackForm.js"],"names":["FeedbackForm","SFeedbackForm","Box","asProps","Children","styles","loading","forwardRef","other","focusDecorator","api","undefined","submitting","handleSubmit","origin","Component","style","Field","Form","onSubmit","description","error","value","words","split","symbols","join","length","email","test","String","toLowerCase","Item","props","
|
|
1
|
+
{"version":3,"sources":["../../src/FeedbackForm.js"],"names":["FeedbackForm","SFeedbackForm","Box","asProps","Children","styles","loading","forwardRef","other","focusDecorator","api","undefined","submitting","handleSubmit","origin","Component","style","Field","Form","onSubmit","description","error","value","words","split","symbols","join","length","email","test","String","toLowerCase","TooltipProps","Item","tag","props","tooltipProps","input","meta","invalid","touched","inputProps","state","active","fallbackPlacements","Success","SSuccess","SEmail","Submit","SSubmit","Button","Cancel","SCancel","Notice","SNotice","NoticeSmart","defaultProps","theme","use"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Field, Form } from 'react-final-form';\nimport createFocusDecorator from 'final-form-focus';\n\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Button from '@semcore/button';\nimport SpinContainer from '@semcore/spin-container';\nimport Tooltip from '@semcore/tooltip';\nimport { NoticeSmart } from '@semcore/notice';\nimport { Box } from '@semcore/flex-box';\nimport pick from '@semcore/utils/lib/pick';\n\nimport style from './style/feedback-form.shadow.css';\n\nclass FeedbackForm extends Component {\n static displayName = 'FeedbackForm';\n static style = style;\n static FinalForm = {\n Field,\n Form,\n };\n\n static defaultProps = {\n onSubmit: () => {},\n };\n\n static validate = {\n description: (error) => (value = '') => {\n const words = value.split(/\\s+/);\n const symbols = words.join(' ');\n if (symbols.length < 10 || words.length < 3) {\n return error;\n }\n },\n email: (error) => (value = '') => {\n if (!/.+@.+\\..+/i.test(String(value).toLowerCase())) {\n return error;\n }\n },\n };\n\n focusDecorator = createFocusDecorator();\n\n render() {\n const SFeedbackForm = Box;\n const { Children, styles, loading, forwardRef, ...other } = this.asProps;\n\n return (\n <Form decorators={[this.focusDecorator]} {...other}>\n {(api) =>\n sstyled(styles)(\n <SpinContainer size=\"xl\" loading={loading === undefined ? api.submitting : loading}>\n <SFeedbackForm\n tag=\"form\"\n noValidate\n method=\"POST\"\n ref={forwardRef}\n {...other}\n onSubmit={api.handleSubmit}\n >\n {typeof Children.origin === 'function' ? Children.origin(api) : <Children />}\n </SFeedbackForm>\n </SpinContainer>,\n )\n }\n </Form>\n );\n }\n}\n\nconst TooltipProps = [\n 'title',\n 'theme',\n 'strategy',\n 'modifiers',\n 'placement',\n 'interaction',\n 'timeout',\n 'visible',\n 'defaultVisible',\n 'onVisibleChange',\n 'offset',\n 'preventOverflow',\n 'arrow',\n 'flip',\n 'computeStyles',\n 'eventListeners',\n 'onFirstUpdate',\n];\n\nfunction Item({ Children, tag, ...props }) {\n const tooltipProps = pick(props, TooltipProps);\n\n return (\n <Root render={Field}>\n {({ input, meta, ...other }) => {\n const invalid = meta.invalid && meta.touched;\n const inputProps = {\n ...input,\n state: invalid ? 'invalid' : 'normal',\n };\n return (\n <Tooltip\n title={meta.error}\n visible={invalid && meta.active}\n inline={false}\n theme=\"warning\"\n placement=\"left\"\n flip={{\n fallbackPlacements: ['right', 'bottom'],\n }}\n {...tooltipProps}\n >\n {tag && <Root render={tag} {...inputProps} />}\n {typeof Children.origin === 'function' &&\n Children.origin({\n input: inputProps,\n meta,\n ...other,\n })}\n </Tooltip>\n );\n }}\n </Root>\n );\n}\n\nfunction Success(props) {\n const { Children, styles } = props;\n const SSuccess = Root;\n const SEmail = 'div';\n\n return sstyled(styles)(\n <SSuccess render={Box}>\n <SEmail />\n <span>\n <Children />\n </span>\n </SSuccess>,\n );\n}\n// because it is used without a wrapper\nSuccess.style = style;\n\nfunction Submit(props) {\n const { styles } = props;\n const SSubmit = Root;\n return sstyled(styles)(<SSubmit render={Button} type=\"submit\" use=\"primary\" theme=\"success\" />);\n}\n\nfunction Cancel(props) {\n const { styles } = props;\n const SCancel = Root;\n return sstyled(styles)(<SCancel render={Button} type=\"reset\" use=\"secondary\" theme=\"muted\" />);\n}\n\nfunction Notice(props) {\n const { styles } = props;\n const SNotice = Root;\n return sstyled(styles)(<SNotice render={NoticeSmart} />);\n}\n\nNotice.defaultProps = {\n theme: 'gray94',\n use: 'secondary',\n};\n\nexport default createComponent(FeedbackForm, {\n Item,\n Success,\n Submit,\n Cancel,\n Notice,\n});\n"],"file":"FeedbackForm.js"}
|
package/lib/es6/FeedbackForm.js
CHANGED
|
@@ -32,6 +32,7 @@ import SpinContainer from '@semcore/spin-container';
|
|
|
32
32
|
import Tooltip from '@semcore/tooltip';
|
|
33
33
|
import { NoticeSmart } from '@semcore/notice';
|
|
34
34
|
import { Box } from '@semcore/flex-box';
|
|
35
|
+
import pick from '@semcore/utils/lib/pick';
|
|
35
36
|
|
|
36
37
|
/*__reshadow-styles__:"./style/feedback-form.shadow.css"*/
|
|
37
38
|
var style = (
|
|
@@ -144,18 +145,23 @@ _defineProperty(FeedbackForm, "validate", {
|
|
|
144
145
|
}
|
|
145
146
|
});
|
|
146
147
|
|
|
147
|
-
|
|
148
|
+
var TooltipProps = ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate'];
|
|
149
|
+
|
|
150
|
+
function Item(_ref12) {
|
|
148
151
|
var _ref = this ? this.asProps : arguments[0],
|
|
149
152
|
_this2 = this;
|
|
150
153
|
|
|
151
|
-
var Children =
|
|
152
|
-
tag =
|
|
153
|
-
|
|
154
|
+
var Children = _ref12.Children,
|
|
155
|
+
tag = _ref12.tag,
|
|
156
|
+
props = _objectWithoutProperties(_ref12, ["Children", "tag"]);
|
|
157
|
+
|
|
158
|
+
var tooltipProps = pick(props, TooltipProps);
|
|
159
|
+
return /*#__PURE__*/React.createElement(Field, _assignProps({}, _ref), function (_ref13) {
|
|
154
160
|
var _ref2 = _this2 ? _this2.asProps : arguments[0];
|
|
155
161
|
|
|
156
|
-
var input =
|
|
157
|
-
meta =
|
|
158
|
-
other = _objectWithoutProperties(
|
|
162
|
+
var input = _ref13.input,
|
|
163
|
+
meta = _ref13.meta,
|
|
164
|
+
other = _objectWithoutProperties(_ref13, ["input", "meta"]);
|
|
159
165
|
|
|
160
166
|
var invalid = meta.invalid && meta.touched;
|
|
161
167
|
|
|
@@ -163,7 +169,7 @@ function Item(props) {
|
|
|
163
169
|
state: invalid ? 'invalid' : 'normal'
|
|
164
170
|
});
|
|
165
171
|
|
|
166
|
-
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
172
|
+
return /*#__PURE__*/React.createElement(Tooltip, _extends({
|
|
167
173
|
title: meta.error,
|
|
168
174
|
visible: invalid && meta.active,
|
|
169
175
|
inline: false,
|
|
@@ -172,7 +178,7 @@ function Item(props) {
|
|
|
172
178
|
flip: {
|
|
173
179
|
fallbackPlacements: ['right', 'bottom']
|
|
174
180
|
}
|
|
175
|
-
}, tag && /*#__PURE__*/React.createElement("tag", _assignProps2(_objectSpread({}, inputProps), _ref2)), typeof Children.origin === 'function' && Children.origin(_objectSpread({
|
|
181
|
+
}, tooltipProps), tag && /*#__PURE__*/React.createElement("tag", _assignProps2(_objectSpread({}, inputProps), _ref2)), typeof Children.origin === 'function' && Children.origin(_objectSpread({
|
|
176
182
|
input: inputProps,
|
|
177
183
|
meta: meta
|
|
178
184
|
}, other)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/FeedbackForm.js"],"names":["React","Field","Form","createFocusDecorator","createComponent","Component","sstyled","Root","Button","SpinContainer","Tooltip","NoticeSmart","Box","FeedbackForm","SFeedbackForm","asProps","Children","styles","loading","forwardRef","other","focusDecorator","api","undefined","submitting","handleSubmit","origin","style","onSubmit","description","error","value","words","split","symbols","join","length","email","test","String","toLowerCase","Item","props","
|
|
1
|
+
{"version":3,"sources":["../../src/FeedbackForm.js"],"names":["React","Field","Form","createFocusDecorator","createComponent","Component","sstyled","Root","Button","SpinContainer","Tooltip","NoticeSmart","Box","pick","FeedbackForm","SFeedbackForm","asProps","Children","styles","loading","forwardRef","other","focusDecorator","api","undefined","submitting","handleSubmit","origin","style","onSubmit","description","error","value","words","split","symbols","join","length","email","test","String","toLowerCase","TooltipProps","Item","tag","props","tooltipProps","input","meta","invalid","touched","inputProps","state","active","fallbackPlacements","Success","SSuccess","SEmail","Submit","SSubmit","Cancel","SCancel","Notice","SNotice","defaultProps","theme","use"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Field, Form } from 'react-final-form';\nimport createFocusDecorator from 'final-form-focus';\n\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Button from '@semcore/button';\nimport SpinContainer from '@semcore/spin-container';\nimport Tooltip from '@semcore/tooltip';\nimport { NoticeSmart } from '@semcore/notice';\nimport { Box } from '@semcore/flex-box';\nimport pick from '@semcore/utils/lib/pick';\n\nimport style from './style/feedback-form.shadow.css';\n\nclass FeedbackForm extends Component {\n static displayName = 'FeedbackForm';\n static style = style;\n static FinalForm = {\n Field,\n Form,\n };\n\n static defaultProps = {\n onSubmit: () => {},\n };\n\n static validate = {\n description: (error) => (value = '') => {\n const words = value.split(/\\s+/);\n const symbols = words.join(' ');\n if (symbols.length < 10 || words.length < 3) {\n return error;\n }\n },\n email: (error) => (value = '') => {\n if (!/.+@.+\\..+/i.test(String(value).toLowerCase())) {\n return error;\n }\n },\n };\n\n focusDecorator = createFocusDecorator();\n\n render() {\n const SFeedbackForm = Box;\n const { Children, styles, loading, forwardRef, ...other } = this.asProps;\n\n return (\n <Form decorators={[this.focusDecorator]} {...other}>\n {(api) =>\n sstyled(styles)(\n <SpinContainer size=\"xl\" loading={loading === undefined ? api.submitting : loading}>\n <SFeedbackForm\n tag=\"form\"\n noValidate\n method=\"POST\"\n ref={forwardRef}\n {...other}\n onSubmit={api.handleSubmit}\n >\n {typeof Children.origin === 'function' ? Children.origin(api) : <Children />}\n </SFeedbackForm>\n </SpinContainer>,\n )\n }\n </Form>\n );\n }\n}\n\nconst TooltipProps = [\n 'title',\n 'theme',\n 'strategy',\n 'modifiers',\n 'placement',\n 'interaction',\n 'timeout',\n 'visible',\n 'defaultVisible',\n 'onVisibleChange',\n 'offset',\n 'preventOverflow',\n 'arrow',\n 'flip',\n 'computeStyles',\n 'eventListeners',\n 'onFirstUpdate',\n];\n\nfunction Item({ Children, tag, ...props }) {\n const tooltipProps = pick(props, TooltipProps);\n\n return (\n <Root render={Field}>\n {({ input, meta, ...other }) => {\n const invalid = meta.invalid && meta.touched;\n const inputProps = {\n ...input,\n state: invalid ? 'invalid' : 'normal',\n };\n return (\n <Tooltip\n title={meta.error}\n visible={invalid && meta.active}\n inline={false}\n theme=\"warning\"\n placement=\"left\"\n flip={{\n fallbackPlacements: ['right', 'bottom'],\n }}\n {...tooltipProps}\n >\n {tag && <Root render={tag} {...inputProps} />}\n {typeof Children.origin === 'function' &&\n Children.origin({\n input: inputProps,\n meta,\n ...other,\n })}\n </Tooltip>\n );\n }}\n </Root>\n );\n}\n\nfunction Success(props) {\n const { Children, styles } = props;\n const SSuccess = Root;\n const SEmail = 'div';\n\n return sstyled(styles)(\n <SSuccess render={Box}>\n <SEmail />\n <span>\n <Children />\n </span>\n </SSuccess>,\n );\n}\n// because it is used without a wrapper\nSuccess.style = style;\n\nfunction Submit(props) {\n const { styles } = props;\n const SSubmit = Root;\n return sstyled(styles)(<SSubmit render={Button} type=\"submit\" use=\"primary\" theme=\"success\" />);\n}\n\nfunction Cancel(props) {\n const { styles } = props;\n const SCancel = Root;\n return sstyled(styles)(<SCancel render={Button} type=\"reset\" use=\"secondary\" theme=\"muted\" />);\n}\n\nfunction Notice(props) {\n const { styles } = props;\n const SNotice = Root;\n return sstyled(styles)(<SNotice render={NoticeSmart} />);\n}\n\nNotice.defaultProps = {\n theme: 'gray94',\n use: 'secondary',\n};\n\nexport default createComponent(FeedbackForm, {\n Item,\n Success,\n Submit,\n Cancel,\n Notice,\n});\n"],"file":"FeedbackForm.js"}
|
package/package.json
CHANGED
package/src/FeedbackForm.js
CHANGED
|
@@ -8,6 +8,7 @@ import SpinContainer from '@semcore/spin-container';
|
|
|
8
8
|
import Tooltip from '@semcore/tooltip';
|
|
9
9
|
import { NoticeSmart } from '@semcore/notice';
|
|
10
10
|
import { Box } from '@semcore/flex-box';
|
|
11
|
+
import pick from '@semcore/utils/lib/pick';
|
|
11
12
|
|
|
12
13
|
import style from './style/feedback-form.shadow.css';
|
|
13
14
|
|
|
@@ -67,8 +68,28 @@ class FeedbackForm extends Component {
|
|
|
67
68
|
}
|
|
68
69
|
}
|
|
69
70
|
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
const TooltipProps = [
|
|
72
|
+
'title',
|
|
73
|
+
'theme',
|
|
74
|
+
'strategy',
|
|
75
|
+
'modifiers',
|
|
76
|
+
'placement',
|
|
77
|
+
'interaction',
|
|
78
|
+
'timeout',
|
|
79
|
+
'visible',
|
|
80
|
+
'defaultVisible',
|
|
81
|
+
'onVisibleChange',
|
|
82
|
+
'offset',
|
|
83
|
+
'preventOverflow',
|
|
84
|
+
'arrow',
|
|
85
|
+
'flip',
|
|
86
|
+
'computeStyles',
|
|
87
|
+
'eventListeners',
|
|
88
|
+
'onFirstUpdate',
|
|
89
|
+
];
|
|
90
|
+
|
|
91
|
+
function Item({ Children, tag, ...props }) {
|
|
92
|
+
const tooltipProps = pick(props, TooltipProps);
|
|
72
93
|
|
|
73
94
|
return (
|
|
74
95
|
<Root render={Field}>
|
|
@@ -88,6 +109,7 @@ function Item(props) {
|
|
|
88
109
|
flip={{
|
|
89
110
|
fallbackPlacements: ['right', 'bottom'],
|
|
90
111
|
}}
|
|
112
|
+
{...tooltipProps}
|
|
91
113
|
>
|
|
92
114
|
{tag && <Root render={tag} {...inputProps} />}
|
|
93
115
|
{typeof Children.origin === 'function' &&
|