fix: revert textedit changes (#1375)

* Revert "style: with buttons"

This reverts commit c40c2a6.

* Revert "refactor: fix <TextEdit /> bugs"

This reverts commit 6dc700e.

src/frontend/components/property-type/base-property-component.tsx

@@ -1,6 +1,6 @@
-import { Box, Icon, Tooltip } from '@adminjs/design-system'
+import { Box } from '@adminjs/design-system'
 import { ReactComponentLike } from 'prop-types'
-import React, { useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 
 import ErrorBoundary from '../app/error-boundary'
 
@@ -68,8 +68,6 @@ const BasePropertyComponent: React.FC<BasePropertyComponentProps> = (props) => {
     // path either index (for array) or subProperty name.
     path: (baseProperty as PropertyJSON).path || baseProperty.propertyPath,
   }), [baseProperty])
-  const propValue = record?.params?.[property.path]
-  const [originalValue] = useState(propValue)
 
   const testId = `property-${where}-${property.path}`
   const contentTag = getActionElementCss(resource.id, where, property.path)
@@ -143,32 +141,6 @@ const BasePropertyComponent: React.FC<BasePropertyComponentProps> = (props) => {
   return (
     <ErrorBoundary>
       <Box data-css={contentTag} data-testid={testId}>
-        {where === 'edit' && (
-          <Box mt="sm" display="inline-flex">
-            <Tooltip direction="right" title="Reset back to original value" size="lg">
-              <Box>
-                <Icon
-                  icon="Reset"
-                  color={propValue === originalValue ? 'grey40' : 'grey100'}
-                  onClick={() => {
-                    onChange!(property.path, originalValue)
-                  }}
-                />
-              </Box>
-            </Tooltip>
-            <Tooltip direction="right" title="Set value to null" size="lg">
-              <Box>
-                <Icon
-                  icon="SubtractAlt"
-                  color={propValue === null ? 'grey40' : 'grey100'}
-                  onClick={() => {
-                    onChange!(property.path, null)
-                  }}
-                />
-              </Box>
-            </Tooltip>
-          </Box>
-        )}
         <Component
           property={property}
           resource={resource}

src/frontend/components/property-type/currency/currency-input-wrapper.tsx

@@ -0,0 +1,37 @@
+import { CurrencyInput, CurrencyInputProps } from '@adminjs/design-system'
+import React, { FC, useState } from 'react'
+
+import allowOverride from '../../../hoc/allow-override'
+
+export type CurrencyInputWrapperProps = {
+  id: string;
+  initial: string;
+  options?: CurrencyInputProps
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  onChange: (value: string | undefined) => void;
+}
+
+const CurrencyInputWrapper: FC<CurrencyInputWrapperProps> = (props) => {
+  const { id, initial, onChange, options } = props
+  const [value, setValue] = useState<string | undefined>(initial)
+  const onValueChange = (currentValue: string | undefined): void => {
+    setValue(currentValue)
+    onChange(currentValue)
+  }
+  return (
+    <CurrencyInput
+      id={id}
+      name={id}
+      value={value}
+      onValueChange={onValueChange}
+      {...options}
+    />
+  )
+}
+
+const OverridableCurrencyInputWrapper = allowOverride(CurrencyInputWrapper, 'CurrencyPropertyInputWrapper')
+
+export {
+  OverridableCurrencyInputWrapper as CurrencyInputWrapper,
+  OverridableCurrencyInputWrapper as default,
+}

src/frontend/components/property-type/currency/edit.tsx

@@ -1,25 +1,24 @@
-import { CurrencyInput, FormGroup, FormMessage } from '@adminjs/design-system'
+import { CurrencyInputProps, FormGroup, FormMessage } from '@adminjs/design-system'
 import React, { FC, memo } from 'react'
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
 import { PropertyLabel } from '../utils/property-label'
 import allowOverride from '../../../hoc/allow-override'
+import { CurrencyInputWrapper } from './currency-input-wrapper'
 
 const Edit: FC<EditPropertyProps> = (props) => {
   const { onChange, property, record } = props
-  const propValue = record.params[property.path]
+  const propValue = record.params?.[property.path] ?? ''
   const error = record.errors?.[property.path]
 
   return (
     <FormGroup error={Boolean(error)}>
       <PropertyLabel property={property} />
-      <CurrencyInput
+      <CurrencyInputWrapper
         id={property.path}
-        name={property.path}
-        value={propValue ?? ''}
-        placeholder="<null>"
-        onValueChange={(value) => onChange(property.path, value)}
-        {...property.props}
+        initial={propValue}
+        options={property.props as CurrencyInputProps}
+        onChange={(value) => onChange(property.path, value)}
       />
       <FormMessage>{error && error.message}</FormMessage>
     </FormGroup>

src/frontend/components/property-type/default-type/edit.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { FC, memo } from 'react'
+import React, { FC, useState, memo, useEffect } from 'react'
 import { Input, FormMessage, FormGroup, Select } from '@adminjs/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
@@ -43,19 +43,26 @@ const SelectEdit: FC<CombinedProps> = (props) => {
 
 const TextEdit: FC<CombinedProps> = (props) => {
   const { property, record, onChange } = props
-  const propValue = record.params[property.path]
+  const propValue = record.params?.[property.path] ?? ''
+  const [value, setValue] = useState(propValue)
+
+  useEffect(() => {
+    if (value !== propValue) {
+      setValue(propValue)
+    }
+  }, [propValue])
 
   return (
     <Input
       id={property.path}
       name={property.path}
       required={property.isRequired}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-        onChange(property.path, e.target.value)
-      }}
-      value={propValue ?? ''}
+      onChange={(e) => setValue(e.target.value)}
+      onBlur={() => onChange(property.path, value)}
+      // handle clicking ENTER
+      onKeyDown={(e) => e.keyCode === 13 && onChange(property.path, value)}
+      value={value}
       disabled={property.isDisabled}
-      placeholder={propValue === null ? '<null>' : undefined}
       {...property.props}
     />
   )