x-ui-design 1.0.30 → 1.0.31-gamma.1

package/lib/components/Input/Input.tsx

@@ -1,228 +0,0 @@
-'use client';
-
-import React, {
-  ForwardedRef,
-  KeyboardEvent,
-  MouseEvent,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState
-} from 'react';
-import { clsx } from '../../helpers';
-import { RuleType, SyntheticBaseEvent, TargetProps } from '../../types';
-import { InputProps } from '../../types/input';
-import { prefixClsInput, prefixClsInputV3 } from '../../utils';
-import Textarea from './Textarea/Textarea';
-import { ErrorIcon } from '../Icons/Icons';
-import { applyMask, MASK_CHAR, MASK_REGEX, stripMask } from '../../helpers/mask';
-import './style.css';
-
-type InputHandle = {
-  focus: () => void;
-  input: HTMLInputElement | null;
-  blur: () => void;
-  nativeElement: HTMLInputElement | null;
-  setSelectionRange: (start: number, end: number) => void;
-}
-
-const InputComponent = React.forwardRef<InputHandle, InputProps>(({
-  size = 'large',
-  error,
-  suffix,
-  prefix,
-  addonAfter,
-  addonBefore,
-  onPressEnter,
-  disabled = false,
-  allowClear = false,
-  prefixCls = prefixClsInput,
-  prefixClsV3 = prefixClsInputV3,
-  className = '',
-  value = undefined,
-  iconRender,
-  noStyle,
-  feedbackIcons,
-  mask,
-  maskChar = MASK_CHAR,
-  maskRegex = MASK_REGEX,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  __injected,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  defaultValue,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  child,
-  ...props
-}, ref: ForwardedRef<InputHandle>) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const lastKeyPressed = useRef<string | null>(null);
-  const internalValue = mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '';
-  const [maskValue, setMaskValue] = useState(internalValue)
-  const [iconRenderVisible, setIconRenderVisible] = useState(false);
-  const animationRef = useRef<number | null>(null);
-
-  useImperativeHandle(ref, () => ({
-    focus: () => {
-      inputRef.current?.focus()
-    },
-    input: inputRef.current,
-    blur: () => {
-      inputRef.current?.blur()
-    },
-    nativeElement: inputRef.current,
-    setSelectionRange: (start: number, end: number) => {
-      if (inputRef.current) {
-        inputRef.current.setSelectionRange(start, end);
-      }
-    }
-  }), []);
-
-  useEffect(() => {
-    setMaskValue(mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : (value ?? ''));
-  }, [value, mask, maskChar]);
-
-  const handleChange = (e: SyntheticBaseEvent) => {
-    if (!inputRef.current) return;
-
-    let rawInput = e.target.value as string;
-    const raw = mask ? rawInput.replace(maskRegex, '') : rawInput;
-
-    if (mask) {
-      if (!inputRef.current) return;
-
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-
-      const { masked, rawIndex } = applyMask(raw, mask, maskChar);
-      rawInput = masked;
-
-      animationRef.current = requestAnimationFrame(() => {
-        const isRemove = lastKeyPressed.current === 'Delete' || lastKeyPressed.current === 'Backspace';
-
-        let nextCaret = !isRemove ? rawIndex : inputRef.current?.selectionStart ?? 0;
-
-        while (isRemove ? mask.includes(rawInput[nextCaret - 1]) : maskChar !== rawInput[nextCaret]) {
-          if (!isRemove && !rawInput[nextCaret]) {
-            break;
-          }
-
-          if (isRemove) {
-            nextCaret--;
-          } else {
-            nextCaret++;
-          }
-        }
-
-        inputRef.current?.setSelectionRange(nextCaret, nextCaret);
-      })
-    };
-
-    setMaskValue(rawInput);
-
-    const eventWithMaskedValue = {
-      ...e,
-      target: {
-        ...e.target,
-        value: rawInput
-      }
-    };
-
-    props.onChange?.(eventWithMaskedValue as RuleType);
-  };
-
-  const handleClear = (e: MouseEvent<HTMLSpanElement> & TargetProps) => {
-    if (mask) {
-      setMaskValue('')
-    }
-
-    e.target.value = '';
-    props.onChange?.(e);
-  };
-
-  const handleOnKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    lastKeyPressed.current = e.key;
-
-    if (e.key === 'Enter' && onPressEnter) {
-      onPressEnter(e);
-    }
-  };
-
-  return (
-    <div
-      className={clsx([
-        `${prefixCls}-container ${prefixClsV3}-container`,
-        {
-          [`${prefixCls}-error ${prefixClsV3}-error`]: error,
-          [`${prefixCls}-disabled ${prefixClsV3}-disabled`]: disabled,
-          [`${prefixCls}-${size} ${prefixClsV3}-${size}`]: size,
-          noStyle: noStyle
-        },
-        className
-      ])}
-      style={props.style}
-    >
-      {addonBefore && (
-        <span className={`${prefixCls}-addon ${prefixCls}-before ${prefixClsV3}-addon ${prefixClsV3}-before`}>
-          {addonBefore}
-        </span>
-      )}
-
-      <div className={`${prefixCls}-wrapper ${prefixClsV3}-wrapper`}>
-        {prefix && <span className={`${prefixCls}-prefix ${prefixClsV3}-prefix`}>{prefix}</span>}
-
-        <input
-          {...props}
-          ref={inputRef}
-          suppressHydrationWarning
-          {...(props.type === 'password' && iconRender
-            ? { type: iconRenderVisible ? 'text' : 'password' }
-            : {})}
-          disabled={disabled}
-          value={maskValue}
-          onChange={handleChange}
-          onKeyDown={handleOnKeyDown}
-          className={clsx([prefixCls, prefixClsV3, className])}
-        />
-
-        {allowClear && internalValue ?
-          <span className={`${prefixCls}-clear ${prefixClsV3}-clear`} onClick={handleClear}>
-            <ErrorIcon />
-          </span> : null
-        }
-
-        {(suffix || iconRender) && (
-          <span
-            className={`${prefixCls}-suffix ${prefixClsV3}-suffix`}
-            {...(iconRender !== undefined
-              ? {
-                onClick: () => setIconRenderVisible(icon => !icon)
-              }
-              : {})}
-          >
-            {suffix || iconRender?.(iconRenderVisible)}
-            {error && feedbackIcons ? <ErrorIcon /> : null}
-          </span>
-        )}
-      </div>
-
-      {addonAfter ? (
-        <span className={`${prefixCls}-addon ${prefixCls}-after ${prefixClsV3}-addon ${prefixClsV3}-after`}>
-          {addonAfter}
-        </span>
-      ) : null}
-    </div>
-  );
-});
-
-InputComponent.displayName = 'Input';
-
-const Input = InputComponent as typeof InputComponent & {
-  TextArea: typeof Textarea;
-};
-
-Input.TextArea = Textarea;
-
-export default Input;

package/lib/components/Input/Textarea/Textarea.tsx

@@ -1,110 +0,0 @@
-'use client';
-
-import React, {
-  ChangeEvent,
-  KeyboardEvent,
-  RefObject,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-import { clsx } from '../../../helpers';
-import { TextareaProps } from '../../../types/input';
-import { prefixClsTextArea } from '../../../utils';
-import './style.css';
-
-const Textarea = ({
-  prefixCls = prefixClsTextArea,
-  prefixClsV3 = prefixClsTextArea,
-  value,
-  className = '',
-  style,
-  autoSize,
-  onPressEnter,
-  onResize,
-  styles,
-  bordered = true,
-  size = 'large',
-  status,
-  rootClassName,
-  variant = 'outlined',
-  error,
-  allowClear = false,
-  ref,
-  ...props
-}: TextareaProps) => {
-  const [inputValue, setInputValue] = useState(value?.toString() || '');
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    const textarea =
-      (ref as RefObject<HTMLTextAreaElement>)?.current || textareaRef.current;
-
-    if (textarea && autoSize) {
-      textarea.style.height = 'auto';
-      textarea.style.height = `${textarea.scrollHeight}px`;
-
-      if (onResize) {
-        onResize({
-          width: textarea.clientWidth,
-          height: textarea.scrollHeight
-        });
-      }
-    }
-  }, [inputValue, autoSize, onResize, ref]);
-
-  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setInputValue(e.target.value);
-
-    if (props.onChange) {
-      props.onChange(e);
-    }
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && onPressEnter) {
-      onPressEnter(e);
-    }
-  };
-
-  const handleClear = () => {
-    setInputValue('');
-
-    if (props.onChange) {
-      props.onChange({
-        target: { value: '' }
-      } as ChangeEvent<HTMLTextAreaElement>);
-    }
-  };
-
-  return (
-    <div className={`${prefixCls}-wrapper ${prefixClsV3}-wrapper ${rootClassName || ''}`}>
-      <textarea
-        {...props}
-        ref={ref || textareaRef}
-        value={inputValue}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        style={{ ...styles?.textarea, ...style }}
-        className={clsx([
-          `${prefixCls} ${prefixClsV3} ${prefixCls}-${size} ${prefixClsV3}-${size} ${prefixClsV3}-${variant} ${prefixCls}-${variant} ${prefixClsV3}-${variant} ${className}`,
-          {
-            [`${prefixCls}-bordered ${prefixClsV3}-bordered`]: bordered,
-            [`${prefixCls}-success ${prefixClsV3}-success`]: status === 'success',
-            [`${prefixCls}-error ${prefixClsV3}-error`]: status === 'error' || error
-          }
-        ])}
-      />
-
-      {allowClear && inputValue && (
-        <button className={`${prefixCls}-clear ${prefixClsV3}-clear`} onClick={handleClear}>
-          &#x2715;
-        </button>
-      )}
-    </div>
-  );
-};
-
-Textarea.displayName = 'Textarea';
-
-export default Textarea;

package/lib/components/Input/Textarea/index.ts

@@ -1 +0,0 @@
-export { default as Textarea } from '../Textarea/Textarea'

package/lib/components/Input/Textarea/style.css

@@ -1,104 +0,0 @@
-.xUi-textarea-wrapper {
-    position: relative;
-    width: 100%;
-    margin-bottom: 10px;
-}
-
-.xUi-textarea {
-    padding: 8px 12px;
-    font-size: 14px;
-    border-radius: 6px;
-    transition: all 0.3s ease;
-    outline: none;
-    box-shadow: none;
-    resize: vertical;
-    min-height: 14px;
-    width: 100%;
-    border: none;
-    color: var(--xui-text-color);
-}
-
-.xUi-textarea:placeholder-shown {
-    text-overflow: ellipsis;
-    font-size: 14px;
-}
-
-.xUi-textarea::placeholder {
-    opacity: 0.6;
-    color: var(--xui-text-color);
-}
-
-.xUi-textarea-small {
-    font-size: 12px;
-    padding: 6px 10px;
-}
-
-.xUi-textarea-middle {
-    font-size: 14px;
-    padding: 8px 12px;
-}
-
-.xUi-textarea-large {
-    padding: 10px;
-}
-
-.xUi-textarea-outlined {
-    border: 1px solid var(--xui-border-color);
-    background: transparent;
-}
-
-.xUi-textarea-outlined:focus {
-    border-color: var(--xui-primary-color);
-}
-
-.xUi-textarea-borderless {
-    border: none;
-    background: transparent;
-}
-
-.xUi-textarea-filled {
-    border: 1px solid var(--xui-border-color);
-    background: var(--xui-primary-color);
-}
-
-.xUi-textarea-filled:focus {
-    background: var(--xui-background-color);
-    border-color: var(--xui-primary-color);
-}
-
-.xUi-textarea-underlined {
-    border: none;
-    border-bottom: 1px solid var(--xui-border-color);
-    background: transparent;
-}
-.xUi-textarea-underlined:focus {
-    border-bottom-color: var(--xui-primary-color);
-}
-
-.xUi-textarea-container:has(.xUi-textarea-bordered) {
-    border: 1px solid var(--xui-border-color);
-}
-
-.xUi-textarea-container:has(.xUi-textarea-success) {
-    border-color: var(--xui-success-color);
-}
-
-.xUi-textarea-wrapper:has(.xUi-textarea-error) textarea,
-.xUi-textarea-wrapper:has(.xUi-textarea-error) textarea:focus {
-    border: 1px solid var(--xui-error-color);
-}
-
-.xUi-textarea-clear {
-    position: absolute;
-    right: 0px;
-    top: 15px;
-    transform: translateY(-50%);
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    color: #999;
-}
-
-.xUi-textarea-clear:hover {
-    color: #333;
-}

package/lib/components/Input/index.ts

@@ -1 +0,0 @@
-export { default as Input } from '../Input/Input'

package/lib/components/Input/style.css

@@ -1,137 +0,0 @@
-.xUi-input-container {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--xui-border-color);
-    overflow: hidden;
-    background-color: transparent;
-    border-radius: var(--xui-border-radius-sm);
-}
-
-.xUi-input-container:not(.xUi-input-error):not(.xUi-input-disabled):has(.xUi-input):hover,
-.xUi-input-container:not(.xUi-input-error):not(.xUi-input-disabled):has(.xUi-input:focus) {
-    border: 1px solid var(--xui-primary-color); 
-}
-
-.xUi-input-container.xUi-input-error {
-    border-color: var(--xui-error-color);
-}
-
-.xUi-input-suffix .error-svg-icon,
-.xUi-input-container.xUi-input-error .error-svg-icon {
-    color: var(--xui-error-color);
-}
-
-.xUi-input-wrapper {
-    display: flex;
-    align-items: center;
-    position: relative;
-    height: -webkit-fill-available;
-    flex-grow: 1;
-    /* margin: -1px; */
-    transition: border 0.3s;
-    background-color: transparent;
-}
-
-.xUi-input {
-    flex: 1;
-    padding: 0;
-    width: 100%;
-    border: none;
-    outline: none;
-    padding: .1px 7px;
-    color: var(--xui-text-color);
-    height: -webkit-fill-available;
-    background-color: transparent;
-}
-
-.xUi-input:placeholder-shown {
-    text-overflow: ellipsis;
-}
-
-.xUi-input::placeholder {
-    opacity: 0.6;
-    color: var(--xui-text-color);
-}
-
-.xUi-input-suffix,
-.xUi-input-prefix {
-    display: flex;
-    padding: 0 7px;
-    gap: 4px;
-    align-items: center;
-    color: var(--xui-text-color);
-    height: -webkit-fill-available;
-    background-color: transparent;
-}
-
-.xUi-input-addon {
-    padding: 0 7px;
-    display: flex;
-    align-items: center;
-    color: var(--xui-text-color);
-    height: -webkit-fill-available;
-}
-
-.xUi-input-addon.xUi-input-after {
-    border-left: 1px solid var(--xui-border-color);
-}
-
-.xUi-input-addon.xUi-input-before {
-    border-right: 1px solid var(--xui-border-color);
-}
-
-.xUi-input-large .xUi-input-addon {
-    padding: 0 10px;
-}
-
-.xUi-input-clear {
-    cursor: pointer;
-    position: relative;
-    margin: 0 5px;
-    display: flex;
-    width: 16px;
-    align-items: center;
-}
-
-.xUi-input-clear svg {
-    color: var(--xui-text-color);
-}
-
-.xUi-input-disabled,
-.xUi-input-disabled .xUi-input,
-.xUi-input-disabled .xUi-input-suffix {
-    background-color: var(--xui-color-disabled);
-    cursor: not-allowed;
-}
-
-.xUi-input-small {
-    height: 22px;
-}
-
-.xUi-input-large .xUi-input-clear,
-.xUi-input-small .xUi-input,
-.xUi-input-small .xUi-input::placeholder {
-    font-size: var(--xui-font-size-md);
-}
-
-.xUi-input-middle {
-    height: 30px;
-    border-radius: var(--xui-border-radius-md);
-}
-
-.xUi-input-large .xUi-input-clear,
-.xUi-input-middle .xUi-input,
-.xUi-input-middle .xUi-input::placeholder {
-    font-size: var(--xui-font-size-md);
-}
-
-.xUi-input-large {
-    height: 44px;
-    border-radius: var(--xui-border-radius-lg);
-}
-
-.xUi-input-large .xUi-input-clear,
-.xUi-input-large .xUi-input,
-.xUi-input-large .xUi-input::placeholder {
-    font-size: var(--xui-font-size-lg);
-}

package/lib/components/Menu/Item/Item.tsx

@@ -1,65 +0,0 @@
-'use client'
-
-import React, { FC, MouseEvent, useContext } from "react";
-import { MenuContext } from "../Menu";
-import { clsx } from "../../../helpers";
-import { ItemType } from "../../../types/menu";
-import { prefixClsMenu } from "../../../utils";
-
-const MenuItem: FC<ItemType> = ({
-    itemKey,
-    label,
-    icon,
-    title,
-    disabled,
-    danger,
-    extra,
-    selected,
-    className = '',
-    prefixCls = prefixClsMenu,
-    onClick,
-    style
-}) => {
-    const menuContext = useContext(MenuContext);
-
-    if (!menuContext) {
-        throw new Error('MenuItem must be used within a Menu');
-    }
-
-    const handleClick = (e: MouseEvent) => {
-        if (disabled) {
-            return;
-        }
-
-        onClick?.({ 
-            key: itemKey as string, 
-            keyPath: [itemKey as string], 
-            domEvent: e as MouseEvent 
-        });
-
-        menuContext?.onItemClick(itemKey as string, e);
-    };
-
-    return (
-        <li
-            style={style}
-            role="menuitem"
-            title={title as string}
-            onClick={handleClick}
-            className={clsx([
-                `${prefixCls}-item ${className}`,
-                {
-                    [`${prefixCls}-item-disabled`]: disabled,
-                    [`${prefixCls}-item-selected`]: selected,
-                    [`${prefixCls}-item-danger`]: danger,
-                }
-            ])}
-        >
-            {icon && <span className={`${prefixCls}-item-icon`}>{icon}</span>}
-            <span className={`${prefixCls}-item-label`}>{label}</span>
-            {extra && <span className={`${prefixCls}-item-extra`}>{extra}</span>}
-        </li>
-    );
-};
-
-export default MenuItem;