Skip to content

Commit 94501fe

Browse files
danielopradodanieloprado
committed
update docs not completed
Signed-off-by: danieloprado <[email protected]>
1 parent 725a911 commit 94501fe

31 files changed

+970
-587
lines changed

‎components/Html/index.tsx

Lines changed: 8 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,18 @@
1-
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
2-
31
import InputLabel from '@material-ui/core/InputLabel';
42
import Typography from '@material-ui/core/Typography';
53
import FieldCoreBase, { IStateFieldBase } from '@react-form-fields/core/components/FieldCoreBase';
64
import ValidationContextRegister from '@react-form-fields/core/components/ValidationContextRegister';
75
import { getConfig } from '@react-form-fields/core/config';
8-
import { ContentState, convertToRaw, EditorState, Modifier } from 'draft-js';
9-
import { stateFromHTML } from 'draft-js-import-html';
10-
import * as draftToHtml from 'draftjs-to-html';
11-
import htmlToDraft from 'html-to-draftjs';
126
import * as React from 'react';
13-
import { Editor, EditorProps } from 'react-draft-wysiwyg';
147

158
import { WithStyles } from '../../decorators/withStyles';
169
import { IBaseFieldProps } from '../../interfaces/props';
17-
import * as styles from './style.css';
18-
19-
type PropsResolver = {
20-
[K in Exclude<keyof EditorProps, keyof IBaseFieldProps>]?: EditorProps[K]
21-
};
2210

2311
interface IState extends IStateFieldBase {
24-
editorState: EditorState;
25-
lastValue: string;
2612
focused: boolean;
2713
}
2814

29-
interface IProps extends IBaseFieldProps, PropsResolver {
15+
interface IProps extends IBaseFieldProps {
3016
helperText?: React.ReactNode;
3117
placeholder?: string;
3218
disabled?: boolean;
@@ -45,38 +31,10 @@ interface IProps extends IBaseFieldProps, PropsResolver {
4531
}
4632
}))
4733
export default class FieldHtml extends FieldCoreBase<IProps, IState> {
48-
changeTimeout: number;
49-
localization = { locale: getConfig().editorLocale || 'en' };
50-
51-
componentDidMount() {
52-
this.componentDidUpdate();
53-
}
54-
55-
componentDidUpdate() {
56-
let { lastValue } = this.state;
57-
clearTimeout(this.changeTimeout);
58-
59-
if (lastValue !== this.props.value) {
60-
this.changeTimeout = setTimeout(() => {
61-
lastValue = this.props.value;
62-
63-
const blocksFromHtml = htmlToDraft(lastValue.replace(/<br\snewline\s\/>/gim, '<p></p>') || '');
64-
const { contentBlocks, entityMap } = blocksFromHtml;
65-
66-
const editorState = EditorState.createWithContent(ContentState.createFromBlockArray(contentBlocks, entityMap));
67-
this.setState({ editorState, lastValue });
68-
}, 100);
69-
}
70-
}
71-
72-
onChange = (editorState: EditorState) => {
73-
let lastValue = draftToHtml(convertToRaw(editorState.getCurrentContent())).trim().replace(/<p><\/p>/gim, '<br newline />');
74-
if (lastValue === '<br newline />') lastValue = null;
75-
76-
this.setState({ editorState, lastValue });
7734

35+
onChange = (value: any) => {
7836
getConfig().validationOn === 'onChange' && this.setState({ showError: true });
79-
this.props.onChange(lastValue);
37+
this.props.onChange(value);
8038
}
8139

8240
onBlur = (e: React.SyntheticEvent) => {
@@ -89,27 +47,13 @@ export default class FieldHtml extends FieldCoreBase<IProps, IState> {
8947
this.setState({ focused: true });
9048
}
9149

92-
handlePastedText = (text: string, html: string): boolean => {
93-
const { editorState } = this.state;
94-
95-
const blockMap = stateFromHTML(html || text).blockMap;
96-
const newState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), blockMap);
97-
98-
this.onChange(EditorState.push(editorState, newState, 'insert-fragment'));
99-
100-
return true;
101-
}
102-
103-
get toolbar() {
104-
return this.props.toolbar || getConfig().editorToolbar;
105-
}
106-
10750
render() {
108-
const { editorState, focused, lastValue } = this.state;
109-
const { classes, label, helperText, disabled, onChange, onBlur, placeholder, ...editorProps } = this.props;
51+
const { focused } = this.state;
52+
const { classes, label, helperText } = this.props;
53+
/* disabled, onChange, onBlur, placeholder */
11054

11155
return (
112-
<div className={`${styles.component}`}>
56+
<div>
11357

11458
<ValidationContextRegister field={this} />
11559

@@ -122,21 +66,7 @@ export default class FieldHtml extends FieldCoreBase<IProps, IState> {
12266
: null
12367
}
12468
</div>
125-
<Editor
126-
{...editorProps}
127-
readOnly={editorProps.readOnly || disabled}
128-
placeholder={lastValue ? null : placeholder}
129-
editorState={editorState}
130-
handlePastedText={this.handlePastedText}
131-
onFocus={this.onFocus}
132-
onBlur={this.onBlur}
133-
onEditorStateChange={this.onChange}
134-
wrapperClassName={`${styles.fullWrapper} ${classes.fullWrapper} ${focused ? ' focused ' : ''} ${disabled ? ' disabled ' : ''}`}
135-
toolbarClassName={`${styles.toolbarWrapper} ${classes.toolbarWrapper}`}
136-
editorClassName={`${styles.editorWrapper} ${classes.editorWrapper} ${disabled ? ' disabled ' : ''}`}
137-
toolbar={this.toolbar}
138-
localization={this.localization}
139-
/>
69+
14070
</div>
14171
);
14272
}

‎components/Html/style.css

Lines changed: 0 additions & 230 deletions
Original file line numberDiff line numberDiff line change
@@ -1,233 +1,3 @@
11
:local(.component) {
22
margin: 16px 0 8px 0;
3-
}
4-
5-
:local(.fullWrapper) {
6-
border: 1px solid #ededed;
7-
box-shadow: 0 0 3px transparent;
8-
transition: 0.3s;
9-
}
10-
11-
:local(.hide) {
12-
display: none !important;
13-
}
14-
15-
:local(.fullWrapper).focused {
16-
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
17-
}
18-
19-
:local(.fullWrapper).disabled {
20-
opacity: 0.6;
21-
border-style: dotted;
22-
pointer-events: none;
23-
}
24-
25-
:local(.toolbarWrapper) {
26-
margin: 0;
27-
border: none;
28-
}
29-
30-
:local(.toolbarWrapper) .rdw-option-wrapper {
31-
border: none;
32-
transition: 0.3s;
33-
border-bottom: 2px solid transparent;
34-
border-radius: 0;
35-
}
36-
37-
:local(.toolbarWrapper) .rdw-option-wrapper:not(.rdw-option-disabled) {
38-
opacity: 0.7;
39-
}
40-
41-
:local(.toolbarWrapper) .rdw-option-wrapper:hover {
42-
box-shadow: none;
43-
}
44-
45-
:local(.toolbarWrapper) .rdw-option-wrapper:not(.rdw-option-disabled):hover {
46-
opacity: 1;
47-
transform: translateY(-2px);
48-
}
49-
50-
:local(.toolbarWrapper) .rdw-option-wrapper.rdw-option-active {
51-
box-shadow: none;
52-
opacity: 1;
53-
transform: translateY(-2px);
54-
border-bottom-color: black;
55-
}
56-
57-
:local(.editorWrapper) {
58-
padding: 0 20px;
59-
margin: -1rem 0 0 0;
60-
}
61-
62-
:local(.fullWrapper) .rdw-image-alignment-options-popup {
63-
border: 1px solid rgba(0, 0, 0, 0.27);
64-
border-radius: 0;
65-
justify-content: center;
66-
padding: 3px 0;
67-
width: auto;
68-
}
69-
70-
:local(.fullWrapper) .rdw-image-alignment-options-popup .rdw-option-wrapper {
71-
border: none;
72-
font-family: "Roboto", sans-serif;
73-
font-weight: 500;
74-
opacity: 0.7;
75-
transition: 0.3s;
76-
width: auto;
77-
height: auto;
78-
padding: 5px 10px;
79-
border-bottom: 2px solid transparent;
80-
}
81-
82-
:local(.fullWrapper) .rdw-image-alignment-options-popup .rdw-option-wrapper:hover {
83-
box-shadow: none;
84-
opacity: 1;
85-
transform: translateY(-2px);
86-
}
87-
88-
:local(.fullWrapper) .rdw-image-left .rdw-image-alignment-options-popup .rdw-option-wrapper:nth-child(1) {
89-
border-bottom: 2px solid black;
90-
}
91-
92-
:local(.fullWrapper) .rdw-image-center .rdw-image-alignment-options-popup .rdw-option-wrapper:nth-child(2) {
93-
border-bottom: 2px solid black;
94-
}
95-
96-
:local(.fullWrapper) .rdw-image-right .rdw-image-alignment-options-popup .rdw-option-wrapper:nth-child(3) {
97-
border-bottom: 2px solid black;
98-
}
99-
100-
:local(.fullWrapper) [class^="rdw"][class$="modal"] {
101-
font-family: "Roboto", sans-serif;
102-
position: fixed;
103-
z-index: 1500;
104-
margin: auto;
105-
top: 0;
106-
left: 0;
107-
right: 0;
108-
bottom: 0;
109-
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0 0 0 5000px #00000080;
110-
border-radius: 2px;
111-
transition: 0.3s;
112-
padding: 24px 24px 8px 24px;
113-
box-sizing: border-box;
114-
width: 400px;
115-
max-width: 95vw;
116-
}
117-
118-
:local(.fullWrapper) [class^="rdw"][class$="modal-label"] {
119-
font-size: 12px;
120-
}
121-
122-
:local(.fullWrapper) [class^="rdw"][class$="input"] {
123-
border: none;
124-
border-bottom: 1px solid rgba(0, 0, 0, 0.47);
125-
border-radius: 0;
126-
font-size: 14px;
127-
padding: 0;
128-
letter-spacing: 0.5px;
129-
height: 32px;
130-
transition: 0.3s;
131-
margin-bottom: 20px;
132-
width: 100%;
133-
}
134-
135-
:local(.fullWrapper) [class^="rdw"][class$="input"]:focus {
136-
border-bottom-width: 2px;
137-
}
138-
139-
[class^="rdw"][class$="modal-buttonsection"],
140-
:local(.fullWrapper) [class^="rdw"][class$="modal-btn-section"] {
141-
margin-right: -16px;
142-
text-align: right;
143-
}
144-
145-
:local(.fullWrapper) [class^="rdw"][class$="modal-btn"] {
146-
text-transform: uppercase;
147-
font-weight: 500;
148-
font-family: "Roboto", sans-serif;
149-
font-size: 0.875rem;
150-
border: none;
151-
padding: 8px 16px;
152-
transition: 0.3s;
153-
width: auto;
154-
height: auto;
155-
}
156-
157-
:local(.fullWrapper) [class^="rdw"][class$="modal-btn"]:first-child {
158-
margin-left: 0;
159-
float: right;
160-
}
161-
162-
:local(.fullWrapper) [class^="rdw"][class$="modal-btn"]:hover {
163-
box-shadow: none;
164-
background-color: rgba(0, 0, 0, 0.08);
165-
}
166-
167-
:local(.fullWrapper) [class^="rdw"][class$="modal-btn"]:disabled {
168-
background: none;
169-
cursor: not-allowed;
170-
}
171-
172-
:local(.fullWrapper) .rdw-link-modal {
173-
height: 250px;
174-
}
175-
176-
:local(.fullWrapper) .rdw-image-modal {
177-
height: 200px;
178-
}
179-
180-
:local(.fullWrapper) .rdw-image-modal .rdw-image-mandatory-sign {
181-
display: none;
182-
}
183-
184-
:local(.fullWrapper) .rdw-image-modal .rdw-image-modal-header {
185-
margin: 0;
186-
}
187-
188-
:local(.fullWrapper) .rdw-image-modal .rdw-image-modal-header-label {
189-
display: none;
190-
}
191-
192-
:local(.fullWrapper) .rdw-image-modal .rdw-image-modal-header-option {
193-
width: auto;
194-
font-size: 12px;
195-
margin-bottom: -15px;
196-
}
197-
198-
:local(.fullWrapper) .rdw-image-modal .rdw-image-modal-size-input:first-child {
199-
margin-right: 20px;
200-
}
201-
202-
:local(.fullWrapper) .rdw-image-modal .rdw-image-modal-size-input {
203-
margin-left: 5px;
204-
}
205-
206-
:local(.fullWrapper) .rdw-image-modal .rdw-image-modal-size {
207-
margin: 0;
208-
font-size: 23px;
209-
}
210-
211-
:local(.fullWrapper) a.rdw-dropdown-selectedtext {
212-
font-family: "Roboto", sans-serif;
213-
font-size: 14px;
214-
}
215-
216-
217-
:local(.fullWrapper) .rdw-dropdown-wrapper {
218-
border: 1px solid #bababa;
219-
}
220-
221-
:local(.fullWrapper) .rdw-dropdown-wrapper:hover {
222-
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
223-
}
224-
225-
:local(.fullWrapper) li.rdw-dropdownoption-default {
226-
font-family: "Roboto", sans-serif;
227-
white-space: nowrap;
228-
text-overflow: ellipsis;
229-
overflow: hidden;
230-
display: block;
231-
font-size: 13px;
232-
line-height: 25px;
2333
}

‎docs/project/.env.development

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
NODE_ENV=development
2+
REACT_APP_ENV=development

‎docs/project/.env.production

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
NODE_ENV=production
2+
REACT_APP_ENV=production

‎docs/project/.vscode/extensions.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"recommendations": [
3+
"HookyQR.beautify",
4+
"EditorConfig.editorconfig",
5+
"christian-kohler.npm-intellisense",
6+
"christian-kohler.path-intellisense",
7+
"eg2.tslint",
8+
"rbbit.typescript-hero"
9+
]
10+
}

0 commit comments

Comments
 (0)