chore: slider to change width and height in image

2024-12-02 08:20:30 +08:00
parent 412c6dadca
commit ec2cd29096
24 changed files with 500 additions and 283 deletions
@@ -0,0 +1,114 @@
+import { INPUT_WIDTH } from '@/constants';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import {
+  Form,
+  InputNumber,
+  Slider,
+  Tooltip,
+  type SliderSingleProps
+} from 'antd';
+import React from 'react';
+import FieldWrapper from './field-wrapper';
+import SliderStyles from './styles/slider.less';
+
+interface SealSliderProps extends SliderSingleProps {
+  required?: boolean;
+  label?: React.ReactNode;
+  labelWidth?: number | string;
+  description?: string;
+  isInFormItems?: boolean;
+  inputnumber?: boolean;
+  checkStatus?: 'success' | 'error' | 'warning' | '';
+}
+
+const SealSlider: React.FC<SealSliderProps> = (props) => {
+  const {
+    label,
+    value,
+    required,
+    description,
+    isInFormItems = true,
+    max,
+    min,
+    step,
+    defaultValue,
+    checkStatus,
+    inputnumber = false,
+    labelWidth,
+    tooltip = { open: false },
+    ...rest
+  } = props;
+
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
+
+  const handleChange = (value: number) => {
+    props.onChange?.(value);
+  };
+
+  const handleInput = (value: number | null) => {
+    const newValue = value || 0;
+    props.onChange?.(newValue);
+  };
+
+  const renderLabel = React.useMemo(() => {
+    return (
+      <span
+        className={SliderStyles['slider-label']}
+        style={{ width: labelWidth || INPUT_WIDTH.mini }}
+      >
+        <span className="text">
+          {description ? (
+            <Tooltip title={description}>
+              <span> {label}</span>
+              <span className="m-l-5">
+                <InfoCircleOutlined />
+              </span>
+            </Tooltip>
+          ) : (
+            <span>{label}</span>
+          )}
+        </span>
+
+        {inputnumber ? (
+          <InputNumber
+            className="label-val"
+            variant="outlined"
+            size="small"
+            value={value}
+            controls={false}
+            onChange={handleInput}
+          ></InputNumber>
+        ) : (
+          <span className="val">{value}</span>
+        )}
+      </span>
+    );
+  }, [label, labelWidth, description, value, max, min, step, defaultValue]);
+  return (
+    <FieldWrapper
+      required={required}
+      status={checkStatus || status}
+      label={renderLabel}
+      style={{ padding: '20px 2px 0' }}
+      variant="borderless"
+    >
+      <Slider
+        {...rest}
+        defaultValue={defaultValue}
+        max={max}
+        min={min}
+        step={step}
+        style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
+        tooltip={tooltip}
+        value={value}
+        onChange={handleChange}
+      ></Slider>
+    </FieldWrapper>
+  );
+};
+
+export default SealSlider;