Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
docs: add debug demo for segmented (#35176)
* docs: add debug demo for segmented

* chore: update

* chore: update
  • Loading branch information
vagusX committed Apr 23, 2022
1 parent 77dcd12 commit 22c1021
Show file tree
Hide file tree
Showing 3 changed files with 241 additions and 0 deletions.
100 changes: 100 additions & 0 deletions components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
Expand Up @@ -178,6 +178,106 @@ exports[`renders ./components/segmented/demo/controlled.md extend context correc
</div>
`;

exports[`renders ./components/segmented/demo/controlled-two.md extend context correctly 1`] = `
Array [
<div
class="ant-segmented"
>
<label
class="ant-segmented-item ant-segmented-item-selected"
>
<input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="AND"
>
AND
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="OR"
>
OR
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="NOT"
>
NOT
</div>
</label>
</div>,
"  ",
<div
class="ant-segmented"
>
<label
class="ant-segmented-item ant-segmented-item-selected"
>
<input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="AND"
>
AND
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="OR"
>
OR
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="NOT"
>
NOT
</div>
</label>
</div>,
]
`;

exports[`renders ./components/segmented/demo/custom.md extend context correctly 1`] = `
Array [
<div
Expand Down
100 changes: 100 additions & 0 deletions components/segmented/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -178,6 +178,106 @@ exports[`renders ./components/segmented/demo/controlled.md correctly 1`] = `
</div>
`;

exports[`renders ./components/segmented/demo/controlled-two.md correctly 1`] = `
Array [
<div
class="ant-segmented"
>
<label
class="ant-segmented-item ant-segmented-item-selected"
>
<input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="AND"
>
AND
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="OR"
>
OR
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="NOT"
>
NOT
</div>
</label>
</div>,
"  ",
<div
class="ant-segmented"
>
<label
class="ant-segmented-item ant-segmented-item-selected"
>
<input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="AND"
>
AND
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="OR"
>
OR
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="NOT"
>
NOT
</div>
</label>
</div>,
]
`;

exports[`renders ./components/segmented/demo/custom.md correctly 1`] = `
Array [
<div
Expand Down
41 changes: 41 additions & 0 deletions components/segmented/demo/controlled-two.md
@@ -0,0 +1,41 @@
---
order: 99
title:
zh-CN: 受控同步模式
en-US: Controlled Synced mode
debug: true
---

## zh-CN

测试受控模式下两个 Segmented 同步 state。

## en-US

Tests two Segmented synchronized states in controlled mode.

```jsx
import { useState } from 'react';
import { Segmented } from 'antd';

const Demo = () => {
const [foo, setFoo] = useState('AND');
return (
<>
<Segmented
value={foo}
options={['AND', 'OR', 'NOT']}
onChange={e => setFoo(e.target.value)}
/>
&nbsp;&nbsp;
<Segmented
value={foo}
options={['AND', 'OR', 'NOT']}
onChange={e => setFoo(e.target.value)}
/>
</>
);
};

export default Demo;
```

0 comments on commit 22c1021

Please sign in to comment.