diff --git a/.env.example b/.env.example index 7a39ba96d..492d6dace 100644 --- a/.env.example +++ b/.env.example @@ -57,7 +57,7 @@ CACHE_MEMORY_MAX=2000 ################# STORAGE (Initialization only) ################# INIT_LANG=en-US -INIT_ROOT_EMAIL=admin@nocobase.com -INIT_ROOT_PASSWORD=admin123 +INIT_ROOT_EMAIL=admin@tachybase.com +INIT_ROOT_PASSWORD=!Admin123. INIT_ROOT_NICKNAME=Super Admin -INIT_ROOT_USERNAME=nocobase +INIT_ROOT_USERNAME=tachybase diff --git a/packages/core/client/src/schema-component/antd/icon-picker/IconFilter.tsx b/packages/core/client/src/schema-component/antd/icon-picker/IconFilter.tsx new file mode 100644 index 000000000..699ab65c7 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/icon-picker/IconFilter.tsx @@ -0,0 +1,13 @@ +import { Input } from 'antd'; +import _ from 'lodash'; +import React from 'react'; + +export const IconFilter = (props) => { + const { changeFilterKey } = props; + const onChange = _.debounce((e) => { + const inputValue = e.target.value; + changeFilterKey(inputValue); + }, 100); + + return ; +}; diff --git a/packages/core/client/src/schema-component/antd/icon-picker/IconList.tsx b/packages/core/client/src/schema-component/antd/icon-picker/IconList.tsx new file mode 100644 index 000000000..1afbdb52e --- /dev/null +++ b/packages/core/client/src/schema-component/antd/icon-picker/IconList.tsx @@ -0,0 +1,47 @@ +import React, { useMemo, useState } from 'react'; +import { Icon, icons } from '../../../icon'; +import { Tooltip } from 'antd'; + +export const IconList = (props) => { + const { filterKey, onChange, changePop } = props; + + const iconKeysByFilter = useMemo(() => { + if (!filterKey) { + return icons; + } + const filterIcons = new Map(); + for (const key of icons.keys()) { + if (key.toLowerCase().includes(filterKey.toLowerCase())) { + filterIcons.set(key, icons.get(key)); + } + } + return filterIcons; + }, [filterKey]); + + return ( +
+ {[...iconKeysByFilter.keys()].map((key) => ( + + + { + onChange(key); + changePop(false); + }} + type={key} + /> + + + ))} +
+ ); +}; diff --git a/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx b/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx index 4528d7b13..0a568e07f 100644 --- a/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx +++ b/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx @@ -3,16 +3,20 @@ import { useFormLayout } from '@formily/antd-v5'; import { connect, mapProps, mapReadPretty } from '@nocobase/schema'; import { isValid } from '@nocobase/schema'; import { Button, Space } from 'antd'; -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Icon, hasIcon, icons } from '../../../icon'; import { StablePopover } from '../popover'; +import { IconFilter } from './IconFilter'; +import { IconList } from './IconList'; function IconField(props: any) { - const layout = useFormLayout(); const { value, onChange, disabled } = props; - const [visible, setVisible] = useState(false); const { t } = useTranslation(); + const layout = useFormLayout(); + const [visible, setVisible] = useState(false); + const [filterKey, setFilterKey] = useState(''); + return (
@@ -26,20 +30,10 @@ function IconField(props: any) { setVisible(val); }} content={ -
- {[...icons.keys()].map((key) => ( - { - onChange(key); - setVisible(false); - }} - > - - - ))} -
+ <> + + + } title={t('Icon')} trigger="click"