@fe-free/core 2.5.6 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @fe-free/core
 
+## 2.6.0
+
+### Minor Changes
+
+- feat: slider
+
+### Patch Changes
+
+- @fe-free/tool@2.6.0
+
+## 2.5.7
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@2.5.7
+
 ## 2.5.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.5.6",
+  "version": "2.6.0",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.5.6"
+    "@fe-free/tool": "2.6.0"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/crud_of_pure/index.tsx

@@ -41,6 +41,8 @@ function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRU
     <div
       className={classNames('fec-crud-of-pure', {
         'fec-crud-of-pure-no-search': noSearch,
+        // 先这样实现
+        'fec-crud-of-pure-no-toolbar': !props.actions.includes('create'),
       })}
     >
       <CRUD

package/src/crud_of_pure/style.scss

@@ -4,7 +4,7 @@
   }
 
   .ant-pro-query-filter.ant-pro-query-filter {
-    padding: 8px 16px;
+    padding: 16px;
   }
 
   .ant-pro-card .ant-pro-card-body {
@@ -40,12 +40,18 @@
   }
 
   .ant-pro-table-list-toolbar-container {
-    padding-block: 0 8px;
+    padding-block: 0 16px;
   }
 
   &.fec-crud-of-pure-no-search {
     .ant-pro-table-list-toolbar-container {
-      padding-block-start: 8px;
+      padding-block-start: 16px;
+    }
+  }
+
+  &.fec-crud-of-pure-no-toolbar {
+    .ant-pro-table-list-toolbar-container {
+      padding-block: 0;
     }
   }
 }

package/src/index.ts

@@ -43,6 +43,8 @@ export type { InfiniteListProps } from './infinite_list';
 export { Markdown } from './markdown';
 export { PageLayout } from './page_layout';
 export { routeTool } from './route';
+export { NumberSlider, PercentageSlider } from './slider';
+export type { NumberSliderProps, PercentageSliderProps } from './slider';
 export { Table } from './table';
 export type { TableProps } from './table';
 export { Tabs } from './tabs';

package/src/slider/index.tsx

@@ -0,0 +1,124 @@
+import { InputNumber, Slider } from 'antd';
+import classNames from 'classnames';
+import { useCallback, useMemo } from 'react';
+import './style.scss';
+
+interface NumberSliderProps {
+  /** 默认 0 */
+  value?: number;
+  onChange: (value: number) => void;
+  /** 默认 0 */
+  min?: number;
+  /** 默认 100 */
+  max?: number;
+  /** 默认 1 */
+  step?: number;
+  /** 输入框的数值精度，默认 0 */
+  precision?: number;
+}
+
+function NumberSlider(props: NumberSliderProps) {
+  const { value = 0, onChange, min = 0, max = 100, step = 1, precision = 0 } = props;
+  return (
+    <div className="flex gap-2">
+      <div className="flex-1">
+        <Slider
+          value={value}
+          onChange={onChange}
+          min={min}
+          max={max}
+          step={step}
+          marks={{
+            [min]: min,
+            [value]: value,
+            [max]: max,
+          }}
+        />
+      </div>
+      <div>
+        <InputNumber
+          value={value}
+          onChange={(v) => onChange(v ?? 0)}
+          min={min}
+          max={max}
+          step={step}
+          precision={precision}
+        />
+      </div>
+    </div>
+  );
+}
+
+interface PercentageSliderProps {
+  /** 百分占比数组 */
+  value: number[];
+  onChange: (value: number[]) => void;
+  /** 默认 0 */
+  min?: number;
+  /** 默认 100 */
+  max?: number;
+  /** 默认 1 */
+  step?: number;
+  className?: string;
+}
+
+function PercentageSlider(props: PercentageSliderProps) {
+  const { value, onChange, min = 0, max = 100, step = 1, className } = props;
+
+  const sliderValue = useMemo(() => {
+    let sum = min;
+    return value
+      .map((v) => {
+        sum += v;
+        return sum;
+      })
+      .slice(0, -1);
+  }, [value, min]);
+
+  const handleChange = useCallback(
+    (newValue: number[]) => {
+      const result = [...newValue, max].map((v, i) => v - (newValue[i - 1] || min));
+      onChange(result);
+    },
+    [max, min, onChange],
+  );
+
+  const marks = useMemo(() => {
+    const result = {
+      [min]: min,
+      [max]: max,
+    };
+
+    [...sliderValue, max].forEach((v, i) => {
+      const m = value[i] / 2 + (sliderValue[i - 1] || min);
+      result[m] = value[i];
+      // result[v] = value[i];
+    });
+
+    return result;
+  }, [min, max, sliderValue, value]);
+
+  return (
+    <Slider
+      value={sliderValue}
+      onChange={handleChange}
+      min={min}
+      max={max}
+      step={step}
+      range
+      marks={marks}
+      styles={{
+        rail: {
+          backgroundColor: '#91caff',
+        },
+        track: {
+          backgroundColor: 'transparent',
+        },
+      }}
+      className={classNames('fec-slider', className)}
+    />
+  );
+}
+
+export { NumberSlider, PercentageSlider };
+export type { NumberSliderProps, PercentageSliderProps };

package/src/slider/number_slider.stories copy.tsx

@@ -0,0 +1,32 @@
+import { NumberSlider } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+const meta: Meta<typeof NumberSlider> = {
+  title: '@fe-free/core/NumberSlider',
+  component: NumberSlider,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NumberSlider>;
+
+function Render(args: Story['args']) {
+  const [value, setValue] = useState(0);
+  return <NumberSlider value={value} onChange={setValue} {...args} />;
+}
+
+export const Basic: Story = {
+  args: {},
+  render: Render,
+};
+
+export const One: Story = {
+  args: {
+    max: 1,
+    step: 0.1,
+    precision: 1,
+  },
+  render: Render,
+};

package/src/slider/percentage_slider.stories.tsx

@@ -0,0 +1,23 @@
+import { PercentageSlider } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+const meta: Meta<typeof PercentageSlider> = {
+  title: '@fe-free/core/PercentageSlider',
+  component: PercentageSlider,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PercentageSlider>;
+
+function Render(args: Story['args']) {
+  const [value, setValue] = useState([10, 30, 60]);
+  return <PercentageSlider value={value} onChange={setValue} {...args} />;
+}
+
+export const Basic: Story = {
+  args: {},
+  render: Render,
+};

package/src/slider/style.scss

@@ -0,0 +1,16 @@
+.fec-slider {
+  .ant-slider-step {
+    .ant-slider-dot {
+      visibility: hidden;
+
+      &:first-child,
+      &:last-child {
+        visibility: visible;
+      }
+    }
+  }
+
+  .ant-slider-mark-text {
+    color: inherit !important;
+  }
+}