From e5d6ead30ef4d0c12f70e73ad2098c0eb682d150 Mon Sep 17 00:00:00 2001 From: xzdry Date: Mon, 13 Jun 2022 17:44:08 +0800 Subject: [PATCH] feat: a more comprehensive select component based on rc-select --- packages/editor-sdk/package.json | 1 + .../editor-sdk/src/components/Select/index.ts | 1 + .../src/components/Select/select.tsx | 125 ++++ .../editor-sdk/src/components/Select/style.ts | 633 ++++++++++++++++++ .../src/components/Select/utils.tsx | 74 ++ .../src/components/Widgets/EventWidget.tsx | 22 +- yarn.lock | 99 ++- 7 files changed, 943 insertions(+), 12 deletions(-) create mode 100644 packages/editor-sdk/src/components/Select/index.ts create mode 100644 packages/editor-sdk/src/components/Select/select.tsx create mode 100644 packages/editor-sdk/src/components/Select/style.ts create mode 100644 packages/editor-sdk/src/components/Select/utils.tsx diff --git a/packages/editor-sdk/package.json b/packages/editor-sdk/package.json index d798b194..b4ad9045 100644 --- 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", diff --git a/packages/editor-sdk/src/components/Select/index.ts b/packages/editor-sdk/src/components/Select/index.ts new file mode 100644 index 00000000..c7396734 --- /dev/null +++ b/packages/editor-sdk/src/components/Select/index.ts @@ -0,0 +1 @@ +export * from './select'; diff --git a/packages/editor-sdk/src/components/Select/select.tsx b/packages/editor-sdk/src/components/Select/select.tsx new file mode 100644 index 00000000..cac1fe62 --- /dev/null +++ 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, 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, + ref: React.Ref +) => { + 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 ( +
+ +
+ ); +}; + +const Select = React.forwardRef(SelectMain) as unknown as (< + ValueType = any, + OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType +>( + props: React.PropsWithChildren> & { + ref?: React.Ref; + } +) => React.ReactElement) & { + Option: typeof Option; + OptGroup: typeof OptGroup; +}; + +Select.Option = Option; +Select.OptGroup = OptGroup; + +export { Select }; diff --git a/packages/editor-sdk/src/components/Select/style.ts b/packages/editor-sdk/src/components/Select/style.ts new file mode 100644 index 00000000..1d4f397b --- /dev/null +++ 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; + } +`; diff --git a/packages/editor-sdk/src/components/Select/utils.tsx b/packages/editor-sdk/src/components/Select/utils.tsx new file mode 100644 index 00000000..8b508f39 --- /dev/null +++ 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 = ; + } + + let mergedSuffixIcon = null; + if (suffixIcon !== undefined) { + mergedSuffixIcon = !!showArrow && suffixIcon; + } else if (loading) { + mergedSuffixIcon = !!showArrow && ; + } else { + const iconCls = `${prefixCls}-suffix`; + mergedSuffixIcon = ({ open, showSearch }: { open: boolean; showSearch: boolean }) => { + if (open && showSearch) { + return !!showArrow && ; + } + return !!showArrow && ; + }; + } + + let mergedItemIcon = null; + if (menuItemSelectedIcon !== undefined) { + mergedItemIcon = menuItemSelectedIcon; + } else if (multiple) { + mergedItemIcon = ; + } else { + mergedItemIcon = null; + } + + let mergedRemoveIcon = null; + if (removeIcon !== undefined) { + mergedRemoveIcon = removeIcon; + } else { + mergedRemoveIcon = ; + } + + return { + clearIcon: mergedClearIcon, + suffixIcon: mergedSuffixIcon, + itemIcon: mergedItemIcon, + removeIcon: mergedRemoveIcon, + }; +} diff --git a/packages/editor-sdk/src/components/Widgets/EventWidget.tsx b/packages/editor-sdk/src/components/Widgets/EventWidget.tsx index 7b6bdd18..174134e5 100644 --- 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> = observ }, [value, updateMethods]); const onTargetComponentChange = useCallback( - (e: React.ChangeEvent) => { - 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> = observ Target Component - + ); const methodField = ( diff --git a/yarn.lock b/yarn.lock index 1704b9cf..e8dfd7ce 100644 --- 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==