@ant-design/icons#CodeFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#CodeFilled.
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: index.tsx From datart with Apache License 2.0 | 4 votes |
Sidebar = memo(
({ isDragging, width, sliderVisible, handleSliderVisible }: SidebarProps) => {
const history = useHistory();
const dispatch = useDispatch();
const { showSaveForm } = useContext(SaveFormContext);
const orgId = useSelector(selectOrgId);
const selectViewTree = useMemo(makeSelectViewTree, []);
const viewsData = useSelector(selectViews);
const t = useI18NPrefix('view.sidebar');
const getIcon = useCallback(
({ isFolder }: ViewSimpleViewModel) =>
isFolder ? (
p => (p.expanded ? <FolderOpenFilled /> : <FolderFilled />)
) : (
<CodeFilled />
),
[],
);
const getDisabled = useCallback(
({ deleteLoading }: ViewSimpleViewModel) => deleteLoading,
[],
);
const treeData = useSelector(state =>
selectViewTree(state, { getIcon, getDisabled }),
);
const { filteredData: filteredTreeData, debouncedSearch: treeSearch } =
useDebouncedSearch(treeData, (keywords, d) =>
d.title.toLowerCase().includes(keywords.toLowerCase()),
);
const archived = useSelector(selectArchived);
const recycleList = useMemo(
() =>
archived?.map(({ id, name, parentId, isFolder, deleteLoading }) => ({
key: id,
title: name,
parentId,
icon: isFolder ? <FolderOutlined /> : <FileOutlined />,
isFolder,
disabled: deleteLoading,
})),
[archived],
);
const { filteredData: filteredListData, debouncedSearch: listSearch } =
useDebouncedSearch(recycleList, (keywords, d) =>
d.title.toLowerCase().includes(keywords.toLowerCase()),
);
const add = useCallback(
({ key }) => {
switch (key) {
case 'view':
history.push(
`/organizations/${orgId}/views/${`${UNPERSISTED_ID_PREFIX}${uuidv4()}`}`,
);
break;
case 'folder':
showSaveForm({
type: CommonFormTypes.Add,
visible: true,
simple: true,
parentIdLabel: t('parent'),
onSave: (values, onClose) => {
let index = getInsertedNodeIndex(values, viewsData);
dispatch(
saveFolder({
folder: {
...values,
parentId: values.parentId || null,
index,
},
resolve: onClose,
}),
);
},
});
break;
default:
break;
}
},
[dispatch, history, orgId, showSaveForm, viewsData, t],
);
const titles = useMemo(
() => [
{
key: 'list',
title: t('title'),
search: true,
add: {
items: [
{ key: 'view', text: t('addView') },
{ key: 'folder', text: t('addFolder') },
],
callback: add,
},
more: {
items: [
{
key: 'recycle',
text: t('recycle'),
prefix: <DeleteOutlined className="icon" />,
},
{
key: 'collapse',
text: t(sliderVisible ? 'open' : 'close'),
prefix: sliderVisible ? (
<MenuUnfoldOutlined className="icon" />
) : (
<MenuFoldOutlined className="icon" />
),
},
],
callback: (key, _, onNext) => {
switch (key) {
case 'recycle':
onNext();
break;
case 'collapse':
handleSliderVisible(!sliderVisible);
break;
}
},
},
onSearch: treeSearch,
},
{
key: 'recycle',
title: t('recycle'),
back: true,
search: true,
onSearch: listSearch,
},
],
[add, treeSearch, listSearch, t, handleSliderVisible, sliderVisible],
);
return (
<Wrapper
sliderVisible={sliderVisible}
className={sliderVisible ? 'close' : ''}
isDragging={isDragging}
width={width}
>
{sliderVisible ? (
<MenuUnfoldOutlined className="menuUnfoldOutlined" />
) : (
<></>
)}
<ListNavWrapper defaultActiveKey="list">
<ListPane key="list">
<ListTitle {...titles[0]} />
<FolderTree treeData={filteredTreeData} />
</ListPane>
<ListPane key="recycle">
<ListTitle {...titles[1]} />
<Recycle list={filteredListData} />
</ListPane>
</ListNavWrapper>
</Wrapper>
);
},
)