kaihotz / react-formik-ui Goto Github PK

Version
4.0.5

Mode
The mode you are using React-Formik-UI in,
[Structured]

Describe the bug

A formik with initial values like this:

<Formik
            initialValues={{ name: '', dueDate:'', priority: 0}}

A select like this:

<Select
                    name='priority'
                    label='Priority'
                    placeholder='Select a priority'
                    options={[
                        { value: 0, label: 'Low' },
                        { value: 1, label: 'Normal' },
                        { value: 2, label: 'High' }
                    ]}
                />

... integer values are being converted to string during form submit.

onSubmit={(values, { setSubmitting }) =>
            {
                // here values.priority is a string like "0" and this is breaking the POST operation because my backend is expecting an int when doing `JSON.stringify(values)`.
}

A workaround I used just before doing JSON.stringigy(values) was this:

values.priority = parseInt(values.priority)

Expected behavior
As values are integer when defining the Select element it should assign int values during form submit as I understand it. Maybe I'm wrong...

Desktop (please complete the following information):

• OS: [Mac OS]
• Browser [chrome]
• Version [79.0.3945.130]

Awesome lib, love it! Makes everything so much easier with my forms ❤️

I would love to have types added to this library though. I just recently started using TS so I'm not sure how important it is, but I think it would be nice to be able to skip using // @ts-ignore

<Select
name='coach'
label='Coach Name'
placeholder='Select Coach'
options={coaches}
onChange={(value)=>{console.log(value)}}
required
/>

doesnt log value... please help

styled components with Bootstrap 4 not working

Hi how do I integrate get image file api request from the aws s3 bucket on to the dropzone, I don't have any clue how to make this, could any one help?

Version
The version of React-Formik-UI that you are using : "react-formik-ui": "^2.3.17"

Mode
The mode you are using React-Formik-UI in,
[Default]

Describe the bug
It is working in Browser, but gives syntax error in TestCases:
app/systems/components/react/SystemStartMonitoring.jest.jsx
● Test suite failed to run

/data/frontend/node_modules/react-formik-ui/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React__default, { useState, Fragment, createElement, Component, forwardRef, useEffect, useRef, useReducer, useCallback, useMemo, createRef } from 'react';
                                                                                                ^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  3 | import { connect } from 'react-redux'
  4 | import { Form, Datepicker } from 'react-formik-ui'
> 5 | import { pick, isEmpty } from 'lodash'
    |                                                                     ^
  6 | import { t } from 'ttag'
  7 | import { nl } from 'date-fns/locale'
  8 | import { Formik } from 'formik'

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:451:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:493:19)
  at app/systems/components/react/SystemStartMonitoring.jsx:5:87
  at Object.<anonymous> (app/systems/components/react/SystemStartMonitoring.jsx:13:3)

Version
The version of React-Formik-UI that you are using

Mode
The mode you are using React-Formik-UI in,
[Default]

Describe the bug
when I press backspace or left arrow, the whole input is cleared

To Reproduce
Steps to reproduce the behavior:

1. Go to '#'
2. Click on 'Phone number'
3. Scroll down to 'Phone number'
4. See error

Expected behavior
Type in a number then try to correct it, you will notice that it clears the entire input

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Can be reproduced on page https://kaihotz.github.io/react-formik-ui/#datepicker so I left out the more detailed bug report. Is this a "feature"?

The className Props for Dropzone doesn't work. the div always comes with 'dropzone' class and I can`t change the style.
I want to change box of the dropzone but it is fixed by this dropzone class

<div tabindex="0" class="dropzone">

I want to put 2 INPUT site by side and below then other 2 within the FIELDSET.

Like:

NAME: XXXX LASTNAME: XXXX
AGE: XXXX GENDER: XXXX

Is it possible to do?

Documentation can be improved with an example on how to implement FieldArray with formik-ui.
Could be a huge time saver for some developers

I need enable timepicker too for my date picker but its always selecting 12:00 AM , looks like its not supporting time.

<Datepicker
                            showTimeSelect
                            timeFormat="HH:mm"
                            timeIntervals={30}
                            dateFormat="DD.MM.YYYY hh:mm a"
                            timeCaption="time"
                            required
                            name="valid_from"
                            label='Valid From'
                            minDate={new Date()}
                            maxDate={this.addMonths(10)}
                            />

Is your feature request related to a problem? Please describe.
Slightly related to an issue where it would be ideal for the file info message (e.g. X files acepted, Y files rejected) to reset to 0 when you press the Clear Files button.

Describe the solution you'd like
Also, the component should take an errors property similar to other Formik components for easy error message rendering using the out-of-the-box component provided by Formik. Finally, another prop should be something like maxFileSize as there is currently no way to check the file size of a file and reject if its too big.

Hi I want to send only the changed values over to the API call, is there a way to send only the changed field values over a api put request? (is there a prop like dirty?)

Hi,

how can i turn off the "Accepted 0, rejected 0 files"? I appreciate it.

Best regards,

Ian

Is possible have a input mask with this : 999.999.999-99

some example in the documentation

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

First of all, thank you for creating this library for formik.
I have noticed that react-formik-ui does not work with current version of formik, so do you plan to support it?
Or do you accept PRs? If no, do you mind if I fork this repo and publish my own version of it on npm?

Version
^4.0.5

Mode
All

Describe the bug
Using DropZone, if the filed name is a nested field that application fails. For example:

{
    files1: {
       files2[]
    }
}

To Reproduce
use the code below:

import { Formik } from 'formik'
import { Form, DropZone } from 'react-formik-ui';

<Formik
  initialValues={{
    files1: {
       files2[]
    }
}}
  onSubmit={data => (alert(JSON.stringify(data)))}
>
  <Form>

    <DropZone
      name='files1.files2'
      label='File upload'
      placeholder='Try dropping some files here, or click to select files to upload.'
    />

  </Form>
</Formik>

Expected behavior
nested values should be set

Additional context
The issue is at src/lib/components/DropZone/DropZone.js line 29

const files = multiple ? values[name].concat(dropedFiles) : dropedFiles

if the name is "files1.files2" of course values["files1.files2"] return undefined.

Can you please fix this?

Thanks

Hi @KaiHotz,

I'm considering using react-formik-ui for a project, so first, thanks for putting this together, it looks really handy.
A concern of mine though, is that, down the line, I'd like to be able to provide custom styling/components to every pieces of UI, including label & hint or error messages which currently aren't easily styled when one's using CSS-in-Js setup.

I'm thinking of something as simple as

 <Input
  name='nameExample'
  label={<Label>Name</Label>}
  required
/>

The withLabel HoC could handle both being given a component or a string and act accordingly.

Would you consider a PR that would add such possibilities?
If so I could allocate some time to work on that in the future.
Thanks

is there a way to change the background color of the dropzone component?

I want to change the color of the line to red. How do i do it ?

const customzedInput = {
background: 'red !important',
}

<Input
className='customzedInput'
required='true'
name='Street Address'
label='Street Address'
// style=''
/>

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
created a class with fullwidth true, passed the same to className,
Input text field full width is not coming.

Version
react-formik-ui: 2.2.0
react: 16.8.1
Mode Default

Describe the bug
On Firefox, selecting a date in the DatePicker crashes the whole app.
On Midori browser (Webkit based) it is even worse. It crashes when we clic on the input.
Apparently it is a known issue in react-datepicker
Hacker0x01/react-datepicker#1565

To Reproduce

1. Create a component

import React from 'react'
import { Formik } from 'formik'
import { Form, Datepicker } from 'react-formik-ui'

export default () => {
  return (
    <Formik initialValues={{ date: null }} onSubmit={data => {}}>
      {() => (
        <Form>
          <Datepicker name="date" />
        </Form>
      )}
    </Formik>
  )
}

2. Select a date if it does not crash right away

Desktop and Mobile (please complete the following information):

• OS: Linux but happens on deployed site
• Browser: Firefox and Webkit based
• Version: Firefox 65 for example

Can I use the theme style only on radio instead of entire form?

I am using checkbox from react-formik-ui and it seems I am not able to access the onChange event of this component after I recently updated my react-formik-ui from version 4.0.3 to 5.1.9 and updated formik from version 2.0.8 to 2.2.6.

Implementation of the checkbox:

import {Checkbox} from 'react-formik-ui';

const RenderCheckBox = ({properties}) => {
  return (
    <Fragment key={properties.name}>
      {!properties.isHidden &&
      <FormGroup key={properties.name}>
        <ControlLabel>{properties.label} {properties.required &&
        <span className="required"> * </span>} </ControlLabel>
        <Row>
          {properties.fields.map((element, key) => {
            return (
              <Field key={key} name={element.name}>
                {(props) => {
                  const {onChange: onChangeHandler} = element;
                  const {field, form} = props;
                  return (
                    <Col key={key} className={element.className}>
                      <Checkbox key={key}
                                name={element.name}
                                required={properties.required}
                                disabled={element.isDisabled ? element.isDisabled : false}
                                text={element.label}
                                checked={properties.fields ? properties.fields.find(option => option.value === field.value) : ''}
                                onChange={event => {
                                  console.log("onChange Ran!!")
                                  if (onChangeHandler) {
                                    onChangeHandler(event);
                                  }
                                  form.handleChange(event)
                                }}
                                onBlur={form.handleBlur}
                                value={element.value}
                      />
                    </Col>
                  );
                }}
              </Field>
            )
          })}
        </Row>
      </FormGroup>
      }
    </Fragment>
  )
};

I am not able to run the onChangeHandler through onChange event and even the console log is not coming.

Hello,

is there a way to allow single file uploads only and update the preview ?
onDrop cabllack is not working.

solution ?

• add onDrop callback so we can configure it however we want it ?
• add multiple prop, and if its single don't concat values here
  const onDrop = acceptedFiles => { setFieldValue(name, values[name].concat(acceptedFiles)) setFieldTouched(name, true) }

or is there any other solution to this problem using DropZone from formik ui?

Hello, I would like to create a custom radio radio button using this library. I am curious if I can insert a <span> after the <input>, so I can style my own radio box?

Heres the full code.

[import React from 'react';
import { Formik } from 'formik'
import { Form, Input, SubmitBtn } from 'react-formik-ui';

import GetCashOfferButton from '../../components/GetCashOfferButton';

const GetCashOfferbtnStyle = {
background: '#f04134',
color: 'white',
};

export const BasicForm = () => (

<Formik
initialValues={{
textFieldExample3: '',
FirstName: '',
LastName: '',
}}
onSubmit={data => (alert(JSON.stringify(data)))}
render={() => (

  <Input
    required='true'
    placeholder='John Doe'
    name='FirstName'
    label='John'
    hint='This is a FirstName'
  />
  <Input
    required='true'
    name='LastName'
    label='LastName'
    placeholder='Doe P'
    hint='This is a LastName'
  />

  <Input
    name='Cell#'
    label='Cell#'
    hint='This is a Cell#'
  />

 <Input
    name='Email'
    label='Email'
    hint='This is a Email'
  />

<Input  
    name='Street Address'
    label='StreetAddress'
    hint='This is a Street Address'
  />

<Input  
    name='City'
    label='City'
    hint='This is a City'
  />

<Input  
    name='State+'
    label='State'
    hint='This is a State'
  />

<Input  
    name='Zip+'
    label='Zip'
    hint='This is a Zip'
  />

  <SubmitBtn name="yes" style={GetCashOfferbtnStyle} />

  <button  style={GetCashOfferbtnStyle} type="button"> Custom button  
  </button>


  <GetCashOfferButton />

</Form>

)}
/>
);

export default BasicForm;

](url)

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

The possibility of the on next version have a component multiple select

Facing this issue :

react-dom.development.js?cada:16543 Uncaught TypeError: Cannot read property 'handleSubmit' of undefined
    at _ (index.js?a197:1)
    at mountIndeterminateComponent (react-dom.development.js?cada:13380)
    at beginWork (react-dom.development.js?cada:13820)
    at performUnitOfWork (react-dom.development.js?cada:15863)
    at workLoop (react-dom.development.js?cada:15902)
    at renderRoot (react-dom.development.js?cada:15942)
    at performWorkOnRoot (react-dom.development.js?cada:16560)
    at performWork (react-dom.development.js?cada:16482)
    at performSyncWork (react-dom.development.js?cada:16454)
    at requestWork (react-dom.development.js?cada:16354)
_ @ index.js?a197:1
mountIndeterminateComponent @ react-dom.development.js?cada:13380
beginWork @ react-dom.development.js?cada:13820
performUnitOfWork @ react-dom.development.js?cada:15863
workLoop @ react-dom.development.js?cada:15902
renderRoot @ react-dom.development.js?cada:15942
performWorkOnRoot @ react-dom.development.js?cada:16560
performWork @ react-dom.development.js?cada:16482
performSyncWork @ react-dom.development.js?cada:16454
requestWork @ react-dom.development.js?cada:16354
scheduleWork$1 @ react-dom.development.js?cada:16218
scheduleRootUpdate @ react-dom.development.js?cada:16785
updateContainerAtExpirationTime @ react-dom.development.js?cada:16812
updateContainer @ react-dom.development.js?cada:16839
ReactRoot.render @ react-dom.development.js?cada:17122
(anonymous) @ react-dom.development.js?cada:17262
unbatchedUpdates @ react-dom.development.js?cada:16679
legacyRenderSubtreeIntoContainer @ react-dom.development.js?cada:17258
render @ react-dom.development.js?cada:17317
(anonymous) @ index.js?1fdf:26
./src/index.js @ index-e900d2c8cb926e7f7829.bundle.js:1
o @ index-e900d2c8cb926e7f7829.bundle.js:1
t @ index-e900d2c8cb926e7f7829.bundle.js:1
0 @ index-e900d2c8cb926e7f7829.bundle.js:1
o @ index-e900d2c8cb926e7f7829.bundle.js:1
./node_modules/@babel/runtime/helpers/extends.js @ index-e900d2c8cb926e7f7829.bundle.js:1
(anonymous) @ index-e900d2c8cb926e7f7829.bundle.js:1
client?54b4:77 

Package versions :
Formik : [email protected]
React Formik UI : [email protected]

I'm new to Formik and interested in react-formik-ui as it looks super helpful, but the example isn't working for me either in my own app, or when I set it up by itself in Sandbox Editor. Please see:

https://codesandbox.io/s/045v1vxpvl

Each field is throwing an error TypeError Cannot read property 'fieldname' of undefined

What's the best way to add a checkbox group?

Hi, how do I show the image from a url response in the dropzone created, I'm using a get api request to view data.

Version
React-Formik-UI @ 2.3.3 (same problem with any 2.3 patch)

Mode
The mode you are using React-Formik-UI in,
[Default]

Describe the bug
Didn't change anything and seeing this error

  16309 | var accepts = unwrapExports(dist);
  16310 | 
> 16311 | var supportMultiple = 'multiple' in document.createElement('input'); // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
        | ^
  16312 | // that MIME type will always be accepted
  16313 | 
  16314 | function fileAccepted(file, accept) {


  WebpackError: ReferenceError: document is not defined
  
  - index.js:16311 Module../node_modules/react-formik-ui/dist/index.js
    [lib]/[react-formik-ui]/dist/index.js:16311:1
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - sync-requires.js:9 Object../.cache/sync-requires.js
    lib/.cache/sync-requires.js:9:55
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - static-entry.js:9 Module../.cache/static-entry.js
    lib/.cache/static-entry.js:9:22
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - bootstrap:83 
    lib/webpack/bootstrap:83:1
  
  
  - universalModuleDefinition:3 webpackUniversalModuleDefinition
    lib/webpack/universalModuleDefinition:3:1
  
  - universalModuleDefinition:10 Object.<anonymous>
    lib/webpack/universalModuleDefinition:10:2
  
  - static-entry.js:103 Module._compile
    lib/.cache/static-entry.js:103:3
  
  - static-entry.js:115 Object.Module._extensions..js
    lib/.cache/static-entry.js:115:7

... Sorry I am going to be lazy on the description since I guess the error will be obvious for you to find. If it is not, tell me what to try or what to tell you @KaiHotz.

Additional context
This happens when building the website with GatsbyJS
Version 2.2.5 is going fine so I rolled back

Is it possible to define CheckBox group (e.g. multiple options mapping to the same value as array)

In case that is not currently supported, implementation proposal would be:

                <Checkbox name='valueName' label='Group label' 
                options={[
                        { value: '1', text: 'First option label' },
                         { value: '2', text: 'Secondoption label' },
                         { value: '3', text: 'Third option label' },
                      ]}
                      />

Btw, thank you for stunning lib!!!

Version
4.0.5

Mode
The mode you are using React-Formik-UI in,
[Structured]

Describe the bug
The title says it all.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://kaihotz.github.io/react-formik-ui/#datepicker and pick Structured Required
2. Click the Submit button
3. Is Required is shown
4. Pick a date in the datepicker
5. Is Required is still visible

Expected behavior
Is Required message should go away right after a date is picked

Desktop (please complete the following information):

• OS: [Mac OS]
• Browser [chrome]
• Version [79.0.3945.130]

Is your feature request related to a problem? Please describe.
I want to be able to import components individually like:

import DropZone from 'react-formik-ui/dist/components/DropZone'

because of multiple reasons:

• Importing react-formik-ui on NextJS yields the following error:

error - ./node_modules/flag-icon-css/css/flag-icon.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/react-flag-icon-css/module/styles.js

Running npm ls makes it clear that this is caused by the react-phonenr-input:

$ npm ls react-flag-icon-css
[email protected] /Users/jari/Work/[redacted]
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected]

...which is not even an component I'm going to use at this moment.

• Treeshaking, currently I'm only using DropZone, but now I get a lot of other components in my bundle that I'm not even gonna use.

Describe the solution you'd like
Currently, only the declarations get emitted for the individual components, not their respective JS files.
Let's also emit JS files.

Describe alternatives you've considered
I've copied the Dropzone file into my own codebase now, and that works fine, but I'd rather not do that.

Version
5.4.4

Mode
Structured
[Default, Structured or Themed]

Describe the bug
Form.d.ts IFormikUiFormProps Interface styling union has a typo for 'structure'.
Line reads: styling?: 'default' | 'structue' | 'theme';

To Reproduce
Copied Structured Form example code, https://kaihotz.github.io/react-formik-ui/#form

Is your feature request related to a problem? Please describe.
No.
Describe the solution you'd like
Phone and country fields are mandatory in many application process esp. in mobile application. User can select his/her country code from the list.

Describe alternatives you've considered
react-telephone-input

Additional context
Add any other context or screenshots about the feature request here.

Version
"react-formik-ui": "^3.0.12",

Mode
[Default]

Describe the bug
Can't load the PhoneInput

⚠️  Could not load source file "src/lib/components/PhoneInput/styles.scss" in source map of "node_modules/@cm-pdsa/styleguide/dist/index.js".
⚠️  Could not load source file "src/lib/components/PhoneInput/styles.scss" in source map of "node_modules/react-formik-ui/dist/index.js".

Desktop (please complete the following information):

• Browser [Chrome]

Version
"react-formik-ui": "1.2.4"

Mode
Default

Describe the bug
can we disable autocomplete/Datepicker's previously filled values to display , because if a user click on one of them , they are not selected at all. so either we stop displaying them or they should be selected somehow.

Is your feature request related to a problem? Please describe.
It is difficult to customize the existing implementation of a number field (which is using Input with type number).

Describe the solution you'd like
Implement a standalone number field, perhaps using react-number-format

Describe alternatives you've considered
I began this request as a currency field but I feel like a more flexible number field would be more widely beneficial