frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔧 Fixed value update issue in the react-select dropdowns

Browse Source
This commit is contained in:
Rishi Ghan
2022-01-06 15:15:45 -08:00
parent 0bfe580389
commit 7bb5669c52
2 changed files with 68 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx
View File

@@ -6,10 +6,11 @@ import { withAsyncPaginate } from "react-select-async-paginate";
const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
export const AsyncSelectPaginate = (props): ReactElement => {
const [value, onValueChange] = useState(null);
console.log(props);
const [value, setValue] = useState(null);
const [isAddingInProgress, setIsAddingInProgress] = useState(false);
const mudasir = useCallback((query, loadedOptions, { page }) => {
const loadData = useCallback((query, loadedOptions, { page }) => {
return fetchMetronResource({
method: "GET",
resource: props.metronResource,
@@ -25,11 +26,11 @@ export const AsyncSelectPaginate = (props): ReactElement => {
SelectComponent={Creatable}
debounceTimeout={200}
isDisabled={isAddingInProgress}
value={value}
loadOptions={mudasir}
value={props.value}
loadOptions={loadData}
placeholder={props.placeholder}
// onCreateOption={onCreateOption}
onChange={onValueChange}
onChange={props.onChange}
// cacheUniqs={[cacheUniq]}
additional={{
page: 1,

96
src/client/components/ComicDetail/EditMetadataPanel.tsx
View File

@@ -11,7 +11,16 @@ export const EditMetadataPanel = (props): ReactElement => {
const validate = async () => {};
const onSubmit = async () => {};
const DayPickerAdapter = ({ input, ...rest }) => {
return <DatePicker {...input} {...rest} />;
return <DatePicker {...input} {...rest} placeholderText={"Cover Date"} />;
};
const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
return (
<AsyncSelectPaginate
{...input}
{...rest}
onChange={(value) => input.onChange(value)}
/>
);
};
const dispatch = useDispatch();
@@ -79,35 +88,12 @@ export const EditMetadataPanel = (props): ReactElement => {
name="issue_year"
component={DayPickerAdapter}
className="input"
placeholder="Issue Year"
/>
</p>
</div>
</div>
</div>
{/* Story title */}
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">Story</label>
</div>
<div className="field-body">
<div className="field">
<p className="control is-expanded has-icons-left">
<Field
name="story_title"
component="input"
className="input"
placeholder="Story Title"
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-user-ninja"></i>
</span>
</p>
</div>
</div>
</div>
{/* Publisher */}
<div className="field is-horizontal">
<div className="field-label is-normal">
@@ -116,8 +102,14 @@ export const EditMetadataPanel = (props): ReactElement => {
<div className="field-body">
<div className="field">
<p className="control is-expanded has-icons-left">
<AsyncSelectPaginate
placeholder={"Publisher"}
<Field
name={"publisher"}
component={AsyncSelectPaginateAdapter}
placeholder={
<div>
<i className="fas fa-print"></i> Publisher
</div>
}
metronResource={"publisher"}
/>
</p>
@@ -125,6 +117,29 @@ export const EditMetadataPanel = (props): ReactElement => {
</div>
</div>
{/* Arc */}
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">Story Arc</label>
</div>
<div className="field-body">
<div className="field">
<p className="control is-expanded has-icons-left">
<Field
name={"story_arc"}
component={AsyncSelectPaginateAdapter}
placeholder={
<div>
<i className="fas fa-book-open"></i> Story Arc
</div>
}
metronResource={"arc"}
/>
</p>
</div>
</div>
</div>
{/* series */}
<div className="field is-horizontal">
<div className="field-label is-normal">
@@ -133,8 +148,14 @@ export const EditMetadataPanel = (props): ReactElement => {
<div className="field-body">
<div className="field">
<p className="control is-expanded has-icons-left">
<AsyncSelectPaginate
placeholder={"Series"}
<Field
name={"series"}
component={AsyncSelectPaginateAdapter}
placeholder={
<div>
<i className="fas fa-layer-group"></i> Series
</div>
}
metronResource={"series"}
/>
</p>
@@ -181,8 +202,14 @@ export const EditMetadataPanel = (props): ReactElement => {
<div className="field-body">
<div className="field">
<p className="control">
<AsyncSelectPaginate
placeholder={"Creator"}
<Field
name={`${name}.creator`}
component={AsyncSelectPaginateAdapter}
placeholder={
<div>
<i className="fas fa-book-open"></i> Creator
</div>
}
metronResource={"creator"}
/>
</p>
@@ -191,10 +218,10 @@ export const EditMetadataPanel = (props): ReactElement => {
<div className="field">
<p className="control">
<Field
name={`${name}.lastName`}
component="input"
className="input"
placeholder="role"
name={`${name}.role`}
metronResource={"role"}
placeholder={"Role"}
component={AsyncSelectPaginateAdapter}
/>
</p>
</div>
@@ -210,6 +237,7 @@ export const EditMetadataPanel = (props): ReactElement => {
))
}
</FieldArray>
<pre>{JSON.stringify(values, undefined, 2)}</pre>
</form>
)}
/>