daviferreira / react-sanfona Goto Github PK
View Code? Open in Web Editor NEWAccessible react accordion component
Home Page: https://daviferreira.github.io/react-sanfona
License: MIT License
Accessible react accordion component
Home Page: https://daviferreira.github.io/react-sanfona
License: MIT License
Probably similar to #51
Example:
<Accordion allowMultiple={false} activeItems={[0,1,2]}>
</Accordion>
Possible solutions:
I see this error when i try to compile my app on build machine.
Locally its fine
https://github.com/daviferreira/react-sanfona/blob/master/src/AccordionItem/index.jsx#L76
introduced in #97
I can't move up anything from body to item header position.
It should be visible on expanded and hidden on opposite
Hi, I have a problem. Accordion Item is opening If I click on input outside or inside of the Accordion.
Thanks.
Would be nice to have the <h3>
configurable in https://github.com/daviferreira/react-sanfona/blob/master/src/AccordionItemTitle/index.jsx#L16. It does not necessary suit the rest of the markup semantic in the application.
Thanks for your nice module! :)
Thanks for this great package.
Kindly publish new release based on #91. So that we can use it for dynamic active items change
after updating package v0.4.0 to latest accordion stop working
if i use this code. Note only one item. it throws the error.
<Accordion className="Accordion">
<AccordionItem
titleClassName="Accordion-title"
bodyClassName="Accordion-body"
expandedClassName="is-expanded"
title={stubExplanation}
>
<p>{furtherExplanation}</p>
</AccordionItem>
</Accordion>
but if i use this hack. it works.
<Accordion className="Accordion">
{[1].map((item, index) => {
return (
<AccordionItem
key={`accordion-key-${index}`}
titleClassName="Accordion-title"
bodyClassName="Accordion-body"
expandedClassName="is-expanded"
title={stubExplanation}
>
<p>{furtherExplanation}</p>
</AccordionItem>
);
})}
</Accordion>
Is there a way to manually expand an Accordion item?
I am actually using redux. And I tried doing something like
<AccordionItem expanded={someBoolean} onExpand={expandingCallback}>
{categorisedArray}
</AccordionItem>
where someBoolean comes from the redux state.
Now when I click one of the elements from categorised array, the accordion item gets closed even though the value of someBoolean
is true in the state. My goal is to preserve the state of the accordion i.e. before clicking an element from the array, if an accordion was opened, I want it to stay opened after the page re renders.
I am trying to find a function or some tag that will help me to manually expand the accordion on receiving the props. Something like this.showItem()
. Or any other way of achieving the main purpose will do too.
Thanks.
Misleading docs method names
'onClosed' and 'onExpanded' should be renamed to 'onClose' and 'onExpand'
Everything was great before I try to use a callback function inside the onExpand prop of this module. When I call another function inherited from the parent component, simply, out of blue, the accordion doesn't work anymore. And as test I deleted the snippet to check if the accordion back to work again, and it works! Let's go to the code to clarify it better.
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import './App.css';
import Materia from '../components/materia/Materia.js';
import Header from '../components/header/Header.js';
import auth from '../helpers/auth.js';
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
tipoMateria: ['video', 'artigos', 'galeria', 'outros'],
headerExpanded: false,
};
axios.get('/data.json')
.then(res => {
this.setState({ items : res.data });
});
this.changeHeaderExpanded = this.changeHeaderExpanded.bind(this);
}
changeHeaderExpanded(headerExpanded) {
this.setState({ headerExpanded });
}
render() {
return (
<div className="">
<Header headerExpanded={this.state.header} />
<div className="container main-wrapper">
<Materia items={this.state.items} headerExpanded={this.state.headerExpanded} changeHeaderExpanded={this.changeHeaderExpanded} />
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
Materia.js
import React, { Component } from 'react';
import { Accordion, AccordionItem } from 'react-sanfona';
import style from './style.scss';
import HeaderComponent from './header_component/HeaderComponent.js';
import Content from './content/Content.js';
import Footer from './footer/Footer.js';
class Materia extends Component {
constructor(props) {
super(props);
this.state = {
};
this.toggleContent = this.toggleContent.bind(this);
}
toggleContent() {
console.log(this.props);
this.props.changeHeaderExpanded(!this.props.headerExpanded);
}
render() {
const Materias = this.props.items.map((item, key) => (
<AccordionItem
title={
<div className={style.container}>
<div className={style.resume}>
<span className={style.description}>fim de conflito</span><span className={style.descriptionTime}>Há 4 minutos</span>
</div>
<h1 className={style.title}>{item.title} </h1>
<h3 className={style.preview}>{item.subtitle}</h3>
<p> social network social network social network </p>
</div>
} key={key} onExpand={this.toggleContent}
>
<HeaderComponent title={item.title} id={item.id} subtitle={item.subtitle} category={item.categoria} />
<Content content={item.content[0]} />
<Footer />
</AccordionItem>
));
return (
<Accordion activeItems={null} >
{Materias}
</Accordion>
);
}
}
export default Materia;
This work:
toggleContent() {
console.log(this.props);
}
This don't
toggleContent() {
console.log(this.props);
this.props.changeHeaderExpanded(!this.props.headerExpanded);
}
Cannot read property 'props' of null
https://github.com/daviferreira/react-sanfona/blob/master/src/Accordion/index.jsx#L73
<Accordion>
<AccordionItem title="A" slug="a">
<A />
</AccordionItem>
<AccordionItem title="B" slug="b">
<B />
</AccordionItem>
{!(typeof x === 'undefined' || x === null || x.length === 0) ?
<AccordionItem title="X" slug="x">
<X />
</AccordionItem> :
null }
<AccordionItem title="Z" slug="z">
<Z />
</AccordionItem>
</Accordion>
There is an issue using this library with snapshot testing. The uuid created changes on each test run, and which is used as id
and other attributes, so snapshot differs in each test run. Is there a way to make them deterministic, or a way to mock part of this library which varies on test run.
<div
- aria-controls="react-sanfona-item-body-b63789ff-4a49-4f8f-9184-85127fc5e3e0"
+ aria-controls="react-sanfona-item-body-f913643c-4ad1-4707-85dd-25d8364e2667"
className="react-sanfona-item-title"
- id="react-safona-item-title-b63789ff-4a49-4f8f-9184-85127fc5e3e0"
+ id="react-safona-item-title-f913643c-4ad1-4707-85dd-25d8364e2667"
onClick={[Function]}>
<div
Is there a way to add an onClick event on each AccordionItem? I need to dispatch an action every time user click the AccordionItem. I've tried to add onClick event directly to the AccordionItem, but it doesn't work. This is what I've tried so far
<AccordionItem
title={`Room Details for ${this.props.nights} nights`}
titleClassName="panel-heading"
onClick={() => this.changeActiveForm('room-breakdown')}
>
When my accordion item loads it defaults to expanding the first item on the list. How can I prevent this (so that on load none of the accordion items are open)?
Thank you! I love this library otherwise :)
<Accordion allowMultiple={false} onChange={this.onClickProject}>
{projectLoop && projectLoop.map((instance, index) => {
const titleBar = (
<div className="project-title" onClick={this.onClickProject}>
<span>{instance.name}</span>
<Link>
<span className="icon-height"style={{float: 'right'}} onClick={(evt) => {
this.props.fetchCollabs(instance);
hashHistory.push('/collabs');
evt.stopPropagation() // **LEAVE THIS HERE!** it makes sure we don't trigger AccordionItemTitle onClick of the icon
}}>
<i className="small material-icons">supervisor_account</i>
</span>
</Link>
</div>
)
return (
<AccordionItem title={titleBar} key={index} slug={index} className="card-panel left-justified-text">
{instance.commits && instance.commits.map((commit, index) => {
return (
<div className="item-commit-border" key={commit.id}
onClick={() => {this.onClickCommit(index)}}>
<div className="commit-message commit-color">{commit.message.slice(0, 20)}</div>
<div className="item-commit-details"><span className="commit-message commit-info-font commit-date">{`On ${Moment(commit.date).format('MMMM Do')}`}</span><span className="commit-info-font">{`by ${commit.committer}`}</span></div>
</div>
)
})}
</AccordionItem>
);
})}
</Accordion>
Is there a way (using props or something else) to set the Accordion so that all Accordion Items are showing open on page load? I see that there is a way to select a certain Item to render open on page load using the prop "selectedIndex", but that's not quite what I'm looking for. I need them to be all "open" when the page loads. Thanks in advance!
I have a title that is composed of text and a button, I want when users click on the button, do not expand the accordion, since this is a link to another page.
This is possible?
Thank you very much.
Is there any way or idea in how to implement a function inside the ?
Im thinking in some stuff like that:
<AccordionItem title={this.renderMateriaSqueezed.bind(this)} key={key}> <HeaderComponent title={item.title} id={item.id} subtitle={item.subtitle} category={item.categoria} /> <Content content={item.content[0]} /> <Footer /> </AccordionItem>
I need to render a whole content as "title" or some way to load previous content before the accordion is clicked. I'm able to help you guys in this feature if there's no way to do this yet.
Hi,
I see that the package is using PropTypes still and that practice has been deprecated in the newer versions of React. Thought I'd give a heads up on that.
-R
Any way to set animation duration and easing?
Render method throws the below error.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of
t.
To test it out I am running the exact same code from the docs and still see the issue.
Some investigation revels, that
import { Accordion, AccordionItem } from 'react-sanfona'
returns undefined.
Both Accordion
and AccordionItem
are undefined.
Whereas using
import myAccordion from 'react-sanfona'
<myAccordion.Accordion>
<myAccordion.AccordionItem></myAccordion.AccordionItem>
</myAccordion>
seem to work fine.
a) allow either index or title. Simple, but could mean an item called '0' and one with index 0 both selected
b) prop for activeItems to use index or title
c) convert activeItems to list of objects
Right now I just have a single AccordionItem
:
<Accordion style={STYLES.search} activeItems={-1}>
<AccordionItem title='Search Form'>
<SearchForm />
</AccordionItem>
</Accordion>
I added the activeItems={-1}
and it renders closed as expected. The problem is, when I expand it and click on a form component (right now there is only a single text field), it closes immediately. If I remove the activeItems={-1}
, it renders opened, but I am able to click on the text field without the AccordionItem
closing.
I am using version 0.1.0.
I think due to using scrollHeight
demo of differences here
Is anyone having a problem with the expanded
prop? It seems like it's always being overwritten to false
.
I'm getting this error on render
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of ...
I'm importing it like this: import { Accordian, AccordianItem } from 'react-sanfona';
and it seems as though both Accordian
and AccordianItem
are undefined. I've tried other ways of importing (seen in previous issues) but nothing seems to work.
I'm using version 0.1.0.
I think .npmignore
needs the contents of .gitignore
+ other folders
OnChange is only callback. You can't prevent from modifying state
#131
Hi.
Got a problem with displaying accordion, no matter what I do I always end up with an : Uncaught TypeError: Cannot read property 'slug' of undefined
. If I replace accordion with my own component everything goes smoothly. If I click second time on the link to faqs I got : Uncaught TypeError: Cannot read property 'getHostNode' of null - ReactReconciler.js:64
Anyone ?
const faqsList = !isLoaded(faqs)
? 'Loading'
: isEmpty(faqs)
? 'Faqs list is empty'
: Object.keys(faqs).map(
(key, id) => {
<AccordionItem title={key} key={key} id={id} slug={key} >
<div> {faqs[key]} </div>
</AccordionItem>
}
)
return (
<div>
<h1>FAQS</h1>
<Accordion
allowMultiple={true}
>
{faqsList}
</Accordion>
<input type="text" ref="newFaq" />
<button onClick={handleAdd}>
Add
</button>
</div>
)
200,00 руб.
transforms to 200,00 ⃏
See https://facebook.github.io/react/index.html
After upgrading to [email protected] npm starts complaining:
npm WARN [email protected] requires a peer of react@^0.14.3 but none was installed.
Patch example: react-grid-layout/react-grid-layout@ef335bc
(not submitting a PR since I don't know whether it is just about changing a version or there should be some modifications in the code too)
Hi,
I tried to use react-sanfona in my project but, getting the bellow warning in browser console
You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure
I followed the example that is in demo folder.
can you please let me know how to resolve this?
I have something like this.
handleDeleteUser = (e) => {
if (this.state.confirm) {
this.setState({
confirm: false
})
} else {
this.setState({
confirm: true
})
}
}
...
<button type='button' id={id} onClick={this.handleDeleteUser}>
{this.state.confirm ? 'Really?' : 'Delete'}
</button>
Setting state within the handler closes all open accordions. Any ideas why?
the max-height property on react-sanfona-item-body class is causing major problems in case anything needs to be expanded within the sanfona item body, or in case the browser window changes size and the body needs to accommodate for it, causing it to overflow.
Hi, I upgraded to latest version of react-sanfona(0.1.0) and my onClose and onExpand events are not working as expected, when I try to open an AccordionItem it closes by itself. below is the code snippet.
<AccordionItem id={"test"+c} uuid={"test"+c} onClose={() => this.hideItem(value)} onExpand={() => this.showItem(value)} title={value} slug={c} key={id} allowMultiple={true} expanded={true}>
Thank you
Is there a way to not have the accordion not close when I am clicking on form elements like a select option? Every time I click a header to open up and there is a select option element inside the content container, I try to click on it and the accordion then closes.
onExpand doesn't return a key of accordion item, I want to know the slug key of expended accordion item.
I did it by my self just added to accordionItem/index.js
handleExpand() {
const {onExpand, # slug} = this.props;
this.startTransition();
this.timeout = setTimeout(() => {
this.setState({maxHeight: 'none', overflow: 'visible'});
if (onExpand) {
onExpand(# slug);
}
}, this.state.duration);
}
Now onExpand callback is running with slug value.
Could you add that to repo?
Thanks.
achei massa você testar o component em si, e não só a integração (Stores/Actions etc),
https://github.com/daviferreira/react-sanfona/blob/master/src/AccordionItemTest.jsx#L16-l51
vi muita gente dizendo que testar o componente em sí, não é muito viável (até relacionaram com teste end-2-end),
cheguei a trocar uma idéia com o Dan Abramov e até vi alguns argumentos do Ryan Florence, dizendo que, realmente, eles preferem testar outras partes ao invés do componente em si,
e, tirando uma conclusão de suíte de testes para app's em React:
Estou caçando argumentos e exemplos para isso e tentar achar um mmc,
Atualmente, também uso Mocha, e testo apenas a integração e não o componente,
Queria sua opinião sobre 👍
When I try to put the AccordianItem component separate from the Accordian component, the AccordianItem doesn't expand. For example, my render function of the AccordianItem is defined as:
import { AccordionItem } from 'react-sanfona';
export default class Learnable extends Component {
....
render() {
return (
<AccordionItem title={this.props.tags[0]} key={this.props.learnableid} >
<div>
{this.props.text}
</div>
</AccordionItem>
);
}
}
and then my Accordian is defined as:
import Learnable from './Learnable';
import { Accordion } from 'react-sanfona';
export default class LearnableList2 extends Component {
...
render() {
const { learnables } = this.props;
const learnablesList = learnables.map((learnable) => <Learnable key={learnable.id} learnableid={learnable.id} text={learnable.text} tags={learnable.tags} />);
return (
<Accordion allowMultiple >
{learnablesList}
</Accordion>
);
}
}
When I do this, only the title of each AccordianItem shows up, but if I try to expand the item, it doesn't expand.
However, if I put the Accordian and AccordianItem in one file like you do in the demo examples, it works perfectly.
Is there anything I'm doing wrong?
When you implemented the new feature to allow for all items to be expanded on initial render, I think it broke your first example in your demo (which should constrain the accordion to only show one accordion item at a time, right?). Now, it behaves in the same way as your "Allow Multiple" example.
This is quickly becoming the best react accordion component imo. Keep it up!
when webpack tries to run on any files where i have required('react-sanfona') i get the following errors:
ERROR in /home/mpbill/NodeTest//react-sanfona/dist-modules/AccordionItem/index.js/react-sanfona/dist-modules/AccordionItem/index.js 31:18-39
Module not found: Error: Cannot resolve module 'classnames' in /home/mpbill/NodeTest/node_modules/react-sanfona/dist-modules/AccordionItem
@ /home/mpbill/NodeTest/
ERROR in /home/mpbill/NodeTest//react-sanfona/dist-modules/AccordionItem/index.js/react-sanfona/dist-modules/AccordionItem/index.js 39:12-27
Module not found: Error: Cannot resolve module 'uuid' in /home/mpbill/NodeTest/node_modules/react-sanfona/dist-modules/AccordionItem
@ /home/mpbill/NodeTest/
any ideas?
eg:-
<AccordionItem
className={ styles.accordian }
style={{ fontSize: '12px' }}
title={`Item ${ item }`}
key={item}
>
...
</AccordionItem>
It would be really useful to add an event handler that would trigger when a set of active items has changed. I was going to use it to save the state of the accordion to my global state objects so that the clients that are looking at the same page could always be in sync.
Could you please add this feature? There should not be much to write.
Hello
https://github.com/daviferreira/react-sanfona/blob/master/src/AccordionItem/index.js#L89
I have an AccordeonItem with images inside, tooltips, and <react-select>
components.
It used to work in version 0.0.15
. I've just updated to 0.0.4
. Because of the line above, the tooltips and the <react-select>
are always truncated because of the overflow.
Is there any reason for forcing this value to hidden
instead of using a check like on:
https://github.com/daviferreira/react-sanfona/blob/master/src/AccordionItem/index.js#L76
?
I think this needs to be republished to NPM. The package.json
I'm getting back after npm install
has react and react-dom set to version 0.14.0
, while the source on Github has it at ^0.14.2
. This is preventing me from being able to try out your project since I have React 0.14.3, and the peer dependencies aren't being fulfilled.
The current latest release doesn't work in a module-less environment (i.e. included by a <script>
tag) due to ReactDOM missing from webpack externals.
Would be nice to have a new release based on #83 so I could update my dependencies.
Thanks!
etc.
When using ES6, it is required to write two lines of code to import the React components:
import ReactSanfona from 'react-sanfona';
const { Accordion, AccordionItem } = ReactSanfona;
It would be nice if this could be done in a more standard way, like this:
import { Accordion, AccordionItem } from 'react-sanfona';
E.g. like in react-grid-layout
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.