Skip to content

Commit 4b5c73d

Browse files
tripolskypetrtripolskypetr
committed
icon-margins
1 parent 44757da commit 4b5c73d

File tree

5 files changed

+138
-170
lines changed

5 files changed

+138
-170
lines changed

‎package-lock.json

+7-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-declarative-mantine",
3-
"version": "0.0.3",
3+
"version": "0.0.6",
44
"description": "The Mantine ui kit bindings for react-declarative",
55
"private": false,
66
"author": {
@@ -77,7 +77,7 @@
7777
"glob": "11.0.0",
7878
"prettier": "3.2.5",
7979
"react": "^18.0.0",
80-
"react-declarative": "^2.6.193",
80+
"react-declarative": "^2.6.194",
8181
"react-dom": "^18.0.0",
8282
"rollup": "2.79.1",
8383
"rollup-plugin-peer-deps-external": "2.2.4",

‎src/OneSlotFactory/components/Choose.tsx

+40-80
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import * as React from "react";
22

3-
import TextField from "@mui/material/TextField";
4-
import Autocomplete from "@mui/material/Autocomplete";
5-
import InputAdornment from "@mui/material/InputAdornment";
3+
import { ActionButton, IChooseSlot, IField, useAsyncValue, useOnePayload, useOneState, useSinglerunAction } from "react-declarative";
4+
import { MANTINE_CONFIG } from "../../config";
5+
import { TextInput } from "@mantine/core";
66

7-
import { ActionButton, IChooseSlot, IField, useAsyncValue, useOnePayload, useOneState, useReloadTrigger, useSinglerunAction } from "react-declarative";
8-
9-
const EMPTY_ARRAY: any[] = [];
7+
const LOADING_LABEL = "Loading";
108

119
/**
1210
* Retrieves the processed input value based on the provided parameters.
@@ -59,10 +57,8 @@ export const Choose = ({
5957
disabled,
6058
readonly,
6159
description = "",
62-
outlined = false,
6360
title = "",
6461
placeholder = "Not chosen",
65-
labelShrink = true,
6662
dirty,
6763
loading: upperLoading,
6864
inputRef,
@@ -73,14 +69,12 @@ export const Choose = ({
7369
const payload = useOnePayload();
7470
const { object } = useOneState();
7571

76-
const { doReload, reloadTrigger } = useReloadTrigger();
77-
7872
/**
7973
* Represents the value of an input.
8074
*
8175
* @typedef inputValue
8276
*/
83-
const [inputValue, { loading: currentLoading }] = useAsyncValue(
77+
const [inputValue, { loading: currentLoading }] = useAsyncValue(
8478
async () => {
8579
return await getInputValue(value, tr, object, payload);
8680
},
@@ -95,7 +89,7 @@ export const Choose = ({
9589
* @param event - The click event object.
9690
* @returns
9791
*/
98-
const { execute: handleClick, loading: chooseLoading } = useSinglerunAction(
92+
const { execute: handleClick, loading: chooseLoading } = useSinglerunAction(
9993
async () => {
10094
if (value) {
10195
onChange(null);
@@ -115,79 +109,45 @@ export const Choose = ({
115109
const loading = upperLoading || currentLoading || chooseLoading;
116110

117111
return (
118-
<Autocomplete
119-
key={`${reloadTrigger}-${inputValue}`}
120-
fullWidth
121-
multiple={Array.isArray(inputValue)}
122-
disableClearable
123-
disabled={disabled}
124-
loading={loading}
125-
value={inputValue || null}
126-
options={EMPTY_ARRAY}
127-
onChange={() => null}
128-
freeSolo
112+
<TextInput
113+
{...MANTINE_CONFIG}
129114
readOnly
130-
renderInput={(params) => (
131-
<TextField
132-
{...params}
133-
value={params.inputProps.value}
134-
variant={outlined ? "outlined" : "standard"}
135-
helperText={(dirty && (invalid || incorrect)) || description}
136-
error={dirty && (invalid !== null || incorrect !== null)}
115+
ref={inputRef}
116+
label={title}
117+
error={(dirty && (invalid || incorrect))}
118+
description={description}
119+
rightSection={(
120+
<ActionButton
137121
sx={{
138-
flex: 1,
139-
...(!outlined && {
140-
position: "relative",
141-
mt: 1,
142-
"& .MuiFormHelperText-root": {
143-
position: "absolute",
144-
top: "100%",
145-
},
146-
}),
122+
pointerEvents: readonly ? "none" : "all",
123+
mr: 1,
147124
}}
148-
inputRef={inputRef}
149-
onClick={(e) => {
150-
e.currentTarget?.blur();
151-
if (!value) {
152-
handleClick();
153-
}
154-
doReload();
125+
disabled={loading || disabled}
126+
variant="outlined"
127+
size="small"
128+
color={value ? "secondary" : "primary"}
129+
onClick={async () => {
130+
await handleClick();
155131
}}
156-
InputProps={{
157-
...params.InputProps,
158-
readOnly: true,
159-
placeholder,
160-
endAdornment: loading ? (
161-
params.InputProps.endAdornment
162-
) : (
163-
<InputAdornment sx={{ position: "relative" }} position="end">
164-
<ActionButton
165-
sx={{
166-
pointerEvents: readonly ? "none" : "all",
167-
mb: outlined ? undefined : 0.5,
168-
}}
169-
disabled={loading || disabled}
170-
variant="outlined"
171-
size="small"
172-
color={value ? "secondary" : "primary"}
173-
onClick={async () => {
174-
await handleClick();
175-
}}
176-
>
177-
{value && "Deselect"}
178-
{!value && "Choose"}
179-
</ActionButton>
180-
</InputAdornment>
181-
),
182-
}}
183-
InputLabelProps={{
184-
...params.InputLabelProps,
185-
shrink: labelShrink || undefined,
186-
}}
187-
placeholder={placeholder}
188-
label={title}
189-
/>
132+
>
133+
{value && "Deselect"}
134+
{!value && "Choose"}
135+
</ActionButton>
190136
)}
137+
rightSectionProps={{
138+
style: {
139+
width: 'auto',
140+
}
141+
}}
142+
value={loading ? LOADING_LABEL : String(inputValue || "")}
143+
placeholder={placeholder}
144+
onClick={(e) => {
145+
e.currentTarget?.blur();
146+
if (!value) {
147+
handleClick();
148+
}
149+
}}
150+
disabled={disabled}
191151
/>
192152
);
193153
};

‎src/OneSlotFactory/components/Complete.tsx

+19-18
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useState, useEffect, useMemo, useRef, useLayoutEffect } from "react";
33

44
import Popover from "@mui/material/Popover";
55
import IconButton from "@mui/material/IconButton";
6-
import InputAdornment from "@mui/material/InputAdornment";
76
import CircularProgress from "@mui/material/CircularProgress";
87
import List from "@mui/material/List";
98
import ListItem from "@mui/material/ListItem";
@@ -382,24 +381,26 @@ export const Complete = ({
382381
pattern={inputPattern}
383382
readOnly={readonly}
384383
rightSection={(
385-
<InputAdornment sx={{ position: "relative" }} position="end">
386-
<IconButton
387-
onClick={(e) => {
388-
e.preventDefault();
389-
e.stopPropagation();
390-
if (!loading && !open && !!value) {
391-
handleChange("");
392-
inputElementRef.current?.setSelectionRange(null, null);
393-
}
394-
}}
395-
disabled={disabled}
396-
edge="end"
397-
>
398-
{loading && <CircularProgress color="inherit" size={20} />}
399-
{!loading && !open && !!value && <ClearIcon />}
400-
</IconButton>
401-
</InputAdornment>
384+
<IconButton
385+
onClick={(e) => {
386+
e.preventDefault();
387+
e.stopPropagation();
388+
if (!loading && !open && !!value) {
389+
handleChange("");
390+
inputElementRef.current?.setSelectionRange(null, null);
391+
}
392+
}}
393+
disabled={disabled}
394+
>
395+
{loading && <CircularProgress color="inherit" size={20} />}
396+
{!loading && !open && !!value && <ClearIcon />}
397+
</IconButton>
402398
)}
399+
rightSectionProps={{
400+
style: {
401+
width: 'auto',
402+
}
403+
}}
403404
type={inputType}
404405
inputMode={inputMode}
405406
autoFocus={autoFocus}

0 commit comments

Comments
 (0)