@pareto-engineering/design-system 4.0.0-alpha.41 → 4.0.0-alpha.42
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/f/FormInput/FormInput.js +6 -0
- package/dist/cjs/f/fields/EditorInput/EditorInput.js +33 -1
- package/dist/cjs/f/fields/EditorInput/styles.scss +2 -0
- package/dist/es/f/FormInput/FormInput.js +7 -1
- package/dist/es/f/fields/EditorInput/EditorInput.js +33 -1
- package/dist/es/f/fields/EditorInput/styles.scss +2 -0
- package/package.json +2 -2
- package/src/stories/f/EditorInput.stories.jsx +1 -1
- package/src/ui/f/FormInput/FormInput.jsx +11 -0
- package/src/ui/f/fields/EditorInput/EditorInput.jsx +37 -1
- package/src/ui/f/fields/EditorInput/styles.scss +2 -0
|
@@ -83,6 +83,12 @@ const FormInput = _ref => {
|
|
|
83
83
|
disabled: disabled
|
|
84
84
|
}, otherProps));
|
|
85
85
|
}
|
|
86
|
+
if (type === 'editor') {
|
|
87
|
+
return /*#__PURE__*/React.createElement(_fields.EditorInput, _extends({
|
|
88
|
+
className: newClassName,
|
|
89
|
+
disabled: disabled
|
|
90
|
+
}, otherProps));
|
|
91
|
+
}
|
|
86
92
|
if (extraTypes?.[type]) {
|
|
87
93
|
const Component = extraTypes[type];
|
|
88
94
|
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
@@ -57,7 +57,39 @@ const EditorInput = _ref => {
|
|
|
57
57
|
const formik = (0, _formik.useFormikContext)();
|
|
58
58
|
const setInitialValue = () => {
|
|
59
59
|
const value = formik.values[name];
|
|
60
|
-
|
|
60
|
+
try {
|
|
61
|
+
JSON.parse(value);
|
|
62
|
+
return value;
|
|
63
|
+
} catch {
|
|
64
|
+
// eslint-disable-next-line no-useless-escape
|
|
65
|
+
const defaultValue = {
|
|
66
|
+
root: {
|
|
67
|
+
children: [{
|
|
68
|
+
children: [{
|
|
69
|
+
detail: 0,
|
|
70
|
+
format: 0,
|
|
71
|
+
mode: 'normal',
|
|
72
|
+
style: '',
|
|
73
|
+
text: '',
|
|
74
|
+
type: 'text',
|
|
75
|
+
version: 1
|
|
76
|
+
}],
|
|
77
|
+
direction: 'ltr',
|
|
78
|
+
format: '',
|
|
79
|
+
indent: 0,
|
|
80
|
+
type: 'paragraph',
|
|
81
|
+
version: 1
|
|
82
|
+
}],
|
|
83
|
+
direction: 'ltr',
|
|
84
|
+
format: '',
|
|
85
|
+
indent: 0,
|
|
86
|
+
type: 'root',
|
|
87
|
+
version: 1
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
defaultValue.root.children[0].children[0].text = value;
|
|
91
|
+
return JSON.stringify(defaultValue);
|
|
92
|
+
}
|
|
61
93
|
};
|
|
62
94
|
const onChange = state => {
|
|
63
95
|
formik.setValues({
|
|
@@ -13,6 +13,7 @@ $default-border: var(--theme-default-input-border);
|
|
|
13
13
|
$focus-border: var(--theme-focus-input-border);
|
|
14
14
|
$active-background: var(--hard-background-inputs);
|
|
15
15
|
$default-background: var(--background-inputs);
|
|
16
|
+
$default-icon-color: var(--on-background-inputs);
|
|
16
17
|
$disabled-background: var(--background-inputs-30);
|
|
17
18
|
|
|
18
19
|
.#{bem.$base}.editor-input {
|
|
@@ -29,6 +30,7 @@ $disabled-background: var(--background-inputs-30);
|
|
|
29
30
|
> button {
|
|
30
31
|
background: $default-background;
|
|
31
32
|
border: $default-border;
|
|
33
|
+
color: $default-icon-color;
|
|
32
34
|
padding: $default-padding;
|
|
33
35
|
|
|
34
36
|
&.active {
|
|
@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { memo, useInsertionEffect } from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
|
-
import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput } from "../fields";
|
|
6
|
+
import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput } from "../fields";
|
|
7
7
|
|
|
8
8
|
// Local Definitions
|
|
9
9
|
|
|
@@ -78,6 +78,12 @@ const FormInput = ({
|
|
|
78
78
|
disabled: disabled
|
|
79
79
|
}, otherProps));
|
|
80
80
|
}
|
|
81
|
+
if (type === 'editor') {
|
|
82
|
+
return /*#__PURE__*/React.createElement(EditorInput, _extends({
|
|
83
|
+
className: newClassName,
|
|
84
|
+
disabled: disabled
|
|
85
|
+
}, otherProps));
|
|
86
|
+
}
|
|
81
87
|
if (extraTypes?.[type]) {
|
|
82
88
|
const Component = extraTypes[type];
|
|
83
89
|
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
@@ -53,7 +53,39 @@ const EditorInput = ({
|
|
|
53
53
|
const formik = useFormikContext();
|
|
54
54
|
const setInitialValue = () => {
|
|
55
55
|
const value = formik.values[name];
|
|
56
|
-
|
|
56
|
+
try {
|
|
57
|
+
JSON.parse(value);
|
|
58
|
+
return value;
|
|
59
|
+
} catch {
|
|
60
|
+
// eslint-disable-next-line no-useless-escape
|
|
61
|
+
const defaultValue = {
|
|
62
|
+
root: {
|
|
63
|
+
children: [{
|
|
64
|
+
children: [{
|
|
65
|
+
detail: 0,
|
|
66
|
+
format: 0,
|
|
67
|
+
mode: 'normal',
|
|
68
|
+
style: '',
|
|
69
|
+
text: '',
|
|
70
|
+
type: 'text',
|
|
71
|
+
version: 1
|
|
72
|
+
}],
|
|
73
|
+
direction: 'ltr',
|
|
74
|
+
format: '',
|
|
75
|
+
indent: 0,
|
|
76
|
+
type: 'paragraph',
|
|
77
|
+
version: 1
|
|
78
|
+
}],
|
|
79
|
+
direction: 'ltr',
|
|
80
|
+
format: '',
|
|
81
|
+
indent: 0,
|
|
82
|
+
type: 'root',
|
|
83
|
+
version: 1
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
defaultValue.root.children[0].children[0].text = value;
|
|
87
|
+
return JSON.stringify(defaultValue);
|
|
88
|
+
}
|
|
57
89
|
};
|
|
58
90
|
const onChange = state => {
|
|
59
91
|
formik.setValues({
|
|
@@ -13,6 +13,7 @@ $default-border: var(--theme-default-input-border);
|
|
|
13
13
|
$focus-border: var(--theme-focus-input-border);
|
|
14
14
|
$active-background: var(--hard-background-inputs);
|
|
15
15
|
$default-background: var(--background-inputs);
|
|
16
|
+
$default-icon-color: var(--on-background-inputs);
|
|
16
17
|
$disabled-background: var(--background-inputs-30);
|
|
17
18
|
|
|
18
19
|
.#{bem.$base}.editor-input {
|
|
@@ -29,6 +30,7 @@ $disabled-background: var(--background-inputs-30);
|
|
|
29
30
|
> button {
|
|
30
31
|
background: $default-background;
|
|
31
32
|
border: $default-border;
|
|
33
|
+
color: $default-icon-color;
|
|
32
34
|
padding: $default-padding;
|
|
33
35
|
|
|
34
36
|
&.active {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pareto-engineering/design-system",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.42",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/es/index.js",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"relay-test-utils": "^15.0.0"
|
|
71
71
|
},
|
|
72
72
|
"browserslist": "> 2%",
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "316af25fc0da0320febe6027eb67f4a8288dec3e"
|
|
74
74
|
}
|
|
@@ -16,6 +16,7 @@ import {
|
|
|
16
16
|
Checkbox,
|
|
17
17
|
QueryChoices,
|
|
18
18
|
LinkInput,
|
|
19
|
+
EditorInput,
|
|
19
20
|
} from '../fields'
|
|
20
21
|
|
|
21
22
|
// Local Definitions
|
|
@@ -128,6 +129,16 @@ const FormInput = ({
|
|
|
128
129
|
)
|
|
129
130
|
}
|
|
130
131
|
|
|
132
|
+
if (type === 'editor') {
|
|
133
|
+
return (
|
|
134
|
+
<EditorInput
|
|
135
|
+
className={newClassName}
|
|
136
|
+
disabled={disabled}
|
|
137
|
+
{...otherProps}
|
|
138
|
+
/>
|
|
139
|
+
)
|
|
140
|
+
}
|
|
141
|
+
|
|
131
142
|
if (extraTypes?.[type]) {
|
|
132
143
|
const Component = extraTypes[type]
|
|
133
144
|
return (
|
|
@@ -57,7 +57,43 @@ const EditorInput = ({
|
|
|
57
57
|
|
|
58
58
|
const setInitialValue = () => {
|
|
59
59
|
const value = formik.values[name]
|
|
60
|
-
|
|
60
|
+
try {
|
|
61
|
+
JSON.parse(value)
|
|
62
|
+
return value
|
|
63
|
+
} catch {
|
|
64
|
+
// eslint-disable-next-line no-useless-escape
|
|
65
|
+
const defaultValue = {
|
|
66
|
+
root:{
|
|
67
|
+
children:[
|
|
68
|
+
{
|
|
69
|
+
children:[
|
|
70
|
+
{
|
|
71
|
+
detail :0,
|
|
72
|
+
format :0,
|
|
73
|
+
mode :'normal',
|
|
74
|
+
style :'',
|
|
75
|
+
text :'',
|
|
76
|
+
type :'text',
|
|
77
|
+
version:1,
|
|
78
|
+
},
|
|
79
|
+
],
|
|
80
|
+
direction:'ltr',
|
|
81
|
+
format :'',
|
|
82
|
+
indent :0,
|
|
83
|
+
type :'paragraph',
|
|
84
|
+
version :1,
|
|
85
|
+
},
|
|
86
|
+
],
|
|
87
|
+
direction:'ltr',
|
|
88
|
+
format :'',
|
|
89
|
+
indent :0,
|
|
90
|
+
type :'root',
|
|
91
|
+
version :1,
|
|
92
|
+
},
|
|
93
|
+
}
|
|
94
|
+
defaultValue.root.children[0].children[0].text = value
|
|
95
|
+
return JSON.stringify(defaultValue)
|
|
96
|
+
}
|
|
61
97
|
}
|
|
62
98
|
|
|
63
99
|
const onChange = (state) => {
|
|
@@ -13,6 +13,7 @@ $default-border: var(--theme-default-input-border);
|
|
|
13
13
|
$focus-border: var(--theme-focus-input-border);
|
|
14
14
|
$active-background: var(--hard-background-inputs);
|
|
15
15
|
$default-background: var(--background-inputs);
|
|
16
|
+
$default-icon-color: var(--on-background-inputs);
|
|
16
17
|
$disabled-background: var(--background-inputs-30);
|
|
17
18
|
|
|
18
19
|
.#{bem.$base}.editor-input {
|
|
@@ -29,6 +30,7 @@ $disabled-background: var(--background-inputs-30);
|
|
|
29
30
|
> button {
|
|
30
31
|
background: $default-background;
|
|
31
32
|
border: $default-border;
|
|
33
|
+
color: $default-icon-color;
|
|
32
34
|
padding: $default-padding;
|
|
33
35
|
|
|
34
36
|
&.active {
|