@hw-component/form 0.0.2 → 0.0.4

package/es/DatePicker/RangePicker.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { IRangePickerProps } from "@/components/DatePicker/modal";
+import type { IRangePickerProps } from "@/components/DatePicker/modal";
 declare const _default: ({ value, onChange, showTime, ...props }: IRangePickerProps) => JSX.Element;
 export default _default;

package/es/DatePicker/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { IDatePickerProps } from "@/components/DatePicker/modal";
+import type { IDatePickerProps } from "@/components/DatePicker/modal";
 declare const _default: ({ value, onChange, showTime, format, ...props }: IDatePickerProps) => JSX.Element;
 export default _default;

package/es/Select/components/AllSelect.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { HSelectProps } from "@/components/Select/modal";
+import "../index.less";
 interface IProps extends HSelectProps {
     checked?: boolean;
 }

package/es/Select/components/AllSelect.js

@@ -1,8 +1,8 @@
 // welcome to ww-building-blocks-tmp
 import React from 'react';
 import { Space, Checkbox } from 'antd';
-import styles from '../index.less.js';
 import { itemOpProvider } from '../utils.js';
+import { useClassName } from '../../hooks/useClassName.js';
 
 var AllSelect = (function (_ref) {
   var allSelect = _ref.allSelect,
@@ -17,6 +17,7 @@ var AllSelect = (function (_ref) {
   }
   var opLen = (options === null || options === void 0 ? void 0 : options.length) || 0;
   var checked = (value === null || value === void 0 ? void 0 : value.length) >= opLen;
+  var optionsClassName = useClassName("hw-option");
   var change = function change() {
     if (!checked) {
       var subItemOps = itemOpProvider(options, fieldNames);
@@ -26,7 +27,7 @@ var AllSelect = (function (_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange([], []);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "ant-select-item ant-select-item-option ".concat(styles.option),
+    className: "ant-select-item ant-select-item-option ".concat(optionsClassName),
     onClick: change
   }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Checkbox, {
     checked: checked

package/es/hooks/useClassName.d.ts

@@ -0,0 +1 @@
+export declare const useClassName: (className: string) => string;

package/es/hooks/useClassName.js

@@ -0,0 +1,15 @@
+// welcome to ww-building-blocks-tmp
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js/instance/concat';
+import { useContext, useMemo } from 'react';
+import { ConfigContext } from 'antd/es/config-provider';
+
+var useClassName = function useClassName(className) {
+  var config = useContext(ConfigContext);
+  return useMemo(function () {
+    var _context;
+    return _concatInstanceProperty(_context = "".concat(config.getPrefixCls(), "-")).call(_context, className);
+  }, [className]);
+};
+
+export { useClassName };
+// powered by ww

package/es/index.css

@@ -1,3 +1,3 @@
-.option:hover {
+.ant-hw-option:hover {
   background-color: #f5f5f5;
 }

package/lib/DatePicker/RangePicker.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { IRangePickerProps } from "@/components/DatePicker/modal";
+import type { IRangePickerProps } from "@/components/DatePicker/modal";
 declare const _default: ({ value, onChange, showTime, ...props }: IRangePickerProps) => JSX.Element;
 export default _default;

package/lib/DatePicker/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { IDatePickerProps } from "@/components/DatePicker/modal";
+import type { IDatePickerProps } from "@/components/DatePicker/modal";
 declare const _default: ({ value, onChange, showTime, format, ...props }: IDatePickerProps) => JSX.Element;
 export default _default;

package/lib/Select/components/AllSelect.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { HSelectProps } from "@/components/Select/modal";
+import "../index.less";
 interface IProps extends HSelectProps {
     checked?: boolean;
 }

package/lib/Select/components/AllSelect.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var antd = require('antd');
-var index = require('../index.less.js');
 var utils = require('../utils.js');
+var useClassName = require('../../hooks/useClassName.js');
 
 var AllSelect = (function (_ref) {
   var allSelect = _ref.allSelect,
@@ -20,6 +20,7 @@ var AllSelect = (function (_ref) {
   }
   var opLen = (options === null || options === void 0 ? void 0 : options.length) || 0;
   var checked = (value === null || value === void 0 ? void 0 : value.length) >= opLen;
+  var optionsClassName = useClassName.useClassName("hw-option");
   var change = function change() {
     if (!checked) {
       var subItemOps = utils.itemOpProvider(options, fieldNames);
@@ -29,7 +30,7 @@ var AllSelect = (function (_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange([], []);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "ant-select-item ant-select-item-option ".concat(index.default.option),
+    className: "ant-select-item ant-select-item-option ".concat(optionsClassName),
     onClick: change
   }, /*#__PURE__*/React.createElement(antd.Space, null, /*#__PURE__*/React.createElement(antd.Checkbox, {
     checked: checked

package/lib/hooks/useClassName.d.ts

@@ -0,0 +1 @@
+export declare const useClassName: (className: string) => string;

package/lib/hooks/useClassName.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/concat');
+var React = require('react');
+var configProvider = require('antd/es/config-provider');
+
+var useClassName = function useClassName(className) {
+  var config = React.useContext(configProvider.ConfigContext);
+  return React.useMemo(function () {
+    var _context;
+    return _concatInstanceProperty(_context = "".concat(config.getPrefixCls(), "-")).call(_context, className);
+  }, [className]);
+};
+
+exports.useClassName = useClassName;
+// powered by h

package/lib/index.css

@@ -1,3 +1,3 @@
-.option:hover {
+.ant-hw-option:hover {
   background-color: #f5f5f5;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",
@@ -66,7 +66,7 @@
     "postcss-less": "^6.0.0",
     "rollup": "^3.23.0",
     "rollup-plugin-clear": "^2.0.7",
-    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-postcss": "4.0.0",
     "rollup-plugin-typescript2": "^0.34.1",
     "style-loader": "^3.3.3",
     "stylelint": "13.13.1",

package/scripts/rollup.config.js

@@ -4,11 +4,11 @@ const { nodeResolve } = require("@rollup/plugin-node-resolve");
 const { babel } = require("@rollup/plugin-babel");
 const commonjs = require("@rollup/plugin-commonjs");
 const typescript = require("rollup-plugin-typescript2");
-const postcss = require("rollup-plugin-postcss");
 const autoprefixer = require("autoprefixer");
 const inject = require("@rollup/plugin-inject");
 const url = require("@rollup/plugin-url");
 const pkg = require("../package.json");
+const postcss = require("rollup-plugin-postcss");
 const prefix = pkg.cssPrefix;
 const input = path.resolve(__dirname, "../src/components/index.tsx");
 const outDir = path.resolve(__dirname, "../lib");
@@ -43,9 +43,6 @@ module.exports = {
     }),
     postcss({
       extract: "index.css",
-      modules: {
-        generateScopedName: `${prefix}_[local]`,
-      },
       plugins: [
         autoprefixer({
           overrideBrowserslist: [

package/scripts/webpack.config.js

@@ -46,7 +46,14 @@ module.exports = {
               modules: true,
             },
           },
-          "less-loader",
+          {
+            loader: "less-loader",
+            options:{
+              lessOptions:{
+                javascriptEnabled: true,
+              }
+            }
+          }
         ],
       },
     ],

package/src/components/DatePicker/RangePicker.tsx

@@ -1,7 +1,19 @@
-import {DatePicker} from 'antd';
-import {IRangePickerProps} from "@/components/DatePicker/modal";
+import { DatePicker } from "antd";
+import type { IRangePickerProps } from "@/components/DatePicker/modal";
 const { RangePicker } = DatePicker;
 
-export default ({value,onChange,showTime=true,...props}:IRangePickerProps)=>{
-    return <RangePicker value={value} onChange={value} showTime={showTime} {...props}/>
-}
+export default ({
+  value,
+  onChange,
+  showTime = true,
+  ...props
+}: IRangePickerProps) => {
+  return (
+    <RangePicker
+      value={value}
+      onChange={value}
+      showTime={showTime}
+      {...props}
+    />
+  );
+};

package/src/components/DatePicker/index.tsx

@@ -4,7 +4,7 @@ import { DatePicker } from "antd";
 import { useMemo } from "react";
 import type { Moment } from "moment";
 import moment from "moment";
-import {IDatePickerProps} from "@/components/DatePicker/modal";
+import type { IDatePickerProps } from "@/components/DatePicker/modal";
 
 export default ({
   value,

package/src/components/DatePicker/modal.d.ts

@@ -1,16 +1,17 @@
-import {RangePickerProps} from "antd/es/date-picker";
-import {SharedTimeProps} from "rc-picker/lib/panels/TimePanel";
-import {Moment} from "moment";
-import {DatePickerProps} from "antd";
+import type { RangePickerProps } from "antd/es/date-picker";
+import type { SharedTimeProps } from "rc-picker/lib/panels/TimePanel";
+import type { Moment } from "moment";
+import type { DatePickerProps } from "antd";
 
-export  interface IDatePickerProps extends Omit<DatePickerProps, "onChange" | "format"> {
-    onChange?: (time?: Moment | string | number) => void;
-    format?: string;
-    showTime?: boolean | SharedTimeProps<Moment>;
+export interface IDatePickerProps
+  extends Omit<DatePickerProps, "onChange" | "format"> {
+  onChange?: (time?: Moment | string | number) => void;
+  format?: string;
+  showTime?: boolean | SharedTimeProps<Moment>;
 }
 
-export interface IRangePickerProps extends RangePickerProps{
- value?:any;
- onChange?:(val:any)=>void;
- showTime?: boolean | { defaultValue?: Moment[]};
-}
+export interface IRangePickerProps extends RangePickerProps {
+  value?: any;
+  onChange?: (val: any) => void;
+  showTime?: boolean | { defaultValue?: Moment[] };
+}

package/src/components/Select/components/AllSelect.tsx

@@ -1,7 +1,8 @@
 import type { HSelectProps } from "@/components/Select/modal";
 import { Checkbox, Space } from "antd";
-import styles from "../index.less";
+import "../index.less";
 import { itemOpProvider } from "../utils";
+import { useClassName } from "../../hooks/useClassName";
 interface IProps extends HSelectProps {
   checked?: boolean;
 }
@@ -19,6 +20,7 @@ export default ({
   }
   const opLen = options?.length || 0;
   const checked = (value as any[])?.length >= opLen;
+  const optionsClassName = useClassName("hw-option");
   const change = () => {
     if (!checked) {
       const subItemOps = itemOpProvider(options, fieldNames);
@@ -29,7 +31,7 @@ export default ({
   };
   return (
     <div
-      className={`ant-select-item ant-select-item-option ${styles.option}`}
+      className={`ant-select-item ant-select-item-option ${optionsClassName}`}
       onClick={change}
     >
       <Space>

package/src/components/Select/index.less

@@ -1,4 +1,5 @@
-.option {
+@import '../styles/local.less';
+.@{ant-prefix}-hw-option {
   &:hover {
     background-color: #f5f5f5;
   }

package/src/components/hooks/useClassName.ts

@@ -0,0 +1,9 @@
+import {useContext, useMemo} from "react";
+import {ConfigContext} from "antd/es/config-provider";
+
+export const useClassName = (className: string) => {
+  const config=useContext(ConfigContext);
+  return useMemo(() => {
+    return `${config.getPrefixCls()}-${className}`;
+  }, [className]);
+};

package/src/components/index.tsx

@@ -9,4 +9,3 @@ export { default as HRadioGroup } from "./RadioGroup";
 export { default as HSwitch } from "./Switch";
 export { default as HDatePicker } from "./DatePicker";
 export { default as HRangePicker } from "./DatePicker/RangePicker";
-

package/src/components/styles/local.less

@@ -0,0 +1 @@
+@ant-prefix:ant;

package/src/pages/DatePicker/index.tsx

@@ -1,5 +1,5 @@
 import { Space } from "antd";
-import { HDatePicker ,HRangePicker} from "../../components";
+import { HDatePicker, HRangePicker } from "../../components";
 export default () => {
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
@@ -9,7 +9,7 @@ export default () => {
           console.log(val);
         }}
       />
-      <HRangePicker/>
+      <HRangePicker />
     </Space>
   );
 };

package/es/Select/index.less.js

@@ -1,5 +0,0 @@
-// welcome to ww-building-blocks-tmp
-var styles = undefined;
-
-export { styles as default };
-// powered by ww

package/lib/Select/index.less.js

@@ -1,8 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styles = undefined;
-
-exports.default = styles;
-// powered by h