Skip to content

Latest commit

 

History

History
239 lines (160 loc) · 5.27 KB

README.md

File metadata and controls

239 lines (160 loc) · 5.27 KB
Raw

react-toggle-pattern Build Status

React Component that provide toggle pattern

Install

Install with npm:

npm install react-toggle-pattern

Usage

react-toggle-pattern provide three components.

Insert and Remove pattens

  • <TogglePattern /> or pattern. This is same with <ToggleOrPattern />
  • <ToggleOrPattern /> or pattern
  • <ToggleAndPattern /> and pattern

Put <YourComponent /> into <TogglePattern />.

import {TogglePattern} from "react-toggle-pattern";
class ToggleButton extends React.Component {
    render(){
        return (
            <TogglePattern isEditing={this.props.isEditing}>
                <LeaveEditingButton isEditing={true} />
                <EnterEditingButton isEditing={false} />
            </TogglePattern>
        );
    }
}

It means that

  • if this.props.isEditing is true, show <LeaveEditingButton />
  • if this.props.isEditing is false, show <EnterEditingButton />
  • In the other case, show null

<TogglePattern /> Interface

  • <TogglePattern anyAttribute=anyValue />
    • anyAttribute is any name.
    • anyValue is any type.

<ToggleOrPattern /> and <ToggleAndPattern /> has same interface.

OR AND pattern

OR

<ToggleOrPattern /> filter child components by OR matching.

  • find component that match with a is true or b is false.
<ToggleOrPattern a={true}>
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</ToggleOrPattern>

Result to:

<div class="TogglePattern ToggleOrPattern">
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</div>

Both components are or match with TogglePattern.

AND

<ToggleAndPattern /> filter child components by AND matching.

  • find component that match with a is true and b is false.
<ToggleAndPattern a={true} b={false}>
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</ToggleAndPattern>

Result to:

<LeaveEditingButton a={true} b={false} />

<EnterEditingButton /> is not and match with TogglePattern.

Example

Show component that has truly attribute with <TogglePattern attribute />

const TogglePattern = require("react-toggle-pattern").TogglePattern;
// render
<TogglePattern isEditing={true}>
    <ComponentX isEditing/>
    <ComponentY />
</TogglePattern>

Result to <ComponentX />

Show component that match attribute and value with <TogglePattern attribute=value />

<TogglePattern isEditing={false}>
    <ComponentX isEditing={true} />
    <ComponentY isEditing={false} />
</TogglePattern>

Result to <ComponentY />

Also, it is ok that value it string type.

<TogglePattern pattern="one">
    <ComponentX pattern="one"/>
    <ComponentY pattern="two"/>
</TogglePattern>

Result to <ComponentY />

Show components that match attribute and value with <TogglePattern attribute=value />.

<TogglePattern isEditing={true}>
    <ComponentX isEditing={true} />
    <ComponentX isEditing={true}/>
</TogglePattern>

Result to <div class="TogglePattern ToggleOrPattern"><ComponentX /><ComponentX /></div>

Not show when not match

<TogglePattern isEditing={false}>
    <ComponentX isEditing={true} />
    <ComponentY />
</TogglePattern>

Result to null.

OR match

<ToggleOrPattern pattern1={1} pattern2={2}>
    <ComponentX pattern1={1} pattern2={2}/>
    <ComponentY pattern1={1}/>
</ToggleOrPattern>

Result to <div class="TogglePattern ToggleOrPattern"><div>Visible</div><div>Hidden</div></div>.

And match

<ToggleAndPattern pattern1={1} pattern2={2}>
    <ComponentX pattern1={1} pattern2={2}/>
    <ComponentY pattern1={1} />
</ToggleAndPattern>

Result to <ComponentX pattern1={1} pattern2={2}/>.

Show and Hide pattern

It is an experimental pattern.

  • <ToggleAndDisplayPattern />

It has same interface <ToggleAndPattern />, but it has difference logic.

  • It use hidden attribute for non-showing element.
    • You should add [hidden]{ display: none!important; }; to own css.
  • It always wrapped children components with <div class="ToggleAndDisplayPattern">{children}</ToggleAndDisplayPattern>

Props

  • <ToggleAndDisplayPattern /> try to preserve your focus.
    • <ToggleAndPattern /> missing focus because of inserting and removing.

Cons

  • Automatically wrap {this.props.children} with div element.

Changelog

See Releases page.

Running tests

Install devDependencies and Run npm test:

npm i -d && npm test

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

License

MIT © azu