085ecc7f5f
* use export settings and hide fields Signed-off-by: Kerry Archibald <kerrya@element.io> * fix exporter tests Signed-off-by: Kerry Archibald <kerrya@element.io> * test ExportDialog with settings Signed-off-by: Kerry Archibald <kerrya@element.io> * tidy debugs, rename setting to Parameters Signed-off-by: Kerry Archibald <kerrya@element.io> * use reasonable 100gb limit Signed-off-by: Kerry Archibald <kerrya@element.io> * use normal setting instead of UIFeature Signed-off-by: Kerry Archibald <kerrya@element.io> * use a customisation Signed-off-by: Kerry Archibald <kerrya@element.io> * move validateNumberInRange to utils Signed-off-by: Kerry Archibald <kerrya@element.io> * use nullish coalesce Signed-off-by: Kerry Archibald <kerrya@element.io> * use 8gb size limit for customisation Signed-off-by: Kerry Archibald <kerrya@element.io> * update comments Signed-off-by: Kerry Archibald <kerrya@element.io>
2912 lines
82 KiB
Text
2912 lines
82 KiB
Text
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`<ExportDialog /> renders export dialog 1`] = `
|
|
Array [
|
|
<BaseDialog
|
|
className="mx_ExportDialog false"
|
|
contentId="mx_Dialog_content"
|
|
fixedWidth={true}
|
|
hasCancel={true}
|
|
onFinished={[MockFunction]}
|
|
title="Export Chat"
|
|
>
|
|
<ForwardRef(FocusLockUICombination)
|
|
className="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
lockProps={
|
|
Object {
|
|
"aria-describedby": "mx_Dialog_content",
|
|
"aria-labelledby": "mx_BaseDialog_title",
|
|
"onKeyDown": [Function],
|
|
"role": "dialog",
|
|
}
|
|
}
|
|
returnFocus={true}
|
|
>
|
|
<ForwardRef(FocusLockUI)
|
|
as="div"
|
|
autoFocus={true}
|
|
className="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
crossFrame={true}
|
|
disabled={false}
|
|
lockProps={
|
|
Object {
|
|
"aria-describedby": "mx_Dialog_content",
|
|
"aria-labelledby": "mx_BaseDialog_title",
|
|
"onKeyDown": [Function],
|
|
"role": "dialog",
|
|
}
|
|
}
|
|
noFocusGuards={false}
|
|
persistentFocus={false}
|
|
returnFocus={true}
|
|
sideCar={[Function]}
|
|
>
|
|
<div
|
|
data-focus-guard={true}
|
|
key="guard-first"
|
|
style={
|
|
Object {
|
|
"height": "0px",
|
|
"left": "1px",
|
|
"overflow": "hidden",
|
|
"padding": 0,
|
|
"position": "fixed",
|
|
"top": "1px",
|
|
"width": "1px",
|
|
}
|
|
}
|
|
tabIndex={0}
|
|
/>
|
|
<div
|
|
data-focus-guard={true}
|
|
key="guard-nearest"
|
|
style={
|
|
Object {
|
|
"height": "0px",
|
|
"left": "1px",
|
|
"overflow": "hidden",
|
|
"padding": 0,
|
|
"position": "fixed",
|
|
"top": "1px",
|
|
"width": "1px",
|
|
}
|
|
}
|
|
tabIndex={1}
|
|
/>
|
|
<SideEffect(FocusWatcher)
|
|
autoFocus={true}
|
|
crossFrame={true}
|
|
disabled={false}
|
|
id={Object {}}
|
|
observed={
|
|
<div
|
|
aria-describedby="mx_Dialog_content"
|
|
aria-labelledby="mx_BaseDialog_title"
|
|
class="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
data-focus-lock-disabled="false"
|
|
role="dialog"
|
|
>
|
|
<div
|
|
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
|
>
|
|
<h2
|
|
class="mx_Heading_h2 mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
>
|
|
Export Chat
|
|
</h2>
|
|
<div
|
|
aria-label="Close dialog"
|
|
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
|
role="button"
|
|
tabindex="0"
|
|
/>
|
|
</div>
|
|
<p>
|
|
Select from the options below to export chats from your timeline
|
|
</p>
|
|
<div
|
|
class="mx_ExportDialog_options"
|
|
>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Format
|
|
</span>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
|
|
>
|
|
<input
|
|
checked=""
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Html"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="PlainText"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
Plain Text
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Json"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
JSON
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Messages
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_select"
|
|
>
|
|
<select
|
|
id="export-type"
|
|
type="text"
|
|
>
|
|
<option
|
|
value="Timeline"
|
|
>
|
|
Current Timeline
|
|
</option>
|
|
<option
|
|
value="Beginning"
|
|
>
|
|
From the beginning
|
|
</option>
|
|
<option
|
|
value="LastNMessages"
|
|
>
|
|
Specify a number of messages
|
|
</option>
|
|
</select>
|
|
<label
|
|
for="export-type"
|
|
/>
|
|
</div>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Size Limit
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_input"
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
id="size-limit"
|
|
type="number"
|
|
value="8"
|
|
/>
|
|
<label
|
|
for="size-limit"
|
|
/>
|
|
<span
|
|
class="mx_Field_postfix"
|
|
>
|
|
<span>
|
|
MB
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
id="include-attachments"
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
for="include-attachments"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_checkmark"
|
|
/>
|
|
</div>
|
|
<div>
|
|
Include Attachments
|
|
</div>
|
|
</label>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_Dialog_buttons"
|
|
>
|
|
<button
|
|
data-test-id="dialog-cancel-button"
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="mx_Dialog_primary"
|
|
data-test-id="dialog-primary-button"
|
|
type="button"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
onActivation={[Function]}
|
|
onDeactivation={[Function]}
|
|
persistentFocus={false}
|
|
returnFocus={[Function]}
|
|
shards={Array []}
|
|
sideCar={
|
|
Object {
|
|
"assignMedium": [Function],
|
|
"assignSyncMedium": [Function],
|
|
"options": Object {
|
|
"async": true,
|
|
"ssr": false,
|
|
},
|
|
"read": [Function],
|
|
"useMedium": [Function],
|
|
}
|
|
}
|
|
>
|
|
<FocusWatcher
|
|
autoFocus={true}
|
|
crossFrame={true}
|
|
disabled={false}
|
|
id={Object {}}
|
|
observed={
|
|
<div
|
|
aria-describedby="mx_Dialog_content"
|
|
aria-labelledby="mx_BaseDialog_title"
|
|
class="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
data-focus-lock-disabled="false"
|
|
role="dialog"
|
|
>
|
|
<div
|
|
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
|
>
|
|
<h2
|
|
class="mx_Heading_h2 mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
>
|
|
Export Chat
|
|
</h2>
|
|
<div
|
|
aria-label="Close dialog"
|
|
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
|
role="button"
|
|
tabindex="0"
|
|
/>
|
|
</div>
|
|
<p>
|
|
Select from the options below to export chats from your timeline
|
|
</p>
|
|
<div
|
|
class="mx_ExportDialog_options"
|
|
>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Format
|
|
</span>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
|
|
>
|
|
<input
|
|
checked=""
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Html"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="PlainText"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
Plain Text
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Json"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
JSON
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Messages
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_select"
|
|
>
|
|
<select
|
|
id="export-type"
|
|
type="text"
|
|
>
|
|
<option
|
|
value="Timeline"
|
|
>
|
|
Current Timeline
|
|
</option>
|
|
<option
|
|
value="Beginning"
|
|
>
|
|
From the beginning
|
|
</option>
|
|
<option
|
|
value="LastNMessages"
|
|
>
|
|
Specify a number of messages
|
|
</option>
|
|
</select>
|
|
<label
|
|
for="export-type"
|
|
/>
|
|
</div>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Size Limit
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_input"
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
id="size-limit"
|
|
type="number"
|
|
value="8"
|
|
/>
|
|
<label
|
|
for="size-limit"
|
|
/>
|
|
<span
|
|
class="mx_Field_postfix"
|
|
>
|
|
<span>
|
|
MB
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
id="include-attachments"
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
for="include-attachments"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_checkmark"
|
|
/>
|
|
</div>
|
|
<div>
|
|
Include Attachments
|
|
</div>
|
|
</label>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_Dialog_buttons"
|
|
>
|
|
<button
|
|
data-test-id="dialog-cancel-button"
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="mx_Dialog_primary"
|
|
data-test-id="dialog-primary-button"
|
|
type="button"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
onActivation={[Function]}
|
|
onDeactivation={[Function]}
|
|
persistentFocus={false}
|
|
returnFocus={[Function]}
|
|
shards={Array []}
|
|
sideCar={
|
|
Object {
|
|
"assignMedium": [Function],
|
|
"assignSyncMedium": [Function],
|
|
"options": Object {
|
|
"async": true,
|
|
"ssr": false,
|
|
},
|
|
"read": [Function],
|
|
"useMedium": [Function],
|
|
}
|
|
}
|
|
/>
|
|
</SideEffect(FocusWatcher)>
|
|
<div
|
|
aria-describedby="mx_Dialog_content"
|
|
aria-labelledby="mx_BaseDialog_title"
|
|
className="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
data-focus-lock-disabled={false}
|
|
onBlur={[Function]}
|
|
onFocus={[Function]}
|
|
onKeyDown={[Function]}
|
|
role="dialog"
|
|
>
|
|
<div
|
|
className="mx_Dialog_header mx_Dialog_headerWithCancel"
|
|
>
|
|
<Heading
|
|
className="mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
size="h2"
|
|
>
|
|
<h2
|
|
className="mx_Heading_h2 mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
>
|
|
Export Chat
|
|
</h2>
|
|
</Heading>
|
|
<AccessibleButton
|
|
aria-label="Close dialog"
|
|
className="mx_Dialog_cancelButton"
|
|
element="div"
|
|
onClick={[Function]}
|
|
role="button"
|
|
tabIndex={0}
|
|
>
|
|
<div
|
|
aria-label="Close dialog"
|
|
className="mx_AccessibleButton mx_Dialog_cancelButton"
|
|
onClick={[Function]}
|
|
onKeyDown={[Function]}
|
|
onKeyUp={[Function]}
|
|
role="button"
|
|
tabIndex={0}
|
|
/>
|
|
</AccessibleButton>
|
|
</div>
|
|
<p>
|
|
Select from the options below to export chats from your timeline
|
|
</p>
|
|
<div
|
|
className="mx_ExportDialog_options"
|
|
>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Format
|
|
</span>
|
|
<StyledRadioGroup
|
|
definitions={
|
|
Array [
|
|
Object {
|
|
"label": "HTML",
|
|
"value": "Html",
|
|
},
|
|
Object {
|
|
"label": "Plain Text",
|
|
"value": "PlainText",
|
|
},
|
|
Object {
|
|
"label": "JSON",
|
|
"value": "Json",
|
|
},
|
|
]
|
|
}
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Html"
|
|
>
|
|
<StyledRadioButton
|
|
checked={true}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Html"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
|
|
>
|
|
<input
|
|
checked={true}
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="Html"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
<StyledRadioButton
|
|
checked={false}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="PlainText"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="PlainText"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
Plain Text
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
<StyledRadioButton
|
|
checked={false}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Json"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="Json"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
JSON
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
</StyledRadioGroup>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Messages
|
|
</span>
|
|
<Field
|
|
element="select"
|
|
id="export-type"
|
|
onChange={[Function]}
|
|
type="text"
|
|
validateOnBlur={true}
|
|
validateOnChange={true}
|
|
validateOnFocus={true}
|
|
value="Timeline"
|
|
>
|
|
<div
|
|
className="mx_Field mx_Field_select"
|
|
>
|
|
<select
|
|
id="export-type"
|
|
onBlur={[Function]}
|
|
onChange={[Function]}
|
|
onFocus={[Function]}
|
|
type="text"
|
|
value="Timeline"
|
|
>
|
|
<option
|
|
key="Timeline"
|
|
value="Timeline"
|
|
>
|
|
Current Timeline
|
|
</option>
|
|
<option
|
|
key="Beginning"
|
|
value="Beginning"
|
|
>
|
|
From the beginning
|
|
</option>
|
|
<option
|
|
key="LastNMessages"
|
|
value="LastNMessages"
|
|
>
|
|
Specify a number of messages
|
|
</option>
|
|
</select>
|
|
<label
|
|
htmlFor="export-type"
|
|
/>
|
|
</div>
|
|
</Field>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Size Limit
|
|
</span>
|
|
<Field
|
|
autoComplete="off"
|
|
element="input"
|
|
id="size-limit"
|
|
onChange={[Function]}
|
|
onValidate={[Function]}
|
|
postfixComponent={
|
|
<span>
|
|
MB
|
|
</span>
|
|
}
|
|
type="number"
|
|
validateOnBlur={true}
|
|
validateOnChange={true}
|
|
validateOnFocus={true}
|
|
value="8"
|
|
>
|
|
<div
|
|
className="mx_Field mx_Field_input"
|
|
>
|
|
<input
|
|
autoComplete="off"
|
|
id="size-limit"
|
|
onBlur={[Function]}
|
|
onChange={[Function]}
|
|
onFocus={[Function]}
|
|
type="number"
|
|
value="8"
|
|
/>
|
|
<label
|
|
htmlFor="size-limit"
|
|
/>
|
|
<span
|
|
className="mx_Field_postfix"
|
|
>
|
|
<span>
|
|
MB
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</Field>
|
|
<StyledCheckbox
|
|
checked={false}
|
|
className="mx_ExportDialog_attachments-checkbox"
|
|
id="include-attachments"
|
|
onChange={[Function]}
|
|
>
|
|
<span
|
|
className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="include-attachments"
|
|
onChange={[Function]}
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
htmlFor="include-attachments"
|
|
>
|
|
<div
|
|
className="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
className="mx_Checkbox_checkmark"
|
|
/>
|
|
</div>
|
|
<div>
|
|
Include Attachments
|
|
</div>
|
|
</label>
|
|
</span>
|
|
</StyledCheckbox>
|
|
</div>
|
|
<DialogButtons
|
|
disabled={false}
|
|
hasCancel={true}
|
|
onCancel={[Function]}
|
|
onPrimaryButtonClick={[Function]}
|
|
primaryButton="Export"
|
|
>
|
|
<div
|
|
className="mx_Dialog_buttons"
|
|
>
|
|
<button
|
|
data-test-id="dialog-cancel-button"
|
|
disabled={false}
|
|
onClick={[Function]}
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="mx_Dialog_primary"
|
|
data-test-id="dialog-primary-button"
|
|
onClick={[Function]}
|
|
type="button"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</DialogButtons>
|
|
</div>
|
|
<div
|
|
data-focus-guard={true}
|
|
style={
|
|
Object {
|
|
"height": "0px",
|
|
"left": "1px",
|
|
"overflow": "hidden",
|
|
"padding": 0,
|
|
"position": "fixed",
|
|
"top": "1px",
|
|
"width": "1px",
|
|
}
|
|
}
|
|
tabIndex={0}
|
|
/>
|
|
</ForwardRef(FocusLockUI)>
|
|
</ForwardRef(FocusLockUICombination)>
|
|
</BaseDialog>,
|
|
<ForwardRef(FocusLockUICombination)
|
|
className="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
lockProps={
|
|
Object {
|
|
"aria-describedby": "mx_Dialog_content",
|
|
"aria-labelledby": "mx_BaseDialog_title",
|
|
"onKeyDown": [Function],
|
|
"role": "dialog",
|
|
}
|
|
}
|
|
returnFocus={true}
|
|
>
|
|
<ForwardRef(FocusLockUI)
|
|
as="div"
|
|
autoFocus={true}
|
|
className="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
crossFrame={true}
|
|
disabled={false}
|
|
lockProps={
|
|
Object {
|
|
"aria-describedby": "mx_Dialog_content",
|
|
"aria-labelledby": "mx_BaseDialog_title",
|
|
"onKeyDown": [Function],
|
|
"role": "dialog",
|
|
}
|
|
}
|
|
noFocusGuards={false}
|
|
persistentFocus={false}
|
|
returnFocus={true}
|
|
sideCar={[Function]}
|
|
>
|
|
<div
|
|
data-focus-guard={true}
|
|
key="guard-first"
|
|
style={
|
|
Object {
|
|
"height": "0px",
|
|
"left": "1px",
|
|
"overflow": "hidden",
|
|
"padding": 0,
|
|
"position": "fixed",
|
|
"top": "1px",
|
|
"width": "1px",
|
|
}
|
|
}
|
|
tabIndex={0}
|
|
/>
|
|
<div
|
|
data-focus-guard={true}
|
|
key="guard-nearest"
|
|
style={
|
|
Object {
|
|
"height": "0px",
|
|
"left": "1px",
|
|
"overflow": "hidden",
|
|
"padding": 0,
|
|
"position": "fixed",
|
|
"top": "1px",
|
|
"width": "1px",
|
|
}
|
|
}
|
|
tabIndex={1}
|
|
/>
|
|
<SideEffect(FocusWatcher)
|
|
autoFocus={true}
|
|
crossFrame={true}
|
|
disabled={false}
|
|
id={Object {}}
|
|
observed={
|
|
<div
|
|
aria-describedby="mx_Dialog_content"
|
|
aria-labelledby="mx_BaseDialog_title"
|
|
class="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
data-focus-lock-disabled="false"
|
|
role="dialog"
|
|
>
|
|
<div
|
|
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
|
>
|
|
<h2
|
|
class="mx_Heading_h2 mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
>
|
|
Export Chat
|
|
</h2>
|
|
<div
|
|
aria-label="Close dialog"
|
|
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
|
role="button"
|
|
tabindex="0"
|
|
/>
|
|
</div>
|
|
<p>
|
|
Select from the options below to export chats from your timeline
|
|
</p>
|
|
<div
|
|
class="mx_ExportDialog_options"
|
|
>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Format
|
|
</span>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
|
|
>
|
|
<input
|
|
checked=""
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Html"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="PlainText"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
Plain Text
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Json"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
JSON
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Messages
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_select"
|
|
>
|
|
<select
|
|
id="export-type"
|
|
type="text"
|
|
>
|
|
<option
|
|
value="Timeline"
|
|
>
|
|
Current Timeline
|
|
</option>
|
|
<option
|
|
value="Beginning"
|
|
>
|
|
From the beginning
|
|
</option>
|
|
<option
|
|
value="LastNMessages"
|
|
>
|
|
Specify a number of messages
|
|
</option>
|
|
</select>
|
|
<label
|
|
for="export-type"
|
|
/>
|
|
</div>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Size Limit
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_input"
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
id="size-limit"
|
|
type="number"
|
|
value="8"
|
|
/>
|
|
<label
|
|
for="size-limit"
|
|
/>
|
|
<span
|
|
class="mx_Field_postfix"
|
|
>
|
|
<span>
|
|
MB
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
id="include-attachments"
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
for="include-attachments"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_checkmark"
|
|
/>
|
|
</div>
|
|
<div>
|
|
Include Attachments
|
|
</div>
|
|
</label>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_Dialog_buttons"
|
|
>
|
|
<button
|
|
data-test-id="dialog-cancel-button"
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="mx_Dialog_primary"
|
|
data-test-id="dialog-primary-button"
|
|
type="button"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
onActivation={[Function]}
|
|
onDeactivation={[Function]}
|
|
persistentFocus={false}
|
|
returnFocus={[Function]}
|
|
shards={Array []}
|
|
sideCar={
|
|
Object {
|
|
"assignMedium": [Function],
|
|
"assignSyncMedium": [Function],
|
|
"options": Object {
|
|
"async": true,
|
|
"ssr": false,
|
|
},
|
|
"read": [Function],
|
|
"useMedium": [Function],
|
|
}
|
|
}
|
|
>
|
|
<FocusWatcher
|
|
autoFocus={true}
|
|
crossFrame={true}
|
|
disabled={false}
|
|
id={Object {}}
|
|
observed={
|
|
<div
|
|
aria-describedby="mx_Dialog_content"
|
|
aria-labelledby="mx_BaseDialog_title"
|
|
class="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
data-focus-lock-disabled="false"
|
|
role="dialog"
|
|
>
|
|
<div
|
|
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
|
>
|
|
<h2
|
|
class="mx_Heading_h2 mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
>
|
|
Export Chat
|
|
</h2>
|
|
<div
|
|
aria-label="Close dialog"
|
|
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
|
role="button"
|
|
tabindex="0"
|
|
/>
|
|
</div>
|
|
<p>
|
|
Select from the options below to export chats from your timeline
|
|
</p>
|
|
<div
|
|
class="mx_ExportDialog_options"
|
|
>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Format
|
|
</span>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
|
|
>
|
|
<input
|
|
checked=""
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Html"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="PlainText"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
Plain Text
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Json"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
JSON
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Messages
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_select"
|
|
>
|
|
<select
|
|
id="export-type"
|
|
type="text"
|
|
>
|
|
<option
|
|
value="Timeline"
|
|
>
|
|
Current Timeline
|
|
</option>
|
|
<option
|
|
value="Beginning"
|
|
>
|
|
From the beginning
|
|
</option>
|
|
<option
|
|
value="LastNMessages"
|
|
>
|
|
Specify a number of messages
|
|
</option>
|
|
</select>
|
|
<label
|
|
for="export-type"
|
|
/>
|
|
</div>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Size Limit
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_input"
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
id="size-limit"
|
|
type="number"
|
|
value="8"
|
|
/>
|
|
<label
|
|
for="size-limit"
|
|
/>
|
|
<span
|
|
class="mx_Field_postfix"
|
|
>
|
|
<span>
|
|
MB
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
id="include-attachments"
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
for="include-attachments"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_checkmark"
|
|
/>
|
|
</div>
|
|
<div>
|
|
Include Attachments
|
|
</div>
|
|
</label>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_Dialog_buttons"
|
|
>
|
|
<button
|
|
data-test-id="dialog-cancel-button"
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="mx_Dialog_primary"
|
|
data-test-id="dialog-primary-button"
|
|
type="button"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
onActivation={[Function]}
|
|
onDeactivation={[Function]}
|
|
persistentFocus={false}
|
|
returnFocus={[Function]}
|
|
shards={Array []}
|
|
sideCar={
|
|
Object {
|
|
"assignMedium": [Function],
|
|
"assignSyncMedium": [Function],
|
|
"options": Object {
|
|
"async": true,
|
|
"ssr": false,
|
|
},
|
|
"read": [Function],
|
|
"useMedium": [Function],
|
|
}
|
|
}
|
|
/>
|
|
</SideEffect(FocusWatcher)>
|
|
<div
|
|
aria-describedby="mx_Dialog_content"
|
|
aria-labelledby="mx_BaseDialog_title"
|
|
className="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
data-focus-lock-disabled={false}
|
|
onBlur={[Function]}
|
|
onFocus={[Function]}
|
|
onKeyDown={[Function]}
|
|
role="dialog"
|
|
>
|
|
<div
|
|
className="mx_Dialog_header mx_Dialog_headerWithCancel"
|
|
>
|
|
<Heading
|
|
className="mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
size="h2"
|
|
>
|
|
<h2
|
|
className="mx_Heading_h2 mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
>
|
|
Export Chat
|
|
</h2>
|
|
</Heading>
|
|
<AccessibleButton
|
|
aria-label="Close dialog"
|
|
className="mx_Dialog_cancelButton"
|
|
element="div"
|
|
onClick={[Function]}
|
|
role="button"
|
|
tabIndex={0}
|
|
>
|
|
<div
|
|
aria-label="Close dialog"
|
|
className="mx_AccessibleButton mx_Dialog_cancelButton"
|
|
onClick={[Function]}
|
|
onKeyDown={[Function]}
|
|
onKeyUp={[Function]}
|
|
role="button"
|
|
tabIndex={0}
|
|
/>
|
|
</AccessibleButton>
|
|
</div>
|
|
<p>
|
|
Select from the options below to export chats from your timeline
|
|
</p>
|
|
<div
|
|
className="mx_ExportDialog_options"
|
|
>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Format
|
|
</span>
|
|
<StyledRadioGroup
|
|
definitions={
|
|
Array [
|
|
Object {
|
|
"label": "HTML",
|
|
"value": "Html",
|
|
},
|
|
Object {
|
|
"label": "Plain Text",
|
|
"value": "PlainText",
|
|
},
|
|
Object {
|
|
"label": "JSON",
|
|
"value": "Json",
|
|
},
|
|
]
|
|
}
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Html"
|
|
>
|
|
<StyledRadioButton
|
|
checked={true}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Html"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
|
|
>
|
|
<input
|
|
checked={true}
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="Html"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
<StyledRadioButton
|
|
checked={false}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="PlainText"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="PlainText"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
Plain Text
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
<StyledRadioButton
|
|
checked={false}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Json"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="Json"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
JSON
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
</StyledRadioGroup>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Messages
|
|
</span>
|
|
<Field
|
|
element="select"
|
|
id="export-type"
|
|
onChange={[Function]}
|
|
type="text"
|
|
validateOnBlur={true}
|
|
validateOnChange={true}
|
|
validateOnFocus={true}
|
|
value="Timeline"
|
|
>
|
|
<div
|
|
className="mx_Field mx_Field_select"
|
|
>
|
|
<select
|
|
id="export-type"
|
|
onBlur={[Function]}
|
|
onChange={[Function]}
|
|
onFocus={[Function]}
|
|
type="text"
|
|
value="Timeline"
|
|
>
|
|
<option
|
|
key="Timeline"
|
|
value="Timeline"
|
|
>
|
|
Current Timeline
|
|
</option>
|
|
<option
|
|
key="Beginning"
|
|
value="Beginning"
|
|
>
|
|
From the beginning
|
|
</option>
|
|
<option
|
|
key="LastNMessages"
|
|
value="LastNMessages"
|
|
>
|
|
Specify a number of messages
|
|
</option>
|
|
</select>
|
|
<label
|
|
htmlFor="export-type"
|
|
/>
|
|
</div>
|
|
</Field>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Size Limit
|
|
</span>
|
|
<Field
|
|
autoComplete="off"
|
|
element="input"
|
|
id="size-limit"
|
|
onChange={[Function]}
|
|
onValidate={[Function]}
|
|
postfixComponent={
|
|
<span>
|
|
MB
|
|
</span>
|
|
}
|
|
type="number"
|
|
validateOnBlur={true}
|
|
validateOnChange={true}
|
|
validateOnFocus={true}
|
|
value="8"
|
|
>
|
|
<div
|
|
className="mx_Field mx_Field_input"
|
|
>
|
|
<input
|
|
autoComplete="off"
|
|
id="size-limit"
|
|
onBlur={[Function]}
|
|
onChange={[Function]}
|
|
onFocus={[Function]}
|
|
type="number"
|
|
value="8"
|
|
/>
|
|
<label
|
|
htmlFor="size-limit"
|
|
/>
|
|
<span
|
|
className="mx_Field_postfix"
|
|
>
|
|
<span>
|
|
MB
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</Field>
|
|
<StyledCheckbox
|
|
checked={false}
|
|
className="mx_ExportDialog_attachments-checkbox"
|
|
id="include-attachments"
|
|
onChange={[Function]}
|
|
>
|
|
<span
|
|
className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="include-attachments"
|
|
onChange={[Function]}
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
htmlFor="include-attachments"
|
|
>
|
|
<div
|
|
className="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
className="mx_Checkbox_checkmark"
|
|
/>
|
|
</div>
|
|
<div>
|
|
Include Attachments
|
|
</div>
|
|
</label>
|
|
</span>
|
|
</StyledCheckbox>
|
|
</div>
|
|
<DialogButtons
|
|
disabled={false}
|
|
hasCancel={true}
|
|
onCancel={[Function]}
|
|
onPrimaryButtonClick={[Function]}
|
|
primaryButton="Export"
|
|
>
|
|
<div
|
|
className="mx_Dialog_buttons"
|
|
>
|
|
<button
|
|
data-test-id="dialog-cancel-button"
|
|
disabled={false}
|
|
onClick={[Function]}
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="mx_Dialog_primary"
|
|
data-test-id="dialog-primary-button"
|
|
onClick={[Function]}
|
|
type="button"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</DialogButtons>
|
|
</div>
|
|
<div
|
|
data-focus-guard={true}
|
|
style={
|
|
Object {
|
|
"height": "0px",
|
|
"left": "1px",
|
|
"overflow": "hidden",
|
|
"padding": 0,
|
|
"position": "fixed",
|
|
"top": "1px",
|
|
"width": "1px",
|
|
}
|
|
}
|
|
tabIndex={0}
|
|
/>
|
|
</ForwardRef(FocusLockUI)>
|
|
</ForwardRef(FocusLockUICombination)>,
|
|
<ForwardRef(FocusLockUI)
|
|
as="div"
|
|
autoFocus={true}
|
|
className="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
crossFrame={true}
|
|
disabled={false}
|
|
lockProps={
|
|
Object {
|
|
"aria-describedby": "mx_Dialog_content",
|
|
"aria-labelledby": "mx_BaseDialog_title",
|
|
"onKeyDown": [Function],
|
|
"role": "dialog",
|
|
}
|
|
}
|
|
noFocusGuards={false}
|
|
persistentFocus={false}
|
|
returnFocus={true}
|
|
sideCar={[Function]}
|
|
>
|
|
<div
|
|
data-focus-guard={true}
|
|
key="guard-first"
|
|
style={
|
|
Object {
|
|
"height": "0px",
|
|
"left": "1px",
|
|
"overflow": "hidden",
|
|
"padding": 0,
|
|
"position": "fixed",
|
|
"top": "1px",
|
|
"width": "1px",
|
|
}
|
|
}
|
|
tabIndex={0}
|
|
/>
|
|
<div
|
|
data-focus-guard={true}
|
|
key="guard-nearest"
|
|
style={
|
|
Object {
|
|
"height": "0px",
|
|
"left": "1px",
|
|
"overflow": "hidden",
|
|
"padding": 0,
|
|
"position": "fixed",
|
|
"top": "1px",
|
|
"width": "1px",
|
|
}
|
|
}
|
|
tabIndex={1}
|
|
/>
|
|
<SideEffect(FocusWatcher)
|
|
autoFocus={true}
|
|
crossFrame={true}
|
|
disabled={false}
|
|
id={Object {}}
|
|
observed={
|
|
<div
|
|
aria-describedby="mx_Dialog_content"
|
|
aria-labelledby="mx_BaseDialog_title"
|
|
class="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
data-focus-lock-disabled="false"
|
|
role="dialog"
|
|
>
|
|
<div
|
|
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
|
>
|
|
<h2
|
|
class="mx_Heading_h2 mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
>
|
|
Export Chat
|
|
</h2>
|
|
<div
|
|
aria-label="Close dialog"
|
|
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
|
role="button"
|
|
tabindex="0"
|
|
/>
|
|
</div>
|
|
<p>
|
|
Select from the options below to export chats from your timeline
|
|
</p>
|
|
<div
|
|
class="mx_ExportDialog_options"
|
|
>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Format
|
|
</span>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
|
|
>
|
|
<input
|
|
checked=""
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Html"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="PlainText"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
Plain Text
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Json"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
JSON
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Messages
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_select"
|
|
>
|
|
<select
|
|
id="export-type"
|
|
type="text"
|
|
>
|
|
<option
|
|
value="Timeline"
|
|
>
|
|
Current Timeline
|
|
</option>
|
|
<option
|
|
value="Beginning"
|
|
>
|
|
From the beginning
|
|
</option>
|
|
<option
|
|
value="LastNMessages"
|
|
>
|
|
Specify a number of messages
|
|
</option>
|
|
</select>
|
|
<label
|
|
for="export-type"
|
|
/>
|
|
</div>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Size Limit
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_input"
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
id="size-limit"
|
|
type="number"
|
|
value="8"
|
|
/>
|
|
<label
|
|
for="size-limit"
|
|
/>
|
|
<span
|
|
class="mx_Field_postfix"
|
|
>
|
|
<span>
|
|
MB
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
id="include-attachments"
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
for="include-attachments"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_checkmark"
|
|
/>
|
|
</div>
|
|
<div>
|
|
Include Attachments
|
|
</div>
|
|
</label>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_Dialog_buttons"
|
|
>
|
|
<button
|
|
data-test-id="dialog-cancel-button"
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="mx_Dialog_primary"
|
|
data-test-id="dialog-primary-button"
|
|
type="button"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
onActivation={[Function]}
|
|
onDeactivation={[Function]}
|
|
persistentFocus={false}
|
|
returnFocus={[Function]}
|
|
shards={Array []}
|
|
sideCar={
|
|
Object {
|
|
"assignMedium": [Function],
|
|
"assignSyncMedium": [Function],
|
|
"options": Object {
|
|
"async": true,
|
|
"ssr": false,
|
|
},
|
|
"read": [Function],
|
|
"useMedium": [Function],
|
|
}
|
|
}
|
|
>
|
|
<FocusWatcher
|
|
autoFocus={true}
|
|
crossFrame={true}
|
|
disabled={false}
|
|
id={Object {}}
|
|
observed={
|
|
<div
|
|
aria-describedby="mx_Dialog_content"
|
|
aria-labelledby="mx_BaseDialog_title"
|
|
class="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
data-focus-lock-disabled="false"
|
|
role="dialog"
|
|
>
|
|
<div
|
|
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
|
>
|
|
<h2
|
|
class="mx_Heading_h2 mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
>
|
|
Export Chat
|
|
</h2>
|
|
<div
|
|
aria-label="Close dialog"
|
|
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
|
role="button"
|
|
tabindex="0"
|
|
/>
|
|
</div>
|
|
<p>
|
|
Select from the options below to export chats from your timeline
|
|
</p>
|
|
<div
|
|
class="mx_ExportDialog_options"
|
|
>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Format
|
|
</span>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
|
|
>
|
|
<input
|
|
checked=""
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Html"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="PlainText"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
Plain Text
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<label
|
|
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
type="radio"
|
|
value="Json"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_content"
|
|
>
|
|
JSON
|
|
</div>
|
|
<div
|
|
class="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Messages
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_select"
|
|
>
|
|
<select
|
|
id="export-type"
|
|
type="text"
|
|
>
|
|
<option
|
|
value="Timeline"
|
|
>
|
|
Current Timeline
|
|
</option>
|
|
<option
|
|
value="Beginning"
|
|
>
|
|
From the beginning
|
|
</option>
|
|
<option
|
|
value="LastNMessages"
|
|
>
|
|
Specify a number of messages
|
|
</option>
|
|
</select>
|
|
<label
|
|
for="export-type"
|
|
/>
|
|
</div>
|
|
<span
|
|
class="mx_ExportDialog_subheading"
|
|
>
|
|
Size Limit
|
|
</span>
|
|
<div
|
|
class="mx_Field mx_Field_input"
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
id="size-limit"
|
|
type="number"
|
|
value="8"
|
|
/>
|
|
<label
|
|
for="size-limit"
|
|
/>
|
|
<span
|
|
class="mx_Field_postfix"
|
|
>
|
|
<span>
|
|
MB
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
id="include-attachments"
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
for="include-attachments"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
class="mx_Checkbox_checkmark"
|
|
/>
|
|
</div>
|
|
<div>
|
|
Include Attachments
|
|
</div>
|
|
</label>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_Dialog_buttons"
|
|
>
|
|
<button
|
|
data-test-id="dialog-cancel-button"
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="mx_Dialog_primary"
|
|
data-test-id="dialog-primary-button"
|
|
type="button"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
onActivation={[Function]}
|
|
onDeactivation={[Function]}
|
|
persistentFocus={false}
|
|
returnFocus={[Function]}
|
|
shards={Array []}
|
|
sideCar={
|
|
Object {
|
|
"assignMedium": [Function],
|
|
"assignSyncMedium": [Function],
|
|
"options": Object {
|
|
"async": true,
|
|
"ssr": false,
|
|
},
|
|
"read": [Function],
|
|
"useMedium": [Function],
|
|
}
|
|
}
|
|
/>
|
|
</SideEffect(FocusWatcher)>
|
|
<div
|
|
aria-describedby="mx_Dialog_content"
|
|
aria-labelledby="mx_BaseDialog_title"
|
|
className="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
data-focus-lock-disabled={false}
|
|
onBlur={[Function]}
|
|
onFocus={[Function]}
|
|
onKeyDown={[Function]}
|
|
role="dialog"
|
|
>
|
|
<div
|
|
className="mx_Dialog_header mx_Dialog_headerWithCancel"
|
|
>
|
|
<Heading
|
|
className="mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
size="h2"
|
|
>
|
|
<h2
|
|
className="mx_Heading_h2 mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
>
|
|
Export Chat
|
|
</h2>
|
|
</Heading>
|
|
<AccessibleButton
|
|
aria-label="Close dialog"
|
|
className="mx_Dialog_cancelButton"
|
|
element="div"
|
|
onClick={[Function]}
|
|
role="button"
|
|
tabIndex={0}
|
|
>
|
|
<div
|
|
aria-label="Close dialog"
|
|
className="mx_AccessibleButton mx_Dialog_cancelButton"
|
|
onClick={[Function]}
|
|
onKeyDown={[Function]}
|
|
onKeyUp={[Function]}
|
|
role="button"
|
|
tabIndex={0}
|
|
/>
|
|
</AccessibleButton>
|
|
</div>
|
|
<p>
|
|
Select from the options below to export chats from your timeline
|
|
</p>
|
|
<div
|
|
className="mx_ExportDialog_options"
|
|
>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Format
|
|
</span>
|
|
<StyledRadioGroup
|
|
definitions={
|
|
Array [
|
|
Object {
|
|
"label": "HTML",
|
|
"value": "Html",
|
|
},
|
|
Object {
|
|
"label": "Plain Text",
|
|
"value": "PlainText",
|
|
},
|
|
Object {
|
|
"label": "JSON",
|
|
"value": "Json",
|
|
},
|
|
]
|
|
}
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Html"
|
|
>
|
|
<StyledRadioButton
|
|
checked={true}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Html"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
|
|
>
|
|
<input
|
|
checked={true}
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="Html"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
<StyledRadioButton
|
|
checked={false}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="PlainText"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="PlainText"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
Plain Text
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
<StyledRadioButton
|
|
checked={false}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Json"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="Json"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
JSON
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
</StyledRadioGroup>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Messages
|
|
</span>
|
|
<Field
|
|
element="select"
|
|
id="export-type"
|
|
onChange={[Function]}
|
|
type="text"
|
|
validateOnBlur={true}
|
|
validateOnChange={true}
|
|
validateOnFocus={true}
|
|
value="Timeline"
|
|
>
|
|
<div
|
|
className="mx_Field mx_Field_select"
|
|
>
|
|
<select
|
|
id="export-type"
|
|
onBlur={[Function]}
|
|
onChange={[Function]}
|
|
onFocus={[Function]}
|
|
type="text"
|
|
value="Timeline"
|
|
>
|
|
<option
|
|
key="Timeline"
|
|
value="Timeline"
|
|
>
|
|
Current Timeline
|
|
</option>
|
|
<option
|
|
key="Beginning"
|
|
value="Beginning"
|
|
>
|
|
From the beginning
|
|
</option>
|
|
<option
|
|
key="LastNMessages"
|
|
value="LastNMessages"
|
|
>
|
|
Specify a number of messages
|
|
</option>
|
|
</select>
|
|
<label
|
|
htmlFor="export-type"
|
|
/>
|
|
</div>
|
|
</Field>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Size Limit
|
|
</span>
|
|
<Field
|
|
autoComplete="off"
|
|
element="input"
|
|
id="size-limit"
|
|
onChange={[Function]}
|
|
onValidate={[Function]}
|
|
postfixComponent={
|
|
<span>
|
|
MB
|
|
</span>
|
|
}
|
|
type="number"
|
|
validateOnBlur={true}
|
|
validateOnChange={true}
|
|
validateOnFocus={true}
|
|
value="8"
|
|
>
|
|
<div
|
|
className="mx_Field mx_Field_input"
|
|
>
|
|
<input
|
|
autoComplete="off"
|
|
id="size-limit"
|
|
onBlur={[Function]}
|
|
onChange={[Function]}
|
|
onFocus={[Function]}
|
|
type="number"
|
|
value="8"
|
|
/>
|
|
<label
|
|
htmlFor="size-limit"
|
|
/>
|
|
<span
|
|
className="mx_Field_postfix"
|
|
>
|
|
<span>
|
|
MB
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</Field>
|
|
<StyledCheckbox
|
|
checked={false}
|
|
className="mx_ExportDialog_attachments-checkbox"
|
|
id="include-attachments"
|
|
onChange={[Function]}
|
|
>
|
|
<span
|
|
className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="include-attachments"
|
|
onChange={[Function]}
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
htmlFor="include-attachments"
|
|
>
|
|
<div
|
|
className="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
className="mx_Checkbox_checkmark"
|
|
/>
|
|
</div>
|
|
<div>
|
|
Include Attachments
|
|
</div>
|
|
</label>
|
|
</span>
|
|
</StyledCheckbox>
|
|
</div>
|
|
<DialogButtons
|
|
disabled={false}
|
|
hasCancel={true}
|
|
onCancel={[Function]}
|
|
onPrimaryButtonClick={[Function]}
|
|
primaryButton="Export"
|
|
>
|
|
<div
|
|
className="mx_Dialog_buttons"
|
|
>
|
|
<button
|
|
data-test-id="dialog-cancel-button"
|
|
disabled={false}
|
|
onClick={[Function]}
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="mx_Dialog_primary"
|
|
data-test-id="dialog-primary-button"
|
|
onClick={[Function]}
|
|
type="button"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</DialogButtons>
|
|
</div>
|
|
<div
|
|
data-focus-guard={true}
|
|
style={
|
|
Object {
|
|
"height": "0px",
|
|
"left": "1px",
|
|
"overflow": "hidden",
|
|
"padding": 0,
|
|
"position": "fixed",
|
|
"top": "1px",
|
|
"width": "1px",
|
|
}
|
|
}
|
|
tabIndex={0}
|
|
/>
|
|
</ForwardRef(FocusLockUI)>,
|
|
<div
|
|
aria-describedby="mx_Dialog_content"
|
|
aria-labelledby="mx_BaseDialog_title"
|
|
className="mx_ExportDialog false mx_Dialog_fixedWidth"
|
|
data-focus-lock-disabled={false}
|
|
onBlur={[Function]}
|
|
onFocus={[Function]}
|
|
onKeyDown={[Function]}
|
|
role="dialog"
|
|
>
|
|
<div
|
|
className="mx_Dialog_header mx_Dialog_headerWithCancel"
|
|
>
|
|
<Heading
|
|
className="mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
size="h2"
|
|
>
|
|
<h2
|
|
className="mx_Heading_h2 mx_Dialog_title"
|
|
id="mx_BaseDialog_title"
|
|
>
|
|
Export Chat
|
|
</h2>
|
|
</Heading>
|
|
<AccessibleButton
|
|
aria-label="Close dialog"
|
|
className="mx_Dialog_cancelButton"
|
|
element="div"
|
|
onClick={[Function]}
|
|
role="button"
|
|
tabIndex={0}
|
|
>
|
|
<div
|
|
aria-label="Close dialog"
|
|
className="mx_AccessibleButton mx_Dialog_cancelButton"
|
|
onClick={[Function]}
|
|
onKeyDown={[Function]}
|
|
onKeyUp={[Function]}
|
|
role="button"
|
|
tabIndex={0}
|
|
/>
|
|
</AccessibleButton>
|
|
</div>
|
|
<p>
|
|
Select from the options below to export chats from your timeline
|
|
</p>
|
|
<div
|
|
className="mx_ExportDialog_options"
|
|
>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Format
|
|
</span>
|
|
<StyledRadioGroup
|
|
definitions={
|
|
Array [
|
|
Object {
|
|
"label": "HTML",
|
|
"value": "Html",
|
|
},
|
|
Object {
|
|
"label": "Plain Text",
|
|
"value": "PlainText",
|
|
},
|
|
Object {
|
|
"label": "JSON",
|
|
"value": "Json",
|
|
},
|
|
]
|
|
}
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Html"
|
|
>
|
|
<StyledRadioButton
|
|
checked={true}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Html"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
|
|
>
|
|
<input
|
|
checked={true}
|
|
id="exportFormat-Html"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="Html"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
<StyledRadioButton
|
|
checked={false}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="PlainText"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="exportFormat-PlainText"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="PlainText"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
Plain Text
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
<StyledRadioButton
|
|
checked={false}
|
|
childrenInLabel={true}
|
|
className=""
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
value="Json"
|
|
>
|
|
<label
|
|
className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="exportFormat-Json"
|
|
name="exportFormat"
|
|
onChange={[Function]}
|
|
type="radio"
|
|
value="Json"
|
|
/>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_content"
|
|
>
|
|
JSON
|
|
</div>
|
|
<div
|
|
className="mx_StyledRadioButton_spacer"
|
|
/>
|
|
</label>
|
|
</StyledRadioButton>
|
|
</StyledRadioGroup>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Messages
|
|
</span>
|
|
<Field
|
|
element="select"
|
|
id="export-type"
|
|
onChange={[Function]}
|
|
type="text"
|
|
validateOnBlur={true}
|
|
validateOnChange={true}
|
|
validateOnFocus={true}
|
|
value="Timeline"
|
|
>
|
|
<div
|
|
className="mx_Field mx_Field_select"
|
|
>
|
|
<select
|
|
id="export-type"
|
|
onBlur={[Function]}
|
|
onChange={[Function]}
|
|
onFocus={[Function]}
|
|
type="text"
|
|
value="Timeline"
|
|
>
|
|
<option
|
|
key="Timeline"
|
|
value="Timeline"
|
|
>
|
|
Current Timeline
|
|
</option>
|
|
<option
|
|
key="Beginning"
|
|
value="Beginning"
|
|
>
|
|
From the beginning
|
|
</option>
|
|
<option
|
|
key="LastNMessages"
|
|
value="LastNMessages"
|
|
>
|
|
Specify a number of messages
|
|
</option>
|
|
</select>
|
|
<label
|
|
htmlFor="export-type"
|
|
/>
|
|
</div>
|
|
</Field>
|
|
<span
|
|
className="mx_ExportDialog_subheading"
|
|
>
|
|
Size Limit
|
|
</span>
|
|
<Field
|
|
autoComplete="off"
|
|
element="input"
|
|
id="size-limit"
|
|
onChange={[Function]}
|
|
onValidate={[Function]}
|
|
postfixComponent={
|
|
<span>
|
|
MB
|
|
</span>
|
|
}
|
|
type="number"
|
|
validateOnBlur={true}
|
|
validateOnChange={true}
|
|
validateOnFocus={true}
|
|
value="8"
|
|
>
|
|
<div
|
|
className="mx_Field mx_Field_input"
|
|
>
|
|
<input
|
|
autoComplete="off"
|
|
id="size-limit"
|
|
onBlur={[Function]}
|
|
onChange={[Function]}
|
|
onFocus={[Function]}
|
|
type="number"
|
|
value="8"
|
|
/>
|
|
<label
|
|
htmlFor="size-limit"
|
|
/>
|
|
<span
|
|
className="mx_Field_postfix"
|
|
>
|
|
<span>
|
|
MB
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</Field>
|
|
<StyledCheckbox
|
|
checked={false}
|
|
className="mx_ExportDialog_attachments-checkbox"
|
|
id="include-attachments"
|
|
onChange={[Function]}
|
|
>
|
|
<span
|
|
className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
checked={false}
|
|
id="include-attachments"
|
|
onChange={[Function]}
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
htmlFor="include-attachments"
|
|
>
|
|
<div
|
|
className="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
className="mx_Checkbox_checkmark"
|
|
/>
|
|
</div>
|
|
<div>
|
|
Include Attachments
|
|
</div>
|
|
</label>
|
|
</span>
|
|
</StyledCheckbox>
|
|
</div>
|
|
<DialogButtons
|
|
disabled={false}
|
|
hasCancel={true}
|
|
onCancel={[Function]}
|
|
onPrimaryButtonClick={[Function]}
|
|
primaryButton="Export"
|
|
>
|
|
<div
|
|
className="mx_Dialog_buttons"
|
|
>
|
|
<button
|
|
data-test-id="dialog-cancel-button"
|
|
disabled={false}
|
|
onClick={[Function]}
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="mx_Dialog_primary"
|
|
data-test-id="dialog-primary-button"
|
|
onClick={[Function]}
|
|
type="button"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</DialogButtons>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`<ExportDialog /> renders success screen when export is finished 1`] = `
|
|
<div
|
|
className="mx_Dialog_content"
|
|
id="mx_Dialog_content"
|
|
>
|
|
Your export was successful. Find it in your Downloads folder.
|
|
</div>
|
|
`;
|