shineout 3.0.0-alpha.2 → 3.0.0-alpha.3

package/cjs/collapse/__example__/06-extra.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 额外操作
+ *    -- 自定义渲染每个面板的扩容内容
+ * en - Extra
+ *    -- Customize the extra content of each panel
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Collapse, {
+      defaultActive: ['1'],
+      style: {
+        maxWidth: 1180
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 1",
+        keygen: "0",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 2",
+        keygen: "1",
+        extra: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+          style: {
+            margin: 0
+          },
+          children: "checkbox"
+        }),
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 3",
+        keygen: "2",
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      })]
+    })
+  });
+};
+exports.default = _default;

package/cjs/collapse/__example__/07-icon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/collapse/__example__/07-icon.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 展开图标位置
+ *    -- 可设置是否显示展开图标以及图标展示的位置
+ * en - Icon position
+ *    -- You can set whether to display the expand icon and the position of the icon
+ */
+var _default = function _default() {
+  var iconPosition = ['left', 'right', 'none'];
+  var regions = ['header', 'icon', 'disabled'];
+  var _React$useState = _react.default.useState('left'),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    position = _React$useState2[0],
+    setPosition = _React$useState2[1];
+  var _React$useState3 = _react.default.useState('header'),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    region = _React$useState4[0],
+    setRegion = _React$useState4[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Radio.Group, {
+      keygen: true,
+      data: iconPosition,
+      value: position,
+      onChange: function onChange(d) {
+        return setPosition(d);
+      },
+      style: {
+        marginBottom: 24
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Radio.Group, {
+      keygen: true,
+      data: regions,
+      value: region,
+      onChange: function onChange(d) {
+        return setRegion(d);
+      },
+      style: {
+        marginBottom: 24
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Collapse, {
+      style: {
+        maxWidth: 1180
+      },
+      triggerRegion: region,
+      expandIconPosition: position !== 'none' && position,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 1",
+        keygen: "0",
+        showExpandIcon: position !== 'none',
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 2",
+        keygen: "1",
+        showExpandIcon: position !== 'none',
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Collapse.Item, {
+        title: "This is panel header 3",
+        keygen: "2",
+        showExpandIcon: position !== 'none',
+        children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings."
+      })]
+    })]
+  });
+};
+exports.default = _default;

package/cjs/collapse/collapse-item.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CollapseItemProps } from './collapse-item.type';
+declare const CollapseItem: (props: CollapseItemProps) => JSX.Element;
+export default CollapseItem;

package/cjs/collapse/collapse-item.js

@@ -0,0 +1,30 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _base = require("@sheinx/base");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var CollapseItem = function CollapseItem(props) {
+  var collapseItemStyle = (0, _shineoutStyle.useCollapseItemStyle)();
+  var jssStyle = (0, _react.useMemo)(function () {
+    return {
+      collapseItem: collapseItemStyle
+    };
+  }, [collapseItemStyle]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.CollapseItem, _objectSpread({
+    jssStyle: jssStyle
+  }, props));
+};
+var _default = CollapseItem;
+exports.default = _default;

package/cjs/collapse/collapse-item.type.d.ts

@@ -0,0 +1,2 @@
+import { CollapseItemProps as UnStyledCollapseItemProps } from '@sheinx/base';
+export declare type CollapseItemProps = Omit<UnStyledCollapseItemProps, 'jssStyle'>;

package/cjs/collapse/collapse-item.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/collapse/collapse.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CollapseProps } from './collapse.type';
+declare const Collapse: (props: CollapseProps) => JSX.Element;
+export default Collapse;

package/cjs/collapse/collapse.js

@@ -0,0 +1,30 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _base = require("@sheinx/base");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Collapse = function Collapse(props) {
+  var collapseStyle = (0, _shineoutStyle.useCollapseStyle)();
+  var jssStyle = (0, _react.useMemo)(function () {
+    return {
+      collapse: collapseStyle
+    };
+  }, [collapseStyle]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Collapse, _objectSpread({
+    jssStyle: jssStyle
+  }, props));
+};
+var _default = Collapse;
+exports.default = _default;

package/cjs/collapse/collapse.type.d.ts

@@ -0,0 +1,2 @@
+import { CollapseProps as UnStyledCollapseProps } from '@sheinx/base';
+export declare type CollapseProps = Omit<UnStyledCollapseProps, 'jssStyle'>;

package/cjs/collapse/collapse.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/collapse/index.d.ts

@@ -0,0 +1,13 @@
+import Collapse from './collapse';
+import CollapseItem from './collapse-item';
+declare type RefCollapse = typeof Collapse;
+declare type RefCollapseItem = typeof CollapseItem;
+interface ItemComponent extends RefCollapseItem {
+    displayName: string;
+}
+export interface CollapseComponent extends RefCollapse {
+    Item: ItemComponent;
+    displayName: string;
+}
+declare const CollapseComp: CollapseComponent;
+export default CollapseComp;

package/cjs/collapse/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _collapse = _interopRequireDefault(require("./collapse"));
+var _collapseItem = _interopRequireDefault(require("./collapse-item"));
+var Item = _collapseItem.default;
+Item.displayName = 'ShineoutCollapseItem';
+var CollapseComp = _collapse.default;
+CollapseComp.Item = Item;
+CollapseComp.displayName = 'ShineoutCollapse';
+var _default = CollapseComp;
+exports.default = _default;

package/cjs/collapse/interface.d.ts

@@ -0,0 +1 @@
+export type { CollapseProps as Props } from './collapse.type';

package/cjs/collapse/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/date-picker/__example__/01-base.js

@@ -17,7 +17,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var App = function App() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
-    showSelNow: true
+    showSelNow: true,
+    onChange: function onChange(v) {
+      return console.log(v);
+    }
   });
 };
 var _default = App;

package/cjs/date-picker/__example__/16-clearable.js

@@ -35,9 +35,9 @@ var App = function App() {
       clearWithUndefined: true,
       onChange: setValue,
       style: {
-        marginBottom: 8
+        marginBottom: 16
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Input.Group, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Input.Group, {
       style: {
         width: 150
       },

package/cjs/date-picker/__example__/19-format.js

@@ -56,13 +56,13 @@ var App = function App() {
       type: "datetime",
       placeholder: "format date",
       style: {
-        marginBottom: 5
+        marginBottom: 16
       },
       onChange: setValue
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Input.Group, {
       width: 240,
       style: {
-        marginBottom: 20
+        marginBottom: 32
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         style: {
@@ -86,12 +86,12 @@ var App = function App() {
       formatResult: formatResult,
       onChange: setFormatResultValue,
       style: {
-        marginBottom: 5
+        marginBottom: 16
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Input.Group, {
       width: 240,
       style: {
-        marginBottom: 5
+        marginBottom: 16
       },
       disabled: true,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
@@ -108,9 +108,6 @@ var App = function App() {
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Input.Group, {
       width: 240,
-      style: {
-        marginBottom: 20
-      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         style: {
           flex: 3

package/cjs/descriptions/__example__/01-base.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/descriptions/__example__/01-base.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 基本用法
+ *    -- 描述列表的基本样式
+ * en - Basic
+ *    -- Basic usage of Descriptions
+ */
+
+var data = [{
+  label: 'Name',
+  value: 'Mai Mai'
+}, {
+  label: 'Residence',
+  value: 'Beijing'
+}, {
+  label: 'Address',
+  value: 'Yingdu Building'
+}, {
+  label: 'Mobile',
+  value: '187-2323-9834'
+}, {
+  label: 'Hometown',
+  value: 'Beijing'
+}];
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      colon: " :"
+    })
+  });
+};
+exports.default = _default;

package/cjs/descriptions/__example__/02-colums.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/descriptions/__example__/02-colums.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 单列样式
+ *    -- 单列的描述列表样式
+ * en - One Colums
+ *    -- One colums style of Descriptions
+ */
+
+var data = [{
+  label: 'Name',
+  value: 'Mai Mai'
+}, {
+  label: 'Mobile',
+  value: '187-2323-9834'
+}, {
+  label: 'Residence',
+  value: 'Beijing'
+}];
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      layout: "horizontal",
+      column: 1,
+      style: {
+        marginBottom: '24px'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      layout: "horizontal",
+      column: 1,
+      labelStyle: {
+        textAlign: 'right'
+      }
+    })]
+  });
+};
+exports.default = _default;

package/cjs/descriptions/__example__/03-alignment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/descriptions/__example__/03-alignment.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 标签文本对齐
+ *    -- 标签文本可以设置左对齐、右对齐，也可以设置垂直的样式排列
+ * en - Label text alignment
+ *    -- The label text can be set to left-aligned, right-aligned, and can also be set to vertical style arrangement
+ */
+
+var data = [{
+  label: 'Name',
+  value: 'Mai Mai'
+}, {
+  label: 'Residence',
+  value: 'Beijing'
+}, {
+  label: 'Address',
+  value: 'Yingdu Building'
+}, {
+  label: 'Hometown',
+  value: 'Beijing'
+}, {
+  label: 'Mobile',
+  value: '187-2323-9834'
+}];
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      layout: "horizontal",
+      colon: " :",
+      style: {
+        marginBottom: '24px'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      layout: "horizontal",
+      colon: " :",
+      labelStyle: {
+        textAlign: 'right'
+      },
+      style: {
+        marginBottom: '24px'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      layout: "vertical",
+      colon: " :",
+      labelStyle: {
+        paddingBottom: '2px'
+      }
+    })]
+  });
+};
+exports.default = _default;

package/cjs/descriptions/__example__/04-border.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/descriptions/__example__/04-border.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 带边框展示
+ *    -- 带边框和背景颜色的列表
+ * en - Show With Border
+ *    -- List with border and background color
+ */
+
+var data = [{
+  label: 'Name',
+  value: 'Mai Mai'
+}, {
+  label: 'Residence',
+  value: 'Beijing'
+}, {
+  label: 'Address',
+  value: 'Yingdu Building,Zhichun Road,Beijing'
+}, {
+  label: 'Mobile',
+  value: '187-2323-9834'
+}, {
+  label: 'Hometown',
+  value: 'Beijing'
+}];
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      layout: "horizontal",
+      border: true,
+      tableLayout: "fixed",
+      style: {
+        marginBottom: '20px'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      layout: "horizontal",
+      border: true,
+      tableLayout: "fixed",
+      labelStyle: {
+        textAlign: 'right'
+      },
+      style: {
+        marginBottom: '20px'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      layout: "vertical",
+      border: true,
+      tableLayout: "fixed",
+      column: 4
+    })]
+  });
+};
+exports.default = _default;

package/cjs/descriptions/__example__/05-arrangement.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;