Open romanlex opened 3 years ago
Can you please provide an example of a component, which shows this behavior?
I am Also Facing the Same Issue
import Select from 'react-select';
import React from 'react';
import * as R from 'ramda';
import PropTypes from 'prop-types';
import { checkForDisabled } from './utils';
const renderTitle = (schema) => (
<div className="listhed flex align-center justify-space-between">
<h5 className="fs-12">{R.pathOr('', ['title'], schema)}</h5>
</div>
);
const renderSelect = (row, data, onRowChange) => (
<Select
className="w-220 custom_select singleselect selt-drosrch"
value={data[R.pathOr('', ['id'], row)]}
getOptionValue={(option) => option.label}
onChange={(e) => onRowChange(e, R.pathOr('', ['id'], row))}
options={R.pathOr([], ['options'], row)}
defaultValue={R.pathOr('', ['defaultValue'], row)}
isClearable
placeholder={R.pathOr('', ['placeholder'], row)}
/>
);
const renderFields = (row, data, onRowChange) => {
switch (R.pathOr('', ['type'], row)) {
case 'select': return renderSelect(row, data, onRowChange);
default: return null;
}
};
const renderBody = (schema, data, onRowChange) => R.pathOr([], ['rows'], schema).map((row) => (
<div className="flex justify-space-between margn m-b-10" key={row.id}>
<p>
{R.pathOr('', ['name'], row)}
{
R.pathOr(false, ['isRequired'], row)
&& <span className="p-l-5 required">*</span>
}
</p>
{renderFields(row, data, onRowChange)}
</div>
));
const renderButton = (schema, data, onClick) => (
<button
className="m-t-10 bluebtnn btn"
type="submit"
onClick={() => onClick()}
disabled={checkForDisabled(schema, data)}
>
{R.pathOr('', ['button', 'title'], schema)}
</button>
);
const CustomFilterModal = ({
schema, onRowChange, onButtonClick, data,
}) => (
<div className="selct-listt productdata_wrap">
{renderTitle(schema)}
<div className="bodylistt m-t-20 m-b-20">
{renderBody(schema, data || {}, onRowChange)}
</div>
<div className="flex justify-flex-end p-r-15 m-b-10 m-t-20 b-top border-light">
{renderButton(schema, data || {}, onButtonClick)}
</div>
</div>
);
CustomFilterModal.propTypes = {
schema: PropTypes.shape({
title: PropTypes.string,
rows: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
name: PropTypes.string,
type: PropTypes.string,
options: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string,
label: PropTypes.string,
value: PropTypes.string,
})),
defaultValue: PropTypes.string,
placeholder: PropTypes.string,
isRequired: PropTypes.bool,
})),
button: PropTypes.shape({
title: PropTypes.string,
}),
}),
onRowChange: PropTypes.func,
onButtonClick: PropTypes.func,
data: PropTypes.object,
};
CustomFilterModal.defaultProps = {
data: {},
schema: {},
onButtonClick: () => {},
onRowChange: () => {},
};
export default CustomFilterModal;
Hi, the issue is due to styleguidist resolver. so i included,
propsParser (filePath, source, resolver, handlers) { const reactDocgen = require('react-docgen'); return reactDocgen.parse(source, reactDocgen.resolver.findAllComponentDefinitions, handlers); } in my styleguide.config.js and it worked.
https://react-styleguidist.js.org/docs/configuration#propsparser
For me helped not propsParser
as @HariAbinesh mentioned, but resolver
.
Just include in styleguide.config.js
:
resolver: require("react-docgen").resolver.findAllComponentDefinitions,
I have multiple errors with same types when trying build docs with styleguidist
Production mode doesn't work, development mode work properly. Use react 17 with new jsx transform.
Source from production build
Browser error
bundle.41681933.js:formatted:33543 Uncaught TypeError: Object(...) is not a function
Main app with same config (webpack+babel) work properly in dev and prod mode