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

package/lib/components/Input/Input.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import React, {
+  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';
+
+const InputComponent = ({
+  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,
+  ref,
+  ...props
+}: InputProps) => {
+  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, () => ({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    focus: inputRef.current?.focus,
+    input: inputRef.current,
+    blur: (inputRef.current as HTMLInputElement).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

@@ -0,0 +1,110 @@
+'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

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

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

@@ -0,0 +1,104 @@
+.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

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

package/lib/components/Input/style.css

@@ -0,0 +1,137 @@
+.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

@@ -0,0 +1,65 @@
+'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;