parent
3505bcc6a8
commit
9970484bce
6 changed files with 299 additions and 9 deletions
@ -0,0 +1,56 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
export const SelectColumnFilter2 = ({ |
||||||
|
column: { filterValue, setFilter, preFilteredRows, id, render }, |
||||||
|
}) => { |
||||||
|
const options = React.useMemo(() => { |
||||||
|
const options = new Set(); |
||||||
|
preFilteredRows.forEach((row) => { |
||||||
|
options.add(row.values[id]); |
||||||
|
}); |
||||||
|
return [...options.values()]; |
||||||
|
}, [id, preFilteredRows]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<select |
||||||
|
className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" |
||||||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} |
||||||
|
name={id} |
||||||
|
id={id} |
||||||
|
value={filterValue} |
||||||
|
onChange={(e) => { |
||||||
|
setFilter(e.target.value || undefined); |
||||||
|
}} |
||||||
|
> |
||||||
|
<option |
||||||
|
className="text-white" |
||||||
|
value="" |
||||||
|
style={{ backgroundColor: "#65A9FF" }} |
||||||
|
> |
||||||
|
همه |
||||||
|
</option> |
||||||
|
{options.map((option, i) => ( |
||||||
|
<option |
||||||
|
key={i} |
||||||
|
value={option} |
||||||
|
className="text-right text-white px-2" |
||||||
|
style={{ backgroundColor: "#65A9FF" }} |
||||||
|
> |
||||||
|
{(() => { |
||||||
|
if (option === 1) { |
||||||
|
return "ارسال شده"; |
||||||
|
} else if (option === 2) { |
||||||
|
return "رسیدگی"; |
||||||
|
} else if (option === 3) { |
||||||
|
return "لغو شده"; |
||||||
|
} else if (option === 4) { |
||||||
|
return "پیگیری"; |
||||||
|
} else { |
||||||
|
return "خطری"; |
||||||
|
} |
||||||
|
})()}{" "} |
||||||
|
</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
export const SliderColumnFilter = ({ |
||||||
|
column: { filterValue, setFilter, preFilteredRows, id }, |
||||||
|
}) => { |
||||||
|
const [min, max] = React.useMemo(() => { |
||||||
|
let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0; |
||||||
|
let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0; |
||||||
|
preFilteredRows.forEach((row) => { |
||||||
|
min = Math.min(row.values[id], min); |
||||||
|
max = Math.max(row.values[id], max); |
||||||
|
}); |
||||||
|
return [min, max]; |
||||||
|
}, [id, preFilteredRows]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<input |
||||||
|
type="range" |
||||||
|
min={min} |
||||||
|
max={max} |
||||||
|
value={filterValue || min} |
||||||
|
onChange={(e) => { |
||||||
|
setFilter(parseInt(e.target.value, 10)); |
||||||
|
}} |
||||||
|
/> |
||||||
|
<input type="checkbox" onClick={() => setFilter(undefined)} /> |
||||||
|
{/* <button onClick={() => setFilter(undefined)}>ریست</button> */} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
Loading…
Reference in new issue