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