react-icons/bi#BiSortUp TypeScript Examples
The following examples show how to use
react-icons/bi#BiSortUp.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: staticData.tsx From projectboard with MIT License | 5 votes |
|
newFeatures = [
{
id: '1',
Icon: <CgBoard className="w-10 h-10" />,
title: 'Boards',
description:
'Empower teams to self-manage as they move tasks from one stage to the other and visualize workflows in boards.'
},
{
id: '2',
Icon: <RiTeamFill className="w-10 h-10" />,
title: 'Team Management',
description: 'Provide access to your project or revoke them when necessary.'
},
{
id: '3',
Icon: <BiSortUp className="w-10 h-10" />,
title: 'History',
description: 'Track history of entire project or individual task.'
},
{
id: '4',
Icon: <MdNotificationsActive className="w-10 h-10" />,
title: 'Get Notified Immediately',
description: 'Get Notifications when anyone in team creates or deletes a task or update boards.'
},
{
id: '5',
Icon: <TiThMenu className="w-10 h-10" />,
title: 'Context Menu',
description: "Make new Tasks with interactive menu that appears on every new line when you type '/'."
},
{
id: '6',
Icon: <CgLivePhoto className="w-10 h-10" />,
title: 'Live Markdown Editor',
description:
'Seamless experience as both a readder and a writer. Providing a real live preview feature to help your concentrate on the content itself.'
}
]
Example #2
| Source File: LeftSideBar.tsx From projectboard with MIT License | 4 votes |
|
LeftSideBar: React.FC<Props> = ({ showMenu, onCloseMenu }) => {
const { projectId } = useParams<{ projectId: string; taskId: string }>();
const { projectData } = useSelector((state: RootState) => state.currentProject);
const { user } = useSelector((state: RootState) => state.userProfile);
const ref = useRef<HTMLDivElement>() as RefObject<HTMLDivElement>;
const [showProfileMenu, setShowProfileMenu] = useState(false);
const [showHelpModal, setShowHelpModal] = useState(false);
const history = useHistory();
const dispatch = useDispatch();
let classes = classNames(
'absolute lg:static inset-0 transform duration-300 lg:relative lg:translate-x-0 bg-white flex flex-col flex-shrink-0 w-56 font-sans text-sm text-gray-700 border-r border-gray-100 lg:shadow-none justify-items-start h-screen',
{
'-translate-x-full ease-out shadow-none': !showMenu,
'translate-x-0 ease-in shadow-xl': showMenu
}
);
let ready = false;
useClickOutside(ref, () => {
if (ready && showMenu && onCloseMenu) onCloseMenu();
});
useEffect(() => {
// eslint-disable-next-line react-hooks/exhaustive-deps
setTimeout(() => (ready = true), 300);
});
const onFilterClick = (type: string, filter: string) => {
if (type === 'label') {
history.push(`/projects/${projectId}/tasks`);
dispatch(addLabelFilter(filter));
}
if (type === 'priority') {
history.push(`/projects/${projectId}/tasks`);
dispatch(addPriorityFilter(filter));
}
};
return (
<>
<div className={classes} style={{ zIndex: 2 }} ref={ref}>
<button
className="flex-shrink-0 px-5 ml-2 lg:hidden h-14 focus:outline-none"
onClick={onCloseMenu}
>
<MenuIcon className="w-3.5 text-gray-500 hover:text-gray-800" />
</button>
{/* Top menu*/}
<div className="flex flex-col flex-grow-0 flex-shrink-0 px-5 py-3">
<div className="flex items-center justify-between">
{/* Project selection */}
<div className="flex items-center p-2 pr-3 rounded cursor-pointer hover:bg-gray-100">
<div className="flex text-sm items-center justify-center rounded-sm w-4.5 h-4.5 text-white bg-yellow-500 mr-2.5">
{projectData?.project?.title?.charAt(0)}
</div>
<div className="text-sm font-medium flex-wrap flex-shrink overflow-hidden font-medium line-clamp-1 overflow-ellipsis">
{projectData?.project?.title?.length > 10
? projectData?.project?.title?.slice(0, 10) + '...'
: projectData?.project?.title}
</div>
</div>
{/* User avatar */}
<div className="relative">
<div
className="flex items-center justify-center p-2 rounded cursor-pointer hover:bg-gray-100 select-none"
onClick={() => setShowProfileMenu(!showProfileMenu)}
>
<Avatar name={`${user?.firstName} ${user?.lastName}`} online={true} />
<ExpandMore size={13} className="ml-2" />
</div>
<ProfileMenu
isOpen={showProfileMenu}
onDismiss={() => setShowProfileMenu(false)}
className="absolute top-10"
/>
</div>
</div>
<Link
to={`/projects/${projectId}/create-task`}
className="inline-flex items-center px-2 py-2 mt-3 bg-white border border-gray-300 rounded hover:bg-gray-100 focus:outline-none h-7"
>
<AddIcon className="mr-2.5 w-3.5 h-3.5" /> New Task
</Link>
</div>
{/* Search box */}
<div className="flex flex-col flex-shrink flex-grow overflow-y-auto mb-0.5 px-4">
{/* <SearchBox className='mt-5' placeholder='Not Implemented' /> */}
{/* actions */}
<Link
to={`/history/projects/${projectId}`}
className="group relative w-full mt-0.5 py-2 px-2 h-7 flex items-center rounded hover:bg-gray-100 cursor-pointer"
>
<BiSortUp className="w-3.5 h-3.5 mr-4 text-sm text-gray-500 group-hover:text-gray-600" />
<span>History</span>
</Link>
<Link
to={`/projects/${projectId}/tasks`}
className="group relative w-full mt-0.5 py-2 px-2 h-7 flex items-center rounded hover:bg-gray-100 cursor-pointer"
>
<IssueIcon className="w-3.5 h-3.5 mr-4 text-gray-500 group-hover:text-gray-600" />
<span>Tasks</span>
</Link>
<Link
to={`/projects/${projectId}/board`}
className="group relative w-full mt-0.5 py-2 px-2 h-7 flex items-center rounded hover:bg-gray-100 cursor-pointer"
>
<CgBoard className="w-3.5 h-3.5 mr-4 text-gray-500 group-hover:text-gray-600" />
<span>Board</span>
</Link>
{/* Tasks */}
<h3 className="px-2 mt-5 text-xs text-gray-500">Your Tasks</h3>
<ItemGroup title="Priority">
<button
onClick={() => onFilterClick('priority', 'no_priority')}
className="flex items-center pl-8 rounded cursor-pointer group h-7 hover:bg-gray-100"
>
<NoPriorityIcon className="w-3 h-3 mr-2 text-gray-500 group-hover:text-gray-700" />
<span>No Priority</span>
</button>
<button
onClick={() => onFilterClick('priority', 'urgent')}
className="flex items-center pl-8 rounded cursor-pointer h-7 hover:bg-gray-100"
>
<UrgentPriorityIcon className="w-3 h-3 mr-2 text-gray-500 group-hover:text-gray-700" />
<span>Urgent</span>
</button>
<button
onClick={() => onFilterClick('priority', 'high')}
className="flex items-center pl-8 rounded cursor-pointer h-7 hover:bg-gray-100"
>
<HighPriorityIcon className="w-3 h-3 mr-2 text-gray-500 group-hover:text-gray-700" />
<span>High</span>
</button>
<button
onClick={() => onFilterClick('priority', 'medium')}
className="flex items-center pl-8 rounded cursor-pointer group h-7 hover:bg-gray-100"
>
<MediumPriorityIcon className="w-3 h-3 mr-2 text-gray-500 group-hover:text-gray-700" />
<span>Medium</span>
</button>
<button
onClick={() => onFilterClick('priority', 'low')}
className="flex items-center pl-8 rounded cursor-pointer group h-7 hover:bg-gray-100"
>
<LowPriorityIcon className="w-3 h-3 mr-2 text-gray-500 group-hover:text-gray-700" />
<span>Low</span>
</button>
</ItemGroup>
<ItemGroup title="Label">
<button
onClick={() => onFilterClick('label', 'Bug')}
className="flex items-center pl-8 rounded cursor-pointer group h-7 hover:bg-gray-100"
>
<div
className="w-2.5 h-2.5 rounded-full mr-3"
style={{ background: '#eb5757' }}
/>
<span>Bug</span>
</button>
<button
onClick={() => onFilterClick('label', 'Feature')}
className="flex items-center pl-8 rounded cursor-pointer h-7 hover:bg-gray-100"
>
<div
className="w-2.5 h-2.5 rounded-full mr-3"
style={{ background: '#bb87fc' }}
/>
<span>Feature</span>
</button>
<button
onClick={() => onFilterClick('label', 'Improvement')}
className="flex items-center pl-8 rounded cursor-pointer h-7 hover:bg-gray-100"
>
<div
className="w-2.5 h-2.5 rounded-full mr-3"
style={{ background: '#4ea7fc' }}
/>
<span>Improvement</span>
</button>
<button
onClick={() => onFilterClick('label', 'No Label')}
className="flex items-center pl-8 rounded cursor-pointer group h-7 hover:bg-gray-100"
>
<div
className="w-2.5 h-2.5 rounded-full mr-3"
style={{ background: '#999999' }}
/>
<span>No Label</span>
</button>
</ItemGroup>
{/* extra space */}
<div className="flex flex-col flex-grow flex-shrink" />
{/* bottom group */}
<div className="px-2 pb-2 text-gray-500 mt-7">
<Link
to={`/projects/${projectId}/members`}
className="flex items-center focus:outline-none"
>
<AddIcon className="w-3 mr-2" />
{projectData.access === 'admin' ? 'Manage Members' : 'View Members'}
</Link>
<button
className="flex items-center mt-1 focus:outline-none cursor-pointer"
onClick={() => {
setShowHelpModal(true);
onCloseMenu && onCloseMenu();
}}
>
<HelpIcon className="w-3 mr-2 mt-0.5" /> Help & Feedback
</button>
</div>
</div>
</div>
{/* Modal */}
{<HelpModal isOpen={showHelpModal} onDismiss={() => setShowHelpModal(false)} />}
</>
);
}
Example #3
| Source File: TaskDetail.tsx From projectboard with MIT License | 4 votes |
|
TaskDetail: React.FC<Props> = ({ history }) => {
const [showMenuLeft, setShowMenuLeft] = useState(false);
const [showMenuRight, setShowMenuRight] = useState(false);
const [readOnlyMarkdown, setReadOnlyMarkdown] = useState(true);
const { task, loading, error, success } = useSelector((state: RootState) => state.taskDetail);
const dispatch = useDispatch();
const { getAccessTokenSilently } = useAuth0();
const params = useParams<URLParams>();
// const history = useHistory();
const { success: deleteSuccess } = useSelector((state: RootState) => state.deleteTask);
const { projectData } = useSelector((state: RootState) => state.currentProject);
const [description, setDescription] = useState(task.description);
const [title, setTitle] = useState(task.title);
const getTask = useCallback(async () => {
const token = await getAccessTokenSilently();
dispatch(getTaskDetail(token, params.projectId, params.taskId));
}, [dispatch, getAccessTokenSilently, params.projectId, params.taskId]);
useEffect(() => {
getTask();
return () => {
dispatch({
type: GET_TASK_DETAIL_CLEAR
});
};
}, [params.projectId, params.taskId, getAccessTokenSilently, dispatch, getTask]);
useEffect(() => {
setTitle(task.title);
setDescription(task.description);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [success]);
useEffect(() => {
if (deleteSuccess) {
history.push(`/projects/${params.projectId}/tasks`);
dispatch({ type: DELETE_TASK_CLEAR });
}
}, [deleteSuccess, dispatch, history, params.projectId]);
useEffect(() => {
if (readOnlyMarkdown) {
getTask();
}
}, [getTask, readOnlyMarkdown]);
const onEdit = () => {
setReadOnlyMarkdown(false);
};
const onCancel = () => {
setReadOnlyMarkdown(true);
setTitle(task.title);
setDescription(task.description);
};
const onSave = async () => {
try {
showWarning('While we save your task.', 'Please Wait.');
const token = await getAccessTokenSilently();
await axios({
url: `${baseURL}${endpoints.projects}/${params.projectId}${endpoints.tasks}/${params.taskId}`,
method: 'PATCH',
data: {
title,
description
},
headers: {
Authorization: `Bearer ${token}`
}
});
showInfo('', 'Successfully saved Task.');
setReadOnlyMarkdown(true);
} catch (e) {
onCancel();
showError(e?.response?.data?.message, 'Error saving Task.');
}
};
const onDelete = async () => {
const token = await getAccessTokenSilently();
dispatch(deleteTask(params.taskId, params.projectId, token));
};
return (
<div className="flex w-screen h-screen overflow-y-hidden">
<LeftSideBar showMenu={showMenuLeft} onCloseMenu={() => setShowMenuLeft(false)} />
{loading ? (
<div className="flex items-center justify-center flex-1">
<CircularProgress color="primary" />
</div>
) : error ? (
<div className="flex items-center justify-center flex-1">{error}</div>
) : (
<div className="flex flex-row flex-1">
<div className="p-0 lg:p-4 flex flex-1">
<div className="flex flex-1 flex-col shadow-modal modal-shadow rounded-md">
{/* Top Close Box */}
<div className="border-0 lg:border-b border-gray-200 flex justify-between">
<button
className="flex-shrink-0 h-full px-5 focus:outline-none lg:hidden"
onClick={() => setShowMenuLeft(!showMenuLeft)}
>
<MenuIcon className="w-3.5 text-gray-500 hover:text-gray-800" />
</button>
<div className="flex items-center justify-end p-2">
<button
onClick={() => window.history.back()}
className="inline-flex items-center justify-center ml-2 text-gray-500 h-7 w-7 hover:bg-gray-100 rouned hover:text-gray-700 hidden lg:flex"
>
<CloseIcon className="w-4" />
</button>
<button
onClick={() => setShowMenuRight(!showMenuRight)}
className="flex-shrink-0 h-full p-2 ml-2 focus:outline-none lg:hidden hover:bg-gray-100"
>
<RightSideBarIcon />
</button>
</div>
</div>
{/* Project Title and current task title */}
<div className="px-5 border-b border-gray-200 mt-2.5 pb-3 flex justify-between items-center">
<p className="font-medium w-10/12 text-gray-700">{`› ${projectData.project.title}`}</p>
<div className="flex">
{readOnlyMarkdown && (
<>
<Link
to={`/history/projects/${projectData.project._id}/tasks/${task._id}`}
className="inline-flex items-center justify-center text-gray-500 h-7 w-7 hover:bg-gray-100 rouned hover:text-gray-700"
>
<BiSortUp size={16} />
</Link>
<button
onClick={onEdit}
className="ml-3 inline-flex items-center justify-center text-gray-500 h-7 w-7 hover:bg-gray-100 rouned hover:text-gray-700"
>
<EditIcon />
</button>
<button
onClick={onDelete}
className="ml-3 inline-flex items-center justify-center text-gray-500 h-7 w-7 hover:bg-gray-100 rouned hover:text-gray-700"
>
<DeleteIcon />
</button>
</>
)}
{!readOnlyMarkdown && (
<>
<button
onClick={onCancel}
className="inline-flex items-center justify-center px-2 py-1 transition-all rounded-md ml-2 text-gray-500 hover:bg-gray-100 rouned hover:text-gray-700"
>
Cancel
</button>
<button
onClick={onSave}
className="inline-flex items-center justify-center px-2 py-1 transition-all border border-gray-200 rounded-md ml-2 text-gray-500 hover:bg-gray-100 rouned hover:text-gray-700"
>
Save
</button>
</>
)}
</div>
</div>
{/* Markdown Description */}
<div className="mt-5 pb-3 px-5">
{!readOnlyMarkdown ? (
<input
className="px-2 py-1 w-full border border-gray-700 border-dashed rounded focus:outline-none"
value={title}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setTitle(e.target.value)
}
/>
) : (
<p className="text-lg font-semibold mt-4 mb-3 text-gray-700">
{task.title}
</p>
)}
<div className="flex">
<MarkdownStyles taskDetail>
<Editor
autoFocus
id="editor"
readOnly={readOnlyMarkdown}
// defaultValue={task.description}
value={task.description}
onChange={value => setDescription(value())}
className="mt-4 ml-5 font-normal border-none appearance-none min-h-12 text-md focus:outline-none"
placeholder="Add description..."
/>
</MarkdownStyles>
</div>
</div>
</div>
</div>
<RightSideBar showMenu={showMenuRight} onCloseMenu={() => setShowMenuRight(false)} />
</div>
)}
</div>
);
}
