mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-27 08:39:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ComponentSearch): remove choc-ui and replace it with select

Browse Source
This commit is contained in:
xzdry 2023-03-22 10:43:51 +08:00
parent 9382fade59
commit 6aa2d0480c
4 changed files with 32 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/editor-sdk/src/index.ts
View File

@ -4,3 +4,4 @@ export * from './constants/';
export * from './models';
export * from './types';
export * from './utils';
export * from './components/Select';

1
packages/editor/package.json
View File

@ -34,7 +34,6 @@
"dependencies": {
"@chakra-ui/icons": "^1.0.15",
"@chakra-ui/react": "^1.7.1",
"@choc-ui/chakra-autocomplete": "^4.22.0",
"@emotion/css": "^11.7.1",
"@optum/json-schema-editor": "^2.1.0",
"@sinclair/typebox": "^0.21.2",

72
packages/editor/src/components/StructureTree/ComponentSearch.tsx
View File

@ -1,62 +1,52 @@
import React, { useMemo, useCallback } from 'react';
import React, { useMemo } from 'react';
import { EditorServices } from '../../types';
import {
AutoComplete,
AutoCompleteInput,
AutoCompleteItem,
AutoCompleteList,
type Item,
} from '@choc-ui/chakra-autocomplete';
import { css } from '@emotion/css';
import { observer } from 'mobx-react-lite';
import { ComponentSchema } from '@sunmao-ui/core';
import { Select } from '@sunmao-ui/editor-sdk';
type Props = {
components: ComponentSchema[];
onChange: (id: string) => void;
services: EditorServices;
};
const AutoCompleteStyle = css`
margin-top: 0;
margin-bottom: 0.5rem;
const SelectStyle = css`
height: 40px;
&&& .sunmao-select-selector,
&&& .sunmao-select-selector input {
height: 100%;
}
&&& .sunmao-select-selector {
border-radius: 0.375rem;
}
&&& .sunmao-select-selector .sunmao-select-selection-placeholder,
&&& .sunmao-select-selector .sunmao-select-selection-search,
&&& .sunmao-select-selector .sunmao-select-selection-item {
line-height: 40px;
font-size: 1rem;
}
`;
export const ComponentSearch: React.FC<Props> = observer(props => {
const { components, onChange } = props;
const onSelectOption = useCallback(
({ item }: { item: Item }) => {
onChange(item.value);
},
[onChange]
);
const options = useMemo(() => {
return components.map(c => {
return (
<AutoCompleteItem key={c.id} value={c.id}>
{c.id}
</AutoCompleteItem>
);
});
return components.map(c => ({
label: c.id,
value: c.id,
}));
}, [components]);
return (
<AutoComplete
openOnFocus
lazy
onSelectOption={onSelectOption}
className={AutoCompleteStyle}
maxSuggestions={20}
>
<AutoCompleteInput
placeholder="Search component"
autoComplete="off"
size="md"
variant="filled"
marginTop={0}
/>
<AutoCompleteList>{options}</AutoCompleteList>
</AutoComplete>
<Select
bordered={false}
className={SelectStyle}
placeholder="Search component"
onChange={onChange}
showArrow={false}
showSearch
style={{ width: '100%' }}
options={options}
/>
);
});

12
yarn.lock
View File

@ -2446,13 +2446,6 @@
dependencies:
"@chakra-ui/utils" "1.9.1"
"@choc-ui/chakra-autocomplete@^4.22.0":
version "4.22.0"
resolved "https://registry.yarnpkg.com/@choc-ui/chakra-autocomplete/-/chakra-autocomplete-4.22.0.tgz#540b9f561309cc7a64e9fbd4f44ff30336189aa7"
integrity sha512-jP1IBM8Xtm7iNs4mB1ky/HRFpJQeNUDbVwA2CQ/UZyPHsoMGbo6dH2iHofaE1H4KuGPJV1gWvjmQ6o/uMYeT0g==
dependencies:
react-nanny "^2.9.0"
"@commitlint/cli@^16.0.0":
version "16.3.0"
resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-16.3.0.tgz#5689f5c2abbb7880d5ff13329251e5648a784b16"
@ -10853,11 +10846,6 @@ react-json-tree@^0.16.1:
prop-types "^15.8.1"
react-base16-styling "^0.9.1"
react-nanny@^2.9.0:
version "2.14.0"
resolved "https://registry.yarnpkg.com/react-nanny/-/react-nanny-2.14.0.tgz#c53afa8cd9612ca0eee57a35e0d38b65f76445a4"
integrity sha512-lX+SNWlpbIhN4h3zJQAtRqr7AXwldmgKxJ8e+eChFvMQISsZmHaR2SJujb3u1S6fpC5pUnYKsdbtwZXUG/4Qjw==
react-refresh@^0.10.0:
version "0.10.0"
resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.10.0.tgz"