@hsu-react/ui 0.0.1

package/src/components/FormItem/FormRadio/index.tsx

@@ -0,0 +1,40 @@
+import { RadioGroupProps as AntdRadioGroupProps, Radio } from "antd";
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+
+import React from "react";
+import classNames from "classnames";
+import styles from "./index.module.less";
+
+interface RadioGroupProps extends AntdRadioGroupProps {
+  radioStyle?: "rect" | "circle";
+}
+
+export interface FormRadioProps extends ItemContainerProps {
+  componentProps?: RadioGroupProps;
+}
+
+const FormRadio: React.FC<FormRadioProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { className, radioStyle = "circle", ...radioConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <Radio.Group
+        {...radioConfig}
+        disabled={radioConfig.disabled ?? disabled}
+        className={classNames({
+          [styles.radioGroup]: true,
+          [className ?? ""]: true,
+          [styles[radioStyle]]: radioStyle,
+        })}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormRadio;

package/src/components/FormItem/FormSegmented/index.module.less

@@ -0,0 +1,34 @@
+.FormSegmented {
+  height: 100%;
+
+  color: var(--cf-text);
+
+  .ant-segmented-group {
+    height: 100%;
+
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+
+    > label {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      color: inherit;
+
+      .ant-segmented-item-label {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        height: 100%;
+
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        color: inherit;
+      }
+    }
+  }
+}

package/src/components/FormItem/FormSegmented/index.tsx

@@ -0,0 +1,33 @@
+import { SegmentedProps as AntdSegmentedProps, Segmented } from "antd";
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+import styles from "./index.module.less";
+
+import React from "react";
+
+export interface FormSegmentedProps extends ItemContainerProps {
+  componentProps?: AntdSegmentedProps;
+}
+
+const FormSegmented: React.FC<FormSegmentedProps> = (props) => {
+  const {
+    componentProps = {
+      options: [],
+    },
+    disabled,
+    className: itemClassName,
+    ...formItemProps
+  } = props;
+  const { className, ...segmentedConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <Segmented
+        {...segmentedConfig}
+        className={`${styles.FormSegmented} ${className ?? ""}`}
+        disabled={segmentedConfig.disabled ?? disabled}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormSegmented;

package/src/components/FormItem/FormSelect/FormAutoCompleteSelect/index.tsx

@@ -0,0 +1,33 @@
+import AutoCompleteSelect, {
+  AutoCompleteSelectProps as AutoCompleteSelectComponentProps,
+} from "../../../Select/AutoCompleteSelect";
+import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
+
+import React from "react";
+
+export interface FormAutoCompleteSelectProps extends ItemContainerProps {
+  componentProps?: AutoCompleteSelectComponentProps;
+}
+
+const FormAutoCompleteSelect: React.FC<FormAutoCompleteSelectProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { placeholder, ...selectConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <AutoCompleteSelect
+        {...selectConfig}
+        disabled={selectConfig.disabled ?? disabled}
+        placeholder={placeholder ?? "请选择"}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormAutoCompleteSelect;
+

package/src/components/FormItem/FormSelect/FormIconSelect/index.tsx

@@ -0,0 +1,29 @@
+import IconSelect, { IconSelectProps } from "../../../Select/IconSelect";
+import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
+
+import React from "react";
+
+export interface FormIconSelectProps extends ItemContainerProps {
+  componentProps?: IconSelectProps;
+}
+
+const FormIconSelect: React.FC<FormIconSelectProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { ...selectConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <IconSelect
+        {...selectConfig}
+        disabled={selectConfig.disabled ?? disabled}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormIconSelect;

package/src/components/FormItem/FormSelect/FormTreeSelect/index.tsx

@@ -0,0 +1,30 @@
+import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
+import TreeSelect, { TreeSelectProps } from "../../../Select/TreeSelect";
+
+import React from "react";
+
+export interface FormTreeSelectProps extends ItemContainerProps {
+  componentProps?: TreeSelectProps;
+}
+
+const FormTreeSelect: React.FC<FormTreeSelectProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { placeholder, ...selectConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <TreeSelect
+        {...selectConfig}
+        disabled={selectConfig.disabled ?? disabled}
+        placeholder={placeholder ?? "请选择"}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormTreeSelect;

package/src/components/FormItem/FormSelect/index.tsx

@@ -0,0 +1,51 @@
+import FormIconSelect, { FormIconSelectProps } from "./FormIconSelect";
+import FormTreeSelect, { FormTreeSelectProps } from "./FormTreeSelect";
+import FormAutoCompleteSelect, {
+  FormAutoCompleteSelectProps,
+} from "./FormAutoCompleteSelect";
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+import Select, { SelectProps } from "../../Select";
+
+import React from "react";
+
+export type {
+  FormTreeSelectProps,
+  FormIconSelectProps,
+  FormAutoCompleteSelectProps,
+};
+
+export interface FormSelectProps extends ItemContainerProps {
+  componentProps?: SelectProps;
+}
+
+interface FormSelectFC extends React.FC<FormSelectProps> {
+  Tree: React.FC<FormTreeSelectProps>;
+  Icon: React.FC<FormIconSelectProps>;
+  AutoComplete: React.FC<FormAutoCompleteSelectProps>;
+}
+
+const FormSelect: FormSelectFC = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { placeholder, ...selectConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <Select
+        {...selectConfig}
+        disabled={selectConfig.disabled ?? disabled}
+        placeholder={placeholder ?? "请选择"}
+      />
+    </ItemContainer>
+  );
+};
+
+FormSelect.Tree = FormTreeSelect;
+FormSelect.Icon = FormIconSelect;
+FormSelect.AutoComplete = FormAutoCompleteSelect;
+
+export default FormSelect;

package/src/components/FormItem/FormSlider/index.module.less

@@ -0,0 +1,15 @@
+.slider_value {
+  width: 60px;
+  padding: 0px;
+  padding-right: 2px;
+  margin-right: 0;
+  margin-left: auto;
+
+  text-align: right;
+
+  box-shadow: none !important;
+
+  border-radius: 4px;
+
+  background-color: transparent !important;
+}

package/src/components/FormItem/FormSlider/index.tsx

@@ -0,0 +1,91 @@
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+import React, { useEffect, useState } from "react";
+import Slider, { SliderProps } from "../../Slider";
+
+import Input from "../../Input";
+import styles from "./index.module.less";
+
+export interface FormSliderProps extends ItemContainerProps {
+  componentProps?: SliderProps;
+  showNums?: boolean;
+}
+
+const FormSlider: React.FC<FormSliderProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    showNums,
+    layout,
+    initialValue,
+    disabled,
+    ...formItemProps
+  } = props;
+  const {
+    onChange,
+    value,
+    step = 1,
+    min = 0,
+    max = 100,
+    ...sliderConfig
+  } = componentProps;
+  const [topPValue, setTopPValue] = useState<string>("0");
+
+  useEffect(() => {
+    setTopPValue(
+      (+(value || initialValue || 0))?.toFixed(
+        step?.toString()?.split(".")?.[1]?.length || 0
+      )
+    );
+  }, [initialValue, step, value]);
+
+  return (
+    <ItemContainer
+      {...formItemProps}
+      initialValue={initialValue}
+      layout={layout}
+      className={`${itemClassName ?? ""}`}
+      labelRender={
+        showNums && layout === "vertical"
+          ? (label) => {
+              return (
+                <>
+                  {label}
+                  <Input.Number
+                    className={styles.slider_value}
+                    value={topPValue}
+                    onChange={(v) => {
+                      setTopPValue(
+                        (+v).toFixed(
+                          step?.toString()?.split(".")?.[1]?.length || 0
+                        )
+                      );
+                    }}
+                    max={max}
+                    min={min}
+                  />
+                </>
+              );
+            }
+          : undefined
+      }
+    >
+      <Slider
+        {...sliderConfig}
+        disabled={sliderConfig.disabled ?? disabled}
+        topValue={+topPValue}
+        onChange={(v) => {
+          setTopPValue(
+            v.toFixed(step?.toString()?.split(".")?.[1]?.length || 0)
+          );
+
+          onChange?.(v);
+        }}
+        step={step}
+        max={max}
+        min={min}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormSlider;

package/src/components/FormItem/FormSwitch/index.module.less

@@ -0,0 +1,3 @@
+.switch {
+  min-height: 0px !important;
+}

package/src/components/FormItem/FormSwitch/index.tsx

@@ -0,0 +1,32 @@
+import { SwitchProps as AntdSwitchProps, Switch } from "antd";
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+
+import React from "react";
+import classNames from "classnames";
+import styles from "./index.module.less";
+
+export interface FormSwitchProps extends ItemContainerProps {
+  componentProps?: AntdSwitchProps;
+}
+
+const FormSwitch: React.FC<FormSwitchProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { className, ...switchConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <Switch
+        {...switchConfig}
+        disabled={switchConfig.disabled ?? disabled}
+        className={classNames(className, styles.switch)}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormSwitch;

package/src/components/FormItem/FormText/index.module.less

@@ -0,0 +1,9 @@
+.text {
+  display: inline-flex;
+  align-items: center;
+
+  width: 100%;
+
+  word-break: break-all;
+  white-space: pre-wrap;
+}

package/src/components/FormItem/FormText/index.tsx

@@ -0,0 +1,95 @@
+import React, { ReactNode } from "react";
+import styles from "./index.module.less";
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+import classNames from "classnames";
+import { Equal } from "hsu-utils";
+
+export interface TextProps {
+  value?: string | number;
+  className?: string;
+  render?: (value?: string | number) => ReactNode;
+  jsonParseOptions?:
+    | {
+        hideEmpty?: boolean;
+      }
+    | false;
+  align?: "left" | "center" | "right";
+}
+
+const Text: React.FC<TextProps> = (props) => {
+  const {
+    value,
+    className,
+    render,
+    jsonParseOptions = {},
+    align = "left",
+  } = props;
+
+  const jsonParse = (value: string | number | undefined) => {
+    const { hideEmpty = true } = jsonParseOptions || {};
+
+    if (!value || typeof value === "number" || typeof +value === "number") {
+      return value;
+    }
+
+    try {
+      if (hideEmpty) {
+        const json = JSON.parse(value);
+
+        Object.keys(json)?.forEach((key) => {
+          if (
+            json[key] === null ||
+            json[key] === undefined ||
+            json[key] === "" ||
+            Equal.ObjEqual(json[key], {}) ||
+            Equal.ObjEqual(json[key], [])
+          ) {
+            delete json[key];
+          }
+        });
+
+        return JSON.stringify(json, null, 2);
+      }
+
+      return JSON.stringify(JSON.parse(value), null, 2);
+    } catch (error) {
+      return value;
+    }
+  };
+
+  return (
+    <div
+      className={classNames(styles.text, className)}
+      style={{
+        justifyContent:
+          align === "center"
+            ? "center"
+            : align === "right"
+            ? "flex-end"
+            : "flex-start",
+      }}
+    >
+      {render
+        ? render(jsonParseOptions ? jsonParse(value) : value)
+        : jsonParseOptions
+        ? jsonParse(value)
+        : value}
+    </div>
+  );
+};
+
+export interface FormTextProps extends ItemContainerProps {
+  componentProps?: TextProps;
+}
+
+const FormText: React.FC<FormTextProps> = (props) => {
+  const { componentProps, ...formItemProps } = props;
+
+  return (
+    <ItemContainer {...formItemProps}>
+      <Text {...componentProps} />
+    </ItemContainer>
+  );
+};
+
+export default FormText;

package/src/components/FormItem/FormTree/index.tsx

@@ -0,0 +1,33 @@
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+import Tree, { TreeProps } from "../../Tree";
+
+import React from "react";
+
+export interface FormTreeProps extends ItemContainerProps {
+  componentProps?: TreeProps;
+}
+
+const FormTree: React.FC<FormTreeProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { ...treeConfig } = componentProps;
+
+  return (
+    <ItemContainer
+      {...{ ...formItemProps, valuePropName: "checkedKeys" }}
+      className={`${itemClassName ?? ""}`}
+    >
+      <Tree
+        {...treeConfig}
+        disabled={treeConfig.disabled ?? disabled}
+        checkable
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormTree;