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

package/lib/components/Empty/index.ts

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

package/lib/components/Empty/style.css

@@ -1,13 +0,0 @@
-.xUi-empty {
-    gap: 4px;
-    display: grid;
-    padding: 14px;
-    align-items: center;
-    justify-content: center;
-}
-
-.xUi-empty-description {
-    text-align: center;
-    color: var(--xui-text-color);
-    font-size: var(--xui-font-size-md);
-}

package/lib/components/Form/Form.tsx

@@ -1,130 +0,0 @@
-'use client';
-
-import React, {
-  Children,
-  createContext,
-  FC,
-  isValidElement,
-  ReactElement,
-  ReactNode,
-  SyntheticEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef
-} from 'react';
-import { useForm } from '../../hooks/useForm';
-import { FormInstance, FormItemProps, FormLayoutTypes, FormProps } from '../../types/form';
-import { prefixClsForm, prefixClsFormV3 } from '../../utils';
-import FormItem from './Item/Item';
-import { flattenChildren } from '../../helpers/flatten';
-import { SizeType } from '../../types';
-
-export const FormContext = createContext<FormInstance | null>(null);
-
-const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
-  children,
-  form,
-  style = {},
-  prefixCls = prefixClsForm,
-  prefixClsV3 = prefixClsFormV3,
-  className = '',
-  onFinish,
-  onFinishFailed,
-  initialValues = {},
-  onValuesChange,
-  onFieldsChange,
-  layout = 'horizontal',
-  scrollToFirstError = false,
-  ...rest
-}) => {
-  const internalForm = useForm({ initialValues, onFieldsChange, onValuesChange, onFinishFailed });
-  const formRef = useRef<HTMLFormElement>(null);
-
-  const formInstance = useMemo(() => {
-    const _form = form || internalForm;
-
-    if (_form && Object.keys(initialValues).length) {
-      Object.keys(initialValues).forEach((name) => {
-        if (_form.getFieldValue(name) === undefined) {
-          _form.setFieldValue(name, initialValues[name]);
-        }
-      });
-    }
-
-    return _form;
-  }, [form, internalForm, initialValues]);
-  const childrenList = useMemo(() => flattenChildren(children), [children])
-
-  const handleSubmit = useCallback(async (e: SyntheticEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    await formInstance.submit();
-  }, []);
-
-  useEffect(() => {
-    if (onFinish) { formInstance.setOnFinish?.(onFinish) }
-    if (onFieldsChange) { formInstance.setOnFieldsChange?.(onFieldsChange) }
-    if (onValuesChange) { formInstance.setOnValuesChange?.(onValuesChange) }
-    if (onFinishFailed) { formInstance.setOnFinishFailed?.(onFinishFailed) }
-
-    if (scrollToFirstError) { formInstance.setScrollToFirstError(scrollToFirstError) }
-  }, [formInstance, onFieldsChange, onValuesChange, onFinishFailed, onFinish, scrollToFirstError]);
-
-  const injectPropsIntoFinalLeaf = useCallback((child: ReactNode): ReactNode => {
-    if (!isValidElement(child)) {
-      return child;
-    }
-
-    const childProps = child.props as ReactElement & {
-      children: ReactElement[],
-      __injected: boolean;
-      size?: SizeType;
-      layout?: FormLayoutTypes;
-    }
-
-    const isWrapper =
-      typeof child.type === 'string' &&
-      !('dangerouslySetInnerHTML' in childProps) &&
-      ['div', 'span', 'label'].includes(child.type);
-
-    if (isWrapper) {
-      return (
-        <child.type {...childProps}>
-          {Children.map(flattenChildren(childProps.children), injectPropsIntoFinalLeaf)}
-        </child.type>
-      )
-    }
-
-    if (childProps?.__injected) {
-      return child;
-    }
-
-    return <child.type
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      {...child.props}
-      child={child}
-      size={childProps.size || rest.size}
-      layout={childProps.layout || layout}
-    />
-  }, [rest.size, layout]);
-
-  return (
-    <FormContext.Provider value={formInstance}>
-      <form
-        style={style}
-        ref={formRef}
-        onSubmit={handleSubmit}
-        className={`${prefixCls} ${prefixClsV3} ${className}`}
-      >
-        {Children.map(childrenList, injectPropsIntoFinalLeaf)}
-      </form>
-    </FormContext.Provider>
-  );
-};
-
-Form.Item = FormItem;
-
-export default Form;

package/lib/components/Form/Item/Item.tsx

@@ -1,294 +0,0 @@
-'use client';
-
-import React, {
-  Children,
-  isValidElement,
-  ReactElement,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
-import { clsx } from '../../../helpers';
-import { RuleType, SyntheticBaseEvent } from '../../../types';
-import { flattenChildren } from '../../../helpers/flatten';
-import {
-  FieldInstancesRef,
-  FormItemChildComponentProps,
-  FormItemProps
-} from '../../../types/form';
-import { OptionProps } from '../../../types/select';
-import { prefixClsFormItem, prefixClsFormItemV3 } from '../../../utils';
-import { FormContext } from '../Form';
-import { useWatchError } from '../../../hooks/useWatchError';
-import './style.css';
-
-const FormItem = ({
-  prefixCls = prefixClsFormItem,
-  prefixClsV3 = prefixClsFormItemV3,
-  name,
-  label,
-  rules = [],
-  children,
-  className = '',
-  layout = 'vertical',
-  style = {},
-  dependencies = [],
-  initialValue,
-  feedbackIcons,
-  extra,
-  hideLabel = false,
-  removeErrorMessageHeight = false,
-  ...props
-}: FormItemProps) => {
-  const formContext = useContext(FormContext);
-
-  const errorRef = useRef<HTMLSpanElement>(null);
-  const fieldRef = useRef<FieldInstancesRef | null>(null);
-
-  if (!formContext) {
-    throw new Error('FormItem must be used within a Form');
-  }
-
-  const errors = useWatchError(formContext, name)?.[0];
-
-  const {
-    isReseting,
-    registerField,
-    getFieldValue,
-    setFieldValue,
-    getFieldInstance,
-    setFieldInstance,
-    subscribeToFields,
-    validateFields
-  } = formContext;
-
-  const childrenList = useMemo(() => flattenChildren(children), [children]);
-
-  useEffect(() => {
-    if (name && !getFieldInstance(name)) {
-      registerField(name, rules);
-    }
-  }, [name, rules]);
-
-  useEffect(() => {
-    setFieldInstance(name, fieldRef.current);
-  }, [name, fieldRef.current])
-
-  useEffect(() => () => registerField(name, undefined, true), [name])
-
-  useEffect(() => {
-    if (initialValue && getFieldValue(name) === undefined) {
-      setFieldValue(name, initialValue);
-    }
-  }, [name]);
-
-  useEffect(() => {
-    if (name && dependencies.length > 0) {
-      const unsubscribe = subscribeToFields(dependencies, () => {
-        validateFields([name]);
-      });
-
-      return () => {
-        unsubscribe();
-      };
-    }
-  }, [dependencies, name]);
-
-  const isRequired = useMemo(
-    () => rules.some((rule: RuleType) => rule.required),
-    [rules]
-  );
-
-  return (
-    <div
-      style={style}
-      data-instance={name}
-      className={clsx([
-        `${prefixCls} ${prefixClsV3}`,
-        {
-          [layout]: layout,
-          [className]: className,
-          noStyle: props.noStyle
-        }
-      ])}
-    >
-      {!props.noStyle && (label || name) && !hideLabel && (
-        <label className={`${prefixCls}-label ${prefixClsV3}-label`} htmlFor={name}>
-          {label || name}
-          {isRequired && <span className={`${prefixCls}-required ${prefixClsV3}-required`}>*</span>}
-          {/* @Todo need to add Tooltip like Ant design */}
-        </label>
-      )}
-
-      {Children.map(childrenList, (child, key) => {
-        if (isValidElement(child)) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
-          const { onChange, value, ...childProps } = child.props;
-          const fieldValue = value ?? getFieldValue(name) ?? initialValue;
-
-          return (
-            <div className={`${prefixCls}-content`}>
-              <FormItemChildComponent
-                {...props}
-                key={`${key}_${name}_${isReseting}`}
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-expect-error
-                ref={fieldRef}
-                name={name}
-                child={child}
-                value={value}
-                error={!!errors}
-                fieldValue={fieldValue}
-                setFieldValue={setFieldValue}
-                feedbackIcons={feedbackIcons}
-                onChange={onChange}
-                noStyle={props.noStyle}
-                normalize={props.normalize}
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-expect-error
-                size={childProps.size || props.size}
-              />
-
-              {extra
-                ? <div className={`${prefixCls}-extra ${prefixClsV3}-extra`}>
-                  {extra || ''}
-                </div>
-                : null}
-
-              {!props.noStyle && (
-                <span
-                  ref={errorRef}
-                  className={clsx([
-                    `${prefixCls}-error ${prefixClsV3}-error`,
-                    { [`${prefixCls}-has-error ${prefixClsV3}-has-error`]: errors?.length }
-                  ])}
-                  style={{
-                    ...removeErrorMessageHeight ? { minHeight: 0 } : {},
-                    ...extra ? { marginBottom: 0 } : {}
-                  }}
-                >
-                  {errors || ''}
-                </span>
-              )}
-            </div>
-          )
-        }
-
-        return child;
-      })}
-    </div>
-  );
-};
-
-const FormItemChildComponent = ({
-  child,
-  name,
-  error,
-  fieldValue,
-  setFieldValue,
-  onChange,
-  normalize,
-  noStyle,
-  feedbackIcons,
-  ref,
-  ...props
-}: FormItemChildComponentProps) => {
-  const formContext = useContext(FormContext);
-
-  const [wasNormalize, setWasNormalize] = useState(false);
-
-  const { getFieldsValue } = formContext || {};
-  
-  const handleChange = (e: SyntheticBaseEvent) => {
-    let rawValue: RuleType | SyntheticBaseEvent = e?.target
-      ? e.target.value
-      : e;
-
-    if (normalize) {
-      const prevValue = fieldValue ?? props.value;
-      const allValues = getFieldsValue?.();
-
-      rawValue = normalize(rawValue, prevValue, allValues);
-
-      if (rawValue === prevValue) {
-        e.target.value = rawValue;
-        setWasNormalize(prev => !prev);
-
-        const timeout = setTimeout(() => {
-          (
-            document.querySelector(`[name='${name}']`) as HTMLInputElement
-          )?.focus();
-
-          clearTimeout(timeout);
-        }, 0);
-
-        return;
-      }
-    }
-
-    setFieldValue(name, rawValue, undefined, undefined, true);
-  };
-
-  const injectPropsIntoFinalLeaf = (child: ReactElement): ReactElement => {
-    if (!isValidElement(child)) {
-      return child;
-    }
-
-    const childProps = child.props as ReactElement & {
-      children: ReactElement[],
-      __injected: boolean,
-      onChange?: (e: SyntheticBaseEvent, option?: OptionProps) => void
-    }
-
-    const isWrapper =
-      typeof child.type === 'string' &&
-      !('dangerouslySetInnerHTML' in childProps) &&
-      ['div', 'span', 'label'].includes(child.type);
-
-    if (isWrapper) {
-      return (
-        <child.type {...childProps}>
-          {Children.map(flattenChildren(childProps.children), injectPropsIntoFinalLeaf)}
-        </child.type>
-      )
-    }
-
-    const _onChange = useCallback((e: SyntheticBaseEvent, option?: OptionProps) => {
-      handleChange(e);
-
-      childProps?.onChange?.(e, option)
-    }, [handleChange, childProps?.onChange])
-
-    if (childProps?.__injected) {
-      return child;
-    }
-
-    return <child.type
-      {...props}
-      ref={ref}
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      {...child.props}
-      name={name}
-      child={child}
-      onChange={_onChange}
-      key={`${name}_${wasNormalize}`}
-      value={fieldValue ?? props.value}
-      {...('dangerouslySetInnerHTML' in childProps ? {} : {
-        __injected: true,
-        ...(error ? { error } : {}),
-      })
-      }
-    />
-  };
-
-  return injectPropsIntoFinalLeaf(child)
-};
-
-FormItem.displayName = 'FormItem';
-
-export default FormItem;

package/lib/components/Form/Item/index.ts

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

package/lib/components/Form/Item/style.css

@@ -1,61 +0,0 @@
-.xUi-form-item {
-    display: flex;
-    position: relative;
-}
-
-.xUi-form-item.noStyle {
-    display: inline-flex;
-    margin-bottom: 0;
-}
-
-.xUi-form-item-label {
-    font-weight: 500;
-    margin-bottom: 4px;
-    display: flex;
-    line-height: 20px;
-    align-items: center;
-    font-size: var(--xui-font-size-md);
-    color: var(--xui-text-color);
-}
-
-.xUi-form-item-error {
-    right: 0;
-    margin-top: 4px;
-    margin-bottom: 8px;
-    display: block;
-    min-height: 16px;
-    font-size: var(--xui-font-size-xs);
-    position: relative;
-    color: var(--xui-error-color);
-    user-select: none;
-    line-height: 16px;
-    text-align: end;
-}
-
-.xUi-form-item-required {
-    line-height: 1;
-    font-size: var(--xui-font-size-md);
-    margin-left: 4px;
-    margin-right: 4px;
-    display: inline-block;
-    color: var(--xui-error-color);
-}
-
-.xUi-form-item.horizontal {
-    gap: 4px;
-    flex-direction: row;
-    align-items: center;
-}
-
-.xUi-form-item.vertical {
-    flex-direction: column;
-    align-self: flex-start;
-}
-
-.xUi-form-item .xUi-input-container {
-    width: -webkit-fill-available;
-}
-
-.xUi-form-item-content {
-    width: -webkit-fill-available;
-}

package/lib/components/Form/index.ts

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