valentinndimitroff / ra-compact-ui Goto Github PK

Enhanced components for popular framework react-admin. Helps reducing the styling boilerplate code and eases layout customizations.

License: MIT License

JavaScript 100.00%

react-admin material-ui reactjs styling

ra-compact-ui's People

Contributors

Stargazers

Watchers

Forkers

liotru iomier gursimran0410 shessafridi trodery joebordes silver-saint cadetstar jfacoustic wixsl jtomaszewski freddyseubertnio iambouamar gastonbesada mhmdali15 guillemfondin cleveratben luigimorel notz

ra-compact-ui's Issues

Example of working code

Hi,
I really like the work you made, but it's difficult to understand how to use this package.
If you could provide an example of code I would really appreciate.

Thanks

Update Readme with fields info

Add readme section for fields info.
Fix FullNameField source

[Feature] CompactFormIterator

From SimpleFormIterator
https://marmelab.com/react-admin/Inputs.html#arrayinput

Custom Fields using Controller Props are not working in BoxedShowLayout

<ShowController {...props} component="div">
        {(controllerProps) => 
            <ShowView {...props} actions={<TaskShowActions />} {...controllerProps}>
                <BoxedShowLayout>
                  <RaBox display="flex">
                    <RaBox
                      display="flex"
                      flexWrap="wrap"
                      flexGrow={4}
                      className={classes.detailsBox}
                    >
                      <RaBox
                        flex="0 0 100%"
                        display="flex"
                        justifyContent="space-between"
                      >
                        <TextField label="Task Id" source="taskId" />
                        <TextField
                          label="Task Type"
                          source="taskTypeDisplayName"
                        />
                        {controllerProps.record &&
                          controllerProps.record.taskType ===
                            "order_management_task" && (
                            <TextField
                              label="Customer Name"
                              source="customerName"
                            />
                          )}
                        {controllerProps.record &&
                          controllerProps.record.taskType ===
                            "order_management_task" && (
                            <TextField label="Phone Number" source="phone" />
                          )}
                      </RaBox>
                    </RaBox>
                  </RaBox>
                </BoxedShowLayout>
            </ShowView>
        }
      </ShowController>

TypeError: Cannot read property 'source' of undefined

React-Admin 4.0 support

Would you accept a PR to add support for 4.0?

CompactForm throws error in production when child is a function

I have the following piece of code, aligned to a material ui stepper which works perfectly in Development.

                <CompactForm layoutComponents={[RaBox]} toolbar={buttons()} {...props}>
                    <FormDataConsumer>
                        {({ formData, ...rest }) => getStepContent(activeStep, formData)}
                    </FormDataConsumer>
                </CompactForm>

However when I move it to production I get an error thrown in CompactFormView at this point variant={x.props.variant || variant} because x.props isnt a thing for the child function.

Feature Request: replacement tab component

It would be nice to have a component to replace the Original React-Admin Tab component so that we could render custom layouts within

Currently the labels of fields do not show up as the Original Component has no knowledge of the custom layouts

maximum update depth exceeded when pressing enter on a multiline TextInput

This issue not present in V1.0.14, I haven't checked V1.0.15 but it's present in the latest version
The expected behaviour is enter should add a line break but instead the component freezes.

React does not recognize the `basePath`

I get the following error when I use boxedshowlayout:

Missing `key` parameter?

When using code like this:

<CompactShowLayout layoutComponents={[DetailCard]}>
    <DetailCard>
      <TextField label="Street Name" source="address.streetName" />
      <TextField label="Suburb or Town" source="address.suburb" />
    </DetailCard>
</CompactShowLayout>

We get following error:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `DetailCard`. It was passed a child from CompactShowLayout. See https://fb.me/react-warning-keys for more information.
    in RaField (created by CompactShowLayout)

Looking by react tree, seems like key is not passed to RaField when a field is wrapped in it? Maybe this line https://github.com/ValentinnDimitroff/ra-compact-ui/blob/master/src/details/CompactShowLayout.jsx#L39 should accept and pass over the props from https://github.com/ValentinnDimitroff/ra-compact-ui/blob/master/src/core/recursiveMethods.js#L38, or at least the props.key .

BoxedShowLayout doesn't work

Hi,

Really nice work but when I try to use the BoxedShowLayout with RaBox nothing happens. Maybe I did something wrong. On the other hand the grid works perfectly.

import React from "react";
import { Show, TabbedShowLayout, Tab, TextField } from "react-admin";
import { GridShowLayout, RaGrid, BoxedShowLayout, RaBox } from "ra-compact-ui";

export default function TestRunShow(props) {
  return (
    <div>
      <Show {...props}>
        <TabbedShowLayout>
          <Tab label="Summary">
            <BoxedShowLayout className="boxedShowLayout">
              <RaBox display="flex">
                <RaBox display="flex" justifyContent="space-between">
                  <TextField source="status" />
                  <TextField source="reference" />
                </RaBox>
              </RaBox>
            </BoxedShowLayout>
            <GridShowLayout className="gridShowLayout">
              <RaGrid container direction="row">
                <RaGrid item xs>
                  <TextField source="status" />
                </RaGrid>
                <RaGrid item xs>
                  <TextField source="reference" />
                </RaGrid>
              </RaGrid>
            </GridShowLayout>
          </Tab>
        </TabbedShowLayout>
      </Show>
    </div>
  );
}

Any idea ?

Example:

<RaBox flexGrow={4} display='flex' flexDirection='column'>
  <TextField source='title' />
  <TextField source='subtitle' />
</RaBox>

The code above produces following error in console:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Styled(MuiBox)`. It was passed a child from CompactShowLayout. See https://reactjs.org/link/warning-keys for more information.

But if it is a single field in each RaBox, no warnings.

Example:

<RaBox flexGrow={4} display='flex' flexDirection='column'>
  <RaBox>
    <TextField source='title' />
  </RaBox>
  <RaBox>
    <TextField source='subtitle' />
  </RaBox>
</RaBox>

It would be amazing if this minor issue can be fixed.

Thanks!

Support for react ^17?

Will this be updated for use with React 17?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"^4.11.0" from the root project
npm ERR!     peer @material-ui/core@"^4.x" from [email protected]
npm ERR!     node_modules/ra-compact-ui
npm ERR!       ra-compact-ui@"*" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.x" from [email protected]
npm ERR! node_modules/ra-compact-ui
npm ERR!   ra-compact-ui@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.