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

package/lib/components/Empty/index.ts

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

package/lib/components/Empty/style.css

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

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

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

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

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

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

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