Skip to content

Commit

Permalink
chore: remove "dot-syntax" from examples (#4456)
Browse files Browse the repository at this point in the history
  • Loading branch information
@layershifter
layershifter committed Dec 30, 2023
1 parent cdc44ef commit 6c506b2
Show file tree
Hide file tree
Showing 558 changed files with 7,867 additions and 6,118 deletions.
10 changes: 5 additions & 5 deletions docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js
View file
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
import { Grid, Input, Pagination, Segment } from 'semantic-ui-react'
import { GridColumn, Grid, Input, Pagination, Segment } from 'semantic-ui-react'

export default class PaginationExampleControlled extends Component {
state = { activePage: 1 }
Expand All @@ -13,7 +13,7 @@ export default class PaginationExampleControlled extends Component {

return (
<Grid columns={2} verticalAlign='middle'>
<Grid.Column>
<GridColumn>
<Segment secondary>
<div>activePage: {activePage}</div>
<Input
Expand All @@ -24,14 +24,14 @@ export default class PaginationExampleControlled extends Component {
value={activePage}
/>
</Segment>
</Grid.Column>
<Grid.Column>
</GridColumn>
<GridColumn>
<Pagination
activePage={activePage}
onPageChange={this.handlePaginationChange}
totalPages={5}
/>
</Grid.Column>
</GridColumn>
</Grid>
)
}
Expand Down
45 changes: 27 additions & 18 deletions docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js
View file
@@ -1,5 +1,14 @@
import React, { Component } from 'react'
import { Grid, Form, Pagination, Segment } from 'semantic-ui-react'
import {
GridColumn,
FormInput,
FormGroup,
FormCheckbox,
Grid,
Form,
Pagination,
Segment,
} from 'semantic-ui-react'

export default class PaginationExampleCustomization extends Component {
state = {
Expand Down Expand Up @@ -32,7 +41,7 @@ export default class PaginationExampleCustomization extends Component {

return (
<Grid columns={1}>
<Grid.Column>
<GridColumn>
<Pagination
activePage={activePage}
boundaryRange={boundaryRange}
Expand All @@ -47,68 +56,68 @@ export default class PaginationExampleCustomization extends Component {
prevItem={showPreviousAndNextNav ? undefined : null}
nextItem={showPreviousAndNextNav ? undefined : null}
/>
</Grid.Column>
</GridColumn>

<Grid.Column>
<GridColumn>
<Form as={Segment}>
<Form.Group widths={2}>
<Form.Input
<FormGroup widths={2}>
<FormInput
label='Active page'
name='activePage'
min={1}
onChange={this.handleInputChange}
type='number'
value={activePage}
/>
<Form.Input
<FormInput
label='Total pages'
name='totalPages'
min={1}
onChange={this.handleInputChange}
type='number'
value={totalPages}
/>
</Form.Group>
<Form.Group widths={2}>
<Form.Input
</FormGroup>
<FormGroup widths={2}>
<FormInput
label='Boundary pages range'
name='boundaryRange'
min={0}
onChange={this.handleInputChange}
type='number'
value={boundaryRange}
/>
<Form.Input
<FormInput
label='Sibling pages range'
name='siblingRange'
min={0}
onChange={this.handleInputChange}
type='number'
value={siblingRange}
/>
</Form.Group>
<Form.Group inline>
<Form.Checkbox
</FormGroup>
<FormGroup inline>
<FormCheckbox
checked={showEllipsis}
label='Show ellipsis'
name='showEllipsis'
onChange={this.handleCheckboxChange}
/>
<Form.Checkbox
<FormCheckbox
checked={showFirstAndLastNav}
label='Show first and last nav pages'
name='showFirstAndLastNav'
onChange={this.handleCheckboxChange}
/>
<Form.Checkbox
<FormCheckbox
checked={showPreviousAndNextNav}
label='Show previous and next nav pages'
name='showPreviousAndNextNav'
onChange={this.handleCheckboxChange}
/>
</Form.Group>
</FormGroup>
</Form>
</Grid.Column>
</GridColumn>
</Grid>
)
}
Expand Down
13 changes: 10 additions & 3 deletions docs/src/examples/addons/Portal/Types/PortalExampleControlled.js
View file
@@ -1,5 +1,12 @@
import React, { Component } from 'react'
import { Button, Grid, Header, Segment, Portal } from 'semantic-ui-react'
import {
GridColumn,
Button,
Grid,
Header,
Segment,
Portal,
} from 'semantic-ui-react'

export default class PortalExampleControlled extends Component {
state = { open: false }
Expand All @@ -12,7 +19,7 @@ export default class PortalExampleControlled extends Component {

return (
<Grid columns={2}>
<Grid.Column>
<GridColumn>
<Button
content='Open Portal'
disabled={open}
Expand Down Expand Up @@ -40,7 +47,7 @@ export default class PortalExampleControlled extends Component {
/>
</Segment>
</Portal>
</Grid.Column>
</GridColumn>
</Grid>
)
}
Expand Down
23 changes: 16 additions & 7 deletions docs/src/examples/addons/Portal/Types/PortalExamplePortal.js
View file
@@ -1,5 +1,14 @@
import React, { Component } from 'react'
import { Button, Grid, Header, Label, Segment, Portal } from 'semantic-ui-react'
import {
SegmentGroup,
GridColumn,
Button,
Grid,
Header,
Label,
Segment,
Portal,
} from 'semantic-ui-react'

export default class PortalExamplePortal extends Component {
state = {
Expand Down Expand Up @@ -34,7 +43,7 @@ export default class PortalExamplePortal extends Component {

return (
<Grid columns={2}>
<Grid.Column>
<GridColumn>
<Portal
closeOnTriggerClick
openOnTriggerClick
Expand All @@ -61,9 +70,9 @@ export default class PortalExamplePortal extends Component {
<p>To close, simply click the close button or click away</p>
</Segment>
</Portal>
</Grid.Column>
<Grid.Column>
<Segment.Group>
</GridColumn>
<GridColumn>
<SegmentGroup>
<Segment>
<Button
compact
Expand All @@ -82,8 +91,8 @@ export default class PortalExamplePortal extends Component {
))}
</pre>
</Segment>
</Segment.Group>
</Grid.Column>
</SegmentGroup>
</GridColumn>
</Grid>
)
}
Expand Down
10 changes: 5 additions & 5 deletions docs/src/examples/addons/Radio/States/RadioExampleDisabled.js
View file
@@ -1,14 +1,14 @@
import React from 'react'
import { Form, Radio } from 'semantic-ui-react'
import { FormField, Form, Radio } from 'semantic-ui-react'

const RadioExampleDisabled = () => (
<Form>
<Form.Field>
<FormField>
<Radio label='Disabled' disabled />
</Form.Field>
<Form.Field>
</FormField>
<FormField>
<Radio toggle label='Disabled' disabled />
</Form.Field>
</FormField>
</Form>
)

Expand Down
14 changes: 7 additions & 7 deletions docs/src/examples/addons/Radio/Types/RadioExampleRadioGroup.js
View file
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
import { Form, Radio } from 'semantic-ui-react'
import { FormField, Form, Radio } from 'semantic-ui-react'

export default class RadioExampleRadioGroup extends Component {
state = {}
Expand All @@ -8,27 +8,27 @@ export default class RadioExampleRadioGroup extends Component {
render() {
return (
<Form>
<Form.Field>
<FormField>
Selected value: <b>{this.state.value}</b>
</Form.Field>
<Form.Field>
</FormField>
<FormField>
<Radio
label='Choose this'
name='radioGroup'
value='this'
checked={this.state.value === 'this'}
onChange={this.handleChange}
/>
</Form.Field>
<Form.Field>
</FormField>
<FormField>
<Radio
label='Or that'
name='radioGroup'
value='that'
checked={this.state.value === 'that'}
onChange={this.handleChange}
/>
</Form.Field>
</FormField>
</Form>
)
}
Expand Down
7 changes: 4 additions & 3 deletions docs/src/examples/addons/TextArea/Usage/index.js
View file
@@ -1,5 +1,5 @@
import React from 'react'
import { Button, Message, Segment } from 'semantic-ui-react'
import { MessageHeader, Button, Message, Segment } from 'semantic-ui-react'

import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
Expand All @@ -8,8 +8,9 @@ const TextAreaUsageExamples = () => (
<ExampleSection title='Usage'>
<Segment>
<Message warning>
<Message.Header>Auto height</Message.Header>
We don't support `autoHeight` anymore. If you need this feature you can use{' '}
<MessageHeader>Auto height</MessageHeader>
We don't support `autoHeight` anymore. If you need this feature you can
use{' '}
<a
href='https://www.npmjs.com/package/react-textarea-autosize'
rel='noopener noreferrer'
Expand Down
14 changes: 9 additions & 5 deletions docs/src/examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js
View file
@@ -1,5 +1,9 @@
import React, { Component } from 'react'
import {
GridColumn,
FormSelect,
FormInput,
FormButton,
Form,
Grid,
Header,
Expand Down Expand Up @@ -50,16 +54,16 @@ export default class TransitionablePortalExampleTransition extends Component {

return (
<Grid columns={2}>
<Grid.Column>
<GridColumn>
<Form>
<Form.Select
<FormSelect
label='Choose transition'
name='animation'
onChange={this.handleChange}
options={options}
value={animation}
/>
<Form.Input
<FormInput
label={`Duration: ${duration}ms `}
min={100}
max={2000}
Expand All @@ -69,7 +73,7 @@ export default class TransitionablePortalExampleTransition extends Component {
type='range'
value={duration}
/>
<Form.Button
<FormButton
content={open ? 'Close Portal' : 'Open Portal'}
negative={open}
positive={!open}
Expand All @@ -94,7 +98,7 @@ export default class TransitionablePortalExampleTransition extends Component {
<p>To close, simply click the close button or click away</p>
</Segment>
</TransitionablePortal>
</Grid.Column>
</GridColumn>
</Grid>
)
}
Expand Down
16 changes: 10 additions & 6 deletions docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js
View file
@@ -1,13 +1,17 @@
import React from 'react'
import { Breadcrumb } from 'semantic-ui-react'
import {
BreadcrumbSection,
BreadcrumbDivider,
Breadcrumb,
} from 'semantic-ui-react'

const BreadcrumbExampleDivider = () => (
<Breadcrumb>
<Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider>/</Breadcrumb.Divider>
<Breadcrumb.Section link>Registration</Breadcrumb.Section>
<Breadcrumb.Divider>/</Breadcrumb.Divider>
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
<BreadcrumbSection link>Home</BreadcrumbSection>
<BreadcrumbDivider>/</BreadcrumbDivider>
<BreadcrumbSection link>Registration</BreadcrumbSection>
<BreadcrumbDivider>/</BreadcrumbDivider>
<BreadcrumbSection active>Personal Information</BreadcrumbSection>
</Breadcrumb>
)

Expand Down

0 comments on commit 6c506b2

Please sign in to comment.