fix(chip-input): use the correct types onAdd and onDelete, add css pr…

…operties
nginformatica · Jan 18, 2021 · 78e5e46 · 78e5e46
1 parent 4f1dc5f
commit 78e5e46
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flipper-ui",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "",
   "main": "dist/index.js",
   "homepage": "https://flipper-ui.vercel.app",

diff --git a/src/core/ChipField.tsx b/src/core/ChipField.tsx
@@ -1,35 +1,57 @@
 import React, { useMemo } from 'react'
 import ChipInput, { ChipRenderer } from 'material-ui-chip-input'
 import { InputLabelProps } from '@material-ui/core'
+import styled from 'styled-components'
 
 interface IProps<T extends TChipValues> {
-  allowDuplicates?: boolean
-  values: T[]
-  variant?: 'outlined' | 'standard' | 'filled'
-  disabled?: boolean
-  fullWidth?: boolean
-  fullWidthInput?: boolean
-  InputLabelProps?: InputLabelProps
-  label?: React.ReactNode
-  placeholder?: string
-  readOnly?: boolean
-  chipRenderer?: ChipRenderer
-  onAdd: (values: T) => void;
-  onDelete: (value: T, index?: number) => void;
+    allowDuplicates?: boolean
+    values: T[]
+    variant?: 'outlined' | 'standard' | 'filled'
+    disabled?: boolean
+    fullWidth?: boolean
+    fullWidthInput?: boolean
+    InputLabelProps?: InputLabelProps
+    label?: React.ReactNode
+    placeholder?: string
+    readOnly?: boolean
+    error?: boolean
+    chipRenderer?: ChipRenderer
+    onAdd: (values: string) => void
+    onDelete: (value: string, index?: number) => void
 }
 
 export type TChipValues = {
-  value: string | number
+    value: string | number
 }
 
+const StyledChipInput = styled(ChipInput)`
+    & > div > div {
+        padding: 0px !important;
+    }
+    & > div > div > div {
+        margin: 2px;
+    }
+    & > label {
+        top: -6px !important;
+        font-size: 14px !important;
+    }
+    & > label.MuiInputLabel-shrink {
+        top: 0px !important;
+    }
+    & > div > div > input {
+        padding: 10px !important;
+        font-size: 14px !important;
+    }
+`
+
 const ChipField = <T extends TChipValues>(props: IProps<T>) => {
     const values = useMemo(() =>
         props.values.map(item => item.value),
     [props.values]
     )
 
     return (
-        <ChipInput
+        <StyledChipInput
             { ...props }
             alwaysShowPlaceholder
             value={ values }

diff --git a/yarn.lock b/yarn.lock
@@ -1481,10 +1481,10 @@
     react-is "^16.8.0"
     react-transition-group "^4.4.0"
 
-"@material-ui/icons@4.11.2":
-  version "4.11.2"
-  resolved "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
-  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+"@material-ui/icons@4.9.1":
+  version "4.9.1"
+  resolved "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665"
+  integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==
   dependencies:
     "@babel/runtime" "^7.4.4"