@rainbow-oh/yee-c 0.1.0 → 0.2.0

package/src/Radio/style/index.less

@@ -9,15 +9,9 @@
     gap: var(--yee-radio-group-gap);
 
     &-small {
-      @{pls} {
-        padding: var(--yee-radio-small-padding, 2px 4px);
-      }
     }
 
     &-large {
-      @{pls} {
-        padding: var(--yee-radio-large-padding, 6px 12px);
-      }
     }
 
     &-solid {
@@ -67,6 +61,19 @@
           content: '';
         }
 
+        &::before {
+          position: absolute;
+          z-index: 1;
+          right: 5px;
+          top: 14px;
+          width: 4px;
+          height: 8px;
+          border: 2px solid #fff;
+          border-width: 0 2px 2px 0;
+          transform: rotate(45deg);
+          content: '';
+        }
+
         z-index: 1;
       }
 

package/src/Select/option.tsx

@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
 import { OptionsCtx } from './options';
 
 const Option = (props: any) => {
-  const { label, value, disabled, title } = props;
+  const { label, value, disabled, title, dataTestId } = props;
   const { prefixCls, selectedKeys, focusedKey, onSelect } =
     useContext(OptionsCtx);
 
@@ -37,6 +37,7 @@ const Option = (props: any) => {
       role="option"
       tabIndex={disabled ? undefined : 0}
       title={htmlTitle}
+      data-testid={dataTestId}
     >
       {label}
     </div>

package/src/Select/options.tsx

@@ -16,6 +16,7 @@ const Options = forwardRef((props: any, ref: React.Ref<HTMLDivElement>) => {
     popupStyle,
     selectedKeys,
     focusedKey,
+    dataTestId,
     onSelect,
     ...rest
   } = props;
@@ -37,8 +38,12 @@ const Options = forwardRef((props: any, ref: React.Ref<HTMLDivElement>) => {
         <OptionsCtx.Provider
           value={{ prefixCls, selectedKeys, focusedKey, onSelect }}
         >
-          {options.map((option: any) => (
-            <Option {...option} key={option.value} />
+          {options.map((option: any, index: number) => (
+            <Option
+              {...option}
+              key={option.value}
+              dataTestId={`${dataTestId}-${index}`}
+            />
           ))}
         </OptionsCtx.Provider>
       )}

package/src/Select/select.tsx

@@ -140,6 +140,7 @@ const Select = (baseprops: SelectProps) => {
       options={filteredOpts}
       focusedKey={focusedKey}
       selectedKeys={mergedValue}
+      dataTestId={rest['data-testid']}
       onSelect={handleSelect}
       onClose={() => setOpen(false)}
       ref={popupRef}

package/src/Skeleton/demo/basic.tsx

@@ -1,9 +1,9 @@
-import { Card, Skeleton, Space } from '@rainbow-oh/yee-c';
+import { Card, Skeleton } from '@rainbow-oh/yee-c';
 import React from 'react';
 
 export default () => {
   return (
-    <Space direction="vertical" gap={16} style={{ width: '100%' }}>
+    <div>
       <Card title="Basic Placeholder">
         <Skeleton />
       </Card>
@@ -19,6 +19,6 @@ export default () => {
           paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}
         />
       </Card>
-    </Space>
+    </div>
   );
 };

package/src/Space/interface.ts

@@ -27,6 +27,10 @@ export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
    * Alignment
    */
   align?: 'center' | 'start' | 'end' | 'baseline' | 'flex-start';
+  /***
+   * Justify content
+   * */
+  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
   /**
    * Whether to take up the entire row
    */

package/src/Space/space.tsx

@@ -14,6 +14,7 @@ const Space = forwardRef<HTMLDivElement, SpaceProps>((baseprops, ref) => {
     gap = 16,
     direction = 'horizontal',
     align = direction === 'horizontal' ? 'center' : undefined,
+    justify,
     wrap,
     className,
     style,
@@ -45,25 +46,47 @@ const Space = forwardRef<HTMLDivElement, SpaceProps>((baseprops, ref) => {
     if (!children) {
       return null;
     }
+
+    const loop = (childs: React.ReactNode[]) => {
+      let res = [] as React.ReactElement[];
+
+      childs.forEach((child, index) => {
+        const isItem =
+          React.isValidElement(child) && (child.type as any).isSpaceItem;
+        const itemClassName = isItem
+          ? (child.props as any).className
+          : undefined;
+        const itemStyle = isItem ? (child.props as any).style : undefined;
+        const itemChildren = isItem ? (child.props as any).children : child;
+
+        if (React.isValidElement(child) && child.type === React.Fragment) {
+          res = res.concat(
+            loop(React.Children.toArray((child.props as any).children)),
+          );
+        } else {
+          res.push(
+            <div
+              className={clsx(
+                `${prefixCls}-item`,
+                classNames?.item,
+                itemClassName,
+              )}
+              style={{ ...styles?.item, ...itemStyle }}
+              key={index}
+            >
+              {itemChildren}
+            </div>,
+          );
+        }
+      });
+      return res;
+    };
+
     const childs = React.Children.toArray(children).filter(
       (child) => child !== null && child !== undefined,
     );
-    return childs.map((child, index) => {
-      const isItem =
-        React.isValidElement(child) && (child.type as any).isSpaceItem;
-      const itemClassName = isItem ? (child.props as any).className : undefined;
-      const itemStyle = isItem ? (child.props as any).style : undefined;
-      const itemChildren = isItem ? (child.props as any).children : child;
-      return (
-        <div
-          className={clsx(`${prefixCls}-item`, classNames?.item, itemClassName)}
-          style={{ ...styles?.item, ...itemStyle }}
-          key={index}
-        >
-          {itemChildren}
-        </div>
-      );
-    });
+
+    return loop(childs);
   };
 
   const packed = pack();
@@ -76,6 +99,7 @@ const Space = forwardRef<HTMLDivElement, SpaceProps>((baseprops, ref) => {
         width: block ? '100%' : undefined,
         gap: gap + 'px',
         alignItems: getAlign(),
+        justifyContent: justify,
         ...style,
       }}
       ref={componentRef}

package/src/Splitter/demo/basic.tsx

@@ -6,12 +6,12 @@ export default () => {
     <div style={{ height: 300 }}>
       <Splitter>
         <Splitter.Item>
-          <div style={{ padding: 16, backgroundColor: '#f0f0f0' }}>
+          <div style={{ margin: 8, padding: 16, backgroundColor: '#f0f0f0' }}>
             Left Panel
           </div>
         </Splitter.Item>
         <Splitter.Item>
-          <div style={{ padding: 16, backgroundColor: '#e0e0e0' }}>
+          <div style={{ margin: 8, padding: 16, backgroundColor: '#e0e0e0' }}>
             Right Panel
           </div>
         </Splitter.Item>

package/src/Splitter/demo/vertical.tsx

@@ -3,15 +3,29 @@ import React from 'react';
 
 export default () => {
   return (
-    <div style={{ height: 300 }}>
+    <div style={{ height: 500 }}>
       <Splitter layout="vertical">
-        <Splitter.Item>
-          <div style={{ padding: 16, backgroundColor: '#f0f0f0' }}>
+        <Splitter.Item size={250}>
+          <div
+            style={{
+              marginBottom: 8,
+              padding: 16,
+              backgroundColor: '#f0f0f0',
+              height: '100%',
+            }}
+          >
             Top Panel
           </div>
         </Splitter.Item>
-        <Splitter.Item>
-          <div style={{ padding: 16, backgroundColor: '#e0e0e0' }}>
+        <Splitter.Item size={250}>
+          <div
+            style={{
+              marginTop: 8,
+              padding: 16,
+              backgroundColor: '#e0e0e0',
+              height: '100%',
+            }}
+          >
             Bottom Panel
           </div>
         </Splitter.Item>

package/src/Splitter/index.ts

@@ -1,7 +1,11 @@
 import InternalSplitter from './splitter';
 import Item from './splitter-item';
 
-export type { SplitterItemProps, SplitterProps } from './interface';
+export type {
+  SplitterItemProps,
+  PanelRect as SplitterPanelRect,
+  SplitterProps,
+} from './interface';
 
 type SplitterType = typeof InternalSplitter & {
   Item: typeof Item;

package/src/Splitter/interface.ts

@@ -1,5 +1,13 @@
 import type { DataAttributeProps } from '../utils/types';
 
+export type PanelRect = {
+  type: 'default' | 'percent' | 'auto';
+  size: number;
+  currentSize: number;
+  min?: string | number;
+  max?: string | number;
+};
+
 export interface SplitterItemProps {
   /**
    * custom item element class name prefix
@@ -65,14 +73,13 @@ export interface SplitterProps extends DataAttributeProps {
   /**
    * children
    */
-  children?: React.ReactElement[];
+  children?: Array<React.ReactElement | null>;
   /**
    * display border or not
    * */
   bordered?: boolean;
-  itemPadding?: number | string;
   /**
    * panel size change event
    * */
-  onResize?: (sizes: number[]) => void;
+  onResize?: (sizes: PanelRect[]) => void;
 }

package/src/Splitter/splitter-handler.tsx

@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React, { useContext, useRef } from 'react';
 import useMove from './hooks/useMove';
-import { PanelRect, SplitterCtx, SplitterWrapperCtx } from './splitter';
+import type { PanelRect } from './interface';
+import { SplitterCtx, SplitterWrapperCtx } from './splitter';
 
 interface SplitterHandlerProps {
   layout: 'horizontal' | 'vertical';
@@ -37,7 +38,7 @@ const SplitterHandler = ({
   const cref = useRef<HTMLDivElement>(null);
   const handler = useRef<HTMLDivElement | null>(null);
   const { refs } = useContext(SplitterWrapperCtx);
-  const { prefixCls } = useContext(SplitterCtx);
+  const { prefixCls, onResize } = useContext(SplitterCtx);
 
   const status = records[index - 1] || {};
   const next = records[index] || {};
@@ -85,6 +86,7 @@ const SplitterHandler = ({
         currentSize: s,
       };
       newState[index] = { ...newState[index], size: e, currentSize: e };
+      onResize?.(newState);
       return newState;
     });
   };

package/src/Splitter/splitter.tsx

@@ -4,7 +4,7 @@ import { GlobalContext } from '../Config-Provider';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import SplitterHandler from './splitter-handler';
 
-import type { SplitterItemProps, SplitterProps } from './interface';
+import type { PanelRect, SplitterItemProps, SplitterProps } from './interface';
 import './style/index.less';
 
 type SplitterWrapperCtxType = {
@@ -13,7 +13,7 @@ type SplitterWrapperCtxType = {
 
 type SplitterCtxType = {
   prefixCls: string;
-  onResize?: (sizes: number[]) => void;
+  onResize?: (sizes: PanelRect[]) => void;
 };
 
 export const SplitterWrapperCtx = React.createContext<SplitterWrapperCtxType>({
@@ -24,14 +24,6 @@ export const SplitterCtx = React.createContext<SplitterCtxType>({
   prefixCls: '',
 });
 
-export type PanelRect = {
-  type: 'default' | 'percent' | 'auto';
-  size: number;
-  currentSize: number;
-  min?: string | number;
-  max?: string | number;
-};
-
 const getPanelSize = (
   children: React.ReactNode,
   {
@@ -156,63 +148,66 @@ const Wrapper = ({ children, itemsSize, onClick, ...props }: any) => {
   const arr = React.Children.toArray(children);
 
   React.Children.forEach(children, (child, index) => {
-    const n = index + 1;
-    const { style } = child.props || {};
-    let currentSize;
-    let min = undefined;
-    let max = undefined;
-    if (itemsSize && itemsSize[index]) {
-      ({ currentSize, min, max } = itemsSize[index]);
-    }
+    if (React.isValidElement(child)) {
+      const n = index + 1;
+      const { style } = child.props || ({} as any);
+      let currentSize;
+      let min = undefined;
+      let max = undefined;
+      if (itemsSize && itemsSize[index]) {
+        ({ currentSize, min, max } = itemsSize[index]);
+      }
 
-    wrappered.push(
-      React.cloneElement(child, {
-        style: {
-          ...style, // If there is a border or other size-related design, it may cause calculation issues
-          flexBasis: currentSize,
-        },
-        min,
-        max,
-        index: n,
-        key: n,
-        ref: (el: HTMLDivElement) => {
-          refs.current[`item${n}`] = {
-            el: el,
-            props: child.props,
-            size: { min, max },
-          };
-        },
-      }),
-    );
-    const next = arr[index + 1];
+      wrappered.push(
+        React.cloneElement(child, {
+          // @ts-ignore
+          style: {
+            ...style, // If there is a border or other size-related design, it may cause calculation issues
+            flexBasis: currentSize,
+          },
+          min,
+          max,
+          index: n,
+          key: n,
+          ref: (el: HTMLDivElement) => {
+            refs.current[`item${n}`] = {
+              el: el,
+              props: child.props as SplitterItemProps,
+              size: { min, max },
+            };
+          },
+        }),
+      );
+      const next = arr[index + 1];
+
+      if (!next || !React.isValidElement(next)) {
+        return;
+      }
 
-    if (!next || !React.isValidElement(next)) {
-      return;
-    }
+      const { flexable, expandable } = child.props || ({} as any);
+      const { expandable: nextExpandable } = next.props || ({} as any);
 
-    const { flexable, expandable } = child.props || {};
-    const { expandable: nextExpandable } = next.props || ({} as any);
+      const _expandable = { start: false, end: false };
 
-    const _expandable = { start: false, end: false };
+      if (expandable) {
+        _expandable.start = true;
+      }
 
-    if (expandable) {
-      _expandable.start = true;
-    }
+      if (nextExpandable) {
+        _expandable.end = true;
+      }
 
-    if (nextExpandable) {
-      _expandable.end = true;
+      wrappered.push(
+        <SplitterHandler
+          {...props}
+          index={n}
+          flexable={flexable}
+          expandable={_expandable}
+          onClick={onClick}
+          key={`handler-${n}`}
+        />,
+      );
     }
-
-    wrappered.push(
-      <SplitterHandler
-        {...props}
-        index={n}
-        flexable={flexable}
-        expandable={_expandable}
-        onClick={onClick}
-        key={`handler-${n}`}
-      />,
-    );
   });
 
   return (

package/src/Splitter/style/index.less

@@ -10,8 +10,18 @@
       var(--yee-splitter-border-color);
   }
 
+  &-horizontal {
+    @{pls}-handler {
+      cursor: e-resize;
+    }
+  }
+
   &-vertical {
     flex-direction: column;
+
+    @{pls}-handler {
+      cursor: n-resize;
+    }
   }
 }
 
@@ -77,8 +87,19 @@
       transition:
         background 0.2s ease-in-out,
         opacity 0.2s ease-in-out;
+      border-radius: 2px;
       content: '';
     }
+
+    &:hover {
+      &::after {
+        background-color: color-mix(
+          in srgb,
+          var(--yee-splitter-handler-color),
+          black 20%
+        );
+      }
+    }
   }
 
   &-flexable {

package/src/Table/demo/size.tsx

@@ -1,4 +1,4 @@
-import { Space, Table } from '@rainbow-oh/yee-c';
+import { Table } from '@rainbow-oh/yee-c';
 import React from 'react';
 
 export default () => {
@@ -42,12 +42,12 @@ export default () => {
   ];
 
   return (
-    <Space direction="vertical" style={{ width: '100%' }}>
+    <div>
       <Table columns={columns} dataSource={dataSource} size="small" />
 
       <Table columns={columns} dataSource={dataSource} size="default" />
 
       <Table columns={columns} dataSource={dataSource} size="large" />
-    </Space>
+    </div>
   );
 };