Merge pull request #452 from webzard-io/feat/rc-select

feat: a more comprehensive select component based on rc-select
2024-11-27 08:39:59 +08:00 · 2022-06-22 10:15:13 +08:00 · 2022-06-22 10:15:13 +08:00 · e6dc6561c3
commit e6dc6561c3
parent b4c6082b6a e5d6ead30e
7 changed files with 943 additions and 12 deletions
--- a/packages/editor-sdk/package.json
+++ b/packages/editor-sdk/package.json
@ -38,6 +38,7 @@
    "lodash-es": "^4.17.21",
    "mitt": "^3.0.0",
    "mobx-react-lite": "^3.2.2",
+    "rc-select": "^14.1.5",
    "react": "^17.0.2",
    "react-color": "^2.19.3",
    "react-dom": "^17.0.2",
--- a/packages/editor-sdk/src/components/Select/index.ts
+++ b/packages/editor-sdk/src/components/Select/index.ts
@ -0,0 +1 @@
+export * from './select';
--- a/packages/editor-sdk/src/components/Select/select.tsx
+++ b/packages/editor-sdk/src/components/Select/select.tsx
@ -0,0 +1,125 @@
+import React from 'react';
+import RcSelect, {
+  BaseSelectRef,
+  OptGroup,
+  Option,
+  SelectProps as RcSelectProps,
+} from 'rc-select';
+import getIcons from './utils';
+import { rcSelectStyle } from './style';
+import { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
+import { RenderDOMFunc } from 'rc-select/lib/BaseSelect';
+import { cx } from '@emotion/css';
+
+const prefixCls = 'sunmao-select';
+const defaultRenderEmpty = 'Not Found';
+const defaultGetPopupContainer: RenderDOMFunc = triggerNode => triggerNode;
+
+type RawValue = string | number;
+
+export interface LabeledValue {
+  key?: string;
+  value: RawValue;
+  label: React.ReactNode;
+}
+
+export type SelectValue =
+  | RawValue
+  | RawValue[]
+  | LabeledValue
+  | LabeledValue[]
+  | undefined;
+
+export type CustomFunction =
+  | 'inputIcon'
+  | 'mode'
+  | 'getInputElement'
+  | 'getRawInputElement'
+  | 'backfill'
+  | 'placement';
+
+export interface SelectMainProps<
+  ValueType = any,
+  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType
+> extends Omit<RcSelectProps<ValueType, OptionType>, CustomFunction> {
+  suffixIcon?: React.ReactNode;
+  disabled?: boolean;
+  mode?: 'multiple' | 'tags';
+  bordered?: boolean;
+}
+
+const SelectMain = <
+  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType
+>(
+  {
+    mode,
+    className,
+    bordered = true,
+    getPopupContainer = defaultGetPopupContainer,
+    dropdownClassName,
+    listHeight = 256,
+    listItemHeight = 24,
+    showArrow,
+    notFoundContent,
+    dropdownMatchSelectWidth = true,
+    loading,
+    ...props
+  }: SelectMainProps<OptionType>,
+  ref: React.Ref<BaseSelectRef>
+) => {
+  const isMultiple = mode === 'multiple' || mode === 'tags';
+  const mergedShowArrow = showArrow !== undefined ? showArrow : loading || !isMultiple;
+  const borderLessCls = !bordered && `${prefixCls}-borderless`;
+
+  const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons({
+    ...props,
+    loading,
+    multiple: mode === 'multiple',
+    showArrow: mergedShowArrow,
+    prefixCls,
+  });
+
+  // TODO: Placement
+  // TODO: Not Found
+  const notFound: React.ReactNode = notFoundContent || defaultRenderEmpty;
+
+  return (
+    <div className={rcSelectStyle}>
+      <RcSelect
+        ref={ref}
+        className={cx(className, borderLessCls)}
+        prefixCls={prefixCls}
+        dropdownMatchSelectWidth={dropdownMatchSelectWidth}
+        listItemHeight={listItemHeight}
+        listHeight={listHeight}
+        direction="ltr"
+        inputIcon={suffixIcon}
+        clearIcon={clearIcon}
+        mode={isMultiple ? mode : undefined}
+        menuItemSelectedIcon={itemIcon}
+        removeIcon={removeIcon}
+        {...props}
+        getPopupContainer={getPopupContainer}
+        notFoundContent={notFound}
+        dropdownClassName={dropdownClassName}
+      />
+    </div>
+  );
+};
+
+const Select = React.forwardRef(SelectMain) as unknown as (<
+  ValueType = any,
+  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType
+>(
+  props: React.PropsWithChildren<SelectMainProps<ValueType, OptionType>> & {
+    ref?: React.Ref<BaseSelectRef>;
+  }
+) => React.ReactElement) & {
+  Option: typeof Option;
+  OptGroup: typeof OptGroup;
+};
+
+Select.Option = Option;
+Select.OptGroup = OptGroup;
+
+export { Select };
--- a/packages/editor-sdk/src/components/Select/style.ts
+++ b/packages/editor-sdk/src/components/Select/style.ts
@ -0,0 +1,633 @@
+import { css } from '@emotion/css';
+export const rcSelectStyle = css`
+  .sunmao-select-single .sunmao-select-selector {
+    display: flex;
+  }
+  .sunmao-select-single .sunmao-select-selector .sunmao-select-selection-search {
+    position: absolute;
+    top: 0;
+    right: 11px;
+    bottom: 0;
+    left: 11px;
+  }
+  .sunmao-select-single .sunmao-select-selector .sunmao-select-selection-search-input {
+    width: 100%;
+  }
+  .sunmao-select-single .sunmao-select-selector .sunmao-select-selection-item,
+  .sunmao-select-single .sunmao-select-selector .sunmao-select-selection-placeholder {
+    padding: 0;
+    line-height: 30px;
+    transition: all 0.3s;
+  }
+  @supports (-moz-appearance: meterbar) {
+    .sunmao-select-single .sunmao-select-selector .sunmao-select-selection-item,
+    .sunmao-select-single .sunmao-select-selector .sunmao-select-selection-placeholder {
+      line-height: 30px;
+    }
+  }
+  .sunmao-select-single .sunmao-select-selector .sunmao-select-selection-item {
+    position: relative;
+    user-select: none;
+  }
+  .sunmao-select-single .sunmao-select-selector .sunmao-select-selection-placeholder {
+    transition: none;
+    pointer-events: none;
+  }
+  .sunmao-select-single .sunmao-select-selector::after,
+  .sunmao-select-single .sunmao-select-selector .sunmao-select-selection-item::after,
+  .sunmao-select-single
+    .sunmao-select-selector
+    .sunmao-select-selection-placeholder::after {
+    display: inline-block;
+    width: 0;
+    visibility: hidden;
+    content: '\\a0';
+  }
+  .sunmao-select-single.sunmao-select-show-arrow .sunmao-select-selection-search {
+    right: 25px;
+  }
+  .sunmao-select-single.sunmao-select-show-arrow .sunmao-select-selection-item,
+  .sunmao-select-single.sunmao-select-show-arrow .sunmao-select-selection-placeholder {
+    padding-right: 18px;
+  }
+  .sunmao-select-single.sunmao-select-open .sunmao-select-selection-item {
+    color: #bfbfbf;
+  }
+  .sunmao-select-single:not(.sunmao-select-customize-input) .sunmao-select-selector {
+    width: 100%;
+    height: 32px;
+    padding: 0 11px;
+  }
+  .sunmao-select-single:not(.sunmao-select-customize-input)
+    .sunmao-select-selector
+    .sunmao-select-selection-search-input {
+    height: 30px;
+  }
+  .sunmao-select-single:not(.sunmao-select-customize-input)
+    .sunmao-select-selector::after {
+    line-height: 30px;
+  }
+  .sunmao-select-single.sunmao-select-customize-input .sunmao-select-selector::after {
+    display: none;
+  }
+  .sunmao-select-single.sunmao-select-customize-input
+    .sunmao-select-selector
+    .sunmao-select-selection-search {
+    position: static;
+    width: 100%;
+  }
+  .sunmao-select-single.sunmao-select-customize-input
+    .sunmao-select-selector
+    .sunmao-select-selection-placeholder {
+    position: absolute;
+    right: 0;
+    left: 0;
+    padding: 0 11px;
+  }
+  .sunmao-select-single.sunmao-select-customize-input
+    .sunmao-select-selector
+    .sunmao-select-selection-placeholder::after {
+    display: none;
+  }
+  .sunmao-select-single.sunmao-select-lg:not(.sunmao-select-customize-input)
+    .sunmao-select-selector {
+    height: 40px;
+  }
+  .sunmao-select-single.sunmao-select-lg:not(.sunmao-select-customize-input)
+    .sunmao-select-selector::after,
+  .sunmao-select-single.sunmao-select-lg:not(.sunmao-select-customize-input)
+    .sunmao-select-selector
+    .sunmao-select-selection-item,
+  .sunmao-select-single.sunmao-select-lg:not(.sunmao-select-customize-input)
+    .sunmao-select-selector
+    .sunmao-select-selection-placeholder {
+    line-height: 38px;
+  }
+  .sunmao-select-single.sunmao-select-lg:not(.sunmao-select-customize-input):not(.sunmao-select-customize-input)
+    .sunmao-select-selection-search-input {
+    height: 38px;
+  }
+  .sunmao-select-single.sunmao-select-sm:not(.sunmao-select-customize-input)
+    .sunmao-select-selector {
+    height: 24px;
+  }
+  .sunmao-select-single.sunmao-select-sm:not(.sunmao-select-customize-input)
+    .sunmao-select-selector::after,
+  .sunmao-select-single.sunmao-select-sm:not(.sunmao-select-customize-input)
+    .sunmao-select-selector
+    .sunmao-select-selection-item,
+  .sunmao-select-single.sunmao-select-sm:not(.sunmao-select-customize-input)
+    .sunmao-select-selector
+    .sunmao-select-selection-placeholder {
+    line-height: 22px;
+  }
+  .sunmao-select-single.sunmao-select-sm:not(.sunmao-select-customize-input):not(.sunmao-select-customize-input)
+    .sunmao-select-selection-search-input {
+    height: 22px;
+  }
+  .sunmao-select-single.sunmao-select-sm:not(.sunmao-select-customize-input)
+    .sunmao-select-selection-search {
+    right: 7px;
+    left: 7px;
+  }
+  .sunmao-select-single.sunmao-select-sm:not(.sunmao-select-customize-input)
+    .sunmao-select-selector {
+    padding: 0 7px;
+  }
+  .sunmao-select-single.sunmao-select-sm:not(.sunmao-select-customize-input).sunmao-select-show-arrow
+    .sunmao-select-selection-search {
+    right: 28px;
+  }
+  .sunmao-select-single.sunmao-select-sm:not(.sunmao-select-customize-input).sunmao-select-show-arrow
+    .sunmao-select-selection-item,
+  .sunmao-select-single.sunmao-select-sm:not(.sunmao-select-customize-input).sunmao-select-show-arrow
+    .sunmao-select-selection-placeholder {
+    padding-right: 21px;
+  }
+  .sunmao-select-single.sunmao-select-lg:not(.sunmao-select-customize-input)
+    .sunmao-select-selector {
+    padding: 0 11px;
+  }
+  .sunmao-select-selection-overflow {
+    position: relative;
+    display: flex;
+    flex: auto;
+    flex-wrap: wrap;
+    max-width: 100%;
+  }
+  .sunmao-select-selection-overflow-item {
+    flex: none;
+    align-self: center;
+    max-width: 100%;
+  }
+  .sunmao-select-multiple .sunmao-select-selector {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 1px 4px;
+  }
+  .sunmao-select-show-search.sunmao-select-multiple .sunmao-select-selector {
+    cursor: text;
+  }
+  .sunmao-select-disabled.sunmao-select-multiple .sunmao-select-selector {
+    background: #f5f5f5;
+    cursor: not-allowed;
+  }
+  .sunmao-select-multiple .sunmao-select-selector::after {
+    display: inline-block;
+    width: 0;
+    margin: 2px 0;
+    line-height: 24px;
+    content: '\\a0';
+  }
+  .sunmao-select-multiple.sunmao-select-show-arrow .sunmao-select-selector,
+  .sunmao-select-multiple.sunmao-select-allow-clear .sunmao-select-selector {
+    padding-right: 24px;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-item {
+    position: relative;
+    display: flex;
+    flex: none;
+    box-sizing: border-box;
+    max-width: 100%;
+    height: 24px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    line-height: 22px;
+    background: #f5f5f5;
+    border: 1px solid #f0f0f0;
+    border-radius: 2px;
+    cursor: default;
+    transition: font-size 0.3s, line-height 0.3s, height 0.3s;
+    user-select: none;
+    margin-inline-end: 4px;
+    padding-inline-start: 8px;
+    padding-inline-end: 4px;
+  }
+  .sunmao-select-disabled.sunmao-select-multiple .sunmao-select-selection-item {
+    color: #bfbfbf;
+    border-color: #d9d9d9;
+    cursor: not-allowed;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-item-content {
+    display: inline-block;
+    margin-right: 4px;
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-item-remove {
+    color: inherit;
+    font-style: normal;
+    line-height: 0;
+    text-align: center;
+    text-transform: none;
+    vertical-align: -0.125em;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: inline-block;
+    color: rgba(0, 0, 0, 0.45);
+    font-weight: bold;
+    font-size: 10px;
+    line-height: inherit;
+    cursor: pointer;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-item-remove > * {
+    line-height: 1;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-item-remove svg {
+    display: inline-block;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-item-remove::before {
+    display: none;
+  }
+  .sunmao-select-multiple
+    .sunmao-select-selection-item-remove
+    .sunmao-select-multiple
+    .sunmao-select-selection-item-remove-icon {
+    display: block;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-item-remove > .anticon {
+    vertical-align: middle;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-item-remove:hover {
+    color: rgba(0, 0, 0, 0.75);
+  }
+  .sunmao-select-multiple
+    .sunmao-select-selection-overflow-item
+    + .sunmao-select-selection-overflow-item
+    .sunmao-select-selection-search {
+    margin-inline-start: 0;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-search {
+    position: relative;
+    max-width: 100%;
+    margin-inline-start: 7px;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-search-input,
+  .sunmao-select-multiple .sunmao-select-selection-search-mirror {
+    height: 24px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+      Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', 'Noto Color Emoji';
+    line-height: 24px;
+    transition: all 0.3s;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-search-input {
+    width: 100%;
+    min-width: 4.1px;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-search-mirror {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    white-space: pre;
+    visibility: hidden;
+  }
+  .sunmao-select-multiple .sunmao-select-selection-placeholder {
+    position: absolute;
+    top: 50%;
+    right: 11px;
+    left: 11px;
+    transform: translateY(-50%);
+    transition: all 0.3s;
+  }
+  .sunmao-select-multiple.sunmao-select-lg .sunmao-select-selector::after {
+    line-height: 32px;
+  }
+  .sunmao-select-multiple.sunmao-select-lg .sunmao-select-selection-item {
+    height: 32px;
+    line-height: 30px;
+  }
+  .sunmao-select-multiple.sunmao-select-lg .sunmao-select-selection-search {
+    height: 32px;
+    line-height: 32px;
+  }
+  .sunmao-select-multiple.sunmao-select-lg .sunmao-select-selection-search-input,
+  .sunmao-select-multiple.sunmao-select-lg .sunmao-select-selection-search-mirror {
+    height: 32px;
+    line-height: 30px;
+  }
+  .sunmao-select-multiple.sunmao-select-sm .sunmao-select-selector::after {
+    line-height: 16px;
+  }
+  .sunmao-select-multiple.sunmao-select-sm .sunmao-select-selection-item {
+    height: 16px;
+    line-height: 14px;
+  }
+  .sunmao-select-multiple.sunmao-select-sm .sunmao-select-selection-search {
+    height: 16px;
+    line-height: 16px;
+  }
+  .sunmao-select-multiple.sunmao-select-sm .sunmao-select-selection-search-input,
+  .sunmao-select-multiple.sunmao-select-sm .sunmao-select-selection-search-mirror {
+    height: 16px;
+    line-height: 14px;
+  }
+  .sunmao-select-multiple.sunmao-select-sm .sunmao-select-selection-placeholder {
+    left: 7px;
+  }
+  .sunmao-select-multiple.sunmao-select-sm .sunmao-select-selection-search {
+    margin-inline-start: 3px;
+  }
+  .sunmao-select-multiple.sunmao-select-lg .sunmao-select-selection-item {
+    height: 32px;
+    line-height: 32px;
+  }
+  .sunmao-select-disabled .sunmao-select-selection-item-remove {
+    display: none;
+  }
+  .sunmao-select {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .sunmao-select-borderless .sunmao-select-selector {
+    border-color: transparent !important;
+  }
+  .sunmao-select:not(.sunmao-select-customize-input) .sunmao-select-selector {
+    position: relative;
+    background-color: var(--chakra-colors-gray-100);
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+  .sunmao-select:not(.sunmao-select-customize-input):hover .sunmao-select-selector {
+    background-color: var(--chakra-colors-gray-200);
+  }
+
+  .sunmao-select:not(.sunmao-select-customize-input) .sunmao-select-selector input {
+    cursor: pointer;
+  }
+  .sunmao-select-show-search.sunmao-select:not(.sunmao-select-customize-input)
+    .sunmao-select-selector {
+    cursor: text;
+  }
+  .sunmao-select-show-search.sunmao-select:not(.sunmao-select-customize-input)
+    .sunmao-select-selector
+    input {
+    cursor: auto;
+  }
+  .sunmao-input-rtl
+    .sunmao-select-focused:not(.sunmao-select-disabled).sunmao-select:not(.sunmao-select-customize-input)
+    .sunmao-select-selector {
+    border-right-width: 0;
+    border-left-width: 1px !important;
+  }
+  .sunmao-select-disabled.sunmao-select:not(.sunmao-select-customize-input)
+    .sunmao-select-selector {
+    color: rgba(0, 0, 0, 0.25);
+    background: #f5f5f5;
+    cursor: not-allowed;
+  }
+  .sunmao-select-multiple.sunmao-select-disabled.sunmao-select:not(.sunmao-select-customize-input)
+    .sunmao-select-selector {
+    background: #f5f5f5;
+  }
+  .sunmao-select-disabled.sunmao-select:not(.sunmao-select-customize-input)
+    .sunmao-select-selector
+    input {
+    cursor: not-allowed;
+  }
+  .sunmao-select:not(.sunmao-select-customize-input)
+    .sunmao-select-selector
+    .sunmao-select-selection-search-input {
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    appearance: none;
+  }
+  .sunmao-select:not(.sunmao-select-customize-input)
+    .sunmao-select-selector
+    .sunmao-select-selection-search-input::-webkit-search-cancel-button {
+    display: none;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-appearance: none;
+  }
+  .sunmao-input-rtl
+    .sunmao-select:not(.sunmao-select-disabled):hover
+    .sunmao-select-selector {
+    border-right-width: 0;
+    border-left-width: 1px !important;
+  }
+  .sunmao-select-selection-item {
+    flex: 1;
+    overflow: hidden;
+    font-weight: normal;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .sunmao-select-selection-placeholder {
+    flex: 1;
+    overflow: hidden;
+    color: #bfbfbf;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+  }
+  .sunmao-select-arrow {
+    display: inline-block;
+    color: inherit;
+    font-style: normal;
+    line-height: 0;
+    text-transform: none;
+    vertical-align: -0.125em;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: absolute;
+    top: 50%;
+    right: 11px;
+    display: flex;
+    align-items: center;
+    height: 12px;
+    margin-top: -6px;
+    color: rgba(0, 0, 0, 0.25);
+    font-size: 12px;
+    line-height: 1;
+    text-align: center;
+    pointer-events: none;
+  }
+  .sunmao-select-arrow > * {
+    line-height: 1;
+  }
+  .sunmao-select-arrow svg {
+    display: inline-block;
+  }
+  .sunmao-select-arrow::before {
+    display: none;
+  }
+  .sunmao-select-arrow .sunmao-select-arrow-icon {
+    display: block;
+  }
+  .sunmao-select-arrow .anticon {
+    vertical-align: top;
+    transition: transform 0.3s;
+  }
+  .sunmao-select-arrow .anticon > svg {
+    vertical-align: top;
+  }
+  .sunmao-select-arrow .anticon:not(.sunmao-select-suffix) {
+    pointer-events: auto;
+  }
+  .sunmao-select-disabled .sunmao-select-arrow {
+    cursor: not-allowed;
+  }
+  .sunmao-select-arrow > *:not(:last-child) {
+    margin-inline-end: 8px;
+  }
+  .sunmao-select-clear {
+    position: absolute;
+    top: 50%;
+    right: 11px;
+    z-index: 1;
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-top: -6px;
+    color: rgba(0, 0, 0, 0.25);
+    font-size: 12px;
+    font-style: normal;
+    line-height: 1;
+    text-align: center;
+    text-transform: none;
+    background: var(--chakra-colors-gray-200);
+    cursor: pointer;
+    opacity: 0;
+    transition: color 0.3s ease, opacity 0.15s ease;
+    text-rendering: auto;
+  }
+  .sunmao-select-clear::before {
+    display: block;
+  }
+  .sunmao-select-clear:hover {
+    color: rgba(0, 0, 0, 0.45);
+  }
+  .sunmao-select:hover .sunmao-select-clear {
+    opacity: 1;
+  }
+  .sunmao-select-dropdown {
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.85);
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+    z-index: 1050;
+    box-sizing: border-box;
+    overflow: hidden;
+    font-size: 14px;
+    font-variant: initial;
+    background-color: #fff;
+    border-radius: 2px;
+    outline: none;
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    border: var(--chakra-borders-none);
+    border-color: inherit;
+    border-radius: var(--chakra-radii-md);
+    box-shadow: var(--chakra-shadows-base);
+    z-index: var(--chakra-zIndices-popover);
+    padding-top: var(--chakra-space-4);
+    padding-bottom: var(--chakra-space-4);
+  }
+  .sunmao-select-dropdown.'sunmao'-slide-up-enter.'sunmao'-slide-up-enter-active.sunmao-select-dropdown-placement-bottomLeft,
+  .sunmao-select-dropdown.'sunmao'-slide-up-appear.'sunmao'-slide-up-appear-active.sunmao-select-dropdown-placement-bottomLeft {
+    animation-name: antSlideUpIn;
+  }
+  .sunmao-select-dropdown.'sunmao'-slide-up-enter.'sunmao'-slide-up-enter-active.sunmao-select-dropdown-placement-topLeft,
+  .sunmao-select-dropdown.'sunmao'-slide-up-appear.'sunmao'-slide-up-appear-active.sunmao-select-dropdown-placement-topLeft {
+    animation-name: antSlideDownIn;
+  }
+  .sunmao-select-dropdown.'sunmao'-slide-up-leave.'sunmao'-slide-up-leave-active.sunmao-select-dropdown-placement-bottomLeft {
+    animation-name: antSlideUpOut;
+  }
+  .sunmao-select-dropdown.'sunmao'-slide-up-leave.'sunmao'-slide-up-leave-active.sunmao-select-dropdown-placement-topLeft {
+    animation-name: antSlideDownOut;
+  }
+  .sunmao-select-dropdown-hidden {
+    display: none;
+  }
+  .sunmao-select-dropdown-empty {
+    color: rgba(0, 0, 0, 0.25);
+  }
+  .sunmao-select-item-empty {
+    position: relative;
+    display: block;
+    min-height: 32px;
+    padding: 5px 12px;
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 22px;
+    color: rgba(0, 0, 0, 0.25);
+  }
+  .sunmao-select-item {
+    position: relative;
+    display: block;
+    min-height: 32px;
+    padding: 5px 12px;
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 22px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+  }
+  .sunmao-select-item-group {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    cursor: default;
+  }
+  .sunmao-select-item-option {
+    display: flex;
+  }
+  .sunmao-select-item-option-content {
+    flex: auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .sunmao-select-item-option-state {
+    flex: none;
+  }
+  .sunmao-select-item-option-active:not(.sunmao-select-item-option-disabled) {
+    background-color: #f5f5f5;
+  }
+  .sunmao-select-item-option-selected:not(.sunmao-select-item-option-disabled) {
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 600;
+    background-color: #e8f4ff;
+  }
+  .sunmao-select-item-option-selected:not(.sunmao-select-item-option-disabled)
+    .sunmao-select-item-option-state {
+    color: #1890ff;
+  }
+  .sunmao-select-item-option-disabled {
+    color: rgba(0, 0, 0, 0.25);
+    cursor: not-allowed;
+  }
+  .sunmao-select-item-option-disabled.sunmao-select-item-option-selected {
+    background-color: #f5f5f5;
+  }
+  .sunmao-select-item-option-grouped {
+    padding-left: 24px;
+  }
+`;
--- a/packages/editor-sdk/src/components/Select/utils.tsx
+++ b/packages/editor-sdk/src/components/Select/utils.tsx
@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  ChevronDownIcon,
+  CheckIcon,
+  SmallCloseIcon,
+  SearchIcon,
+  CloseIcon,
+} from '@chakra-ui/icons';
+import { Spinner } from '@chakra-ui/react';
+
+type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
+
+export default function getIcons({
+  suffixIcon,
+  clearIcon,
+  menuItemSelectedIcon,
+  removeIcon,
+  loading,
+  multiple,
+  prefixCls,
+  showArrow,
+}: {
+  suffixIcon?: React.ReactNode;
+  clearIcon?: RenderNode;
+  menuItemSelectedIcon?: RenderNode;
+  removeIcon?: RenderNode;
+  loading?: boolean;
+  multiple?: boolean;
+  prefixCls: string;
+  showArrow?: boolean;
+}) {
+  let mergedClearIcon = clearIcon;
+  if (!clearIcon) {
+    mergedClearIcon = <CloseIcon />;
+  }
+
+  let mergedSuffixIcon = null;
+  if (suffixIcon !== undefined) {
+    mergedSuffixIcon = !!showArrow && suffixIcon;
+  } else if (loading) {
+    mergedSuffixIcon = !!showArrow && <Spinner w="10px" h="10px" />;
+  } else {
+    const iconCls = `${prefixCls}-suffix`;
+    mergedSuffixIcon = ({ open, showSearch }: { open: boolean; showSearch: boolean }) => {
+      if (open && showSearch) {
+        return !!showArrow && <SearchIcon className={iconCls} />;
+      }
+      return !!showArrow && <ChevronDownIcon className={iconCls} />;
+    };
+  }
+
+  let mergedItemIcon = null;
+  if (menuItemSelectedIcon !== undefined) {
+    mergedItemIcon = menuItemSelectedIcon;
+  } else if (multiple) {
+    mergedItemIcon = <CheckIcon />;
+  } else {
+    mergedItemIcon = null;
+  }
+
+  let mergedRemoveIcon = null;
+  if (removeIcon !== undefined) {
+    mergedRemoveIcon = removeIcon;
+  } else {
+    mergedRemoveIcon = <SmallCloseIcon />;
+  }
+
+  return {
+    clearIcon: mergedClearIcon,
+    suffixIcon: mergedSuffixIcon,
+    itemIcon: mergedItemIcon,
+    removeIcon: mergedRemoveIcon,
+  };
+}
--- a/packages/editor-sdk/src/components/Widgets/EventWidget.tsx
+++ b/packages/editor-sdk/src/components/Widgets/EventWidget.tsx
@ -10,6 +10,7 @@ import { RecordWidget } from './RecordField';
 import { SpecWidget } from './SpecWidget';
 import { observer } from 'mobx-react-lite';
 import { CORE_VERSION, CoreWidgetName, parseTypeBox } from '@sunmao-ui/shared';
+import { Select as RcSelect } from '../Select';

 const EventWidgetOptions = Type.Object({});

@ -152,10 +153,9 @@ export const EventWidget: React.FC<WidgetProps<EventWidgetOptionsType>> = observ
    }, [value, updateMethods]);

    const onTargetComponentChange = useCallback(
-      (e: React.ChangeEvent<HTMLSelectElement>) => {
-        updateMethods(e.target.value);
-        formik.handleChange(e);
-        formik.setFieldValue('method', { name: '', parameters: {} });
+      (value: string) => {
+        updateMethods(value);
+        formik.setFieldValue('componentId', value);
      },
      [updateMethods, formik]
    );
@ -202,19 +202,21 @@ export const EventWidget: React.FC<WidgetProps<EventWidgetOptionsType>> = observ
        <FormLabel fontSize="14px" fontWeight="normal">
          Target Component
        </FormLabel>
-        <Select
-          name="componentId"
+        <RcSelect
+          showSearch
          onBlur={onSubmit}
+          bordered={false}
          onChange={onTargetComponentChange}
          placeholder="Select Target Component"
-          value={formik.values.componentId}
+          style={{ width: '100%' }}
+          value={formik.values.componentId === '' ? undefined : formik.values.componentId}
        >
          {[{ id: GLOBAL_UTIL_METHOD_ID }].concat(components).map(c => (
-            <option key={c.id} value={c.id}>
+            <RcSelect.Option key={c.id} value={c.id}>
              {c.id}
-            </option>
+            </RcSelect.Option>
          ))}
-        </Select>
+        </RcSelect>
      </FormControl>
    );
    const methodField = (
--- a/yarn.lock
+++ b/yarn.lock
@ -1190,6 +1190,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1", "@babel/runtime@^7.18.3":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.16.7":
  version "7.16.7"
  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz"
@ -4712,7 +4719,7 @@ cjs-module-lexer@^1.0.0:
  resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==

-classnames@2.3.1:
+classnames@2.3.1, classnames@2.x, classnames@^2.2.1, classnames@^2.2.6:
  version "2.3.1"
  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@ -5452,6 +5459,11 @@ dom-accessibility-api@^0.5.9:
  resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz"
  integrity sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g==

+dom-align@^1.7.0:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.3.tgz#a36d02531dae0eefa2abb0c4db6595250526f103"
+  integrity sha512-Gj9hZN3a07cbR6zviMUBOMPdWxYhbMI+x+WS0NAIu2zFZmbK8ys9R79g+iG9qLnlCwpFoaB+fKy8Pdv470GsPA==
+
 dom-helpers@^5.0.1:
  version "5.2.1"
  resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
@ -9859,6 +9871,89 @@ quick-lru@^4.0.1:
  resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz"
  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==

+rc-align@^4.0.0:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-4.0.12.tgz#065b5c68a1cc92a00800c9239320d9fdf5f16207"
+  integrity sha512-3DuwSJp8iC/dgHzwreOQl52soj40LchlfUHtgACOUtwGuoFIOVh6n/sCpfqCU8kO5+iz6qR0YKvjgB8iPdE3aQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    dom-align "^1.7.0"
+    lodash "^4.17.21"
+    rc-util "^5.3.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-motion@^2.0.0, rc-motion@^2.0.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.6.0.tgz#c60c3e7f15257f55a8cd7794a539f0e2cc751399"
+  integrity sha512-1MDWA9+i174CZ0SIDenSYm2Wb9YbRkrexjZWR0CUFu7D6f23E8Y0KsTgk9NGOLJsGak5ELZK/Y5lOlf5wQdzbw==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-util "^5.21.0"
+
+rc-overflow@^1.0.0:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/rc-overflow/-/rc-overflow-1.2.6.tgz#e99fabea04ce4fb13f0dd8835aef4e4cdd4c15a2"
+  integrity sha512-YqbocgzuQxfq2wZy72vdAgrgzzEuM/5d4gF9TBEodCpXPbUeXGrUXNm1J6G1MSkCU2N0ePIgCEu5qD/0Ldi63Q==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.19.2"
+
+rc-resize-observer@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.2.0.tgz#9f46052f81cdf03498be35144cb7c53fd282c4c7"
+  integrity sha512-6W+UzT3PyDM0wVCEHfoW3qTHPTvbdSgiA43buiy8PzmeMnfgnDeb9NjdimMXMl3/TcrvvWl5RRVdp+NqcR47pQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    rc-util "^5.15.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-select@^14.1.5:
+  version "14.1.5"
+  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.1.5.tgz#9e40dfdfd207d1d90c93121d86c6fbeb4ec0281c"
+  integrity sha512-CvcmylICKSrPWCJMgGiHqozVhco9kJpQSj/x5wqLN9JStpDFD1oMNYiJYfkMjQ1LxZkN/eZpL1D2KUXJhXd8rw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.0.1"
+    rc-overflow "^1.0.0"
+    rc-trigger "^5.0.4"
+    rc-util "^5.16.1"
+    rc-virtual-list "^3.2.0"
+
+rc-trigger@^5.0.4:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-5.3.1.tgz#acafadf3eaf384e7f466c303bfa0f34c8137d7b8"
+  integrity sha512-5gaFbDkYSefZ14j2AdzucXzlWgU2ri5uEjkHvsf1ynRhdJbKxNOnw4PBZ9+FVULNGFiDzzlVF8RJnR9P/xrnKQ==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    classnames "^2.2.6"
+    rc-align "^4.0.0"
+    rc-motion "^2.0.0"
+    rc-util "^5.19.2"
+
+rc-util@^5.15.0, rc-util@^5.16.1, rc-util@^5.19.2, rc-util@^5.21.0, rc-util@^5.3.0:
+  version "5.21.5"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.21.5.tgz#6e2a5699f820ba915f43f11a4b7dfb0b0672d0fa"
+  integrity sha512-ip7HqX37Cy/RDl9MlrFp+FbcKnsWZ22sF5MS5eSpYLtg5MpC0TMqGb5ukBatoOhgjnLL+eJGR6e7YAJ/dhK09A==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^16.12.0"
+    shallowequal "^1.1.0"
+
+rc-virtual-list@^3.2.0:
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.8.tgz#c24c10c6940546b7e2a5e9809402c6716adfd26c"
+  integrity sha512-qSN+Rv4i/E7RCTvTMr1uZo7f3crJJg/5DekoCagydo9zsXrxj07zsFSxqizqW+ldGA16lwa8So/bIbV9Ofjddg==
+  dependencies:
+    classnames "^2.2.6"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.15.0"
+
 re-resizable@^6.9.5:
  version "6.9.5"
  resolved "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.5.tgz"
@ -9968,7 +10063,7 @@ react-input-autosize@^3.0.0:
  dependencies:
    prop-types "^15.5.8"

-react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==