ibm-products icon indicating copy to clipboard operation
ibm-products copied to clipboard

feat(Datagrid): #2237 datagrid inline edit `date` type

Open matthewgallo opened this issue 3 years ago • 1 comments

Contributes to #2237

**The other two inline edit PRs should be reviewed first.

Adds the date type to Datagrid inline edit. This addition includes Carbon's DatePicker and DatePickerInput components. To add a column that uses date inline edit, it will look like the following:

{
      Header: 'Active since',
      accessor: 'activeSince',
      inlineEdit: {
        type: 'date',
        // optionally pass props here to be passed through to Carbon's DatePicker component
        onChange: (newDateObj, cell) => {
          const formattedDate = formatDate(newDateObj);
          updateCellDate(formattedDate, cell);
        },
        // optionally pass props here to be passed through to Carbon's DatePickerInput component
        datePickerInputProps: {
          labelText: 'Change active since date',
        },
      },
    },

The onChange gives back the new date object (which the consumer will need to format on their own) and the cell object from the datagrid data. The new data will need to be updated by the consumer because it's required that the date be formatted in the dateFormat passed to DatePicker. I've included an example in the storybook doing so.

See interaction below:

https://user-images.githubusercontent.com/10215203/187295569-9530ea9f-c94d-4c7f-ac6e-7c2dd93bc8cd.mov

What did you change?

useInlineEdit.js getInlineEditColumns.js Datagrid.stories.js _useInlineEdit.scss makeData.js

How did you test and verify your work?

Storybook

matthewgallo avatar Aug 29 '22 20:08 matthewgallo

Deploy Preview for carbon-for-ibm-products ready!

Name Link
Latest commit caf74e3ed306595d95758809ecf1d1f7d390f757
Latest deploy log https://app.netlify.com/sites/carbon-for-ibm-products/deploys/6320162964c3460008f05630
Deploy Preview https://deploy-preview-2238--carbon-for-ibm-products.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar Aug 29 '22 20:08 netlify[bot]

@matthewgallo Noticed a small alignment issue while using the column resize in select type columns

https://user-images.githubusercontent.com/305492/189659155-57c8b1a1-a1d8-4885-a719-078a087bbe4c.mov

Ratheeshrajan avatar Sep 12 '22 12:09 Ratheeshrajan