style(SearchSelect & Form): 样式修改&规范样式命名, Fix Form data type issue (#538)

* fix(Form): 修复ref获取不到表单方法

* fix(Form):使用useLayoutEffect替换useEffect绑定绑定ForwardedRef

* refactor:(Form) 修改Ref类型定义

* fix(Form): 修复无法重置(initialValue)表单问题

* fix(Form): 类型导出错误

* feat(search-select):增加多选功能

* fix(form):增加设置表单值方法

* feat(form):增加必传表单项标注 #534

* fix(search-select):增加Tag依赖

* fix(form):增加获取异常信息方法

* fix(form):修复afterSubmit回调失效问题

* fix(search-select):缺失依赖

* refactor(search-select):重命名类型名称

* style(search-select): 多选select样式

* style(search-select): 多选select下拉弹层样式

* fix(Table):data不支持对象内包含布尔类型 #517

* style(search-select):规范样式命名

* style(SearchSelect): 规范命名

.gitignore

@@ -29,4 +29,4 @@ yarn.lock
 # IDEA
 *.iml
 *.ipr
-*.iws
+*.iws

packages/react-search-select/src/index.tsx

@@ -38,7 +38,7 @@ export default function SearchSelect(props: SearchSelectProps) {
     size = 'default',
     option = [],
     loading = false,
-    prefixCls,
+    prefixCls = 'w-search-select',
     className,
     mode = 'single',
     style,
@@ -53,6 +53,7 @@ export default function SearchSelect(props: SearchSelectProps) {
     ...others
   } = props;
 
+  const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
   const isMultiple = useMemo(() => mode === 'multiple', [mode]);
   const [innerIsOpen, setInnerIsOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState<Array<SearchSelectOptionData>>(
@@ -145,6 +146,7 @@ export default function SearchSelect(props: SearchSelectProps) {
 
   return (
     <Dropdown
+      className={cls}
       trigger="focus"
       style={{ marginTop: 5 }}
       disabled={option && option.length > 0 ? false : true}
@@ -160,6 +162,7 @@ export default function SearchSelect(props: SearchSelectProps) {
           style={{
             minHeight: 25,
             maxHeight: 280,
+            minWidth: style?.minWidth || 200,
             overflowY: 'scroll',
             width: divRef.current ? divRef.current.offsetWidth : 'auto',
           }}
@@ -205,7 +208,7 @@ export default function SearchSelect(props: SearchSelectProps) {
             selectedValue.map((item, index) => {
               return (
                 <Tag
-                  style={{ fontSize: 15, display: 'flex', alignItems: 'center' }}
+                  style={{ margin: '0px 3px 3px 0px', display: 'flex', alignItems: 'center' }}
                   key={index}
                   closable
                   onClose={() => setSelectedValue(removeSelectItem(index))}
@@ -217,7 +220,7 @@ export default function SearchSelect(props: SearchSelectProps) {
             })}
           <Input
             style={{ flex: 1, boxShadow: 'none' }}
-            className={isMultiple ? `inptContents` : undefined}
+            className={isMultiple ? `${prefixCls}-input-contents` : undefined}
             readOnly={!showSearch}
             size={size}
             disabled={disabled}

packages/react-search-select/src/style/index.less

@@ -1,8 +1,19 @@
-.inptContents {
-  input {
-    box-shadow: none;
-    &:hover:after {
-      box-shadow: 'none' !important;
+@w-search-select: ~'w-search-select';
+
+.@{w-search-select} {
+  &-input-contents {
+    input {
+      box-shadow: none;
+    }
+
+    .w-input-inner {
+      &:hover {
+        box-shadow: none !important;
+      }
+
+      &:focus {
+        box-shadow: none !important;
+      }
     }
   }
 }

packages/react-table/src/index.tsx

@@ -25,7 +25,7 @@ export type TableColumns = {
 export interface TableProps extends IProps, Omit<HTMLDivProps, 'title'> {
   prefixCls?: string;
   columns?: TableColumns[];
-  data?: Record<string, string | number | JSX.Element>[];
+  data?: Record<string, string | number | JSX.Element | boolean>[];
   title?: React.ReactNode;
   footer?: React.ReactNode;
   bordered?: boolean;