fix(blocksAntd): fix CheckboxSelector examples

This commit is contained in:
Gervwyk 2020-11-03 17:40:18 +02:00
parent a817dd6ced
commit 4832493778
2 changed files with 925 additions and 7 deletions

View File

@ -27,13 +27,13 @@
value: 1
- label: two
value: 2
- id: "properties.color_'#'" #use with buttonStyle: outline to see text
- id: "properties.color_red"
type: CheckboxSelector
properties:
options:
- Option 1
- Option 2
color: "#cf1322"
color: red
- id: "properties.disabled: true"
type: CheckboxSelector
properties:

View File

@ -41,6 +41,837 @@ exports[`Render default 1`] = `
</div>
`;
exports[`Render properties.color_red 1`] = `
<div
className="ant-row ant-form-item {\\"style\\":{}}"
style={
Object {
"marginBottom": 0,
}
}
>
<div
className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<label
className="{}"
htmlFor="properties.color_red_input"
title="properties.color_red"
>
properties.color_red
</label>
</div>
<div
className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<div
className="ant-form-item-control-input"
>
<div
className="ant-form-item-control-input-content"
>
<div
className="ant-checkbox-group {\\"style\\":[{\\"& > label > span.ant-checkbox-checked:not(.ant-checkbox-disabled) > span\\":{\\"backgroundColor\\":\\"red !important\\",\\"borderColor\\":\\"red !important\\"}},null]}"
id="properties.color_red_input"
>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.color_red_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={0}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 1
</span>
</label>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.color_red_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={1}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 2
</span>
</label>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Render properties.disabled: true 1`] = `
<div
className="ant-row ant-form-item {\\"style\\":{}}"
style={
Object {
"marginBottom": 0,
}
}
>
<div
className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<label
className="{}"
htmlFor="properties.disabled: true_input"
title="properties.disabled: true"
>
properties.disabled: true
</label>
</div>
<div
className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<div
className="ant-form-item-control-input"
>
<div
className="ant-form-item-control-input-content"
>
<div
className="ant-checkbox-group {\\"style\\":[null,null]}"
id="properties.disabled: true_input"
>
<label
className="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
>
<span
className="ant-checkbox ant-checkbox-disabled"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
disabled={true}
id="properties.disabled: true_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={0}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 1
</span>
</label>
<label
className="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
>
<span
className="ant-checkbox ant-checkbox-disabled"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
disabled={true}
id="properties.disabled: true_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={1}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 2
</span>
</label>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Render properties.label.colon: false 1`] = `
<div
className="ant-row ant-form-item {\\"style\\":{}}"
style={
Object {
"marginBottom": 0,
}
}
>
<div
className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<label
className="ant-form-item-no-colon {}"
htmlFor="properties.label.colon: false_input"
title="properties.label.colon: false"
>
properties.label.colon: false
</label>
</div>
<div
className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<div
className="ant-form-item-control-input"
>
<div
className="ant-form-item-control-input-content"
>
<div
className="ant-checkbox-group {\\"style\\":[null,null]}"
id="properties.label.colon: false_input"
>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label.colon: false_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={0}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 1
</span>
</label>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label.colon: false_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={1}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 2
</span>
</label>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Render properties.label.disabled: true 1`] = `
<div
className="ant-row ant-form-item {\\"style\\":{}}"
style={
Object {
"marginBottom": 0,
}
}
>
<div
className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<div
className="ant-form-item-control-input"
>
<div
className="ant-form-item-control-input-content"
>
<div
className="ant-checkbox-group {\\"style\\":[null,null]}"
id="properties.label.disabled: true_input"
>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label.disabled: true_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={0}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 1
</span>
</label>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label.disabled: true_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={1}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 2
</span>
</label>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Render properties.label.extra: showingextra 1`] = `
<div
className="ant-row ant-form-item {\\"style\\":{}}"
style={
Object {
"marginBottom": 0,
}
}
>
<div
className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<label
className="{}"
htmlFor="properties.label.extra: showingextra_input"
title="properties.label.extra: showingextra"
>
properties.label.extra: showingextra
</label>
</div>
<div
className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<div
className="ant-form-item-control-input"
>
<div
className="ant-form-item-control-input-content"
>
<div
className="ant-checkbox-group {\\"style\\":[null,null]}"
id="properties.label.extra: showingextra_input"
>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label.extra: showingextra_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={0}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 1
</span>
</label>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label.extra: showingextra_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={1}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 2
</span>
</label>
</div>
</div>
</div>
<div
className="ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
>
showing extra
</div>
</div>
</div>
`;
exports[`Render properties.label: align_right 1`] = `
<div
className="ant-row ant-form-item {\\"style\\":{}}"
style={
Object {
"marginBottom": 0,
}
}
>
<div
className="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<label
className="{}"
htmlFor="properties.label: align_right_input"
title="properties.label: align_right"
>
properties.label: align_right
</label>
</div>
<div
className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<div
className="ant-form-item-control-input"
>
<div
className="ant-form-item-control-input-content"
>
<div
className="ant-checkbox-group {\\"style\\":[null,null]}"
id="properties.label: align_right_input"
>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label: align_right_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={0}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 1
</span>
</label>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label: align_right_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={1}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 2
</span>
</label>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Render properties.label: inline_true 1`] = `
<div
className="ant-row ant-form-item {\\"style\\":{\\"flexWrap\\":\\"inherit\\"}}"
style={
Object {
"marginBottom": 0,
}
}
>
<div
className="ant-col ant-form-item-label ant-form-item-label-left"
style={
Object {
"flex": "0 1 auto",
}
}
>
<label
className="{}"
htmlFor="properties.label: inline_true_input"
title="properties.label: inline_true"
>
properties.label: inline_true
</label>
</div>
<div
className="ant-col ant-form-item-control"
style={
Object {
"flex": "1 1 auto",
}
}
>
<div
className="ant-form-item-control-input"
>
<div
className="ant-form-item-control-input-content"
>
<div
className="ant-checkbox-group {\\"style\\":[null,null]}"
id="properties.label: inline_true_input"
>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label: inline_true_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={0}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 1
</span>
</label>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label: inline_true_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={1}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 2
</span>
</label>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Render properties.label: span_12 1`] = `
<div
className="ant-row ant-form-item {\\"style\\":{}}"
style={
Object {
"marginBottom": 0,
}
}
>
<div
className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24 ant-col-md-12"
style={Object {}}
>
<label
className="{}"
htmlFor="properties.label: span_12_input"
title="properties.label: span_12"
>
properties.label: span_12
</label>
</div>
<div
className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24 ant-col-md-12"
style={Object {}}
>
<div
className="ant-form-item-control-input"
>
<div
className="ant-form-item-control-input-content"
>
<div
className="ant-checkbox-group {\\"style\\":[null,null]}"
id="properties.label: span_12_input"
>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label: span_12_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={0}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 1
</span>
</label>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.label: span_12_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={1}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 2
</span>
</label>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Render properties.options-number 1`] = `
<div
className="ant-row ant-form-item {\\"style\\":{}}"
style={
Object {
"marginBottom": 0,
}
}
>
<div
className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<label
className="{}"
htmlFor="properties.options-number_input"
title="properties.options-number"
>
properties.options-number
</label>
</div>
<div
className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
style={Object {}}
>
<div
className="ant-form-item-control-input"
>
<div
className="ant-form-item-control-input-content"
>
<div
className="ant-checkbox-group {\\"style\\":[null,null]}"
id="properties.options-number_input"
>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.options-number_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={0}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
15
</span>
</label>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.options-number_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={1}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
20
</span>
</label>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Render properties.options-object 1`] = `
<div
className="ant-row ant-form-item {\\"style\\":{}}"
@ -190,7 +1021,7 @@ exports[`Render properties.options-string 1`] = `
/>
</span>
<span>
one
Option 1
</span>
</label>
<label
@ -215,7 +1046,7 @@ exports[`Render properties.options-string 1`] = `
/>
</span>
<span>
two
Option 2
</span>
</label>
</div>
@ -241,9 +1072,9 @@ exports[`Render properties.title 1`] = `
<label
className="{}"
htmlFor="properties.title_input"
title="Checkbox selector"
title="properties.title: My CheckboxSelector Title"
>
Checkbox selector
properties.title: My CheckboxSelector Title
</label>
</div>
<div
@ -259,7 +1090,58 @@ exports[`Render properties.title 1`] = `
<div
className="ant-checkbox-group {\\"style\\":[null,null]}"
id="properties.title_input"
/>
>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.title_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={0}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 1
</span>
</label>
<label
className="ant-checkbox-wrapper"
>
<span
className="ant-checkbox"
style={Object {}}
>
<input
checked={false}
className="ant-checkbox-input"
id="properties.title_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
value={1}
/>
<span
className="ant-checkbox-inner"
/>
</span>
<span>
Option 2
</span>
</label>
</div>
</div>
</div>
</div>
@ -270,6 +1152,42 @@ exports[`Test Schema default 1`] = `true`;
exports[`Test Schema default 2`] = `null`;
exports[`Test Schema properties.color_red 1`] = `true`;
exports[`Test Schema properties.color_red 2`] = `null`;
exports[`Test Schema properties.disabled: true 1`] = `true`;
exports[`Test Schema properties.disabled: true 2`] = `null`;
exports[`Test Schema properties.label.colon: false 1`] = `true`;
exports[`Test Schema properties.label.colon: false 2`] = `null`;
exports[`Test Schema properties.label.disabled: true 1`] = `true`;
exports[`Test Schema properties.label.disabled: true 2`] = `null`;
exports[`Test Schema properties.label.extra: showingextra 1`] = `true`;
exports[`Test Schema properties.label.extra: showingextra 2`] = `null`;
exports[`Test Schema properties.label: align_right 1`] = `true`;
exports[`Test Schema properties.label: align_right 2`] = `null`;
exports[`Test Schema properties.label: inline_true 1`] = `true`;
exports[`Test Schema properties.label: inline_true 2`] = `null`;
exports[`Test Schema properties.label: span_12 1`] = `true`;
exports[`Test Schema properties.label: span_12 2`] = `null`;
exports[`Test Schema properties.options-number 1`] = `true`;
exports[`Test Schema properties.options-number 2`] = `null`;
exports[`Test Schema properties.options-object 1`] = `true`;
exports[`Test Schema properties.options-object 2`] = `null`;