@semcore/feedback-form 5.1.1 → 5.1.4
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 +18 -0
- package/README.md +65 -80
- package/lib/cjs/FeedbackForm.js +8 -8
- package/lib/cjs/FeedbackForm.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/FeedbackForm.js +8 -8
- package/lib/es6/FeedbackForm.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +2 -2
- package/src/FeedbackForm.jsx +0 -179
- package/src/index.d.ts +0 -26
- package/src/index.js +0 -1
- package/src/style/feedback-form.shadow.css +0 -34
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [5.1.4] - 2022-07-22
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/button` [4.0.8 ~> 4.0.9], `@semcore/utils` [3.34.0 ~> 3.35.0]).
|
|
10
|
+
|
|
11
|
+
## [5.1.3] - 2022-07-14
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/button` [4.0.7 ~> 4.0.8]).
|
|
16
|
+
|
|
17
|
+
## [5.1.2] - 2022-07-07
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/button` [4.0.6 ~> 4.0.7], `@semcore/utils` [3.33.0 ~> 3.34.0]).
|
|
22
|
+
|
|
5
23
|
## [5.1.1] - 2022-06-28
|
|
6
24
|
|
|
7
25
|
### Fixed
|
package/README.md
CHANGED
|
@@ -1,82 +1,67 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
# @semcore/feedback-form
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/@semcore/feedback-form)
|
|
4
|
+
[](https://www.npmjs.com/package/@semcore/feedback-form)
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/master/LICENSE)
|
|
6
|
+
|
|
7
|
+
> This component is part of the Intergalactic design system
|
|
8
|
+
|
|
9
|
+
### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/feedback-form/)
|
|
10
|
+
|
|
11
|
+
### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @semcore/ui
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import FeedbackForm from '@semcore/ui/feedback-form';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
<details>
|
|
26
|
+
<summary>Alternative installation and use</summary>
|
|
27
|
+
|
|
28
|
+
**We do not recommend this usage path due to possible dependency and update issues.**
|
|
29
|
+
|
|
30
|
+
### Install
|
|
31
|
+
|
|
32
|
+
You can only install one package from the design system
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
npm install @semcore/feedback-form @semcore/core
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
|
|
39
|
+
of the components that is discussed below. There should only be one version of the package in the project._
|
|
40
|
+
|
|
41
|
+
### Usage
|
|
42
|
+
|
|
43
|
+
You can use the package the same way but without `/ui/` in the import path.
|
|
44
|
+
|
|
45
|
+
```jsx
|
|
9
46
|
import FeedbackForm from '@semcore/feedback-form';
|
|
10
|
-
import { Box } from '@semcore/flex-box';
|
|
11
|
-
import { Small } from '@semcore/typography';
|
|
12
|
-
|
|
13
|
-
import If from '@semcore/utils/lib/if';
|
|
14
|
-
|
|
15
|
-
class MyFeedback extends React.PureComponent {
|
|
16
|
-
render() {
|
|
17
|
-
const validateDescription = FeedbackForm.validate.description(
|
|
18
|
-
`Your feedback must contain at least 3 words (10 characters).`,
|
|
19
|
-
);
|
|
20
|
-
const validateEmail = FeedbackForm.validate.email(`Please enter valid email.`);
|
|
21
|
-
|
|
22
|
-
return (
|
|
23
|
-
<Dropdown>
|
|
24
|
-
<Dropdown.Trigger>
|
|
25
|
-
<Link before={<Chat />}>Send feedback</Link>
|
|
26
|
-
</Dropdown.Trigger>
|
|
27
|
-
<Dropdown.Popper>
|
|
28
|
-
{({ changeVisible }) => (
|
|
29
|
-
<FeedbackForm onSubmit={(data) => console.log(data)}>
|
|
30
|
-
{({ submitSucceeded }) => (
|
|
31
|
-
<React.Fragment>
|
|
32
|
-
<If condition={submitSucceeded}>
|
|
33
|
-
<FeedbackForm.Success>Thank you for your feedback!</FeedbackForm.Success>
|
|
34
|
-
</If>
|
|
35
|
-
<If condition={!submitSucceeded}>
|
|
36
|
-
<FeedbackForm.Item
|
|
37
|
-
name="feedback"
|
|
38
|
-
tag={Textarea}
|
|
39
|
-
validate={validateDescription}
|
|
40
|
-
fullWidth
|
|
41
|
-
autoFocus
|
|
42
|
-
placeholder="Please tell us your suggestion or report an issue"
|
|
43
|
-
/>
|
|
44
|
-
<FeedbackForm.Item
|
|
45
|
-
name="email"
|
|
46
|
-
tag={Input}
|
|
47
|
-
type="email"
|
|
48
|
-
validate={validateEmail}
|
|
49
|
-
placeholder="Reply-to email"
|
|
50
|
-
/>
|
|
51
|
-
<Box mt={-2} mb={4} mx={4}>
|
|
52
|
-
<Small>
|
|
53
|
-
We will only use this email to respond to you on your feedback.{' '}
|
|
54
|
-
<Link href="#">Privacy Policy</Link>
|
|
55
|
-
</Small>
|
|
56
|
-
</Box>
|
|
57
|
-
<FeedbackForm.Item name="needHelp" type="checkbox">
|
|
58
|
-
{({ input }) => (
|
|
59
|
-
<Checkbox {...input} size="s">
|
|
60
|
-
I need help, please contact me
|
|
61
|
-
</Checkbox>
|
|
62
|
-
)}
|
|
63
|
-
</FeedbackForm.Item>
|
|
64
|
-
<Box m={4}>
|
|
65
|
-
<FeedbackForm.Submit>Send feedback</FeedbackForm.Submit>
|
|
66
|
-
<FeedbackForm.Cancel onClick={() => changeVisible(false)}>
|
|
67
|
-
Cancel
|
|
68
|
-
</FeedbackForm.Cancel>
|
|
69
|
-
</Box>
|
|
70
|
-
</If>
|
|
71
|
-
</React.Fragment>
|
|
72
|
-
)}
|
|
73
|
-
</FeedbackForm>
|
|
74
|
-
)}
|
|
75
|
-
</Dropdown.Popper>
|
|
76
|
-
</Dropdown>
|
|
77
|
-
);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
export default MyFeedback;
|
|
82
47
|
```
|
|
48
|
+
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
|
+
## 👤 Author
|
|
52
|
+
|
|
53
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
54
|
+
|
|
55
|
+
## 🤝 Contributing
|
|
56
|
+
|
|
57
|
+
Contributions, issues and feature requests are welcome!
|
|
58
|
+
|
|
59
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
|
|
60
|
+
|
|
61
|
+
## Show your support
|
|
62
|
+
|
|
63
|
+
Give a ⭐️ if this project helped you!
|
|
64
|
+
|
|
65
|
+
## 📝 License
|
|
66
|
+
|
|
67
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
|
package/lib/cjs/FeedbackForm.js
CHANGED
|
@@ -68,17 +68,17 @@ var style = (
|
|
|
68
68
|
/*__reshadow_css_start__*/
|
|
69
69
|
_core.sstyled.insert(
|
|
70
70
|
/*__inner_css_start__*/
|
|
71
|
-
".
|
|
71
|
+
".___SFeedbackForm_1357t_gg_{max-width:320px}.___SCancel_1357t_gg_,.___SSubmit_1357t_gg_{display:inline-flex;margin-right:8px}.___SNotice_1357t_gg_{padding:12px 16px;border-width:1px 0 0;border-top-style:solid;border-radius:0 0 6px 6px}.___SSuccess_1357t_gg_{display:flex;align-items:center;flex-direction:column;width:320px;padding:46px 32px 32px;box-sizing:border-box}.___SEmail_1357t_gg_{margin-bottom:18px;width:80px;height:80px;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='80' height='80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.163 6a1.57 1.57 0 00-1.12.46l-12.91 12.92A34.6 34.6 0 0025.36 75.813a34.6 34.6 0 0037.713-7.503l12.91-12.91a1.578 1.578 0 00.47-1.12V6.89a.9.9 0 00-.9-.89h-47.39z' fill='%2345E0A8'/%3E%3Cpath d='M29 45.285l.2.35c6.19-3.45 24.19-13.67 27.53-10.53-1.13-3.1-17.03.33-27.73 10.18zM28.44 31.634c-1.81 6-9.21 24.47-13.44 30.31l3 .91 1.58-1.32c4.22-9.55 10-26 10.31-31.46-.5-.26-.96.14-1.45 1.56z' fill='%23fff'/%3E%3Cpath d='M15 62.008c4.23-5.84 11.63-24.27 13.44-30.34 1.81-6.07 5.05 6 3.23 11.12' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28 45.942c10.68-10.36 27.27-14 28.43-10.84.69 1.89-13.43 6.26-18.41 12.32' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M44.45 21.93c-3.24-1.16-8.59-2.89-11.45-3.69 4.12-1.83 37-14 39.67-15.24-.92 4.11-4.92 18.28-6.71 24.93-4.83-1.68-9.73-3.15-12.93-4.19-2 2.65-3.808 5.441-5.41 8.35-1.18-3.86-2.33-8.32-3.17-10.16z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M45 22.08L61.74 11M53 23.73L72.64 3M48 32.58L55.86 25' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48.23 30.77l3.46-5.64.97-1.13 2.07.61.43-.13-3.36 3.43-2.47 2.27L48 31.29l.23-.52z' fill='%23000'/%3E%3Cpath d='M33.81 22L23 27.12M40.89 23L34 27.37M62.04 29L58 38.85' stroke='%23fff' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M46.68 41c3.61 2.42-1.87 8.52-3.68 10.12M47.17 44c4.14 2.09 1.16 7.76-1.17 10.6M48.86 49C54.37 53.48 36.31 72.72 35 73.78' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cmask id='a' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='6' width='73' height='73'%3E%3Cpath d='M28.163 6a1.57 1.57 0 00-1.12.46l-12.91 12.92A34.6 34.6 0 0025.36 75.813a34.6 34.6 0 0037.713-7.503l12.91-12.91a1.578 1.578 0 00.47-1.12V6.89a.9.9 0 00-.9-.89h-47.39z' fill='%2345DFA7'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath d='M5 74.687c2.49-2.34 8.24-11 9.52-13.44 13.66-2.12 20.19 10 20.46 13.52a116.257 116.257 0 01-7.76 14.13' fill='%23000'/%3E%3Cpath d='M5 74.687c2.49-2.34 8.24-11 9.52-13.44 13.66-2.12 20.19 10 20.46 13.52a116.257 116.257 0 01-7.76 14.13' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E\")}"
|
|
72
72
|
/*__inner_css_end__*/
|
|
73
|
-
, "
|
|
73
|
+
, "1357t_gg_")
|
|
74
74
|
/*__reshadow_css_end__*/
|
|
75
75
|
, {
|
|
76
|
-
"__SFeedbackForm": "
|
|
77
|
-
"__SCancel": "
|
|
78
|
-
"__SSubmit": "
|
|
79
|
-
"__SNotice": "
|
|
80
|
-
"__SSuccess": "
|
|
81
|
-
"__SEmail": "
|
|
76
|
+
"__SFeedbackForm": "___SFeedbackForm_1357t_gg_",
|
|
77
|
+
"__SCancel": "___SCancel_1357t_gg_",
|
|
78
|
+
"__SSubmit": "___SSubmit_1357t_gg_",
|
|
79
|
+
"__SNotice": "___SNotice_1357t_gg_",
|
|
80
|
+
"__SSuccess": "___SSuccess_1357t_gg_",
|
|
81
|
+
"__SEmail": "___SEmail_1357t_gg_"
|
|
82
82
|
});
|
|
83
83
|
|
|
84
84
|
var FeedbackForm = /*#__PURE__*/function (_Component) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"FeedbackForm.js","names":["FeedbackForm","createFocusDecorator","SFeedbackForm","Box","asProps","Children","styles","loading","forwardRef","other","focusDecorator","api","sstyled","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","pick","ItemRoot","input","meta","invalid","touched","inputProps","state","active","fallbackPlacements","Success","SSuccess","SEmail","Submit","SSubmit","Button","Cancel","SCancel","Notice","SNotice","NoticeSmart","defaultProps","theme","use","createComponent"],"sources":["../../src/FeedbackForm.jsx"],"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:\n (error) =>\n (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:\n (error) =>\n (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 const ItemRoot = Root;\n\n return (\n <Field {...props}>\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 && <ItemRoot render={tag} {...inputProps} />}\n {typeof Children.origin === 'function' &&\n Children.origin({\n input: inputProps,\n meta,\n ...other,\n })}\n </Tooltip>\n );\n }}\n </Field>\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: 'gray96',\n use: 'secondary',\n};\n\nexport default createComponent(FeedbackForm, {\n Item,\n Success,\n Submit,\n Cancel,\n Notice,\n});\n"],"mappings":"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"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './FeedbackForm';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
package/lib/es6/FeedbackForm.js
CHANGED
|
@@ -41,17 +41,17 @@ var style = (
|
|
|
41
41
|
/*__reshadow_css_start__*/
|
|
42
42
|
_sstyled.insert(
|
|
43
43
|
/*__inner_css_start__*/
|
|
44
|
-
".
|
|
44
|
+
".___SFeedbackForm_1357t_gg_{max-width:320px}.___SCancel_1357t_gg_,.___SSubmit_1357t_gg_{display:inline-flex;margin-right:8px}.___SNotice_1357t_gg_{padding:12px 16px;border-width:1px 0 0;border-top-style:solid;border-radius:0 0 6px 6px}.___SSuccess_1357t_gg_{display:flex;align-items:center;flex-direction:column;width:320px;padding:46px 32px 32px;box-sizing:border-box}.___SEmail_1357t_gg_{margin-bottom:18px;width:80px;height:80px;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='80' height='80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.163 6a1.57 1.57 0 00-1.12.46l-12.91 12.92A34.6 34.6 0 0025.36 75.813a34.6 34.6 0 0037.713-7.503l12.91-12.91a1.578 1.578 0 00.47-1.12V6.89a.9.9 0 00-.9-.89h-47.39z' fill='%2345E0A8'/%3E%3Cpath d='M29 45.285l.2.35c6.19-3.45 24.19-13.67 27.53-10.53-1.13-3.1-17.03.33-27.73 10.18zM28.44 31.634c-1.81 6-9.21 24.47-13.44 30.31l3 .91 1.58-1.32c4.22-9.55 10-26 10.31-31.46-.5-.26-.96.14-1.45 1.56z' fill='%23fff'/%3E%3Cpath d='M15 62.008c4.23-5.84 11.63-24.27 13.44-30.34 1.81-6.07 5.05 6 3.23 11.12' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28 45.942c10.68-10.36 27.27-14 28.43-10.84.69 1.89-13.43 6.26-18.41 12.32' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M44.45 21.93c-3.24-1.16-8.59-2.89-11.45-3.69 4.12-1.83 37-14 39.67-15.24-.92 4.11-4.92 18.28-6.71 24.93-4.83-1.68-9.73-3.15-12.93-4.19-2 2.65-3.808 5.441-5.41 8.35-1.18-3.86-2.33-8.32-3.17-10.16z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M45 22.08L61.74 11M53 23.73L72.64 3M48 32.58L55.86 25' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48.23 30.77l3.46-5.64.97-1.13 2.07.61.43-.13-3.36 3.43-2.47 2.27L48 31.29l.23-.52z' fill='%23000'/%3E%3Cpath d='M33.81 22L23 27.12M40.89 23L34 27.37M62.04 29L58 38.85' stroke='%23fff' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M46.68 41c3.61 2.42-1.87 8.52-3.68 10.12M47.17 44c4.14 2.09 1.16 7.76-1.17 10.6M48.86 49C54.37 53.48 36.31 72.72 35 73.78' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cmask id='a' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='6' width='73' height='73'%3E%3Cpath d='M28.163 6a1.57 1.57 0 00-1.12.46l-12.91 12.92A34.6 34.6 0 0025.36 75.813a34.6 34.6 0 0037.713-7.503l12.91-12.91a1.578 1.578 0 00.47-1.12V6.89a.9.9 0 00-.9-.89h-47.39z' fill='%2345DFA7'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath d='M5 74.687c2.49-2.34 8.24-11 9.52-13.44 13.66-2.12 20.19 10 20.46 13.52a116.257 116.257 0 01-7.76 14.13' fill='%23000'/%3E%3Cpath d='M5 74.687c2.49-2.34 8.24-11 9.52-13.44 13.66-2.12 20.19 10 20.46 13.52a116.257 116.257 0 01-7.76 14.13' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E\")}"
|
|
45
45
|
/*__inner_css_end__*/
|
|
46
|
-
, "
|
|
46
|
+
, "1357t_gg_")
|
|
47
47
|
/*__reshadow_css_end__*/
|
|
48
48
|
, {
|
|
49
|
-
"__SFeedbackForm": "
|
|
50
|
-
"__SCancel": "
|
|
51
|
-
"__SSubmit": "
|
|
52
|
-
"__SNotice": "
|
|
53
|
-
"__SSuccess": "
|
|
54
|
-
"__SEmail": "
|
|
49
|
+
"__SFeedbackForm": "___SFeedbackForm_1357t_gg_",
|
|
50
|
+
"__SCancel": "___SCancel_1357t_gg_",
|
|
51
|
+
"__SSubmit": "___SSubmit_1357t_gg_",
|
|
52
|
+
"__SNotice": "___SNotice_1357t_gg_",
|
|
53
|
+
"__SSuccess": "___SSuccess_1357t_gg_",
|
|
54
|
+
"__SEmail": "___SEmail_1357t_gg_"
|
|
55
55
|
});
|
|
56
56
|
|
|
57
57
|
var FeedbackForm = /*#__PURE__*/function (_Component) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"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","ItemRoot","input","meta","invalid","touched","inputProps","state","active","fallbackPlacements","Success","SSuccess","SEmail","Submit","SSubmit","Cancel","SCancel","Notice","SNotice","defaultProps","theme","use"],"sources":["../../src/FeedbackForm.jsx"],"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:\n (error) =>\n (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:\n (error) =>\n (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 const ItemRoot = Root;\n\n return (\n <Field {...props}>\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 && <ItemRoot render={tag} {...inputProps} />}\n {typeof Children.origin === 'function' &&\n Children.origin({\n input: inputProps,\n meta,\n ...other,\n })}\n </Tooltip>\n );\n }}\n </Field>\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: 'gray96',\n use: 'secondary',\n};\n\nexport default createComponent(FeedbackForm, {\n Item,\n Success,\n Submit,\n Cancel,\n Notice,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,KAAT,EAAgBC,IAAhB,QAA4B,kBAA5B;AACA,OAAOC,oBAAP,MAAiC,kBAAjC;AAEA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,OAAOC,aAAP,MAA0B,yBAA1B;AACA,OAAOC,OAAP,MAAoB,kBAApB;AACA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,IAAP,MAAiB,yBAAjB;;;;;;;;;;;;;;;;;;;;IAIMC,Y;;;;;;;;;;;;;;;;qEA+BaX,oBAAoB,E;;;;;;;WAErC,kBAAS;MACP,IAAMY,aAAa,GAAGH,GAAtB;;MACA,oBAA4D,KAAKI,OAAjE;MAAA,IAAQC,QAAR,iBAAQA,QAAR;MAAA,IAAkBC,MAAlB,iBAAkBA,MAAlB;MAAA,IAA0BC,OAA1B,iBAA0BA,OAA1B;MAAA,IAAmCC,UAAnC,iBAAmCA,UAAnC;MAAA,IAAkDC,KAAlD;;MAEA,oBACE,oBAAC,IAAD;QAAM,UAAU,EAAE,CAAC,KAAKC,cAAN;MAAlB,GAA6CD,KAA7C,GACG,UAACE,GAAD;QAAA;;QAAA,eACCjB,OAAO,CAACY,MAAD,CADR,eAEG,oBAAC,aAAD;UAAA,QAAoB,IAApB;UAAA,WAAkCC,OAAO,KAAKK,SAAZ,GAAwBD,GAAG,CAACE,UAA5B,GAAyCN;QAA3E,iBACE,oBAAC,aAAD;UAAA,OACM,MADN;UAAA;UAAA,UAGS,MAHT;UAAA,OAIOC;QAJP,GAKMC,KALN;UAAA,YAMYE,GAAG,CAACG;QANhB,KAQG,OAAOT,QAAQ,CAACU,MAAhB,KAA2B,UAA3B,GAAwCV,QAAQ,CAACU,MAAT,CAAgBJ,GAAhB,CAAxC,gBAA+D,oBAAC,QAAD,2BARlE,CADF,CAFH;MAAA,CADH,CADF;IAoBD;;;;EAzDwBlB,S;;gBAArBS,Y,iBACiB,c;;gBADjBA,Y,WAEWc,K;;gBAFXd,Y,eAGe;EACjBb,KAAK,EAALA,KADiB;EAEjBC,IAAI,EAAJA;AAFiB,C;;gBAHfY,Y,kBAQkB;EACpBe,QAAQ,EAAE,oBAAM,CAAE;AADE,C;;gBARlBf,Y,cAYc;EAChBgB,WAAW,EACT,qBAACC,KAAD;IAAA,OACA,YAAgB;MAAA,IAAfC,KAAe,uEAAP,EAAO;MACd,IAAMC,KAAK,GAAGD,KAAK,CAACE,KAAN,CAAY,KAAZ,CAAd;MACA,IAAMC,OAAO,GAAGF,KAAK,CAACG,IAAN,CAAW,GAAX,CAAhB;;MACA,IAAID,OAAO,CAACE,MAAR,GAAiB,EAAjB,IAAuBJ,KAAK,CAACI,MAAN,GAAe,CAA1C,EAA6C;QAC3C,OAAON,KAAP;MACD;IACF,CAPD;EAAA,CAFc;EAUhBO,KAAK,EACH,eAACP,KAAD;IAAA,OACA,YAAgB;MAAA,IAAfC,KAAe,uEAAP,EAAO;;MACd,IAAI,CAAC,aAAaO,IAAb,CAAkBC,MAAM,CAACR,KAAD,CAAN,CAAcS,WAAd,EAAlB,CAAL,EAAqD;QACnD,OAAOV,KAAP;MACD;IACF,CALD;EAAA;AAXc,C;;AAgDpB,IAAMW,YAAY,GAAG,CACnB,OADmB,EAEnB,OAFmB,EAGnB,UAHmB,EAInB,WAJmB,EAKnB,WALmB,EAMnB,aANmB,EAOnB,SAPmB,EAQnB,SARmB,EASnB,gBATmB,EAUnB,iBAVmB,EAWnB,QAXmB,EAYnB,iBAZmB,EAanB,OAbmB,EAcnB,MAdmB,EAenB,eAfmB,EAgBnB,gBAhBmB,EAiBnB,eAjBmB,CAArB;;AAoBA,SAASC,IAAT,SAA2C;EAAA;;EAAA,IAA3B1B,QAA2B,UAA3BA,QAA2B;EAAA,IAAjB2B,GAAiB,UAAjBA,GAAiB;EAAA,IAATC,KAAS;;EACzC,IAAMC,YAAY,GAAGjC,IAAI,CAACgC,KAAD,EAAQH,YAAR,CAAzB;EACA,IAAMK,QAAQ,GAsBsBH,GAtBpC;EAEA,oBACE,oBAAC,KAAD,EAAWC,KAAX,EACG,kBAA+B;IAAA,IAA5BG,KAA4B,UAA5BA,KAA4B;IAAA,IAArBC,IAAqB,UAArBA,IAAqB;IAAA,IAAZ5B,KAAY;;IAC9B,IAAM6B,OAAO,GAAGD,IAAI,CAACC,OAAL,IAAgBD,IAAI,CAACE,OAArC;;IACA,IAAMC,UAAU,mCACXJ,KADW;MAEdK,KAAK,EAAEH,OAAO,GAAG,SAAH,GAAe;IAFf,EAAhB;;IAIA,oBACE,oBAAC,OAAD;MACE,KAAK,EAAED,IAAI,CAAClB,KADd;MAEE,OAAO,EAAEmB,OAAO,IAAID,IAAI,CAACK,MAF3B;MAGE,MAAM,EAAE,KAHV;MAIE,KAAK,EAAC,SAJR;MAKE,SAAS,EAAC,MALZ;MAME,IAAI,EAAE;QACJC,kBAAkB,EAAE,CAAC,OAAD,EAAU,QAAV;MADhB;IANR,GASMT,YATN,GAWGF,GAAG,iBAAI,oBAAC,QAAD,iCAA2BQ,UAA3B,SAXV,EAYG,OAAOnC,QAAQ,CAACU,MAAhB,KAA2B,UAA3B,IACCV,QAAQ,CAACU,MAAT;MACEqB,KAAK,EAAEI,UADT;MAEEH,IAAI,EAAJA;IAFF,GAGK5B,KAHL,EAbJ,CADF;EAqBD,CA5BH,CADF;AAgCD;;AAED,SAASmC,OAAT,CAAiBX,KAAjB,EAAwB;EAAA;EAAA;;EACtB,IAAQ5B,QAAR,GAA6B4B,KAA7B,CAAQ5B,QAAR;EAAA,IAAkBC,MAAlB,GAA6B2B,KAA7B,CAAkB3B,MAAlB;EACA,IAAMuC,QAAQ,GAIM7C,GAJpB;EACA,IAAM8C,MAAM,GAAG,KAAf;EAEA,eAAOpD,OAAO,CAACY,MAAD,CAAd,eACE,oBAAC,QAAD,kFACE,oBAAC,MAAD,yBADF,eAEE,+DACE,oBAAC,QAAD,2BADF,CAFF,CADF;AAQD,C,CACD;;;AACAsC,OAAO,CAAC5B,KAAR,GAAgBA,KAAhB;;AAEA,SAAS+B,MAAT,CAAgBd,KAAhB,EAAuB;EAAA;EAAA;;EACrB,IAAQ3B,MAAR,GAAmB2B,KAAnB,CAAQ3B,MAAR;EACA,IAAM0C,OAAO,GAC2BpD,MADxC;EACA,eAAOF,OAAO,CAACY,MAAD,CAAd,eAAuB,oBAAC,OAAD;IAAA,QAA8B,QAA9B;IAAA,OAA2C,SAA3C;IAAA,SAA2D;EAA3D,YAAvB;AACD;;AAED,SAAS2C,MAAT,CAAgBhB,KAAhB,EAAuB;EAAA;EAAA;;EACrB,IAAQ3B,MAAR,GAAmB2B,KAAnB,CAAQ3B,MAAR;EACA,IAAM4C,OAAO,GAC2BtD,MADxC;EACA,eAAOF,OAAO,CAACY,MAAD,CAAd,eAAuB,oBAAC,OAAD;IAAA,QAA8B,OAA9B;IAAA,OAA0C,WAA1C;IAAA,SAA4D;EAA5D,YAAvB;AACD;;AAED,SAAS6C,MAAT,CAAgBlB,KAAhB,EAAuB;EAAA;EAAA;;EACrB,IAAQ3B,MAAR,GAAmB2B,KAAnB,CAAQ3B,MAAR;EACA,IAAM8C,OAAO,GAC2BrD,WADxC;EACA,gBAAOL,OAAO,CAACY,MAAD,CAAd,eAAuB,oBAAC,OAAD,oEAAvB;AACD;;AAED6C,MAAM,CAACE,YAAP,GAAsB;EACpBC,KAAK,EAAE,QADa;EAEpBC,GAAG,EAAE;AAFe,CAAtB;AAKA,eAAe/D,eAAe,CAACU,YAAD,EAAe;EAC3C6B,IAAI,EAAJA,IAD2C;EAE3Ca,OAAO,EAAPA,OAF2C;EAG3CG,MAAM,EAANA,MAH2C;EAI3CE,MAAM,EAANA,MAJ2C;EAK3CE,MAAM,EAANA;AAL2C,CAAf,CAA9B"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './FeedbackForm';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,gBAAxB"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/feedback-form",
|
|
3
3
|
"description": "SEMRush Feedback Form Component",
|
|
4
|
-
"version": "5.1.
|
|
4
|
+
"version": "5.1.4",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
|
-
"author": "
|
|
9
|
+
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
12
|
"build": "build --source=js",
|
package/src/FeedbackForm.jsx
DELETED
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Field, Form } from 'react-final-form';
|
|
3
|
-
import createFocusDecorator from 'final-form-focus';
|
|
4
|
-
|
|
5
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
6
|
-
import Button from '@semcore/button';
|
|
7
|
-
import SpinContainer from '@semcore/spin-container';
|
|
8
|
-
import Tooltip from '@semcore/tooltip';
|
|
9
|
-
import { NoticeSmart } from '@semcore/notice';
|
|
10
|
-
import { Box } from '@semcore/flex-box';
|
|
11
|
-
import pick from '@semcore/utils/lib/pick';
|
|
12
|
-
|
|
13
|
-
import style from './style/feedback-form.shadow.css';
|
|
14
|
-
|
|
15
|
-
class FeedbackForm extends Component {
|
|
16
|
-
static displayName = 'FeedbackForm';
|
|
17
|
-
static style = style;
|
|
18
|
-
static FinalForm = {
|
|
19
|
-
Field,
|
|
20
|
-
Form,
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
static defaultProps = {
|
|
24
|
-
onSubmit: () => {},
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
static validate = {
|
|
28
|
-
description:
|
|
29
|
-
(error) =>
|
|
30
|
-
(value = '') => {
|
|
31
|
-
const words = value.split(/\s+/);
|
|
32
|
-
const symbols = words.join(' ');
|
|
33
|
-
if (symbols.length < 10 || words.length < 3) {
|
|
34
|
-
return error;
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
email:
|
|
38
|
-
(error) =>
|
|
39
|
-
(value = '') => {
|
|
40
|
-
if (!/.+@.+\..+/i.test(String(value).toLowerCase())) {
|
|
41
|
-
return error;
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
focusDecorator = createFocusDecorator();
|
|
47
|
-
|
|
48
|
-
render() {
|
|
49
|
-
const SFeedbackForm = Box;
|
|
50
|
-
const { Children, styles, loading, forwardRef, ...other } = this.asProps;
|
|
51
|
-
|
|
52
|
-
return (
|
|
53
|
-
<Form decorators={[this.focusDecorator]} {...other}>
|
|
54
|
-
{(api) =>
|
|
55
|
-
sstyled(styles)(
|
|
56
|
-
<SpinContainer size="xl" loading={loading === undefined ? api.submitting : loading}>
|
|
57
|
-
<SFeedbackForm
|
|
58
|
-
tag="form"
|
|
59
|
-
noValidate
|
|
60
|
-
method="POST"
|
|
61
|
-
ref={forwardRef}
|
|
62
|
-
{...other}
|
|
63
|
-
onSubmit={api.handleSubmit}
|
|
64
|
-
>
|
|
65
|
-
{typeof Children.origin === 'function' ? Children.origin(api) : <Children />}
|
|
66
|
-
</SFeedbackForm>
|
|
67
|
-
</SpinContainer>,
|
|
68
|
-
)
|
|
69
|
-
}
|
|
70
|
-
</Form>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
const TooltipProps = [
|
|
76
|
-
'title',
|
|
77
|
-
'theme',
|
|
78
|
-
'strategy',
|
|
79
|
-
'modifiers',
|
|
80
|
-
'placement',
|
|
81
|
-
'interaction',
|
|
82
|
-
'timeout',
|
|
83
|
-
'visible',
|
|
84
|
-
'defaultVisible',
|
|
85
|
-
'onVisibleChange',
|
|
86
|
-
'offset',
|
|
87
|
-
'preventOverflow',
|
|
88
|
-
'arrow',
|
|
89
|
-
'flip',
|
|
90
|
-
'computeStyles',
|
|
91
|
-
'eventListeners',
|
|
92
|
-
'onFirstUpdate',
|
|
93
|
-
];
|
|
94
|
-
|
|
95
|
-
function Item({ Children, tag, ...props }) {
|
|
96
|
-
const tooltipProps = pick(props, TooltipProps);
|
|
97
|
-
const ItemRoot = Root;
|
|
98
|
-
|
|
99
|
-
return (
|
|
100
|
-
<Field {...props}>
|
|
101
|
-
{({ input, meta, ...other }) => {
|
|
102
|
-
const invalid = meta.invalid && meta.touched;
|
|
103
|
-
const inputProps = {
|
|
104
|
-
...input,
|
|
105
|
-
state: invalid ? 'invalid' : 'normal',
|
|
106
|
-
};
|
|
107
|
-
return (
|
|
108
|
-
<Tooltip
|
|
109
|
-
title={meta.error}
|
|
110
|
-
visible={invalid && meta.active}
|
|
111
|
-
inline={false}
|
|
112
|
-
theme="warning"
|
|
113
|
-
placement="left"
|
|
114
|
-
flip={{
|
|
115
|
-
fallbackPlacements: ['right', 'bottom'],
|
|
116
|
-
}}
|
|
117
|
-
{...tooltipProps}
|
|
118
|
-
>
|
|
119
|
-
{tag && <ItemRoot render={tag} {...inputProps} />}
|
|
120
|
-
{typeof Children.origin === 'function' &&
|
|
121
|
-
Children.origin({
|
|
122
|
-
input: inputProps,
|
|
123
|
-
meta,
|
|
124
|
-
...other,
|
|
125
|
-
})}
|
|
126
|
-
</Tooltip>
|
|
127
|
-
);
|
|
128
|
-
}}
|
|
129
|
-
</Field>
|
|
130
|
-
);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
function Success(props) {
|
|
134
|
-
const { Children, styles } = props;
|
|
135
|
-
const SSuccess = Root;
|
|
136
|
-
const SEmail = 'div';
|
|
137
|
-
|
|
138
|
-
return sstyled(styles)(
|
|
139
|
-
<SSuccess render={Box}>
|
|
140
|
-
<SEmail />
|
|
141
|
-
<span>
|
|
142
|
-
<Children />
|
|
143
|
-
</span>
|
|
144
|
-
</SSuccess>,
|
|
145
|
-
);
|
|
146
|
-
}
|
|
147
|
-
// because it is used without a wrapper
|
|
148
|
-
Success.style = style;
|
|
149
|
-
|
|
150
|
-
function Submit(props) {
|
|
151
|
-
const { styles } = props;
|
|
152
|
-
const SSubmit = Root;
|
|
153
|
-
return sstyled(styles)(<SSubmit render={Button} type="submit" use="primary" theme="success" />);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
function Cancel(props) {
|
|
157
|
-
const { styles } = props;
|
|
158
|
-
const SCancel = Root;
|
|
159
|
-
return sstyled(styles)(<SCancel render={Button} type="reset" use="secondary" theme="muted" />);
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
function Notice(props) {
|
|
163
|
-
const { styles } = props;
|
|
164
|
-
const SNotice = Root;
|
|
165
|
-
return sstyled(styles)(<SNotice render={NoticeSmart} />);
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
Notice.defaultProps = {
|
|
169
|
-
theme: 'gray96',
|
|
170
|
-
use: 'secondary',
|
|
171
|
-
};
|
|
172
|
-
|
|
173
|
-
export default createComponent(FeedbackForm, {
|
|
174
|
-
Item,
|
|
175
|
-
Success,
|
|
176
|
-
Submit,
|
|
177
|
-
Cancel,
|
|
178
|
-
Notice,
|
|
179
|
-
});
|
package/src/index.d.ts
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { ComponentProps } from 'react';
|
|
2
|
-
import { FormProps, FieldProps } from 'react-final-form';
|
|
3
|
-
|
|
4
|
-
import { ReturnEl, CProps } from '@semcore/core';
|
|
5
|
-
import Button from '@semcore/button';
|
|
6
|
-
import { NoticeSmart } from '@semcore/notice';
|
|
7
|
-
import { Box } from '@semcore/flex-box';
|
|
8
|
-
|
|
9
|
-
export interface IFeedbackForm extends FormProps {
|
|
10
|
-
/* The event is called when the form is submitted */
|
|
11
|
-
onSubmit: (values: any, form: any, callback?: (errors?: {}) => void) => {} | Promise<{}> | void;
|
|
12
|
-
/**
|
|
13
|
-
* The property is in charge of the spinner showing
|
|
14
|
-
* */
|
|
15
|
-
loading?: boolean;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
declare const FeedbackForm: (<T>(props: CProps<IFeedbackForm> & T) => ReturnEl) & {
|
|
19
|
-
Item: <T>(props: FieldProps<any, any> & T) => ReturnEl;
|
|
20
|
-
Success: <T>(props: CProps<ComponentProps<typeof Box>> & T) => ReturnEl;
|
|
21
|
-
Submit: <T>(props: ComponentProps<typeof Button> & T) => ReturnEl;
|
|
22
|
-
Cancel: <T>(props: ComponentProps<typeof Button> & T) => ReturnEl;
|
|
23
|
-
Notice: <T>(props: ComponentProps<typeof NoticeSmart> & T) => ReturnEl;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export default FeedbackForm;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './FeedbackForm';
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SFeedbackForm {
|
|
4
|
-
max-width: 320px;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
SSubmit,
|
|
8
|
-
SCancel {
|
|
9
|
-
display: inline-flex;
|
|
10
|
-
margin-right: 8px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
SNotice {
|
|
14
|
-
padding: 12px 16px;
|
|
15
|
-
border-width: 1px 0 0;
|
|
16
|
-
border-top-style: solid;
|
|
17
|
-
border-radius: 0 0 6px 6px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
SSuccess {
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
flex-direction: column;
|
|
24
|
-
width: 320px;
|
|
25
|
-
padding: 46px 32px 32px;
|
|
26
|
-
box-sizing: border-box;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
SEmail {
|
|
30
|
-
margin-bottom: 18px;
|
|
31
|
-
width: 80px;
|
|
32
|
-
height: 80px;
|
|
33
|
-
background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.1632 6.00003C27.9554 5.99875 27.7493 6.03875 27.5571 6.11772C27.3648 6.19668 27.1902 6.31304 27.0432 6.46003L14.1332 19.38C7.645 25.8687 4 34.669 4 43.845C4 53.0211 7.645 61.8213 14.1332 68.31C17.3463 71.5242 21.1611 74.0738 25.3597 75.8134C29.5583 77.5529 34.0585 78.4482 38.6032 78.4482C43.1479 78.4482 47.6481 77.5529 51.8467 75.8134C56.0454 74.0738 59.8602 71.5242 63.0732 68.31L75.9832 55.4C76.1316 55.2536 76.2495 55.0792 76.3301 54.887C76.4108 54.6948 76.4526 54.4885 76.4532 54.28V6.89003C76.4506 6.65307 76.3546 6.42671 76.1861 6.26009C76.0176 6.09346 75.7902 6.00002 75.5532 6.00003H28.1632Z' fill='%2345E0A8'/%3E%3Cpath d='M29 45.2852L29.2 45.6352C35.39 42.1852 53.39 31.9652 56.73 35.1052C55.6 32.0052 39.7 35.4352 29 45.2852Z' fill='white'/%3E%3Cpath d='M28.44 31.6343C26.63 37.6343 19.23 56.1043 15 61.9443L18 62.8543L19.58 61.5343C23.8 51.9843 29.58 35.5343 29.89 30.0743C29.39 29.8143 28.93 30.2143 28.44 31.6343Z' fill='white'/%3E%3Cpath d='M15 62.0078C19.23 56.1678 26.63 37.7378 28.44 31.6678C30.25 25.5978 33.49 37.6678 31.67 42.7878' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28 45.9424C38.68 35.5824 55.27 31.9424 56.43 35.1024C57.12 36.9924 43 41.3624 38.02 47.4224' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M44.45 21.93C41.21 20.77 35.86 19.04 33 18.24C37.12 16.41 70 4.24 72.67 3C71.75 7.11 67.75 21.28 65.96 27.93C61.13 26.25 56.23 24.78 53.03 23.74C51.0298 26.3907 49.2219 29.1812 47.62 32.09C46.44 28.23 45.29 23.77 44.45 21.93Z' fill='white' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M45 22.08L61.74 11' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M53 23.73L72.64 3' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48 32.58L55.86 25' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48.23 30.77L51.69 25.13L52.66 24L54.73 24.61L55.16 24.48L51.8 27.91L49.33 30.18L48 31.29L48.23 30.77Z' fill='black'/%3E%3Cpath d='M33.81 22L23 27.12' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M40.89 23L34 27.37' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M62.04 29L58 38.85' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M46.68 41C50.29 43.42 44.81 49.52 43 51.12' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M47.17 44C51.31 46.09 48.33 51.76 46 54.6' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48.86 49C54.37 53.48 36.31 72.72 35 73.78' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cmask id='mask0_11950_117175' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='6' width='73' height='73'%3E%3Cpath d='M28.1632 6.00003C27.9554 5.99875 27.7493 6.03875 27.5571 6.11772C27.3648 6.19668 27.1902 6.31304 27.0432 6.46003L14.1332 19.38C7.645 25.8687 4 34.669 4 43.845C4 53.0211 7.645 61.8213 14.1332 68.31C17.3463 71.5242 21.1611 74.0738 25.3597 75.8134C29.5583 77.5529 34.0585 78.4482 38.6032 78.4482C43.1479 78.4482 47.6481 77.5529 51.8467 75.8134C56.0454 74.0738 59.8602 71.5242 63.0732 68.31L75.9832 55.4C76.1316 55.2536 76.2495 55.0792 76.3301 54.887C76.4108 54.6948 76.4526 54.4885 76.4532 54.28V6.89003C76.4506 6.65307 76.3546 6.42671 76.1861 6.26009C76.0176 6.09346 75.7902 6.00002 75.5532 6.00003H28.1632Z' fill='%2345DFA7'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_11950_117175)'%3E%3Cpath d='M5 74.6871C7.49 72.3471 13.24 63.6871 14.52 61.2471C28.18 59.1271 34.71 71.2471 34.98 74.7671C32.7234 79.651 30.1305 84.3723 27.22 88.8971' fill='black'/%3E%3Cpath d='M5 74.6871C7.49 72.3471 13.24 63.6871 14.52 61.2471C28.18 59.1271 34.71 71.2471 34.98 74.7671C32.7234 79.651 30.1305 84.3723 27.22 88.8971' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
|
|
34
|
-
}
|