atanasster / grommet-controls Goto Github PK

View Code? Open in Web Editor NEW

57.0 57.0 17.0 31.4 MB

grommet 2 controls

Home Page: https://grommet-controls.netlify.app

License: Apache License 2.0

JavaScript 0.98% TypeScript 99.02%

grommet grommet-ux-library nextjs react ui-components

grommet-controls's People

Contributors

Stargazers

Watchers

Forkers

alansouzati livike pump007 jklapacz innhof amplifysa anoopadvaitha gimchunyong livefreeandroam abbasmeeran bartv2 didoesdigital dreamerin osiloke prabodh-hyd iamjeerge

grommet-controls's Issues

Extra icon with PasswordInput control

When I start typing into PasswordInput field, I see two icons
https://grommet-controls.netlify.app/docs/input-passwordinput--main

Email input skips ‘.’

When I type @ in an address, the cursor skips to after the dot, not just after the ‘@‘

PagingTable, bottom page number button and input text is not working as expected

Expected result

OnChange of Page number in the input text, it has to update the page number.
OnClick of + or - icon it should increase or decrease the page number.
These above are not working.

Heroku demo page gets a 500 error when following link from github

If I go to https://grommet-nextjs.herokuapp.com/ and click Controls, I get to https://grommet-nextjs.herokuapp.com/add-ons and it's a working page with controls showing on it.

However if I click the link from the github repo, or if I paste the add-ons url into a browser, I get a 500 error page.

Weird, right?

Documentation is dead

When entering https://grommet-nextjs.herokuapp.com, a heroku app error appears.

PagingTable Column decorations

Thank you very much for this library, very good work!!

I was using a previous version of grommet-controls and now I have updated to the last version and the column align cell decorations stop working.
This is part of the columns definition code:

....
{
   Header: 'Unit Price',
   accesor: 'price',
   decorations: {
     cell: {
       align: 'end',
     },
   },
},
.......

I am missing something?

DateInput: would like to control icon size and position (padding)

I like this DateInput control very much, only I can't set my ducks in a row.
See the picture.

I would like to set a smaller calendar icon in a position and with a size aligned with the icons of the other controls below.

Additionally, there is an issue with the "size" prop, that along the Grommet controls lineup is applied to the control's size but in this one it is applied to the size of the drop. This might be a source of confusion in the future when this stuff is used by millions.
Maybe this prop should follow the Grommet Select's pattern and be dropSize.

In a component of mine, which has an icon, I pass an icon prop that is an object and inside that object I can control as many icon properties as I want to.
Being that Grommet has a relevant icons set, this might be useful in this DateInput and in any other artifact where an icon is part of the thing.

The PasswordInput component do not change to the hidden icon when is type password

The Component fully works, but with this "bug"

VerticalMenu does NOT re-render when we add a widget in an existing item

If you have a VerticalMenu that is rendered and you decide to add a widget to one of the item, widget won't be re-render.

It is because of this line:

grommet-controls/src/components/VerticalMenu/VerticalMenu.tsx

Line 128 in 1046e93

items.toString() !== stateItems.toString()

Here we compare the toString of 2 array that twill in fact compare something like

[object Object],[object Object] !== [object Object],[object Object]

So if we have the same number of items it will not be re-render. I think in most cases comparing the instance is better as we often have immutable objects, so if content change the whole oject has changed. And if you want to support mutable array, then you can compare instance and when instance is identical then do a deep compare of the array. Something like:

items !== stateItems || deepCompare(items, stateItems)

But of course deepCompare is perhaps too slow (but it is the problem of using mutable objects).

ReactTable needs to pass className for styled-components?

I noticed the following warning in the console when using PagingTable:

It looks like you've wrapped styled() around your React component (ReactTable), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

The styled-components docs say :

The styled method works perfectly on all of your own or any third-party components, as long as they attach the passed className prop to a DOM element.

I started poking around ReactTable, and because it is an aggregation of so many table components, it is not inherently obvious to me where to place this.

Any thoughts on this?

Is there support for selected/onSelected behavior for PagingTable?

It's generally nice to have a ability to select a row, such that there's visual feedback, complemented by some sort of onSelect callback, and possibly even a 'selected' field that returns the backing object/index/etc of the selected row.

Form onSubmit affects all the Form components

Hi, I've been using grommet-controls in a personal project where a have a Register form to add students to a database and then a List View where one can view and edit the students' info.

On my Register form I use the onSubmit function from the Form component but when I try to use it in another Form component it appears to be also using the data from the inputs of the other Form component.

Steps to reproduce
Using the example from grommet-controls page (https://grommet-nextjs.herokuapp.com/examples/grommet-controls/Form/_starter) I've found out that the problem happens and it takes information from other Form components of other examples.

const Demo = () => (
  <Box>
  <Form focusFirstChild={false} onSubmit={values => alert(JSON.stringify(values))}>
    <TextInputField label='Text' name='text' validation={[validators.required(), validators.minLength(8)]} />
  </Form>
  <Form focusFirstChild={false} onSubmit={values => alert(JSON.stringify(values))}>
    <TextInputField label='Text2' name='text2' validation={[validators.required(), validators.minLength(8)]} />
  </Form>
  </Box>
);

I tried using two different Form components and when one of them submits it takes the value of the other Forms.

Also I've been experiencing the same issue as in #12 and had to use an individual state for each component and handle the change in order to "remove" the readonly.

Best regards.

Grommer Controls website is broken

https://grommet-nextjs.herokuapp.com/

withTheme

with current grommet V2 all

import { withTheme } from 'grommet/components/hocs';

failed because

Attempted import error: 'withTheme' is not exported from 'grommet/es6/components/hocs'.

Seems it got a new home in

import { withTheme } from 'styled-components';

DateInput: Add locale to textinput

With this component, Calendar accepts a locale prop and render accordingly, the same should apply to text input, which shows the selected date. It should recognize locale as well.

filterByFocusable is removed in grommet release 2.11

filterByFocusable is used in the Form and PagingTable components. This makes at least the Form component unusable. It happened in PR grommet/grommet#3650.

Error on Blank icon

Hello, great set of grommet controls !!

I installed the controls with npm in my project, but when I try to use some of them I am gettins the following error:

./node_modules/grommet-controls/es6/components/PagingTable/components/ThComponent.js
Module not found: Can't resolve 'grommet-icons/Blank' in '/Users/luis/desarrollo/nextjs/grommet-dashboard/node_modules/grommet-controls/es6/components/PagingTable/components'

I solved by copying the Blank.icon in the grommet-icons folder, but if install the components in another project the I am getting the same error.

I am doing something wrong?

Error after an install and trying to use

Hi,
I installed grommet-controls and when I tried to use it I got the following issue.

./node_modules/grommet-controls/es6/components/BarChart/BarChart.js
Module not found: Can't resolve 'react-chartjs-2' in 'C:\src\test\node_modules\grommet-controls\es6\components\BarChart'

[feature req] Dissociate scrolling of left and right side parts

These are a few suggestions on how I would implement the docs UI, based on my experience doing UX, or usability, you name it.
I remark that this is whet I would do, others might have better ideas.

While browsing the docs, the left menu col is the context, and the right hand bigger pane is the content.
Ideally the reader could switch her focus back and forth having a stable context.
As I see it, the context should change only under the user's control, and ideally using animations that give him time to notice what is happening and where. Abrupt changes convey a disturbing sense of "what did I break this time?!".

Another related suggestion is when the user clicks a menu item and it opens in the left-hand column but nothing happens in the right pane, like in the examples where the user is required to click [_starter] to get into.
For these cases when the menu just opens, is was customary to provide sort of a landing page (possibly blank, or with just a title, ideally with the list of the just-disclosed menu items with short descriptions added) so the user experiments the expected behavior: click the left to change the right. Clicking the menu and nothing happening on the right conveys a slight feeling of frozen UI.

One issue scroll dissociation fixes is the vertical scroll needed when there are many menu groups disclosed and the selected content appears in the (not visible) upper part of the content pane.
I thought the item was broken, until after a while I realized it was there but not visible.

Another advantage of the scroll dissociation would be to fix the unexpected appearance of a vertical scrollbar to the right of the viewport after opening the [> grommet] menu item in https://grommet-nextjs.herokuapp.com/examples.
In fact, that scrollbar actually belongs to the left hand column, the right content pane is innocent.

I like this pages and I think they are going to be quite useful. Additionally, I realize that this is very new, in fact, the best time to introduce changes. Congrats!

Nav to dead end

Firstly, great work! I'm impressed. Thanks a lot. :-)

Now, constructive feedback:
I found no escape hatch from
https://grommet-nextjs.herokuapp.com/documentation/grommet/Select?theme=black
after clicking "</> code".
Had to use the browser's back arrow.

CommonJS Exports for Jest?

Using create-react-app, when trying to test a component that uses the component from grommet-controls, I receive the following error:

Details:

    [project-directory]/node_modules/grommet-controls/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './components/Avatar';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      1 | import React from 'react'
      2 | import PropTypes from 'prop-types'
    > 3 | import Tag from 'grommet-controls'
        | ^
      4 | 
...

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/app/atoms/BankFlagTag/FlagTag/FlagTag.js:3:1)

As far as I can tell from other issues with similar errors, this library does not have a commonJS export which would allow Jest to read it properly.

How to remove style?

Hello. I used Color component.
If you look at the screenshot, button increases when mouse is over.
This button is so large that it is difficult to click on other buttons.
I want to remove the button zoom.
Is it possible?

DateInputField Uncaught TypeError: Cannot read property 'length' of undefined

Hello, I am trying to use the DateInputField with a spanish locale and I am getting the following error stack:

Uncaught TypeError: Cannot read property 'length' of undefined
    at t (textMaskCore.js?1693:1)
    at Object.update (textMaskCore.js?1693:1)
    at MaskedInput.initTextMask (MaskedInput.js?31b1:51)
    at MaskedInput.componentDidMount (MaskedInput.js?31b1:56)
    at commitLifeCycles (react-dom.development.js?61bb:17334)
    at commitAllLifeCycles (react-dom.development.js?61bb:18736)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
    at invokeGuardedCallback (react-dom.development.js?61bb:256)
    at commitRoot (react-dom.development.js?61bb:18948)
    at eval (react-dom.development.js?61bb:20418)
    at Object.unstable_runWithPriority (scheduler.development.js?3069:255)
    at completeRoot (react-dom.development.js?61bb:20417)
    at performWorkOnRoot (react-dom.development.js?61bb:20346)
    at performWork (react-dom.development.js?61bb:20254)
    at performSyncWork (react-dom.development.js?61bb:20228)
    at requestWork (react-dom.development.js?61bb:20097)
    at scheduleWork (react-dom.development.js?61bb:19911)
    at Object.enqueueForceUpdate (react-dom.development.js?61bb:11208)
    at Query.Component.forceUpdate (react.development.js?72d0:353)
    at Query._this.updateCurrentData (react-apollo.esm.js?e0a4:207)
    at Object.next (react-apollo.esm.js?e0a4:185)
    at notifySubscription (Observable.js?a7b2:130)
    at onNotify (Observable.js?a7b2:165)
    at SubscriptionObserver.next (Observable.js?a7b2:219)
    at eval (bundle.esm.js?74ca:427)
    at Array.forEach (<anonymous>)
    at iterateObserversSafely (bundle.esm.js?74ca:427)
    at Object.next (bundle.esm.js?74ca:402)
    at invoke (bundle.esm.js?74ca:1201)
    at eval (bundle.esm.js?74ca:1286)
    at eval (bundle.esm.js?74ca:1551)
    at Set.forEach (<anonymous>)
    at eval (bundle.esm.js?74ca:1549)
    at Map.forEach (<anonymous>)
    at QueryManager.broadcastQueries (bundle.esm.js?74ca:1547)
    at eval (bundle.esm.js?74ca:1638)
    at Object.next (Observable.js?a7b2:308)
    at notifySubscription (Observable.js?a7b2:130)
    at onNotify (Observable.js?a7b2:165)
    at SubscriptionObserver.next (Observable.js?a7b2:219)
    at eval (bundle.esm.js?74ca:858)
    at Set.forEach (<anonymous>)
    at Object.next (bundle.esm.js?74ca:858)
    at notifySubscription (Observable.js?a7b2:130)
    at onNotify (Observable.js?a7b2:165)
    at SubscriptionObserver.next (Observable.js?a7b2:219)
    at notifySubscription (Observable.js?a7b2:130)
    at onNotify (Observable.js?a7b2:165)
    at SubscriptionObserver.next (Observable.js?a7b2:219)

Mi code is:

<Form onSubmit={onSubmit} object={client} basis="full">
                <DateInputField
                  autocorrect
                  locale="es-ES"
                  label="Ingreso"
                  name="startDate"
                  validation={[validators.required('Seleccione fecha de ingreso')]}
                />
</Form>

And I am initializing the client object like this:

  state = {
    client: {
      startDate: smallDate(new Date(), 'es-AR'),
    },
  }

If I remove the locale 'es-AR' all work as expected, but I need to use the spanish date format (DD/MM/YYYY).
Any advice on this?

Layout breaks at ridiculously narrow width

In the last property "size" the smaller images overlap the options at 1500px width.

Additionally, the [</> Code] button appears aligned on the left side of the samples, which makes it appear in different positions for each case. We humans rely a lot on the places where things are "stored" and mumble when others move them.

the nextjs website is down

Heroku demo website is down again

DateInput displays invalid date string

DateInput supposedly takes either an ISO date string or a JS Date object. No matter what I give it, however, the placeholder string is completely wrong - seems like an issue with whatever is parsing/constructing strings. eg.:

const Demo = () => (
  <DateInput
    defaultValue={new Date("2018-01-08T15:44:30.000Z")}
    placeholder='DD/MM/YYYY'
  />
);
render(<Demo />);

displays this incorrect date string:

and passing it as an ISO string:

const Demo = () => (
  <DateInput
    defaultValue={"2018-01-08T15:44:30.000Z"}
    placeholder='DD/MM/YYYY'
  />
);
render(<Demo />);

yields a different but also incorrect result:

(in both cases, i expect 01/08/2018 to display. I'm using this demo page to test: https://grommet-nextjs.herokuapp.com/examples/grommet-controls/DateInput/_starter )

DateInput maskFormat and cal picking produce an error

If I specify an alternative maskFormat from the defaule, as in the example below, I get an error if I use the datepicker and I select a day that is above 12. If I select a day before 12 the date is in the wrong format (i.e. mm dd yyyy).

Manual input of the date with autocorrect enabled works correctly.

<DateInput placeholder="JJ/MM/AAAA" autocorrect={true}
maskFormat="dd mm yyyy"
locale="fr-FR" value={resource.date_to}
onChange={({ target: { value } }) => this.handleChange('date_to', value)} />

The exception is not very meaningful, it happens in the MaskedInput component and it is:
TypeError: s is undefined

Form items is readonly

Hello again, I am trying to use the form to edit data using the Form component with object property, but when I load the data from the database the form turns read only.

The same is happening with your sample here:
https://grommet-nextjs.herokuapp.com/examples/grommet-controls/Form/object
And also with this sample:
https://grommet-nextjs.herokuapp.com/examples/grommet-controls/Form/profile
with this last one, the first time the page load it work as expected, but if you switch with other sample and back again, then the form turns readonly.

Any help would be much appreciated.

Can't enter a number with fractional parts

Hi,
I am testing NumberInput and I can't enter fractional digits from the keyboard. When I copy and paste it works. What's the expected behavior here?

Strorybook freezes when trying to switch between menu items

Not sure, if this is happening to me, but when I switch from one menu item to another, the whole storybook freezes. It takes some time to recover.

Broken on IE 11

Since version 3.0.1, grommet-control is broken on IE 11.572.19041.0.

Error :
SCRIPT1002: Syntax error

On the following file :
/***/ "./node_modules/grommet-controls/dist/components/Avatar/Avatar.js": /*!************************************************************************!*\ !*** ./node_modules/grommet-controls/dist/components/Avatar/Avatar.js ***! \************************************************************************/ /*! exports provided: Avatar */

Yours faithfully,
LCDP

How to make a customized <Card /> reusable?

Hi, suppose I want to customize all my <Card /> components to have the following
properties:

    background='brand'
    border={{ color: 'card' }}
    elevation='none

How can I do that without repeating myself by injecting those attributes to all my <Card /> components? I am attempting to do something like the following

// Card.js
import React from 'react'
import { Card } from 'grommet-controls'

export default props => (
  <Card background='brand' elevation='none' border={{ color: 'card' }}>
    {props.children}
  </Card>
)

Then I can import Card from Card.js instead of 'grommet-controls' but then I loss access to all the Card.* sub components that comes with 'grommet-controls'. I am thinking about using HOC but not sure how to do that. Please advise. Thanks.

TextAreaField can not fill area

TextAreaField with fill='true' does not fill area.
In the next example TextAreaField is still small.

<Box height='medium'>
<TextAreaField fill='true' name='description'  />
</Box>