68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Props } from './types';
|
|
import ReactSelect from '../ReactSelect';
|
|
import sortableFieldTypes from '../../../../fields/sortableFieldTypes';
|
|
|
|
import './index.scss';
|
|
|
|
const baseClass = 'sort-complex';
|
|
|
|
const sortOptions = [{ label: 'Ascending', value: '' }, { label: 'Descending', value: '-' }];
|
|
|
|
const SortComplex: React.FC<Props> = (props) => {
|
|
const {
|
|
collection,
|
|
handleChange,
|
|
} = props;
|
|
|
|
const [sortFields] = useState(() => collection.fields.reduce((fields, field) => {
|
|
if (field.name && sortableFieldTypes.indexOf(field.type) > -1) {
|
|
return [
|
|
...fields,
|
|
{ label: field.label, value: field.name },
|
|
];
|
|
}
|
|
return fields;
|
|
}, []));
|
|
const [sortField, setSortField] = useState(null);
|
|
const [sortOrder, setSortOrder] = useState('-');
|
|
|
|
useEffect(() => {
|
|
if (sortField) {
|
|
handleChange(`${sortOrder}${sortField}`);
|
|
}
|
|
}, [sortField, sortOrder, handleChange]);
|
|
|
|
return (
|
|
<div className={baseClass}>
|
|
<React.Fragment>
|
|
<div className={`${baseClass}__wrap`}>
|
|
<div className={`${baseClass}__select`}>
|
|
<div className={`${baseClass}__label`}>
|
|
Column to Sort
|
|
</div>
|
|
<ReactSelect
|
|
value={sortFields.find((field) => field.name === sortField)}
|
|
options={sortFields}
|
|
onChange={setSortField}
|
|
/>
|
|
</div>
|
|
<div className={`${baseClass}__select`}>
|
|
<div className={`${baseClass}__label`}>
|
|
Order
|
|
</div>
|
|
<ReactSelect
|
|
value={sortOptions.find((order) => order.value === sortOrder)}
|
|
options={sortOptions}
|
|
onChange={setSortOrder}
|
|
// onChange={(val) => console.log(val)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</React.Fragment>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SortComplex;
|