@atlaskit/inline-edit 14.2.4 → 14.3.1
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 +20 -0
- package/dist/cjs/inline-edit.js +1 -1
- package/dist/es2019/inline-edit.js +1 -1
- package/dist/esm/inline-edit.js +1 -1
- package/package.json +11 -13
- package/codemods/12.0.0-lite-mode.ts +0 -15
- package/codemods/__tests__/12.0.0-lite-mode.tsx +0 -405
- package/codemods/__tests__/add-comments-when-validate-found.ts +0 -118
- package/codemods/__tests__/lift-InlineEditStateless-to-default.ts +0 -129
- package/codemods/__tests__/lift-InlineEditableTextField-to-its-entry-point.tsx +0 -82
- package/codemods/__tests__/spread-errorMessage-out-of-fieldProps.tsx +0 -493
- package/codemods/migrates/add-comments-when-validate-found.ts +0 -44
- package/codemods/migrates/lift-InlineEditStateless-to-default.ts +0 -58
- package/codemods/migrates/lift-InlineEditableTextField-to-its-entry-point.ts +0 -41
- package/codemods/migrates/spread-errorMessage-out-of-fieldProps.ts +0 -56
- package/codemods/migrates/utils.ts +0 -94
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import { createTransformer } from '@atlaskit/codemod-utils';
|
|
2
|
-
|
|
3
|
-
import liftInlineEditStatelessToDefault from '../migrates/lift-InlineEditStateless-to-default';
|
|
4
|
-
|
|
5
|
-
const transformer = createTransformer([liftInlineEditStatelessToDefault]);
|
|
6
|
-
|
|
7
|
-
const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
|
|
8
|
-
|
|
9
|
-
describe('lift InlineEditStateless to default', () => {
|
|
10
|
-
defineInlineTest(
|
|
11
|
-
{ default: transformer, parser: 'tsx' },
|
|
12
|
-
{},
|
|
13
|
-
`
|
|
14
|
-
import React from "react";
|
|
15
|
-
import { InlineEditableTextfield } from "@atlaskit/inline-edit";
|
|
16
|
-
|
|
17
|
-
export default () => (
|
|
18
|
-
<InlineEditableTextfield />
|
|
19
|
-
);
|
|
20
|
-
`,
|
|
21
|
-
`
|
|
22
|
-
import React from "react";
|
|
23
|
-
import { InlineEditableTextfield } from "@atlaskit/inline-edit";
|
|
24
|
-
|
|
25
|
-
export default () => (
|
|
26
|
-
<InlineEditableTextfield />
|
|
27
|
-
);
|
|
28
|
-
`,
|
|
29
|
-
'should not do anything other than stateless',
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
defineInlineTest(
|
|
33
|
-
{ default: transformer, parser: 'tsx' },
|
|
34
|
-
{},
|
|
35
|
-
`
|
|
36
|
-
import React from "react";
|
|
37
|
-
import { InlineEditStateless } from "@atlaskit/inline-edit";
|
|
38
|
-
|
|
39
|
-
export default () => (
|
|
40
|
-
<InlineEditStateless />
|
|
41
|
-
);
|
|
42
|
-
`,
|
|
43
|
-
`
|
|
44
|
-
import React from "react";
|
|
45
|
-
import InlineEditStateless from "@atlaskit/inline-edit";
|
|
46
|
-
|
|
47
|
-
export default () => (
|
|
48
|
-
<InlineEditStateless />
|
|
49
|
-
);
|
|
50
|
-
`,
|
|
51
|
-
'should lift the stateless to default',
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
defineInlineTest(
|
|
55
|
-
{ default: transformer, parser: 'tsx' },
|
|
56
|
-
{},
|
|
57
|
-
`
|
|
58
|
-
import React from "react";
|
|
59
|
-
import { InlineEditStateless as InlineEdit } from "@atlaskit/inline-edit";
|
|
60
|
-
|
|
61
|
-
export default () => (
|
|
62
|
-
<InlineEdit />
|
|
63
|
-
);
|
|
64
|
-
`,
|
|
65
|
-
`
|
|
66
|
-
import React from "react";
|
|
67
|
-
import InlineEdit from "@atlaskit/inline-edit";
|
|
68
|
-
|
|
69
|
-
export default () => (
|
|
70
|
-
<InlineEdit />
|
|
71
|
-
);
|
|
72
|
-
`,
|
|
73
|
-
'should lift the stateless to default with alias',
|
|
74
|
-
);
|
|
75
|
-
|
|
76
|
-
defineInlineTest(
|
|
77
|
-
{ default: transformer, parser: 'tsx' },
|
|
78
|
-
{},
|
|
79
|
-
`
|
|
80
|
-
import React from "react";
|
|
81
|
-
import { InlineEditableTextfield as InlineEdit } from "@atlaskit/inline-edit";
|
|
82
|
-
|
|
83
|
-
export default () => (
|
|
84
|
-
<InlineEdit />
|
|
85
|
-
);
|
|
86
|
-
`,
|
|
87
|
-
`
|
|
88
|
-
import React from "react";
|
|
89
|
-
import { InlineEditableTextfield as InlineEdit } from "@atlaskit/inline-edit";
|
|
90
|
-
|
|
91
|
-
export default () => (
|
|
92
|
-
<InlineEdit />
|
|
93
|
-
);
|
|
94
|
-
`,
|
|
95
|
-
'should not lift the InlineEditableTextfield to default with alias',
|
|
96
|
-
);
|
|
97
|
-
|
|
98
|
-
defineInlineTest(
|
|
99
|
-
{ default: transformer, parser: 'tsx' },
|
|
100
|
-
{},
|
|
101
|
-
`
|
|
102
|
-
import React from "react";
|
|
103
|
-
import InlineEdit, { InlineEditStateless } from "@atlaskit/inline-edit";
|
|
104
|
-
|
|
105
|
-
export default () => (
|
|
106
|
-
<Container>
|
|
107
|
-
<InlineEdit />
|
|
108
|
-
<InlineEditStateless />
|
|
109
|
-
</Container>
|
|
110
|
-
);
|
|
111
|
-
`,
|
|
112
|
-
`
|
|
113
|
-
/* TODO: (from codemod) We could not automatically convert this code to the new API.
|
|
114
|
-
|
|
115
|
-
This file uses \`InlineEdit\` and \`InlineEditStateless\` at the same time. We've merged these two types since version 12.0.0, and please use the merged version instead.
|
|
116
|
-
*/
|
|
117
|
-
import React from "react";
|
|
118
|
-
import InlineEdit, { InlineEditStateless } from "@atlaskit/inline-edit";
|
|
119
|
-
|
|
120
|
-
export default () => (
|
|
121
|
-
<Container>
|
|
122
|
-
<InlineEdit />
|
|
123
|
-
<InlineEditStateless />
|
|
124
|
-
</Container>
|
|
125
|
-
);
|
|
126
|
-
`,
|
|
127
|
-
'should add comments when cannot convert',
|
|
128
|
-
);
|
|
129
|
-
});
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import { createTransformer } from '@atlaskit/codemod-utils';
|
|
2
|
-
|
|
3
|
-
import liftInlineEditableTextField from '../migrates/lift-InlineEditableTextField-to-its-entry-point';
|
|
4
|
-
|
|
5
|
-
const transformer = createTransformer([liftInlineEditableTextField]);
|
|
6
|
-
|
|
7
|
-
const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
|
|
8
|
-
|
|
9
|
-
describe('lift InlineEditableTextField to its own entry point', () => {
|
|
10
|
-
defineInlineTest(
|
|
11
|
-
{ default: transformer, parser: 'tsx' },
|
|
12
|
-
{},
|
|
13
|
-
`
|
|
14
|
-
import React from "react";
|
|
15
|
-
import {InlineEditableTextfield} from "@atlaskit/inline-edit";
|
|
16
|
-
|
|
17
|
-
export default () => (
|
|
18
|
-
<InlineEditableTextfield />
|
|
19
|
-
);
|
|
20
|
-
`,
|
|
21
|
-
`
|
|
22
|
-
import React from "react";
|
|
23
|
-
import InlineEditableTextfield from "@atlaskit/inline-edit/inline-editable-textfield";
|
|
24
|
-
|
|
25
|
-
export default () => (
|
|
26
|
-
<InlineEditableTextfield />
|
|
27
|
-
);
|
|
28
|
-
`,
|
|
29
|
-
'should switch InlineEditableTextfield to a new entrypoint',
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
defineInlineTest(
|
|
33
|
-
{ default: transformer, parser: 'tsx' },
|
|
34
|
-
{},
|
|
35
|
-
`
|
|
36
|
-
import React from "react";
|
|
37
|
-
import { InlineEditStateless } from "@atlaskit/inline-edit";
|
|
38
|
-
|
|
39
|
-
export default () => (
|
|
40
|
-
<InlineEditableTextfield />
|
|
41
|
-
);
|
|
42
|
-
`,
|
|
43
|
-
`
|
|
44
|
-
import React from "react";
|
|
45
|
-
import { InlineEditStateless } from "@atlaskit/inline-edit";
|
|
46
|
-
|
|
47
|
-
export default () => (
|
|
48
|
-
<InlineEditableTextfield />
|
|
49
|
-
);
|
|
50
|
-
`,
|
|
51
|
-
'should not do it to other things',
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
defineInlineTest(
|
|
55
|
-
{ default: transformer, parser: 'tsx' },
|
|
56
|
-
{},
|
|
57
|
-
`
|
|
58
|
-
import React from "react";
|
|
59
|
-
import InlineEdit, {InlineEditableTextfield} from "@atlaskit/inline-edit";
|
|
60
|
-
|
|
61
|
-
export default () => (
|
|
62
|
-
<Container>
|
|
63
|
-
<InlineEdit />
|
|
64
|
-
<InlineEditableTextfield />
|
|
65
|
-
</Container>
|
|
66
|
-
);
|
|
67
|
-
`,
|
|
68
|
-
`
|
|
69
|
-
import React from "react";
|
|
70
|
-
import InlineEditableTextfield from "@atlaskit/inline-edit/inline-editable-textfield";
|
|
71
|
-
import InlineEdit from "@atlaskit/inline-edit";
|
|
72
|
-
|
|
73
|
-
export default () => (
|
|
74
|
-
<Container>
|
|
75
|
-
<InlineEdit />
|
|
76
|
-
<InlineEditableTextfield />
|
|
77
|
-
</Container>
|
|
78
|
-
);
|
|
79
|
-
`,
|
|
80
|
-
'should switch InlineEditableTextfield to a new entrypoint with default import',
|
|
81
|
-
);
|
|
82
|
-
});
|
|
@@ -1,493 +0,0 @@
|
|
|
1
|
-
import { createTransformer } from '@atlaskit/codemod-utils';
|
|
2
|
-
|
|
3
|
-
import spreadErrorMessage from '../migrates/spread-errorMessage-out-of-fieldProps';
|
|
4
|
-
|
|
5
|
-
const transformer = createTransformer([spreadErrorMessage]);
|
|
6
|
-
|
|
7
|
-
jest.autoMockOff();
|
|
8
|
-
const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
|
|
9
|
-
|
|
10
|
-
describe('spreadErrorMessage prop', () => {
|
|
11
|
-
defineInlineTest(
|
|
12
|
-
{ default: transformer, parser: 'tsx' },
|
|
13
|
-
{},
|
|
14
|
-
`
|
|
15
|
-
import React from "react";
|
|
16
|
-
import InlineEdit from "@atlaskit/inline-edit";
|
|
17
|
-
|
|
18
|
-
export default () => (
|
|
19
|
-
<InlineEdit
|
|
20
|
-
defaultValue={editValue}
|
|
21
|
-
label="Inline edit"
|
|
22
|
-
validate={()=>{}}
|
|
23
|
-
editView={(fieldProps) => <Textfield {...fieldProps} autoFocus />}
|
|
24
|
-
readView={() => (
|
|
25
|
-
<ReadViewContainer data-testid="read-view">
|
|
26
|
-
{editValue || 'Click to enter value'}
|
|
27
|
-
</ReadViewContainer>
|
|
28
|
-
)}
|
|
29
|
-
onConfirm={value => setEditValue(value)}
|
|
30
|
-
/>
|
|
31
|
-
);
|
|
32
|
-
`,
|
|
33
|
-
`
|
|
34
|
-
import React from "react";
|
|
35
|
-
import InlineEdit from "@atlaskit/inline-edit";
|
|
36
|
-
|
|
37
|
-
export default () => (
|
|
38
|
-
<InlineEdit
|
|
39
|
-
defaultValue={editValue}
|
|
40
|
-
label="Inline edit"
|
|
41
|
-
validate={()=>{}}
|
|
42
|
-
editView={(
|
|
43
|
-
{
|
|
44
|
-
errorMessage,
|
|
45
|
-
...fieldProps
|
|
46
|
-
}
|
|
47
|
-
) => <Textfield {...fieldProps} autoFocus />}
|
|
48
|
-
readView={() => (
|
|
49
|
-
<ReadViewContainer data-testid="read-view">
|
|
50
|
-
{editValue || 'Click to enter value'}
|
|
51
|
-
</ReadViewContainer>
|
|
52
|
-
)}
|
|
53
|
-
onConfirm={value => setEditValue(value)}
|
|
54
|
-
/>
|
|
55
|
-
);
|
|
56
|
-
`,
|
|
57
|
-
'should spread errorMessage out',
|
|
58
|
-
);
|
|
59
|
-
|
|
60
|
-
defineInlineTest(
|
|
61
|
-
{ default: transformer, parser: 'tsx' },
|
|
62
|
-
{},
|
|
63
|
-
`
|
|
64
|
-
import React from "react";
|
|
65
|
-
import InlineEdit from "@atlaskit/inline-edit";
|
|
66
|
-
|
|
67
|
-
export default () => (
|
|
68
|
-
<InlineEdit
|
|
69
|
-
defaultValue={editValue}
|
|
70
|
-
label="Inline edit"
|
|
71
|
-
validate={()=>{}}
|
|
72
|
-
editView={props => <Textfield {...props} autoFocus />}
|
|
73
|
-
readView={() => (
|
|
74
|
-
<ReadViewContainer data-testid="read-view">
|
|
75
|
-
{editValue || 'Click to enter value'}
|
|
76
|
-
</ReadViewContainer>
|
|
77
|
-
)}
|
|
78
|
-
onConfirm={value => setEditValue(value)}
|
|
79
|
-
/>
|
|
80
|
-
);
|
|
81
|
-
`,
|
|
82
|
-
`
|
|
83
|
-
import React from "react";
|
|
84
|
-
import InlineEdit from "@atlaskit/inline-edit";
|
|
85
|
-
|
|
86
|
-
export default () => (
|
|
87
|
-
<InlineEdit
|
|
88
|
-
defaultValue={editValue}
|
|
89
|
-
label="Inline edit"
|
|
90
|
-
validate={()=>{}}
|
|
91
|
-
editView={(
|
|
92
|
-
{
|
|
93
|
-
errorMessage,
|
|
94
|
-
...props
|
|
95
|
-
}
|
|
96
|
-
) => <Textfield {...props} autoFocus />}
|
|
97
|
-
readView={() => (
|
|
98
|
-
<ReadViewContainer data-testid="read-view">
|
|
99
|
-
{editValue || 'Click to enter value'}
|
|
100
|
-
</ReadViewContainer>
|
|
101
|
-
)}
|
|
102
|
-
onConfirm={value => setEditValue(value)}
|
|
103
|
-
/>
|
|
104
|
-
);
|
|
105
|
-
`,
|
|
106
|
-
'should spread errorMessage out - with alias',
|
|
107
|
-
);
|
|
108
|
-
|
|
109
|
-
defineInlineTest(
|
|
110
|
-
{ default: transformer, parser: 'tsx' },
|
|
111
|
-
{},
|
|
112
|
-
`
|
|
113
|
-
import React, { PureComponent } from "react";
|
|
114
|
-
import InlineEdit from "@atlaskit/inline-edit";
|
|
115
|
-
import TextField from "@atlaskit/textfield";
|
|
116
|
-
|
|
117
|
-
export default class ColumnEditableTitle extends PureComponent {
|
|
118
|
-
handleChange = (event) => {
|
|
119
|
-
this.setState({ editValue: event.target.value });
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
handleEditChange = () => {
|
|
123
|
-
this.setState({ isEditing: true });
|
|
124
|
-
if (this.props.onEditChange) {
|
|
125
|
-
this.props.onEditChange(true);
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
handleConfirm = () => {
|
|
130
|
-
const newValue = this.state.editValue.trim();
|
|
131
|
-
|
|
132
|
-
if (isBlank(newValue) || hasNotChange(newValue, this.props.text)) {
|
|
133
|
-
this.handleCancel();
|
|
134
|
-
} else {
|
|
135
|
-
this.setState({ isEditing: false });
|
|
136
|
-
this.props.onConfirm(this.props.columnId, newValue);
|
|
137
|
-
if (this.props.onEditChange) {
|
|
138
|
-
this.props.onEditChange(false);
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
handleCancel = () => {
|
|
144
|
-
this.setState({
|
|
145
|
-
editValue: this.props.text,
|
|
146
|
-
isEditing: false,
|
|
147
|
-
});
|
|
148
|
-
this.props.onCancel(this.props.columnId);
|
|
149
|
-
if (isNotNewColumn(this.props) && this.props.onEditChange) {
|
|
150
|
-
this.props.onEditChange(false);
|
|
151
|
-
}
|
|
152
|
-
};
|
|
153
|
-
|
|
154
|
-
handleKeyDown = (event) => {
|
|
155
|
-
if (isEscape(event)) {
|
|
156
|
-
this.handleCancel();
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
renderReading = () => (
|
|
161
|
-
<Reading>
|
|
162
|
-
<ColumnTitle {...this.props} text={this.state.editValue} />
|
|
163
|
-
</Reading>
|
|
164
|
-
);
|
|
165
|
-
|
|
166
|
-
renderEditing = (fieldProps) => (
|
|
167
|
-
<TextField
|
|
168
|
-
{...fieldProps}
|
|
169
|
-
autoFocus
|
|
170
|
-
value={this.state.editValue}
|
|
171
|
-
onChange={this.handleChange}
|
|
172
|
-
onMouseDown={(event) => event.stopPropagation()}
|
|
173
|
-
onKeyDown={this.handleKeyDown}
|
|
174
|
-
isCompact
|
|
175
|
-
/>
|
|
176
|
-
);
|
|
177
|
-
|
|
178
|
-
render() {
|
|
179
|
-
const { isDisabled } = this.props;
|
|
180
|
-
|
|
181
|
-
// if this component is disabled or in case this component belongs to a
|
|
182
|
-
// new column (id < 0) and is no longer being edited then <ColumnTitle/>
|
|
183
|
-
// should be rendered instead (not in editable mode).
|
|
184
|
-
const shouldRenderColumnTitle =
|
|
185
|
-
isDisabled || (isNewColumn(this.props) && !this.state.isEditing);
|
|
186
|
-
|
|
187
|
-
return shouldRenderColumnTitle ? (
|
|
188
|
-
<ColumnTitle {...this.props} text={this.state.editValue} />
|
|
189
|
-
) : (
|
|
190
|
-
<Container>
|
|
191
|
-
<InlineEdit
|
|
192
|
-
defaultValue={this.state.editValue}
|
|
193
|
-
startWithEditViewOpen
|
|
194
|
-
editView={this.renderEditing}
|
|
195
|
-
readView={this.renderReading}
|
|
196
|
-
onConfirm={this.handleConfirm}
|
|
197
|
-
// OnCancel will be exposed back once https://product-fabric.atlassian.net/browse/DST-1865 is released
|
|
198
|
-
onCancel={this.handleCancel}
|
|
199
|
-
/>
|
|
200
|
-
</Container>
|
|
201
|
-
);
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
`,
|
|
205
|
-
`
|
|
206
|
-
import React, { PureComponent } from "react";
|
|
207
|
-
import InlineEdit from "@atlaskit/inline-edit";
|
|
208
|
-
import TextField from "@atlaskit/textfield";
|
|
209
|
-
|
|
210
|
-
export default class ColumnEditableTitle extends PureComponent {
|
|
211
|
-
handleChange = (event) => {
|
|
212
|
-
this.setState({ editValue: event.target.value });
|
|
213
|
-
};
|
|
214
|
-
|
|
215
|
-
handleEditChange = () => {
|
|
216
|
-
this.setState({ isEditing: true });
|
|
217
|
-
if (this.props.onEditChange) {
|
|
218
|
-
this.props.onEditChange(true);
|
|
219
|
-
}
|
|
220
|
-
};
|
|
221
|
-
|
|
222
|
-
handleConfirm = () => {
|
|
223
|
-
const newValue = this.state.editValue.trim();
|
|
224
|
-
|
|
225
|
-
if (isBlank(newValue) || hasNotChange(newValue, this.props.text)) {
|
|
226
|
-
this.handleCancel();
|
|
227
|
-
} else {
|
|
228
|
-
this.setState({ isEditing: false });
|
|
229
|
-
this.props.onConfirm(this.props.columnId, newValue);
|
|
230
|
-
if (this.props.onEditChange) {
|
|
231
|
-
this.props.onEditChange(false);
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
};
|
|
235
|
-
|
|
236
|
-
handleCancel = () => {
|
|
237
|
-
this.setState({
|
|
238
|
-
editValue: this.props.text,
|
|
239
|
-
isEditing: false,
|
|
240
|
-
});
|
|
241
|
-
this.props.onCancel(this.props.columnId);
|
|
242
|
-
if (isNotNewColumn(this.props) && this.props.onEditChange) {
|
|
243
|
-
this.props.onEditChange(false);
|
|
244
|
-
}
|
|
245
|
-
};
|
|
246
|
-
|
|
247
|
-
handleKeyDown = (event) => {
|
|
248
|
-
if (isEscape(event)) {
|
|
249
|
-
this.handleCancel();
|
|
250
|
-
}
|
|
251
|
-
};
|
|
252
|
-
|
|
253
|
-
renderReading = () => (
|
|
254
|
-
<Reading>
|
|
255
|
-
<ColumnTitle {...this.props} text={this.state.editValue} />
|
|
256
|
-
</Reading>
|
|
257
|
-
);
|
|
258
|
-
|
|
259
|
-
renderEditing = (fieldProps) => (
|
|
260
|
-
<TextField
|
|
261
|
-
{...fieldProps}
|
|
262
|
-
autoFocus
|
|
263
|
-
value={this.state.editValue}
|
|
264
|
-
onChange={this.handleChange}
|
|
265
|
-
onMouseDown={(event) => event.stopPropagation()}
|
|
266
|
-
onKeyDown={this.handleKeyDown}
|
|
267
|
-
isCompact
|
|
268
|
-
/>
|
|
269
|
-
);
|
|
270
|
-
|
|
271
|
-
render() {
|
|
272
|
-
const { isDisabled } = this.props;
|
|
273
|
-
|
|
274
|
-
// if this component is disabled or in case this component belongs to a
|
|
275
|
-
// new column (id < 0) and is no longer being edited then <ColumnTitle/>
|
|
276
|
-
// should be rendered instead (not in editable mode).
|
|
277
|
-
const shouldRenderColumnTitle =
|
|
278
|
-
isDisabled || (isNewColumn(this.props) && !this.state.isEditing);
|
|
279
|
-
|
|
280
|
-
return shouldRenderColumnTitle ? (
|
|
281
|
-
<ColumnTitle {...this.props} text={this.state.editValue} />
|
|
282
|
-
) : (
|
|
283
|
-
<Container>
|
|
284
|
-
<InlineEdit
|
|
285
|
-
defaultValue={this.state.editValue}
|
|
286
|
-
startWithEditViewOpen
|
|
287
|
-
editView={this.renderEditing}
|
|
288
|
-
readView={this.renderReading}
|
|
289
|
-
onConfirm={this.handleConfirm}
|
|
290
|
-
// OnCancel will be exposed back once https://product-fabric.atlassian.net/browse/DST-1865 is released
|
|
291
|
-
onCancel={this.handleCancel}
|
|
292
|
-
/>
|
|
293
|
-
</Container>
|
|
294
|
-
);
|
|
295
|
-
}
|
|
296
|
-
}
|
|
297
|
-
`,
|
|
298
|
-
'ColumnEditableTitle - add comment when editView is not inline',
|
|
299
|
-
);
|
|
300
|
-
|
|
301
|
-
defineInlineTest(
|
|
302
|
-
{ default: transformer, parser: 'tsx' },
|
|
303
|
-
{},
|
|
304
|
-
`
|
|
305
|
-
import React, { PureComponent } from "react";
|
|
306
|
-
import InlineEdit from "@atlaskit/inline-edit";
|
|
307
|
-
import TextField from "@atlaskit/textfield";
|
|
308
|
-
|
|
309
|
-
export default class ColumnEditableTitle extends PureComponent {
|
|
310
|
-
handleChange = (event) => {
|
|
311
|
-
this.setState({ editValue: event.target.value });
|
|
312
|
-
};
|
|
313
|
-
|
|
314
|
-
handleEditChange = () => {
|
|
315
|
-
this.setState({ isEditing: true });
|
|
316
|
-
if (this.props.onEditChange) {
|
|
317
|
-
this.props.onEditChange(true);
|
|
318
|
-
}
|
|
319
|
-
};
|
|
320
|
-
|
|
321
|
-
handleConfirm = () => {
|
|
322
|
-
const newValue = this.state.editValue.trim();
|
|
323
|
-
|
|
324
|
-
if (isBlank(newValue) || hasNotChange(newValue, this.props.text)) {
|
|
325
|
-
this.handleCancel();
|
|
326
|
-
} else {
|
|
327
|
-
this.setState({ isEditing: false });
|
|
328
|
-
this.props.onConfirm(this.props.columnId, newValue);
|
|
329
|
-
if (this.props.onEditChange) {
|
|
330
|
-
this.props.onEditChange(false);
|
|
331
|
-
}
|
|
332
|
-
}
|
|
333
|
-
};
|
|
334
|
-
|
|
335
|
-
handleCancel = () => {
|
|
336
|
-
this.setState({
|
|
337
|
-
editValue: this.props.text,
|
|
338
|
-
isEditing: false,
|
|
339
|
-
});
|
|
340
|
-
this.props.onCancel(this.props.columnId);
|
|
341
|
-
if (isNotNewColumn(this.props) && this.props.onEditChange) {
|
|
342
|
-
this.props.onEditChange(false);
|
|
343
|
-
}
|
|
344
|
-
};
|
|
345
|
-
|
|
346
|
-
handleKeyDown = (event) => {
|
|
347
|
-
if (isEscape(event)) {
|
|
348
|
-
this.handleCancel();
|
|
349
|
-
}
|
|
350
|
-
};
|
|
351
|
-
|
|
352
|
-
renderReading = () => (
|
|
353
|
-
<Reading>
|
|
354
|
-
<ColumnTitle {...this.props} text={this.state.editValue} />
|
|
355
|
-
</Reading>
|
|
356
|
-
);
|
|
357
|
-
|
|
358
|
-
render() {
|
|
359
|
-
const { isDisabled } = this.props;
|
|
360
|
-
|
|
361
|
-
// if this component is disabled or in case this component belongs to a
|
|
362
|
-
// new column (id < 0) and is no longer being edited then <ColumnTitle/>
|
|
363
|
-
// should be rendered instead (not in editable mode).
|
|
364
|
-
const shouldRenderColumnTitle =
|
|
365
|
-
isDisabled || (isNewColumn(this.props) && !this.state.isEditing);
|
|
366
|
-
|
|
367
|
-
return shouldRenderColumnTitle ? (
|
|
368
|
-
<ColumnTitle {...this.props} text={this.state.editValue} />
|
|
369
|
-
) : (
|
|
370
|
-
<Container>
|
|
371
|
-
<InlineEdit
|
|
372
|
-
defaultValue={this.state.editValue}
|
|
373
|
-
startWithEditViewOpen
|
|
374
|
-
validate={() => {}}
|
|
375
|
-
editView={(fieldProps) => (
|
|
376
|
-
<TextField
|
|
377
|
-
{...fieldProps}
|
|
378
|
-
autoFocus
|
|
379
|
-
value={this.state.editValue}
|
|
380
|
-
onChange={this.handleChange}
|
|
381
|
-
onMouseDown={(event) => event.stopPropagation()}
|
|
382
|
-
onKeyDown={this.handleKeyDown}
|
|
383
|
-
isCompact
|
|
384
|
-
/>
|
|
385
|
-
)}
|
|
386
|
-
readView={this.renderReading}
|
|
387
|
-
onConfirm={this.handleConfirm}
|
|
388
|
-
// OnCancel will be exposed back once https://product-fabric.atlassian.net/browse/DST-1865 is released
|
|
389
|
-
onCancel={this.handleCancel}
|
|
390
|
-
/>
|
|
391
|
-
</Container>
|
|
392
|
-
);
|
|
393
|
-
}
|
|
394
|
-
}
|
|
395
|
-
`,
|
|
396
|
-
`
|
|
397
|
-
import React, { PureComponent } from "react";
|
|
398
|
-
import InlineEdit from "@atlaskit/inline-edit";
|
|
399
|
-
import TextField from "@atlaskit/textfield";
|
|
400
|
-
|
|
401
|
-
export default class ColumnEditableTitle extends PureComponent {
|
|
402
|
-
handleChange = (event) => {
|
|
403
|
-
this.setState({ editValue: event.target.value });
|
|
404
|
-
};
|
|
405
|
-
|
|
406
|
-
handleEditChange = () => {
|
|
407
|
-
this.setState({ isEditing: true });
|
|
408
|
-
if (this.props.onEditChange) {
|
|
409
|
-
this.props.onEditChange(true);
|
|
410
|
-
}
|
|
411
|
-
};
|
|
412
|
-
|
|
413
|
-
handleConfirm = () => {
|
|
414
|
-
const newValue = this.state.editValue.trim();
|
|
415
|
-
|
|
416
|
-
if (isBlank(newValue) || hasNotChange(newValue, this.props.text)) {
|
|
417
|
-
this.handleCancel();
|
|
418
|
-
} else {
|
|
419
|
-
this.setState({ isEditing: false });
|
|
420
|
-
this.props.onConfirm(this.props.columnId, newValue);
|
|
421
|
-
if (this.props.onEditChange) {
|
|
422
|
-
this.props.onEditChange(false);
|
|
423
|
-
}
|
|
424
|
-
}
|
|
425
|
-
};
|
|
426
|
-
|
|
427
|
-
handleCancel = () => {
|
|
428
|
-
this.setState({
|
|
429
|
-
editValue: this.props.text,
|
|
430
|
-
isEditing: false,
|
|
431
|
-
});
|
|
432
|
-
this.props.onCancel(this.props.columnId);
|
|
433
|
-
if (isNotNewColumn(this.props) && this.props.onEditChange) {
|
|
434
|
-
this.props.onEditChange(false);
|
|
435
|
-
}
|
|
436
|
-
};
|
|
437
|
-
|
|
438
|
-
handleKeyDown = (event) => {
|
|
439
|
-
if (isEscape(event)) {
|
|
440
|
-
this.handleCancel();
|
|
441
|
-
}
|
|
442
|
-
};
|
|
443
|
-
|
|
444
|
-
renderReading = () => (
|
|
445
|
-
<Reading>
|
|
446
|
-
<ColumnTitle {...this.props} text={this.state.editValue} />
|
|
447
|
-
</Reading>
|
|
448
|
-
);
|
|
449
|
-
|
|
450
|
-
render() {
|
|
451
|
-
const { isDisabled } = this.props;
|
|
452
|
-
|
|
453
|
-
// if this component is disabled or in case this component belongs to a
|
|
454
|
-
// new column (id < 0) and is no longer being edited then <ColumnTitle/>
|
|
455
|
-
// should be rendered instead (not in editable mode).
|
|
456
|
-
const shouldRenderColumnTitle =
|
|
457
|
-
isDisabled || (isNewColumn(this.props) && !this.state.isEditing);
|
|
458
|
-
|
|
459
|
-
return shouldRenderColumnTitle ? (
|
|
460
|
-
<ColumnTitle {...this.props} text={this.state.editValue} />
|
|
461
|
-
) : (
|
|
462
|
-
<Container>
|
|
463
|
-
<InlineEdit
|
|
464
|
-
defaultValue={this.state.editValue}
|
|
465
|
-
startWithEditViewOpen
|
|
466
|
-
validate={() => {}}
|
|
467
|
-
editView={(
|
|
468
|
-
{
|
|
469
|
-
errorMessage,
|
|
470
|
-
...fieldProps
|
|
471
|
-
}
|
|
472
|
-
) => <TextField
|
|
473
|
-
{...fieldProps}
|
|
474
|
-
autoFocus
|
|
475
|
-
value={this.state.editValue}
|
|
476
|
-
onChange={this.handleChange}
|
|
477
|
-
onMouseDown={(event) => event.stopPropagation()}
|
|
478
|
-
onKeyDown={this.handleKeyDown}
|
|
479
|
-
isCompact
|
|
480
|
-
/>}
|
|
481
|
-
readView={this.renderReading}
|
|
482
|
-
onConfirm={this.handleConfirm}
|
|
483
|
-
// OnCancel will be exposed back once https://product-fabric.atlassian.net/browse/DST-1865 is released
|
|
484
|
-
onCancel={this.handleCancel}
|
|
485
|
-
/>
|
|
486
|
-
</Container>
|
|
487
|
-
);
|
|
488
|
-
}
|
|
489
|
-
}
|
|
490
|
-
`,
|
|
491
|
-
'ColumnEditableTitle - convert when editView is inline',
|
|
492
|
-
);
|
|
493
|
-
});
|